How to make a Bebo skin with MS Paint

How To Make A Bebo Skin - Beginners Tutorial using MS Paint

Ok, you're obviously new to making Bebo skins, otherwise you wouldn't be here. I always advise people to start making their Bebo skins in MS Paint (Microsoft Paint) first, as that will help them get their head around the process of making the skin. If you didn'talready know, MS Paint is free and comes with all Windows systems. So if you see Windows when starting up your PC, it is likelythat you already have MS Paint on your computer. If you don't know where it is, don't worry... I'll guide you through the entire process of making a Bebo skin, from opening MS Paint to putting the final touches on your skin. After doing this tutorial on how to make a Bebo skin in Paint, you should have a pretty good idea how to keep making them. Lets start shall we?

Where to go in order to make a Bebo skin

Under your Bebo profile picture, there are a number of links. One is called "Edit Profile" etc. Go to the link called "Change skins." You should now be on the page where you can pick new Bebo skins. Don't pick one though, because that's not what we're here for. Have a look at the top of the page and you should see a link called "Roll Your Own." Click on that. You should now be brought to a new page that gives you three options. Click on option number three, which is called "Add a new skin." Call the skin whatever you want to and then enter a few words that describe it. After creating the skin, you should still be on the same page. Look below, you should see a blank skin with the name that you chose a few seconds ago. This is your skin. It just hasn't been designed yet. Go to option two on the skin, which is called "upload graphics." You will now be brought to a new page called Skin Upload. This is where you upload the pictures that are used in the Bebo skin.

As you can see, there are seven upload boxes. Each box allows you to upload a specific part of the skin. Each image has to be a certain width and height, and it must be under a certain size. For example, the main_bg image, which is basically the main picture that you see on the skin, has to be 760 pixels wide and 375 pixels in height. It must also be under 40 K (or 40 KB). Lets start making these images.

Creating the images for your Bebo skin in MS Paint

Okay, its time to open up Microsoft Paint. To open Microsoft Paint, click on Start on the bottom left corner of your computer, go to Programs, then go to Accessories, and then click on Paint. Paint should now open up. Before we even touch anything, we are going to make things easier on ourselves. We are going to create a folder on our desktop called "Bebo Skins." We will put all of the images we made for our skin here so that we don't lose any of them.

Creating the first image for your Bebo skin with MS Paint

The first image that we need to create is called nav_bg. It has to be 760 pixels wide, 40 pixels in height and must be under 10 KB in size. First, lets get the width and height right. On Microsoft Paint, there are a number of buttons at the very top. Go to the button called Image and click on it. Now even more buttons have appeared. Find the button called Attributes and click on it.

A new box will pop up that will look like the one below:

Make sure that you have 760 typed into the width box and 40 typed into the height box. Also make sure that Pixels and Colors have been selected. (Make sure everything is as it is in the pic above). Now press ok. As you can see, the image on Paint has changed its shape. Lets keep things simple for our first try. This is the nav_bg. It is the image that shows up at the very top of your skin.

The part highlighted in red is the nav_bg image. As you can see, links such as "All" and "Video" will be placed on it so we need to keep the background plain and simple, otherwise people might find it hard to view those links. Ok, now go back to MS Paint. Look at the icons to the left and pick the one that looks like a bucket. After clicking on the bucket icon, pick a colour from the colour box. Then, bring the mouse over to the white blank image and click on it. The image should now fill up with the colour that you had chosen. Now go to the button called File at the top left hand corner of MS Paint and pick Save As. Remember to save the file as nav_bg (otherwise you might forget what image it is) and also remember to save it into your Bebo Skins folder that you created earlier. Now its time to move on and do the next part of the skin.

Creating the main image for your Bebo Skin

As you might have guessed, the main image is called main_bg. The main_bg image is the part of the Bebo skin that shows up behind your profile picture or above it (depending on the padding you use later - but dont worry about that just yet). It has to be 760 pixels in width and 375 pixels in height. So... go back to Paint, go to File, and then click on New. Now we need to change the size of the image once again. So do what you did the last time and click on Image at the very top, and then Attributes. (Or just hold CTRL & E together).

After clicking on Attributes, the box that showed up earlier when we made the other image should appear. The main_bg image has to be 760 pixels in width and 375 pixels in height. So you'll have to type 760 into the width box, and 375 into the height box. Also, make sure that pixels are selected and that colours are selected.

