clemenia got their homepage at Neopets.com

Welcome
You want a custom layout for your guild eh? You want it to look good and attract many people? But you don't know how to make a layout? And you only have MS paint to work with? Well welcome to Hanna's Guild Layout Guide for MS Paint.

Basics
First lets go down the basics of a guild again. (If you already know this feel free to skip this section)
A guild is a club many people join over their Neopian Lives. These clubs usually have people who have a common interest or bond. Some of the most popular guilds are Neorelated, Celeb, Harry Potter, Anime, Roleplay, and Animal related.

To get to the guild headquarters (the place guilds are located); go to shops and then click the third building from the right.

From there you can quickly jump to your own guild, create a new guild, get help, or search for other guilds. Oh yes, and faerie quests. I'm not quite sure why that's there. I guess TNT needed another spot to fill.

So now you know where everything is and you know where you can find help (there's also a guild FAQ) go and make your guild. Don't worry; this guide will still be here when you're done.

Where to put your layout
A question many people ask me is where to actually put the layout. For now, since you don't have an actual custom layout made you may want to go and get a premade one (sunnyneo has wonderful layouts that actually fit with the updated neopets).

When you have the layout in hand; go to the layout section and then click Modify Guild Preferences. Your code will go in the Welcome Message box. Yes, the welcome message.

Thinking up a theme
With your Guild made you need to think up an actual idea on what your layout should be. It should have some sort of theme. This way it won't just look thrown together. Some good ideas to make are a favorite neopet, a favorite neopet colour, a place on Neopets, the Celeb/character you like. There's an endless possibility. If you still don't know just go on the boards and ask around. Get ideas from people that actually have a successful guild.

When you have an idea search around places for images you can use. Backgrounds, Neogreetings, Shopkeepers, and items around Neopia are great places to get pictures. The Art gallery and Beauty Contest are not. If anyone artist sees you using their picture without their permission, they can report you!

Now that you found the pictures you want to use, you need to right click and save them to your computer. Or you can right click and copy the picture and later put the picture on the actual layout.

How to make the layout
For this guide, I'll show you how to make the layout using MS Paint. Of course, you can use any other art program (it'll probably be more easy for you) and just transfer what I'm saying to the program. Almost everyone has paint, as a standard, on their computer. If you don't, you may want to go and download a free art program (Paint Shop Pro has a free trial offer). If you are using your parent's computer be sure to ask them to download for you.
*note: I do not have a mac, thus I do not know how to use it. I'm very sorry to all you guys ^^;

One of the first things you need to do is to get the right size for the page. About 650x750 is the size I'm using for this guide, but feel free to tweak it to your fitting. Just remember to not make it too small or the page will look empty nor make it too big or it'll stretch the page.

The tool names used in this guide are from top left to bottom: Free-Form Select, Eraser, Pick Color, Pencil, Airbrush, Line, Rectangle, Ellipse, Select, Fill, Magnifier, Brush, Text, Curve, Polygon, and Rounded Rectangle. Now go to attributes to change the width and height to 650 and 755 or the size you're using.

When you're done use the Fill tool and fill the colour into the colour of your choice. Plain white is okay for your first layout. Just think of what would match your theme. I'm making an Eliv Thade layout so I'm filling in the whole thing with black for now.

Now take the selected image of your choice and paste it on to the filled colour. Just remember not to have the setting on opaque. This way you can have the white parts of the picture invisible.

If you look at your pasted image you may notice that the picture seems to pop out and look odd against the plain background. To fix this you need to blend the colours. It isn't easy with MS paint but it can be done. One way you can approach is to colour the surrounding area with colours that are similar to both. Do it multiple times so it looks like the picture is fading into the background.

Other times you may want to go in with a different approach, and actually make the background look like it's pixeling out. To do so just use your airbrush tool with the colour of the background (on the biggest brush size) and quickly spray it over the edges. Do so many times until it gets to the look you want. Then pick up the colour and using the Brush (at the smallest brush size) randomly dot the sections away from the actual picture.

Now that you know how to put pictures with backgrounds in lets move on to your Guild's name. Click text and select where you would like the name to be. Make sure to change the font size so it'll be big enough. Make sure your font works with your theme. To change the colour, just select a different one from the colour toolbar. Another way to get the Guild's name up is to use bubbles, small flowers, dots...etc and position them to spell you Guild's name.

You may have noticed that you can only pick one colour for the font in paint. Yes, it's not just your computer. Since the font's big enough just select the other colour and using fill, fill in each of the letters. There will be a faint outline but it should be barely noticeable.

An optional part is to add the 'Version' under the guild name. Many people do this if they're making more than one layout or if their guild has different layouts all the time. It helps distinguish which layout people are talking about.

