Create a Stylish Design Agency Website Are you in a good mood to make something new for this weeks

template tutorial? Today Im going to show you how to create a stylish agency website. This tutorial will be quite long, just bear with me and Im sure that by the end of this tutorial, you can create a better version. We will be using gradients mostly, combination of light and dark colors. Lets get started!

Here is what we will make, click on the image for the full size:

Resources to complete this tutorial: Social Icons Source : http://www.iconfinder.com/search/?q=iconset%3Asocial_icons_by_tydlinka This is Art2 Icons Source : http://www.iconspedia.com/pack/this-is-art-2-2721/ Step 1: Setting up the Document Open up Photoshop and create a new document 1200px x 1650px.

Make sure that you turn on Rulers by pressing Ctrl + R or by going to View > Rulers.

Creating Guides
I didnt use the 960 grid system on this tutorial so that we can practice creating our own guides. To show guidelines press Ctrl + ; by default nothing will appear yet because we havent created any guidelines yet. Now lets create our first two guides select View > New Guide. This guide will be the holder of the whole layout a total width of 960px.

Making Folder
To make things organized and easy to locate, create these folders.

Step 2: Working with Background

In the Background folder create a new layer and name it Background. Now select Linear Gradient and use the following colors: Color: #7fa7c7 Location: 0% Color: #a4c7e2 Location: 10% Color: #3d5466 Location: 30% Color: #57758d Location: 70% Color: #2c3e4c Location: 100%

Start dragging from the middle. You may have something that looks like the screenshot below.

Creating a Line Pattern

Next, we will add a pattern to create more texture in our background. Create a new 4 x 4 document. Now select Pencil Tool (B). Follow the screenshot as shown below.

To create a pattern make sure you select the top layer and go to Edit > Define Pattern

Now lets add a pattern to our background. Create a new layer above the Background Layer and name it Pattern. Select the Paint Bucket Tool (G), switch to pattern, and select the pattern we made.

Using Rectangular Marquee Tool(M) select 1/2 of the whole document and fill it with the pattern using theGradient Tool (G). Add this Blending Option: Color Overlay: #98c2e2 Add a mask to the pattern layer by pressing the mask button beside the fx button.

Now we will hide the portion of the pattern that we dont want to appear in the background. Set theforeground color to #000000. Select the Brush Tool(B). Before you start brushing make sure that you select the mask in the layers panel then start brushing areas that you want to hide.

Step 3: Working with Header

Inside the header folder create a new layer and name it top. Set the foreground color to #334655. Now create a guide 5px Horizontally.

Using the Rectangular Marquee Tool(M) select the top portion within the guidelines and fill it. Before we proceed create three folders name them as shown in the screenshot below.

Logo
We will make a quick logo for this tutorial. Im thinking of something like a glowing logo, I think it suits this layout. So select Text Tool(T) and select your favorite font. I prefer light and bold fonts so I select Kozuka Gothic Pr6N. I combined light and bold text.

Add this Blending Option: Outer Glow: #c1e4ff

Duplicate the text layer and transform the original layer by pressing Ctrl + T Right Click and select Flip Vertically, and move it down below the duplicated text.

Mask the Original layer and make sure the mask is selected. Select Linear Gradient with a fill color of black and white. Start masking beginning from the middle of the text to top. This will achieve a reflection effect.

Social Icons
Open up the social icons that you have downloaded from the resource and place them as shown in the screenshot below.

Navigation
Start by creating a new layer and name it nav-bg. Create a rectangle shape using the Rectangular Marquee Tool(M) or the Rectangle Tool with a height of 50px and a width of 960px, fill it with any color.

Add this Blending Option: Inner Glow: #ffffff

Gradient Overlay: Color: #2b3d4b Location: 0% Color: #3a4d5a Location: 20% Color: #2f404e Location: 50% Color: #455764 Location: 80% Color: #546a79 Location: 90% Color: #2f414f Location: 100%

Stroke: #2b3b48

Above the nav-bg layer, create a new layer and name it Shine. Using Pen Tool (P) create a shape and make a selection from it as shown in the screenshot below.

Fill it with a white color. Set the layer mode to Screen and Opacity to 10%.

Now select the Text Tool(T) and add these links.

Duplicate the text layer. Now select the original layer and change the color to #1c2730. Position it 1px above the duplicated layer to make it look like its beveled. Now lets add some dividers between our links. Create another folder and name it divider. Using Line Tool(U)create 2 lines. First line color will be #485d6c, second line color #2b3b48.

Search
Before we make our search bar. Lets create a new guideline first. Follow the screenshot as shown below.

In the search folder create a new layer and name it search-bg. Using the Rectangular Marquee Tool(M)create a rectangle with a width of 260px starting from the 20px guideline we just created.

Add this Blending Option: Drop Shadow: #ffffff

Inner Shadow: #000000

 Gradient Overlay: #2f404e, #546a79

Stroke: #2c3c4a

Now open up the search icon and place it at the right side of the search bg.