GD Auto Service: Learn How to Create an Awesome Landing Page in Photoshop

Posted in Tutorials, Web Interface3 years ago • Written by 21 Comments

In this week’s tutorial we are going to create an awesome landing page for GD Auto Service as an example. The template will have a cool logo, search bar, navigation, slider gallery, login panel, blog, services, testimonials and footer. Let’s combine these all together to make an awesome template. I will try my best to make it easy for you to follow this tutorial. So let’s get started!

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

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1850px 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. 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 at the right. If it is not shown you can access this by going to Windows – Info.

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

Step 2: Creating the Header

Now that we have set up our workspace time to create the layout. Start by creating a 100% by 200px using Rectangle Tool.

Add this Blending Option

  • Drop Shadow

  • Gradient Overlay

  • Stroke

Result

Add another shape at the very top of the canvas using Rectangle Tool size 100% by 40px, color #000000.

Add this Blending Option

  • Drop Shadow

Result

Using Text Tool add Signup and Login link at the top-right corner.

Step 3: Creating the Site Logo

This will be the site logo. Now to start, create a 80px by 80px shape using Ellipse Tool.

Add this Blending Option

  • Drop Shadow

  • Gradient Overlay

Result

Now, Contract the shape by 5px. To do this Ctrl + Click the thumbnail of the layer in the layers panel, next go to Select – Modify- Contract and the value to 5px. Create another layer at the top of the shape layer and fill it with any color.

Add this Blending Option

  • Inner Shadow

  • Gradient Overlay

  • Stroke

Result

Using Text Tool add GD text. I used Myriad Pro 36pt bold.

Add this Blending Option

  • Drop Shadow

  • Gradient Overlay

You should have this result

Now let’s add some highlights to our logo. Create a new layer above the text and name it highlights while the layer is selected make a selection of the inner shape. Select Elliptical Marquee Tool and make a selection while pressing Alt Key as shown in the screenshot provided below. Note that while holding Alt key this will hide the selection that you have selected.

Select Linear Gradient Foreground(#ffffff) – Transparent.

Refer to the screenshot below for the final result.

Step 4: Creating the Navigation

Using Line Tool create a #000000 1px line and below it create another #444343 1px line. All our navigation will be placed here.

Using Text Tool let’s add our navigation links. “HOME, ABOUT US, SERVICES, COMMUNITY, APPOINTMENT”. Each link should have 40px distance from the right. Then, between our links create two 1px line using Line Tool.

Let’s style our home as an active link. Using Rectangular Marquee Tool make a selection as shown in the screenshot below. Use Linear Gradient Foreground(#ffffff) – Transparent to fill the selection then, set the layer mode to Screen Opacity to 30%.

The Result

Step 5: Creating the Search

As you can see in the preview above there is a input field and a search button. First thing we need to do is to create two shapes using Rectangle Tool and make sure it is centered.

To make the left part of the first shape slanted we must select the input field shape layer and use Free Transform (Ctrl + T), right click on the stage and select Distort. Now you will have the option to drag the top right point from the right. For the search button drag the left point to the right.

Add this Blending Option – Input field

  • Inner Shadow

  • Gradient Overlay

Add this Blending Option – Search Button

  • Inner Shadow

  • Gradient Overlay

Using Text Tool add text label for the input field and button.

Step 5: Creating the Slider Gallery

Select Rectangle Tool and set the radius to 10px. Create a 600px by 340px and label the layer base, create another shape above it 600px by 50px label it control base.

Right click to control base and choose Rasterize. Using Rectangular Marquee Tool make a selection as shown in the screenshot below and delete it.

Add this Blending Option

  • Gradient Overlay

  • Stroke

Result

Now we will add next and previous controls. Select Shape Tool and find an arrow that looks the same as in the screenshot below.

Add this Blending Option

  • Drop Shadow

  • Gradient Overlay – For Hover purpose

Result

Create three circles using Ellipse Tool align it as shown in the screenshot below.

Add this Blending Option – First Circle

  • Drop Shadow

  • Gradient Overlay – For Hover purpose

Add this Blending Option – second and third Circle

  • Drop Shadow

  • Inner Shadow

  • Gradient Overlay

Result

Using Rectangle Tool create three shapes as shown in the screenshot below label them first, second ,third and set the opacity to 90%.

Add this Blending Option – first, second, third

  • Gradient Overlay

Result

Fill each layer with dummy text using Text Tool. Create also a read more button, just refer to the screenshot below.

Let’s add some separation between each tab. Using Line Tool create a line as shown in the screenshot below.

Result

Step 6: Creating the Login Panel

Select Rounded Rectangle Tool and set the radius to 10px. Create a 340px by 170px shape.

Add this Blending Option

  • Inner Shadow

  • Gradient Overlay

  • Stroke

Notice that the login and search look the same. But for the login input field remove the Inner Shadow and for the login button add a #a5150 Stroke.

Using Rounded Rectangle Tool with the same radius. Create a shape as shown in the screenshot below.

Add this Blending Option

  • Gradient Overlay

  • Stroke

Create another shape using Pen Tool.

Add “User Login” text using Text Tool

Step 7: Creating the Appointment Box

Using Rounded Rectangle Tool with a 10px radius create a 340px by 140px. 20px distance from the left and top.

Add this Blending Option

  • Gradient Overlay

  • Stroke

Result

Notice that For Free button in the preview above. To do that create a shape as shown in the screenshot below and copy the layer styles of the login button and place the same arrow shape as we used for our slider controls.

Add a For Free text using Text Tool size 14pt Myriad Pro.

Add this Blending Option

  • Inner Shadow

  • Gradient Overlay

  • Stroke

Result

Add dummy text using Text Tool size 24pt Myriad Pro Bold Italic, place it as shown in the screenshot below.

Add this Blending Option

  • Drop Shadow

  • Gradient Overlay

Result

Finally open the rims image that you have downloaded and place it as shown in the screenshot below.

Step 8: Creating the Services

Create a 960px by 205px base shape using Rounded Rectangle Tool.

Add this Blending Option

  • Inner Shadow

  • Gradient Overlay

  • Stroke

Result

Let’s add previous and next controls. Using Rectangle Tool and Pen Tool create a shape as shown in the screenshot below.

Add the same Blending option as we did in our base shape.

Now that we have the control and base layer we will add our services. Create a #141414 280px by 160px using Rounded Rectangle Tool. Place it as shown in the screenshot below, when you’re done contract the shape by 5px.

Add this Blending Option – Base layer

  • Drop Shadow

Result

Create a shape as shown in the screenshot below color must be black. When you’re done set the layer opacity to 80%. Add text using Text Tool and grab a copy of read more shape as we did in our slider gallery place it as shown in the screenshot below.

Group all the layers we have made and duplicate it twice for our other services. Place it as shown in the screenshot below.

Result

Step 9: Creating the Latest News / Blog

The base and the header of our blog section is the same as our login. Duplicate a copy of it and change the header text to Latest News.

Grab a sample 125px by 125px image for our thumbnail post. I will not go into detail about how to do this, just refer to the screenshot below.

Step 10: Creating the Testimonials

Still the same header but different base style. For the base style copy the blending option we applied on the base of our services. Refer to the screenshot below for the thumbnails, text format, and line colors.

Step 11: Creating the Footer

Using Rounded Rectangle Tool create a shape as

Step 12: Creating the Background

Select the background layer and fill it with #bbbbbb. Using Rectangle Tool create a shape as shown in the screenshot below.

Go to Filter – Blur – Gaussian Blur

Finally we’re done. Wooo! I hope you didn’t get bored following this tutorial and I hope that you’ve learned something in doing this. If you have questions or comments just post it below and don’t forget to tweet and share this tutorial with others. Cheers all! :)

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

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.

21 Comments Best Comments First
  • gouthami.b

    Wednesday, August 24th, 2011 19:34

    9

    Well..good tutorial.It really helps

    +1
  • Reynold

    Wednesday, August 24th, 2011 21:38

    10

    This is great but have you used Fireworks? I find it easier to create web layout than photoshop. Great tutorial, thanks.

    +1
  • Han

    Wednesday, August 24th, 2011 18:16

    8

    This is a great tutorial about Photoshop’s ability to create great website home page. Great Job!!

    0
  • Cornel

    Tuesday, August 23rd, 2011 14:47

    1

    Masive work.
    But maybe nobody read all of it. :)

    0
    • Puneet

      Wednesday, August 24th, 2011 04:10

      2

      I am not agree with you. A person eager to learn will defiantly read it. Its a very detailed one & I learnt a lot from It.

      0
  • Danny Wauters

    Wednesday, August 24th, 2011 17:41

    7

    Thats an awesome detailed tutorial.

    0
  • Karl

    Wednesday, August 24th, 2011 04:02

    6

    That’s a very in depth article. And a stunning looking template. Thanks for the post.

    0
  • Shiva

    Wednesday, August 24th, 2011 01:13

    3

    Great tutorial!
    i will learn a lot from this!
    Thanks

    0
  • Gaby

    Wednesday, August 24th, 2011 01:41

    4

    That idea of ​​self service GD is pretty good. I know that they have a good team of programmers to implement this great idea. I congratulate friends.

    0
  • Panos

    Wednesday, August 24th, 2011 09:20

    5

    Fantastic…and exactly what i was looking for….

    0
  • nitin

    Wednesday, August 31st, 2011 12:49

    11

    That’s are to useful tutor for new photoshop designer when working on templete design of photoshop

    0
  • Nathaniel

    Thursday, September 1st, 2011 12:12

    12

    This is the best Photoshop tutorial I have ever had. Many thanks. There is no better way to learn than by doing. I never knew about all these gradient overlays, etc.

    Yes, I am amazed at how much work this is, but that’s what a good design is about. I’m happy to go through it.

    All this said, I find some problems with the instructions. As is so often, there is a lot of assumed knowledge and many details are skipped over.
    For example, on the User Login, why would we rasterize that layer to create that shape? And if there is a reason, can you tell us the steps?

    You say on the Appointment Box, “Notice that For Free button in the preview above. To do that create a shape as shown in the screenshot below and copy the layer styles of the login button and place the same arrow shape as we used for our slider controls.”
    Well, this is strange because your screenshot shows this button as a solid gray. In the meantime, your Photoshop file (which I am so glad you have provided to fill in the blanks) is a completely different color. Neither of these examples however is what your instruction says, which is to copy the login button style. The login button style is almost black, and gets completely lost on the black background.

    Also, if you could provide the exact x and y coordinates of many of these items it would help. This is not critical, but it would really help out on this tutorial.

    Many thanks for providing this.
    G

    0
    • Michael John Burns

      Saturday, September 3rd, 2011 16:35

      19

      In user login part, It’s really up to you how you will create shape. In my own way I chose to use first the Rounded Rectangle Tool to have a nice rounded corner on top left and bottom left. Then I rasterize the layer so that I can fill fill the bottom left to make it not rounded. The to the top right part I use Pen Tool to create that curve shape. Note that there is many way to do it I just prefer that because I want to do it on one layer.

      In Appointment Box part it doesn’t matter what will be the shape colour because we will be applying gradients to it.

      0
  • mcneela86

    Saturday, September 10th, 2011 07:20

    20

    This is an awsome tutorial, is there any plans to do the PSD – html as a tutorial?
    Really like what your doing on your site.

    0
  • Alex

    Monday, December 19th, 2011 16:17

    21

    Hi, is it possible to use this psd file for a website?

    naturally adding thanks to creator on website footer.

    Thanks for your great tutorial

    0
  • Nathaniel

    Thursday, September 1st, 2011 12:23

    13

    Oh, I see that the outcome is the same as your Photoshop file. So why do you say to copy the style from the login button? Why would you add the “for free” text first and then go back to the box below it and then add styles to it?

    0
    • Michael John Burns

      Saturday, September 3rd, 2011 16:23

      18

      it is because login button and for free button has the same layer styles applied. The only thing you will change is the text.

      0
  • Todd

    Thursday, September 1st, 2011 15:55

    14

    Great Helpful.. This article are design tips to create website for Photoshop easy steps to learn it. Thanks keep it

    0
  • Nathaniel

    Saturday, September 3rd, 2011 03:36

    15

    I am really having trouble with this step. How did you contract this rectangle to get the border?

    “Now that we have the control and base layer we will add our services. Create a #141414 280px by 160px using Rounded Rectangle Tool. Place it as shown in the screenshot below, when you’re done contract the shape by 5px.”

    Thanks

    0
    • Michael John Burns

      Saturday, September 3rd, 2011 16:21

      17

      Ctrl + Click to the Rounded Rectangle Shape Layer on the Layers Panel to make a selection on that shape. Create a new layer above it and go to Select – Modify – Contract and set the value to 5px.

      0
  • Niks

    Saturday, September 3rd, 2011 12:40

    16

    Hi This Is a Nice Tutorial…… ! : )

    0
  • Alex

    Monday, December 19th, 2011 16:17

    21

    Hi, is it possible to use this psd file for a website?

    naturally adding thanks to creator on website footer.

    Thanks for your great tutorial

    0
  • mcneela86

    Saturday, September 10th, 2011 07:20

    20

    This is an awsome tutorial, is there any plans to do the PSD – html as a tutorial?
    Really like what your doing on your site.

    0
  • Niks

    Saturday, September 3rd, 2011 12:40

    16

    Hi This Is a Nice Tutorial…… ! : )

    0
  • Nathaniel

    Saturday, September 3rd, 2011 03:36

    15

    I am really having trouble with this step. How did you contract this rectangle to get the border?

    “Now that we have the control and base layer we will add our services. Create a #141414 280px by 160px using Rounded Rectangle Tool. Place it as shown in the screenshot below, when you’re done contract the shape by 5px.”

    Thanks

    0
    • Michael John Burns

      Saturday, September 3rd, 2011 16:21

      17

      Ctrl + Click to the Rounded Rectangle Shape Layer on the Layers Panel to make a selection on that shape. Create a new layer above it and go to Select – Modify – Contract and set the value to 5px.

      0
  • Todd

    Thursday, September 1st, 2011 15:55

    14

    Great Helpful.. This article are design tips to create website for Photoshop easy steps to learn it. Thanks keep it

    0
  • Nathaniel

    Thursday, September 1st, 2011 12:23

    13

    Oh, I see that the outcome is the same as your Photoshop file. So why do you say to copy the style from the login button? Why would you add the “for free” text first and then go back to the box below it and then add styles to it?

    0
    • Michael John Burns

      Saturday, September 3rd, 2011 16:23

      18

      it is because login button and for free button has the same layer styles applied. The only thing you will change is the text.

      0
  • Nathaniel

    Thursday, September 1st, 2011 12:12

    12

    This is the best Photoshop tutorial I have ever had. Many thanks. There is no better way to learn than by doing. I never knew about all these gradient overlays, etc.

    Yes, I am amazed at how much work this is, but that’s what a good design is about. I’m happy to go through it.

    All this said, I find some problems with the instructions. As is so often, there is a lot of assumed knowledge and many details are skipped over.
    For example, on the User Login, why would we rasterize that layer to create that shape? And if there is a reason, can you tell us the steps?

    You say on the Appointment Box, “Notice that For Free button in the preview above. To do that create a shape as shown in the screenshot below and copy the layer styles of the login button and place the same arrow shape as we used for our slider controls.”
    Well, this is strange because your screenshot shows this button as a solid gray. In the meantime, your Photoshop file (which I am so glad you have provided to fill in the blanks) is a completely different color. Neither of these examples however is what your instruction says, which is to copy the login button style. The login button style is almost black, and gets completely lost on the black background.

    Also, if you could provide the exact x and y coordinates of many of these items it would help. This is not critical, but it would really help out on this tutorial.

    Many thanks for providing this.
    G

    0
    • Michael John Burns

      Saturday, September 3rd, 2011 16:35

      19

      In user login part, It’s really up to you how you will create shape. In my own way I chose to use first the Rounded Rectangle Tool to have a nice rounded corner on top left and bottom left. Then I rasterize the layer so that I can fill fill the bottom left to make it not rounded. The to the top right part I use Pen Tool to create that curve shape. Note that there is many way to do it I just prefer that because I want to do it on one layer.

      In Appointment Box part it doesn’t matter what will be the shape colour because we will be applying gradients to it.

      0
  • nitin

    Wednesday, August 31st, 2011 12:49

    11

    That’s are to useful tutor for new photoshop designer when working on templete design of photoshop

    0
  • Reynold

    Wednesday, August 24th, 2011 21:38

    10

    This is great but have you used Fireworks? I find it easier to create web layout than photoshop. Great tutorial, thanks.

    +1
  • gouthami.b

    Wednesday, August 24th, 2011 19:34

    9

    Well..good tutorial.It really helps

    +1
  • Han

    Wednesday, August 24th, 2011 18:16

    8

    This is a great tutorial about Photoshop’s ability to create great website home page. Great Job!!

    0
  • Danny Wauters

    Wednesday, August 24th, 2011 17:41

    7

    Thats an awesome detailed tutorial.

    0
  • Karl

    Wednesday, August 24th, 2011 04:02

    6

    That’s a very in depth article. And a stunning looking template. Thanks for the post.

    0
  • Panos

    Wednesday, August 24th, 2011 09:20

    5

    Fantastic…and exactly what i was looking for….

    0
  • Gaby

    Wednesday, August 24th, 2011 01:41

    4

    That idea of ​​self service GD is pretty good. I know that they have a good team of programmers to implement this great idea. I congratulate friends.

    0
  • Shiva

    Wednesday, August 24th, 2011 01:13

    3

    Great tutorial!
    i will learn a lot from this!
    Thanks

    0
  • Cornel

    Tuesday, August 23rd, 2011 14:47

    1

    Masive work.
    But maybe nobody read all of it. :)

    0
    • Puneet

      Wednesday, August 24th, 2011 04:10

      2

      I am not agree with you. A person eager to learn will defiantly read it. Its a very detailed one & I learnt a lot from It.

      0

Comments are closed.

54.83.133.189 - unknown - unknown - US