|
|
You have found a great picture on some website and now you want
to use it in your shop, guild, pet page or lookup but you dont know how?
- I hope this step by step guide will help you to do that.
If you want to use picture from neopets website, ignore steps 1-3,just:
a) right click on the picture
b) select properties
c) copy URL and use HTML or CSS code provided below.
(You can practice on the Noil picture above)
Now, if you image is not on neopets website, read further:
-Sence most websites do not allow remote linking (when you try to link
picture from their site, you get red annoying "x" instead of your picture,
first thing you will have to do is:
1. Open account on photobucket.com or some other image hosting website.
2. Save the picture you want to your computer
(right click on picture, select Save Picture As...)
3. Login to your (photobucket) account and click on add picture,
find that picture on your comp and upload.
Now your picture is uploaded and you can see its smaller version in your album.
Below that picture is URL address.
For shops, webpages, and guilds use this HTML code:
(Paste your URL instead of example URL)
For Lookups you must use CSS code:
(you can also use css for guilds)
Notice that in CSS code you need to enter values for hight and width.
you will find those numbers if you go to your (photobucket)
album and click on your uploaded picture.
Below the picture you will find numbers for example 120x75.
If your picture is on neopets website, click on it, select properties, and you will find "Dimensions".
Where do you put the code:
Shop - click on "Create/Edit a Shop" and type/paste the code in "Shop Description" box
Lookup - click on "User preferences", put the code in "About me" box
Guild - click on "Guild Layout", then on "Modify Guild Preferences
PetPages - click on "Pet Central" - "Pet's page" -click on "Edit
------------------------------------------------------------------------
1. Press Print Scrn on your keyboard (its located to the right from F12 key)
-------------------------------------------
2. Open some graphics program like Adobe Photoshop or PSP (try to avoid MS Paint if possible!)
3. Select Paste (or press CTRL†V)
4. Crop or edit your screenshot. You will need to make your screenshot smaller or include only important part,
because Photobucket wont allow you to have picture larger then 250k.
If you upload bigger pic anyway, it will show up really small on your pet page.
5. Save your picture as .gif (NOT .bmp!!)
6. Upload your screenshot (see Adding Picture lesson)
7. Use the same HTML code from previous lesson.
(This tutorial is made for Adobe Photoshop. If you dont have it, use Google to download free trial version)
2. Set higth and width both on 10 cm and Contents on White, then click OK.
3. In the bottom right corner you will find box with layers, channels and paths. Click twice on the background layer to unlock it. When another box pops up, just click on OK.(If you dont have Layer box activated, go to Window and click on Show Layers)
4. Click twice on Layer 0. (You can rename the layer if you want by clicking with right mouse button on it and then selecting Layer properties)
5. Now you have oppened whole palette of layer styles. You can do a lot of neat stuff with them but i won't explain what every one of them does, you will have to click around and discover for yourself :)
6. For this example, click on Texture tab, and allow Preview so you can see on your layer whats going on.
7. On the Right side now you will see Texture options. Pick one and play a little with values (or just leave it as it is).
8. Lest change colour of the bg now. On the left side of the Styles box click on Color Overlay, just like you did with Textures. On the Right side now you have more options, change colour to whatever you like.
9. We will leave Styles now so click on OK in Layer Styles wind*w to get rid of it.
10. Go to Layer menu at the top of the screen and select Flatten Image.
11. Now we will get rid of the emboss effect at the edges. Select Crop tool from the toolbar or simply press letter "C".
12. Now Click and hold left mouse button and drag selection to form a square, be careful not to touch emboss edges. When you have formed square, let go, click with right mouse button and select Crop.
-You can stop now, save it as .gif and use it as background because it looks quite nice even without images. But if its to plain for you and you want images on it, read further.
13. Go to File - Open and find an image(s) you would like to use on your background. For this example i will use normal sized Faerie Ixi image.
14. If your image is too large to nicely fit the background, like mine is, you will have to resize it. Select your image if it's not already active (just click somewhere on it).
Go to Image – Mode - and select RGB. Now when you resize yout image it wont lose much quality as it would if you left it on Index mode.
15. Click on image Title with right mouse button and select Image Size…
16. Enter size you want, for example i have reduced my image from 150 pixels to 100 pixels.
17. Click on Magic Wand tool on the toolbar or simply press "W".
18. In the upper left corner you will now find more magic wand options, so click on the second button which says Add To Selection when you hover your mouse over it.
19. Now with Magic Wand tool select all (usually white) areas, you dont want to show. If your image is too small, use Zoom tool "Z", to make selecting more easier and precise.
20. When you are done, click with right mouse button and select Select Inverse.
21. Now all that is left selected is your image. Press CTRL and C to copy selection.
22. Select your background and press CTRL and V to paste it.
23. Use Move Tool "V" to move your image around.
24. If you want to flip your image or rotate, click on your image where you have done selection and go to Image- Rotate Canvas. Notice that after you do that, selection is gone, so you will have to select it again with Magic wand tool.
25. After you are finished with positioning your images, click twice on the image layer in the bottom right corner to add some neat effects.
26. Click around to see what every one of them does and when you are happy with result, click OK to close Layer Style box. Do this for every image layer if you want (except background) For my image i have chosen Drop Shadow option.
This is how my bg looks. Nothing fancy but it will do :p
27. Now final step, go to File – Save as… Name your background and select .gif as format. (if you have used photos, use .jpg format, it will look better)
Your background is ready for use! This is the code you will need to place it on your lookup, shop, petpage or whatever.
I hope this wasn't too hard, I've tried to make this tutorial simple as possible, there is much more you can do with all those options but that would take a lot of space in here and its much more fun for you to explore all the possibilities. If you have any questions feel free to neomail me and don't be mad if I dont reply right away =)
If you would like to link back, use this button :)
----------------------------------------------------------------------























NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2009.
® 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