GPG guide/Graphics Howto

Graphics to translate

There are 14 pngs to localize:

SVG name	PNG name	PNG size  (Width x Height)	Thumbnail
donate.svg	donate.png	160 x 45
gnupg-infographic.svg	full-infographic.png	749 x 2933
infographic.svg	infographic-button.png	253 x 300
join.svg	join.png	160 x 49
adele.svg	section3-try-it-out.png	600 x 425
web-of-trust.svg	section4-web-of-trust.png	600 x 436
identity.svg	section5-01-use-it-well.png	600 x 280
section5-02-use-it-well.svg	section5-02-use-it-well.png	600 x 404
elements.svg	section6-next-steps.png	600 x 365
step1a-install-wizard.svg	step1a-install-wizard.png	600 x 438
step1b-01-tools-addons.svg	step1b-01-tools-addons.png	600 x 438
step1b-02-search.svg	step1b-02-search.png	844 x 575
step1b-03-install.svg	step1b-03-install.png	844 x 575	File:Step1b-03-install thumg.png
step2a-01-make-keypair.svg	step2a-01-make-keypair.png	600 x 457

Thumbnails are made from graphics under CC-BY 4.0 licence (or later) by Journalism++

Fonts

You may need to install the following fonts for a proper rendering:

• Dosis
• Archivo Narrow
• Roboto
• PXL-2000-12-0

The fonts are in static.fsf.org/nosvn/enc-dev0/fonts/. Retrieval of PXL-2000 is described in the section Pitfalls.

The location of the fonts depends on the system. The following is for Debian/Ubuntu.

Fonts are stored in subdirectories of /usr/share/fonts/; Roboto goes to freetype/, the other ones to opentype/. After copying them there, you need to update the font database, to let the applications know about the new fonts. This is what the fc-cache command is for.

$ sudo su
# cd /usr/share/fonts/truetype
# mkdir roboto
# cp [path to]/enc/static/fonts/Roboto/* roboto/
# cd ../opentype
# mkdir archivo-narrow dosis pxl-2000
# cp [path to]/enc/static/fonts/ArchivoNarrow/* archivo-narrow/
# cp [path to]/enc/static/fonts/Dosis/* dosis/
# cp [path to]/enc/static/fonts/PXL-pixelfont/* pxl-2000/
# su [normal user]
$ fc-cache -f -v

To edit an SVG and export it to PNG

Edit

• Open the svg in Inkscape (program messages are from the English version).
• Display/Zoom to a convenient size.
• Select the text with the A tool (vertical toolbox) and edit it; adjust the font if needed (T menu, in the horizontal menu bar).
• If the text area takes up too much space and you can't use a narrower font, you can adjust its size:
  • Select the text with the arrow tool at the top of the vertical toolbox (double-click to degroup the image if it is not selected right away).
  • Move the right horizontal scaling arrow (if there is no horizontal arrow on the right side of the text area, it means that you are in the rotation menu; to go back to the scaling menu, click a second time on the text area with the arrow selection tool).

Export to PNG

• Choose menu File/Export Bitmap
  • Export Area: choose "Drawing".
  • Bitmap Size: enter the width of the target png. The height of the target will be automatically calculated. If needed, you can change the Export Area Height to fit the desired target size.
  • Filename: the complete path to the target PNG (make sure that the directory is [...]/enc/static/img/[LANG]/).

Pitfalls

PXL-2000 font

For some reason, this font was added to the git repo in June and immediately removed. You can retrieve it by creating a local branch and resetting it to the relevant commit (dated 2014-06-16 21:21:12, with message "Added the pixel font..."), as follows:

Let's assume you are already at the root of the git repo.

1. Display the history of the static branch.

$ cd static
$ gitk

2. Look for the "Id SHA1" of the relevant commit and write its first 8 digits somewhere. Let's assume they are 13810853.

3. Create a new branch (pxl) and check it out.

$ git checkout -b pxl

4. Reset pxl to the relevant commit.

$ git reset --hard 13810853  (or whatever it is on your system)

5. The PXL font is now in the static/fonts directory. Move it to the root of your home directory to make sure it won't disappear when you switch back to the master branch, or install it right away in the same directory as Dosis and ArchivoNarrow (opentype fonts).

elements.svg (section6-next-steps.png)

There is a small white arrow below the "PRIV" key in the svg. You must first ungroup the elements (select the drawing, then menu Object/Ungroup) before selecting and deleting this white arrow, and then export.

infographic.svg (infographic-button.png)

It's a sub picture of gnupg-infographic.svg. To reveal it, open gnupg-infographic.svg with inkscape, go to menu Layer/Layers…. On the Layers panel, there is a layer named "botao para site". Make it visible.

Help

Feel free to edit the SVGs from the enc/svg/fr/ directory. This may prove useful for infographic.svg (the whole image is in SVG format, extracted from gnupg-infographic.png; the export size doesn't need to be adjusted), and donate.svg or join.svg (the circle can move, which makes it easier to place the text around it; the export size doesn't need to be adjusted).

Next step

Once you have exported the pngs in the right size, you are ready to add them to the static directory. Go back to Graphics Instructions section of the Translation Guide.