Today I’m going to show You how to create a nice looking transport company template. We will be using a lot of blending options and some of shadow techniques. Template is based on 960 grid system with 12 grid option.
What will be needed in this tutorial?
- 960 grid system for photoshop
- Truck icon
- Rss feed icon
- Express photo
- Yellow truck photo
- Airplane 1 photo
Step 1. Using 960 grid system
After downloading package of grid system import action files into photoshop. After that click play button when 12 column grid is selected. This will create new document. Go now to Image -> Canvas size and change height to about 1300px so we can have more workspace.
Step 2. Background
Our background for this template is just solid color with a little bit of noise. Create new layer called bg, choose color #e2e2e2 and go to Edit -> Fill. Now to add some noise go to Filter -> Noise -> Add noise. Add about 2-3%. Set distribution to uniform and check monochromatic. Now on the background You should have a texture similar to this
Step 3. Header section
Mine header section has about 170px of height and 940px of width. There will be place for out company logo, rss feed and navigation. In this step just add some guides. Go to View -> New guide, set orientation to horizontal and add four guides for now at 100px, 150px, 170px and 200px. You will see later what for we created them. You can add now two vertical guides which will be helpful with our menu shadow. In New guide choose orientation vertical and set 50px and 970px.
Step 4. Logo and RSS feed
For the logo I used a truck icon, text and slogan. Font that I used for “TransPorter” is Bauhaus, color of “Porter” is #dd6101. Font for “Always on time” is Arial with tracking on -75. I placed my logo on the top left corner of the site.
Now on to right top corner, add our rss icon, go to Edit -> Free Transform and rotate it a bit. Add some text like subscribe or something like that.
Step 5. Navigation
Now get the rectangle tool and draw a rectangle in grids we created earlier, between 100px and 150px. Width of the menu is 940px.
Now copy the nav bg layer, name it shadow and move it under the nav bg layer. Select it and fill with the black color.
Move the shadow layer for about 10px under the nav bg layer.
Now go to Edit -> Transform -> Warp and move the points like in the picture. Same or the left and right side of the shadow.
Now You should have something similar to this
Now go to Filter -> Blur -> Lens blur and use this options
Your header should now looks similar to this
Add some text to the menu and create the separator. I copied a straight line with 2px of width and 50px of height and paste it in another layer. If You did it like me go now to blending options -> gradient and set
Of course You can do it other ways like create two lines with line tool or use rectangle tool with 1px of width. You can choose whatever You like for this.
Now select one of the buttons, select nav bg layer and copy -> paste this to another layer. Call it nav hover or something like that and go to blending options
Our navigation and whole header section should be ready by now
Step 6. Slider
Now we will be creating our slider. Make new guide horizontally on 500px. The black background is our slider.
Now add a van photo to the right of the slider.
Now select the whole slider, go to polygonal lasso tool and with holding alt cut some of the right part of the slider
Now copy and paste it in new layer. Call it text bg. Choose gradient tool with colors
Select a text bg layer and drag the gradient in it.
Now copy the text bg layer, paste it and move it under text bg.
Select it and change color to black. Call this layer shadow. Now add a mask to this layer, go to gradient tool, change colors to black and white.
You should have something like this
Now add some header and text
Now choose Rounded rectangle tool, set radius to 10px, create new layer and draw a shape for Learn more button. Now go to blending options and set gradient and stroke
Add some text like LEARN MORE or something You like.
Now we will be creating our pagination for slider, so get the rounded rectangle tool with radius of 5px, create new layer and draw a shape.
Copy layer styles from LEARN MORE button.
Now choose ellipse tool, create new layer called dot and, holding shift, draw a perfect circle. Go to blending options and set
Copy the dot layer three times. In one of them set the gradient to #ad4b00 -> #713100. This will be active state. Now our slider should be ready.
Step 7. Content area
Get the rectangle tool and select the rectangle (background) for our content area. Mine has 940x552px and it’s based on content You have.
Now go to blending options and add color overlay #ba5100 and stroke 1px inside #a1a1a1
Now we are going to add a photos with truck and plane. Mine photos has 400x150px. They are in two columns in the middle of the template. If You want rounded corners just add guides around the photo, choose rounded rectangle tool with radius You need, make selection over the photo. Now select new layer and go to select -> inverse. Now click on Your image layer and press delete. If You do everything fine your photos should have rounded corners.
Add some outside stroke with color #bbbbbb. You can also add some shadow to the photos. Choose ellipse tool with black color and draw shape similar to this.
Now go to Filter -> Blur -> Gaussian Blur and choose the option You like. I think I used something about 25-30px. Now put your shadow layer under Your photo layer and move it in the place.
Now add some text. I gave header a little bit of shadow and I used the same LEARN MORE button that I used in slider.
Step 8. Footer
So here it is our final product.
Thank everyone for reading. Hope You guys and girls enjoyed. Please comment and share. Next tutorial in the progress.