User:Juxn~usabilitywiki/howto

From Wikimedia Usability Initiative
Jump to navigation Jump to search
Internal document This is an internal document

While making small fixes to this page like fixing typos and dead-links is encouraged, any changes which significantly modify the information of this page should be suggested on the discussion page instead, as this is an internal document.


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 bold and italic 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.
Make it any size; we used 200px by 200px.
Use RGB colormode.
Use Screen resolution (72 ppi).
Create a new document like this
Type your letter.
Using the Text tool, type the letter of your choice as a CAPITAL LETTER.
Use Droid Serif bold or italic.
Size: 100px
Type letter in Droid Serif 100
Switch from the Type Tool to the Selection Tool, and select your letter.
Create outlines.
In the main menu bar, go to the "Type" menu and choose "Create Outlines."
Apply a linear gradient fill.
Choose the "Linear Gradient" from the fill/swatch menu.
Click on the Gradient Fill tool to edit this Gradient.
Make the left stop: R122 G122 B122; make the right stop: R77 B77 B77.
Apply Gradient
Give it a 2.5px stroke in black.
Add Stroke
Copy it. (Left-click on the letter: Copy)

Photoshop

Switch to Photoshop
Create a new file.
Choose "No color profile."
This document size should automatically be the size of your letter. If it is not, you can adjust it manually.
Paste your icon.
Click the selection tool. You will be asked if you want to place it. Press Enter.
Make sure that the file is exactly as high and wide as the letter.
Resize to 14 px.
In the Image menu, go to "Image Size".
Make sure "Constrain Proportions" and "Resample Image" are checked.
Choose "Bicubic (sharper)".
Scale it down to 14px height.
Add effects.
Open Layer Properties (by double-clicking the layer icon in the Layer window's menu).
Check "Bevel & Emboss."
Change default values:
Size: "1px"
Soften: "0px"
Angle: "90°"
Make sure "Use global light" is not checked.
Highlight modus: Opacity: "40%"
IconHTlayerProperties.jpg

Duplicate this layer.

Right-click on the layer in the Layer menu and select "Duplicate Layer."

Edit the properties of this layer:

Layer opacity: 20%
Shape opacity: 0%

Go to layer properties of this new layer. Delete Effect: "Bevel & Emboss"
Add stroke.

Change default values:
Size: "1px"
Position: "inside"
Color: #000000
IconHTlayerStroke.jpg
Delete the white background layer.
Select background layer in Layer menu, and right-click to delete OR drag to the trash.
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
You can do this by creating a new file using the 'default' template(CTRL+N) and then editing the Document Properties (Shift + CTRL +D).
Make sure the background is transparent (Alpha = 0% = 0).
Change document properties like this.
Type the letter of your choice as a CAPITAL LETTER
Click on the Text tool in the toolbar on the left
Choose font: droid serif
Choose bold or italics, depending on which icon you are making
Size = 100
Click apply and close this menu
Change the textproperties like this.
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).
Select "Insert a linear gradient" (the 3rd icon)
Apply a gradient
Edit the stops for this gradient.
Click "Edit" in the Linear Gradient submenu.
This opens the Gradient editor.
In the dropdown menu, choose the leftmost stop of your linear gradient.
apply R:122 G:122 B:122
make sure Alpha = 100% (Which is a value of 255!)
In the dropdown menu, choose the rightmost stop of your linear gradient.
Doubleclick circle → the gradient editor pops up
apply R:77 G:77 B:77
make sure Alpha = 100% (Which is a value of 255!)
close gradient editor
Alternatively,

Click on the gradient tool (left menu)
That brings a stroke on the letter with a rectangle left and circle right
Doubleclick circle → the gradient editor pops up

apply R:122 G:122 B:122
make sure Alpha = 100% (Which is a value of 255!)
close gradient editor

Doubleclick circle → the gradient editor pops up

apply R:77 G:77 B:77
make sure Alpha = 100% (Which is a value of 255!)
close gradient editor
Edit the gradient
Switch to the Select tool and give it a your letter a stroke (use fill and stroke menu in Object -> Fill and Stroke)
Click on the Stroke Paint tab and choose black, 100% alpha
Click on Stroke Style tab and edit width = 2.5px
Add a black stroke
Edit width to 2,5px
Use the main (horizontal) toolbar to edit the size and the position by editing the "x" and "y' values:
X: 0px
y: 0px
H: 100px Make sure height and Width are locked!

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.
If your letter is too wide you will have to adjust the width of the document so the letter fits in.

Edit the size and the position of your letter
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)
Choose layer fill type: white white
In the Layer Dialog, place this layer below the layer with the icon. (you can simply drag and drop it the dialog)
Create new white background layer
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:

Inner bevel
Depth: 10
Size: 10
Angle: 90°
Highlight Mode: Screen
Check Merge with layer
Add and edit layer effect: "bevel and emboss"
Scale image down to 14px height & width (From the main menu bar, go to Image → Scale Image

Interpolation: Cubic

Scale Image down to 14px*14px
Add a stroke. From the main menu bar, go to Script Fu → Layer Effects → Stroke
color: black
opacity: 50%
position: 0 (=inside)
Check merge with layer
Add and edit layer effect: "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) Toolbaricon bold A.jpg Toolbaricon italics A.jpg
English Toolbaricon bold B.jpg Toolbaricon italics I.jpg
German Toolbaricon bold F.jpg Toolbaricon italics K.jpg
French Toolbaricon bold G.jpg Toolbaricon italics I.jpg
Spanish Toolbaricon bold G.jpg Toolbaricon italics C.jpg
Dutch Toolbaricon bold V.jpg Toolbaricon italics C.jpg
Portugese Toolbaricon bold N.jpg Toolbaricon italics I.jpg
Polish Toolbaricon bold P.jpg Toolbaricon italics K.jpg