DLP/Badges

    From The Document Foundation Wiki
    < DLP

    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.

    An example of the type of badge that users and supporters may display on their websites

    Intro

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

    After that, you'll probably want to follow our general #Workflow 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 #Beer.

    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

    Software Version I used (Ubuntu 12.04)
    Nautilus (for a webDAV client) 3.4.2
    Inkscape 0.48.3.1
    ImageMagick 6.6.97
    Bash (for batch operations) 4.2.2

    Resources

    SVG sources, fonts, etc... all live up on ownCloud here:


    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
    

    Workflow

    Prep

    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 <code>..</code> blocks on the Link to us page so that they are less obtrusive
      • (e.g. smaller text, perhaps left-aligned)

    Beer

    (to stub-in)