Layout maker Tutorial
Okay I'm going to try and teach you how to make a guild layout to the best of my ability. If you don't find this layout tutorial helpful you can check out turpentine-kisses.net. I hear there's a good tutorial there as well. Okay this may be a little long and the first part is for beginners so you can skip around if you like.
I use a few programs to help me. You don't have to have these programs but they make it alot easier and make the layouts look real nice. First for my graphics program I use Adobe Photoshop. Photoshop to me is the best tool, I've tried others but photoshop has just stuck with me. I know alot of people have this tool and alot of other people have JASC paint shop pro as well. These are the two leading graphics programs. You can make stunning graphics as well as layouts with these tools. It is very important you have these tools to use because Paint Layouts will not look nearly as good and believe me alot of people can look at a layout and tell it's made with paint. I will refer to these tools in the tutorial. I will also refer to the notorious 'Paint' program because I am aware that not everyone has these programs at their disposal. Paint really is not advanced enough to make layouts but you can make a simple layout with paint, but it will just not look as good or professional. Another Tool I use is Microsoft FrontPage. FrontPage is not necessary at all, however it makes it convenient and quick to code the layout.
Okay let's begin, First thing you need to do is find a graphic you want to make as the background for your layout. Neopets allows you to use any of their images on the sight in your guild layout. So let's say you want to put a picture of a plushie paintbrush on your layout. Go to the rainbow pool, then to the brush list. Find the plushie paint brush and right click it. then save as and name the file. Now you are also probably going to want a big graphic as the background. go to Google and then click the 'Images' tab at the top. Type in a word that will produce good results for your search. Lets say you wanted to find a picture of the Band 'Good Charlotte' you could simply type in the key words ''Good Charlotte.'' However, if you wanted to find a picture of specific members you could type in ''Billy Martin''. Don't be afraid to be too specific.
After you've got your picture you want, it's time to make a spot for your blog boxes. Now if you've got Paint Shop Pro or Adobe Photoshop follow step one. If you've simply got Paint, follow step 2. I'm mainly going to be going through the steps with adobe. I've used PSP before and it has most all the commands that photoshop has they are just in different spots.
1. Open your picture that you saved. Open a new image and make the size 430 by 580. You can pick any size but this size fits. Select the window to where your graphic is click Select>All. Click the blank 430 by 580 box and then select Edit>Paste on the main menu bar. Choose a color for the background of your blog boxes and choose the square tool. Next you need to select the opacity for the square. the opacity level in Photoshop is usually located in the top right hand side of the window and it will say Opacity: X% where 'x' being the level of opacity you select. change the opacity to around 30 - 70%. I would recommend you choose the color white because it gives a good smoky affect and goes with all colors except white itself. Position these boxes wherever you want on the page. In the below example I am going to make two blog boxes.
2. Okay if you are using paint you cannot make good text effects AND you cannot set the opacity of a square but you can make a solid colored square if you want to position a blog on top of a solid colored square. Just follow the above directions and omit the part about opacity. Solid colored squares do not look near as good as boxes with an opacity, but I would suggest making more of a collage of pictures rather than one big graphic like in the above example
Now save the file in JPG. format. Now it's time to upload your picture to the web. You need free web space that will allow you to link the images outside of the host sight. Without a doubt the best free web hosting that I know of is Freewebs, the host I am currently using. They give you plenty of space and will allow you to use your uploaded images outside of their sight. Now once you have signed up upload the image onto the host. Copy down the URL of your uploaded image. Now it's time to start coding your image. This is really tricky, especially for beginners.
First go to your guild and type in the code to put your image onto your guild sight using the 'img src' tag if you don't know it, here it is.
MAKE SURE YOU PUT A CAPITAL ''JPG'' on the file name in the ''img'' code or nothing but a big red 'X' will appear on your guild layout. I have no idea why it's like this but Neopets makes it that way.
Go ahead and upload the main picture to your Neopets guild. Okay now it's time to insert your blog boxes into the code. This is without a doubt the hardest part of making the layout, but you can do it with practice. First, you will have to insert the basic blog box code. or the ''div'' code. Here it is below
insert that code after your 'img' code. You need to insert this code every time for the number of blog boxes u have. If you have 2 blog boxes u need to insert the code 2 times. Now I am going to tell you how to get the numbers in the ''your numbers here'' spot in the above code. If you only have Microsoft Paint, then the only thing I can tell you to do is work through trial and error. If you have Photoshop/PSP you can take a screen shot of your uploaded guild. Take a screenshot by pressing the ''Print scr/sys rq'' button usually located in the top right hand side of your keyboard and then paste the image in your graphics program. I don't think you can do this with paint. Sorry. Make sure you get rid of any material around the actual screen like the start menu and the browser window. Position your pointer in the top left hand corner of where you want the blog boxes to go. after you've positioned the pointer glance down at the coordinates on the status bar at the bottom of the screen. These are the position coordinates to place in your 'div code' the first is the 'top' number and the second is the 'left' number. now you've got your position coordinates. Last thing is to get the size coordinates. You can choose the Crop tool or the Rectangle Marquee tool. Choose the blog box with either tool. The size coordinates will then appear. In Photoshop they will appear either at the bottom or top of your program either in the status bar or at the top in the white boxes. In PSP they appear at the bottom in the status area. If you use paint you don't have the luxury of this feature. But you can still find all the coordinates by trial and error. Remember that in the align part of the tag the 'top' coordinate is how many pixels from the top of the screen the box will appear and the 'left' feature is how many pixels from the left part of the screen the blog box will appear. If you don't know how large a pixel is remember your guild logo is 100 pixels high and 100 pixels wide. Copy those coordinates into your code and that's it! Pretty simple huh? well maybe not for the beginner but I believe anyone can do it.