8start Launcher
Home
Features
Help
Download
Skins
Donate
8start
Forum
Wallpapers
Useful Tips
Best Freeware
 
 
 
 

Skin

 
   
Tutorial: Making 8start Skin
 
 

Skin jpg/png files

I use GIMP to do the 8start skin, it is a freeware and you can see some introduce of it in my best freeware section. However, photoshop is the most popular graphic editing tools, you can use it or others graphic tools which you familiar to create 8start skin as well.

Files
Compulsory
Optional
Explaination
topleft.jpg/png
topright.jpg/png
bottomleft.jpg/png
bottomright.jpg/png
compulsory
The four corner of 8start Launcher is presented by those '4 corner skin files'
topa.jpg/png
bottoma.jpg/png
lefta.jpg/png
righta.jpg/png
compulsory
Border skin files. When you resize 8start Launcher, the expanded border will be filled by those files. Please note that 8start Launcher will tile the border automatically if those files is not long enough to cover all the expanded area, so you don't need to create a very long border skin file

The width of the border is control by the width of lefta.jpg/png and righta.jpg/png and by the height of topa.jpg/png and bottom.jpg/png, it will overwrite the width and height of the 4 corner skin
bottom.jpg/png
compulsory
Is a very important file, it will be presented at the bottom center side of 8start Launcher. The Hide and Menu button have to be included in this file. Please note that 8start.com logo will be showed automatically by 8start Launcher, so you don't need to include it in this file
top.jpg/png
left.jpg/png
right.jpg/png
optional
Center skin files, will be showed at the center of border if exist
topb.jpg/png
leftb.jpg/png
bottomb.jpg/png
rightb.jpg/png
optional
Second part skin files, will be showed at the border second part if exist
group.jpg/png
compulsory
use for drawing group background
category.jpg/png
compulsory
use for drawing category background
categoryactive.jpg/png
optional
use for drawing active cateogry background, please note that height of categoryactive.jpg/png and category.jpg/png must be same. If the height is different, height of category.jpg/png will be used to draw categoryactive.jpg/png
back.jpg/png
compulsory
use for drawing background of 8start Launcher. You can use your photo or any nice picture as the background of 8start Launcher by replace the back.png with your picture files.
Tip: Advise to use the picture not so colorful, so your button won't become difficult to see
Please note that if both back.jpg and back.png is existing in the skin folder, back.png will be used to draw background. If you want to use your photo back.jpg, after created it, remember to delete back.png.
You can customize the apperance of your picture by modify the value of 'background drawmode' and 'background alignment'.
buttonsmall.jpg/png
optional
must be size of 356x16 pixel, use for drawing background of the button which is height with 0.5 (16 pixel) height
buttonbig.jpg/png
optional
must be size of 356x32 pixel, use for drawing background of the button which is height with 1 (32 pixel) height
screenshot.jpg
optional
Display in preview panel (in menu>change skin dialog). The resolution of screenshot.jpg must minimum 400 x 400 pixel, with square size

 

Skin.ini

Use the skin.ini to change the color of text/bar and location of hide, menu and 8start.com button. Please note that the color code is RGB color code. The position of buttons is measured in unit pixel as the relative position in bottom.jpg/png.

Started with 8start Launcher 1.5, most of the value in skin.ini e.g. font color, font name, font size, alignment... can be configured directly by menu > change skin > configure skin dialog, so I am not explain it in detail.

background drawmethod - define the way to draw back.jpg/png

Value
Explaination
tile
(default) like how windows draw wallpaper with the option 'tile'
stretch
like how windows draw wallpaper with the option 'stretch'
stretch proportional
useful if you want the background to be drawed follow the same ratio as original. (for example, you like to use your photo as the background, you don't want you become thin or fat by using stretch option). Please note that some area of back.jpg/png will be transcated in order to fix in 8start with proportional drawing.
original size
the back.jpg/png will maintain as original size. (like how windows draw wallpaper with the option 'center'. 8start launcher provide more option and not just limited to 'center')


background alignment - define which area of back.jpg/png will be used for drawing the background (this value will be used only if drawmethod=stretch proportional or original size)

Value Explaination
1
top left
2
top center
3
top right
4
middle left
5
(default) center
6
middle right
7
bottom left
8
bottom center
9
bottom right


[Tree]
Setting color of Tree, in RRGGBB format e.g. red color is FF0000
Example can be refer to 8start Block Notes 1.6 skin

background color To set Tree Background Color
label color To set Tree Inactive Label Color
highlight color To set Tree Active Label Background Color
highlight label color To set Tree Active Label Color


8start logo design - You can change the 8start.com logo in skin.ini by changing the value "8start logo design".

Value
Logo
Size (width x height)
1
32x27
2
62x10
3
70x13
4
75x20
5
90x21
6
28x14
7
28x14
8
51x13
9
51x13
10
51x13
11
51x13


Optional


Do you notice the choices of optional located at the bottom left side of Change Skin dialog? Yes, you can create optional by creating sub folder in your skin folder

replace your skin files with the files in sub folder
when user click the optional in change skin window, the files in the sub folder will be copied to the skin folder. (exclude files named "change skin.ini", "delete xxx.jpg.txt" )

delete .jpg/png file in skin folder (delete xxx.jpg.txt / delete xxx.png.txt)
If you want have a choice to delete some optional skin files, just add a empty txt file and name it like "delete right.jpg"

change value in skin.ini
To create the option to change the value in skin.ini, create file "change skin.ini" in the skin sub folder, all the value defined in the "change skin.ini" will update the skin.ini when user select it.

[Hidden] xxxxx sub folder
All sub folder with the name prefix of [Hidden] will not be shown in the change skin optional windows, this feature let your working folder invisible or let you hide some unwanted optional skin.

It is recommended create a sub folder to backup the original skin, so user can have the option restore to the original skin.

Sharing With The World

Dont' forgot to share your skin by submit it to www.skinbase.org and forward a copy to 8start@gmail.com. (skinbase.org update the skin in their website normally within few hours after you submit it, and you can see the comments/rating of your skin through their website)

Thanks and hope you enjoy the skining experience....

 
 

 

 

   
Google
 
Web 8start.com