Creating nice and clean transport company template – FREE PSD!

Posted by Mtuts on March 7, 2011 in Designs | 21 Comments
Creating nice and clean transport company template – FREE PSD!

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?

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.

photo 1

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

photo 2

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.

photo 3

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.

photo 4

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.

photo 5

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.

photo 6

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.

photo 7

Move the shadow layer for about 10px under the nav bg layer.

photo 8

Now go to Edit -> Transform -> Warp and move the points like in the picture. Same or the left and right side of the shadow.

photo 9

Now You should have something similar to this

photo 10

Now go to Filter -> Blur -> Lens blur and use this options

photo 11

Your header should now looks similar to this

photo 12

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

photo 13

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

photo 14
photo 15

Our navigation and whole header section should be ready by now

photo 16

Step 6. Slider

Now we will be creating our slider. Make new guide horizontally on 500px. The black background is our slider.

photo 17

Now add a van photo to the right of the slider.

photo 18

Now select the whole slider, go to polygonal lasso tool and with holding alt cut some of the right part of the slider

photo 19

Now copy and paste it in new layer. Call it text bg. Choose gradient tool with colors

photo 20

Select a text bg layer and drag the gradient in it.

photo 21

Now copy the text bg layer, paste it and move it under text bg.

photo 22

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.

photo 23

You should have something like this

photo 24

Now add some header and text

photo 25

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

photo 26

Add some text like LEARN MORE or something You like.

photo 27

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.

photo 28

Copy layer styles from LEARN MORE button.

photo 29

Now choose ellipse tool, create new layer called dot and, holding shift, draw a perfect circle. Go to blending options and set

photo 30

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.

photo 31

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.

photo 32

Now go to blending options and add color overlay #ba5100 and stroke 1px inside #a1a1a1

photo 33

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.

photo 34

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.

photo 35

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.

photo 36

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.

photo 37

Step 8. Footer

Create a guide in 1150px horizontal. Choose rectangle tool with color #444444 and draw some rectangle. On the left add some copyright text and on the right add some secondary menu with sitemap, privacy policy etc.

photo 38

Finished

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.

21 Comments to Creating nice and clean transport company template – FREE PSD!

  1. jawanda says:

    gud one for begginers…………..keep it up

  2. Peter says:

    Hello!

    Very nice tutorial :)

    Best regards!

  3. tirath says:

    Awesome tutorial with nice output
    thanks so much for this
    Keep up good work
    God bless you

  4. söve says:

    Very nice tutorial.Thank u

  5. ziyara says:

    Hi,

    Very informative …. I am totally new to this field…Your post really helped me to understand some of the insights :)
    Keep the good going ……

  6. Awsome blog! I am loving it!! Will come back again. I am bookmarking your feeds also

  7. Raju says:

    Very good tutorials

  8. Great website. Plenty of useful info here. I am sending it to several friends ans additionally sharing in delicious. And naturally, thank you on your sweat!

  9. abhay says:

    very good tutorial :)

  10. Aditya Mohan says:

    Loving it ! Thanks a lot

  11. naser says:

    nice- very nice -go head

  12. Thank you very much for sharing this good tutorial.

  13. I am very happy with the purchase. The bag is. Delivery is made within one month. Yes, I recommend a product to a friendExcellent Seller, Fast Postage, Highly RecommendThank you. Great bag. Great seller. Will be ordering more from him

  14. [...] Ligação tutorial para criação de Nice E Template Limpar Companhia de Transporte gratuito PSD [...]

  15. Greetings! Quick question that’s totally off topic. Do you know how to make your site mobile friendly? My website looks weird when browsing from my iphone. I’m trying to find a theme or plugin that might be able to fix this problem. If you have any recommendations, please share. Appreciate it!

  16. Hmm it looks like your website ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I too am an aspiring blog blogger but I’m still new to the whole thing. Do you have any tips and hints for beginner blog writers? I’d certainly appreciate it.

  17. Admiring the time and energy you put into your blog and in depth information you offer. It’s great to come across a blog every once in a while that isn’t the same outdated rehashed information. Excellent read! I’ve saved your site and I’m adding your RSS feeds to my Google account.

  18. Hey outstanding website! Does running a blog such as this take a lot of work? I’ve no expertise in coding but I had been hoping to start my own blog in the near future. Anyhow, if you have any ideas or tips for new blog owners please share. I understand this is off subject however I just needed to ask. Thanks a lot!

  19. Hey! Would you mind if I share your blog with my facebook group? There’s a lot of people that I think would really appreciate your content. Please let me know. Thank you

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>