As you can see, your box should look like this. When the right width and height has been entered and everything looks ok, press OK. Your image should look a lot bigger now. Now its time to make the main background image for your Bebo skin. Firstly, click on the bucket tool again (usually to your left) and pick the same colour that you picked before (unless you want different colours.) Fill in the whitespace with the bucket tool and then click on the letter A that is below the icon of the little bucket. The A stands for text. You can use this tool to write words on your images. After clicking the A icon, go to your image and click and drag it across any part of the skin image. You can mess around with this for a while until you write what you want to write. Just make sure that you keep it really simple. Only use one or two words or so. Once you're happy with that, click on File at the very top left corner and click on Save As. Save the image as main_bg and make sure that you save it into your Bebo skins folder that you created earlier. Now you should have two parts of your Bebo skin done! Congratulations!

Making the rest of the images for your Bebo skin

By now, you should have a pretty good idea how to make the width and height of an image in MS Paint (Remember, click on Image and then Attributes). If you remember, the the upload page shows you what each image has to be called, what width and height it has to be and what KB in size it must be under. Here are all the images that you need to create for your Bebo skin.

nav_bg 760 x 40 (we've already created this).

main_bg 760 x 375 (we've already created this).

main_icon 20 x 20

main_footer 11 x 15

module_header 375 x 44

module_bg 375 x 45

module_line 32 x 3

As you can see, each image has a width and height requirement. The first number is always the width and the second number is always the height. So, for example, the module_line image has 32 x 3 written beside it. This means that it has to be 32 pixels in width and 3 pixels in height. Just remember width x height. Now, you're probably what part of the Bebo skin each image makes up. But don't worry.

Making the main_icon image of your Bebo skin

This is 20 x 20, which means that it is 20 pixels in width and 20 pixels in height. (A square). The part of the skin that it makes up is shown below:

The part highlighted in red is where the main_icon part of your skin will be placed once you upload it. As you can see, the skin above didn't really make an icon. The person just coloured in the main_icon image with the same colour as his background, which means that people don't realise that there is actually a little black image there that is 20 pixels in width and 20 pixels in height. When making your skin in paint, you should probably do the same. Just colour it in as the same colour as your main_bg image. Remember, you must make the main_icon image 20 pixels in width and 20 pixels in height (20 x 20) by clicking on Image, then Attributes and then entering it into the boxes. Save the image as main_icon and save it into your Bebo Skins folder.

Making the main_footer image of your Bebo skin

As you might have noticed with some Bebo skins, a line is shown at the end of the main block of their skin (the main block is the area where you write about yourself). Here is an image that shows you the part of the Bebo skin that main_footer makes up, highlighted in red:

As you can see, the person who made the skin above didn't really make a line. They just filled it in black and added a little bit of a shine at the end. With MS Paint, you wont be able to do that. So start another new image, make it 11 pixels in width and 15 pixels in height(11 x 15). Now, you may be wondering why the image looks so small. You were probably expecting a longer image that stretches across the screen. Well, when you make the main_footer image and upload it, it is placed in the part highlighted in red above. It is then repeated until it covers the whole length. This means that the part highlighted in red is not one image on its own, it is the same image repeated side by side until it fills up the required width. When making this image for your Bebo skin, you should probably just fill it in with the same colour as your background and then make a little line across the middle of it or something. i.e. Don't go overboard with it. Remember to save this part of your Bebo skin as main_footer and save it in your Bebo skins folder.

Making the module_header image of your Bebo skin

As you probably already know, modules are what hold your bands, friends list and quizzes etc. For example, the friend module is a module that is shown on your Bebo profile. It shows all of your friends. The band module holds your bands, etc. As you may have noticed, some Bebo skins have pictures at the top of their modules, and some dont. If you look at the picture above, you will see the top of the Friends module and the My Music module (My Music is just an app). The module_header is the image that is shown at the top of the module. As you can see, the skin above (pic above) doesn't have a picture. The person just added a little shine at the top of his module_header. You only have to make one module_header as this is given to all modules on your page. You should keep the left hand side of the module_header blank, as you don't want to make the text harder to read. Imagine the creator of the above Bebo skin had added text to the left? You wouldn't be able to see the text "Friends" or the text "My Music." This is why you should only put text etc at the right of the image. The module_header needs 375 pixels in width and 44 pixels in height. (Remember, go to Image, then Attributes and fill in the boxes.) Save the image as module_header and put it into your Bebo Skins folder.

Now you're nearly there. Next is the module_bg, which has to be 375 x 45 (375 pixels in width and 45 pixels in height).

Making the module_bg image of your Bebo skin

Firstly, I don't know why Bebo decided to call this image the module_bg as it really isn't placed in the background of the module. Instead, it is placed at the bottom of the module. It should have been called module_bottom or something along those lines. I think everyone gets confused by that when they first start making Bebo skins. So, just keep in mind that the module_bg is actually placed at the bottom of the module, and not in the background. Yet again, this part of the skin has to be 375 pixels in width and 45 pixels in height. Make it very simple. This is only your first skin you know! Write your name in it or something. Save it as module_bg in your Bebo Skins folder. Now, we've only one more image to make. It is called the module_line.

Making the module_line image of your Bebo skin

The module_line is a line that separates the content inside a module. For example, if you look at your own Bebo profile, and look at the comments section, you will realise that each comment is separated by a thin line. That is the module_line. The module line has to be 32 pixels wide and 3 pixels high. (32 x 3). Make this line a different colour from what the rest of your skin is. That way, it will stand out. Save the image as module_line and put it in your Bebo skins folder.

Finally, you should have seven images in your Bebo skin folder and you're ready to upload. Go to the upload page (I told you how to get there at the start of this tutorial).

Upload each image into the upload box. You should find it easy enough to find them all. They should all be named the way I asked you to name them and they should all be in your Bebo skins folder. There are a few errors that you might recieve here if things go wrong. If an error shows uptelling you that it is too big in size, it means that your image has too many colours (or you might have put a picture in it). Since you're only using MS Paint, you wont be able to control the size of the image. So you should keep all your images simple. Very simple! If an error shows up telling you that the width and height requirements are wrong, it means that you didn't use the right width and height. Make sure to double check the width and height of each image before you save it. If you did get an error, just go back to paint and remake the one that Bebo wouldn't allow you to upload. Remember to check if the width and height is right and keep it simple in order to keep the size down. If all goes right, you're nearly done!

Styling and Finishing your Bebo Skin

Go back to the Roll Your Own menu and scroll down to your skin.

Look at the options to the side of it and click on Edit StyleSheet.

What is the stylesheet?

The stylesheet is the section where you change the text colour, background colour ect. Without this section, your skin will be all over the place. The stylesheet menu will look like this:

How do I use the stylesheet for my Bebo skin?

Tab colour:

Look at the navigation image on the Bebo skin above. The link "All" is selected, and the text is black, whereas the rest of the links aren't selected, and they are white. The Tab colour part of the Bebo skin stylesheet allows you to change the colours of what the text links on the top of your skin will look like when they are selected and when they are not selected. For example, if you wanted to make the colour of "All" go blue when it is selected, you would change the colour for the selected tab by clicking on "Pick" and the changing the colour. The same goes for the unselected tab.

Pagetitle colour:

The pagetitle colour is the section of the Bebo skin stylesheet that allows you to change the colour of the persons name on the Bebo skin. It is the text that shows above your profile picture.

Main section:

The main section refers to the section where you write about yourself.

Padding top:

The padding top is how you make your main_bg image go above your profile picture. You see many skins where the main part of the skin is above the profile picture. The padding top is in pixels. You type in a number and that is how much your main_bg image gets pushed up. If you want to put the main part of your Bebo skin above your Bebo profile picture, I suggest that you type in something between 360 and 380.

Background colour:

You will now need to choose a background colour for your Bebo skin. You should pick the same colour that you used in your main_bg image.

Font colour:

If you want to change the colour of the text in your main section, you can use this option. Bare in mind that this is the text that goes beside your main profile picture. Make sure that it is different from the colour of your background, otherwise you wont be able to see it.

Hyperlink colour:

The colour of the links in the main section, which are "edit profile", "change skins," "update saying"etc can be changed here.

Modules:

In the modules section, you can change the background colour of the modules etc. Most are the same as the main section, only the style will be applied to the module section of your Bebo skin. You should really just play around with the stylesheet. Go back to the "Roll your own" and click preview to view it at anytime. When you're happy with what the final look is, you can go back to the "Roll your own" menu, scroll down to your skin, click on "Use This Skin."

Bebo then gives you three options. Pick one and you have now made your first Bebo skin. =)

If you have any questions, go to Bebo Skin Tutorials