Bootskin Tutorial

Published on January 13, 2006 By Cyberworld In Tutorials

How to make a Bootskin

In this tutorial you will learn how to create a bootskin step-by-step. In this example I’m using actual screenshots of the process of making a Bootskin of my own called Genesis Aftermath I.

A. Introduction:

Basic tools:

- MS Windows: Preferably Win XP is the right system to work on for Bootskin.
Microsoft Website: Link

- Bootskin: The actual program to create and apply Bootskins with ease and safety.
Bootskin Website: Link

- Photoshop CS (either full or free trial version): This is where the main work is done.
Adobe Website: Link

- WinZip: The utility to zip your Bootskins.
WinZip Website: Link

- Notepad or Object Edit or any other text editor: Used to make the little script that comes with every Bootskin. (Notepad is intergraded to Windows so you don’t need to download anything else).

The big picture:

To create a Bootskin you need to make-create three basic things:

a. The screen image: The actual image to show.
b. The progress bar: The tiny little bar that floats.
c. The script: A small text file that tells everything what to do.

B. The screen image:

- We will now attempt to make the screen image we want to use for our Bootskin. The whole process will take place in Adobe Photoshop CS. All terms referred are from the actual Photoshop layout.

- Screen image’s Properties: 640x480, 4-bit, 16 colors palette.

1. You need to make your image in 640x480, the resolution that any Bootskin screen image is. So if you have a bigger sized picture-wall you need to drop its resolution to 640x480. Appropriate wall sizes are: 800x600, 1024x768, 1280x960 and 1600x1200. If you have any other resolution you may need to do some clipping or stretch the image.

2. The way to do proper image resize is from the menu "Image>Size…" Upon click on it a Dialog Box will appear.

3. Tick all the check-boxes that appear on the lower part of the Dialog Box. Those are:
- Scale Styles (if you have a multilayered image and you used styles or blending options
on them to scale them as vector forms, gives them a cleaner look)
- Constrain Proportions (so that your image doesn’t get hindered too much)
- Resample Image (the mode to resample your image). In the drop down menu next to
Resample Image select Bicubic; this is the best method to bring down an image.

4. Now at the text box labeled as Width insert the number 640. With Constrain Proportions activated the Height should adjust automatically to 480. Press Ok to resize.

5. If your image is not of the resolutions mentioned above, then don’t click on Constrain Proportions and in the text boxed labeled as Width and Height insert the numbers 640 and 480 correspondingly. Press ok to resize. Note: This might alter image quality, but that is your choice.

Screenshot 1: In this first screenshot you can see steps 1-5:

6. Now you have the right size of image. The next you need to do is reduce the colors to the 4-bit palette or 16 colors.

7. The way to properly reduce the image color depth is to go from "Image>Mode>Indexed Color…" Indexing an image means that you’ll reduce its colors to a specified number and all pixels will be accordingly adjusted. The largest possible palette when you Index an image is consisted of 256 colors. Note: Imagine the image palette as a big matrix of boxes each one representing a color of the image. Each box has a unique value. The first color in the palette is called the Master Color. (Note this for future reference, since it’ll help you understand the relation between Screen Image and Progress Bar)

8. A property window will open. At this stage you’ll need to play a bit with all the fields. Check the check-box called Preview in order to preview the changes to your image and in that way you may experiment freely. The following fields are the ones that appear in the window with short explanatory tips:
- Palette: The way the color will be applied to the image. You may select from three kinds which are: Local (Selective), Local (Perspective), Local (Adaptive). You choose the one that is best for your image. I recommend using mostly Local (Selective) or Local (Perspective) since they map colors better.
- Colors: The number of colors you want the image to be indexed in. Here you just type the number 16, since this is the value for 4-bit images.
- Forced: The number of colors forced to be as default first colors in the palette. Here I recommend choosing Black & White, since these are the primary colors needed for the picture. (If you are an advanced user you may choose None or Custom).
- There is a check-box called Transparency. Do not check it, as it’ll ruin your work. The Windows system doesn’t recognize Transparency for system images, basically there is no transparency for 4-bit images at all. It is a feature for 256 colors images and beyond.
- The Matte drop-down list may be active or inactive, I don’t know what it is supposed to do, but you’d better not touch it and leave it as is.
- Dither: It has four different methods to dither the image. You may play with them freely and adjust it to your image needs. I recommend dithering with Diffusion.
- Amount: The amount of the applied dithering method. Usually is only active for Diffusion. I recommend setting it to about 85-95% for Diffusion.
- Also there is a check-box at the lower part of the Dialog Box labeled "Preserve Exact Colors". Do not check this as it’ll also ruin your work. Preserving colors is only possible for 256 colors or above images.
- After you bring the image to your liking Press Ok to apply changes. Note: Not all images look good in 16 colors. See the tips area below for more info as to the selection of images.

