|
Photoshop Bootskin
Tutorial
Bootskinners Anonymous -
The Twelve Step Program
By NetBadger
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. Okay, here is our
first screen shot. Open your image and go to 'image >
size'.
| This is how to get there. |
This is how it should look
when you are done. |
 |
 |
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.
| This is how you get
there on the menu bar. |
Change the settings
to match this exactly, then press OK. |
 |
 |
You have completed the majority of the
work.
Step 6: Save the file to a 4 bit
bmp file:
| Here is how to get
to save as. |
 |
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.
Look at the yellow
highlight. Choose the bmp format from the drop
down menu.
The following screen will pop up:
Be sure that you click on the '4 bit'
option, and click OK.
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
We get a screen that looks something
like this:
The colors will be the 16 most
commonly used in the image you are making the bootskin from.
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 22x9.
And enter the following information:
Once you've made the new image for the
progress bar, load the color table you saved in the previous
step.
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.
Important Tip:
If you make the progress bar the whole
width of the bootskin, it will crash Windows to the point
that you have to use "safe mode" to go in and change the
bootskin to something else. Otherwise the computer is
locked up completely!
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
 |
The rulers look
like the following: |
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. |
The arrow tool is the one, selected
below:
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 pasted 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 bootskin.
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.
|
