Special offer

Creating A Simple Blog Banner In Photoshop

Industry Observer

OK.  Let's walk through creating  a very VERY simple banner/header for your new blog.  I'll use Phtoshop 7 for this, since that's convenient for me.  You can use any version of Photoshop, Photoshop Elements, Paint Shop Pro, or similar software.

1.  Start up PS and create a new file.  File -> New

2.  Set a size for the new file.  Let's make it Width: 600 pixels, Height: 200 pixels.  The actual banner size you need will depend on whether you are going with a 2 or 3 column layout.  We'll make this banner smaller than what you will need, and let the background color on the blog balance out the rest.

3.  Leaving that new blank file open and visible; open up an image you want to add to your banner.  Resize the image so that it is 180 pixels or less in height - that way it will fit on the banner with some room to spare.  At this point, I'll hit File -> Save As and create a copy of the image just in case I muck it up.

4.  Click the MOVE tool.  Click on the image.  Drag the image into the blank file.  Position it to the left in the blank file.

5.  Now let's add some text.  Click the TYPE tool. (Some programs will call it the TEXT tool)   Select a font size, size and color.  Type in your text.

6.  I think the parrot image could use a hairline border, but I'll save that for another post.

7.  Save the finished banner as a JPEG image.  Now you are ready to up load it.

8.  Typepad uploading instructions are here

9.  One tip:  In the Page Banner wizard, be sure to select WHITE (click on the color box) as your Banner's background color, to blend with the background of the banner you just built.

Posted by


Cheryl Johnson




Comments (9)

Christina Williams. REALTOR® TN property search & local insights
First Realty Company - Crossville, TN
Never used photoshop to create a blog. Thanks for the new idea. Good job.
Apr 17, 2007 12:51 AM
Cheryl Johnson
Highland Park, CA
'Fraid Photoshop can't create the blog itself  :-)  There was a question about  creating a banner/header for an existing  blog  here  .... so I wrote out some simple instructions.  This won't do for Active Rain ....it will work for an outside world blog,  since there is no option for a customized header on Active Rain. 
Apr 17, 2007 01:00 AM
Kristal Kraft
Novella Real Estate - Denver, CO
Selling Metro Denver Real Estate - 303-589-2022

Cheryl ~ thanks for the detailed instructions.  It is fairly easy to do, especially when you have written such an excellent roadmap on how to!


Apr 17, 2007 04:44 AM
Mary Pope-Handy
Christie's International Real Estate Sereno - Los Gatos, CA
CRS, CIPS, ABR, SRES, Silicon Valley
This is FANTASTIC - thank you sooo much.
Apr 19, 2007 04:57 AM
Tracy Santrock
Santrock Realty Group Inc. , - Cary, NC
Raleigh - Cary Broker
Time for me to customize my banner for my webpage.  Thanks for the tip.
Dec 15, 2007 12:13 AM
Tracy Santrock
Santrock Realty Group Inc. , - Cary, NC
Raleigh - Cary Broker

Ok, here i am.  Finally got my collage together and I can't overlay the text for some reason. Bummer.

Feb 07, 2009 12:05 PM
Cheryl Johnson
Highland Park, CA


Try saving a copy of the collage (don't mess with your original), flatten all layers, then use the text tool.

Feb 07, 2009 12:18 PM
Joshua Lerette
Tampa Bay Florida FHA, VA, USDA & Jumbo Mortgages - Saint Petersburg, FL
Tampa Bay's #1 Trusted Mortgage Specialist

Hey, thanks for the post, I used this to help me develop my new header. Let me know what you think please. I'm a little artistic illiterate as I'm color blind so it makes it a little difficult. But I think it looks alright. Again, good post and thank you.

May 28, 2009 05:14 AM
Gary Frimann, CRS, GRI, SRES
Eagle Ridge Realty / Signature Homes & Estates - Gilroy, CA
REALTOR and Broker

Thanks for this post.  I am going to give it a try.  I need something to spice up my blog.  This should do the trick.

Oct 13, 2012 07:42 PM