Allan Day
aday@gnome.org
Jakub Steiner
Επιλέξτε και δημιουργήστε εικονίδια.
Ελληνική μεταφραστική ομάδα GNOME
team@gnome.gr 2014-2015
Δημήτρης Σπίγγος
dmtrs32@gmail.com 2015
Θάνος Τρυφωνίδης
tomtryf@gmail.com 2014

# Creating icons

This page provides guidelines for those creating their own icons, including both full-color icons (typically used for application icons) and symbolic icons (typically used for user interface controls). For a more general overview of icon styles and usage, including the stock icons that are available, see icons and artwork.

# Full-color icons

The full-color icon style is most commonly used for application icons. The nominal size of full-color icons is 128×128px. However, because application icons are sometimes presented at lower resolutions, they should only feature detail that is presentable at 64×64px resolution: anything more detailed would get lost by filtering/scaling down.

The full-color icon template includes a 2px grid which should help you avoid adding detail that's finer than the desired threshold.

## Perspective & shape

Full-color icons should be rendered with a simple orthogonal view and no real or isometric perspective. To provide depth a raised effect can be applied to mimic the Z-axis. Please keep the effect subtle though! Raising the object more than 2 detail units (4 nominal pixels) is not recommended.

In order to aid recognition, each application icon should have a unique silhouette. However, to ensure visual balance with other application icons, the aspect ratio should not be extreme. Very narrow or very wide shapes should be avoided.

A grid template is available to assist with placing your icon outline. Do not try to cover a maximum area of the canvas: the outside margin should be left empty. In some circumstances a small detail can be extended into this margin space.

## Shadows

Shadows can be drawn internally, within a full-color icon, with the light source pointing straight from above. However, shadows should not be drawn outside the main silhouette of the icon, as these are generated programmatically based on the context. When app icons are presented on a white background, for example, a strong drop shadow is rendered to help define the contours.

Versions of application icons can also be programmatically generated for development or nightly builds.

## Παλέτα

Below is the baseline GNOME app icon color palette.

Blue |
Green |
Yellow |
Πορτοκάλι |
Red |
Purple |
Brown |
Neutral |

You are free to use different shades of these colors depending on the desired material effect. However, these primary colors are a good baseline to start from. A GIMP/Inkscape format palette is available.

It is recommended to keep flat surfaces unshaded, but using gradients to signify bent surfaces is allowed.

# Symbolic icons

Symbolic icons have a simple form and are drawn within a 16×16 pixel grid. They are then programmatically scaled and colored within the user interface itself.

Αναγνωρίστε μια μοναδική ιδιότητα όταν αναζητάτε μια κατάλληλη μεταφορά για ένα εικονίδιο και εστιάστε στο τι διακρίνει την ιδέα που θέλετε να μεταβιβάσετε. Παραδείγματος χάρη, όταν περιγράφετε την εκτέλεση μιας ενέργειας σε μια εικόνα, δεν είναι αναγκαίο να επαναλάβετε την ιδέα μιας εικόνας σε κάθε εικονίδιο. Αντίθετα, εστιάστε στο τι ξεχωρίζει κάθε ενέργεια (Παραδείγματος χάρη: περιστροφή, ετικέτα, στοίχιση).

Αποφύγετε τη χρήση προοπτικής σε συμβολικά εικονίδια, να επιμείνετε σε μια απλή ορθογώνια προβολή.

When using unfilled strokes for an outline, try avoiding hairline (1px) and do at least a 2px stroke for the main feature of the icon.

Τα συμβολικά εικονίδια επαναχρωματίζονται κατά τον χρόνο εκτέλεσης για να ταιριάζουν με το περιβάλλον, παρόμοια με ένα κομμάτι κειμένου. Ενώ υπάρχουν τρόποι να “σκιάσετε” μέρη ενός εικονιδίου χρησιμοποιώντας αδιαφάνεια ή δημιουργώντας ανάμειξη διτονική/μοτίβου, προσπαθήστε να το αποφύγετε όσο το δυνατόν.

Όταν μια μεταφορά βασίζεται σε αρνητικό χώρο, βεβαιωθείτε ότι θα δουλέψει με τα ανεστραμμένα χρώματα. Παραδείγματος χάρη ένας φακός φωτογραφικής μηχανής με φασματοσκόπιο/τονισμό θα δουλέψει μόνο αν είναι πιο ανοιχτόχρωμος από τον ίδιο τον φακό.

## Μέγεθος και πλέγμα

While symbolic icons are scalable and should work at any size, the basic canvas size is 16×16 grid units. You have the whole canvas to fill, but note that a filled rectangular object will appear stronger/larger when placed next to items that only use thinner strokes. Try to keep the contrast of your whole set.