Hi guys. Today I’m going to show you how to create template for a hosting company. Template is really easy to do, so there shouldn’t be any problem with follow.
What will be needed in this tutorial?
Step 1
Before we start making template itself, lets use one of the grid actions. This template was build on 12 column grid. So go to actions panel and click on the drop-down list.
There You have “Load actions”. Click this and choose action file from 960 grid system. After that You should have three new actions: 12, 16 and 24 column grids. Click on 12 column grid and press play button. New project should be created. Now go to image -> canvas size and change height of the image for about 1500px.
Step 2
Ok, so now we are ready to do some work. First we’ll create our background. Choose gradient tool and set the gradient to radial.
Foreground color is #2179d3 and the background color is #283a90. Now make sure You starting over the top of our template. That will make our radial bigger and more smooth.
Now You should have Your nice blue background.
Step 3
Our header section has logo and our navigation. For the logo I used a shark icon and some text with Star Jedi font. So for the box under logo use color #e5e5e5 and rounded rectangle tool with radius of 10px. Make sure You start a little bit over the template so Your upper part isn’t rounded. Now go to blending options and set a little drop shadow.
Now on the left bottom side of the box add our shark icon.
Now use Star Jedi font to make some text. I used 30px for “technology” and 36px for sharks. Make sure that both are on different layers. Now go to blending options and add some gradient and inner shadow.
Now just copy layer style to the second word. To do this click right mouse button on styled layer and choose “copy layer style”. Then click on the other layer and choose “paste layer style”. Make sure You click on the name of the layer, not on the thumb.
Step 4
After doing the logo now it’s time for doing our navigation. Choose rounded rectangle tool with radius of 10px and color of #e5e5e5. Draw the shape of our navigation. Now add a drop shadow.
Now add some text to the menu. I used Myriad Pro Condensed with color of #283a90.
Ok, so now we have our header section ready. It’s time to start with our featured/slider section.
Step 5
In this section we will be using a photo of computers and some text with read more button. This is pretty standard. First You have to cut computers from the background of the photo. You can use for this polygonal lasso tool or pen tool. Anything You’re comfortable with. After cutting this duplicate the layer (layer -> duplicate layer) and flip it vertically (edit -> transform -> flip vertical).
Now select one of the sides and go to edit -> transform -> skew. Now grab square on the side and fit it nicely.
Now do this for the other side of our reflection.
Step 6
Now choose the mask for our reflection layer.
Click “D” on the keyboard to make colors default. Choose gradient tool and draw a gradient when You have Your reflection mask selected.
Now change the opacity of reflected layer for about 30%.
Step 7
Now add some text on the right side. I choose Myriad Pro and color of #e5e5e5.
Step 8
To create read more button we need again rounded rectangle tool with radius of 10px. After You draw a shape go to blending options.
After that add some text on the button. I used a color of #283a90. Then choose custom shape tool and search for “i” icon. Draw small shape of it with the same color as text.
Now we have our featured/slider area done. No it’s time to add some boxes under it.
Step 9
Take rounded rectangle tool with radius of 5px this time and color of #e5e5e5. Draw a shape for our first box. Add some drop shadow to it.
Now select this box, choose rectangular marquee tool, hold alt and deselect most of the box. Just leave a bottom part for our learn more and get now.
Now copy and paste this into new layer. Change color to #283a90. Split this on two parts with a little bit of angle between them. I think the easiest way to do this is to choose polygonal lasso tool and holding alt draw right shape.
Step 10
Now add some text to the box. For the text on the grey background add some inner shadow.
For the learn more and get now text add some drop shadow.
Our first box is ready now.
Step 11
Good thing to do now Is to create a group for our box files. Call it box1.
After this just place Your box files in there.
Now go to layer -> duplicate group. Do this three times. Now You should have four boxes. Place them where they should be and now You only need to change the background color for the boxes.
Background colors are:
First box: #e5e5e5
Second box: #dfdfdf
Third box: #d6d6d6
Fourth box: #d0d0d0
The best way I think is to go to blending options -> color overlay or You can just select the background and choose edit -> fill.
Now we have our box section ready. Lets add some content now.
Step 12
The background of our content section is rounded rectangle shape with color of #e5e5e5. On the left we have small list and icons and on the right we have our heading and some text.
Now just fill it with some text and icons. All icons You can find under the custom shape tool. For the heading add some drop shadow, same thing for our icons. You can fill it whatever You like. Use other fonts, other colors, other icons, other arrangement.
Step 13
Now lets add some separators between our sidebar and text area and between our list items I the sidebar. To do this just grab a rectangle marquee tool with fixed size of 1px of width and, in this case, 290px of height. Select the line between text and sidebar.
Fill it with the color of #ffffff. Now select another line on the side and fill it with #d0d0d0. Now You have Your separator. Now hold ctrl, select both layers and merge them.
To add a smooth transition select separator layer, choose gradient tool and set this like in the picture
Now add mask for the separator layer and draw a gradient over it.
And now You have Your smooth separator. Now copy it and paste between list items on the sidebar.
Step 14
It’s time for footer so again chose rounded rectangle tool and draw a shape. This time make sure You started under our template. It make rounded corners only on top of the footer background.
Step 15
Add some text to the footer, maybe some list items, some random text, copyright, links or other. Mine footer has four columns.
Finished!
Congrats! You have just created a simple but nice template for hosting company. There is a lot of things You can add in this template. Just play with it a little bit more, release Your creativity and maybe add some nice features.
Hope You guys enjoyed and learnt something new or just have fun reading this tutorial or trying a psd file.
Thank You for reading and please leave comments and share. This always be appreciated.
0 commentaires:
Enregistrer un commentaire