Quick and Easy Stylish Design Agency Landing Page In Adobe Photoshop

Posted in Tutorials, Web Interface • Posted on 12 Comments

Hey Guys! Were you ever asked to design a Design Agency website and you’d run out of ideas? Well, this tutorial is just for you. I will show you how to create a stylish looking landing page using Adobe Photoshop. Don’t worry, this design will not take too long and don’t be afraid of doing this if you are a beginner I promise to guide you all the way through. So what are we waiting for? Let’s get started!

Here is what we will be making, click on the image for full preview:

PSD Download

Other parts of this tutorial:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1820px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler, the information will be shown in the information panel. Make sure that this is shown in your panels to the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create another guide but now change the value to 1180px, this will make a total of 960px in the center of our canvas.

Step 2: Working on Header

Our header will contain a logo, call to action, navigation, search.

Step 2.1

Using Rectangle Tool(U) with a fill color of #4d9543, create a 100px by 10px shape and place it on the very top of the canvas.

Step 2.2

This is a personal logo that I’ll be using in this tutorial. For the Burnstudio text I used Myriad Pro 30pt, color #4d9543 and #4a4a4a. Feel free to create your own brand name using these font settings. Once you have finished it, place the logo 40px below the green shape.

Step 2.3

On the other side let’s add the call to action. The font I used for this is Kozuka Gothic Pro, 24pt. If you don’t have this font try to use Helvetica Thin/Light. Color will be #333333 and #4d9543. Now, add your number and Call us now text using Text Tool(T). I also added a 1px #c8c8c8 solid line 20px from the right side of the text. You want to align it with the logo.

Step 2.4

Next we’ll create the navigation. Select Rounded Rectangle Tool(U) and set the Radius to 30px. Now, create a 960px by 50px shape with a fill color of #4d9543. Place it 40px below the logo.

Step 2.5

Apply these Blending Options

  • Stroke

  • Inner Shadow

  • Gradient Overlay

Step 2.6

First you will need to add the home icon, followed by the links. The font I used is Helvetica Light, 15pt. Using Text Tool(T) add the following links. Note that each link has a 30px distance from the divider, so measure it using Ruler Tool(I).

Step 2.7

Duplicate the divider and move it 1px from the right and apply this Blending Option.

  • Stroke

Result

Step 2.8

To create the search bar, create a 225px by 30px shape using Rounded Rectangle Tool(U) with a fill color of #4b9241, place it 55px to the left. Add the (search) text using Text Tool(T), font is Helvetica 14pt. Then, place the Search Icon 20px to the left.

Step 2.9

Apply this Blending Option to the search bar

  • Stroke

  • Drop Shadow

Last step in this part is to add Drop Shadow on the icons and text to make it more crisp.

Step 3: Working on Slider

Step 3.1

The slider part will be 300px high and 40px below the navigation, so go ahead and measure it with Ruler Tool(I).

Step 3.2

Once you’ve done it. Select Rounded Rectangle Tool(U) and create the same shape as shown in the screenshot below. All you need to do is first create a 550px by 250px shape and customize the bottom right corner the same in the screenshot below using Direction Tool(A).

Step 3.3

Next using Ellipse Tool(U) create a 160px by 160px shape. Fill color for this one doesn’t matter because we’ll be masking an image above it later. Place this shape at the center of the bottom right corner.

Apply these Blending Options

  • Stroke

Result

Step 3.4

Create another shape using the same tool. Make sure the fill color is #000000 and change the opacity to 80%. For the purpose of the presentation I made it a green so that you can see how the shape will look. The shape size is 575px by 88px.

Step 3.5

Next we will be adding the slider controls. Using Ellipse Tool(U) create a 3 13px by 13px shape. the normal state color will be #f5f5f5 and for the active is #4e9643. Place it as shown in the screen shot below.

Apply this Blending Option

  • Stroke (Normal)

  • Stroke (Active)

Result

Step 3.6

Next is the previous and next button. I created this using Pencil Tool(B). Normal state color will be #4f4c4d and for the Active the same green color. Place this as shown in the screenshot below.


Step 3.7

Now that we have all the shapes together let’s fill it with text and add an image. All you need to do is create a new layer above the shape and place your image there, then Right Click and click Create Clipping Mask. Do the same on the ellipse shape. I will leave it up to you what image you use.

Step 3.8

Next let’s add the text. For the heading title I used the same font as the call to action part, then for the paragraph I use Helvetica 13pt, #555555 and for the read more I made it Italic and used the same color green and added an arrow using Pencil Tool(B) beside it. And that’s it for this slider part.

Step 4: Working on Services Area

Step 4.1

