How to make a guild layout!
So you want to make a guild layout? Well it's actually pretty easy. This tutorial will teach you how to make a layout with an image in the center and boxes around the edge like this sample.
This didn't take me too long and as you can see it's a bit messy, but yours will be much better. Okay, on to the tutorial:
1. Open up your paint programme (ie. Adobe Photoshop, Paint, Jasc PSP etc.) for my layouts I use adobe photoshop.
2. Click on 'New' and make the dimensions of your image 500 by 600 in pixels (see image).
To see why click here.
3. Search neopets.com for your main picture image. I looked under backgrounds in Pet central. This has a lot of unreleased trading cards in it, flick through the pages to find the one you want :).
You could also look in the Caption contest
Or you could make your own image by compiling others up
Or if you have a computer art talent, draw a scene yourself :)
4. Copy and paste the image in to your image programme. Position it wherever you want. If it's too big click edit>>transform>>scale in adobe photoshop and make it as small as you like.
Or click Image>>resize in Jasc PSP
or in paint, just drag around the picture with the select tool and put your cursor in one of the corners and push inwards :).
5. Okay now that that's done you have to add the boxes. In adobe photoshop click on the shape tool and choose which one you want. (I recommend rectangle or rounded rectangle)
Make all the boxes in the right positions. If you click save for web in Photoshop you will see that your boxes don't show up! To fix that, go back to your picture, select the brush tool and make it one pixel and have the colour you want your boxes to be as your foreground colour. Now go back to the shapes tool and right-click. Select stroke path and then select brush.
Ta da! It might look quite strange but if you go on to save for web you get a preview and you'll see it looks fine.
For Paint click on one of the four shapes at the bottom of the toolbar on the left. Position them wherever you want.
For Jasc click on the 'shapes' tool and position them wherever you want.
6. Now if you want to add images (like I have a bottled dark faerie on the corner of a box) go to
www.neoitems.net
look up whatever item you want or if you don't know of a specific item type in a couple of keywords in the 'description' box. eg. I typed in Dark Faerie to see what I would get.
Once you've got your picture paste it in to your layout. Position it where you want. In Adobe Photoshop You might find that there is a white box around your image. The only way I know to get rid of that is to zoom in really close and click on the shapes tool change it to line draw the line through the white box as well as you can and zoom out to see if it looks okay.
In paint if there is a white box aroud your image click on the box at the bottom of the toolbar which has a picture of a couple of shapes. One has a blue background, select the one without the background.
7. Now for the text, all you need to do here is click on T in the toolbar. Choose the font you want and customize it as much as you want. you can also add cool effects to text in Adobe photoshop by clicking in the layers box (if you can't see it click window at the top and then click layers) and right-clicking on the layer containing text. Then select blending options (see image) and play around.
8. Now you're done with the design stage! Well done. Now click save as write a short name ie. drkfary and type rgb at the end. This is a reference for you so that you can change it because when you save as gif it merges all the layers.
9. Now click (in adobe photoshop) save for web and save the image again. Now it is in an image style which is a good internet format.
In Paint click 'save' and then in the 'save as type' box select 'jpeg'
10. Go on to www.photobucket.com or www.1asphost.com or another image hoster and open an account (if you haven't already got one) Click upload images and find your layout. Click ok.
Congratulations. Your image is on the web.
Coding!
1. Coding looks hard but it is very easy.
I'll explain how it works :).
Okay first thing you'll see is the
tag. It makes a table so your picture can go in the main guild bit. The width and height are the dimensions of the image. Make sure these are the same size as the guild layout image you just made. The border command is pretty obvous. The background command is the main image, your guild layout. Copy and paste the URL of your newly uploaded guild layout image into this section.
Next you see this
This is how you customize the general look. The scrollbar colours are pretty straight forward. Experiment with these until you get the look you want. Near the bottom is a font setting. You can change 'Georgia' to any other font. However remember that if you downloaded a font which many others don't have, the people who don't have the font downloaded would just see the default 'Times new Roman' font. Next to color is a code, this is called a hex code. For a hexcode list see
http://www.lissaexplains.com/color.shtml
And if none of those colours take your fancy. If you have Jasc PSP or Adobe Photoshop then choose a colour you want on there and you'll see the code in the bottom right corner of the colour editing screen :). Handy.
Okay! Lastly the scroll box itself! The things you really need to know are that 'top:555;' means how far the box is from the top. In this case it will be 555 pixels from it. The 'left:290;' means that the scrollbox will be 290 pixels from the left. The 'width: 290;' and 'Height: 240;' commands are the dimensions of your box. The 'top', 'left', 'width',and 'height' commands are hard to get perfect because it's all done throught trial and improvement. I advise having one page open with the guild main page and the other with the 'guild preferences' in it. That way you can just refresh the homepage when you make a change. Trust me it's a LOT quicker. The /div and /table commands end the scrollbox.
Well, just for your convenience I've made 3 boxes of 'beginning content', 'middle content' and 'end content' all you need to do is copy and paste them into 'guild preferences'.
Beginning content (paste this in to the top of your guild layout)
Middle Content (This is the 'scroll box' code, copy and paste this for each scrollbox you have (ie. in my sample I have 4 so I would copy and paste it 4 times)
The end code (Just to round things off, add this right at the bottom)
And you're done! Ta da!