Screenshot 2: In this screenshot you can see steps 6-8:

9. Now you’ll need to save the images palette as you’ll need it to make a matching progress bar.

10. To save your image’s palette file go to "Image>Mode>Color Table…"

11. A property windows will open. In front of you is the palette of your image. Press Save and save the palette somewhere in your drive. Note: You may notice that the palettes are saved as .atn or .act (depends on your Photoshop’s Edition), those are action files, a collection of macros to perform various actions in Photoshop.

Screenshot 3: In this screenshot you can see steps 9-11:

12. Now you need to save the screen image. To do that go to File>Save As… and from the format drop-down list select .bmp. Give your image a name and hit the Save button. A properties window will come up. From that select 4-bit (don’t leave the default 8-bit value) and don’t select any of the boxes below.

Screenshot 4: In this screenshot you can see step 12:

C. The progress bar:

- We will now attempt to make the progress bar image we want to use for our Bootskin. The whole process will take place in Adobe Photoshop CS. All terms referred are from the actual Photoshop layout.

- Screen image’s Properties: 22x9, 4-bit, 16 colors palette.

1. You need to make your image in 22x9, the resolution that any Bootskin proper progress bar image is.

2. Paint the progress bar black with the bucket tool and reduce the colors to the 4-bit palette or 16 colors.

3. The way to properly reduce the image color depth is to go from "Image>Mode>Indexed Color…" Indexing an image means that you’ll reduce its colors to a specified number and all pixels will be accordingly adjusted. The largest possible palette when you Index an image is consisted of 256 colors. Note: Imagine the image palette as a big matrix of boxes each one representing a color of the image. Each box has a unique value. The first color in the palette is called the Master Color. (Note this for future reference, since it’ll help you understand the relation between Screen Image and Progress Bar)

4. A property window will open. At this stage you won’t need to play with any fields. Just leave them as they are and hit the ok button.

Screenshot 5: In this screenshot you can see steps 1-4:

5. Now you need to have the progress bar with the same kind of palette you used with your screen image. That is why you saved your original images palette.

6. To load your screen’s image palette go to "Image>Mode>Color Table…"

