Making a Blog Banner — by Guest Mom Amy M
I posted this on my blog a month or so ago, but I got such a response from it I wanted to share it here as well. I know this is a lot of information, it took me a long time to put together, so just take it step by step and email me with any questions. Oh and I have been over this numerous times, but please forgive any typos as I'm sure I've missed some.
I'm using Photoshop CS2, but this would work the exact same for other versions of the software or PS elements. I am sure you could do similar things in other image editing programs, but I'm not as familiar with them so I can't help you there. Also I am using the Windows version of PS so will add the mac commands as I know them.
Step one - New Document
In PS go to File/New or ctrl N (cmd N for mac ) and a pop-up menu (shown below) will open that will ask you to put in the appropriate info.
I've highlighted the changes you need to make. Most of your blogs are 660px wide, but you can change that number to whatever you want. I use 800px because the content of my blog is 800px wide. Height can also be changed to your preference, but I tend to always do around 250-275px, depending on what I'm doing. Make sure the resolution is set at 72px, which is best for web graphics. Also check that the color mode is set to RGB color.
click OK.
Step two - Add photo
You now have a blank canvas to design however you choose. I almost always use a photo so that is what I will show you.
First you need to open a photo by clicking file/open or ctrl O (cmd O for mac). Then you need to resize the photo you just opened by going to image/image size or ctrl+alt I ( cmd+opt I for mac). A menu box appears (shown below) and I have highlighted the info that you need to change.
First off make sure resample image has a check by it and that the resolution is set at 72 pixels/inch. Then change the width of the image under pixel dimensions to the width of your banner, so that would be 660px if you are following me from above. The height will automatically change.
Click OK. The photo will now appear smaller.
Step Three - Moving image
Now you want to move the image you just resized into the blank banner document.
Do this by clicking the move tool or V. I have it circled above shown in the tool window. It is an arrow with what looks to be a + sign next to it. Next click on the image you just resized and while pushing the mouse button move cursor into the new banner document. Release finger. You should now see the photo in the banner. Next, using the same technique, move the image around until it is lined up where you want it to be.
Step Four - Add the finishing touches
This is where it gets a bit tricky and I would encourage you to get to know the PS program. This is your chance to design the banner however you choose. Making it yours. If you want to add text click on the T in the tools window (circled below). Next, click on the banner and type in the text. You can change font and size in the tool bar (circled below). 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.
Step Five - Saving file
To save file click File/Save As or Ctlr+shift S (cmd+shift S for mac). Make sure the file is saved as jpeg and not a psd. Save it to what ever folder you would like, preferably one you will remember (i save all mine to the same Web folder)
click ok.
Step Six - Upload to host site
You are now ready to get your banner hosted. We are lucky these days there are many sites that 0ffer to host your photos for free like Photobucket or you could also use Smugmug, however this one is not free. At any rate if you have an account to a web hosting site great, if not sign up for an one. Since I can't tell you how to navigate each site just follow the instructions on the web site to upload photos. It should be very easy and self explanatory. If you are still confused email me.
Keep in mind if you are using the new blogger template or page elements (described below) you do not have to host your banner. You can skip this step.
Step Seven - Add banner to blog
This has two different parts depending if you have the old template or the new upgraded template. Keep in mind you can still have the new blogger, but have the old template. You will know if you have the upgraded template if you change the look of your blog by customizing your template with page elements. Another indication is on your dashboard it will say Manage: posts, settings, layout (instead of template). Just so you are aware if you are using the new template your banner will have the blogger header around it like on Victoria's blog. There is no way I know around it.
For the Old Template
1. Go to your Dashboard, click template. Then look for this block of codes in the template:
It may look slightly different depending on your template design, but it should start with blog header and end with div. Disregard the red type
Next Replace that entire code with this code below...don't worry about screwing up as long as you don't hit save template you can always go back.
Next you need to get the url code of your banner from your host site and replace it with "your url here" that is in red. In smugmug it's as easy as rt clicking (ctrl click on mac) on the photo, click properties, and copy & paste the url. In photobucket it will be the code next to URL link under the photo.
Once you have replace the url click preview to make sure it looks the way you want and then save template.
Instructions for upgraded template
1. In your dashboard click Layout t hen click edit html. Next look for this block of codes in the template:
Change maxwidgets='1' to maxwidgets=' 4' and change showaddelement='no' to showaddelement=' yes'. Click save template. Then click Page element tab to go back to layout. You will see an extra Add a Page Element above the Header.
Next click Add a Page Element and a pop-up will appear. Select Picture and click Add to blog . Another pop-up will appear that wants you to configure your image. It is best to leave the title blank. If you want a caption below the image, then fill it in your caption, otherwise leave it blank. If you have your photo stored on your computer, click Browse, then select the photo from your computer. If you want Blogger to size the image to fit into your header, then check the Shrink to fit (default). If you want the image to be exactly the size of your original image, then uncheck shink to fit. Click Save changes
If your photo is already hosted on the web ie photobucket or smugmug, then check From the web and type in the URL of the photo, and then click Save changes.
Of course always make sure to preview blog before making changes. If you don't like it you can always delete the page element and start again.
Good Luck and please let me know if you have any questions.
amy
I'm using Photoshop CS2, but this would work the exact same for other versions of the software or PS elements. I am sure you could do similar things in other image editing programs, but I'm not as familiar with them so I can't help you there. Also I am using the Windows version of PS so will add the mac commands as I know them.
Step one - New Document
In PS go to File/New or ctrl N (cmd N for mac ) and a pop-up menu (shown below) will open that will ask you to put in the appropriate info.
I've highlighted the changes you need to make. Most of your blogs are 660px wide, but you can change that number to whatever you want. I use 800px because the content of my blog is 800px wide. Height can also be changed to your preference, but I tend to always do around 250-275px, depending on what I'm doing. Make sure the resolution is set at 72px, which is best for web graphics. Also check that the color mode is set to RGB color.
click OK.
Step two - Add photo
You now have a blank canvas to design however you choose. I almost always use a photo so that is what I will show you.
First you need to open a photo by clicking file/open or ctrl O (cmd O for mac). Then you need to resize the photo you just opened by going to image/image size or ctrl+alt I ( cmd+opt I for mac). A menu box appears (shown below) and I have highlighted the info that you need to change.
First off make sure resample image has a check by it and that the resolution is set at 72 pixels/inch. Then change the width of the image under pixel dimensions to the width of your banner, so that would be 660px if you are following me from above. The height will automatically change.
Click OK. The photo will now appear smaller.
Step Three - Moving image
Now you want to move the image you just resized into the blank banner document.
Do this by clicking the move tool or V. I have it circled above shown in the tool window. It is an arrow with what looks to be a + sign next to it. Next click on the image you just resized and while pushing the mouse button move cursor into the new banner document. Release finger. You should now see the photo in the banner. Next, using the same technique, move the image around until it is lined up where you want it to be.
Step Four - Add the finishing touches
This is where it gets a bit tricky and I would encourage you to get to know the PS program. This is your chance to design the banner however you choose. Making it yours. If you want to add text click on the T in the tools window (circled below). Next, click on the banner and type in the text. You can change font and size in the tool bar (circled below). 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.
Step Five - Saving file
To save file click File/Save As or Ctlr+shift S (cmd+shift S for mac). Make sure the file is saved as jpeg and not a psd. Save it to what ever folder you would like, preferably one you will remember (i save all mine to the same Web folder)
click ok.
Step Six - Upload to host site
You are now ready to get your banner hosted. We are lucky these days there are many sites that 0ffer to host your photos for free like Photobucket or you could also use Smugmug, however this one is not free. At any rate if you have an account to a web hosting site great, if not sign up for an one. Since I can't tell you how to navigate each site just follow the instructions on the web site to upload photos. It should be very easy and self explanatory. If you are still confused email me.
Keep in mind if you are using the new blogger template or page elements (described below) you do not have to host your banner. You can skip this step.
Step Seven - Add banner to blog
This has two different parts depending if you have the old template or the new upgraded template. Keep in mind you can still have the new blogger, but have the old template. You will know if you have the upgraded template if you change the look of your blog by customizing your template with page elements. Another indication is on your dashboard it will say Manage: posts, settings, layout (instead of template). Just so you are aware if you are using the new template your banner will have the blogger header around it like on Victoria's blog. There is no way I know around it.
For the Old Template
1. Go to your Dashboard, click template. Then look for this block of codes in the template:
It may look slightly different depending on your template design, but it should start with blog header and end with div. Disregard the red type
Next Replace that entire code with this code below...don't worry about screwing up as long as you don't hit save template you can always go back.
Next you need to get the url code of your banner from your host site and replace it with "your url here" that is in red. In smugmug it's as easy as rt clicking (ctrl click on mac) on the photo, click properties, and copy & paste the url. In photobucket it will be the code next to URL link under the photo.
Once you have replace the url click preview to make sure it looks the way you want and then save template.
Instructions for upgraded template
1. In your dashboard click Layout t hen click edit html. Next look for this block of codes in the template:
Change maxwidgets='1' to maxwidgets=' 4' and change showaddelement='no' to showaddelement=' yes'. Click save template. Then click Page element tab to go back to layout. You will see an extra Add a Page Element above the Header.
Next click Add a Page Element and a pop-up will appear. Select Picture and click Add to blog . Another pop-up will appear that wants you to configure your image. It is best to leave the title blank. If you want a caption below the image, then fill it in your caption, otherwise leave it blank. If you have your photo stored on your computer, click Browse, then select the photo from your computer. If you want Blogger to size the image to fit into your header, then check the Shrink to fit (default). If you want the image to be exactly the size of your original image, then uncheck shink to fit. Click Save changes
If your photo is already hosted on the web ie photobucket or smugmug, then check From the web and type in the URL of the photo, and then click Save changes.
Of course always make sure to preview blog before making changes. If you don't like it you can always delete the page element and start again.
Good Luck and please let me know if you have any questions.
amy
Labels: guest mom, make something
48 Comments:
Wow! This is great. I can't handle it now, but I'll bookmark this page for later. I am pretty positive I'll be emailing you with questions once I begin. Can't thank you enough!
Oh how I wish I had had this and then I wouldn't have spent WEEKS trying to do it on my own!!! I'm bookmarking this, too. Thanks for the awesome tutorial!
Thank you!!! I have been wondering how to do this forever!
Thanks, you made my day!
http://babychunder.blogspot.com/
This is a priceless post to a non-computer-savvy girl like myself! Thank you!
Oh, thank you thank you. I've been wanting to create my own header for quite some time now, but have yet to be successful. Can't wait to try it on my own. Thanks, again!
This is wonderful!!! Thank you so much. I am going to try this later this week... fingers crossed...
Thank you, THANK YOU!! I can't tell you how long I've been trying to figure this out on my own! I finally gave up a few weeks ago, but thanks to your awesome tutorial, I might just be able to add a bit of coolness to my blog! Thanks again!
i think you have rocked the world of bloggers everywhere.
Great stuff Amy! It is so fun to see you posting here! :)
You are welcome. I'm so glad it has help many of you. Don't hesitate to email me with questions.
thanks!
What a great post. Muchas gracias!
Do you need to post your images,photos or videos for sharing?
How many times did you want to quickly send an image to a friend but didn’t know how to send it to them? Now it’s easy, you just have to upload your image, copy and paste the code in your email, forum, blog etc. What a great tool it is and what a great addition to the Pixilis family.
Pixilive is a free image hosting service. Upload your pictures, images or videos and share them easily with your friends, family, or on Forums, messenger mail, Blogs, Avatars, etc.. This service is completely FREE!!
Image types: jpeg, jpg, png, gif, bmp, tif, tiff
Maximum file size for Images: 5 MB
Video types: avi, mpg, wmv, mov, mpeg, mp4, flv
Maximum file size for Videos: 10 MB
Unlimited storage hosting period.
Unlimited bandwidth
No registration required
Upload,copy codes and paste!3 easy steps & it's free!
http://www.pixilive.com/
thank you thank you thank you Miss Amy M. I was about to hire the Geek Squad! I'll email you a link to the new and improved blog once completed. Thank you for compiling this information for all of us!
AMYW rules!! Thanks for taking the time to do this. I'm totally saving this and plan to use it when I'm ready to make some changes over at my place!
THANK YOU!!! I found your blog off of one of my friends. I have been wanting to change my header forever. I DID it thanks to your tutorial!!!!
Thank you for being so generous with this information! This is a highly valuable post... one I will refer to as I am becoming more "blog literate".
Stephanie I would love to see your new and improved site.
I hope to see everyone's and I'm so glad it is so help to you all.
i don't know if there is anything beter than sharing information and teaching others how to do something.
when you posted this ahwhile ago i have referred many people to it!
thanks Amy
So cool, thanks so much. I was stumped with the new template - can't seem to get rid of the huge space on top of my header, tho. But hey, it's mine!
http://www.mparkphoto.com/index.html
Thanks again, Amy! Can you do a tutorial on a custom icon for the URL bar? In my research I have only found how to do it on a PC....how about a mac?
This is my weekend project now. I was too lazy to figure it out on my own. It takes me forever. Thank-you so much.
I so needed this!! Thanks for posting!
thanks so much! my blog makeover (first of many, i'm sure) is complete. you rock!
Oh I was so close!
I got the banner onto my blogger template and erased the old title...and the whole blog centered like the banner was centered.
Is there a way to stop this?
Thank you
Donna
Hi.
Me again.
I tried again...and left some letters and symbols in place...and got the words to act right.
Thank you so much for this tutorial.
I've been blogging for three years with my ugly old template :o)
And now because of you...
I have something a little more special to greet the great people who visit me.
Thank you very much.
Stop by to see it.
(Quiet Life)
p.s. I took the header picture last month in Paris.
Wonderful walk through, and I'll be using it. Thanks.
Your blog is great. I need to visit often.
Thanks!
Marla
Thank you for posting this. I always wanted to change my banner, but had no idea how.
Thank you, Thank you, So glad I found your blog. Great instructions!!!!
Thanks so much!!! I found a lot of tutorials for Photoshop but yours was the only one that actually helped :)
I just wanted to thank you, for this artical on how to change your header. Its got to be the easiest way I've seen. My blog looks great and all because of you. Thank you again. a.k.a. The Gripe
This comment has been removed by the author.
Finally I found what I've been looking for..thanks a lot,this is a huge as in huge help!
Thanks for sharing this. It was extremely helpful, as I'm a PhotoShop Elements newbie. But I've been wanting to learn how to do this myself forever! I'm having fun trying new things...
This was awesome! I've just started using PS to make my own buttons and your tips here were really helpful.
Thanks so much!
Thank You! I've been trying to do this for too long. You do rock.
Candy
I can't believe I actually did it!!! Thank you so much!!! Check it out at www.wonderyearsof2.blogspot.com. :)
wooooow..thank you sooooo much , this was very very helpful to me , you are a star!
thanks again ..i am going to work to have it now at my blog.
good luck
Amer
http://www.someone1986.blogspot.com
Hi! Thanks so much for your awesome tutorial! It really helped.
The only thing is it is slightly off center and I don't know how to fix it.
If you have time can you have a look at it...
http://bobanddebi.blogspot.com/
Thanks for any help!
Debi
I love this!! You describe the process with such ease. I finally used Photoshop CS3 for the first time since I bought Creative Suite for Mac 1 year ago.
You definitely have a talent!!
I love it!! I'll be following your work!
This is a good blog and i want to place your banner in my blog and in exchange of mine.And be the one in the top 100 blog banners i am going to place in my blog.Thank you.
Hello:
I like your blog, and was a kind of lifesaver this morning, but the banner on my blog it's now a little off centered, slightly to the right, do you have any idea why?
Best wishes, as always,
Federico (aka euskir)
amazing! i always wanted to pimp my boring blog. I appreciate the post! Great stuff!
Hey! Just so you know, there's a WAY easier way! Go to picnik.com. It's free! You just upload your photo, edit it with all their fun tools, and then they allow you to save it right to your computer as a jpg! It's seriously the best. Try it!
For Ultimate Sources and Free Download
visit here
http://razorware.blogspot.com/
Wow! ! ! Its wonderful.You rocked pretty.
This is priceless for making banner in a short time or non techno persons
Hi. Thanks for ur tutorial. I tryed to follow it, but i'm still having problem with my banner.
Hope i can fix it in some how soon.
Sue
Post a Comment
<< Home