05-27-2008, 07:19 PM
VIDEO TUTORIAL
Quote:There is no excuse left to mis-align the text, use a different or blurred font, or somehow screw up the colours of the icon.*
As a Christmas-present, I give you an Icon Maker. Yes, you read the right; an Icon Maker, as in "A program that can make icons". Find it here: Icon Maker v2
Unfortunately, it's probably not (yet?) a program that any fool can use, so here's an example.
UPDATE 8 Jan 2008.
There is now a version 2, but I'm not sure if I could filter out all the bugs.
Scroll down for the new features.
Example: Making the icon of Suzuri (from Izuna 2)
- Start the program (extract it from the .zip-archive first, and run the .jar-file with a java runtime environment (don't extract the .jar-file)).
- Select File->New Icon->Sheet Icon, or press Shift+S (here)
You'll see an empty icon appear. Now to add the text.
- Select Text->Add Text, or press Ctrl+A (here)
- Enter the title of the Icon (like this) and press OK.
The text will be centered automatically, and put in the correct font/size/blurriness/etc. (example)
Now to add an image.
- select the frame on the sheet you want to add to the icon (with background), and copy it to the clipboard (so just use Ctrl+C). (like this)
- Go back to the Icon Maker program, and go to Image->Paste Image, or press Alt+V (here. The image will be centered automatically if you selected the image properly. (example)
- Unless you're sort of lucky, the background will show in Icon Maker, like in the example above. If you want to get rid of the background, make it pure magenta (FF00FF or 255/0/255), and the Icon Maker will make the background transparent. (example)
- If the sprite is too small, so zoom in by pressing '+', or by choosing Image->Zoom->200%. (example)
- If you don't want to image centered, click where you want the centre of the image. Alternatively, use the arrow keys on your keyboard.** (example)
- When the image is placed correctly, make sure to select Image->Place Image (or press Alt+Enter), or it won't be saved. To save the icon, go to File->Save Icon, or press Ctrl+S. Image types .png, .gif and .bmp are supported, but can only be selected by typing the extension behind it. Anything else will automatically convert to .PNG. (example <- this will save the icon to the file "izuna2_suzuri_icon.png").
Extra features, not shown in the example:
- you can load an icon you made before (Ctrl+L)
- you can add multiple images by pasting another image (Alt+V) after placing the previous image (Alt+Enter)
- If you want to remove all the placed images, choose Image->Clear Image (Alt+D) twice. Choosing it once will result in clearing the not-placed image only. This will also work for icons you loaded.
- You can re-type the text anytime by choosing Text->Add Text again. Clear the text by choosing Text->Clear Text (Ctrl+D), or by entering nothing when adding text. Using Text->Clear Text will also clear any text that was already on a loaded icon.
- You can also copy and paste icons from and to the clipboard (File->Copy Icon and File->Paste Icon, or Ctrl+C and Ctrl+V). Be sure to place your image before copying it.
- You can re-center the image using Image->Center Image, or Alt+M.
- Zoom your image back out by pressing(or Image->Zoom->100%). you cannot zoom in further than 200%. The zoom is shown in the top-right corner as 1x or 2x.
- Icon Maker supports 190 different characters (including accented characters). Let me know if you somehow have an unsupported character you want to use on an icon.
New Features for version 2:
The Image-menu has been extenden with another option: Transparency
This menu splits into another two menus: Background and Opacity. Background is for editing the image's background-colour, Opacity is for, obviously, editing the images opacity.
Some more examples:
Editing the Background-colour
By default, the background-colour is pure Magenta. Here are some (more) fabricated examples of editing the background-colour:
- default: pure magenta is transparent: example
- pure white is transparent: example
- the colour the top-left pixel has is transparent: (the Top-Left Pixel option) example
- a custom background-colour: this leads to this
Editing the opacity
For those who don't know: an opacity of 100% means it's not transparent at all, and an opacity of 0% means it's invisible.
- example of an opacity of 50%: example
- and of a custom opacity: this leads to this
A note: if the opacity isn't 100%, the program will experience a (slight?) slowdown.
Have fun with it. ^.^
*Now you can blame me. Let me know though, so I can fix the bug (if any). ;]
**You can hold Shift to increase the step, and hold Ctrl to decrease the step with which the image is being moved
