Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Fresh Blog Interface

Fresh Blog Interface


With the help of this tutorial, you will be able to create a professional and trendy blog interface as seen on popular blog sites, such as wordpress layouts.

Step One

Make a new document 800x600 and fill it with a light gray background (#F0F0F0).

Background

Step Two

Take the rounded rectangle tool and select white as your shape color (#FFFFFF).  Create a rounded rectangle shape by dragging a small box  to create a new shape layer.  This will be the base layer for our blog interface.

White Background

Step Three

Right click this shape layer, and click blending options.  Set up the outer glow as follows:

Blending mode: Normal
Opacity: 10%
Color: Black

Outer Glow

Step Four

Take the rounded rectangle tool and using a light blue (#0098F6)  create a banner for your interface as shown below.  Go to the blending mode panel, select gradient overlay with these settings:

Blending mode: Normal
Opacity: 17%
Colors: Black and white

image 4

Step Five

Repeat Step Four for the footer.

Footer

Step Six

Add your logo + blog name (#FFFFFF Century Gothic is what I have used in the example below) in the header and put the opacity of both at 50%.

Title

Final Step

Now, you can use your interface for blog script like DotClear or Wordpress! 

Fresh Blog Interface Tutorial:Final Result (Click to enlarge)
Click to enlarge

Good Luck!

Editor's Note! Tired of creating you own WordPress theme? Check out WordPress themes from Template Monster then. Affordable and eye-catching blog designs for your WordPress powered blog.



Author's URL: GreyCobra.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Fresh Blog Interface"

Only registered users can write comment

No comments yet...