Jak ikony nedělat

V úvodu uvedu postupy tvorby ikon, se kterými jsem se setkal na internetu a o kterých si myslím, že jsou špatné či nepoužitelné, samozřejmě s udáním důvodu.

PNG, GIF, BMP + přepis přípony na ICO

Tento způsob spočívá ve vytvoření ikonky ve formátu PNG, GIF nebo BMP a prostém přepsání názvu přípony na ICO.

Proč je to špatně: Na první pohled tento způsob vypadá funkčně. Funguje bezvadně ve Firefoxu, Opeře a Chrome. Ve verzi s PNG je plně využito kvalit tohoto formátu, zejména průhlednost přes alfa kanál, takže okraje kruhu jsou bez nepřesností. Kamenem úrazu této metody je nefunkčnost ve všech verzích Internet Exploreru (včetně nejnovější verze 8). Skutečný formát ICO nabízí stejně možností jako PNG, takže není nutné používat tyto přepisovací náhražky, které navíc nefunguji v IE.

V Opeře v pořádku, v IE8 nikoliv

PNG, GIF, BMP + uvedení odkazu a typu v hlavičce

Při tomto způsobu použijeme originální soubory BMP, GIF nebo PNG a v hlavičce HTML stránky přidáme odkaz na tuto ikonu jedním z následujících kó­dů:

<link rel="icon" href="/favicon.bmp" type="image/bmp" />
<link rel="icon" href="/favicon.gif" type="image/gif" />
<link rel="icon" href="/favicon.png" type="image/png" />

Proč je to špatně: Stejně jako v předchozím případě je tato metoda funkční ve Firefoxu, Opeře i Chrome, ale nefunguje v žádném Internet Exploreru.

Jaký je tedy správný způsob?

Průhledná vs. neprůhledná

Při vytváření ikonky ve skutečném ICO formátu uvedu 2 možnosti. Jedna se dá použít pouze pro ikonky bez průhlednosti a druhá se dá použít pro verzi bez i s průhledností.

Průhledná vs. neprůhledná v různých prohlížečích

Png2ico converter

Pomocí tohoto konvertoru můžete jednoduše zkonvertovat PNG soubor s vaší ikonkou do formátu ICO. Program sice nepodporuje průhlednost, ale zase umí v případě potřeby do jednoho souboru uložit i ikonku ve velikosti 32×32px. Program je ke stažení zdarma na těchto stránkách. Použití programu je velmi jednoduché. V libovolném grafickém editoru si připravíte svou ikonku ve velikosti 16×16px (případně i 32×32px) a jedním z následujících příkazů v příkazové řádce provedete konverzi:

png2ico.exe favicon.ico ico16x16.png ico32x32.png
png2ico.exe favicon.ico ico16x16.png

IcoFX editor

Druhou možností je využít freeware editor IcoFX. Jedná se o vynikající program, který podporuje tvorbu ikon v 32 bitové barevné hloubce s podporou průhledností přes alfa kanál (takže vaše průhledné ikonky nebudou mít nevzhledně zvýrazněné zakulacené hrany). Nechybí možnost do jednoho souboru vložit více variant ikon. Ikony můžete nakreslit buď přímo v editoru, nebo v libovolném jiném programu a do IcoFX naimportovat například PNG.

16px vs. 32px

Klasická favicona má mít rozměr 16×16px. Nicméně do jednoho souboru se dá uložit i více ikon, což podporují oba výše uvedené programy. A k čemu že to je dobré? Často se mimo klasický rozměr přidává ještě velikost 32×32px, který je využit, když například v Internet Exploreru uložíme odkaz na stránku na plochu. Toto použití je celkem diskutabilní, nemám informace o tom, jak moc se to využívá, takže přidání tohoto rozměru je čistě na vás.

Odkaz na web na ploše

Závěr

Snad vám tento článek něco dal. Samozřejmě existuje spousta dalších způsobů. Například různé online generátory, u kterých mám ale špatné zkušenosti právě s průhledností. Mnou používané metody mám vyzkoušené a zatím jsem nenarazil na žádný problém.

Ikonky

Jako první začnu ikonkami. Narazil jsem na spoustu zajímavých ikon na stránkách webdesgnéra Marka Jamese. Mezi nejpodařenější patří sada Silk icon s více než 700 ikonami ve formátu PNG a velikosti 16×16px. Tyto ikony se hodí spíše do GUI různých programů, ale své uplatnění určitě naleznou i na poli webdesignu (některé z ikon jsem použil např. ve své bakalářské práci).

Silk icon

Další set od stejného autora s názvem Flags icon nabízí soubor 247 vlajek států ve velikosti 16×11px. Ikonky jsou přehledně pojmenovány podle ISO kódů daných zemí. O kvalitě těchto ikon svědčí i to, že jsou často k vidění na různých (i renomovaných) webech. Zrovna si ale nemůžu vybavit, kde jsem je naposled viděl…

