Tutorial Spotlight: Sleek Web Template
Create a website template using a few fundamental design techniques that even a newcomer to photoshop could undertake with ease.
Great Tutorial!
Go To Page: [ 1 ·
2 ]
Create this clean macromedia style layout.
macromedia has a simple, clean layout that looks real good. Here l'm going to show you how to create a layout that is similar.
Page 1 of 2
Step 1.)
create a new document that is 770 x 300, and fill the background with: #72828B
Step 2.)
We'll start with the buttons, Create a new layer, and using the rectangular marquee tool make a selection across the top of the page like so:
Step 3.)
Next smooth the corners of the selection by going to:
select->modify->smooth and smooth the selection by 2.
and fill the selection with #ACB5BB
Step 4.)
Now apply these blending options to the layer. Drop Shadow:
Gradient Overlay:
Here's what you'll end up with:
Step 5.)
Create a new layer, and apply the text to your button. I used #000000 (black) Verdana, with a 10pt Size.
Step 6.)
Then l just added a 1 pixel divider between each of the buttons, to separate them a bit. Set your foreground color to: #9DA5AA. And draw 1 pixel lines with the pencil tool, as l've done here.
I did this all the way across the image.
Step 7.)
Next we'll work on the "search box". Set your foreground color to #000000 (black) create a new layer and get out the pencil tool again, and draw a 1 pixel line like so:
Drop the opacity of this layer to: 33 percent
Then set your foreground color to #FFFFFF (white) create a new layer, and draw another 1 pixel line right beside that as shown:
Drop the opacity of this layer to 68 percent. Here's what you should have if you've followed along:
Step 8.)
next we'll create a small input box that will serve as our search box. Create a selection like so with the rectangular marquee tool:
Fill the selection with #FFFFFF (white), and apply the following blending options to the layer: Inner Shadow
Stroke
Results:
Step 9.)
Next add the account links at the top right corner of the page. The font I used is Verdana with a size of 9pt.
I also threw in a shopping cart icon. You can draw your own, or get an account with: WebsiteIcons.com. It's a great free services with 1,000's of website icons any serious designer shouldn't be without.
Step 10.)
Set your foreground color to: #889395 and draw a 1 pixel line with the pencil tool between each of the links like so:
