Top Banner Tutorial (Paint)

1. Open Paint (Start > Programs > Accessories > Paint).

2. Right click on the image below and choose Copy. Go back to Paint and go to Edit > Paste.
http://usera.imagecave.com/sunshinejenny/templates/banner_template.gif

3. Decorate the background using the Paint Can Tool, Airbrush Tool, etc.

4. Go to Image > Draw Opaque. Go back to the Image menu again and confirm that there is NO check mark beside Draw Opaque. If there is, click on Draw Opaque and it should go away.

5. Find an image that you would like to use on your top banner.

6. Right click on the image and choose Copy.

7. Switch back to Paint and go to Edit > Paste.

8. Drag the picture around to position it on the banner. It should be somewhere near the left hand side, it's fine if it covers the edges or adds a white space below the template, like the image below.

9. Skip steps 12 - 14 if you do not want background text. Choose a colour from the color box that is a few shades darker or lighter than your banner's background colour.

10. Select the Text Tool and click and drag a rectangle inside of your banner.

11. Type your background text. If you don't see the text toolbar, go to View > Text Toolbar. Change your font to Arial, Verdana, Coolvetica, or another plain font. Change the size to 28. Make the text bold. If your text does not fit inside the banner, make the font size smaller.

12. For your foreground text, you'll want to download the Neopets font, Heffaklump (Heffaklump can be downloaded at (http://www.algonet.se/~j-j/html/heffaklump.htm)). If you aren't allowed to download the font or can't get it working, that's okay, you'll just need to choose a different font for the next step.

13. Select black from the colour box (or if the banner background is dark choose white).

14. Select the Text Tool and click and drag a rectangle inside of your banner.

15. Type your foreground text (your username). If you don't see the text toolbar, go to View > Text Toolbar. Change your font to Heffaklump. Change the size to 36. Do not make the text bold. If your text does not fit inside the banner, make the font size smaller.

16. Go to Image > Attributes and change the height to 62. We do this to get rid of any white space at the bottom of the image.

17. Save your banner as a gif, jpg, or png (you can choose the file extension from the drop-down list below where you type the filename).

18. Upload your banner to the internet. Try http://www.imagecave.com/ or http://www.2and2.net/ for an image host.

19. Make sure to replace http://www.neopets.com/URLHERE.gif with the address of your banner.


Top Banner Tutorial (Paint Shop Pro)

1. Open Paint Shop Pro.

2. Right click on the image below and choose Copy. Go back to Paint Shop Pro and go to Edit > Paste.
http://usera.imagecave.com/sunshinejenny/templates/banner_template.gif

3. Select the Flood Fill Tool and fill the image in with a solid colour, gradient, or pattern. Go to the Effects menu at the top and you can use several of the effects to distort your background. When you are done, go to Selections > Select None.

4. Find an image that you would like to use on your top banner.

5. Right click on the image and choose Copy.

6. Switch back to Paint Shop Pro and go to Edit > Paste > As New Layer.

7. Drag the picture around using the Mover Tool to position it on the banner. It should be somewhere near the left hand side, it's fine if it covers the edge of the banner.

8. If there is any white space around your image, select the Magic Wand Tool. Click on the white spaces while holding down shift on your keyboard. Go to Edit > Clear. Go to Selections > Select None.

9. Use the Deformation Tool to make this image bigger than the original.

10. Select the Mover Tool so that the image is deselected.

11. Go to Layers > Properties and change the opacity to 40. Click OK.

12. Right click on the original image and choose Copy.

13. Go back to Paint Shop Pro and go to Edit > Paste > As New Layer.

14. Drag the picture around using the Mover Tool to position it on the banner. It should be somewhat overlapping your other image, but not completely covering it. You can make your image smaller by using the Deformation Tool if it's too big.

15. Go to Layers > New Raster Layer and set the opacity to a number between 10 - 30. Click OK.

16. Change your foreground and background colours to black.

17. Select the Text Tool.

