1st Ideas: Create a Stylish Design Agency Website [Very Detailed]

Posted in Tutorials, Web Interface • Posted on 30 Comments

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 light and dark colors. Let’s get started!

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

image

Resources to complete this tutorial:

Step 1: Setting up the Document

Open up Photoshop and create a new document 1200px x 1650px.

image

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

image

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 total width of 960px.

image

Making Folder

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

image

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%

image

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

image

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.

image

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

image

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.

image

Using Rectangular Marquee Tool(M) select 1/2 of the whole document and fill it with the pattern using the Gradient 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.

image

Now we will hide the portion of the pattern that we don’t want to appear in the background. Set the foreground 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.

image

Step 3: Working with Header

image

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

image

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.

image

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.

image

Add this Blending Option:

  • Outer Glow: #c1e4ff

image

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.

image

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.

image

Social Icons

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

image

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.

image

Add this Blending Option:

  • Inner Glow: #ffffff

image

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

image
image

  • Stroke: #2b3b48

image

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.

image

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

image

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

image

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.

image

Search

Before we make our search bar. Let’s create a new guideline first. Follow the screenshot as shown below.

image

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.

image

Add this Blending Option:

  • Drop Shadow: #ffffff

image

  • Inner Shadow: #000000

image

  • Gradient Overlay: #2f404e, #546a79

image

  • Stroke: #2c3c4a

image
image

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

image

Add this Blending Option:

  • Drop Shadow: #ffffff

image

  • Inner Shadow: #000000

image

  • Color Overlay: #30414e

image

I also added an italic Mydrid Pro text color #cccccc.

image

Back to Navigation folder create a new layer above Divider folder and name it below. Using Rectangular Marquee Tool(M) make a selection 5px height 960px width as shown in the screenshot below.
image

Add this Blending Option:

  • Gradient Overlay: #334553, 3e515d, 293743

image

  • Stroke: #293743

image

Below nav-bg layer, create a folder and name it Client Login. Inside of it create a new layer and name it button. Using Rectangle Tool(U) create a shape about 130px width and 35px height.

image

Add the same Blending Option as we did in nav-bg layer. In case you didn’t know how just follow the screenshot below.

image

I also added text to the button using the Text Tool(T). I know you’ve learned how to make it look beveled, so I wont repeat it again.

image

Duplicate Client Login folder and rename it Sign Up. Select button layer and change the Blending Options as shown in the screenshot below.

Add this Blending Option:

  • Inner Glow: #ffffff

image

  • Gradient Overlay:
  • Color: #ffbf60 Location: 0%
  • Color: #d49c4a Location: 20%
  • Color: #c5944b Location: 50%
  • Color: #e7ad57 Location: 80%
  • Color: #fec570 Location: 90%
  • Color: #d09a49 Location: 100%

image

  • Stroke: #ba8537

image

For the text, change the color to #b58742.

image

Step 4: Working with Slider

image

Select Slider folder and create new folder and name it display. Inside display create a new layer and name it slide-holder, now using Rectangular Marquee Tool(M), create a box with a size of 660 x 300 fill it with #2f404e.

image

Now grab some dummy pictures the same size or bigger than slide-holder. Place it above slide-holder and link them together by pressing Alt + Click on the line in between.

image

Create a new layer and name it Caption, using the Rectangular Marquee Tool(M) create a rectangle with a height of 75px and fill it with any color. Set the layer Opacity to 80%.

Add this Blending Option:

  • Gradient Overlay:
  • Color: #26343f Location: 0%
  • Color: #5c6e7a Location: 30%
  • Color: #5c6e7a Location: 50%

image

Add a caption using Text Tool(T)

image

Hover and Normal

Inside Slider folder create new folders named Hover, Normal. In each folder create a layer name it bg. Using the Rectangular Marquee Tool(M) create a shape 300 x 100 and fill it with any color.

image

Hover

For the Hover folder bg layer.

Add this Blending Option:

  • Inner Glow:
  • Color: #ffffff

image

  • Gradient Overlay:
  • Color: #d49c4a Location: 20%
  • Color: #c5944b Location: 50%
  • Color: #e7ad57 Location: 80%
  • Color: #fec570 Location: 90%
  • Color: #d09a49 Location: 100%

