blogs

Welcome to my blog tutorial! Here you'll learn techniques to create your blog design, and most important of all, how to code it. If you have any trouble with the tutorial, just neomail me here.

what you need

Here's an overview of the things I mention using in the tutorial:
- MS Paint
- Photoshop (Optional)

about the two styles

For the designing part of this tutorial I talk about the different ways you can design it-using Photoshop or simply MS Paint if you can't splurge on something fancy like that. Here are the previews of my finished designs using the techniques explained here:

MS Paint Design

Photoshop Design

If you would like to make the MS Paint one, click here!
If you would like to make the Photoshop one, click here!

MS Paint Design

First of all, choose the image you want as your blog. You can find a good range of Neopet pics here. I'm using a Faerie Pteri picture for mine. Copy the picture you've chosen onto Paint and immediately save it! Who knows, someone might trip over the laptop charging cord. When you don't have a battery in. I suggest saving it as PNG because it keeps that sharp look.
Now use the square select tool and drag it over the space that you want to be able to type in. If you don't know what that tool is, just look at the picture below for an idea of where it is. It should look something like this, right?

Now right click somewhere inside the square you've drawn and select copy!

Open up a seperate Paint program. Hit CTRL+V or right click the empty space and select paste (if you do it that way make sure you're on the square select tool). Feel free to save it if you're overly paronoid like me about losing everything!

Your image that you want your text to be in should show up. If it doesn't, try copying from the other Paint program you have open and repeating the process.

Now click 'Image' on the toolbar at the top, and select attributes (or simply, CTRL+E).

A box should pop up. Change the default option to 'black and white' under the heading 'Colors'. After that click ok.

Another window will pop up and the program will then ask if you are sure you want to change it and continue, because it cannot be reversed. Don't worry, click yes.

Now your pic should look .. well... black and white! Now you can see that the pallete colours are now different instead of the colourful default ones. Pick a shade from the pallete, any will do. Just make sure you don't choose one that's too dark because then you won't be able to see your text (if it's black) when you type in it later.
I chose the second one from the left in the second row!

Choose on the colour fill tool (if you have no idea look at the screenshot below for an idea where it is) and click on the black parts of the image. Voila! A nice pattern for your blog. See how there's white spaces where the lighter part of the cloud is?

Now to make the typing space of your blog look nicer, select the rectangle tool and draw a 1 pixel black (or you could choose a different colour that fits with your blog image) around the image.
You can use the magnifier function to make it easier for you to see and to draw your borders.

You've almost finished designing your blog! Just a few more things to do...
Go back to your other program, the one you started off with. Select 'Image' on the toolbar at the top and select draw opaque. Defaultly, its already ticked so make sure you complete this step.

Now go to your other Paint program with your image that will be the space your text will be. Press CTRL+A then CTRL+C and copy it to your other program. Position and move your image so that the background fits with the pattern. If the shade doesn't fit your liking, go back to your other program, and press CTRL+Z till it goes back to its original form, and you can test other shades.

To make your blog look more spiffy, use the Text tool to put a header for your blog. Look through the fonts to look for one that will suit your image theme the best, or look the nicest.

And now to seal the deal, use the Rectangle tool to make a 1 pixel black (or you could choose a different colour that fits with your blog image) border around your blog. For extra spiffy-ness, put a 1 pixel white border inside that, and inside your blog text space.
Remember to use the Magnifier tool for easier drawing.

And you're done! Click here to learn how to code your blog!

Photoshop Design

(This design tutorial is shown in Photoshop CS2 Version 9.0)
First of all, choose the image you want as your blog. You can find a good range of Neopet pics here. I'm using a Faerie Pteri picture for mine. Copy the picture you've chosen onto a new Photoshop canvas and immediately save it! Who knows, someone might trip over the laptop charging cord. When you don't have a battery in. I suggest saving it as PNG because it keeps that sharp look.
In the tools section, pick the rectangle tool and right click on it to select your text space shape of your blog. I chose the round rectangle tool. If you can't see your tools section or if you accidentally deleted it, click 'Window' at the top and select tools on the drop down list.


Now change the colour of the space your text will be, by clicking on the patch of the colour you're currentely on in the top bar.

A colour picker will show up and you can choose any colour you want from that. I recommend something that's not too dark so you can still see your text later.
After you're done choosing your colour, simply press 'OK'.

Draw up your text box space (the place in the blog that you want to be able to type in)! It probably looks pretty plain right now, but we'll make it look far better soon.

Go to your layers box. If you can't see the layer tools then click 'Window' at the top and then Layers in the drop down list (or press F7).

Now hold ALT+DOUBLECLICK (For PC) or CTRL+DOUBLECLICK (For Mac) on the shape you just made's layer (defaultly named Shape 1). A new window should pop up.


First off all, lower the opacity on the 'Blending Options: Default' section, to make your text space more spiffy. You should already be on it, by default. While you're lowering it, make sure you check your blog image to make sure it doesn't get so opaque that you won't be able to see your text later. As you can see, I chose 75%

And now I give you the ultimate permission to go fiddle with all the effects! Go through all the options you can do and see what your image turns out like. After you think you're pleased with your image, press 'OK'. Here's my finished product:

Select the 'Horizontal Text' tool from the tool box. Now do the same thing with what you did with the box area you made. Draw up where you want your header text to be, and ALT+DOUBLECLICK/CTRL+DOUBLECLICK the text layer (it should defaultly be named 'Layer 2')


Now you can fiddle with all the effects again! Though this time, you don't have to lower the opacity unless you want to. When you're done, press 'OK'. Here's what mine looks like:

