Neopets Mania!! We are still the best graphic source for Neopets layouts! Do your Neopets Daily Clicks here, get the Neopets Daily Puzzle and Neopets Crossword Answers every day! theGraphicBin provides Neopets Layouts for your Neopets profile, Neopets lookup, Neopets guild, Neopets shop, Neopets gallery plus we provide Neopets help and LOADS more!

User Lookup Tutorial

Hi guys! I had made this userlookup tutorial a few years back, but since then TNT changed the coding rules umpteen times, so suffice to say that it needed a little updating ;)

Keeping that in mind, if you find any problems with the tutorial or can think of a way to improve it, please email me to let me know!

First thing you will need to use this tutorial is Abode Photoshop. It is possible to create these layouts with just about any other program (ie Gimp, MS Paint), but I use Photoshop, so thats what this tutorial will use. If you don't have Adobe Photoshop you can download a 30 day free trial here. It requires that you create an account, and the download is kinda hefty, but it's well worth the effort in the end (in my opinion!). I use a slightly older version of Photoshop, so my screenshots will look a bit different, but the end result will be the same.
Once you have Photoshop all nice and installed, you will need to download this template file. Unzip it and open it up in Photoshop.

So now that all the technical stuff is over it is time to get creative - this is the fun part!

You screen should look somethings like this:



You can see how I have labeled the tools, menu and layer sections. I will be referring to these three areas quite often during the tutorial.

The Background

First up we will need find a suitable background to use. You can either use a solid color background, or a pattern tile background. The solid color option is super simple. Create a new file by going up to the Menu Section. Select File, then New. Make the width 100px and the height 100px.



Using the fill bucket , fill the square with the color that you want your background to be. If you don't see this icon, you probably have the Gradient Fill icon selected. To find the Flood Fill, right click on the Gradient Fill and then scroll over and click on the little Fill bucket. Now you need to choose your color. Select the top color swatch by double clicking it . Select your color, and click OK. Click on your background block and it will fill with your desired color. Now save it! Call it whatever you like, just rememeber what you called it and where you saved it to ;)

If you choose to make a pattern tile background, you will either need to make or find a seamless background tile. You can find these all over the web, just make sure that it is a seamless background, meaning you won't be able to see the seams once it has been tiled (repeated). I will be using a background and images that I purchased from Digiscraps.com. They have some awesome clipart for a really low price. However, there are many sites that offer free background and clipart too! Open up the tile in a new window within photoshop. Save it! You will need it again later.



***NOTE!*** Please ignore the fact that you can see the background tile that I choose in all the layout screenshots that follow! All you will see is a light gray and white checked background, which means that the background is transparent :)

The Backdrop Layer

OK, so now we will color the backdrop layer. Open up the layout template that you downloaded earlier. The backdrop is the block that is currently beige. We will change the color and dress it up a bit.

Be sure that the Move Tool in your Tool Section is highlighted. Bring your attention now the the Layers Section. Find and select (by clicking on it) the layer that shows a white box and is labeled 'Shape 1'.


Right click anywhere on the highlighted area and then select Blending Options.



This is where you will have to play and around try different effects and see what you like. The possibilities are boundless in here, which is why it's my favorite part of Photoshop :) I'm going to use the Drop Shadow, Inner Glow, Color Overlay and Stroke tools to create my shape background. Move around the scrolling bars and select different options from the menus to find the combo that suits you. Don't worry about messing things up, because all you have to do it click cancel and it will revert back to it's original form. Once you are satisfied click OK.

Edit the Text

Now we will edit and decorate the text titles. Select the Text Tool in your Tool Section. Down in the Layers Section find and select the layer that shows a capital T and is labeled 'about me'.



A text bar will appear up in the Menu Bar area.



The drop down menu where it says "garamond" is where all your fonts are stored. You can change the font, or keep it as it is now. You can also change the size and color of the font within this text bar. Repeat with the remaining text titles. If you would like to get even fancier with your text you can go into the Blending Options just the same as what you did with the Shape 1 background. So a little recap of that, right click on the highlighted area with the capital T and the word Stats over in your Layers Section, then select Blending Options. Once again, the options are bountiful, and I'm sure you will come up with something amazing :) Once you are finished you can copy the style you just make by right clicking on the About Me in your Layers Secton and selecting Copy Layer Style and then Paste Layer Style on the remaining text titles.




Note: You can download some neat fonts for free at sites like dafont.com and 1001freefonts.com. Extract them into the Fonts folder that is in your Windows folder found in the C:/ drive.

Add Images

Find an image or images that you would like to use. A great place to start looking is through Google Images. Just be sure there are no copyright laws on the images you choose.. they don't like that ;) Open the image up in a new Photoshop file. If the image has a background that you would like to remove, select the Magic Wand from the Tool Section. Click on the area you would like to remove. From the menu bar select Edit, then Cut. Once you are satisfied with that, go back up to the Menu Bar and choose Select and All, then Edit and Copy.



Now back over to your layout. Again from the Menu Bar choose Edit and Paste. With your Move Tool selected from the Tool Section you will be able to move the image around and place it where ever you like.



You will now notice that a new layer has been added to your Layers Section, it is called Layer 1. You can rename it if you like, but it isn't necessary. To add effects like a drop shadow or whatever to your image, right click on Layer 1 in your Layers Section and select Blending Options just like before.



If you have more images to add, now is the time! Keep in mind that once you apply this layout to Neopets, the Neopets info and images will cover your layout images, so try to keep them in the same basic location that I have put mine.

Add Text

Now you can add some text if you like. Simply select the Text Tool again , set your font, size and color. Click anywhere on the layout and write something! Use the Blending Option to spiffy it up a bit if you want.



Save your completed layout PNG file. It MUST be png so that the background will appear behind your layout.

OK, so thats done, now all we have to do is the finishing touches! First you will have to upload your new layout (as well as the background pattern if you used one) onto a server. There are a few good free image hosts out there such as Photobucket, ImageShack and TinyPic. Once your image has been uploaded, the host will provide you with a URL, such as 'http://www.photobucket.com/payespics/firstlayout.jpg'. You will need the URL to complete your layout.

Applying your Images to the Code

Download and unzip the code located here. Open it up with notepad or similar text editing software.
At the top of the code you will see this: img src="PASTE YOUR LAYOUT URL HERE". Replace the text within the quotations with your layout URL. It will look something like this: img src="http://photobucket.com/yourpics/myfirstlayout.png". Don't remove the quotation marks!

Several lines below that you will see: img src="PASTE YOUR BACKGROUND URL HERE" border="0". Replace the text within the quotations with your background URL. It will look something like this: img src="http://photobucket.com/yourpics/myfirstlayoutbackground.png" border="0". Again, don't remove the quotation marks!

Finishing Up

You are finished!!! Go try it out on your own lookup! To change your Neopets lookup preferences click here. Copy the entire code and then paste it into the 'about me' text box located on the preferences page.

Well done! If you are super proud of your new creation please show me, I'd love to see it! ^^

PLEASE LEAVE THE CREDIT TO TGB!! I am sharing my knowledge with you, so please return the favor with a credit to thegraphicbin!