image

  • Stroke:
  • Color: #ffffff

image
image

Now we will add a shine. Using Pen Tool(P) create a shape as shown in the screenshot below and make a selection from it.

image

Select Linear Gradient, Foreground to Transparent set the foreground to white. Fill the selection with gradient starting from top to bottom and set the layer Mode: Screen, Opacity: 80%.

image

Open up This is Art2 icon set we have downloaded. Re-size it to fit, also using the Text Tool(T) add text as shown in the screenshot below.

image

Create new layer above shine and name it light. Using Elliptical Marquee Tool(M) create a shape as shown in the screenshot below and fill it with #fff070.

image

Go to Blur > Gaussian Blur to 5. Set the layer Opacity: 60%.

image

Normal

Duplicate all the layers in Hover folder and place it to Normal folder. All we need to change is the Icon, Gradient Overlay, Stroke, Text and remove the Light layer.

Add this Blending Option:

  • Gradient Overlay:
  • Color: #2b3d4b Location: 0%
  • Color: #2f404e Location: 50%
  • Color: #455764 Location: 80%
  • Color: #4a5f6d Location: 90%
  • Color: #2f414f Location: 100%

image

  • Stroke:
  • Color: #25333e

image

For the text change the color to #afdfff and #cccccc.

image

Shadow and Glow

Below all those folders inside the Slider folder, create a new folder and name it Shadow and also create new layer and name it Shadow-left. Create new guideline as shown in the screenshot below.

image

Select the Rectangular Marquee Tool(M) create a selection from the new guide. Now using Linear Gradient Foreground to Transparent. Set the foreground color to #000000 and fill the selection with a gradient. After filling it erase the portion that is circled as shown in the screenshot below.

image

Repeat this step for Left and Bottom. You may have something that looks exactly as shown in the screenshot below.

image

Create new layer and name it Glow. Set the foreground to #bae0fe. Using the Elliptical Marquee Tool(M) create a selection as shown in the screenshot below and fill it with foreground color. Now add some Gaussian blur radius to 5.0 px.

image
image

Step 5: Working with Body

Our Body includes Featured Project, About, Services so go ahead and create those folders separately. Lets first work on Featured Project.

Featured Project

image

Inside the Featured Project folder create new layer and name it holder. Using the Pen Tool(P) & Rectangle Tool(U) create a shape in separate layers as shown below. Name the Rectangle Front and the other to back.

image

For the Front layer.

Add this Blending Option:

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

image

  • Stroke:
  • Color: #1d2a33

image

For the Back layer.

Add this Blending Option:

  • Gradient Overlay:
  • Color: #1d2a33 Location: 0%
  • Color: #151e25 Location: 100%

image

You will hopefully achieve a 3D like effect that looks exactly like the screenshot below.

image

Using the Text Tool(T) I added Featured Project Text with a bevel effect. Just remember to create the bevel effect. If the background is dark and your font is light, the shadow should be dark, and if it is dark then shadow should be lighter. Take a look at the screenshot below and you will know what I mean.

image

Now add some sample pictures for our gallery, it should be 150 x 150. Also, I added some shadow below.

image

Create new folder and name it Circles. Now using the Elliptical Marquee Tool(M) create small circles as shown in the screenshot below.

image

For the first circle.

Add this Blending Option:

  • Outer Glow:
  • Color: #ffffff

image

  • Inner Glow:
  • Color: #ffffff

image

  • Gradient Overlay:
  • Color: #ffbf60 Location: 0%
  • Color: #d49c4a Location: 20%
  • Color: #c5944b Location: 50%
  • Color: #e7ad57 Location: 80%
  • Color: #fec570 Location: 90%
  • Color: #d09a49 Location: 100%

image

  • Stroke:
  • Color: #ba8537

image

For the remaining two circles

Add this Blending Option:

  • Drop Shadow:
  • Color: #ffffff

image

  • Inner Shadow:
  • Color: #000000

image

You should have something that is exactly like in the screenshot below.

image

About

For the About folder using the Text Tool(T) add some dummy text. As you can see in the screenshot below I used the same font settings as we did in Featured Project. That’s it for our About folder.

image

Testimonials

In our testimonial folder Using the Rectangular Marquee Tool(M) create a 290px x 220px box and fill it with #31a5db. Base some other info in the screenshot provided below. As you may have noticed, I added a shadow with an Opacity: 60%. First I used a Pen Tool(P) to create a shape and added a Gaussian blur on it to make it look like a shadow.

image

Services

In this step I simply copy the text and icons from our slider we did earlier. For the icons I re-sized them a bit. I also added a 3px #192229 border on each service and separated each with two lines. For the first line the color is #1a242b, second line is #455865.

image

Using the Rectangular Marquee Tool(M) make a selection as shown in the screenshot below. Now set the Foreground to #ffffff and select Radial Gradient Foreground to Transparent. Start dragging from right to left and erase some portion that not included.

image

Step 6: Working with Sidebar

I don’t need to explain this more, I know you’re already familiar with doing this in the previous steps. Just base it on the screenshot below and I’m sure you can do it on your own.

image

Step 7: Working with Footer

Inside the Footer folder create new layer and name it bg. Using the Rectangular Marquee Tool(M) make a selection as shown in the screen show below and fill it with #151d23.

image

Add this Blending Option:

  • Inner Glow:
  • Color: #ffffff

image

  • Stroke:
  • Color: #0f1418

image

Finally using the Text Tool(T) fill the footer with text. I duplicate the logo with no style and color it with #2c3e4c. I also copy social icons and place it below the logo. See the screenshot below for a clearer understanding.

image

We’re done I hope you enjoyed this tutorial and find it useful. If you have any questions or suggestions for the next tutorial just mention it in a comment. I’m here to help and teach you what I know about design. Thank you!

Final Design Preview:

image

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