The service area will be 240px high and 40px below the slider, so go ahead and measure it with Ruler Tool(I).

Step 4.2

Using Rounded Rectangle Tool(U) with a fill color of #f9f9f9 create a shape as shown in the screen shot below.

Apply the following Blending Option

  • Gradient Overlay

Step 4.3

We will be dividing the shape into two so that we can align our service blocks properly. 960/2 is 480px, so go ahead and measure it with the Ruler Tool(I). Add the following text and Icons as shown in the screen shot below. Note that text sizes and color are all the same so feel free to copy some elements as we did  previously. Also the distance from the shape left and above is 30px.

  • Web Design

  • Vector Design

Step 4.4

Adding the shadow to the bottom part is very simple. All you need to do is duplicate the base shape and make the fill color #000000, place it below the original shape layer. Next, Go to Filter – Blur – Gaussian Blur to 7.0, create a mask on the layer and brush over the part that we don’t need.

Step 5: Working on Media Section

This part will be divided into 3 sections Video, Twitter & Facebook.

Step 5.1

We will work first on the Video section. The video will take up 305px by 220px and the same distance from above. Go ahead and measure it with Ruler Tool(I).

Step 5.2

Using Rounded Rectangle Tool(U) create a 300px by 145px shape as shown in the screen shot below with the same green color.

Apply this Blending Option

  • Gradient Overlay

Step 5.3

Next let’s create a play button. Using Ellipse Tool(U) create a 45px by 45px shape with a fill color of #f5f5f5.

Apply the following Blending Options

  • Drop Shadow

  • Inner Shadow

  • Gradient Overlay

I also added a play icon I created using the Pencil Tool(B) with the same green color.

Step 5.4

Add some text with the same font, the size will be 18pt and 14pt. Lastly add the macbook air icon and place it as shown in the screen shot below.

Step 5.5

Now let’s design the Twitter feed. Select Rounded Rectangle Tool(U) change the Radius now to 20px. Create a 105px shape of width, the height will not matter. Now customize the shape by using Pen Tool(P) and Direct Selection Tool(A) and make a shape as shown in the screen shot below.

Step 5.6

On the layers panel make the shape fill color to 0% and apply an inside stroke 1px solid #c8c8c8.

Step 5.7

Now let’s add text and the Twitter icon. Place it as shown in the screenshot below. Heading font size is 18pt, paragraph 13pt and for the link color and the hours color is #6767c9, #999999.

Step 5.8

For the Facebook widget there’s nothing special I just took a screen shot in the widget page.

Step 6: Working on Links, Blog, Location Section

Step 6.1

The footer will be 100px by 320px and 50px distance from top, so go ahead and measure it with Ruler Tool(I). Then, Fill the whole space using Rectangle Tool(U) with a fill color of #333333.

Apply this Blending Option

  • Drop Shadow

Step 6.2

Let’s create a dotted pattern to apply in the shape. Create a new 5px by 5px transparent document and create a dot on the bottom left part of the canvas as shown in the screen shot below. Go to Edit – Define Pattern and apply this to the shape with a 30% Opacity.

Result

Step 6.3

Now let’s work on the links section, the total width for this will be 225px. I used the same font style and size, the links have a distance of 25px from each other. The distance of the heading from the top is 50px and 30px below. Also, I create an arrow shape using Pencil Tool(U) and add it beside the links.

Step 6.4

Create a 225px by 29px shape with a fill color of #000000, lower down the fill color to 20%. Place it as shown in the screen shot below.

Apply this Blending Option

  • Drop Shadow

  • Inner Shadow


Step 6.5

Now let’s proceed to blog section. Using Rounded Rectangle Tool(U) create a 292px by 58px shape as shown in the screenshot below. Fill color will be #ffffff and lower down the opacity to 10%. Distance from the links section is 77px.

Step 6.6

Add the icon and fill it with text using Text Tool(T). For the date color #cccccc and for the link is #ffffff.

Step 6.7

For the location just duplicate the heading and change the text to (Our Location). Add the map Icon. I already customized the map to show where is my exact location so feel free to customize yours. For the text color will be #cccccc and for the line #484848.

Step 6: Working on Clients

Well, this part is very simple just take some sample Icons and desaturate it by going to Image – Adjustment – Desaturate or by pressing Ctrl + Shift + U. This section will take up 145px of height so, place the icons accordingly and make sure it is centered. Last thing is to add a 1px #c8c8c8 below and we’re done.

Step 7: Working on Footer

Step 7.1

Text size 12pt, paragraph color #666666, distance from top 30px, distance from text 15px.

Step 7.2

