3,259 Subscribers
Jun
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.
If you want to pass 1Y0-A05 and looking for exam help, examsheets can help you pass 642-983 as well as 642-383 in effortless way.
Visit PsPrint and learn how you can create effective and excellent-looking business cards at a fraction of a cost!
Newsletter
Subscribe for free to the grafpedia’s newsletter and get all updates coupons and exclusive free graphic resources every week. Read this page to have more information about the newsletter or fill the form below to subscribe now !
Responses to “Design a premium wordpress blog with Photoshop”
Trackbacks
- 33 Newly Fresh Web Design Layout Tutorials | Naldz Graphics
- 30+ Newly Fresh Web Design Layout Tutorials | iwebask
- Web Design Tutorials: The Ultimate Roundup (part-II) | How It Easy (HIE) Computing community
- 39 Best Photoshop Web Page Layout Tutorials
Leave a reply
Subscribe for free to the grafpedia’s newletter and get all updates and exclusive free graphic resources every week !
- Actions (7)
- Backgrounds (2)
- Brushes (31)
- Cinema 4D (1)
- Contests (4)
- Designing (16)
- Drawing (13)
- Effects (4)
- Gradients (4)
- HTML5 / CSS3 (2)
- Icons (52)
- Illustrator (3)
- Layer Styles (4)
- Logos (1)
- News (14)
- Patterns (5)
- Photo Effects (3)
- Psd Themes (101)
- Psd to HTML (1)
- Stock Images (20)
- Templates (103)
- Text Effects (1)
- Textures (17)
- Tutorials (129)
- Vectors (134)
- VIP Downloads (217)
- Web Elements (16)
- Web layouts (108)
- Wordpress Themes (1)
Facebook Grafpedia Group
© 2011 | Grafpedia is proudly powered by Wordpress edited by GrafikNetwork
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.
Awesome! Thanks 4 this great work and best regards from Germany.
i host 5 of my blogs on Blogspot and it is really good for beginners. but if you want something with more features, nothing beats wordpress,:’
Few things are harder to put up with than the annoyance of a good example.
This will improve my wordpress blog a lot. Thx for all those usefull tips and tricks.
Thank you very much and I found it very useful! I work with wordpress but also with photoshp a lot and so thank you!
This is very awesome theme design. I like your design.
Hi, thanks for that good design!
The design is awesome.