15
Feb
2013

Design a different type post title background for your WordPress site

Posted in: Photoshop , Comments Off

Instead of having common type post title background, why not have a different type post title background for your WordPress site to give it a different look. This tutorial is basically for WordPress theme designer to use a different type post title background.

Below is a preview of the final image.
wordpress-post-title

Step 1:
Create a new document sized 700 x 250px with transparent background.
Create a new layer named “white background”, Select “Rectangle Tool” from the toolbox:
rectangle tool

Draw a rectangle shape using white color. Leave around 20px margin from both left and right side.
49

Step 2:
Create a new layer named “grey background”, Select “Rectangle Tool” from the toolbox and draw a rectangle shape as shown below. Use color #ebeaea and leave 8 px margin from left side and about 35 px margin from right side.
50

Apply following layer style to “Grey Background” layer.
51

You should get something like this now:
52

Step 3:
Create a new layer named “left border” just below “Grey background” layer. Select “Pen tool” and draw a triangular path as shown in below image. Fill the triangle path with #000000 color and after filling, delete the path.
53

Step 4:
Create a new layer named “shadow” just below “Grey background”. Again using “pen tool” draw a black triangle shape.
54

Apply “Gaussian Blur” (Filter >> Blur >> Gaussian Blur) with radius 10 px.
You should get something like this now:
55

Now free transform the shape (CTRL + T) and stretch it both the side to get like this.
56

57

Step 5:
Create a new layer named “ Dark grey background”. Select “Rectangle Tool” from the toolbox and draw a shape as shown below. Use #727272 color and leave about 7px margin from top, bottom and right side.
58

Apply following layer style to “Dark grey background” layer.
59

You should get something like this now:
60

Step 6:
Hold “CTRL” key and click on “Dark Grey background” layer. This will load the grey background shape.
61

Now select “rectangular marquee tool” and remove about 200 px selection from left side.
62

On rest selected area, paste a image related to your post. Its similar like post thumbnail image. I am just using a random image.
63

Step 7:
Select “text tool” and type post information like “Post date”, “category”, “Author” in left of the thumbnail image.
64

And again type post title using following text style.
Font style: verdana
Font weight: Bold
Size: 24
color: #2f2f2f

This is final image of the post title.
wordpress-post-title

I hope you like the tutorial. below you can download the PSD file.

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati
Both comments and pings are currently closed.

Comments are closed.