7. A property windows will open. In front of you is the palette of your image with only 2 or 3 colors. Press Load and find your screen image’s palette you previously saved somewhere in your drive and hit ok. Now you’ll see that you have the identical palette as your screen image. Note: You may notice that the palettes are saved as .atn or .act (depends on your Photoshop’s Edition, those are action files, a collection of macros to perform various actions in Photoshop.

Screenshot 6: In this screenshot you can see steps 5-7:

8. Time to move on to the actual progress image processing. First you open your screen image to use as a color chooser. It is the best, safest and fastest way since you don’t know the exact values of colors from your Color Table.

9. Pick color chooser and start picking the colors you’ll need for the progress bar image. Using the pencil tool draw your progress bar at any kind of design you like. For your convenience you may want to zoom to 1600% to be more precise as the progress bar is a very small image.

Screenshot 7: In this screenshot you can see steps 8-9:

10. Now you need to save the progress bar image. To do that go to File>Save As… and from the format drop-down list select .bmp. Give your image a name and hit the Save button. A properties window will come up. From that select 4-bit (don’t leave the default 8-bit value) and don’t select any of the boxes below. It is suggested to save the progress bar image in the same directory with the screen image.

Screenshot 8: In this screenshot you can see step 10:

D. The script:

- We will now attempt to make the script we want to use for our Bootskin. The whole process will take place in Notepad or Object Edit and MS Paint.

- Script’s Properties: File type of .ini.

1. The actual script is very simple. It consists of ten lines of properties code.

2. You open Notepad or Object Edit and write down the following code or copy/paste it exactly as given:

[BootSkin]
Type=
Name= ""
Author= ""
Description= ""
Screen=
ProgressBar=
ProgressBarX=
ProgressBarY=
ProgressBarWidth=

3. Explanatory guide for each field:

- [Bootskin] : This indicates for which program is the code for.
- Type= : I’m not sure what is the use for this. But the value is always 0.
- Name= "" : Within the quotation marks you put the name of your skin.
- Author= "" : Within the quotation marks you put the name of the creator/your name.
- Description= "" : Within the quotation marks you write down a brief description for your skin.
- Screen= : This is where you write down your screen image’s filename.
- ProgressBar= : This is where you write down your progress bar image’s filename.
- ProgressBarX= : The x-value where the right top angle of your progress bar image’s will be placed. This is a value that tells at which x-pixel of the screen image will the progress bar be placed. Note: x-y are used as in a graphical histogram.
- ProgressBarY = : The y-value where the right top angle of your progress bar image’s will be placed. This is a value that tells at which y-pixel of the screen image will the progress bar be placed. Note: x-y are used as in a graphical histogram.
- ProgressBarWidth = : The width that you wish your progress bar to be. Note: This is not the progress bar image’s width (22 pixels) but the distance you want your progress bar image to travel within the picture.

4. Example of complete script for better understanding:

[BootSkin]
Type= 0
Name= "Genesis Aftermath"
Author= "Cyberworld"
Description= "At the dawn of the new light..."
Screen= Genesis Aftermath Screen.bmp
ProgressBar= Genesis Aftermath Progress Bar.bmp
ProgressBarX= 115
ProgressBarY= 436
ProgressBarWidth= 475

5. You might have some trouble figuring out the x/y values as well as the progress bar width. So the easiest way to resolve this is via MS Paint. Open both your screen and progress bar images. On your progress bar image hit Ctrl+A to select the whole image and then Ctrl+C to Copy the image to the clipboard. Now on your screen image hit Ctrl+V to paste the progress bar image within it. You’ll notice that the progress image floats within the screen image and you can move it all around the image. I recommend that you already zoom into the area where you’d like your progress bar to start from prior to pasting the progress bar image. Place your cursor just one pixel above the area selected and see at the lower right part of MS Paint a place where some numbers appear. Those are the mouse coordinates the exact x-y values you need for your script. After that use the selection tool to draw a rectangle starting from the x-value of your progress bar image and pull it to a satisfying progress bar width. Again at the lower right part of MS Paint another set of numbers will appear stating the width and height of your rectangle. The first one is the width and the actual progress bar width value you need for your script.

Screenshot 9: In this screenshot you can see step 5:

6. When the script is ready save it as "bootskin.ini" from Notepad or Object Edit in the same directory with your screen and progress bar images.

E. Compiling the Bootskin:

1. This is the less recommended way to compile a .bootskin, yet it is the fastest and up to now the most efficient for me. Go to the directory where your screen and progress images are, as well as your bootskin.ini and select them all. Using WinZip or any other zipper program zip the three files into one .zip file. After this just rename the .zip to .bootskin and double-click it. The .bootskin file will auto-install to your bootskin directory.

2. That’s all. Your bootskin is ready.

F. Special Notes:

1. The Progress Bar image must always roll on the first color of the Screen image’s color palette. Usually that color is black, so in full color images you might need to create a small tray for your progress bar to roll on. Suggested tray sizes are the following: 112x11, 134x11, 156x11, 112x13, 134x13 and 156x13. The general rule goes: (Progress Bar Width + 2) x (Progress Bar Height + 2 or 4).

2. A very useful DX Widget for Bootskin is Bootskin Buddy by RabitRobot found at: Link

3. Thank you all. For any more info or inquiries post comments or send e-mail to: Link

Comments (Page 3)

sweeneytodd

on Mar 28, 2007

hi, newbie here..

doing my first bootscreen,i also am stuck on step 7. when i press load there's no screen image palette in the property box. im using adobe photoshop cs3.

Quentin94

on Mar 28, 2007

1st have you save the color palette in a folder?
like that:

If yes you should choose the folder where you have save it and select the right format:

look at this (only pictures) that could help you sorry it's in french but i have tried to choose the most importante steps
Bootskin tuto

scorpNZ

on Mar 28, 2007

A full free alternative to paid type editors...paint.net Beta 3.05

WWW Link

sweeneytodd

on Mar 28, 2007

ME AGAIN.

well i have messed about with it and still cant get my heed roung it

i save as bmp. also tried jpeg and others i followed every step, but for some reason no image shows up once i save it in bmp.
i saved it in folders and still no go.
i read DisturbedRealm artical(reply#6). i is this the same problem? not sure

2of3

on Jun 22, 2007

Thanks for a useful tut! Tried it out and was successful on the first try! I have gotten some requests to make some of my Logons into Bootskins.... Think I'm gonna stick to logons. LogonStudio is so easy to use and they LOOK so much better!

Disturbedcomputer

on Sep 08, 2007

Please Help

I am stuck on 12 the part I have put in RED BOLD

"12. Now you need to save the screen image. To do that go to File>Save As… and from the format drop-down list select .bmp. Give your image a name and hit the Save button. A properties window will come up. From that select 4-bit (don’t leave the default 8-bit value) and don’t select any of the boxes below."

I can not click on 4-bit it is grayed out what do I do now
I am on Windows XP Pro
PhotoShop CS2

thanks

Disturbedcomputer

on Sep 08, 2007

ok never mind I think it was the picture i was using it had too many colors in it

cause it had most of the Boxes filled with color instead of just one row

ilsabav92

on Sep 27, 2007

Is it possible to do this with Gimp?

I3lackShadow

on Sep 30, 2007

whenever I try to save the file as 4 bit, the image that comes out stretched and sometimes its in black and white. can someone help me?

DiSTroy3d

on Oct 24, 2007

Hello all. I'm having a problem with the first image...

"12. Now you need to save the screen image. To do that go to File>Save As… and from the format drop-down list select .bmp. Give your image a name and hit the Save button. A properties window will come up. From that select 4-bit (don’t leave the default 8-bit value) and don’t select any of the boxes below."

I select 4-bit and click OK but then the window disappears for a sec and instantly reappears. So I hit OK again, but then it crashes my program. I'm using Photoshop CS3 on Windows XP Pro SP2. Any help in here or PM would be greatly appreciated! Thanks in advance.

-DiSTroy3d

ilsabav92

on Oct 25, 2007

I select 4-bit and click OK but then the window disappears for a sec and instantly reappears. So I hit OK again, but then it crashes my program. I'm using Photoshop CS3 on Windows XP Pro SP2. Any help in here or PM would be greatly appreciated! Thanks in advance.

-DiSTroy3d

I have the exact same problem, and I am also using Photoshop CS3 (Extended) on Windows XP Pro SP2.

accountnamehere

on Nov 14, 2007

Hi all,

I have been able to install bootskin as an unattended install using "bootskin103.exe /silent" this works fine and i copied my custom bootskins to the skins folder.

I then run a .reg file to get bootskin to use my skin, unfortunately i think i am missing something as the os/2 warp bootskin gets loaded after a reboot, even though i open the bootskin program and it tells me i am currently using my own bootskin.

If i hit apply on the application my bootskin will show up after a reboot.

Is there something happening that i don't know when i hit apply besides the reg settings that i have found,

Is there anyway to apply a bootskin without having to hit this button,

Where is the os/2 warp skin saved, i did a search for this but could not locate it, below are the registry entries i used to try and get it to apply the bootskin without having to click apply.

If you do a google search for this you will find a lot of people with the same issue but o one seems to be able to find a solution any help would be appreciated

Thanks,

"
Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\BootScreen]
"Tag"=dword:00000002
"ErrorControl"=dword:00000001
"Group"="Boot Bus Extender"
"Type"=dword:00000001
"Start"=dword:00000000
"ImagePath"=hex(2):5c,00,53,00,79,00,73,00,74,00,65,00,6d,00,52,00,6f,00,6f,00,\
74,00,5c,00,53,00,79,00,73,00,74,00,65,00,6d,00,33,00,32,00,5c,00,64,00,72,\
00,69,00,76,00,65,00,72,00,73,00,5c,00,76,00,69,00,64,00,73,00,74,00,75,00,\
62,00,2e,00,73,00,79,00,73,00,00,00

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\BootScreen\Parameters]
"INIPath"="C:\\Program Files\\Stardock\\WinCustomize\\BootSkin\\Skins\\VirusEdition\\BootSkin.ini"
"Randomized"=dword:00000000
"Migrated"=dword:00000000
"Enabled"=dword:00000001
"DirtyBoot"=dword:00000000

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\BootScreen\Enum]
"0"="Root\\LEGACY_BOOTSCREEN\\0000"
"Count"=dword:00000001
"NextInstance"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\BootScreen]
"Tag"=dword:00000002
"ErrorControl"=dword:00000001
"Group"="Boot Bus Extender"
"Type"=dword:00000001
"Start"=dword:00000000
"ImagePath"=hex(2):5c,00,53,00,79,00,73,00,74,00,65,00,6d,00,52,00,6f,00,6f,00,\
74,00,5c,00,53,00,79,00,73,00,74,00,65,00,6d,00,33,00,32,00,5c,00,64,00,72,\
00,69,00,76,00,65,00,72,00,73,00,5c,00,76,00,69,00,64,00,73,00,74,00,75,00,\
62,00,2e,00,73,00,79,00,73,00,00,00

[HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\BootScreen\Parameters]
"INIPath"="C:\\Program Files\\Stardock\\WinCustomize\\BootSkin\\Skins\\VirusEdition\\BootSkin.ini"
"Randomized"=dword:00000000
"Migrated"=dword:00000000
"Enabled"=dword:00000001
"DirtyBoot"=dword:00000000

[HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\BootScreen\Enum]
"0"="Root\\LEGACY_BOOTSCREEN\\0000"
"Count"=dword:00000001
"NextInstance"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\ControlSet002\Services\BootScreen]
"Tag"=dword:00000002
"ErrorControl"=dword:00000001
"Group"="Boot Bus Extender"
"Type"=dword:00000001
"Start"=dword:00000000
"ImagePath"=hex(2):5c,00,53,00,79,00,73,00,74,00,65,00,6d,00,52,00,6f,00,6f,00,\
74,00,5c,00,53,00,79,00,73,00,74,00,65,00,6d,00,33,00,32,00,5c,00,64,00,72,\
00,69,00,76,00,65,00,72,00,73,00,5c,00,76,00,69,00,64,00,73,00,74,00,75,00,\
62,00,2e,00,73,00,79,00,73,00,00,00

[HKEY_LOCAL_MACHINE\SYSTEM\ControlSet002\Services\BootScreen\Parameters]
"INIPath"="C:\\Program Files\\Stardock\\WinCustomize\\BootSkin\\Skins\\VirusEdition\\BootSkin.ini"
"Randomized"=dword:00000000
"Migrated"=dword:00000000
"Enabled"=dword:00000001
"DirtyBoot"=dword:00000000
"

