Wednesday, April 29, 2009

How to Make a Customized Blog Header

Let's "bling" it on ladies!!!!
*You can adapt this but I am using Photoshop Elements 7 and my blog is hosted through Blogger.
First, I am going to show you how to make a banner using a photo or background you already have saved.
1. Open Photoshop.
2. Go to FILE and NEW.

















The grey box should pop up and make these changes:

Preset---Custom
Width--800px
Height--300px
Resolution--72px
You can leave the color mode as transparent, white or background color--it really does not matter. Now you may need to change width and height to something else you prefer or you could always resize the image later, but you want to leave the resolution at 72 px. Click OK.
3. So your blank canvas should show up...


















4. Then I chose a picture from my computer I want as my background. (FILE then OPEN).


















This is one I took myself but if you choose to use a stock image make sure it is for public use.
5. So it is way too large to fit into my tiny canvas. I need to resize it.
IMAGE-RESIZE IMAGE






























I resize my photo to the same size as my banner (800x300px)

Then I hit EDIT and SELECT ALL or just click my move tool (circled).















And I DRAG my photo to the canvas.
















6. Now I want to add Text!
Photobucket
So I click the Text tool and pick a font I like (see free font list below if you want to download some cool ones)
Next, click on the banner canvas and type in the text. You can change font and size in the tool bar. You can also change color by double clicking on the white box in the tool window and picking what ever color you want from the pop-up menu.
7. Finished! And save.
Photobucket
I use a free hosting site at www.photobucket.com and put my images there so I can resize and edit as I please after I use Photoshop. Then it gives me the html codes to post my pics/images on sites, forums,etc.
OKAY so let's say you don't want to use a pic but want to use your own design or make a design.
1. Open Photoshop.
2. Go to FILE and NEW. Do the same as above--















The grey box should pop up and make these changes:
Preset---Custom
Width--800px
Height--300px
Resolution--72px
You can leave the color mode as transparent, white or background color--it really does not matter. Now you may need to change width and height to something else you prefer or you could always resize the image later, but you want to leave the resolution at 72 px. Click OK.
3. So your blank canvas should show up...

















4. Now instead of opening a photo you will
Photobucket
Click the background color (circled on right of pic). And choose a color you want.
Photobucket
I want pink. I select the color I want and hit OK. See how the box on the right is pink now?
Then I click the PAINT BUCKET icon on the tool bar.
5. And dump it on my canvas by clicking on the blank canvas.
Photobucket
6. Now I have downloaded digital scrapbook stuff (that is okay for personal use--see links below).
And I go and open the files I want.
Photobucket
7. I select them and resize them if needed. Then I drag them to my banner/header canvas.
Photobucket
8. Save your header. Finished!
Photobucket
So what do I do after I make my header/banner???
-Upload to a host site like Photobucket or SmugMug.
Follow the instructions on their sites to upload your pictures.
-Sign into Blogger.
-Click LAYOUT on your dashboard of the blog you want to add it to.
-You will see a box at the top that says HEADER. Click EDIT in that box.
-Then click BROWSE-PICTURE if you are going to use the header from your pictures on C or F drive. BUT if you are hosting at Photobucket/somewhere else then Copy and Paste the URL {direct link} they give you in the URL box.
-Hit SAVE.
-Preview blog to see if you likey it.
-Now here is something I see a lot...someone has a nice banner but they aren't sure how to take Blogger's text off (it is superimposed over their banner).
-After saving everything above, go to LAYOUT again on your dashboard. Click the HEADER box where it says EDIT. See where it says PLACEMENT? Click the circle that says "instead of title and description". Then save changes and preview. Repeat if needed.
* I know it sounds like a lot of work but really I was very, very detailed with my steps. If you have any questions email me anytime at harrisonsmommy1@yahoo.com
-Links-

Free Fonts

Dafont

1001 Free Fonts

Urban Fonts

{How to Download a Font Tutorial here}

A good place to find free digital scrapbook freebies to download?

Ikea Goddess

Little Dreamer Designs


DigiFree

{How to Use/Open Digital Scrapbook Designs and basically how to do anything digital here}

Free Backgrounds for your Blogs

Gisele's Templates

Pyzam

Cutest Blog on the Block

Shabby Princess


Other Header/Banner Making Tutorials...

Paul's Link

YouTube Tutorial

Know of any other good links a about blogging or blog design? Put them in comments. :)

Photobucket

8 comments:

Terrie B x said...

Hi Tina...
`WoW` you are flamin talented ....for sure!!!
Thanks soo much for sharing all these fab sites!!!
Great to see your tag!!!
Thanks for the tag!!
I will get round to doing it soon!!!!!
`Enjoy` the rest of your Day:)♥

Marie Reed said...

I'm such a photoshop dud! I really appreciate this tutorial! You put a lot of heart and work into all of the screen shots and writing of it! ((Hugs))

Pearl said...

Thanks for sharing the digital header ideas. You are so good with the digital stuff !

Melinda said...

Holy cow - how helpful was that>! Thanks so much for the tutorial and thanks for stopping by my blog and commenting!!

Bone*Head*Studios said...

WOW !!!!! I need to learn this stuff soooooo bad!!! Thanks a million Tina!!!I'm gonna have to book mark this post!!
Blessings,Flora

onna@toddlercraft.net said...

Wow Tina!! What a great tutorial!! I don't have photoshop but have been thinking that I should get it!! There seems to be so much to do with it!!

Gisele Jaquenod said...

Thanks for linking me!
Take care!!!

twinklescrapbooks said...

Thank you ladies!!!
Hugs!
Tina