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 ·
Page 2 of 2
Create a new layer. Now set your foreground color to #5C5E5D and just like we did in step #3 get out the pencil tool and set it to 2 pixels in diameter:
Now draw a line straight up and down as shown here:
Okay, now we're going to add the text for our buttons, create a new layer and set your foreground color to #DD4708 get out your text tool and type in the text for your navigation. The font l used here is called Tahoma Bold with a size of 11pt
Next l added numbers next to each of the links. The color used is: #9A9C9B
Now set your foreground color to #3D3F3E and create a new text box and fill it with ...'s (periods) to create a dotted line underneath each of your links as shown:
Now we'll add some arrows to the links to make them look a little bit better. Create a new layer, get out the pencil tool and set it to 1 pixel in diameter.
Set your foreground color to #FFFFFF (white). Zoom in real close by pressing CTRL and the + sign on your keyboard and draw the following arrow pixel by pixel onto the layout:
Duplicate this layer by pressing CTRL + J on your keyboard and move it around using the 'Move tool'.
Here's how it looks after each of the arrows are applied:
Next we'll add some icons to the layout in the top left of the template for navigation purposes. You can design your own icons, or might l suggest a great designer resource www.WebsiteIcons.com Which is a great high quality designer resource for website icons. Here's how mine looks after apply the icons with some button text:
Next l added in the company name, and logo into the bright orange box we'd created earlier in the tutorial:
Now at this point you are ready to begin adding your finishing touches to the layout. Here l've added a few headings for the various sections of the page, and navigation links along the bottom of the page. Just continue to add small details to your layout. with the tips and techniques l've taught you throughout this tutorial.
Here's what l ended up with: