1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="icon-design" xml:lang="cs">
<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>Jak vybrat a vytvořit ikony.</desc>
</info>
<title>Vytváření ikon</title>
<p>Tato stránka poskytuje pokyny pro vytváření svých vlastních ikon, a to jak plnobarevných (typicky používaných jako ikony aplikací), tak symbolických (typicky používaných pro ovládací prvky uživatelského rozhraní). Obecnější přehled o stylech ikon a jejich použití, včetně seznamu dostupných standardních ikon, najdete v kapitole <link xref="icons-and-artwork">Ikony a grafika</link>.</p>
<section id="full-color-icons">
<title>Plnobarevné ikony</title>
<media type="image" mime="image/png" src="figures/icons/shading.svg"/>
<p>Plnobarevný styl ikon se nejběžněji používá pro ikony aplikací. Nominální velikost plnobarevných ikon je 128 × 128 px. Protože se ale ikony aplikací občas zobrazují i v nižším rozlišení, měly by mít detaily jen do té míry, aby byly použitelné při rozlišení 64 × 64 – drobnější detaily se mohou ztratit při filtrování/zmenšování.</p>
<p><link href="https://gitlab.gnome.org/Community/Design/HIG-app-icons/blob/master/template.svg">Šablona plnobarevné ikony</link> obsahuje 2px mřížku, která by měla pomoci se vyvarovat přidávání detailů drobnějších, než je požadovaná mez.</p>
<media type="image" mime="image/png" src="figures/icons/sizes.svg"/>
<section id="perspective">
<title>Perspektiva a stíny</title>
<p>Plnobarevné ikony by měly být namalované v jednoduché ortogonální projekci, bez skutečné nebo isometrické perspektivy. Pro poskytnutí hloubky vjemu je možné použít efekt vyzdvižení, který napodobí osu Z. Používejte ale prosím tento efekt decentně. Nedoporučuje se vyzdvihnout objekt o více jak dvě detailní jednotky (4 nominální pixely).</p>
<p>Pro usnadnění rychlého rozpoznání aplikace, by každá ikona měla mít jedinečnou siluetu. Zároveň by ale měla být vizuálně v rovnováze s ostatními ikonami aplikací, bez extrémního poměru stran. Vyvarujte se velmi úzkých nebo naopak velmi širokých tvarů.</p>
<media type="image" mime="image/png" src="figures/icons/aspect-ratio.svg"/>
<p>Pro správné umístění obrysů vaší ikony je k dispozici <link href="https://gitlab.gnome.org/Community/Design/HIG-app-icons/raw/master/template.svg">šablona s mřížkou</link>. Nesnažte se zaplnit plátno až do krajů – vnější okraj by měl zůstat prázdný. Za jistých okolností do něj ale mohou zasahovat některé drobné detaily.</p>
<media type="image" mime="image/png" src="figures/icons/whitespace.svg"/>
</section>
<section id="shadows">
<title>Stíny</title>
<p>Stíny můžete namalovat uvnitř plnobarevné ikony, vržené jakoby zdrojem světla nasměrovaným přímo shora. Neměli byste ale malovat stíny přesahující hlavní obrys ikony, protože takovéto stíny jsou generované programově podle kontextu. Když je například ikona zobrazena na bílém pozadí, je vykreslen silný vržený stín, aby pomohl zdůraznit obrysy.</p>
<media type="image" mime="image/png" src="figures/icons/dropshadow.png"/>
<p>Verze aplikačních ikon mohou být programově generované také pro vývojová nebo noční sestavení.</p>
</section>
<section id="palette">
<title>Paleta</title>
<p>Následuje základní paleta barev pro ikony aplikací GNOME.</p>
<!-- will chop up into named sections once the colors stabilize -->
<table>
<tr>
<td><p>Modrá</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/blue.png"/></td>
</tr>
<tr>
<td><p>Zelená</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/green.png"/></td>
</tr>
<tr>
<td><p>Žlutá</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/yellow.png"/></td>
</tr>
<tr>
<td><p>Oranžová</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/orange.png"/></td>
</tr>
<tr>
<td><p>Červená</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/red.png"/></td>
</tr>
<tr>
<td><p>Fialová</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/purple.png"/></td>
</tr>
<tr>
<td><p>Hnědá</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/brown.png"/></td>
</tr>
<tr>
<td><p>Neutrální</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/neutral.png"/></td>
</tr>
</table>
<p>Můžete volně používat jakékoliv odstíny z těchto barev, podle toho jakého materiálového efektu potřebujete dosáhnout. Je ale dobré z těchto základních barev vycházet. K <link href="https://gitlab.gnome.org/Teams/Design/HIG-app-icons/raw/master/GNOME%20HIG.gpl?inline=false">dispozici je</link> paleta ve formátu GIMP/Inkscape.</p>
<p>Doporučuje se plochý nestínovaný vzhled povrchu, ale jsou povolené barevné přechody pro vyznačení zakřivení povrchu.</p>
</section>
</section>
<section id="custom-symbolic-icons">
<title>Symbolické ikony</title>
<p>Symbolické ikony mají jednodušší podobu a jsou nakreslené v mřížce 16 × 16 pixelů. Programově jsou pak škálované a obarvované přímo uživatelským prostředím.</p>
<list>
<item><p>Při hledání příhodné metafory pro ikonu se rozhodněte pro jednu vlastnost. Snažte se při tom zaměřit na to, co odlišuje myšlenku, kterou se snažíte sdělit. Například, když popisujete činnost, která se provádí na obrázku, není potřeba na každé ikoně opakovat myšlenku obrázku. Místo toho se zaměřte na to, co odlišuje jednotlivé činnosti (ku příkladu otočení, štítek, zarovnání).</p></item>
<item><p>U symbolických ikon nepoužívejte žádnou perspektivu, držte se jednoduché ortogonální projekce.</p></item>
<item><p>Pokud použijete nevyplněný obrys, snažte se vyhnout vlasové 1px čáře a hlavní tvar ikony obtáhněte alespoň 2px obrysem.</p></item>
<item><p>Symbolické ikony jsou za běhu obarvované, aby zapadaly do kontextu, podobně jako zobrazovaný text. Takže, i když existují způsoby, jak pomocí průhlednosti nebo vzorku „vystínovat“ část ikony, snažte se tomu v maximální možné míře vyhnout.</p></item>
<item><p>Pokud metafora závisí ne negativní ploše, ověřte si, že bude fungovat i s inverzními barvami. Například, důraz/zvýraznění objektivu fotoaparátu bude fungovat jen v případě, že tělo bude světlejší než objektiv.</p></item>
</list>
<media type="image" mime="image/svg" src="figures/icons/inverting.svg"/>
<section id="size-and-grid">
<title>Velikost a mřížka</title>
<p>I když jsou symbolické ikony škálovatelné a měly by fungovat v libovolné velikosti, základní plátno má velikost 16 × 16 jednotek mřížky. Pro kresbu máte k dispozici celé plátno, ale pamatujte, že vyplněné obdélníkové objekty vypadají vedle objektů, které používají jen tenčí obrysy, mnohem silnější/větší. Snažte se dodržet stejný kontrast napříč celou sadou ikon.</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>
|