Další zdroj se týká RSS ikon. Na webu Feed Icons naleznete „oficiální“ RSS ikonu v mnoha formátech i velikostech. Z tohoto webu je například ikonka vpravo nahoře na tomto blogu.

Poslední zdroj týkající se ikonek není přímo hotová sada, nýbrž tutoriál. Na serveru Grafika.cz naleznete Photoshop tutoriál Tvorba ikonky programu Parallels od Václava Krejčího, který mimo jiné napsal knihu Adobe Photoshop: design grafiky GUI. Ale zpět k tutoriálu, který je opravdu kvalitně napsaný, doporučuji přečíst i jeho další tutoriály.

Grafika

Na webu Urban Dirty naleznete spoustu „dirty“ textur, které by mohly najít využití na některých specifických projektech.

Státní vlajky ve velkém rozlišení

Když jsem se v předchozím textu zmiňoval o ikonkách vlajek států, tak teď trochu navážu. Narazil jsem na zajímavý projekt Státní vlajky, kde jsou k dispozici státní vlajky ve velkém rozlišení.

Písma

Fontů bude tentokrát méně. Za zmínku určitě stojí projekt České fonty, kde je výběr těch nejlepších fontů, které obsahují české znaky. Další zajímavé fonty se dají najít také na webu Fawnt, nyní však již bez češtiny.

Užitečné nástroje

Velmi užitečný nástroj se skrývá pod názvem Browsershots. Zde stačí vyplnit adresu internetové stránky, vybrat požadované prohlížeče a aplikace vám zobrazí screenshoty zadaných stránek ve vybraných prohlížečích. Těch je na výběr opravdu velké množství ze všech hlavních platforem. Doplňkově se dá nastavit také testování v určitém rozlišení, povolit či zakázat Javascript, Flash nebo Javu. Výsledné screenshoty lze procházet buď podle jednotlivých prohlížečů, nebo si můžete stáhnout všechny obrázky v jednom zipu.

Ukázka aplikace Browsershots

Rychlost vygenerování závisí na vytížení strojů. Některé prohlížeče jsou hotové rychle, jiné zase mohou trvat třeba půl hodiny. Služba je zadarmo, je však možnost si koupit placený účet, který má výhodu v tom, že vaše požadavky budou vyřízeny přednostně.

Původní a nový design tohoto blogu

Aktualizace 18.7.

Trochu jsem ještě vylepšil hlavičku, sjednotil barvy odkazů a provedl několik dalších drobných změn.

Nový design je oproti tomu předchozímu barevnější a také je širší. Původní web byl laděn do šedé barvy, což se k Poldovi moc nehodilo. V novém webu je použito modro-hnědé barevné schéma, jednotlivé kategorie v menu jsou doplněny intuitivními piktogramy a také bylo celkově zvětšeno písmo.

Web byl také zvětšen na šířku, původní verze byla široká cca 650px, což už je na dnešní LCD či monitory malá hodnota. Pro novou verzi byla zvolena šířka 960px, která nabízí více místa, ale stále bere ohled na uživatele s 15“ monitory s rozlišením 1024×768.

Co se týká funkčnosti stránky, tak zůstalo vše při starém, jen bylo implementováno nové vyhledávání, které je nyní zajišťováno službou Google Custom Search Engine.

Na následujících dvou screenshotech si můžete prohlédnout původní a novou verzi webu:

Původní design

Nový design

Produkty Microsoft

Microsoft nabízí v rámci svého programu Microsoft Select doživotní licence pro 19 produktů. Produkty si mohou pořídit všichni žáci, studenti a zaměstnanci všech akreditovaných škol v České republice (základní, střední i vysoké). Ceny jsou velmi výhodné a oproti běžným licencím jsou levnější o 85%. Microsoft Office Enterprise 2007 nakoupíte například za 3214 Kč, což je určitě výhodnější než cca 20 000 Kč za normální licenci. Většina programů je dostupná v libovolné jazykové verzi, k dispozici jsou produkty Office, Windows upgrade, encyklopedie Encarta atd… Více informací o produktech a také odkazy na obchody, kde můžete nakoupit, naleznete na stránkách Microsoftu. Zde naleznete informace o licenci. Produkty zakoupené přes Microsoft Select program samozřejmě nelze využívat ke komerčním účelům a také k nim není poskytována telefonická podpora.

Pokud chcete i telefonickou podporu, tak můžete využít aktuální zimní nabídky Microsoftu, kdy za cca 1400 Kč nabízí balík Microsoft Office 2007 pro studenty a domácnosti, který můžete nainstalovat až na 3 počítače v domácnosti a obsahuje aplikace Word, Excel, OneNote a PowerPoint.

Na některých vysokých školách máte také možnost pořídit vývojové nástroje, operační systémy a další produkty Microsoftu v rámci programu MSDN AA.

Produkty Adobe

