create a stylish design agency website

8/3/2019 Create a Stylish Design Agency Website

http://slidepdf.com/reader/full/create-a-stylish-design-agency-website 1/19

Create a Stylish Design Agency Website

Are you in a good mood to make something new for this week’s template tutorial?

Today I’m going to show you how to create a stylish agency website. This tutorial

will be quite long, just bear with me and I’m sure that by the end of this tutorial, you

can create a better version. We will be using gradients mostly, combination of lightand dark colors. Let’s get started!

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

http://www.1stwebdesigner.com/tutorials/stylish-design-agency-layout-tutorial/

http://www.1stwebdesigner.com/tutorials/stylish-design-agency-layout-tutorial/



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 didn’t 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 haven’t 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 totalwidth of 960px.

http://www.iconfinder.com/search/?q=iconset%3Asocial_icons_by_tydlinka

http://www.iconspedia.com/pack/this-is-art-2-2721/

http://www.iconfinder.com/search/?q=iconset%3Asocial_icons_by_tydlinka

http://www.iconspedia.com/pack/this-is-art-2-2721/



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 don’t 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 theguidelines and fill it. Before we proceed create three folders name them asshown in the screenshot below.

Logo

We will make a quick logo for this tutorial. I’m 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.


• 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.


• 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 it’s

beveled.

Now let’s 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.



SearchBefore we make our search bar. Let’s 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.




• 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.

create a stylish design agency website

Documents