Shield Tutorial
Shield Tutorial (Paint)
1. Open Paint (Start > Programs > Accessories > Paint).
2. Go to Images > Attributes and set the height and width to be measured in pixels. Change the width to 100 and the height to 150.
3. Right click on the shield template and choose Copy.
4. Switch back to Paint and go to Edit > Paste.
5. 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.
6. Find an image that you would like to use on your shield. Images that are around 80x80 pixels are the ideal size.
7. Right click on your image and choose Edit > Copy.
8. Switch back to Paint and go to Edit > Paste.
9. Drag the picture around to position it on the shield. Make sure to leave some space at the bottom for text.
10. Select a colour for your text from the colour box. If you do not like any of the basic colours, double click on any one of them and a dialogue box will come up. Click on the "Define Custom Colors" button. Use your cursor to select a color, click the "Add to Custom Colors" button, and then click "OK".
11. Select the Text Tool. Click and drag below the shield to make a rectangle to type in. Type your shield's text in the rectangle and change your font size, colour, and settings (bold, underlined, italics) to whatever you want.
12. Go to File > Save As and save your shield as a gif, jpg, or png (you can choose the file extension from the drop-down list below where you type the filename).
13. Upload your shield to the internet. Try Image Cave or 2and2 for an image host.
14. Because everyone's user lookup is different, the shield will need to be positioned in a different place for everyone. Check out the Shield Positioning Tutorial to make your shield cover the Neopets shield. You can then use the code below for you shield. Make sure to replace URLHERE with the address of your shield.
#shield { background: url(URLHERE); position: absolute; height: 150px; width: 100px; top: 280px; left: 590px; }
</style>
<div id="shield"></div>
Shield Tutorial (Paint Shop Pro)
1. Open Paint Shop Pro.
2. Right click on the shield template and choose Copy.
3. Switch back to Paint Shop Pro and go to Edit > Paste As New Image.
4. Go to Colors > Increase Color Depth > 16 million colors (24 bit). If you cannot select this option, the image is already 16 millions colors and you can still continue on with the tutorial.
5. Go to Adjust > Hue and Saturation > Colorize to change the colour of the shield. By lowering the saturation, the picture becomes darker, by increasing the saturation, it will become brighter.
6. Find an image that you would like to use on your shield. Images that are around 80x80 pixels are the ideal size.
7. Switch back to Paint Shop Pro and go to Edit > Paste > As New Layer.
8. Select the Magic Wand Tool (click on the arrow beside the Selection Tool and then choose the Magic Wand).
9. Hold down Shift and click in the white areas that you want to delete.
10. Select the Mover Tool.
11. Drag the picture around to position it on the shield. Make sure to leave some space at the bottom for text.
12. Select the Text Tool.
13. Set your text settings to match one of the following:
Change the font to whatever you want and change the size to somewhere between 14 - 20 or whatever size looks best.
14. Choose a foreground colour and a stroke colour for your font. The stroke colour is the colour of the outline, if you don't want an outline, change the stroke colour to transparent.
15. Click on your image and type in your shield's text. Click OK.
16. Move the text around the image until it looks good. If the text does not fit, make the font size smaller or shorten what you want to say.
17. Go to Selections > Select None.
18. Go to File > Save As and save your shield as a gif, jpg, or png (you can choose the file extension from the drop-down list below where you type the filename).
19. Upload your shield to the internet. Try Image Cave or 2and2 for an image host.
20. Because everyone's user lookup is different, the shield will need to be positioned in a different place for everyone. Check out the Shield Positioning Tutorial to make your shield cover the Neopets shield. You can then use the code below for you shield. Make sure to replace URLHERE with the address of your shield.
#shield { background: url(URLHERE); position: absolute; height: 150px; width: 100px; top: 280px; left: 590px; }
</style>
<div id="shield"></div>
Shield Tutorial (Photoshop)
1. Open Photoshop.
2. Right click on the shield template and choose Copy.
3. Switch back to Photoshop and go to File > New. Make sure the width is 100 pixels and the height is 150 pixels.
4. Go to Edit > Paste.
5. Go to Image > Adjustments > Hue/Saturation to change the colour of the shield. By lowering the saturation, the picture becomes darker, by increasing the saturation, it will become brighter.
6. Find an image that you would like to use on your shield. Images that are around 80x80 pixels are the ideal size.
7. Switch back to Photoshop and go to Edit > Paste.
8. Select the Magic Wand Tool.
9. Hold down Shift and click in the white areas that you want to delete.
10. Select the Mover Tool.
11. Drag the picture around to position it on the shield. Make sure to leave some space at the bottom for text.
12. Select the Text Tool and click below the shield.
13. Change the font to whatever you want and change the size to 14 - 20 (whatever looks best).
14. Choose a colour for your text.
15. Type in your shield's text.
16. Move the text around the image until it looks good. If the text does not fit, make the font size smaller or shorten what you want to say.
17. Go to File > Save As and save your shield 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 shield to the internet. Try Image Cave or 2and2 for an image host.
19. Because everyone's user lookup is different, the shield will need to be positioned in a different place for everyone. Check out the Shield Positioning Tutorial to make your shield cover the Neopets shield. You can then use the code below for you shield. Make sure to replace URLHERE with the address of your shield.
#shield { background: url(URLHERE); position: absolute; height: 150px; width: 100px; top: 280px; left: 590px; }
</style>
<div id="shield"></div>
Shield Positioning Tutorial
1. If you have a custom shield code in your lookup, remove it (not the Neopets shield - you can't remove that).
2. Go to your User Lookup.
3. Go to Edit > Select All or press Ctrl + A on your keyboard. Everything on the page should be highlighted, including your shield. We do this so that you can see the corner of the Neopets shield.
4. Press F11 on your keyboard or go to View > Full Screen. We do this so that the top and left numbers are correct.
5. Press the Print Scrn key on your keyboard, it should be somewhere on the right side, near the Insert and Delete keys.
6. Open Paint (Start > Programs > Accessories > Paint).
7. Go to Images > Attributes and in the height and width boxes type in "1" (pixel). This is to make sure there is no extra white space around the image.
8. Go to Edit > Paste to paste the screenshot of your User Lookup.
9. Place your cursor on the top left hand corner of the Neopets shield.
10. In the bottom right hand corner of the screen, you should see two numbers separated by a comma. The first number is the left value and the second number is the top value. If you don't see any numbers, go to View > Status Bar.
11. Change the left and top numbers to the numbers from the bottom right hand corner. Replace URLHERE with the address of your shield and put the code into your lookup.
#shield { background: url(URLHERE); position: absolute; height: 150px; width: 100px; top: 280px; left: 590px; }
</style>
<div id="shield"></div>
Common Problems
Shield repeats/resized/too small
1. If you uploaded the image to Photobucket, upload it somewhere else instead (eg. Image Cave). Photobucket resizes large images.
2. You might have the height and/or width wrong in the code. To find the correct height, right click on the image and choose Properties. Beside Dimensions is the width x height.
Removing the shield
You cannot remove the shield without removing all other images on the page.
Shield in the wrong place
You need to use the Shield Positioning Tutorial.
Shield doesn't show up
1. Make sure you are using the correct address. An image's address looks like this:
It should not look like these:
<img src="http://www.domain.com/image.gif">
2. If you've upload the image to Ripway, you need to use a different host. Ripway 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 <style> tags before the code, like this:
a:link { color: red; }
<style>
SHIELD CODE
</style>
5. Make sure there is no space after the word "url" in the code. It should look like this:
and not like this: