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! 