Shift Template With Photoshop

What you will be making
http://sixpop.com/images/file/33903866.png

Step 1
Open up a new document, It can be white, black or any color you desire. I will be using the size 1024x1000px. You can follow it or not.

Warning: lots of images ahead



Step 2
Next I went to deviantart and downloaded a pattern by xe0s. you can download the pattern by him here

Grab the paint bucket and fill the background layer with the color #272727.

Open up the .psd file of the pattern you had just downloaded. Hide the background layer, and the top layer so you're left with the pattern layer


Now go to Edit >> Define Pattern

Name it something and hit OK


Step 3
Make a new layer on top of the background layer and go to Edit >> Fill


Lower the layer opacity of the pattern layer to around 20%

Step 4
Grab the Rectangle Tool (U) and make a box like so. Hex: #dfdfdf


Stroke color: #454545


Step 5
Now I cut a piece of the pattern out for the logo, you can do that or use the one I cut out from it.


Paste it neat the top left.


Step 6
Now for your site name, if it is two words make it 2 colors but one, just pick a color. Blenz Design is 2 so I chose two colors.

First word "Blenz" Hex color: #272727
Second word "Design" Hex color: #575757

Then position them nicely to each other.


Step 7
Navigation Time

Make a bar so that it fits under the site title area but not as wide as the box.


Pop up blending options for the bar.


#272727 - #191919 - #272727


Step 8
Now type in the text. I used "Arial" (default font) at size 15. Hex colors: #ffffff


Step 9
Now make a box and match it up with the navigation bar (same width but bigger length) with the color: #d6d6d6


Now add the text.
About - #272727 Size: 18, Font: Arial
Dummy Text: - #575757 Size: 12, Font: Arial

Dummy text website: Click Here



Step 10
Duplicate the box for the "about box" and move it down. Give it some space.


Make the text like above but this, using two, so sue the 2 colors.


Now make it something like below, still using Arial, but experiment with font size and use the 2 colors 272727 and 575757


Step 11
Make a new layer and grab a 1px brush. Color: #cecece


"Update": #575757 | Size: 12
"New site look": #272727 | Size: 18

Once again, grab the dummy text and paste it on. Size: 12 | Color: #272727


Step 12
Now just fill up the rest using the step above.


0 comments:

Post a Comment


Locations of visitors to this page