Adobe Photoshop CS3 is the industry standard graphics editing program, and is often used in graphic design, proffesional image editing, even web design, hence making it a great tool to make Bebo skins. Though there are many other programs like it out there, like Adobe Fireworks, Corel Paint Shop Pro, Photoshop CS3 is the top image/graphics program.

Now for this tutorial, we are using Photoshop CS3, however if you use Photoshop 5 or beyond, that’s all you need to make Bebo skins with this.

To start making a new skin, Open Photoshop, Click File>New:

A dialog box should appear, like the one below.

In the dialog box, you set the width and height of what you want to work on.
Here are the values for each part of a skin.

Navigation Bar: 760 x 40
Main Background: 760 x 375
Main Icon: 20 x 20
Main Footer: 11 x 15
Module Header: 375 x 44
Module Background: 375 x 50
Module Line: 32 x 3

In this tutorial, we’ll be looking at Iain MacMillan’s “Bebo – Blog Early, Blog Often Bebo Skin”, mostly the main background image.

Now we’ll show some of the things you have in photoshop’s layout. (note: this is the CS3 layout.)

The Toolbar, containing lots of funs intstruments for you to play with

The Navigator, useful for zooming in and out, and looking at different parts of an image.

The Swatches Colour Box, contains preset colours to use, you can also create your own.

The Layers Pallete, useful for laying out and design.

The History Pallete, very good to go back on the mistakes you made.

The Brushes Pallete, if you want to edit your brush and give it effect.

You can use whatever you may wish on the image itself, like paintbrush, gradients, or even photos, on your image. here Iain’s used a lot of things, like images, gradients, layer effects and the like.

In this skin, Iain has used an image of trees, and blurred it using Gaussian blur, which can be found Filter>Blur>Gaussian Blur.

He then used a color balance adjustment layer on the image, to give it a different color, by clicking Layer>New Adjustment Layer>Color Balance.

He then clicked a check box to create a clipping mask, so it only adjusts the colours in that layer.

To get the strokes going across the page, Iain used the Ellipse marquee tool on a new layer, which can be found if you hold down the mouse button over the Rectangular Marquee tool, and select the Ellipse Marquee tool. Then stroked along the edge of the Marquee (1), then changed the blend mode to Overlay (2), this can be found on the layers pallete, and then right clicked the the marquee selection with the Marquee tool, then clicked “Free Transform” to turn the ellipse in the position he wanted (3).

Iain did this many times over, in different positions and sizes, to create this effect.

For the name bar, Iain made a new layer, selected the Rectangular Marquee tool and made a rectangle across the canvas around the size of the writing on the name of a person’s Bebo page, coloured it white, changed the blend mode to overlay, and reduced the opacity to around 44% (the opacity slider can be found on the layers pallete). Iain did this many times over, in different positions and sizes, to create this effect.

Text is pretty simple in Photoshop, and you can edit it to your own accord: The font used here is neuropol (if you don’t have it, you can get it at dafont.com) and when you start using text, Photoshop will automatically make a new layer for you. Notice that there should be a Characters pallete under the Brushes Pallete so you can edit the letter sizes, spacing, height, the lot.

Text is important, and we’re not talking about skins with just text and nothing else here! When you’re making your navigation bar, you should write “Click here” on around the area where the link usually is on the Navigation Bar – around the bottom right. People would then click that link and add more views to your page!

Also write your name in small writing in order to show that you made the skin, and it wouldn’t clog up the skin. Name is also important in case someone steals your skin, so it’s obvious you made it.

Notice also Iain has used the Bebo logo on the skin, Iain simply got the graphic from the internet, and got rid of the pixels around the logo so it’s only the pixels of the logo that show up. This was simply done by selecting the Magic Wand Tool, clicking on an area outside the logo, and pressing “Delete”

Then inversed the selection (so it selects the logo pixels) and then clicked Edit>Copy. Then Iain placed it into the skin by selecting that document, clicking Edit>Paste.

At this point, we would like to add that this is just to give an idea what you can do in photoshop, but please, be original, as there are many many things you can do with it.

Be aware though, the image itself must be at around the file size limit Bebo allows.

Once you’re fiished with your image, click File>Save For Web.

The following Dialog Box should appear

Here are the allowed File sizes.

Navigation Background: 10KB
Main Background: 40KB
Main Icon: 1KB
Main Footer: 1KB
Module Header: 10KB
Module Background: 10KB
Module Line: 1 KB

To compress the image, you should notice a few things.
1)On the right of the dialog box, you should notice a compression dialog.

Use the slider to lower the compression of the image to its desired file size, and use the file type box to save as either JPEG or GIF.
EXAMPLE: If it hasn’t got any gradients, is a drawing, or has less than 256 colors it should be saved as a GIF.
However, if it’s got lots of tones, is a photo, or lots of colours, it should be saved as a JPEG.
This image has lots of colours and tones in it, so it should be saved as a JPEG.

2)Keep an eye on the file size on the bottom left hand corner as you’re compressing.

This will show you how big your file sizes are. It is a good idea to keep it as close to the desired file size as possible, as it will help maintain the quality of your image.

Once you are finished with your image, click OK and another dialog box will appear.

To keep a track of your skins, we suggest you make a new folder titled “Bebo Skins”, so they’re not all over the place.

This image is the main background image, so we should save it as “main_bg.jpg”

For more details on a skin, here’s the Bebo Skins Tutorial.

Then we do the same things for the other parts of the skin, and then upload them onto Bebo!

Experiment with Photoshop, and have fun.

Useful links
If you run a website with any usefull services you feel would be valuable to the Bebo and Dumber Man community then click here to contact us with details.

This tutorial is copyright of The Dumber Man and the tutorial creator Iain McMillan. You are not permitted to copy it, instead you may link to it on your own site/blog.