Wednesday, April 16, 2008

Our Own Bebo Skin Designs

So one of our top ten skin designers is (surprise!) the very own Bebostation! Here are our favorite designs. You can only find them on Bebostation.com, the place for Bebo Skins!

Great Black and White Checkered Skin, this is the original in our classic checkered skin series.


As you can see, we've gotten creative with this look:



Close to the same theme, here we have a DC Brand Bebo Skin. Note: You can't find brand names/logos on bebo.com's selection of layouts, you can only get them at Bebostation.com!


And they're not all checkered (it's just sort of our thing). Here's an example of a great surfing bebo skin, hitting the waves is one of our favorite things to do.


Make sure to check out all of the bebo skinz we've designed. And, remember, we're not the only ones, we've got tons of skinners, so find your favorite and check out their collection!

Bebostation.com, Bebo Skins Galore!

At Bebostation.com we pride ourselves on having the best quality AND quantity of Bebo Skins available on the internet. As Bebo.com grows in popularity, our collection of Bebo Skinz can only do so as well. We have a unique style; as well as being excellent designers of bebo layouts ourselves, we are an open platform for anyone and everyone to become a skinner! This week I will feature some of our very own bebo skin designs, along with a tutorial on what I believe to be the best software for creating skins for bebo; Adobe Photoshop. Check out how to make bebo skins to get started:


New Skin

  • Open Photoshop
  • Click “File”
  • Click “New”

“New” box appears and can be filled inYou can change the Width and Height depending on what you want to draw first.
Were starting with the Navigation Bar(760×40)

Check this cool table 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.Get drawing and be creative!!
Just leave some space so you can see the navigation tabs at the top.

Saving

When you’re finally done 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 “Save for Web”


A new box appears1: 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)


Check out another cool table!


Once the file size is ok click “Save”.A new box appears.
Depending on what you were making you must save it with it’s right name.


E.g. So if it was the top Navigation Bar save it as “nav_bg.jpg”

I’d save all your skin files in the save folder. Don’t want any to go missing!!


So just stick to the requirements of the table your graphic

Uploading

Once you have all your files ready you can upload them to Bebo!

Sign in to your Bebo.com account (sign up here) 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”!!! happy days :)

The Others

For a detailed spec on the different parts of the skin Click Here!

Each part is different so read up on there requirements :)


Edit Stylesheet

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.
Just play around with it.


This makes the picture rise up above your profile picture.

Now make sure to go submit your bebo skins to be a skinner!

This tutorial is compliments of Bebo.com!