Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Simple Web Layout
rss

Simple Web Layout

Author: SweDesignz.com More by this author


1. Begin with a new file, 779x600, with #333333 as background color. Then create a new layer.

2. Then take the Rectangular Marquee Tool and draw out a shape as the image below shows, fill it with #ACB202. ( Click for larger view )

3. Create a new layer and take the Rectangular Marquee Tool and draw out a shape on top of the yellow, then reset your colors press D.

4. Go to Filter>Render>Clouds, then go to Filter>Liquify and take the Turbulence Tool and draw around that on the layer, then press Ctrl+U and do this settings.

Now should it look something like this. ( Click for larger view )

5. Create a new layer and take the Rectangular Marquee Tool and draw out a thin rectangle from the bottom of your header and fill it with #C4C602. Then go to the layers palette and right click the black rectangle layer and chose Blending Options and apply this settings.

Now should it look like this. ( Click for larger view )

6. Now it´s time to make the siderunners, once again make a new layer and take the Rectangular Marquee Tool and draw a thin rectangle on the left side from the top to the bottom and fill it with black. Then head over to the layers palette and right click the layer and chose Blending Options and apply this setting.

7. Then duplicate the layer, right click and chose Duplicate Layer, then take the Move Tool and move that part to the right side.

Then add some text to your header and to your menu, and you are done!

This is what i came up with. ( Click for larger view )

Simple Web Layout Tutorial: Final Result

Below is another example with the same effects, but with different colors. ( Click for larger view )



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 "Simple Web Layout"