In this First of the Year 2012 tutorial we are going to create a Web Hosting Landing Page layout for Besthost as an example. The template will have a simple logo, navigation, slider gallery, package, about us, 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 now let’s get started!
Resources for this tutorial
Step 1: Setting up the Document
Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.
Rulers: Ctrl + R
Guides: Ctrl + ;
Also one important thing when using Ruler Tool is the Info(Information) Panel. Use this 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.
Step 2: Working on Background
Header and Slider
Starting at the top of the canvas select Rectangle Tool(U) and create a 100% by 470px fill it with #1560d5.
Based on the screenshot, our background will contain grid patterns, so let’s create that. Open up a new window and create a 100px by 100px with a Transparent background. Select Pencil Tool(B) and set the size to 1px then, create an L shape as shown in the screenshot below. Then go to Edit – Define Pattern
Create another pattern using the L shape, but this time make it 20px by 20px.
Now that we have our pattern, create two new layers. For the first layer fill it with the Big Pattern using Paint Bucket Tool(G) and from the drop down list on the options panel set it to Pattern then select the Big Pattern. Then set the Layer Mode – Softlight 50%. On the second layer fill it with the smaller pattern, Softlight 20%.
Result.
Newsletter
Content & Copyright
Footer
