DLP/Badges

In an effort to increase public awareness of the Document Liberation Project and open/free file formats, we've created a page containing Badges for linking to the DLP site.



Intro
To work on the badges, you'll want to assemble a few things:


 * The
 * The

After that, you'll probably want to follow our general so that we end up with some consistency in our output. Don't worry -- if you hate the workflow, please suggest something different. It's a meritocracy, after all :-)

When you're done, have a.

Tools
Here's what I use to work on the badges. You don't have to follow me exactly, but we are big on maintaining a workflow that only relies on Free Software, so if you suggest something like "and then in step 3 we run it through Adobe Illustrator...", that ain't gonna fly.

You'll want

Resources
SVG sources, fonts, etc... all live up on ownCloud here:
 * https://owncloud.documentfoundation.org/Common/DLP
 * But you'll want to log-in for upload as well as download, in which case use this url.

As of 2014-04-06, the layout looks like this:

├── graphics/ │  ├── dlp-badges-for-linking.svg      | Contains all of our badges │  ├── output/ │  │   ├── dlp_...png                  | Multiple output files │  │   └── small/ │  │       └── dlp_..._small.png       | Small versions of the output files │  └── shell-command-to-convert-to-small.txt └── source-documents/ ├── Roboto_Condensed.zip           | The fontface used for DLP branding └── testbranding-v4.svg            | Initial SVG branding document

Prep

 * Install the needed software and the Roboto Condensed font
 * Get the using your favorite webDAV client and the correct webDAV url for ownCloud

Inkscape

 * All of the badges are in dlp-badges-for-linking.svg, as this seems easier to me than separate files
 * I set integer-values for the bounding boxes, like 750 x 250, and tried to maintain some consistency between badges
 * (Perhaps consistency between badges isn't necessary?)
 * I used the Export -> Bitmap from bounding box tool to generate large PNGs (e.g. 450x220 px)

ImageMagick/Convert
 * I used the convert tool to do some bulk down-sizing on the command-line. This works pretty well if you make groups of badges that are the same dimensions. See the file shell-command-to-convert-to-small.txt for details.

Silverstripe
 * All of the badges currently live in Files/Uploads/dlp/images/
 * I specified Alt text when I added each one to the Link to us page
 * When we upload SVG and larger PNG files, we should either split-up into SVG/, large/, and small/, or have one directory per image.
 * Working with the images in the sort-of-WYSIWIG Silverstripe editor can be aggravating
 * I sometimes used the HTML editor directly, but be careful to keep the code VERY clean

TODOs

 * Find good workflow to export SVG versions of each badge
 * Use gradients/bezels to make the badges look more like buttons?
 * Enlarge text for better visibility in small badges
 * Tweak the CSS for the blocks on the Link to us page so that they are less obtrusive
 * (e.g. smaller text, perhaps left-aligned)

Beer
(to stub-in)