Now it's time for the text boxes. These are one of the most important things in the actual layout. The number of them doesn't matter. Just remember that if you have too little boxes for your guild you will have to put a lot of information in one box; too many would just be confusing. Find the right amount for your guild depending on how much you have going on. Another thing to think of is the placement and size of the boxes. You don't want them too small or it'll be hard to see. If they're too big you won't have any room for your spiffy lookup. Play around with the rectangle tool (only outline highlighted). If you don't like what you did, just click 'ctrl Z' to undo.

The layout is still very plain so look around some more and find pictures or quotes to put on the page.

With shopkeeper pictures it's a little different though. I advise you to use the transparent ones. Copy and paste the picture onto your layout like the background pictures before. Only problem this time is instead of popping out because of abruptly ended colours; the shopkeeper may stand out because of white that still surrounds them. If the background is light there should be no problem, but if the background is dark you need to get rid of the outline. To get rid of the white just pick up the colour of your background, magnify, and using the brush tool (at the smallest size) colour in all the white and light grey.

Adding a picture with items is a tad harder. Copy and paste the images onto your layout but make sure you have the background set at transparent (not opaque). If your layout is not white you'll notice a lot of whitish outlining surrounding the picture, as well as parts of the image missing. Take your fill tool and fill in the missing parts with the white colour. Next do the same outline erasing as stated in the shopkeeper image. There will be more white and light grey this time.

Quotes are fun to put but should never be overused. Only use them if and only if you have an extra space. You will have words on the page already and it'll be confusing. If you do add a quote try to stay in the theme (I used the same font and size for my version part).

Finally when you feel the layout is complete remember to add your username. Also it would be nice if you added 'Thanks hanna_xu' to the end *wink wink nudge nudge* Now save the picture so you can upload it later (I suggest .PNG)... if you need help coding PNG just contact me C: ... Try Jpg or Gif.

So finally you are done with the actual layout making. I'll teach you to code as well. Just remember to please not do the exact layout I did. Use your own idea and themes. Also try to not have the images and text boxes at the same place. It wouldn't truly be a custom if it looked very much like mine, would it? So please try with your own ideas and own look. Just try different things. If you look around the guild boards you'll see many layouts with different looks. One of the reason my layout looked the way it does is because I wanted to try and show as many different ways as possible. So it has a little bit of everything. Now here's my final product (only smaller than the actual size). I changed the font colour a little because it was too hard to read and I changed some other parts as well. Nothing major though. So let your creativeness out of you. You now know how to create a lookup using paint.