18. Set your text settings to match one of the following:
Paint Shop Pro 9 (http://usera.imagecave.com/sunshinejenny/shield/psp9_text_options.gif)
Paint Shop Pro 8 (http://usera.imagecave.com/sunshinejenny/shield/psp8_text_options.gif)
Paint Shop Pro 7 (http://usera.imagecave.com/sunshinejenny/shield/psp7_text_options.gif)
Set the font to Arial, Verdana, or Coolvetica (Coolvetica can be downloaded at (http://www.abstractfonts.com/fonts/search/full_listing.htm?kw=coolvetica).

19. Click on your image and type in your background text (if you want it to look like Neopets banners, type in a phrase and don't put it any spaces). Click OK.

20. Move the text using the Mover Tool.

21. Go to Selections > Select None.

22. If the text is on top of your image and you don't want it to be, go to Layers > Arrange > Move Down.

23. Go to File > New. Use the same width and height as before. Under "Image Characteristics" choose "16 million colors" and then uncheck "Transparent". Click in the box beside "Color" and select white from the color palette. Click OK.

24. Change your foreground and background colours to black.

25. Select the Text Tool.

26. Use the same text settings as before, but change the font to Heffaklump (Heffaklump can be downloaded at (http://www.algonet.se/~j-j/html/heffaklump.htm)).

27. Click on your image and type in your username. Click OK.

28. Move the text to the center of the image using the Mover Tool.

29. With the text still selected, go to Selections > Modify > Expand (you might have a box come up telling you to defloat the selection, click OK) and type in 2 in the box.

30. Go to Selections > Modify > Feather and type in 5 in the box.

31. Go to Edit > Copy to copy the text.

32. Go back to your banner and go to Edit > Paste > As New Layer.

33. Move the text using the Mover Tool until you are happy with the position.

34. If the text is below the images, go to Layers > Arrange > Bring To Top.

35. Go to Selections > Select None.

36. Save your banner as a gif, jpg, or png (you can choose the file extension from the drop-down list below where you type the filename).

37. Upload your banner to the internet. Try http://www.imagecave.com/ or http://www.2and2.net/ for an image host.

38. Make sure to replace http://www.neopets.com/URLHERE.gif with the address of your banner.


Top Banner Tutorial (Photoshop)

1. Open Photoshop.

2. Go to File > New. Change the width to 480 and the height to 62. Click OK.

3. Right click on the image below and choose Copy. Go back to Photoshop and go to Edit > Paste.
http://usera.imagecave.com/sunshinejenny/templates/banner_template.gif

4. Find an image that you would like to use on your top banner.

5. Right click on the image and choose Copy.

6. Switch back to Photoshop and go to Edit > Paste.

7. Drag the picture around using the Mover Tool to position it on the banner. It should be somewhere near the left hand side, it's fine if it covers the edge of the banner.

8. If there is any white space around your image, select the Magic Wand Tool. Click on the white spaces while holding down shift on your keyboard. Go to Edit > Clear. Go to Select > Deselect.

9. Go to Layer > Layer Style > Blending Options and change the opacity to 40. Click OK.

10. Right click on the original image and choose Copy.

11. Go back to Photoshop and go to Edit > Paste.

12. Drag the picture around using the Mover Tool to position it on the banner. It should be somewhat overlapping your other image, but not completely covering it.

13. Go to Layer > New > Layer and set the opacity to a number between 10 - 30. Click OK.

14. Change your foreground colour to black.

15. Select the Text Tool.

16. Set the font to Arial, Verdana, or Coolvetica (Coolvetica can be downloaded at http://www.abstractfonts.com/fonts/search/full_listing.htm?kw=coolvetica. Set the size to 36 or so.

17. Click on your image and type in your background text (if you want it to look like Neopets banners, type in a phrase and don't put it any spaces). Click OK.

18. Move the text using the Mover Tool.

19. Go to Selections > Deselect.

20. If the text is on top of your image and you don't want it to be, go to Layers > Arrange > Send Backward.

21. Go to File > New. Use the same width and height as before. Set "Background Contents" to "White". Click OK.

22. Change your foreground colour to black.

23. Select the Text Tool.

24. Use the same text settings as before, but change the font to Heffaklump (Heffaklump can be downloaded at http://www.algonet.se/~j-j/html/heffaklump.htm).

25. Click on your image and type in your username. Click OK.

26. Move the text to the center of the image using the Mover Tool.

27. Go to Layer > Flatten Image.

28. Select the Magic Wand Tool and click in an empty spot on the image.

29. Go to Select > Inverse.

30. Go to Select > Modify > Expand and type in 2 in the box.

31. Go to Select > Modify > Feather and type in 5 in the box.

32. Go to Edit > Copy to copy the text.

33. Go back to your banner and go to Edit > Paste.

34. Move the text using the Mover Tool until you are happy with the position.

35. If the text is below the images, go to Layer > Arrange > Bring To Front.

36. Go to Selections > Deselect.

37. Save your banner as a gif, jpg, or png (you can choose the file extension from the drop-down list below where you type the filename).

38. Upload your banner to the internet. Try http://www.imagecave.com/ or http://www.2and2.net/ for an image host.

39. Make sure to replace http://www.neopets.com/URLHERE.gif with the address of your banner.


Common Problems

Banner in the wrong place
You're using an old banner code. Use the ones above instead.

Banner doesn't show up
1. Make sure you are using the correct address. An image's address looks like this:

http://www.neopets.com/image.gif
It should not look like these:
[img]http://www.neopets.com/image.gif[/img]
s r c="http://www.neopets.com/image.gif">
2. If you've upload the image to R i p w a y, you need to use a different host. R i p w a y is blocked on Neopets.
3. Try putting your image's address into the address bar and pressing "Go". If you don't see the image or get an error, you have the wrong address. If you do see the image, but there is other text or images on the page, right click on the image and choose Properties to get the real address.
4. Check to make sure there are no open tags before the code, like this:

a:link { color: red; }

BANNER CODE
5. Make sure there is no space after the word "url" in the code. It should look like this:
url(YOURURLHERE)
and not like this:
url (YOURURLHERE)


| Home | FAQs | Link Me | The Codes | Blog Coding | Guild Layout | Shield | Sidebar | Top Banner | User Lookup |



Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions