<page xmlns="http://projectmallard.org/1.0/" type="topic" id="icons-and-artwork" xml:lang="el">

  <info>

    <credit type="author">

      <name>Allan Day</name>

      <email>aday@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Jakub Steiner</name>

    </credit>

    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>

    <desc>Επιλέξτε και δημιουργήστε εικονίδια.</desc>   

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Ελληνική μεταφραστική ομάδα GNOME</mal:name>

      <mal:email>team@gnome.gr</mal:email>

      <mal:years>2014-2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Δημήτρης Σπίγγος</mal:name>

      <mal:email>dmtrs32@gmail.com</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Θάνος Τρυφωνίδης</mal:name>

      <mal:email>tomtryf@gmail.com</mal:email>

      <mal:years>2014</mal:years>

    </mal:credit>

  </info>

<title>Εικονίδια και καλλιτεχνία</title>

Τα εικονίδια παίζουν έναν σημαντικό ρόλο στις διεπαφές χρήστη: η επιλογή του σωστού εικονιδίου είναι συνεπώς ζωτική για να εξασφαλίσει την αξιοποίηση της εφαρμογής σας. Ένα εικονίδιο ταυτοποίησης είναι επίσης ένα βασικό τμήμα οποιασδήποτε εφαρμογής και είναι ένα βασικό τμήμα της ταυτότητας της.

<section id="using-icons">

<title>Χρήση εικονιδίων στη διεπαφή χρήστη σας</title>

Υπάρχουν πολλές καταστάσεις όταν είναι απαραίτητο να αποφασίσετε μεταξύ της χρήσης ενός εικονιδίου και μιας ετικέτας κειμένου, ιδιαίτερα για κουμπιά. Τα εικονίδια έχουν το πλεονέκτημα να είναι μικρότερα και δεν απαιτούν μετάφραση. Ταυτόχρονα, η εσφαλμένη χρήση ενός εικονιδίου μπορεί να κάνει την διεπαφή σας δύσκολη - ή ακόμα αδύνατη - στην κατανόηση.

<list>

<item>
Χρησιμοποιήστε μόνο τα εικονίδια των οποίων το νόημα είναι γενικά αναγνωρίσιμα. Αν ένα συνηθισμένο αναγνωρίσιμο εικονίδιο δεν είναι διαθέσιμο, μπορεί να είναι καλύτερο να χρησιμοποιήσετε μια ετικέτα κειμένου.

<list>

<item>
Η σύμβαση επιβάλλει ποια εικονίδια θα είναι αναγνωρίσιμα. Αν αμφιβάλλετε, πάρτε τα εικονίδια που χρησιμοποιούνται συχνά σε άλλες εφαρμογές.
</item>

<item>
Εξετάστε ποια εικονίδια θα έχουν νόημα στο συγκεκριμένο περιβάλλον της εφαρμογή σας - οι χρήστες εξειδικευμένων εργαλείων θα είναι συχνά εξοικειωμένοι με τα ειδικά σύμβολα του τομέα.
</item>

</list></item>

<item>
Να θυμάστε ότι κάποια εικονίδια έχουν νόημα μόνο δίπλα σε άλλα εικονίδια του ίδιου τύπου. Παραδείγματος χάρη, ένα εικονίδιο πολυμέσου για σταμάτημα είναι απλά ένα τετράγωνο και δεν μπορεί να ταυτοποιηθεί ως ένα εικονίδιο στάσης χωρίς άλλα στοιχεία ελέγχου πολυμέσων (όπως αναπαραγωγή, παύση, ή παράλειψη) να είναι ορατά και κοντά του. Παρομοίως, το εικονίδιο αφαίρεσης ενός στοιχείου από έναν κατάλογο είναι ένα σύμβολο αφαίρεσης (δηλαδή μια μονή γραμμή) και δεν θα αναγνωριστεί χωρίς ένα αντίστοιχο εικονίδιο προσθήκης με “συν”.
</item>

</list>

</section>

<section id="stock-icons">