Monotone21

on Nov 28, 2007

ok mine starts up in a weird multi color way not sure whats wrong???

MasterKill9

on Jan 28, 2008

heey awesome turial! i made my own bootscreen now and i love it!
i just got a few more questions;

1. does it have to be 4 bit ?
2. does it have to be 640x480 ?

anyway thanks for this awesome turial and i hope you can awnser my questions.

alexsbecker

on Feb 16, 2008

Well, I don't know how much I'll help everyone, but here's a couple things I've learned.

1) If the colors go all funky at all, it's because you have too many colors. Go back to Photoshop (or GIMP or whatever) and switch it back to RGB mode (or 256 color mode, or something that has more than 16 colors) and then back to indexed color mode, and make it choose 16 colors again. Sometimes I've found (though I don't know why) that 16 colors can be too many. If you're sure you only have 16, then the problem is that black (#000000) isn't one of those colors. Open your color palette (Image>Mode>Color Table... in Photoshop CS) and pick the color closest to black, and change it to black. If that isn't a good option, revert your image to RGB mode and reduce it again, but this time reduce it to 15 colors. Go back to your color palette and click on the 16th (first non-used) box, and change its color to black (#000000). Now you should be able to save it in 4-bit!

2) If Photoshop won't let you save in 4-bit mode, you have too many colors. Take some out. Switching to RGB mode and then back to indexed color mode works well.

3) Before you make your bootskin, open your background image in Paint and paste your progress bar into it. If your progress bar changes color, you need to redo its color palette so that it matches the palette of your background image.

4) Another good thing to do to fix color problems is to make a copy of your background image and open it in MSPaint, and save it in 16 color mode. If the colors go all funky, you need to redo your colors, preferably in Photoshop. Do the Indexed -> RGB -> Indexed trick again.

5) As for Photoshop crashing while trying to save, that just sucks. Don't know what the problem is there, but download the GIMP - it's free, and it'll probably work for you.

6) It HAS TO BE 4 bit (4 bit = 16 colors) and it HAS TO BE 640x480. It will not work otherwise. Colors are decietful - if you click "preview" in Bootskin, your image will display correctly even if you're using more than 16 colors. The only real way to test it is to actually reboot your system with that skin selected.

7) Don't know why you wouldn't just hit the "Apply" button, but would instead choose to mess with the registry. I'd say, if you're willing to mess with the registry, just leave Bootskin alone and do it yourself, you're obviously smart enough!

So if anyone actually read this post all the way through, I'd love to know if there's any way to define more variables for bootskins. For instance, how about defining a second progress bar, or the point where the right end of the progress bar stops being shown (Currently there's only a variable for where the left end disappears). Also - anyone know what the "type" variable is for?

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

Richer content, access to many features that are disabled for guests like commenting on the forums.
Access to a great community, with a massive database of many, many areas of interest.
Access to contests & subscription offers like exclusive emails.
It's simple, and FREE!