User:Juxn~usabilitywiki/howto
This is a tutorial on how to create language specific bold/ italic icons for our toolbar. Take a look at icons that have already been created before you start to create one yourself. When you have succeeded to create a new icon please contribute it to Wikimedia Commons.
This page offers a tutorial using Adobe Illustrator and Photoshop and another one using the Opensource applications Inkscape and Gimp.
The result should be similar, no matter which applications you prefer.
Finally: Please check to see whether your icon looks similar to universal and icon. If you have any problems you are welcome to ask for help on the discussion page.
Using Adobe Illustrator + Photoshop
Preparation
Before you begin |
---|
Download and install the Droid Serif (bold and italic) font. It is available for free download at fontsquirrel or at damieng.com |
Illustrator
Start with Illustrator | |
---|---|
Create a new Illustrator document.
|
|
Type your letter.
|
|
Switch from the Type Tool to the Selection Tool, and select your letter. | |
Create outlines.
|
|
Apply a linear gradient fill.
|
|
Give it a 2.5px stroke in black. | |
Copy it. (Left-click on the letter: Copy) |
Photoshop
Switch to Photoshop | |
---|---|
Create a new file.
|
|
Paste your icon.
|
|
Resize to 14 px.
|
|
Add effects.
|
|
Duplicate this layer.
Edit the properties of this layer:
|
|
Go to layer properties of this new layer.
Delete Effect: "Bevel & Emboss"
|
|
Delete the white background layer.
|
|
Save this file as a png(-24). Please note the Naming Guidelines |
You are done! Please add your icon to Commons and the Gallery below, so others need not duplicate your hard work!
Using Inkscape + Gimp
Preparation
Before you begin |
---|
Download and install the Droid Serif (bold and italic) font. It is available for free download at fontsquirrel or at damieng.com |
Download and install the gimp plugin layer effects |
Inkscape
Start with Inkscape | |
---|---|
Create new document that is 100px X 100px
|
|
Type the letter of your choice as a CAPITAL LETTER
|
|
Zoom in (Use the magnifying glasses in the left toolbar menu) until the letter is displayed in a convenient size for detail-editing. | |
Switch to the select-tool (F1) | |
Open the Fill and Stroke menu (in the main menu bar, go to Object → Fill and Stroke).
|
|
Edit the stops for this gradient.
| |
Alternatively,
Click on the gradient tool (left menu)
Doubleclick circle → the gradient editor pops up
|
|
Switch to the Select tool and give it a your letter a stroke (use fill and stroke menu in Object -> Fill and Stroke)
|
|
Use the main (horizontal) toolbar to edit the size and the position by editing the "x" and "y' values:
In most cases the letter won't be wider than it is high, so there will be white space on the right side of the letter. That is ok. |
|
Save your file as normal.svg |
Gimp
Switch to Gimp | |
---|---|
Open the normal.svg file you just created in Inkscape | |
Create new layer (this layer is only for your convenience, it will be deleted in the end)
|
|
Make sure the layer with the letter/icon in the layer dialog is selected. Click on "bevel and emboss" (from the main menu bar, go to Script Fu → Layer Effects → "Bevel and Emboss") Change these default values:
|
|
Scale image down to 14px height & width (From the main menu bar, go to Image → Scale Image Interpolation: Cubic |
|
Add a stroke. From the main menu bar, go to Script Fu → Layer Effects → Stroke
|
|
Delete white background layer
(Select background layer in layer dialog, then click on the "Delete this layer" Trash icon to delete it) | |
Save as png. Please note the Naming Guidelines |
You are done! Please add your icon to Commons and the Gallery below so others need not duplicate your hard work!
Naming Guideline
Please upload your Icon to Wikimedia Commons and name your file like this:
"toolbaricon_" + "bold_" or "italic" + the actual letter + fileformat (".png")
Example: For this tutorial the file would be named:
"toolbaricon_bold_F.png"
Gallery
Language(s) | Bold Icon | Italics Icon |
---|---|---|
Universal Roman (Default) | ||
English | ||
German | ||
French | ||
Spanish | ||
Dutch | ||
Portugese | ||
Polish |