Here is the final result:
Let' begin! Create a new document : width 1020px, height 1869 and as a background color use #1b0e03. Please note that you don't need to have this height. It can vary, but to obtain a similar template you will need to use this height
Once you have setup this let's create the logo. Grab Type tool (T) and write some letters (your desired text for logo). Select it and choose your preferred color. I have chosen #FFFFFF for the main logo and #ff8f31 for subheading.
Top Men
In Wordpress this is for page.php or for pages (in admin). To obtain a similar effect, in Photoshop grab rounded rectangle tool(R) with a radios of 5px and create the navigation bar- mine has the following dimensions: width 308px, height 58px. Once you have created the shape you will need to hide a portion for the top of the shape, in that manner that you will have rounded corner only at the bottom of the shape, and apply the following layer styles
Outer Glow
All you to do now is to populate the Top Menu with some text - As a font I have choose Helvetica
Here is my result:
Let's create the search bar - located on the same line with the logo.
Grab rounded rectangle tool(R) with a radios of 10px and draw a shape. Mine has width: 252px, height: 31px and apply the following layer styles:
Inner Shadow
Select rectangle tool and draw another shape on the same line with the search bar with the following dimensions - width 91px, height 31px. I have positioned mine on the left side of the search bar and I have pushed it under search bar to create a single shape.
Push this shape under search bar:
After that add some text and your search bar is done
My result for search bar
Let's move now to navigation bar!
The first thing you should do is to draw a border for our navigation. With pencil tool set the brush to 2px, press Shift button while dragging with the mouse (to create a straight line) draw a line from one corner to the other. As a color I have choose orange #fe9e12
Underneath this border it will come our navigation bar. Select rectangle tool (R) and draw a shape - mine has the following dimensions - width: 1034px, height:45px, than apply a gradient overlay for this shape. Here's mine:
This navigation bar it will serve to show our categories, since this template it will be used as an Wordpress theme. With type tool I have added few line of text
Here's the result so far:
Now we will prepare for the main area. With rectangle tool draw a shape, begin underneath the navigation and leave some space at the bottom for the footer , I have used the following dimensions: width: 1034px, height 1542px and as a color I have used #FFFFFF. Once you have added this shape you will notice that the navigation bar is a little bit too simple, that's why you will need to add, at least an shadow.
Select rounded rectangle tool with a radios of 20px as a color use #333333 and draw a shape using this dimensions - width: 1046px, height 123px, then apply a Gaussian Blur with a radios of 68px. To obtain a nice shadow effect you will need to push your newly create shape under navigation bar. Please see the screenshot:
And here's the final result after I have placed the shadow under navigation bar:
Let's move to the main area now
First thing that I will do is to create a box for Latest Tweets. Using again the rectangle tool, draw a shape with the following dimensions - width: 279px, height: 328px using this color: #fcf9f4. We will need to add a border also, but this is a simple steep because we will use a stroke to obtain this. Please see the screenshot for stroke details.
Now repeat the same steep and create another 2 boxes which will be used for Latest Projects and About Me. Also a box with the same dimensions and style will be used for the sidebar also
I have played around a little bit (I have added some text and images. For text I have used again the Helvetica font) and I ended up with the following result
I will move now to the content area. As you know every Wordpress theme has a title and under it has few more details like: the author, the date when the article was published and in which category - but this one are completely optional. We will need to create the same thing in Photoshop. For title I have used Sans Serif font (24px) and I have separated the title from the rest of the info's with an orange line and a Grey one. At the first look you will think that this is a single line with 2 colors but you are wrong. It's far more easier to create 2 lines (having the same height) with 2 different colors and then to overlap them.
For the body of the article I have used the same styles that I have used to create the top 3 boxes, the only differences are the dimensions. For this one I have used width: 640px and height 421px. With the pencil tool I have added few lines to separate the read more text from comments
Here's my result so far:
All you have to do now is to add some content to populate the articles
For sidebar I have used again the same box which has been used to create those 3 boxes at the top. I have used the same styles and dimensions. For this photoshop template the sidebar is used only for advertisement proposes.
If you will look careful, on my preview at the bottom of the articles I have created a pagination. This one is really easy to create. Select Rounded Rectangle tool (make sure you have a radius of 4px) and draw some shape with the following dimensions: width and height - 28px. Multiple them and add some numbers on the top of each shape.
Well the template is almost ready. All you have to do is to add some copywrite info's on the footer. That's all!
To download this file you will need to be a Premium Member. For only $8.99 you can become a Premium Member and you will be able to download all of our Premium Files.
Don't want to pay? Usually we release one Premium File per day and it's free for the first 200 downloads. Visit our website daily and you will be able to download all of our files for free....
Comments (4)
Write comment
| < Prev | Next > |
|---|
Photoshop Templates - Tutorials
Login Form
Product Categories
 |
 |
 |
 |