Text size 12pt, link color #666666, 2px #c8c8c8 bottom line border.

Step 7.3

For the back to top button. I create it using Ellipse Tool(U), 30px by 30px shape. I apply 1px #bdbdbd inside stroke and crate an arrow facing top using Pencil Tool(B).

We’re done!

And that’s it for this tutorial. I hope you liked this one! If you have something to ask feel free to drop me a line in the comments. Keep coming back because I’l be writing more tutorial like this. I’m planning to create another eCommerce landing page tutorial soon.

Have a great day! :)

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.

12 Comments Best Comments First
  • Lara

    Thursday, November 1st, 2012 09:31

    12

    Hi Im a graphic Designer and Im looking to convert to web desing, which way would be the best way to go?

    +15
  • faisal

    Sunday, August 26th, 2012 05:22

    4

    really awesome … great site .. nyc tutorial..
    Love u 1stwebdesigner

    thanks for such a great web designing/developing source!

    +13
  • Ann

    Sunday, August 26th, 2012 03:34

    3

    It’s nice of you to share such information. This would be very helpful for those who are really interested in design and art..great idea!

    +13
  • cyco

    Sunday, August 26th, 2012 12:28

    6

    wOw!.nice work..

    +4
  • Sourabh Yadav

    Saturday, August 25th, 2012 12:29

    1

    Hello Sir :)
    Very Useful Article
    I m New to Blogging World…
    Can u Just give me a link/make a tutorial on how to change this PSD File into a live site ?

    -Thank You
    By The Way,Awesome Blog ! Sxy Design :)

    +2
  • Casey Dennison

    Sunday, August 26th, 2012 20:12

    7

    This is great Michael! Thanks for sharing your expertise with the community. I love the professional look of this design. One of the reasons I visit 1st web designer, is these tutorials.

    +2
    • Michael John Burns

      Sunday, August 26th, 2012 22:59

      8

      Thanks Casey. I’ll be doing a lot more of this so keep coming back :)

      +2
  • Ankush

    Saturday, August 25th, 2012 18:58

    2

    Its nice and starting with scratch to there is Fun!!

    +1
  • Nikhil Malhotra

    Monday, September 3rd, 2012 14:24

    10

    Its a nice design but I feel its simple keeping in mind that its a agency landing page.Can be made more filling with some great creative background in place of white.

    +1
  • PhotographerS

    Sunday, August 26th, 2012 07:10

    5

    Easy to follow tutorial, nicely done.

    0
  • balaji

    Wednesday, September 26th, 2012 08:59

    11

    nice design thank you so much………..

    -4
  • Lara

    Thursday, November 1st, 2012 09:31

    12

    Hi Im a graphic Designer and Im looking to convert to web desing, which way would be the best way to go?

    +15
  • balaji

    Wednesday, September 26th, 2012 08:59

    11

    nice design thank you so much………..

    -4
  • Nikhil Malhotra

    Monday, September 3rd, 2012 14:24

    10

    Its a nice design but I feel its simple keeping in mind that its a agency landing page.Can be made more filling with some great creative background in place of white.

    +1
  • Casey Dennison

    Sunday, August 26th, 2012 20:12

    7

    This is great Michael! Thanks for sharing your expertise with the community. I love the professional look of this design. One of the reasons I visit 1st web designer, is these tutorials.

    +2
    • Michael John Burns

      Sunday, August 26th, 2012 22:59

      8

      Thanks Casey. I’ll be doing a lot more of this so keep coming back :)

      +2
  • cyco

    Sunday, August 26th, 2012 12:28

    6

    wOw!.nice work..

    +4
  • PhotographerS

    Sunday, August 26th, 2012 07:10

    5

    Easy to follow tutorial, nicely done.

    0
  • faisal

    Sunday, August 26th, 2012 05:22

    4

    really awesome … great site .. nyc tutorial..
    Love u 1stwebdesigner

    thanks for such a great web designing/developing source!

    +13
  • Ann

    Sunday, August 26th, 2012 03:34

    3

    It’s nice of you to share such information. This would be very helpful for those who are really interested in design and art..great idea!

    +13
  • Ankush

    Saturday, August 25th, 2012 18:58

    2

    Its nice and starting with scratch to there is Fun!!

    +1
  • Sourabh Yadav

    Saturday, August 25th, 2012 12:29

    1

    Hello Sir :)
    Very Useful Article
    I m New to Blogging World…
    Can u Just give me a link/make a tutorial on how to change this PSD File into a live site ?

    -Thank You
    By The Way,Awesome Blog ! Sxy Design :)

    +2

Comments are closed.

54.82.80.15 - unknown - unknown - US