A Blog Post Header in Photoshop

A Blog Post Header in Photoshop
17 posted on February 17, 2009
POSTED IN: Blog Posts, Creativity

I get asked a lot about how I accomplish certain effects for the graphics on my web site. I thought today I’d walk you through a very basic explanation of how to use multiple layers and effects to add texture and depth to an image. The example we’ll use is the header graphic I created for last Friday’s Valentine post. I chose this image because it’s a good example of an image that doesn’t need 30 layers and 45 minutes to pull off.

Here is a layer breakdown of the image we’re going to create in Photoshop. For this piece, it really doesn’t matter what version of Photoshop you use since it only uses basic layer effects and transparency. And remember, you don’t need the latest/greatest design tools to be creative. I’ve also provided a link to the Photoshop file for those who want to download it and experiment.

Layer Breakdown

Step 1

Start by using the paint bucket tool to fill your canvas background with a cherry red (#840000) color. I then take the same color with a 200px paint brush set to Multiply at 15-20% opacity and paint around the outside edges to darken them. You could also accomplish this effect with a gradient tool but this method allows me to darken the areas I want and keep it slightly uneven.

Step 2

On a new layer I use a 500px brush and paint a pink (#ff879e) glow right in the middle of the image. I do this on a new layer so that I can play around with the transparency later if the glow is too bright.

Step 3

Select the Custom Shape tool (in the shapes flyout on the Photoshop tools palette).

Select a slightly brighter shade of red from the background (#990000) for your color. You may notice that the heart shape isn’t available in your list of custom shapes. In order to see it, click the shape drop down from your top toolbar, click the little tiny arrow in the upper right hand corner and select All to view all the shapes available to you. Now you should see the heart shape midway down.

On a new layer, draw your heart shape. Set the layer options to Multiply and the layer transparency to 100%.

Step 4

Next we apply the paper texture. There are a ton of great free paper textures you can find online. The one I used for this example is from a high-res grunge texture set by Bittbox. You can also purchase excellent royalty free stock images from iStockPhoto. Textures are so important to create unique, layered looks in Photoshop. Experiment with your textures. Try different layer styles and opacity to create different looks.

On a new layer paste your paper texture and set the layer style to Multiply and the opacity to around 75%.

Step 5

Finally we add our $100 dollar bill overlay. Find an image of a high currency dollar bill and paste it into Photoshop as a new layer. Set the layer effects to Multiply and the layer transparency to 35%.

**Note: Recent versions of Photoshop have a built-in counterfeit protection. So in order to work around this (because there are some cases where it is appropriate to use money in Photoshop that doesn’t involve counterfeiting bills) find an older denomination dollar from a Google search or a low-enough resolution.

Saving Your Image: you may notice that when you choose Save For Web and select JPEG as your format that your finished image becomes filled with distortions known as “artifacts.” The reason for this is that the red channel doesn’t compress well in the JPEG image compression format. The solution would be to choose a higher than normal image quality setting for your JPEG or consider saving as a PNG or 256 color GIF.

And there you go! The finished result yields an image with layers, depth and texture. I use this simple texture overlay technique on countless images (here, here). If you try your hand at this feel free to leave me a comment with a link to what you did.

DOWNLOAD THE PSD FILE

TWEET THIS

This entry was posted on Tuesday, February 17th, 2009 at 9:38 am and is filed under Blog Posts, Creativity. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Comments

Share yours!



  1. Visit My Website

    February 17, 2009

    Permalink

    1 Rachel said:

    So cool! Thanks for sharing with us. Guess it would help if I had photoshop to practice these mad skills on huh? :) That’s on my wishlist.

    Rachel’s last blog post..Truth Tuesday: When Self Discovery Happens, Growth Begins



  2. Visit My Website

    February 17, 2009

    Permalink

    2 Jon Heisterkamp said:

    Thanks Brad, one of my goals this year is to learn how to be a bit more creative with my blogging, newsletters, and video creation. Basically, just getting started, but I appreciate your blog daily. Thanks again for the cool tips.

    Jon Heisterkamp’s last blog post..Not Just Mere Mortals



  3. Visit My Website

    February 17, 2009

    Permalink

    3 Adam said:

    dude.. once Karen sees this she will be so stinkin happy. She was wondering how to do headers in PS becasue she wanted to make a new one for her photo blog. The one she has she made in Picnik.. and you can’t do that much.

    Thanks man



  4. Visit My Website

    February 17, 2009

    Permalink

    4 Scott Fillmer said:

    Brad, just a SUPER how-to on the layers but it answered one of my nagging questions in my photography that I have been to lazy to look up. I have been having a heck of a time when saving a pretty high res image into jpg for my blog where I would (would I thought) loose saturation. What I was doing was loosing the red channel but when I would do a screen shot in png it would keep it, thanks so much, it had been driving me nuts for quite a while (obviously not enough to look up a solution).

    Scott Fillmer’s last blog post..A Nikon D700 Birthday Cake, Really



  5. Visit My Website

    February 17, 2009

    Permalink

    5 Mike Paschal said:

    bro… nice tutorial… but, now people are going to want a photoshop tutorial of the “Layer Breakdown” graphic at the beginning of the post :)

    Mike Paschal’s last blog post..“Be A Student of Your Wife”



  6. Visit My Website

    February 17, 2009

    Permalink

    6 Jim said:

    @Rachel

    If the price of PhotoShop is holding you back… try some free graphics programs. If you are on a PC, I recommend Paint.Net
    http://www.GetPaint.Net

    It is FREE (though it accepts donations). It is NOT nearly as full featured as PhotoShop (industry leader), but it can do all the basics and more.



  7. Visit My Website

    February 20, 2009

    Permalink

    7 Brad Peters said:

    Thanks. I’ve always wondered how to create the textured effects that make the image look 3-dimensional. Any other PS tips you want to post would be great!

    Brad Peters’s last blog post..The Little Mack



  8. Visit My Website

    January 10, 2010

    Permalink

    8 online stock trading advice said:

    Generally I do not post on blogs, but I would like to say that this post really forced me to do so, Excellent post!

    I’m Out! :)



  9. Visit My Website

    April 4, 2011

    Permalink

    9 Maryjane Hillan said:

    I was examining some of your content on this site and I conceive this web site is real instructive! Keep on putting up.



  10. Visit My Website

    December 1, 2011

    Permalink

    10 David Scott said:

    Thanks for the advice, it´s so easy to make a header with photoshop



Leave a Comment

Here's your chance to speak.

  1. Name (required)

    Mail (required)

    Website

    Message

Ad Ad Ad Ad
Ad