30 Comments Best Comments First
  • Shahbaz

    Friday, April 15th, 2011 11:03

    13

    Awesome! It will be good to have a next part of the tutorial on PSD to HTML/CSS conversion! :)

    +2
  • Saemie Chouchane

    Thursday, April 14th, 2011 22:07

    10

    Brilliant! Very good design.
    Thanks for the tutorial :)

    +1
  • Philippe Sainte-Laudy

    Thursday, April 14th, 2011 12:14

    3

    Great job!
    It will take me six weeks to do this tutorial, but I I keep in my bookmarks :-)

    +1
  • Ameet Shrestha

    Friday, April 15th, 2011 07:48

    11

    Plz post html slicing of this psd ……………………

    0
  • Alex

    Friday, April 15th, 2011 13:42

    12

    yes, html slicing, css and script please!
    otherwise, the tutorial is great!

    0
  • Safi

    Thursday, April 14th, 2011 13:51

    1

    Super awesome :D
    Thank u

    0
  • Ian

    Friday, April 15th, 2011 14:10

    14

    Pretty nice result, but there are a few ( what I find ) glitches to the design. The right side of the content isn’t aligned with the header. I think that would give it a good sense of fluidity. And the footer looks a little bit unfinished.

    Overall a great tutorial easy to follow and sweet looking result. Thanks!

    0
  • Nicole Dominguez

    Friday, April 15th, 2011 03:30

    9

    What a great tutorial! :3

    0
  • Mark

    Thursday, April 14th, 2011 16:55

    8

    Nice end result, looks good. Would like to see it as an actual live page.

    0
  • amar

    Thursday, April 14th, 2011 14:50

    2

    Wow, very detailed explanation and I’ve learned something new today. Clean layout. 5 stars for it…

    0
  • Patt

    Thursday, April 14th, 2011 12:18

    4

    Lovely design and a great tutorial, but would a designer really need an article on how to design their own website?

    0
  • Adrian

    Thursday, April 14th, 2011 13:51

    5

    Please show the PSd to HTML,CCS and script, thanks.-

    0
  • Norma

    Thursday, April 14th, 2011 21:26

    7

    Nice tutorial… but will stick to Fireworks :)

    0
  • Azhar Khan

    Thursday, April 14th, 2011 15:02

    6

    Can u give me this psd file?

    0
    • Yancy

      Friday, May 20th, 2011 20:22

      18

      You’ve hit the ball out the park! Incbredile!

      0
  • ninosan

    Monday, April 18th, 2011 04:28

    15

    awesome!
    i’d like to know the process of PSD 2 HTML~

    0
  • Steve

    Monday, April 18th, 2011 20:37

    16

    love your tutorials and designs. would love to see what you could come up with for a rock band or nightclub website.

    Steve
    Baltimore, MD

    0
  • john

    Wednesday, November 23rd, 2011 06:23

    26

    sir do u have any video tutorial for this? im a newbie in web desgning and even in photoshop.sory but i cant catch up with your tutorial..

    0
  • ronald

    Wednesday, October 5th, 2011 14:55

    25

    Learned more in these tutorials over the years, than all my time at college. I really think most college teachers should be sacked from their jobs. You have be a great help to me and many i imagine and you should be proud of the effort and time you have spent doing this, thank you.

    0
  • David

    Wednesday, December 21st, 2011 15:20

    27

    Just want to say you guys do an excellent job, keep up :)

    0
  • web2maroc

    Friday, February 3rd, 2012 15:30

    28

    Great work. I appreciate it.
    Thanks.

    0
  • Thomas Jay

    Thursday, May 10th, 2012 16:43

    30

    Fantastic design and tutorial! Very slick and highly polished.

    0
  • ahmadi najad

    Thursday, April 12th, 2012 15:55

    29

    well done , even ifind design creation very similar to each other , i like what u have done

    0
  • Yaaseen

    Saturday, April 30th, 2011 19:04

    17

    Hey Great Tut!!!
    I’ve completed the psd and I’m about to attempt to slice it up into an ASP.NET website structure. Then hopefully get a fully fledged site running. I’m a nooby to PSD to HTML slicing though and slicing this tut looks like it will be much more complex than the other PSD to HTML slicing tuts on this site. The various textures and shades in this design makes slicing a challenge for me. :( lol
    But here goes. Please anybody, if you have ideas on slicing this thing up efficiently give me a shout.

    0
  • roshane

    Friday, June 17th, 2011 17:32

    19

    i would love to see the psd to html tutorial for this design

    0
  • Majalah

    Saturday, July 2nd, 2011 05:34

    20

    Easy to follow tutz. One question, which one that i should learn first, design in PSD or learn CSS/HTML?

    0
    • Kelvin Castelino

      Tuesday, October 4th, 2011 13:13

      23

      Learn HTML and CSS first! Know the basics of site designing then slowly move towards PSD, so that you could design the site in a more creative way!

      0
  • ditidom

    Sunday, July 10th, 2011 18:29

    21

    the art2 link leads to 404 error. could you fix it? thanks.

    Ps: It’s a great tutorial! thanks for sharing! :)

    0
    • Rean John Uehara

      Sunday, July 10th, 2011 20:06

      22

      Updated! Thanks for the heads up. :)

      0
  • Thomas Jay

    Thursday, May 10th, 2012 16:43

    30

    Fantastic design and tutorial! Very slick and highly polished.

    0
  • ahmadi najad

    Thursday, April 12th, 2012 15:55

    29

    well done , even ifind design creation very similar to each other , i like what u have done

    0
  • web2maroc

    Friday, February 3rd, 2012 15:30

    28

    Great work. I appreciate it.
    Thanks.

    0
  • David

    Wednesday, December 21st, 2011 15:20

    27

    Just want to say you guys do an excellent job, keep up :)

    0
  • john

    Wednesday, November 23rd, 2011 06:23

    26

    sir do u have any video tutorial for this? im a newbie in web desgning and even in photoshop.sory but i cant catch up with your tutorial..

    0
  • ronald

    Wednesday, October 5th, 2011 14:55

    25

    Learned more in these tutorials over the years, than all my time at college. I really think most college teachers should be sacked from their jobs. You have be a great help to me and many i imagine and you should be proud of the effort and time you have spent doing this, thank you.

    0
  • ditidom

    Sunday, July 10th, 2011 18:29

    21

    the art2 link leads to 404 error. could you fix it? thanks.

    Ps: It’s a great tutorial! thanks for sharing! :)

    0
    • Rean John Uehara

      Sunday, July 10th, 2011 20:06

      22

      Updated! Thanks for the heads up. :)

      0
  • Majalah

    Saturday, July 2nd, 2011 05:34

    20

    Easy to follow tutz. One question, which one that i should learn first, design in PSD or learn CSS/HTML?

    0
    • Kelvin Castelino

      Tuesday, October 4th, 2011 13:13

      23

      Learn HTML and CSS first! Know the basics of site designing then slowly move towards PSD, so that you could design the site in a more creative way!

      0
  • roshane

    Friday, June 17th, 2011 17:32

    19

    i would love to see the psd to html tutorial for this design

    0
  • Yaaseen

    Saturday, April 30th, 2011 19:04

    17

    Hey Great Tut!!!
    I’ve completed the psd and I’m about to attempt to slice it up into an ASP.NET website structure. Then hopefully get a fully fledged site running. I’m a nooby to PSD to HTML slicing though and slicing this tut looks like it will be much more complex than the other PSD to HTML slicing tuts on this site. The various textures and shades in this design makes slicing a challenge for me. :( lol
    But here goes. Please anybody, if you have ideas on slicing this thing up efficiently give me a shout.

    0
  • Steve

    Monday, April 18th, 2011 20:37

    16

    love your tutorials and designs. would love to see what you could come up with for a rock band or nightclub website.

    Steve
    Baltimore, MD

    0
  • ninosan

    Monday, April 18th, 2011 04:28

    15

    awesome!
    i’d like to know the process of PSD 2 HTML~

    0
  • Ian

    Friday, April 15th, 2011 14:10

    14

    Pretty nice result, but there are a few ( what I find ) glitches to the design. The right side of the content isn’t aligned with the header. I think that would give it a good sense of fluidity. And the footer looks a little bit unfinished.

    Overall a great tutorial easy to follow and sweet looking result. Thanks!

    0
  • Shahbaz

    Friday, April 15th, 2011 11:03

    13

    Awesome! It will be good to have a next part of the tutorial on PSD to HTML/CSS conversion! :)

    +2
  • Alex

    Friday, April 15th, 2011 13:42

    12

    yes, html slicing, css and script please!
    otherwise, the tutorial is great!

    0
  • Ameet Shrestha

    Friday, April 15th, 2011 07:48

    11

    Plz post html slicing of this psd ……………………

    0
  • Saemie Chouchane

    Thursday, April 14th, 2011 22:07

    10

    Brilliant! Very good design.
    Thanks for the tutorial :)

    +1
  • Nicole Dominguez

    Friday, April 15th, 2011 03:30

    9

    What a great tutorial! :3

    0
  • Mark

    Thursday, April 14th, 2011 16:55

    8

    Nice end result, looks good. Would like to see it as an actual live page.

    0
  • Norma

    Thursday, April 14th, 2011 21:26

    7

    Nice tutorial… but will stick to Fireworks :)

    0
  • Azhar Khan

    Thursday, April 14th, 2011 15:02

    6

    Can u give me this psd file?

    0
    • Yancy

      Friday, May 20th, 2011 20:22

      18

      You’ve hit the ball out the park! Incbredile!

      0
  • Adrian

    Thursday, April 14th, 2011 13:51

    5

    Please show the PSd to HTML,CCS and script, thanks.-

    0
  • Patt

    Thursday, April 14th, 2011 12:18

    4

    Lovely design and a great tutorial, but would a designer really need an article on how to design their own website?

    0
  • Philippe Sainte-Laudy

    Thursday, April 14th, 2011 12:14

    3

    Great job!
    It will take me six weeks to do this tutorial, but I I keep in my bookmarks :-)

    +1
  • amar

    Thursday, April 14th, 2011 14:50

    2

    Wow, very detailed explanation and I’ve learned something new today. Clean layout. 5 stars for it…

    0
  • Safi

    Thursday, April 14th, 2011 13:51

    1

    Super awesome :D
    Thank u

    0

Comments are closed.

54.196.62.132 - unknown - unknown - US