How to create the logo
Without the logo your layout looks worthless (since you'll just have the 'logo goes here' sign). To make the logo find a small image that matches your theme. You want the image to be 100 by 100 pixels or less. You can resize with MS paint. It'll work fine if you can get it right. A nice resizing guide is found here. Just remember this is 100 by 100:

Paste the small picture and set it to the very top left of your picture. Make sure the square around the right looks to be 100 by 100 or less.

When you're done take out your trusty attributes again and set it to 100 by 100.

Now just center the image and perhaps add the guild's name again (I decided not to since 'Cordiality' was too long). Now you made your logo. Remember to save it as .GIF or .JPG.

Yes I do know that you can resize the image and make it smaller (use this on your own risk) and there are other programs out there you can use. But this guide is for MS paint only. (Infranview is a very nice free re-sizer that you may want to download)

How to create a Background
Some people don't like to have a solid background for their guild either. I personally think the actual layout part is enough and adding the background can make it a tad busy. To create a background, do the same as the layout. This time you don't need it to be as big and the pictures should start repeating. I made an avvie background a while ago.

As you can see I only made a part of it. If you code it as background it'll repeat. As shown here.

How to Upload the layout
Now that you made your layout you need a place to upload it. You can get an account at photobucket (Photobucket sometimes resizes the picture, I normally use it since my file size is normally not too big, but you can also use imagecave, myfilestash, or filelodge) It's free and you can upload all your pictures there. There are many other sites as well so find one the suits you.

When you log in you'll be get to a page that says browse. Click browse and select the picture you want. Click open and submit!

Now whenever I talk about the image url it's the link where URL is.

How to Code your layout
This is the part most people have trouble with and I'll try to explain it as clearly as I can. First you need to go back to where the welcome message is. And take out all the coding. Also, I have a link at the end of this in case you can't possibly figure the coding out. Neotacular has a spiffy webpage that'll help code for you. I suggest learning how to code by yourself first though.

To put the layout in you need to put the image URL in an image HTML code. Just take the code in the text box and replace URLHERE.JPG to the actual URL.

Here are the background codes:

A solid background code will be the background with a solid colour. For a solid background change COLOUR to a different colour. sunnyneo.com has some nice choices.

A background image code will have an image repeating over and over in the background. An example is Appleuse's page. Replace URLHERE with the image URL.

A fixed background will be the image (still repeating) but the background won't scroll down with you. An example is this page itself. Replace URLHERE with the image URL.

A non-repeating fixed background is the image not repeating and the image won't scroll down with you. Replace URLHERE with the image URL. Replace PLACE with either center, left center, right center, right bottom, left bottom, center bottom, right top, left top, or center top depending on where you want the image to be.

To put the Blog boxes in use this code. The numbers after top and left indicate where the box will go. The higher the number after top (450) the lower the box will go. The higher the numbers after left (380) the more to the right it'll go. The easiest way to find the right place the box goes is more of a trial and error thing. If the box is too far to the right decrease the number after left; if the number is too high increase the number after top...etc. The number after width (180) determines how wide the box is. The number after height (170) determines how tall the box is. Remember: the bigger the number the wider/taller the box it.

Thanks for the information j_phakoom! You can now use a site that can easily give you the code for the blog for you. All you need to know is the image location (remember the photobucket link?). On the page just click your mouse and drag. Also this means that you don't even need to put in the actual background code :3 How simple is that? The webpageis at neotacular. The x_blog generator.

I'll rephrase that. The part that says 450 is how far you want the box to go from the top. The bigger the number the further down it'll go. The part that says 380 is how far from the left. The bigger the number the further it'll go to the right. The part that says 180 is the width. The bigger the number the wider the box is. The part that says 170 is the height. The bigger the number the taller it'll be.

To add a Blog box with a custom scrollbar use this code. It's exactly the same except at the end change COLOUR to the colour for your choice.

You can add as many Blog boxes you need, just add another code. Remember to change TEXT HERE to the text you want. Also if you need HTML guide (change font colour, font size, font...etc) Neopets has a great guide.

Now that you have your welcome message all fixed up and the front looking spiffy you may notice the entire layout doesn't exactly match with the rest. Now you need to change the colouring. If you look at the examples, it really makes a difference. This is located under the welcome message. Neopets doesn't have too many colour choices to work from. So you can add a colour of your choice. That's what the box besides the scrollbar is for.

Now there you go all you need now is the logo.

How to Upload your logo
You don't have to upload your logo in photobucket. All you have to do is go to 'Guild Layout' and click Upload/Change Guild Logo.

Then browse for your picture and click Upload Guild Logo. Just make sure that the size is 100 by 100 and is either a .GIF file or a .JPG file.

Congratulations!
After all the hard work you finally created your own custom made layout with MS paint. It may be simple but remember: the guilds you see with very complicated awesome layouts probably didn't use MS paint (It's a hard tool to work with) and the coders most know a lot of HTML/CSS. Feel free to neomail any of my accounts for me to look/critique. Also please say somewhere in your guild (be the layout it's self, the front page, the webbie...etc) that you got some help from me. There are links near the bottom for you to take. Also if you were wondering what my layout from this guide turned out, you may visit it here

FAQ
Some questions people have asked. ^^ Feel free to submit your own.

How do I copy a picture?
Just right click and select copy.

I can't paste in paint!
Make sure you don't have 'Text' selected. Also you sadly can't paste in paint by right clicking. You have to either go to 'File' and the 'Paste' or type 'CTRL V'

How do you get the text toolbox?
Sometimes the text toolbar doesn't show up. If it doesn't just go to 'View' and the 'Text Toolbar.'

I noticed that in your guild layout thing, you didn't have the Guilds topbar thing. How do you delete it?
Oh the guild banner can be deleted with a very simple code.

How do you delete the topbar?
Another simple code... but remember to have the links somewhere in the guild. It's like your user lookup. You have to have those links or you can be reported and perhaps frozen.

How do you delete the bottombar?
Another simple code...

How come the background is white even though I changed it??
Eh when TNT updated they added it x.X

How do I remove my pet's image from the side? As well as my current neofriends?
Here you are:

How can I save as .JPG or .GIF?
Under 'File Name' there will be a little section that says 'Save as Type.' Just scroll down until you find the type you want to save as.

How come my layout is small?
It seems that your file size is a tad big. Try imagecave.com.

How can I make a userlookup?/Can you make a userlookup guide
I may make one in the future. But right now Uber has a nice little guide you can use. ^^

How can I get the little Code boxes?
Use this:

Do you know the code to make the words sorta like slide if you know what I mean.
Hmm do you mean a
Marquee? Like this?
Very simple actually...

<MARQUEE>TEXT HERE TEXT HERE TEXT HERE</MARQUEE>
But if you would like to make it customize the Marquee there are a few different add ons codes you can add on.

Many Add-ons

<MARQUEE WIDTH="300" Height="30" LOOP="infinite" BGCOLOR="PINK">This Marquee's width is 300pixels, height is 30pixels, will scroll forever, and the background colour is pink</MARQUEE> You can change the Width to any number (I use 300) depending on how big you want it to be. You can change height to any number (I used 30) depending on the height you would like it to be. You can change Infinite to any number depending on how many times you would like the Marquee to Scroll (Infinite means forever). You can change PINK to any colour depending on the colour you want the background to be. **REMEMBER** You can delete some add-ons and add others. Each add-on contains words="text". Thus you can decide to delete something or add anything from before by copying and pasting the actual add-on code and pasting it behind other add on codes (keep a space between each)

This Marquee's width is 300pixels, height is 30pixels, will scroll forever, and the background colour is pink

Other Add ons
<MARQUEE Direction="right" HSPACE="15" VSPACE="25" BGCOLOR="PINK">This Marquee will scroll from the right, have horizonal space of 15 pixels and Vertical space of 25 pixels and a pink background</MARQUEE> Putting Right behind Direction will make the Marquee scroll from the right, putting a number after HSPACE (Horizontal space) will indent the horizontal space by that much, putting a number after VSPACE (vertical space) will indent the vertical space by that much.

This Marquee will scroll from the right, have horizontal space of 15 pixels and Vertical space of 25 pixels and a pink background

Alternate Marquee

<MARQUEE BEHAVIOR="ALTERNATE" BGCOLOR="PINK">This Marquee will bounce back and forth and has a pink background</MARQUEE> Alternate after BEHAVIOR will make this Marquee bounce back and forth; scroll right and left. *Remember* You can still add everything from the above Marquee (change the width/height/bg/size...etc except the LOOP part. So if you would like, just copy and paste the parts you like in the first code into the second.

This Marquee will bounce back and forth and has a pink background

Slide Marquee
<MARQUEE BEHAVIOR="SLIDE" BGCOLOR="PINK">This Marquee will Slide to a stop and has a pink background</MARQUEE> Slide after Behavior will make this Marquee slide in from the right and stop at the left. This seems to not work on Fire fox though. *Remember* Almost all add-ons will still work

This Marquee will Slide to a stop and has a pink background

Okay, I made a layout, but no one is joining my guild! Why?
Well it really depends. First off, for most of you, this is your first guild layout. ^^ It won't be perfect. You won't be a magic layout maker all of a sudden. Keep working at it, and you'll make wonderful layouts to attract people.
Now, think of how your advertising and such. this page will be very helpful if you're still having trouble.

I got rid of all the bars and headers, and my guild now looks out of place! Have you got a code that will center this?
Yup! The code below should be just the thing. It was originally used to put a different set of links in the sidebar, but it's been tweaked a bit, so it works perfectly! (Thank you, mystiette)

If you have a question you think should go on the FAQ just neomail me and have FAQ as the topic title. If my inbox if full ^^; yes I don't clean it out as much as I should. Just neomail one of my sides (appleuse is checked daily).

Contact information
If you see any mistakes in the guide, suggestions on adding something else, or just want to say hi neomail hanna_xu, Appleuse, or Skiesfalling

*Please be patient with neomails.

Free Items
If you used this guide please put one of the links somewhere. It can be your petpage, pet's page, user lookup, guild page, webbie...etc. It'll just make me happy that you appreciate the hard work I put into this guide. This guide did take a while to write out.

	<a href="http://www.neopets.com/~clemenia"><img src="http://i39.photobucket.com/albums/e195/flyingcurlytail/link1.jpg"></a>
	<a href="http://www.neopets.com/~clemenia"><img src="http://i39.photobucket.com/albums/e195/flyingcurlytail/link2.jpg"></a>
	<a href="http://www.neopets.com/~clemenia"><img src="http://i39.photobucket.com/albums/e195/flyingcurlytail/link3.jpg"></a>
	<a href="http://www.neopets.com/~clemenia"><img src="http://i39.photobucket.com/albums/e195/flyingcurlytail/link4.jpg"></a>
	<a href="http://www.neopets.com/~clemenia"><img src="http://i39.photobucket.com/albums/e195/flyingcurlytail/link5.jpg"></a>
Made by Whitefox213	<a href="http://www.neopets.com/~clemenia"><img src="http://i39.photobucket.com/albums/e195/flyingcurlytail/link6madebywhitefox213.gif"></a>
Made by rasp200477	<a href="http://www.neopets.com/~clemenia"><img src="http://i39.photobucket.com/albums/e195/flyingcurlytail/button.jpg"></a>