Photoshop Vista-like website Tutorial, done with the GIMP.

Posted by Elf Sternberg as Design

Every day, I have little stabs of envy when I see the Photoshop tutorials for zarious cool things people do with Photoshop, and wonder why we can’t do that with GIMP. Well, we can. In that spirit, I’ve taken How to Create a Stunning Vista-Inspired Menu and reproduced it with the GIMP.  So I tried to reproduce the results.  The work is pretty close.

1. Create a new canvas, 600 x 335, background white. Add two new guides (Image -> Guides -> New Guide), one at 285px and one at 310px.

2. Create two new layers, 600×25 pixels. Label them “upper bar” and “lower bar” (if you can’t figure out which is which, well…), and put them into the 25-pixel high gaps created by the guides.

3. Fill the top bar with a vertical gradient, light on top, dark on the bottom, #787b7d to #35393d. Fill the bottom bar with a vertical gradient, light on top, dark on bottom, #0c0c0c to #000000. Set the bars to 90% opacity, normal over the white background.

4. Draw a new line across the very top of the top bar, color #484b4d. To do this, from the top bar, select a 2-pixel high area at the very top of the bar (from the guide to guide +2) stretching the entire width of the area. Copy, paste as floating selection, then click “new layer” in the new layer dialog to make this its own layer. Fill with color. Duplicate this line and put it right under the first line; fill with color #9fa2a4.

5. Create a new layer, 2 pixels wide and 19 pixels high. This will be the top half of a separator bar for your menu. Place it so the bottom of this tiny layer rests on the second guide. Fill it with a gradient, #4d6672 #676a6d top to bottom.

Create a similar layer, 2 pixels wide and 21 pixels high. This will be the top half of the separator. Place it right under the other half, and just fill it with #43474b. You can merge this layer down with the one above, and just have a “divider.”

At this point, it might be wise to delete the guides. I found they weren’t helpful, and often misplaced the divider.

Clone the divider (Layer Dialog, duplicate button on the bottom) and place it at regular intervals, to make the menu. Fill the space between with text, color #ffffff.

6. Pick a background. I used Forest on a Foggy Day (CC Licensed), but you can surely find your own favorites from around the net. Crop and scale it to the size of our demo, and place it as the background layer. (You may choose to delete, or merely cover, the original white background.)

7. Now for the glassy see-through “Vista” effect. Click on the background layer. With the select tool, select a rectangle about 200×160, starting at 105px down and (here’s the tricky part) -15 pixels left. Select “rounded corners”, 15px radius. Copy, then Paste As New Image.

With the new image, do a Gaussian Blur, 10px radius, then up the canvas size by 10 pixels (Image -> Canvas Size), and using the same dialog center the image on the new canvas. Then, with the image, add a drop shadow (Layer -> Layer Effects -> Drop Shadow, Opacity 60%, Angle 135°, Distance 2, Spread 5, Layer knocks out drop shadow: Yes, Merge layers: Yes). Crop the image to its essentians (Image -> Autocrop).

Copy the new image, then go back to the other image and paste it. If you did it right, you left the old selection active, and the new selection will drop into place. If not, then you should paste it as a new layer and position it by hand at 0x105 (The part to the left was cut off in transit to the new image, remember?).

8. Add text to your glassy portion, and user the Layer Drop Shadow as described above on the words. You may have to mess with it a bit to get it right, but the angle must match the angle of the glass, or it won’t look right.

The free template for this Photoshop to GIMP experiment is available: Vista Style.

Comment Form

Subscribe to Feed



June 2010
« May   Jul »