Tuesday 3 June 2014

Design a Professional Design Studio Web Template in Adobe Photoshop




Step one
Start with a 1000 x 700 pixels, white canvas. Set your foreground color to white and background to #A9EDFF. Choose your gradient tool from your tool windows and apply a linear gradient effect on your canvas.
Step two
Save the stock photo below and add it on the top of your canvas.
Step three
Select your rounded rectangle tool from your tools window then set the radius setting to 10 pixels. In a new layer draw a 632 x 595 pixels, #2D2D2D rounded rectangle.
Apply a Stroke layer style.
Step four
In your layers window create a new layer set, name it Navigation. Now in a new layer create a 112 x 20 pixels, #2D2D2D rounded rectangle. Apply an Inner Shadow and Gradient Overlay layer styles
Step five
Using your text tool type home as your first navigation. Use font Arial, bold, 11 pt, none and white for color.
Step six
Complete your navigation system.
Step seven
Just below your navigation system add a who we are section. Be organize and place all your section in its own layer set. Use font Arial, bold, 16 pt, none and #FF0096 for color. For the content use the same font style but 10 pt and #9E9E9E for color.
Step eight
Below your who we are section add your service summary. The shade of blue used in this section is #A6EDFF.
Step nine
Using your text tool type in service overview. Now add the check icon, again with your text tool type ¡§a¡¨ using font Webdings, 11 pt, none and #A6EDFF for color.
Select your pencil tool, in a new layer draw a 2 pixels, #343434 border around service overview.
Step ten
Add an announcement section on the center of your canvas.
 

Step eleven
Below your service summary, add a section for your featured projects. First add the title.
Step twelve
Now make a tab for the name of the project. In a new layer draw a 90 x 20 pixels, black rounded rectangle.
Apply a Gradient Overlay and Stroke layer styles.
Using your text tool type in the name of your first featured project. Use font Verdana, bold, 10 pt, none and #FF0096 for color.
Step thirteen
Duplicate your tab set and modify for launch project tab. Use #9E9E9E for color.
Step fourteen
Above your tabs create a 308 x 172 pixels, black rounded rectangle.
Now clone a screen shot of your first featured project. Apply an Inner Glow and Stroke layer styles.
Step fifteen
Add a description for your featured project.
Step sixteen
Next to your first featured project, add another set.
Step seventeen
Now make a large round rectangle for your quote form. In a new layer draw a 324 x 382 pixels, #2D2D2D rounded rectangle.
Apply a Stroke layer style.
Step eighteen
Now add your contact us tab on your second large rounded rectangle.

Step nineteen
Add your content for your free quote.
Step twenty
When you code this template, place your form boxes on the space provided below your free quote content.
Step twenty one
With your text tool type in ***Send! using font Arial, bold italic, 18 pt, sharp, white, #A6EDFF, #FF0096.
Apply a Gradient Overlay and Stroke layer styles.
Step twenty two
Below your body add a simple footer using only texts.
Step twenty three
Add sub links below your second rounded rectangle.
Step twenty four
Back to the top of your canvas, add a section for your name and slogan.
Final Image
Professional Design Studio Web Template.

No comments:

Post a Comment