Od listopadu lze na českém trhu sehnat studentské licence produktů Adobe, které jsou také za velmi výhodné ceny. Například balík Creative Suite 3 Web Premium, který obsahuje aplikace Adobe Dreamweaver CS3, Adobe Flash CS3 Professional, Adobe Photoshop CS3 Extended, Adobe Illustrator CS3, Adobe Fireworks CS3, Adobe Acrobat 8 Professional, Adobe Contribute CS3 můžete pořídit za 2400 Kč. Produkty mohou zakoupit studenti minimálně dvouletého studia na střední či vysoké škole a opět nelze používat ke komerčním účelům. Podrobnosti naleznete například na stránkách www.adobeprostudenty.cz. Programy jsou plně funkční verze a bez časového omezení.

Produkty Autodesk

Autodesk nabízí některý svůj software zdarma ke stažení, popřípadě můžete objednat instalační média a zaplatíte pouze za dopravu. V nabídce mají Autodesk Inventor Professional 2008, Autodesk Alias Studio, Revit Architecture 2008, Revit Structure 2008, Autodesk VIZ 2008, AutoCAD Civil 3D 2008 a AutoCAD Map 3D 2008.

Ostatní produkty Autodesku musíte zakoupit v rámci studentské licence například u společnosti Xanadu. Studentské licence Autodesku však nemají neomezenou platnost, jsou typicky na 2 roky. 3ds max 2008 nakoupíte za cca 3000 Kč.

Produkty Eset

Společnost Eset dlouhou dobu nenabízela studentské licence svého antivirového řešení NOD32. Od letošního podzimu však mají všichni studenti po předložení ISIC karty nárok na 50% slevu na produkty ESET NOD32 Antivirus a ESET Smart Security na 1 PC na 1 rok. Podrobnosti o akci naleznete na stránkách Esetu.

Produkty Corel

Corel má ve své nabídce pro studenty program CorelDRAW Graphics Suite X3, který ve studentské licenci koupíte za 2400 Kč. Opět jako u jiných studentských verzí nelze použít pro komerční účely.

To by bylo asi vše. Samozřejmě existuje více studentských verzí různých programů, v tomto přehledu jsem vypsal pouze ty, které mi přijdou zajímavé.

Písma

Kvalitní písma lze nalézt na serveru Dafont.com. K aktuálnímu datu mají k dispozici téměř 8000 různých fontů, z nichž naprostá většina je k dispozici k užití zdarma. Nutno podotknout, že české znaky obvykle nejsou obsaženy a musí se pak ručně dokreslit. Další známý portál je AbstractFonts­.com, na kterém naleznete přes 11000 fontů k volnému užití. Na obou stránkách není potřebná registrace a v profilu každého písma je k vidění přehled všech znaků.

Mnohdy se stane, že neznáte název nějakého fontu, ale máte obrázek s jeho podobou. V tom případě je ideální použít službu WhatTheFont. Zde pomocí jednoduchého formuláře uploadujete obrázek s daným fontem, zadáte písmena na obrázku a systém vám vyhledá název nejpodobnějšího písma. Ideální je upravit obrázek tak, aby byl pouze dvoubarevný a neobsahoval diakritiku.

Barvy

Pokud nemáte barevné cítění, můžete použít různá míchátka barev, která vám zaručí, že zvolené barvy budou k sobě ladit. Za zmínku stojí míchátko od Petra Staníčka, které má spoustu nastavení a určitě si vyberete nějakou barevnou kombinaci.

Zajímavá je také služba kuler firmy Adobe. Zde je k dispozici archív barevných schémat od jiných designérů a grafiků. Můžete zde vyhledávat podle klíčových slov, seřadit dle oblíbenosti atd… Některá barevná schémata určitě stojí za prohlédnutí.

Grafika

Důležité jsou také různé fotky, patterny a další grafické elementy. Na webu Stylegala najdete zajímavý projekt Bullet madness, kde je ke stažení 200 druhů grafických odrážek a ikonek ve velikosti 12×12px.

Na této stránce Kaliber10000 zase najdete kolekci patternů (vzorků), které se také dají občas využít v nějakém projektu.

Na serveru Stock.XCHNG najdete obrovskou galerii fotografií a textur ve velkých rozlišeních, z nichž většina je po zaregistrování zdarma ke stažení a můžete je použít ve svých projektech (u každé fotky si pročtěte licenční smlouvu, kde je napsáno k čemu ji můžete použít). Fotografií je na serveru přes 300000. Některé jsou placené, ale částky nejsou nikterak vysoké (pohybují se kolem 1$). Něco podobného najdete i na FreeFoto.com, kde je taktéž obrovský archív fotografií, které jsou pro nekomerční použití zdarma.

Inspirace

Za zmínku stojí také weby, které se zabývají výjimečnými weby po grafické stránce. Zde můžete načerpat spoustu inspirace pro vaše vlastní projekty. Na ukázku uvedu několik těchto portálu: bestwebgallery­.com, cssbeauty.com nebo české Stříbrné jehličí a css inspirace. Podobných webů je celá řada, zde jsem vybral pouze některé pro ukázku.