Text format icons

Background

The Usability Team strives to design their icons to be as cross-culture and cross-language friendly as possible. The 'Bold', 'Italics', and other character formatting icons proved particularly challenging. In the end, we have decided our favored approach is to support and use language-specific icons for the 'Bold' and 'Italics' buttons (making them more intuitive, easier to identify and use), but to design these in a manner that they can be easily generated in other languages. We have started off with the 5 languages with the largest wikis: English, German, French, X, X. These alone should work for many closely related languages. If an appropriate icon for your language is not present in the set, you can follow the instructions below to create the icons for your language. We both encourage and would greatly appreciate your efforts. Please also add your work to the growing set so that others do not have to duplicate your work.

We encourage people to use the icons we have provided for the size and baseline character formatting. We have used the latin letter 'A'.

We have created these icons using the Droid font family. It was developed by Ascender in fall of 2006 explicity for Google and the Open Handset Alliance for use on the Android platform. It was designed for on-screen readability and is licensced under the Apache license. The collection provides an extensive set of styles (including bold and italics of course), weights, and language support (including Western and Eastern European Languages, Cyrillic, Greek, Turkish, as well as glyphs for Chinese, Japanese, and Korean).

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 this page on 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. 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%"
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
Delete the white background layer. Select background layer in Layer menu, and right-click to delete OR drag to the trash.
Go to Image/ Canvas Size and set it to be 22px*22px. Position the letter in the center.
Save this file as a png(-24). Please note the Naming Guidelines

You are done! Please add your icon to this page on Wikimedia 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's height, 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)
Go to Image/ Canvas Size and set it to be 22px*22px. Position the letter in the center.
Save as png. Please note the Naming Guidelines

You are done! Please add your icon to this page on Wikimedia Commons and the Gallery below so others need not duplicate your hard work!

Naming Guideline

Please upload your Icon to this page on 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"

Icon Set + Gallery

Language(s)	Bold Icon	Italics Icon
Universal Roman (Default)
English
German, Swedish, Norwegian, Danish
French
Spanish
Dutch
Portugese
Polish
Chinese
Czech
Indonesian
Telugu
Turkish (tr)
Russian (ru)
Georgian (ka)
Hungarian