<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="icon-design" xml:lang="sv">

  <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>Att välja och skapa ikoner.</desc>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Anders Jonsson</mal:name>
      <mal:email>anders.jonsson@norsjovallen.se</mal:email>
      <mal:years>2015, 2018</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Sebastian Rasmussen</mal:name>
      <mal:email>sebras@gmail.com</mal:email>
      <mal:years>2017, 2018</mal:years>
    </mal:credit>
  </info>

<title>Skapa ikoner</title>

<p>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 <link xref="icons-and-artwork">ikoner och grafik</link>.</p>

<section id="full-color-icons">
<title>Fullfärgsikoner</title>

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

<p>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.</p>

<p><link href="https://gitlab.gnome.org/Community/Design/HIG-app-icons/blob/master/template.svg">Mallen för fullfärgsikoner</link> 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.</p>

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

<section id="perspective">
<title>Perspektiv &amp; form</title>

<p>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.</p>

<p>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.</p>

<media type="image" mime="image/png" src="figures/icons/aspect-ratio.svg"/>

<p>En <link href="https://gitlab.gnome.org/Community/Design/HIG-app-icons/raw/master/template.svg">rutnätsmall</link> 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.</p>

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

</section>

<section id="shadows">
<title>Skuggor</title>

<p>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.</p>

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

<p>Versioner av programikoner kan också genereras programmatiskt för utvecklingsbyggen eller nattliga byggen.</p>
</section>

<section id="palette">
<title>Palett</title>

<p>Nedan ses standardfärgpaletten för GNOME-programikoner.</p>

<!-- will chop up into named sections once the colors stabilize -->


<table>
<tr>
<td><p>Blå</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/blue.png"/></td>
</tr>
<tr>
<td><p>Grön</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/green.png"/></td>
</tr>
<tr>
<td><p>Gul</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/yellow.png"/></td>
</tr>
<tr>
<td><p>Orange</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/orange.png"/></td>
</tr>
<tr>
<td><p>Röd</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/red.png"/></td>
</tr>
<tr>
<td><p>Lila</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/purple.png"/></td>
</tr>
<tr>
<td><p>Brun</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/brown.png"/></td>
</tr>
<tr>
<td><p>Neutral</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/neutral.png"/></td>
</tr>
</table>


<p>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 <link href="https://gitlab.gnome.org/Teams/Design/HIG-app-icons/raw/master/GNOME%20HIG.gpl?inline=false">finns tillgänglig</link>.</p>

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

</section>
</section>


<section id="custom-symbolic-icons">
<title>Symboliska ikoner</title>

<p>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.</p>

<list>
<item><p>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).</p></item>
<item><p>Undvika att använda perspektiv i symboliska ikoner, håll dig till en enkel ortogonal vy.</p></item>
<item><p>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.</p></item>
<item><p>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.</p></item>
<item><p>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.</p></item>
</list>

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

<section id="size-and-grid">
<title>Storlek och rutnät</title>

<p>Ä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.</p>

</section>

</section>


<!-- graphic assets TODO
<section id="stock-icons">
<title>GNOME Icon Pack</title>

<p>To avoid starting from scratch, we prepared a selection of commonly used icons you can include in your application, or create derivatives of. The set is licensed CC0, so they can be used regardless of your project's license.</p>

</section>
-->

</page>
