Help with How to Make Bebo Skins
So you ask the question:
HOW DO YOU MAKE A BEBO SKIN???
Designing a Bebo skin is a lot different and a little more difficult than designing a MySpace Layout although there is software out there that allows you to make your own MySpace layout.
The main difference is a MySpace layout in its simplest form can be made using only ONE image. A bebo skin however MUST comprise of Seven modules.
Here are step-by-step instructions to making bebo skins using three different design programs. Also see our Tutorials page to see videos on the topic.
How to Make Bebo Skins Using Photoshop
This is our personal favorite software for creating bebo skins.
New Skin
* Open Photoshop * Click “File” * Click “New”“New” box appears and can be filled in
You can change the Width and Height depending on what you want to draw first.
Check the table below for pixel values
Editing
Click the Brush icon to start drawing
Click the down arrow beside the top brush icon.
You can change the brush and its size.
Just leave some space so you can see the navigation tabs at the top.
Saving:
Bebo has a file size limit on the images so you can compress the file this way
A new box appears
1: File Type
* JPEG Mostly use “JPEG” as this allows for more colours and smoothness * GIF This has fewer colours but allows for Animation.2: Quality of the image(how smooth it looks)
* This is how you can fit your file size under the maximum limit. Move the quality bar up or down so that the KB on the bottom left hand side is under the allowed limit.(E.g. 10KB for Navigation Bar)Once the file size is determined click “Save”.
A new box appears.
Save each module using the name of the module (for example, when creating the Navigation Header, save as “nav_bg.jpg”)
Uploading: Once you have all your files ready you can upload them by logging into bebo and:
* Click “Change skins” on you profile * Then click “roll your own” in the next tab * Click “add new skin” * give it a name and a few tags * then browse for all your skin files * Click “Upload”How to Make Bebo Skins Using Microsoft Paint
1. To start with you need to open paint. Go to Start>All Programs>Accessories>Paint.
2. Set the sizes for your skin. Go to the top menu bar and then Image>Attributes. You will then get a window up in the middle of the page
3. Select Pixels in the units box. You’ll need to input all the sizes for your skin. You can only do this individually, you will have to repeat this step for each module. The dimensions for each module are below. Once you have set the first dimensions (I usually start with the main background) you can begin work on your skin.
Image Width x Height (pixels)
Navigation Background 760 × 40
Main Background 760 × 375
Main Footer 11 × 15
Main Icon 20 × 20
Module Header 375 × 44
Module Footer 375 × 50
Module Line 32 × 3
4. Decide what you want your skin to look like and go for it. This requires a little basic knowledge of Paint, but it’s a pretty basic program.
5. Save your image in a JPG format in order for it to work on the internet. You need to go to File>Save As. There should be two options available. One is for the file name, the other for the file format. In the file format box, you need to select JPG and the click save. Now you can go to File>New and can make your navigation background and so on. Repeat steps 2-5 until all seven graphics are complete.
6. Publish your skin on Bebo. Login to Bebo, go onto your profile and select Change Skin>Roll Your Own>Add A New Skin. Give your skin a name and some tags and click Save. You will then be taken back to the Roll Your Own page. You now need to scroll down until you reach a grey table.
7. Once you can see your skin name, click on Upload Graphics. Upload all your graphics and click back.
8. Click Edit Stylesheet on the Roll Your Own page. The next step is to enter all the text colours for your skin and the padding (how far up, down, left or right an image is). All of this is done through HTML colours (code for different colours and shadings). If you click on pick, you can choose different colours by colour and the code will be entered for you.
9. Click Save and then Preview. You can repeat 8. and make any changes you’d like at this point.
10. When you’ve got it just right, click Use This Skin on the Roll Your Own page. Once you have clicked Use This Skin, you cannot go back and change the stylesheet or graphics, so make sure you like it BEFORE you finalize your skins.
11. Now submit your Bebo Skins to be hosted on bebostation.com so more people can find them!
How to Make Bebo Skins Using Adobe Fireworks
This tutorial is for making a skin using Fireworks, another great design program.
* Open Fireworks * Click “Fireworks File” (See image below for details)“New” box appears and can be filled in
You can change the Width and Height depending on what you want to draw first (see the table below for the sizes of each module).
Click the Brush icon to start drawing
Once you have selected the brush tool, if you look at the bottom you will find the properties where you can change the texture of your brush.
Get drawing and be creative!!
Just leave some space so you can see the navigation tabs at the top.
When you’re finished all you have to do is save it!
Bebo has a file size limit on the images so you can compress the file this way
* Click “File” * Click “Image Preview…”A new box appears
1: File Type
* JPEG Mostly use “JPEG” as this allows for more colours and smoothness * GIF This has fewer colours but allows for Animation.2: Quality of the image (how smooth it looks)
* This is how you can fit your file size under the maximum limit. Move the quality bar up or down so that the KB at the top is under the allowed limit.(E.g. 10KB for Navigation Bar)Once the file size is ok click “Export…” at the bottom.
A new box appears.
Save each module you design with the name of the module (example, for the top Navigation Bar save it as “nav_bg.jpg”)
Uploading
Once you have all your files ready you can Tag them and Upload them to bebo.com. To do so, log into bebo, and:
* Click “Change skins” on you profile * Then click “roll your own” in the next tab * Click “add new skin” * give it a name and a few tags * then browse for all your skin files * Click “Upload”Then make sure you submit it here to be displayed on our site!
TIP: Making a skin with that huge picture above profile pics?
Make your “main_bg” the big picture that you want
Once you’ve uploaded your skin click “Edit Stylesheet”
and in “Main Section” increase the “Padding Top” to around 375.
This makes the picture rise up above your profile picture. You can adjust the number to make the header picture the size you want.
File Sizes for Bebo Skin Modules
Module (Width X Height) in pixels
Navigation Background (760×40)
Main Background (760×375)
Main Footer (11×15)
Main Icon (20×20)
Module Header (375×44)
Module Background (375×50)
Module Line (32×3)
How to Post Pictures as Comments on Bebo
If you want put a picture or graphic as a comment on a friend’s bebo profile, first choose the comment graphics you want to use and save them to your photo album. You can create an album of just comment graphics to keep them separate from your real pictures if you like. Go to a friend’s profile, click post a comment (you can leave the text blank if you just want to send the picture) and select attach a photo from your albums. Choose the image you want to leave as a comment, and save your comment! Voila!
