Bootskinners Anonymous - The Twelve Step Program
Photoshop Bootskin Tutorial
Bootskinners Anonymous - The Twelve Step Program
By NetBadger - Text Only Version (One with screenshots is available at www.netbadger.com)Link
I've read some comments about Adobe's Photoshop being useless for creating bootskins, but I beg to differ. This tutorial will focus on creating a bootskin from beginning to end in PhotoShop. I think you will be pleased with the results you get.
Step 1: Create a directory in your Bootskin\skins directory with the name you would like to use for your bootskin.
Step 2: Copy and paste the text below into a plain text file (use notepad) with the name bootskin.ini, and save the file:
[BootSkin]
Type=0
Name = "filename"
Author = "Your Name"
Description = "none"
ProgressBar=progress.bmp
ProgressBarX = 210
ProgressBarY = 80
ProgressBarWidth = 220
Screen=filename.bmp
Step 3a: Edit the bootskin.ini file you just created as follows:
Change the text in the Name = "filename" to whatever you want the bootskin to be named. You should probably use the name you gave to the directory for this bootskin. Keep in mind that not all operating systems handle spaces in file names the same. It is best to use the underscore character _ instead of a space in file names.
Step 3b: Change the Author = "Your Name" to your own name or handle.
Step 3c: Change the text in Description = "none" to whatever you want. Be sure that you leave the quotation marks at the beginning and end.
Step 3d: Leave the ProgressBar=, ProgressBarX, ProgressBarY, and ProgressBarWidth alone for now.
Setp 3e: Change the Screen=filename.bmp to whatever you want the bootskin to be named.
Step 4: Now lets take the image you want to convert into a bootskin, and open it up in Photoshop.
Tip: Choosing a picture with lots of similar colors will result in a better looking bootskin.
The existing height, width, and resolution are not so important at the moment. Keep in mind that we are going to end up with a width of 640, a height of 480, and a resolution of 72 dpi. So this means that your original image should have an "aspect ratio" that will automatically convert to 640x480 when you resize it, or you will have to adjust the size to match those dimensions. The resolution of 72dpi is the maximum a computer screen can display. Making it larger will not improve the looks of your bootskin, it will only make the file size larger. Open your image and go to 'image > size'.
Enter a width of 640. If the height isn't 480, your original image doesn't have the correct aspect ration. You will need to use the 'canvas size' function to trim up either the width or the height. Double check the resolution for 72 pixels/inch. If it isn't change the number to 72. If you already set the width and height, changing the resolution will change those numbers. Change the width back to 640, and the height should go back to 480. Click on OK.
Step 5: You probably are bringing in a jpeg image with millions of colors. Now we have to reduce that number to 16, and turn it into a bitmap (bmp). You do that by going to 'Image > Mode' on the menu bar and choosing 'Indexed Color..." A window will pop up saying indexed color, and each of the fields should be as follows:
Palette: Local (Adaptive)
Colors: 16
Forced: Black and White
Transparency should not be checked
Options
Matte: should be "grayed out"
Dither: Diffusion
Amount: 100%
Preserve Exact Colors should be unchecked.
You have completed the majority of the work.
Step 6: Save the file to a 4 bit bmp file:
Go to File > Save As...
Enter a name in the "File Name" box, and choose BMP (*BMP;*RLE;*DIB) from the drop down menu.
Give it the filename that you used for the directory, and the same name as whatver you put on the line: Screen=filename.bmp in the bootskin.ini file.
A screen will pop up saying "BMP Options".
Be sure that you click on File Format 'Windows' and the '4 bit' option, and click OK. The Compress (RLE) and Flip Row Order boxes should be unchecked.
Step 7: While we have the modified main image on the screen, we need to save the palette, so that the progress bar will not cause color shifts. To do this, we go to:
Image > Mode > Color Table
A screen pops up that says "Color Table"
Table: Custom
and it has black then white and the 14 most commonly used colors in your master image.
Click on the 'Save' button, and give the file a name. It will automatically put the extension .act on the end. Be sure to remember where you saved the file, because we are going to need it again.
Step 8: Now we are going to make the progress bar that moves across the bootskin. Although it is possible to use a different size progress icon, it introduces a lot more variables that require numerous test. The best thing to do is create a new file with the dimensions of 22 width 9 height and resolution 72. For now choose RBG Color from the 'Color Mode' drop down menu and '8 bit' from the drop down menu next to that. It really doesn't matter what the 'Background Contents' is set to.
Once you've made the new image for the progress bar, load the color table you saved in the previous step.
Fill in the whole box with black. Now you zoom in on the image as much as you can (which is 1600%). This gives us a chance to really see what shape we want to use. The reason we loaded the color table before starting, is so that we use the exact same 16 colors (in the same order on the palette), as the main image.
Tip: As you are drawing, the easiest way to get the right colors is to use the eyedropper tool on the original image. Trying to use color swatches or the mixer bar will not match up to your palette.
Get creative. There isn't that much you can do with sixteen colors on such a small canvas, so using the pencil tool with a 1 pixel size is fine.
Once you've finished, choose: File > Save As
progress.bmp. It will also pop up the window about '4 bit' or '8 bit'. We need to be sure to choose '4 bit' again.
Step 9: There will be a black 'track' for the progress bar to travel in. It always needs to be black. If you use another color on the main image, it will be converted to black the first time the progress bar moves across it. We know that the progress bar is 22 pixels wide by 9 pixels tall. We are going to need to create a 'track' that will match a multiple of those dimensions. Ten times 22 is 220, 3 times 22 is 66, and so on. So the length of the 'track' will need to be a multiple of 22, and its height will be 9 pixels. Trying to use the selection box and get those exact dimensions is almost impossible. So what we do is create a new image that is whatever dimensions you choose, and then copy and paste that new image (which we already filled with black), into the original image.
Here comes a little bit more math, but it will make it easier in the end. If you are creating a 'track' that is 220 pixels wide, and you want it to be centered in the image, then here is what you do to place it exactly. You know the main image is 640 pixels wide. You know that the 'track' is 220 pixels wide. 640-220=420 pixels left over. So to center it, you must have 210 pixels on either side.
To make sure it is exactly centered, we need to align the left edge of the track at precisely 210 pixels from the left. The easiest way to do that is to use the rulers and guides. To turn on the rulers, you go to: View > Rulers
They are the numbers and marks just above and to the left of the checkerboard. A guide is just a little blue line that you either pull down from the top, or out from the left with the arrow tool.
Put the arrow tool in the ruler bar to the left, and hold down the left mouse key while pulling it to the right. Line it up with the mark at 210 on the top ruler. Take the arrow tool, and slide the whole black 'track' you are pasting into the original image to where the left side of it is aligned to the blue guide you pulled out. You position the 'track' vertically wherever it looks best on the image.
You don't have to always center the 'track' exactly in the middle. It will just require a bit more testing to get the progress bar in the track, inside the bootskin.ini file. If you want to get a ballpark estimate of where the track is vertically, pull a guide down from the top ruler, and see what number it is on the left ruler.
Step 10: Now that you have the track in place, do a File > Save As
and choose the original filename.bmp you gave the master image. We are doing the 'Save As' to insure that it is still a '4bit' bitmap.
Step 11: Go to your bootskin directory under "program files" with the Windows Explorer. Be sure these three files are in that directory; filename.bmp, progress.bmp, and bootskin.ini. Open up the bootskin.ini file with notepad. Start up the bootskin program and scroll down until you find the bootskin you have been working on. Highlight it, and click on the 'preview' button in the Bootskin Program. You should see the progress bar moving across the bootskin image you created. It is probably not exactly in the black 'track' you created for it. Now it is just a matter of switching back and forth between editing the bootskin.ini file in notepad, and then hitting the preview button again and again, until you get the progress bar exactly where you want. The lines in the bootskin.ini file you are editing are:
ProgressBarX = 210
ProgressBarY = 80
ProgressBarWidth = 220
We know what the ProgressBarWidth is because that is the length of the black strip we pasted into the master image. So you shouldn't have to worry about that number. If you used the guides, then you know exactly what the ProgressBarX number is. So you would only be editing the ProgressBarY number to move the progress bar up and down the page.
Just be sure to save the file in notepad each time you edit it, before trying the preview button in the Bootskin Program.
Step 12: Sharing your masterpiece with the world. The bootskin you are working on, should be highlighted in the Bootskin program. Choose File > Export selected skin to file.
Give it a file name (preferably the same name you gave it in the bootskin.ini file), and save it to your hard drive. It will automatically put the .bootskin extension on the file name. The only thing left to do, is make a preview image of your bootskin. Just open the master filename.bmp file and save it as a jpeg. The only thing you need to upload is the filename.bootskin and the preview image, and let the compliments roll in.
Footnotes: If you can't see the bootskin you are working on, when you start up the BootSkin Program, it is usually one of the following: The proper three files are not in the correct directory, and/or the filename.bmp is not in '4 bit' format. If you get color shifts when using the bootskin, the filename.bmp and the progress.bmp are not sharing the exact same palette