Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.

Bin-Blog

Creating shadows in Gimp

Shadows are an integral part of Web 2.0 design. Here are a few ways to create a shadow in Gimp...

Open the image you want to 'shadowify'. Choose 'Script-Fu->Shadow->Drop Shadow...'. This will enlarge the image and give it a shadow. If you really want to see the shadow, create a new layer and move it to the bottom of the stack. Then give the new layer a white background. You should get a shadow like this...

This is the easy way of creating a shadow. You can create a shadow manually too. First, create a new image and put the image you want to 'shadowify'(whats the use of creating a new word if you don't use it?) inside it. Duplicate the newly inserted layer and choose the Perspective tool(Shift+P). Modify one of the layers - give it the position where the shadow would fall...

Select this layer - right click on the layer on the layer panel and select 'Alpha to Selection'. This will select the visible portion of the layer. Now colour the full selection black. This should give the image a shadow like appearance. It will be a bit ugly at this point...

Right click the shadow layer in the Layers Panel and select 'Layer to Image Size'. Now, go to 'Filters->Blur->Gaussian Blur'. This should blur out the shadow. Change the opacity of the shadow layer to something you are more comfortable with. Now you have a decent shadow...

You can position the shadow layer to create any kind of shadow you need. Some samples I cooked up...

You can use the other methods we touched earlier like reflections to create some very good results...

And, by the way, the screenshot is not of a Mac application - nor is it a image of winamp. It is xmms - a MP3 player for linux with a Winamp skin called 'IMac_v2'.

Filed Under...

Read More...

Creating Reflections for Logos in Gimp

So far, we have seen how to create Buttons and violaters using Gimp. Now let us see how to create Logos using the reflection trick. Reflections or wet surfaces have been used in many 'Web 2.0' Logos. I used this technique to create my OpenJS.com logo. This is very easy to do - once you get the idea.

Create a image with height 100px and Width 200px with white background.

Using the Text tool, write the text of the logo with a reasonably big font size(we are web 2.0, aren't we?). Now you should have this...

Go to the layers panel(Ctrl+L) and duplicate the layer() with the text of our logo...

Using the flip tool() vertically flip the new layer and position it under the old layer using the Move tool. Now we should have something like...

In the layers panel, right click the flipped layer and select 'Add Layer Mask' and select 'White(Full opacity)'. You should see something like this in the layers panel...

Make sure that the flipped layer's mask is selected - and choose the Gradient Tool(). Make sure the selected colors are Black and white...

Now create a gradient like this in the flipped layer's mask...

If done correctly, the layer panel will look like this...

And the result will be like this...

You can tweak this image to get the perfect logo. I removed some unwanted stuff, and made the reflection layer a bit more transparent. Get the XCF File for this tutorial to see the result.

Read More...

Digg Frontpage Redesigned

Digg have redesigned their entire site - I kind of liked the old design better. Just give me some time - I will get used to it. The biggest complaint I have is that the blue and green header just don't match.

Digg have create three top level sections...

There are some other changes too - they seem to have removed the link to the befriended page. This should be due to the criticism they have received about top users in digg. But as of yet, only the link to the page is removed. The page is still there. In my case it is...
http://www.digg.com/users/binnyva/friends/befriended

To get your page, just use your username instead of binnyva in the above URL.

Those are the changes I found by doing a little digging(no pun intended) - will let you know more when I have time.

Read More...

LocateR - Ruby/Tk Script

I have created a small program in Ruby/Tk called LocateR. This is a small GUI for the 'locate' command on Linux system. This will search the computer using the locate command and will show the results in that window itself. Using the locate command is much quicker than searching for a file in the traditional way(find).

Download LocateR V 1.00.A Beta - 2.1 KB Tar.Gzipped File

If you know ruby, could you review the code and give me some feedback? I am relatively new to Ruby - and I want to improve in that area. Especially in connection to rails.

LocateR - Screenshot

Filed Under...

Read More...

Creating Badges/Violators using Gimp

In the last post we saw how to create a Button using Gimp - now to create another prominent element of Web 2.0 design - badges or violators. Very useful for under construction beta sites.

Create a new image, with 200x200 size and a white background.

The Star

Select 'Filters->Render->Gfig...'

Select the star tool(). Now increase the number of sides to 12. Then click 'Browse' and select the 1 pixel brush. Now click and drag anywhere inside the image to create a star. Try to make the star appear at the middle of the picture.

Select the 'Move Single Point' tool() and move the corner of the star to create this image.

Click 'Close' to go to the image window. The star we created should show up there. Choose the 'Continuous Region Select' Tool() and click the inside the star - this should select the star.

Gradient Fill

After this we have to create a gradient inside this star. For that, choose two different colors as your primary and secondary colors. I used #4d4c4c and #d0d0d0. Select the gradient tool() and set the 'Shape' as 'Radial'. Create the gradient inside the star.

You should get something like this...

Shadow

Select the full star by clicking outside the star. This selects everything other than the star. Now inverse the selection using 'Select->Invert' - this should select just the star.

Select 'Script-Fu->Shadow->Drop-Shadow...' and enter these values and click 'OK' to create the shadow.

  • Offset X : 2
  • Offset Y : 2
  • Blur Radius : 4

Now you should have this...

Use the text tool() to write whatever you want inside the star. 'Beta' is a favorite for Web 2.0 Designers everywhere. You can even give a tilt to the text using the 'Rotate' tool - if you wish.

This is what I had in the end...

The XCF file for this exercise.

Read More...

Using Gimp to make Web 2.0 Buttons and Graphics

There are many tutorials about creating buttons and graphics in the new 'Web 2.0' style. Unfortunately, all these tutorials are for Photoshop users. The Gimp users are completely ignored. So, I have decided to correct this error - this is a tutorial on how to create a Web 2.0 style button in Linux using Gimp(will work in windows as well).

In this tutorial we will see how to create a Web 2.0 button - you know the kind I am talking about. Rounded corners, gradients, 3D effect - the works. I am using Gimp 2.2.8 in this tutorial. Before starting, get the latest stable version of Gimp(right now it is 2.2.13). Somewhat earlier versions will work as well - if it supports the rounded selection option(more about that later).

Create the Image

If you are ready, lets get to business. First create a new image with the following specifications...

  • Width - 200px
  • Height - 100px
  • Background - Transparent
New Image in Gimp

The Button

Now create a rectangle selection(Rectangle Selection button) with the height and width of the button we are going to create.

New selection

Click on 'Select->Rounded Rectangle' on the menu bar. If this option is not there, you are using an old version of Gimp. Try 'Script-Fu->Selection->Round'. If that is also not there, you are using a really old version of Gimp. Either upgrade you gimp to a newer version or learn how to make a rounded selection in the old way. Click OK in the 'Rounded Rectangle' Dialog to make our rectangle selection, well, rounded.

Now fill it with a web 2.0 colour - anything bright and/or blinding will do fine. We will use the color of the RSS icon(#f48f35) - you cannot get any more Web 2.0'er than that. Now you should have something like this...

The Highlight

The next step is to create a small rounded rectangle selection inside this rectangle at the top. Use the same methods as described above. The result will look like this...

Create a rounded rectangle inside the last one

Create a new layer and select the Gradient Tool(Gradient tool or L on the keyboard). Create a gradient in the new layer like this.

Now you have...

Text

Now add the text using the text tool( ). I use a white color with 'Ellinia CLM Bold' as the font. You can choose what ever you want.

That's it - you got a button that is as Web 2.0 as del.icio.us. You may have to tweak the transparency of the layers to make it look perfect. You can make it a bit better by using a small shadow of the outer rounded rectangle with the color #f48f35. You can do this by selecting the layer with the outer rectangle and selecting 'Scrit-Fu->Shadow->Drop Shadow'

To see the full effect giving the image a white background - create a new layer, move it to the bottom of the layer stack and fill it with white color.

That's it!

Now you have the final image. Is this Web 2.0 or what?

The XCF file of this button.

Photoshop Tutorials

There many photoshop tutorials to do this. Go read them, get the idea of how to do it, and use gimp to do it.

Now, let me see how to create those 'badges'(or violators) in Linux.

Filed Under...

Read More...

Subscribe to : Posts