Projects/Oxygen/Style: Difference between revisions

    From KDE TechBase
    No edit summary
    Line 5: Line 5:
    Oxygen icons are all scalable vector graphics (SVG) documents, which is the default format used by [http://inkscape.org Inkscape]. These SVG files are used to render bitmap images (PNG) at various sizes.  
    Oxygen icons are all scalable vector graphics (SVG) documents, which is the default format used by [http://inkscape.org Inkscape]. These SVG files are used to render bitmap images (PNG) at various sizes.  


    Oxygen uses the 128x128 'pixel' SVG files to produce icons at 5 different sizes: 128x128, 64x64, 48x48, 32x32 and 16x16 pixel images. 88x88 'pixel' SVG files are used to render at 22x22 pixels.  
    Oxygen uses the 128x128 'pixel' SVG files to produce icons at 5 different sizes: 128x128, 64x64, 48x48, 32x32 and 16x16 pixel images. 88x88 'pixel' SVG files are used to render at 22x22 pixels. Optionally, 16x16 pixel icons can be created in a 64x64 'pixel' SVG file.


    For icons that are designed to be rendered at 32x32, 22x22 and 16x16 it is crucial that icons have a noticeable outline, to improve legibility.
    For icons that are designed to be rendered at 32x32, 22x22 and 16x16 it is crucial that icons have a noticeable outline, to improve legibility.


    Various templates are provided to assist you in creating Oxygen icons. They are linked to below.
    {{note|Only action icons ''require'' the shadow at the bottom of the icon. For all other types you may remove this shadow.}}


    === 16x16 ===
    === 16x16 ===
    Line 15: Line 19:
    *Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
    *Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
    *Set the grid to 8 pixels
    *Set the grid to 8 pixels
    *Preview the icon by zooming out to 13%
    *Preview the icon by zooming out to 13%  
    **Quickly tap the minus key six times


    '''Or:'''
    '''Or:'''
    Line 21: Line 26:
    *Use an Inkscape document with dimensions of 64x64 pixels
    *Use an Inkscape document with dimensions of 64x64 pixels
    *Set the grid to 4 pixels
    *Set the grid to 4 pixels
    *Preview the icon by zooming out to 25%
    *Preview the icon by zooming out to 25%  
    **Quickly tap the minus key four times


    === 22x22 ===
    === 22x22 ===
    *Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_22x22.template.svg 22x22 template].
    *Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_22x22.template.svg 22x22 template].
    *Set the grid to 4 pixels
    *Set the grid to 4 pixels
    *Preview the icon by zooming out to 25%
    *Preview the icon by zooming out to 25%  
    **Quickly tap the minus key four times


    === 32x32 ===
    === 32x32 ===
    *Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
    *Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
    *Set the grid to 4 pixels
    *Set the grid to 4 pixels
    *Preview the icon by zooming out to 25%
    *Preview the icon by zooming out to 25%  
    **Quickly tap the minus key four times
     
    === 48x48 ===
    *Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
     
    === 64x64 ===
    *Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
    *Set the grid to 4 pixels
    *Preview the icon by zooming out to 50%
    **Press the '2' key
     
    === 128x128 ===
    *Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
    *Set the grid to 1 pixel
    *Preview the icon by zoom to 100%
    **Press the '1' key


    == Color Usage ==
    == Color Usage ==
    Line 41: Line 64:
    The Oxygen color palette is released under the [http://creativecommons.org/licenses/by-nc-nd/2.5/ Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License].}}
    The Oxygen color palette is released under the [http://creativecommons.org/licenses/by-nc-nd/2.5/ Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License].}}


    You can easily use the Oxygen Colour scheme by downloading the palette.  To download the Oxygen Palette [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/utils/oxygen.gpl Click here]
    You can easily use the Oxygen Colour scheme in Inkscape by downloading the palette.  To download the Oxygen Palette [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/utils/oxygen.gpl Click here]




    Line 76: Line 99:
    Emblems are icons overlaid on top of other icons. Examples of Emblems are the "'link arrow' and the 'mounted star' symbol. These icons should be noticeable but not detract and cover too much of the icon beneath them.
    Emblems are icons overlaid on top of other icons. Examples of Emblems are the "'link arrow' and the 'mounted star' symbol. These icons should be noticeable but not detract and cover too much of the icon beneath them.


    {{Box|Mounted Emblem|[[Image:Oxygen-128-emblem-mounted.png|center]]
    ''The mounted emblem uses the vibrant colours from the Oxygen palette. The form of the icon itself is very simple and clear.''}}
    === Exporting the PNG bitmaps ===
    You can use inkscape to create PNG bitmap images of your icon.


    #Press <tt><Ctrl> + <Shift> + E</tt>, or select 'Export Bitmap' from the File menu.
    #Select the 'Page' button to export everything inside the page's borders
    #Enter the width of the icon you wish to output to. If you press the 'Return/Enter' key, Inkscape will fill the height and resolution/dpi boxes for you
    #Enter the path filename of your Icon. Don't forget to use the [http://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html Icon Naming Specification]. Also refer to the KDE TechBase article here - [[Projects/Oxygen/namingSpec]]


    {{Box|Mounted Emblem|[[Image:Oxygen-128-emblem-mounted.png|center]]


    ''The mounted emblem uses the vibrant colours from the Oxygen palette. The form of the icon itself is very simple and clear.''}}


    [[Category:Artwork]][[Category:Oxygen]]
    [[Category:Artwork]][[Category:Oxygen]]

    Revision as of 14:58, 26 April 2007

    Oxygen Icon Style Guide

    Warning
    The Oxygen Icon Style is currently a work in progress: This is the newest version, but several sections need expanding.


    Oxygen's Approach to Icon Sizes

    Oxygen icons are all scalable vector graphics (SVG) documents, which is the default format used by Inkscape. These SVG files are used to render bitmap images (PNG) at various sizes.

    Oxygen uses the 128x128 'pixel' SVG files to produce icons at 5 different sizes: 128x128, 64x64, 48x48, 32x32 and 16x16 pixel images. 88x88 'pixel' SVG files are used to render at 22x22 pixels. Optionally, 16x16 pixel icons can be created in a 64x64 'pixel' SVG file.

    For icons that are designed to be rendered at 32x32, 22x22 and 16x16 it is crucial that icons have a noticeable outline, to improve legibility.


    Various templates are provided to assist you in creating Oxygen icons. They are linked to below.

    Note
    Only action icons require the shadow at the bottom of the icon. For all other types you may remove this shadow.


    16x16

    Either:

    • Use the 32x32 template
    • Set the grid to 8 pixels
    • Preview the icon by zooming out to 13%
      • Quickly tap the minus key six times

    Or:

    • Use an Inkscape document with dimensions of 64x64 pixels
    • Set the grid to 4 pixels
    • Preview the icon by zooming out to 25%
      • Quickly tap the minus key four times

    22x22

    • Use the 22x22 template.
    • Set the grid to 4 pixels
    • Preview the icon by zooming out to 25%
      • Quickly tap the minus key four times

    32x32

    • Use the 32x32 template
    • Set the grid to 4 pixels
    • Preview the icon by zooming out to 25%
      • Quickly tap the minus key four times

    48x48

    64x64

    • Use the 32x32 template
    • Set the grid to 4 pixels
    • Preview the icon by zooming out to 50%
      • Press the '2' key

    128x128

    • Use the 32x32 template
    • Set the grid to 1 pixel
    • Preview the icon by zoom to 100%
      • Press the '1' key

    Color Usage

    Oxygen has a distinct, defined palette which should always be adhered to.

    Note
    The Oxygen color palette is released under the Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.


    You can easily use the Oxygen Colour scheme in Inkscape by downloading the palette. To download the Oxygen Palette Click here


    1. Close Inkscape, if you have it running
    2. Place 'oxygen.gpl' in this folder: ~/.inkscape/palettes/
    3. Start Inkscape
    4. Select the Oxygen palette in the Swatches dialog (Ctrl+Shift+W).

    Metaphors/Styles for different icon types

    Actions

    Action icons require a distinctive 1 pixel solid outline. Action icons are drawn to appear as they are on a shelf. This means that a small shadow is drawn directly beneath the icon.

    The templates linked above include this shadow, therefore consistancy is ensured.

    Applications

    Application icons vary the most in style from cartoonish logos to photo-realistic (example and explanation needed)

    Mimetypes

    Mimetypes all use the same paper sheet template (example and explanation needed)

    Devices

    Devices are the most realistic of all icons (example and explanation needed)

    Places

    Places icons vary in style depending on whether the subject at hand can be defined by a physical object.

    Emblems

    Emblems are icons overlaid on top of other icons. Examples of Emblems are the "'link arrow' and the 'mounted star' symbol. These icons should be noticeable but not detract and cover too much of the icon beneath them.


    The mounted emblem uses the vibrant colours from the Oxygen palette. The form of the icon itself is very simple and clear.
    Mounted Emblem


    Exporting the PNG bitmaps

    You can use inkscape to create PNG bitmap images of your icon.

    1. Press <Ctrl> + <Shift> + E, or select 'Export Bitmap' from the File menu.
    2. Select the 'Page' button to export everything inside the page's borders
    3. Enter the width of the icon you wish to output to. If you press the 'Return/Enter' key, Inkscape will fill the height and resolution/dpi boxes for you
    4. Enter the path filename of your Icon. Don't forget to use the Icon Naming Specification. Also refer to the KDE TechBase article here - Projects/Oxygen/namingSpec