<title>Επιλογή από εικονίδια παρακαταθήκης GNOME</title>

Το GNOME δίνει ένα πλήρες σύνολο καθιερωμένων εικονιδίων. Αυτά πρέπει να χρησιμοποιηθούν όποτε είναι κατάλληλα· προσπαθήστε να αποφύγετε τη δημιουργία προσαρμοσμένων εικονιδίων εκτός και είναι απολύτως αναγκαίο.

Ακολουθήστε την προδιαγραφή ονομασίας του εικονιδίου όταν επιλέγετε ποια εικονίδια θα χρησιμοποιήσετε - το όνομα του εικονιδίου πρέπει να απεικονίζει ποιος είναι ο σκοπός του εικονιδίου στην επικοινωνία. Αυτό είναι σημαντικό για αυτούς που χρησιμοποιούν έναν αναγνώστη οθόνης.

Μπορείτε να χρησιμοποιήσετε τον περιηγητή εικονιδίων του GTK+ για να βρείτε τα συνιστώμενα εικονίδια.

<section id="color-vs-symbolic">

<title>Χρωματιστά - συμβολικά εικονιδία</title>

Το GNOME 3 παρέχει δύο τύπους εικονιδίων: συμβολικά εικονίδια πλήρους χρώματος και μονόχρωμα. Οι οδηγίες σε αυτό το HIG δείχνουν πότε θα χρησιμοποιηθεί ποιος τύπος εικονιδίου. Τα παρακάτω είναι ένας γενικός οδηγός.

Τα εικονίδια πλήρους χρώματος πρέπει να χρησιμοποιούνται για:

<list>

<item>
συσκευές
</item>

<item>
τύποι αρχείων/mime
</item>

<item>
εικονίδια εφαρμογών (εκκινητής)
</item>

</list>

Όλα τα άλλα εικονίδια πρέπει να χρησιμοποιούν την τεχνοτροπία του συμβολικού εικονιδίου. Επιπλέον, τα συμβολικά εικονίδια πρέπει να χρησιμοποιούνται πάντα μέσα σε:

<list>

<item>
κουμπιά
</item>

<item>
λίστες
</item>

<item>
πεδία εισαγωγής
</item>

<item>
όταν το παρασκήνιο είναι ημί-διαφανές (όπως επικαλλυμένα πολυμέσα ή έλεγχοι πλήρης οθόνης)
</item>

</list>

</section>

</section>

<section id="application-icons">

<title>Εικονίδια εφαρμογής</title>

Κάθε εφαρμογή πρέπει να έχει ένα μοναδικό και όμορφο εικονίδιο εφαρμογής. Είναι το πρόσωπο της εφαρμογής και το πρώτο οπτικό στοιχείο που βλέπει ένας χρήστης κατά την περιήγηση για νέες εφαρμογές. Η <link xref="application-basics">σελίδα βασικών της εφαρμογής</link> περιλαμβάνει λεπτομέρειες στο τι είναι μια εφαρμογή και πότε να παρέχετε ένα εικονίδιο εφαρμογής.

Επειδή τα εικονίδια εφαρμογής εμφανίζονται σε μεγαλύτερα μεγέθη, τα παλιά εικονίδια με τεχνοτροπία Tango 48x48 px ή SVG δεν αρκούν πια (τους λείπει η λεπτομέρεια). Είναι βασικό η εφαρμογή σας να έχει ένα εικονίδιο 256x256 px. Με την εμφάνιση των οθονών με υψηλό DPI, συνιστάται μια παραλλαγή 512x512 px.

<media type="image" mime="image/png" src="figures/icons/sizes.png"/>

Αν και δεν είναι κρίσιμο, υπάρχουν ακόμα περιοχές όπου τα εικονίδια εφαρμογών εμφανίζονται με μικρό μέγεθος. Για να κρατήσετε το εικονίδιο ευδιάκριτο και καλά σχεδιασμένο, απαιτείται μια συγκεκριμένη απόδοση σε μεγέθη 48x48 px, 32x32 px, 24x24 px και 16x16 px. Πολλά εικονίδια GNOME αποστέλλονται επίσης με μέγεθος 22x22 px για λόγους συμβατότητας, αλλά αυτό δεν απαιτείται.

