Navigation

User lookup tutorials, finished lookup sample shown:



Lookup preview:


This tutorial is for those who have basic coding skills and know how to use an image program.

This tutorial is specifically for Photoshop CS or MS Paint. If you have another image program, then you can still work your way through, but of course you'll have to adjust some of my directions to make it work for you.

Choose your image program:
Photoshop
Paint

Other links:
Other Image Programs
Step 2: The Coding
Code to copy and paste
Notes on the code

If you're not sure about what is and is not ok with me regarding credit and use of my code, neomail me.

Basic Rules:

Please leave some form of credit on the lookup, link or no link, text or image, invisible HTML comment or visible.
Oh, and before you ask, yes you may make premades with the code from this tutorial.
But please leave credit on the page of premades if you do.

Step 1: The Images (Photoshop)

 First, you need a top image. I used this one:

It can be anything, just make it big-ish. Mine's 700px wide after resizing.

That's usually a good size. You can make it a bit narrower if you don't have 4 pets. Make it wider if you have 4 pets and if you want to show your neohome as well.

Edit the image however you want, and then put some sort of stroke, outline, or border around it.
(This is of course, optional. You don't need a border, or you can just have it around the left and right. If you opt for that, draw the borders by hand.)
I just did a stroke effect here, for simplicity's sake.


Now make your canvas a little bit longer, and make sure it only gets longer at the bottom by using the Anchor option.
In Photoshop it's under Image - Canvas Size...


Now, use the pencil tool to extend your stroke/outline/border down, beyond the image itself. Do so on both the left and the right. (Skip this if you chose not to have a border.)


Make a new layer and put it under all the other layers. Then use the paint bucket tool to fill in the empty space under your main image and between the lines you just drew. This finishes the part your stats tables will go in.


Use the rectangle tool at a low opacity to make a box for your text later on.

Go to #3 under notes on the code if you want to skip this box drawing step and still have a see through box for your text.

Save your image. It should look something like this:


Open the image you just saved. Set your select tool to Fixed Size (see top of screenie). Make the width match your image width and the height 1px. Select the very bottom row of your image, and copy it.


Then make a new file and paste the row you just copied. Save it, it's going to be the background image.


This is the background for my lookup:

In the code, we'll make it repeat so it'll cover the whole page.

For now, upload the image to an online images host and find the direct URL to use in Step 2.

Step 1: The Images (Paint)

 Open up your image. I used one of the backgrounds from Neopets.
Select the part of the image you want to use:


Copy and paste into a new file. Go to Image - Attributes to check the size of your image. Make it something close to 700 if possible. 600 is probably too narrow for your stats to fit. If it's closer to 800, then it's ok.

Use the line tool to draw a border around the image (hold down Shift to keep the line straight).
(The border is optional, of course. You can skip it altogether or just have it on the left and right.)

Go to Image - Attributes, and make the height slightly bigger.
This should add a little bit of white to the bottom of your image.


Draw the border again, extending it down past the image. (Skip this if you chose not to have a border.)


Use the paint bucket tool to fill in the white space between the new lines you just drew. (If you don't have a border, just fill in the blank part of the canvas.)


Use the rectangle tool to draw a box for your text later on:

To see how to get the see through effect with Paint, see #3 under notes on the code further down the page.

Save. This is your top image, and it should look something like this:


Use the select tool to select part of the bottom of your top image.


Copy and paste into a new file. It's ok if there's white space around it, we're going to fix that.
Go to Image - Attributes again, and make the height 1px. The width should already match your top image.


Save. This is your background image, and it should look like this:


And that's it for the images. Upload the images to an online image host and find the direct URL to use in Step 2.

Other image programs:

In another program things will of course be different. Just make sure you have these things:
1. A top image with some sort of border
2. A continuation of that border down beyond the image, with a background color
3. A 1px high background image that matches the bottom row of your top image

Step 2: The Coding

This is the code we'll be working with.
Text in RED are things you need to change.
Text in BLUE are my notes about what the red parts change.
The numbers correspond to the numbers on the reference pic below the code so that you know what you're changing.

Remember, I'm assuming you already have some knowledge of how this all works.

Here's the code for you to copy and edit:




Extra notes on the code, please read

Reference picture:


And that's it.

Notes on the code

Help! The filters say there's an error in my style tags?
Add a space and then a slash (/) after the word style and before the end bracket, like so:


  1. If you don't want your neohome to show (which will help your stats fit), add the red in this part of the code:
    #header, #footer, hr, #userneohome .contentModuleTable

  2. This code puts your picture and stats at the left of the page.
    If you want to move things over to the right:
    1. add space to the left of your top and bg images. Then re-upload the images and try again.
    OR
    2. Find
    #img{position:absolute;left:0px;top:0px;}
    and
    body{background:#986699 url('http://img.photobucket.com/albums/v393/uber_faerie68/87c8ecda.gif') repeat-y;} and change change the codes so that they look like this:
    #img{position:absolute;left:100px;top:0px;}
    and
    body{background:#986699 url('http://img.photobucket.com/albums/v393/uber_faerie68/87c8ecda.gif') repeat-y;background-position:100px;}

    Here I have moved both the image and background to the right by 100 pixels. You can of course change this number, but just make sure they match.

  3. To make your text box see through if you only have Paint or another program that does not have an opacity option, do NOT draw any sort of box on the image itself. The effect will be done with the code.
    First find this part:
    #text{text-align...etc.
    Then, copy and paste this:
    background-color:white;filter:alpha(opacity=70);opacity:.7;
    to the beginning of that part you just found, so that it looks like this:
    #text{background-color:white;filter:alpha(opacity=70);opacity:.7;text-align...etc.
    The color can change if you so desire, and same with the opacity.
    It would be best if the numbers were the same (80 and .8, 65 and .65).

    Of course, this can also be used if you do not want to draw a box on a program that DOES have an opacity option. If you feel comfortable with the coding, this will save you the trouble of matching up the text area.

  4. I did a simple line border for the tutorial above, but you can try some different things. Here are just a few more of the many different top images you can use for this coding. The repeating background image would simply be the bottom 1 pixel line of each of these.

    Fancier border:


    Just draw a box for your stats (remember the bottom pixel repeats):


    Long text box (The bottom repeats, so your text box on the left will be as long as your stats. Just position your text box div code, #text, at the left and make it really long and narrow.):


    My point? Experiment with your image program. The coding will be the same.

Link back




Affies


-----

-----

-----

-----

-----
Mylanithi12's Graphix




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