Design a Light & Textured WordPress Theme in Photoshop
Learn
how to create a minimal, light & textured WordPress Theme Layout
using Photoshop. We'll be using some useful techniques to create the
Patterns & the layout from scratch!
2.
Press CTRL+R to bring the rulers up around the canvas & drag out 2
vertical lines like below. Go to Image > Canvas Size and enlarge the
canvas using the settings below. These 2 lines will be our content
border when creating the WordPress Theme.
5.
To add a nice Stitch Effect on the Top Bar, write out the minus symbol
using the font below. Double click into Blending Options and put in a
Drop Shadow. On the left side of the bar write out Log In | Sign Up.
Next download these Social Icons, drag them to the canvas & make them smaller by pressing CTRL+T and drag a corner down while holding down the Shift Key. You can change the colours of them by going into each folder, go into Blending Options on the Shape layer and changing the Color Overlay.
7.
Next write out the Menu Names using the font below. Using the Rounded
Rectangle Tool (Radius 70) draw a button. Double click into Blending
Options and put in the following options. Drag the button to the New
Layer icon to duplicate and place a button underneath each menu name.
9. Draw the Featured Image using the Rectangle Tool (White). Double click into Blending Options and put in the following:
10.
Place the featured image example directly over the White box. Right
click on the image and Create Clipping Mask. This will crop your image
down to the white box. Using the Rounded Rectangle Tool (Radius: 70 px)
draw the Read More button. Double click into Blending Options and put in
the following. Right out 'Read More' using the text below, double click
into Blending Options and put in the Blending Options for the text.
11.
Using the Line Tool (1px) draw 2 lines for the divider, make sure you
hold down the Shift Key while drawing the lines. To make the lines
slowly fade out, press the Add Layer Mask Icon on each line, go to the
Mask Layer and using a black soft edged brush, erase the ends.
12. Duplicate the Post & Divider Layers.
14.
Next write out the Search heading (same font type as Categories
heading) and draw a box using the Rectangle Tool. Go into Blending
Options and put the options below on the search box, Next go into the
Custom Shape Tool, choose the magnifying glass icon & draw the shape
on the search box.
15.
Next write out the Flickr Heading & draw a thumbnail box using the
Rectangle Tool (in white). Double click on the thumbnail shape to go
into Blending Options and put in the following. Place the example image
you want on the thumbnail directly over the layer, right click &
Create Clipping Mask to crop the image down. Duplicate the thumbnail
layers and place them neatly. If you want, drag out a couple of rulers
to align them better with the rest of the sidebar content. If you want
to remove the rulers, drag them off the canvas with the Move Tool (V).
Final Result
Pattern Text 1
For the first Pattern, create a new document with the settings below. Using the Rectangle Tool (black) create the shape below. Hold down the CTRL Key and select the rectangle layers, press CTRL+E to merge them together. To turn it into a pattern go to Edit > Define Pattern.Pattern 2
For the second Pattern, create a new document with the settings below. Using the Rectangle Tool (black) create the shape below. Hold down the CTRL Key and select the rectangle layers, press CTRL+E to merge them together. To turn it into a pattern go to Edit > Define Pattern.Canvas Preparation
1. Create a new document with the settings below:Background
3. For the Background, double click on the background layer to unlock then again to go into Blending Options. Put in the settings below:
Top Bar
4. Using the Rectangle Tool, draw the Top Bar in white. Double click on the layer to go into Blending Options and put in the following:
Next download these Social Icons, drag them to the canvas & make them smaller by pressing CTRL+T and drag a corner down while holding down the Shift Key. You can change the colours of them by going into each folder, go into Blending Options on the Shape layer and changing the Color Overlay.
Heading & Menu
6. Write out your WordPress Theme name, I'm using the font Minneola.
Posts
8. Using the font below, write out the Post text details.
Sidebar Content
13. Next write out the Category heading & categories. I've placed an arrow icon (from Custom Shapes) beside the Categories & use a 1px Line for a divider.
Pagination
16. Next create the Pagination using the Rectangle Tool & Text. I've put some Blending Options on the buttons below.
Footer
17. Lastly I've duplicated the Top Bar background and placed them on the bottom for the footer & write out the Copyright details.
Final Result
