Now, if you really want to make your blog original, you can create your own header to match your custom background from scratch using the challenges already listed above to create papers, ribbons, brushes, the possibilities are endless. Erin has a great example on her blog(TheHendersonz and TheHendersons05) . To do this:
Open a new transparent document that is approximately 1000 x 500, set at 72ppi. You can make it a little bit smaller than that, but don’t go any wider than 1000 pixels. That is your max.
- Add ribbons, papers, brushes, etc. Make sure to create each thing on its own layer so you can have lots of play with your design. Save it in layers before you merge it together incase you need to go back later to make changes.
- After you’re done, don’t flatten your image. Just merge visible layers. This will keep a transparent background, rather than white. Now you can save your image as a .png file.
To add it to your blog, go to Customize, Layout, Click Edit on your header, and upload your file.
- If your header is TOO large on your Blog, just go back to your editing program and resize it a bit smaller, save, and upload again.
Tuesday, April 6, 2010
Creating a Slideshow Header
She also has a great TUTORIAL (HERE) for making a slideshow header. I love this one. To do this:
- You want to make your header approximately the width of your blog. If you’ve followed the background instructions, your blog width will now be 1000px, so keep that in mind. I set mine to 800 width ( Julie'sBlogExamples) . Her recommended length is 300 pixels, but I found that to be very hard to work with. It’s so long and thin. I set mine to 400 pixels. Remember, the more pictures you have the slower your blog will load, so it’s suggested that you keep it between 2 – 5 pictures. Remember you can stretch your photos if you need to by following THIS EDITING TIP that I got from CoffeeShop.
- ALL of your pictures have to be the same size for this to work!
- Go to Tinypic.com or Imagehost.org and upload your design. Copy the Directlink(tinypic.com) or the Hotlink(imagehost.com)
- Now minimize that screen and go to HTML BASIX http://www.htmlbasix.com/banner.shtml
- Click on "Automatically Refresh Images" and set how often you want them to flash. Mine is every 6 seconds.
- Enter the image height and width in pixels.
- Now, take the direct link(tinypic.com) or Hotlink(Imagehost.com) for your photo that you copied and paste it where it says “URL of Image.” Do this for as many pictures as you need for your slideshow.
- Click Generate.
- Now you will see a very long code. Click on Select All. This will highlight the entire code, and you can just right click to copy that code.
- Now just go back to you blog, click Customize, Layout, Page Elements. Then go to the top and click on “Add a Gadget.”
- Select HTML/ JavaScript, paste the code there and save. Now you should have a slideshow header.
TIP: you can also do the as a small square slide show that will go on your side bar. You images should all be down to about 200x200 px to fit.
- You want to make your header approximately the width of your blog. If you’ve followed the background instructions, your blog width will now be 1000px, so keep that in mind. I set mine to 800 width ( Julie'sBlogExamples) . Her recommended length is 300 pixels, but I found that to be very hard to work with. It’s so long and thin. I set mine to 400 pixels. Remember, the more pictures you have the slower your blog will load, so it’s suggested that you keep it between 2 – 5 pictures. Remember you can stretch your photos if you need to by following THIS EDITING TIP that I got from CoffeeShop.
- ALL of your pictures have to be the same size for this to work!
- Go to Tinypic.com or Imagehost.org and upload your design. Copy the Directlink(tinypic.com) or the Hotlink(imagehost.com)
- Now minimize that screen and go to HTML BASIX http://www.htmlbasix.com/banner.shtml
- Click on "Automatically Refresh Images" and set how often you want them to flash. Mine is every 6 seconds.
- Enter the image height and width in pixels.
- Now, take the direct link(tinypic.com) or Hotlink(Imagehost.com) for your photo that you copied and paste it where it says “URL of Image.” Do this for as many pictures as you need for your slideshow.
- Click Generate.
- Now you will see a very long code. Click on Select All. This will highlight the entire code, and you can just right click to copy that code.
- Now just go back to you blog, click Customize, Layout, Page Elements. Then go to the top and click on “Add a Gadget.”
- Select HTML/ JavaScript, paste the code there and save. Now you should have a slideshow header.
TIP: you can also do the as a small square slide show that will go on your side bar. You images should all be down to about 200x200 px to fit.
Subscribe to:
Posts (Atom)