So you wanna learn how to make your very own bebo skins, well you’ve come to the right place there is no great secret to doing this and can be done really easilly by putting in a bit of effort into it and also some knowlege of Adobe Photoshop does help or any other good photo editing software of your choice.

You will need to have some form of picture editing software once you have that installed you are ready to go although i wont be showing you how to use it that part is up to you. In this tutorial i will be using the ipod skin as an example you can have a look at it by clicking HERE. Ok then we are set to go.

All files need to be saved as .GIF or .JPG because thats all bebo allow and also .JPG files allow high qaulity at low file size unlike .BMP. you will need to make a total of 7 images for your skin these should be named the following:

* nav_bg (10KB)
* main_bg (40KB)
* main_icon (1KB)
* main_footer (1KB)
* module_header (10KB)
* module_bg (10KB)
* module_line (1KB)

Nav_bg
Maximum file size of this is 10KB anything over this will not upload to bebo. The dimensions for this are 760×40 and it needs to be exact as they all do. This is the very top part of the skin where the links to the other parts of your page are ie: All, White Board, Photo’s, Blog, etc. as see below
Nav_bg
Nav_bg

Main_bg
Maximum files size of this is 40KB anything over this will not upload to bebo. The dimensions for this are 760×375 and as i stated above this needs to be exact, they all do. This is the Main section of the skin and is often above the main text on your page so the bottom of it should fade into one color the same as the back ground i will explain later on how you can rise the image above your profile text.
Main_bg
Main_bg

Main_icon
Maximum file size for this is 1KB anything over this will not upload to bebo. The dimensions for this are 20×20. This is the little icon that is displayed under your profile picture just infront of the links. The background for this should be the same color as the background of the page so it blends in perfectly.
Main_icon
Main_icon

Main_footer
Maximum file size for this is 1KB anything over this will not upload to bebo. This is used at the very bottom of the page and in this case i made it fade from black(background color) to white for the simple reason that the the top of the bebo page will fade into the white gap between the top and bottom half. the dimensions of this are 11×15 this images is repeated across the bottom of the main section of the top of the page and forms on long fade check the skin example if you would like to see this by clicking HERE.
Main_footer
Main_footer

Module_header
Maximum file size for this is 10KB anything over this will not upload to bebo. This is used in several places on the skin its is used above the top of the white board, Playlist, friends, bands, flash box, photos, widgets, comments, quizzes, polls & blogs and what ever bebo might add in the future this will be the top of all them boxes(there called module boxes). The dimensions for this are 375×44. This should also fade into the background color but it is not as important as doing it to the main_bg.
Module_header
Module_header

Module_bg
Maximum file size for this is 10KB anything over this will not upload to bebo. This is used in several places on the skin its is used at the bottom of the white board, Playlist, friends, bands, flash box, photos, widgets, comments, quizzes, polls & blogs and what ever bebo might add in the future this will be the bottom of all them boxes. with this you should make the top of it fade to the background color cause it will be attached to the bottom so the module boxes will hit the top of it first not the bottom. The dimensions for this are 375×50.
Module_bg
Module_bg

Module_line
Maximum file size for this is 1KB anything over this will not upload to bebo. This is used to split comments and drawings on the white board and other stuff. it is also i repeated image like the main_footer. The dimensions are 32×3.
Module_line
Module_line

Now that you know about what images are needed you are almost ready to begin making your skin but there is still one thing left and this is the most important part of making your own skin:

Stylesheet
The stylesheet is used for editing the layout and colors of the skin text and background of the page it is the most important piece of the skin if its not done correctly then the skin will look quite shite basically. there is a example of what the stylesheet looks like below and as you can see all the boxes need to be filled in with numbers or letters this is called HEX most of you dont know what it is so simply click on “pick” next to the box and choose a color you want. the 1st box is what color the text will be in the selected tab(link at the top of the page) most of the time this is set to black(#000000) the second box is for the rest of them its up to you to decide what color you want to use. The 3rd box is what color you want your name to be in and the 4th is what color you want the text that says blogs and photos to be again its upto you just make sure its readable and you dont need to squint your eyes to see it. now the next box is box number 5 this is used to raise the main_bg above the profile instead of having it behind it most of the time you will have this set to 370 if you want the main_bg raised and 5 if you dont. next is the background color this should be the same as the bottom of the main_bg so that it blends with the image. the 7th box is the text color for the me, myself and I part of the page(about me and where your music and movies is) this should be readable ie dont use a whte background with the following color text—>¦Having trouble reading me¦ <—- im sure you couldnt read that easially so make sure you choose the colors carefully. the 8th box is to change the colors of the links on your page there is no need to change them unless you really want to, leaving this box as # will make the links default blue. the next section is for the module boxes(comments, photo’s, friends, etc.) Box 1 in there is for the color of the title and should be the same color as the 4th box up the top so copy the hex out of that and paste it into the 1st box of the bottom section. the next 2 boxes are for moving the text left and right and up and down on the module_header image in this skin i havent moved it so it should be 22 and 15 but this is the linkin park stylesheet im using. next box is the font size this is how big or small you want the writing on the page to be i would say leave it at 14 it looks good that way but its up to you the next box again is the hyperlink color and again same as the 8th box do you what you want with it. next box is padding bottom and this is perfectly fine at 40 all it does is allows you to control how much space is at the bottom of every module box. and last of all the background color this should blend with the module_header and module_bg and then click save and thats the stylesheet edited.
Stylesheet
Stylesheet

Your almost finished now you just need to leave how to upload your skin you can do this is 7 simple steps these are

* Go to your bebo home page and click on Change Skin
* Then up the top of that page in the middle click on Roll Your Own
* Once in there click on Add A New Skin and click on save
* Now find the skin record you just created and click on upload graphics
* Then you will see a srceen like this:

Upload

how to upload a bebo skin

* There you need to click on browse next to the first box and upload the image its asking for on the left in this case its looking for the nav_bg and you do the same for all 7 boxes then click on upload and wait for it to upload Note: only click upload once then just wait.
* Next you need to edit the stylesheet as a showed you earlier once thats done you can click on use this skin and you decide if you want to allow everyone to use it or just yourself remember if you allow everyone to use it then you can never again make any changes to it and you cannot delete it from the Roll Your Own section of your page

Bebo has found the following tools for photo editing i dont know if they are any good or not

* The GIMP – a free graphics tool – Windows | Mac
* Photoshop Elements – graphics tool ($80US) – Purchase info
* SnipShot – a free web-based tool – Go to Snipshot.com

You can also submit your skins to the bebo staff for inclusion into the skin charts however they do not accept any copyrighted images so if you do submit a skin make sure its 100% your own work otherwise your only wasting your time and bebo’s

Please do not copy this tutorial from this site is it copyright of The Dumber Man. Users are not permitted to copy it, instead you may include a link to this page on your website

© The Dumber Man 2007