16 replies to this topic

[Wil]

So... You come in here thinking you need help making a user lookup with all that new fangled HTML all those whippersnappers are using nowadays. Well, this isn't that type of tutorial. This is the "how to steal a layout and make it look like you did it yourself" tutorial. Here are the steps:

Step 1: I can has layout?

Spoiler

The first step in this tutorial doesn't actually start in Photoshop or Notepad C++ or whatever. It starts on a layout site like Jellyneo.com. Now then, the first step is to select a layout that meets our standards. Don't pay too much to the images since we'll only be using the layout. For this example I've picked this one since I like how they've done the layout:


(Will post better screenie later)
It's simple, the layout is manageable and clean.

Step 2: The image yoinking

Spoiler

Now, after previewing this layout (in Firefox) right click and press "View Page Info". This will bring up a screen like this:


Notice how the standard yellow avatars are missing. Turns out those are replaceable and can be changed in the coding. Who knew? (More on that later)

You might need to do some digging but almost all the images corresponding to that certain layout have the words "UL" and "Sunnyneo" For this instance we only need the UL_jazan ones from Jellyneo. Save these. Now that you have your template images we can go on to step 3!

Step 3: Photoshop and Trial and Error

Spoiler

Now then. You have two images. one is obviously the large Jazan-riding-on-a-horse picture and the other is... well. It looks like a mess of colors on a thin strip. The truth is, the skinny one is actually your background. To see exactly how bad this changes it we'll use photoshop to make it completely white.

(Photoshop white image BG here. Will have screenie later)
Please note: if you change the thin strip to completely white, make sure you save it as a copy. You'll be changing the original one later. Also, remember that you need to upload the photo to an image sharing site.

Here's what your layout will look like when you change the background:
(screenie here)
Now that we know how badly it'll be changed we can start step 4.

Intermission: We can rebuild him. We have the technology.

Spoiler

Now here comes the fun part; the main image. this is the one with Jazan riding on the Uni.
(insert screenie)

This is what it looks like without all the aesthetics:
(screenie)

This is what we want it too look like: (for this tutorial)
(Epic Screenie)

Step 4: Made from scratch... Sort of.

Spoiler

Now that we have a rough template we can begin to photoshop the image more. I use Photoshop CS5 but it's fine to use anything else (GIMP is cool too. Just harder to deal with)

The first sub step is to pick some images. For this layout I picked Eliv Thade. It's up to you to choose what you want on your layout. I highly recommend using renders than real images as real images have a tendency to look awkward on Neopets. It's really up to you. I've also picked up some brushes (I suggest Brusheezy but that's also your call) and I've also picked a nice font (dafont is an excellent mostly free font site. There's like 50 out of 5000 fonts asking for money, no signing up and you can browse at your own leisure.) An important note is that your font may change depending on your final image.

Now that we have your main image you'll notice it may or may not be the correct size. If you do decide to resize your image make sure it's not fuzzy. Fuzzy images on a user lookup always look sloppy.

For the sake of clarity I've photoshopped the main interest points on this layout. A main interest point is an area which people have a tendency to look at. For example, I've left a blank spot on my signature which draws your attention more than the rest of it

Useful Links (Not Started)

Spoiler

This is a work in progress. Please bear with it.

Edited by Wil, 28 January 2011 - 06:58 PM.

[Connery]

I'm interested to see where this goes -- looks like it will be a pretty helpful guide when it's all said and done.

[Wil]

Honestly, I thought this would be really easy to do. Like maybe 30 minutes tops. I now realize that to make a good guide it'll take a while. I'll have a template included at the end.

[Chopped]

thanks now just to find out how to do the coding

Edited by Chopped, 26 January 2011 - 07:23 PM.

[Wil]

Coding isn't too hard. I found out through trial and error.

[Kido]

oh. This is what you meant by "coding tutorial" XD Nice. I do this myself (replacing the images with my own) only I use some of the graphic bin layouts as sunny's kinda harder with their no copying laws

Edited by Kuro, 26 January 2011 - 07:44 PM.

[Wil]

I always post "Coding help from Sunnyneo" but I don't put a link. That's close enough to credit for my taste.

[Salamanda]

I was about to rip your head off for stealing coding, even if it is as general as sunnyneo's but you give credit so...I guess this is a good way to learn. Maybe.

[Wil]

Yep. My favorite layout was one that was Gourmet themed, I really didn't want to credit Sunnyneo since it would ruin the whole layout for me but I did it anyway. I'm a sucker for credit.

[Jennysaur]

lol I remember when I used to do this (x
then I would take off like the sunnyneo buttons and just put a small link or something somewhere unnoticeable.
but now I'm more educated in html/css

[Noitidart]

This is real real awesome. I would love to make my own lookup some day. Plus rep for the initiative.

[Wil]

Thanks Noit and Jenniferrr! I'm pretty lazy and some days I have a tight schedule but I'll be working on it on and off. When I get near completion of a tutorial I get really anal on all the details. While I start it I feel lazy.

[Strategist]

Tutorial is coming along nicely mate. Im hopeless at html and all that jazz (not too bad at graphics etc but). This will be very helpful indeed.

[Noitidart]

Thanks Noit and Jenniferrr! I'm pretty lazy and some days I have a tight schedule but I'll be working on it on and off. When I get near completion of a tutorial I get really anal on all the details. While I start it I feel lazy.

After your tutorial can you make some demos. Like you following your own tutorial to create a finished product. That would be utterly awesome.

[Wil]

After your tutorial can you make some demos. Like you following your own tutorial to create a finished product. That would be utterly awesome.

Actually, I think I might do that. I'm making the layout from (near) scratch for this tutorial so I might make some. I'll use the hypercam and maybe do a video run through.

Tutorial is coming along nicely mate. Im hopeless at html and all that jazz (not too bad at graphics etc but). This will be very helpful indeed.

Thanks! The HTML thing isn't too hard. It's pretty simple but takes a while to understand.

Edited by Wil, 04 February 2011 - 07:59 AM.

[Strategist]

Any more news on the completion of this Wil? Would love to be able to utilise this tutorial mate

[Xwee]

lol! glad to see I'm not the only one that does this XD