adv banner
Photoshop  Home Photoshop Web Layout Lava Lamp Layout
rss

Lava Lamp Layout

Author: Crunked-Designs.com More by this author


1. I am using a new canvas, 500x220 pixels and a black background. Use something similar to mine, or go bigger if you wish.

2. Find a nice background you would like to use. Here is my starting canvas, if you would like to use the same, click on the image for the high quality jpeg. Notice I have also left some black at the bottom for our menu to go.

Click to enlarge
Click to enlarge

Next I just added some arrows to add effect to it.
3a. Create a new layer, and using the Type Tool, type the letter 'a', and change the font to Wingdings 3b. Now right click on the 'a' layer and select rasterize.
3c. Zoom in a little, and colour the inside of the arrow in with white.
3d. Change the opacity of the 'a' layer to around 20% so it fades into the background like mine.



I also added some random text and a few little lines. The font for the text is called 'Silkscreen'. To make the lines, follow these steps.
4a. Create a new layer.
4b. Select a 3 pixel pencil tool, make sure white is your foreground colour, and whilst holding shift draw several lines of varying heights.



You may also want a title on yours. For mine:
5a. I added a drop shadow on 75% opacity, 5px Distance and 5px Size.
5b. For an outer glow, I used 75% opacity, #8FE077 colour, 2px Spread and 6px Size.
5c. Finally a 1px black Stroke.



Now it is just time for the menu. I kept mine very simple, you can add a few things if you think it is too basic.
6a. For the menu dividers, create a new layer.
6b. Using a 1px white Pencil, draw a few vertical lines like mine.
6c. Change the opacity of this layer to about 50%.
6d. Now just add some text to each part, and give it a drop shadow or any other effects you like.



7. Finally add a 1px black border around the outside of your image, to distinguish it from the background.

8. I also found the lava lamp too bright, so I added some diagonal stripes over the top to darken it a bit.

9. Now you will just need to slice it up and it is ready to be used! Hope you found this tutorial useful. Click on the image below for the high quality of my final image.

Lava Lamp Layout Tutorial: Final Result
Click to enlarge


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Lava Lamp Layout"