Allan Day
aday@gnome.org
Jakub Steiner
Att välja och skapa ikoner.
Anders Jonsson
anders.jonsson@norsjovallen.se 2015, 2018
Sebastian Rasmussen
sebras@gmail.com 2017, 2018

# Skapa ikoner

Denna sida tillhandahåller riktlinjer för de som skapar sina egna ikoner, inkluderande både fullfärgsikoner (typiskt använda för programikoner) och symboliska ikoner (typiskt använda för användargränssnittskomponenter). För en mer allmän överblick över ikonstilar och användning, inklusive de standardikoner som finns tillgängliga, se ikoner och grafik.

# Fullfärgsikoner

Ikonstilen för fullfärgsikoner används främst för programikoner. Den nominella storleken för fullfärgsikoner är 128×128 bildpunkter. Eftersom programikoner ibland visas i lägre upplösning bör de endast innehålla detaljer som kan visas i upplösningen 64×64 bildpunkter: allt som är mer detaljerat än det skulle gå förlorat av filtrering/nedskalning.

Mallen för fullfärgsikoner inkluderar ett 2 bildpunkters rutnät som bör hjälpa dig att undvika att lägga till detaljer som är tunnare än det önskade tröskelvärdet.

## Perspektiv & form

Fullfärgsikoner bör renderas med en enkel ortogonal vy och inget reellt eller isometriskt perspektiv. För att tillhandahålla djup kan en upphöjd effekt tillämpas för att härma Z-axeln. Behåll dock effekten subtil! Att höja objektet mer än 2 detaljenheter (4 nominella bildpunkter) rekommenderas inte.

För att underlätta igenkänning bör varje programikon ha en unik silhuett. För att säkerställa visuell balans med andra programikoner bör dock bildförhållandet inte vara extremt. Väldigt smala eller väldigt breda former bör undvikas.

En rutnätsmall finns tillgänglig för att hjälpa dig placera din ikonkontur. Försök inte täcka ett maximalt område av duken: yttermarginalen bör lämnas tom. Under vissa förutsättningar kan en liten detalj sträckas ut i denna marginalrymd.

## Skuggor

Skuggor kan ritas internt, i en fullfärgsikon, med ljuskällan pekande rakt ovanifrån. Skuggor bör dock inte ritas utanför ikonens huvudsakliga silhuett, då dessa genereras programmatiskt beroende på sammanhanget. Då programikoner presenteras på en vit bakgrund renderas exempelvis en stark slagskugga för att hjälpa till att definiera konturerna.

Versioner av programikoner kan också genereras programmatiskt för utvecklingsbyggen eller nattliga byggen.

## Palett

Nedan ses standardfärgpaletten för GNOME-programikoner.

Blå |
Grön |
Gul |
Orange |
Röd |
Lila |
Brun |
Neutral |

Du har lov att använda olika nyanser av dessa färger beroende på den önskade materialeffekten. Men dessa färger är en god baslinje att utgå från. En palett på GIMP/Inkscape-format finns tillgänglig.

Det rekommenderas att behålla platta ytor oskuggade, men att använda toningar för att beteckna böjda ytor är tillåtet.

# Symboliska ikoner

Symboliska ikoner har en enkel form och ritas inom ett rutnät på 16×16 bildpunkter. De skalas sedan programmatiskt och färgläggs inom användargränssnittet självt.

Identifiera en enstaka egenskap när du letar efter en lämplig metafor för en ikon och fokusera på vad som utmärker idén du vill kommunicera. När du till exempel beskriver en åtgärd som ska utföras på en bild är det inte nödvändigt att repetera idén om en bild i varje ikon. Fokusera istället på vad som är distinkt för varje åtgärd (till exempel: rotera, tagga, justera).

Undvika att använda perspektiv i symboliska ikoner, håll dig till en enkel ortogonal vy.

När ofyllda streck används för en kontur, försök att undvika hårtunna streck (1 bildpunkt) och använd minst 2 bildpunkter breda streck för ikonens huvuddrag.

Symboliska ikoner ändrar färg i exekveringstid för att matcha sammanhanget, på samma sätt som ett stycke text. Även om det finns sätt att ”skugga” delar av en ikon genom att använda genomskinlighet eller att skapa tvåfärgs-/mönsterutmjukning så bör du försöka att undvika dessa så långt som möjligt.

När en metafor bygger på det negativa utrymmet, säkerställ att det även kommer att fungera med inverterade färger. Till exempel kommer en kameralinsreflex endast att fungera om den är ljusare än linsen i sig.

## Storlek och rutnät

Även om symboliska ikoner är skalbara och bör fungera i vilken storlek som helst är den grundläggande dukstorleken 16×16 rutnätsenheter. Du har hela duken att fylla, men notera att ett fyllt rektangulärt objekt kommer att uppfattas som starkare/större när det placeras intill objekt som endast använder tunnare drag. Försök att behålla kontrasten i hela uppsättningen.