<media type="image" mime="image/png" src="figures/icons/sizes-small-24.png"/>

Για να διατηρήσετε την φρεσκάδα, απορρίπτεται πολλή λεπτομέρεια για τις παραλλαγές χαμηλής ανάλυσης και μια πινελιά 1px χρησιμοποιείται ως περίγραμμα της μορφής του αντικειμένου.

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

</section>

<section id="custom-symbolic-icons">

<title>Προσαρμοσμένα συμβολικά εικονίδια</title>

Τα συμβολικά εικονίδια έχουν μια απλή μορφή και σχεδιάζονται μέσα σε ένα πλέγμα 16x16. Κλιμακώνονται έπειτα προγραμματιστικά και χρωματίζονται μέσα στην ίδια την διεπαφή χρήστη.

<list>

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

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

<item>
Τα γεμάτα σχήματα είναι γενικά πιο γρήγορα στην επεξεργασία από το ανθρώπινο οπτικό σύστημα από τα περιγράμματα δικτυώματος.
</item>

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

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

</list>

<media type="image" mime="image/svg" src="figures/icons/inverting.svg"/>

<section id="size-and-grid">

<title>Μέγεθος και πλέγμα</title>

Ενώ τα εικονίδια είναι κλιμακώσιμα και πρέπει να δουλεύουν με οποιοδήποτε μέγεθος, το βασικό μέγεθος του καμβά είναι 16x16 μονάδες πλέγματος. Πρέπει να γεμίσετε όλο τον καμβά, αλλά σημειώστε ότι ένα γεμάτο ορθογώνιο αντικείμενο θα εμφανιστεί πιο ισχυρό/μεγάλο όταν τοποθετηθεί δίπλα σε στοιχεία που χρησιμοποιούν μόνο πιο λεπτές πινελιές. Προσπαθήστε να διατηρήσετε την αντίθεση ολόκληρου του συνόλου.

</section>

</section>

<section id="custom-full-color-icons">

<title>Προσαρμοσμένα εικονίδια πλήρους χρώματος</title>

Τα εικονίδια πλήρους χρώματος σχεδιάζονται και αποδίδονται με μια ποικιλία προκαθορισμένων μεγεθών.

<section id="perspective">

<title>Προοπτική</title>

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

</section>

<section id="palette">

<title>Παλέτα</title>

Χρησιμοποιήστε την χρωματική παλέτα Tango κατά τη σχεδίαση εφαρμογής πλήρους χρώματος ή εικονιδίων συσκευής.

Χρώμα βουτύρου

<media type="image" mime="image/svg" src="figures/icons/palette/butter.svg"/>

Δαμασκηνί

<media type="image" mime="image/svg" src="figures/icons/palette/plum.svg"/>

Πορτοκάλι

<media type="image" mime="image/svg" src="figures/icons/palette/orange.svg"/>

Έντονο κόκκινο

<media type="image" mime="image/svg" src="figures/icons/palette/scarlet-red.svg"/>

Σοκολατί

<media type="image" mime="image/svg" src="figures/icons/palette/chocolate.svg"/>

Χρώμα αλουμινίου

<media type="image" mime="image/svg" src="figures/icons/palette/aluminium1.svg"/>

Χρώμα χαμαιλέοντα

<media type="image" mime="image/svg" src="figures/icons/palette/chameleon.svg"/>

<media type="image" mime="image/svg" src="figures/icons/palette/aluminium2.svg"/>

Ουρανί

<media type="image" mime="image/svg" src="figures/icons/palette/sky-blue.svg"/>

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

</section>

</section>

<section id="see-also">

<title>Δείτε επίσης</title>

<link href="http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines">Οδηγίες εικονιδίων Tango</link>

</section>

</page>