In this tutorial l will show you how to easily create a website template using a few fundamental design techniques that even a newcomer to photoshop could undertake with ease. Go To Page: [ 1 ·
2 ]
Page 1 of 2
Step 1.)
Start a new document that is 770 x 550 in size and fill the background with #3D3F3E
Step 2.)
Create a new layer. Using the rectangular marquee tool, make a selection as pictured:
Fill this selection with: #ED6A1A
Double click this layer, and apply the following blending options: Gradient Overlay
Result:
When we're ready to put on our finishing touches, this will be where our company logo will go.
Create a new layer. Now we'll make the area for the navigation of our site. Get out that rectangular marquee tool again, and make the following selection:
Fill this selection with #2A2C2B
Step 3.)
Create a new layer. Next set your foreground color to: #5C5E5D Get out the pencil tool, and set it to 2 pixels in width:
Now draw the following lines onto your layout. Tip: If you hold down the SHIFT key on your keyboard while drawing these lines it will ensure that your lines stay straight.
Step 4.)
Create a new layer. Now we'll work on the content area of our layout. We'll start up top with a nice picture that encompasses the layout/design. For this exercise we're creating a layout for an online radio station. So a turn table graphic fits in perfectly. But any photo would work.
Step 5.)
Create a new layer, get out that rectangular marquee tool again, and make the following selection:
Fill this selection with #5B5B5A
Step 6.)
Now create a new layer. Once again make the following selection with the rectangular marquee tool:
Fill this selection with #2A2C2B
Step 7.)
Alright, the layout is starting to take shape. Now lets go ahead and create the right sidebar of the page. Go ahead and create a new layer. With the rectangular marquee tool, make the following selection:
Related Tutorials: Interface Vents This tutorial will show you how to add a techno depth to your layouts with the u ... Retro Style Background Learn how to create the retro style background that you'd see on 60's television ... Render Layout Tutorial vol. 5: Content Boxes In this tutorial you will learn how to create an entire layout by using an exsis ...
Interface Vents
