Design a premium wordpress blog with Photoshop
In this tutorial I will show you how to create another premium wordpress layout with a special area where you can feature your e-book or your digital downloads. If you have something to sell and if you want to make the most of your wordpress blog then a good looking layout with a web 2.0 look it is the right choice to make some good money.
Apply for VIP to download this PSD layout
This wordpress layout I will start by opening a new document in Photoshop with the following sizes: 950 pixels wide and a value greater than 900 for the size of height. For the background color I will use: #f4f2e9
I am choosing always the width of 950 or 960 because most of the website will look very good on almost all monitors resolutions.
With Rectangle Tool I will create some shapes like in the following image.
On the left side I will create 3 shapes with Rounded Rectangle Tool. Please click on the image to see better the result
I will create another two lines at the bottom of the layout, and at the end
For this whit shape I will add a simple layer style.
This is the result.
I will create a layer on top of all layers, and with Brush Tool, I will add a single point on my document.
Then I will change the blending mode for this layer to overlay.
I will download a set of icons I have released for VIP members a few weeks ago: Download vector icons
I will open the eps file in Photoshop, then I will cut each of the icons, and I will place on my layout
Over this area I will place some software boxes with some VIP downloads
Right under the layers with 3d Software boxes I will place another black shape with Ellipse Tool
With this layer selected in your layer palette, please go to Filter > Blur > Gaussian Blur, and use the following settings
This is my result so far
Did you notice the spot where I placed the 3d Software boxes? This spot is very good because it will bring you more sales. The products are much closed to the logo, and it will be more visible. Now I will write some text for the logo.
For this logo text I will use the following layer styles.
This is how my final logo will look like.
On the right side of the layout I will write some text for my navigation bar.
With Rectangle Tool I will create a square shape, and then I will rotate until I will have the following result.
With Move Tool I will place the square shape until I will combine the button and this shape.
I will select Horizontal Type Tool, and I will write the text for this layout. Click on the following image to see the full size of my wordpress design.
I will select one more time Horizontal Type Tool, and I will write some dots “… ”
I will create a new layer (press CTRL+SHIFT+ALT+N), and I will zoom this document to 1200 %. I will grab Pencil Tool, and with a 1 pixel brush I will create a button.
I will duplicate this layer with the button several times, and I will place it like in the following image. I you can see also that I have some banners on the left side. There are the same banners we have live right now on Grafpedia.
Click on the image to see the real size.
On the top of the layout I will add a search box, and an rss icon.
On the bottom of the layout I will write one more time Grafpedia, and behind the layer with the text I will create a dark shape.
This is my final premium wordpress layout.
If you want to download this layered PSD layout together with our premium downloads please apply for a VIP account. Applying for a VIP account will allow you to download ALL resources from Grafpedia + all the upcoming releases for the period of time you choose to subscribe. The payment is on time fee, and you will not be charged automatically when the subscription is over.
Responses to “Design a premium wordpress blog with Photoshop”
Trackbacks
Leave a reply
-
Web design jobs- Logo letter Change by ama2009
- Nonpublic project #608665 by pminmia
- Lendervend Auto Accept by unloadit
- Ebooks - 20,000 Words Each - $60 Each - USA, UK, Writers by cseba
- Google Maps API by esdealer
- Travel agency website needed conversion of printed brochure by jimgeo68
- Wordpress MLS Real Estate Integration by djmystere
- CL Job posting by webdevelop
- Nonpublic project #608652 by webmasterm
- Need vBulletin Designer by baea
-
far from premium, but very nice.
Looks pretty good.
solid layout, but disappointed you didn’t talk about coding the ps file into something actually usable in wordpress. that’s the kind of tutorial I’m looking for.
The tutorial name is Design a wordpress blog in Photoshop. I will try to create soon also a big tutorial on how to transform a PSD layout into a wordpress theme
This is an awesome tutorial.
I have subscribed to the feed for the coding part you mentioned above.
(@Farrhad on Twitter)
Hi,
thanks for another tutorial would love to see a desing were a lot of different brushes are used. You have some nice brushes on your page but I can’t realy think of possibilities how and where to use them. Is it possibile to use brushes and re-color parts of bruches etc etc …
Can be done. I will use some brushes when i will create my next tutorials. In a few days i will add the tutorial. Until then i have another one scheduled
Pretty cool
Really clean and awesome layout, and a nice easy tutorial!
Featured here: http://www.presidiacreative.com/web-picks-26/
http://www.grafpedia.com to GoogleReader!
Thanks
Pett
Thank you very much
Excellent blog, really good job. Next step should be slicing and coding tutorials. See you.
Nice tutorial! will try doing this sometime
Awesome web layout with nice step by step tutorial
thanks a lot for your kind effort
your all web layouts tutorials is like big assets for me
I learn a lot
please keep them coming
god bless you:-)
A beautiful result. You realise most web layout and designs are outdated.
A very nice work. I feel that Photoshop is a great tool.
amazing article.. very detailed with lots of guideline.. really good tutorial. Thanks for this great share.”
Great tutorial thanks
@micah
I’m with you. Everywhere I look, there are PSD>Wp tutorials with NO instruction on how to implement it FUNCTIONALLY in Wp (let alone first make sure it is CSS/XHTML valid)
This is what is so very much needed.
Nice design, but will someone eventually get to actually putting together the coding for having functional pages, and navigation coding please?
hi..
may i know the name of the font for word “Search”, menu and content on that design?
anyway nice tutorial.. thanks a lot!
cool) thanks
for a begginer like me, this is great^^
Good read, thanks.
Thanks for sharing this i will try it today
Awesome job !!! keep it up.
Thanks for tips to build layouts.