And now to seal the deal, open up your picture in MS Paint and use the Rectangle tool to make a 1 pixel black (or you could choose a different colour that fits with your blog image) border around your blog. For extra spiffy-ness, put a 1 pixel white border inside that too.
Remember to use the Magnifier tool for easier drawing.

And you're done! Click here to learn how to code your blog!

Coding Your Blog

First of all I'll put the code here and then I'll run through it with you. Here's the finished product using the code:

This is what this blog looks like!
In the next few steps you'll learn how to code your own!
- Like how to change the color of the scrollbar
- And font
- Position perfectly
- Well almost perfectly
And fill this space with
Your wonderful well thought out expressive and maybe slightly dramatic text!
Right?

And here's the code:

Now to get you to understand all this random text by just explaining. *wipes forehead in anxiety*

1)

This code is for how big your blog is in width in height. To find that out, open it in MS Paint and click 'Image' on the top bar, then 'Attributes...'. Or, you could simply press CTRL+E.

From there, you can find out the width and height. Just type those numbers into the spaces that have the old numbers I used (360 and 300).

2)

Your image URL! As you can see I host my stuff on Tinypic. I'll only show you how to upload images on Tinypic because, of course, Tinypic pwns Photobucket! ;D
Type in the Tinypic website in your web browsers address bar. I didn't show it on the preview below because I don't think I'm allowed to show offsite links. If you don't know it and really can't guess the URL, then search 'Tinypic' on a search engine.


Drag this picture to your address bar/a new tab for a better preview

Ooh look Sienetta uses Safari! How funky. Haha. And yes my Bookmarks Bar makes no sense.
Carrying on.
Now click the Choose File button.


Drag this picture to your address bar/a new tab for a better preview

Conveniently, a window should open up that shows all the files in your documents, like the one below.


Drag this picture to your address bar/a new tab for a better preview

Now double click your blog image that you made earlier! The window should close and whatever you named your blog image will appear by 'Choose File' instead of what it said before ('no file selected').


Drag this picture to your address bar/a new tab for a better preview

Finally you can click that huge green 'UPLOAD NOW!' button! (Yaaay)


Drag this picture to your address bar/a new tab for a better preview

Now you should get a little message on the screen saying 'Uploading... Please Wait'. The time you have to wait depends on how big your image is.


Drag this picture to your address bar/a new tab for a better preview

You're automatically redirected to a page titled 'Share This Image'. Click the link beneath 'Direct Link for Layouts' (it should then be automatically highlighted once you click it) and press CTRL+C on your keyboard (or right click and select Copy)


Drag this picture to your address bar/a new tab for a better preview

Now replace the old URL on my code with the one you just copied by pressing CTRL+V on your keyboard or highlighting the old code, rightclicking and selecting Paste.

3)

This little piece of code is so crucial that we're not going to change it at all. This code allows your blog text to go anywhere on your image. Without it, your blog would be pretty boring.
Wasn't that an easy step?

4)

For this code, we'll have to open up our blog in MS Paint.
Now pick out the 'Square Select' tool and wave it around your blog a bit. Don't draw anything, just put it over the image.

If you look in the corner while you're fiddling with the 'Square Select' tool, you should see a set of numbers in the bottom right number. We're going to use those to position our blog (no matter how much I hate them).

Now find the Print Screen button on your computer. It should be next to F12 and Pause Break. Take the 'Square Select' tool and draw up the space you want as your textbox space, but don't let go of the mouse button. Now look to the corner. You should see there are now two sets of numbers. Finally, make sure your positioning is right, and press Print Screen!


Drag this picture to your address bar/a new tab for a better preview

Now press CTRL+V (or right click and select Paste) onto a new Paint program to keep those precious numbers safe. A picture of the screen at the time you pressed print screen should open up

The first set of numbers is the numbers we put in margin-left:number; margin-right:number;. So in this case it would be margin-left:21; margin right:27;
The second set of numbers is the ones we put in width:number;height:number;. In this case, it would be width:157;height:247;

This code makes sure that if your content goes over the height of your text box space, a scroll bar automatically appears so you can see all your text! We're not going to change this one either.

For this code, it determines which way your text aligns to (left, right, center). If you want to change it to something else, just enter left, right or center where I've put left. For example, if you want your text to line up to the right, your code would be text-align:right;

This part is pretty straight forward. Choose whatever font you want after font-family and type it where I put georgia. You can choose verdana, tahoma, the list goes on and on.
And.. put the size you want your font to be after font-size:
For the font colour, HTML can recognise a few basics that don't need a code but just the word (like blue, white, black). Although for other shades you need a hexidecimal colour code, which you can either find here, here, here, here or just search them up on a search engine.
So for example, if my font was verdana, size was 14, colour was a hex code of #123456 then my coding for this would be font-family: verdana; font-size: 4px; color:#123456;

Sadly this scrollbar colour code only shows up in Internet Explorer, so I don't bother with this. Just fiddle with the colours a bit to get a nice shade, if you really want to make a spiffy scrollbar!

All of this space is here just for YOU, to put all your wonderful text in.

And finally... You've completed coding your blog. Congratulations on making it so far!

A sidenote...
If you want to put two or more textboxes on one blog image, copy the code and paste it after the code you've already done. Then delete the first section of the copied code and delete a div, like this:

You can make as many areas you want to able to type in as you want this way.

awards

Once upon a time, this blog tutorial was seperate from Spark, so here are the awards it got during that small time.

I'm listed at Faboo Links!

Thankyou good_kalkatak for this awesome award!



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