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!
In this tutorial l will explain the techniques used to create an MP3 player/handheld style interface. You can use the techniques taught in this tutorial to create an interface layout or even to create icons for your website.
Page 1 of 2
Step 1.)
Create a new document that is 500x500 in size, and fill the background with a dark grey color l'm using: #313131
Step 2.)
Get out the polygon lasso tool, create a new layer and make a selection on the canvas similar to this:
Go to: Select->Smooth with a setting of 5 pixels:
Set your foreground color to: #78818C
and your background color to: #414648
And fill the selection with a gradient from top to bottom like so:
Press CTRL + D on your keyboard to deselect the selection.
Step 3.)
Double click this layer, and apply the following blending options: Drop Shadow:
Outer Glow:
Bevel & Emboss
Stroke:
Result:
Step 4.)
Next create a new layer, and go to Filter->Render->Clouds
Now go to: Filter->Render->Difference Clouds
Press CTRL + F on your keyboard to repeat the filter one more time.
Press CTRL + G on your keyboard to group this layer with the previous layer.
Finally change the blending mode of this layer to "overlay". Here's how your layers pallet should look now:
Result:
Step 5.)
Next create a new layer, get out the elliptical marquee tool, and make a large oval selection over the top portion of the interface-base like so:
Next set your foreground color to white (#FFFFFF) get out the gradient tool, and fill this selection with a gradient like so:
Change the blending mode of this layer to "screen" and drop the opacity down to 50 percent:
Next group it with the previous layer, by pressing CTRL + G on the keyboard. Here's how your pallet should look:
Result:
Step 6.)
Create a new layer, get out the polygon lasso tool again and create a selection inside of the interface-base, notice l used the elliptical marquee tool to deselect a portion in the top right corner of the screen l did this by holding the ALT key with the elliptical marquee tool:
Go to Select->Modify->Smooth with a setting of 5 pixels:
Fill this selection with a white to transparent gradient just like in the previous step:
DO NOT DESELECT
Change the blending mode of this layer to "overlay" and drop the opacity down to 59 percent:
DO NOT DESELECT
Result:
DO NOT DESELECT
Step 7.)
Create a new layer, name this layer "screen base".
Go to Select->Modify->Contract with a setting of 4 pixels:
Set your foreground color to: #10131F
and your background color to: #78818C
Get out the gradient tool, and fill this selection with a gradient similar to this:
Press CTRL + D on your keyboard to deselect the area.
Related Tutorials: Glossy Buttons In this tutorial you will learn how to make quick and effective looking round gl ... Interface Vents This tutorial will show you how to add a techno depth to your layouts with the u ... Render Layout Tutorial vol. 5: Content Boxes In this tutorial you will learn how to create an entire layout by using an exsis ...
Glossy Buttons
