Skin
Making Manual
Part 2: How to Make This Part
General
It is recommended that you save all your graphics in 256 colors
(8 bit).bmp format after editing everything. (This is helps
make your skin less 'heavy' on system resource since the bitmap
will have a smaller filesize and will make it load faster.
However, Oligo still supports 24 bit .bmp format.
How to save as 256 colors in:
Paint
Go to "File"->Save As->Save as type->Select
256 color bitmap. Click save.
Adobe PhotoShop (v.5.5)
Go to "Image"->Mode->Choose Perceptual and
256 colors, with no diffusion. Save as a .bmp.
Jasc PaintShop Pro (v6.0)
Go to "Colors"->Decrease color depth.->Select
256 colors(8bit) and Optimized Median Cut. Click OK. Save
as a .bmp
CorelDraw (v9.0)
Go to Bitmaps->Mode->Paletted (8bit). Go to "options"
tab, select from the dropdown combobox for Palette to be "Optimized"
Click "OK" Select the menu "File -> Export" and an "Export"
dialog box will popup Click "Export" button and then select
Bitmap Export. Change the Resolution to 96 dpi. Click OK.
NOTE: Make sure that any 'free'
graphics that you plucked out of the Web are royalty-free
or doesn't infringe on any copyrights. If you require permission
from the original creators, please do so and give due credit.
How to Make the Frame
Figure 1.0
IMPORTANT
• Width - The width of the
FRAME should be between 600 - 800 pixels.
• Height - The height of
the FRAME should be between 400 - 600 pixels.
[Recommended dimensions will be 760 x 560 (width x height)]
• Viewer - The viewer should
have a minimum width of 470 pixels.
When determining the height of the viewer you should take
into consideration that the viewer consists of: the advertisement
(for ad-supported versions), the address bar, go button, the
viewing space and the status bar.
• Transparency - Here
the color BLUE (RGB=0,0,255) is made the transparent color.
You can specify one color out of the colors of the background
to be transparent - meaning when the skin is used, this color
will be made to be 'see-through'. This color is in RGB format.
• Buttons Positioning - Buttons can only be positioned
in areas that are non-transparent. Eg. if you want to position
a button to make it look like its floating in an area that
is transparent, make sure that the area where you position
your button has a color that is not the transparent color.
Make sure that the size of the area is exactly the same size
as your button which will cover over it later.
• Resizable Side - To make some sides of your
skin resizable or stretchable, you need to make the side touch
the edge of the frame.
For instance, in Oligo Default skin, the length and two
sides highlighted in RED allows
it to be resized. See Figure 1.1.
Figure 1.1
• Non-Resizable Side - To make some sides of your
skin non-stretchable, just make sure that the side does not
touch the edge that is there is a transparent area between
the side and the edge of the bitmap. Eg. If you want to make
your skin non-stretchable altogether, make sure none of the
sides touch the edge of the bitmap.
• 3 Pixels Border - After
finishing the design of your FRAME, you need to add a border
with a width of 3 pixels all around your design.
How: Open your design in an image editor like Paintshop Pro
or PhotoShop and look for the option Canvas and add 6 pixels
to both the width and height of the image.
With reference to Figure 1.0 at
the top, the red dotted lines around the perimeter of the
FRAME is the 3 pixels border.
On the sides that you want to allow resizing, you should
fill it with a color close to the base color beside it. For
eg. We filled the border on the side that can be stretched
with a GREY color similar to the background near it.
On the sides which do not allow resizing, you should
fill it with the transparent color, in the example it is
BLUE.
How to Make Buttons
• Taking one of the buttons we used for the default skin,
we have:
Enabled Button
Figure 1.1
Disabled
Button (Optional)
You could create a button for the disabled mode. Disabled mode
is when the function of the button cannot be used. The button
is usually a grayscale version of the button. Eg.
How
to Make the Animator
You can design your own animator or use the default one.
The animator is something like the spinning globe in Internet
Explorer (It's at the top right corner). It animates when
you are actively surfing online like when your browser is
fetching a page. It shows some transfer of information through
your connection.
Step 1: Design the look of your animator. For example, the
animator in our default skin is like the one below. It shows
the first frame of the Animator. The first frame shows when
the animator is starts or stops.
Frame 1 of Animator
Step
2: Design several frames of your animator with the same width
and height of the one in step 1.
Step 3: Cut and paste them in order in a single row. Eg.
Step
4: Create a new file with the same width as the image in step
3 and 3 times the height.
Step 5: Copy and paste the row in step 3 into this new file
in step 4. Do this three times.
You should get this:
Step 6: Save this file as a .bmp (256 colors) format.
|
