Dr Photoshop Logo

Photoshop Tutorials

Photoshop Tutorial Web Layout 1

Web Layout 1

Create a simple but effective and accented layout.
October 29 2005 | 15683 clicks | download psd | email this |

Create a new document. Try starting at 800 x600.
Use the single colum select tool and color two columns gray. Everything in between will be the content and the navigation ect.

Take the gradient tool and make a green yellow to yellow green gradient. Use colors 67a700 and c6ff00. Create a new layer. Select the area outside the two columns. Make a gradient for both sides.

Darken the gradient in the hue/satuation panel. This will be the margins for the web page.

Create a new Layer. Take the rectangle marquee tool and make a bar across the two columns. This will be the navigation. Color it any color. Apply the given style "form button".

Full Size


Add grey bars in the horizontal bar and add text for buttons. I used Myriad font.

New Layer. Take that gradient used before and gradient the whole page green to yellow. Duplicate the layer and transform so the gradient is enclosed with in the navigation bar. Set both gradient layers to overlay. This should create a green yellow glow on the webpage. See the picture.

Full Size

 

Add a header and a footer.

Divide the content into areas.
Make three square green dots. These can be bullet points for each topic.

Note: If you don't have that much content you can always make the columns in the beginning closer together.

Full Size


Pixel Groovy
Discuss the Adobe Photoshop tutorials on the forums. You can find the photoshop files to download there too.

Photoshop Tutorials




Photoshop Podcast Dr Photoshop RSS Delicious technorati

Latest Tutorials


Latest Resources


Latest News


Affiliates

Pimp My Com Heathrowe Stilistic Dev Graphic Addicts Mickm Swe Designz Fire Throttle tutorialkit.com all affiliates

Dr Photoshop PodcastVideo Podcast


2 Free Stock Photos from big stock photo, you can get 2 stock photos of your choice

All images, tutorials and articles are property of Dr. Photoshop
home | tutorials | resources | forums | about | affiliates