Jste tu poprvé? - Skrýt (musíte být přihlášeni)

Trojrozměrná ikona

29. 7. 2007 v 0:00 0 Trojrozměrná ikona

Ne, nemám nic proti pixel artu a dodnes se rád kochám pohledem na propracované dvojrozměrné ikonky. Nicméně, doba pokročila a dnešní GUI si vyžadují stále lepší ikony. Kvůli přehlednosti, pro komfort a, co si budeme nalhávat, zvýšení ceny. Fakt je ten, že pokud si jako vývojář nějakého CMS chci udělat rozhraní se statistikami, pěkná „3D look“ ikonka grafu se mi rozhodně neztratí. Tento článek se sice konkrétně zabývá ikonou grafu, nicméně platí velmi obecně a dá se vztahnout na leckterý objekt, proto snad potěší i kreativnějšího čtenáře.

Plán realizace

Celá tvorba se bude skládat z následujících bodů:

  • 1) Kreslená předloha - na papír si předkreslím hrubou představu a také konkrétní představu jendoho sloupce z grafu.
  • 2) Pomocná mezi-realizace ve 3D programu - je zde pro lepší představu o stínech světlech, rozměrech apod. Je možné ji vynechat a používat dobře propracovanou kreslenou předlohu (potom doporučuji kreslit předlohu za pomoci pravítka v případě geometrických objektů).
  • 3) Konečný návrh - návrh ve zvětšené podobě. K docílení požuijeme pero v programu Adobe Photoshop + nativní vlasnosti vrstev.
  • 4) Zmenšení do finální velikosti - jednoduchý resizing do typických velikostí ikon.

Kreslená předloha

Postup při tvoření jakéhokoliv vlastního obrázku bez předlohy je prakticky totožný. Totiž, tu předlohu si nakreslíme na papír (tablet netablet).

Trojrozměrná ikona No, fotograf jsem mizerný, uznávám, ale jako nápad postačí.

To je základní idea. Hodně hrubá. Jak vidíte, obsahuje 4 sloupečky (což jsem později omezil na pohádkové 3). Nyní si realizujeme unifikovanou podobu sloupce, kterou využijeme k tvorbě zbylých sloupců (jen v jiné velikosti a barvě).

Trojrozměrná ikona

Tak to už je možná představa o něco konkrétnější

Jelikož jsem technicky omezen, použil jsem fotoaparát mobilního telefonu, leč samozřejmě nelze než doporučit užití scanneru.

Pomocná mezi-realizace ve 3D programu

Neboť si na papíře dost dobře nedokážu představit stíny a rozměry stran v perspektivě, spustím si 3D program a navrhnu si v něm podobný tvar. Pokud tento postup buď zvládáte nebo oželíte, není problém pokračovat. Každopádně jsem si na pozadí viewportu prsknul (jednoduchým přetažením, to by mělo být univerzální) předkreslený obsah (i když pravda neúčelně jen do perspektivního - jiný pohled jsem neměl). Podle tohoto jsem pak stylizoval kvádr. Nic složitého pro běžného uživatele, takže to nebudu rozvádět do detailu, nakonec je to jen doporučení.

Trojrozměrná ikonaBarva je na tomto místě jedno

Poznámka: Jako podklad pro práci je mnohdy vhodnější použít pracovní plochu programu, nikoliv render - vidíte i předkreslený obsah a máte pojem o prostoru.

Konečný návrh

1) CTRL+O si v Adobe Photoshopu otevřeme konkrétní předkreslený koncept nebo koncept z 3D programu. (Obecně se jako velikost plátna pro tvorbu ikony doporučuje 256x256, nicméně já jsem se rozhodl využít větší, jelikož tvořím ikonu pro velikost 128x128 včetně pozadí)

2) Uchopíme Pero (Pen tool) [klávesa P] (s nastavením jako na obrázku) a obtáhneme celý sloupec:

Trojrozměrná ikonaBarva je samozřejmě libovolná Trojrozměrná ikona

To proto, že jej budeme používat jako vrstvu, na kterou nabalíme všechny ostatní pomocí nastavení Clipping mask (Svázaných vrstev) - což je chytrá vlastnost, která umožňuje aplikovat obsah svázané vrstvy jen na oblast vrstvy podkladové.

Trojrozměrná ikona

3) Pro tuto chvíli si však ještě v paletce Layers (Vrstvy) snížíme Opacity (Krytí) vrstvy s perem na 50%, abychom mohli odstíny správně vidět a nanášet nové vrstvy na konkrétní místa.

Trojrozměrná ikona

4) SHIFT+CTRL+N vytvoříme novou vrstvu. Přejdeme do paletky Layers (Vrstvy), kde na novou vrstvu klepneme pravým tlačítkem myši (na její název, nikoliv náhled!) a z vyjíždějícího menu zvolíme Create clipping mask (Vložit vrstvu do svázaných).

Trojrozměrná ikona

Raději se přesvědčte, zda podkladová vrstva je skutečně vrstva s tvarem grafu.

5) Nyní do této vrstvy Perem (Pen tool) [P] obtáhneme každou stěnu kvádru (libovolnou barvou). Poznámka: Já jsem takto sice postupoval až dodatečně (hold mé hlouposti), ale bude lepší, když každou stranu barevně odlišíte. Omlouvám se, že to nebude na náhledech v tuto chvíli patrné, jak říkám, uvědomil jsem si tento problém až posléze.

Trojrozměrná ikona

Nemusíte se bát přetahovat. Od toho máme vrstvu svázanou - efekty vrstvy mimo oblast vrstvy podkladové nebudou brány v úvahu. Obecně platí, že je mnohem lepší přetáhnout (to nikdo neuvidí), než nedokončit.

Trojrozměrná ikonaV červeně vyznačené oblasti ukázkově přetahuji.

6) Toto opakujeme pro každou stěnu.

Trojrozměrná ikona Trojrozměrná ikona

7) Zde už slíbené odlišení barev. Pokud jste neodlišovali jako já od začátku, máte možnost si nastavení barevné výplně dodatečně změnit. Nakliknutím vrstvy (s uchopeným nástrojem pero) a změnou hodnoty Color: (Barva:) v option-baru (viz obrázek).

Trojrozměrná ikona

Mimochodem: Krytí (Opacity) Podkladové vrstvy vrátíme na 100%

Trojrozměrná ikona

Rada: Může se stát, že potřebujete dodatečně změnit nějaký tvar. Není třeba jej tvořit znova, stačí použít nástroj Direct selection tool [A] či Path selection tool [pod toutéž klávesou] a upravit body či přesunout tvar apod. Viz článek Začínáme s Pen tool.

Trojrozměrná ikona

8) Nyní již můžeme zneviditelnit vrstvu s konceptem.

Trojrozměrná ikona

9) Naopak označit všechny vrstvy sloupce (držením CTRL a postupným označením všech vrstev nebo použitím SHIFT -> obdobně jako v textových editorech).

Trojrozměrná ikona

10) Velmi výhodné pro pozdější manipulací a rychlé tvoření kopijí je umístit vrstvy do skupiny.

Trojrozměrná ikona

11) Nyní, když jsme si pěkně všechny stěny přebarvili, tak si zvolíme koncept, kterým chceme ikonu zobrazit. Máme na výběr prakticky z dvou možností. Buď budeme dodržovat reálné zobrazení (ikonka bude pěkná, ale bude to krabice nemastná) nebo si vše co jde patřičně překroutíme. Jelikož jsem se už pejorativně vyjádřil směrem k první možnosti, víte co bude následovat.

Moje představa je zhruba taková. Uvnitř kvádru, tam kde by měl být stín, bude odlesk a naopak. Vůbec se nebudu s odlesky párat a raději je pro jistotu prsknu všude možně. Bude to sice dost nereálné, ale dosáhneme tolik populárního „skleněného“ vzhledu. Zezačátku, v původním (vývojovém) rozlišení bude vypadat těžkopádně, nenechte se však zmást, po zmenšení bude sexy. Čili. Navolíme si adekvátní barvu stínu (řekněme třeba stejnou akorát trochu tmavší než je podklad, ale můžete improvizovat) a viditelnou boční stěnu přebarvíme na tuto barvu:

Trojrozměrná ikona Trojrozměrná ikona

12) Teď si vezmeme na paškál podlahu. Nebudeme měnit její barvu. Pouze přidáme takový lehký stín do levého horního rohu, s čímž bude kontrastovat odlesk v rohu opačném:

Trojrozměrná ikona

A to tak, že ve stylech vrstvy (Layer style) zvolíme Gradient overlay (Překrytí přechodem).

Trojrozměrná ikona

Které si nastavíme tímto způsobem:

Trojrozměrná ikona

- 150%, aby přechod nepůsobil humpolácky a těžkopádně. - 60 stupňů jsem zase odvodil z orientace podlahy (viz obrázky)

Trojrozměrná ikonaCož se bude přirozeně lišit výrobek od výrobku Trojrozměrná ikona

13) U zadní stěny to pojmeme podobně, akorát invertujeme přechod:

Trojrozměrná ikona Trojrozměrná ikona

Kdybychom gradient neobrátili:

Trojrozměrná ikona

Tahle dvojice sousedících si přechodů zabírá všude v tvorbě ikon, vřele doporučuji ke každému typu tvorby.

14) Podobně postupujeme u ostatních stěn:

Trojrozměrná ikona Trojrozměrná ikona

15) Co tomu ještě chybí? Na původním náčrtu byly stíny a odlesky nejen na celé ploše stran, ale také v rámci nich:

Trojrozměrná ikona

Tyto mi vytvoříme nejprve jako tvary z Pera (Pen tool).

Trojrozměrná ikona Trojrozměrná ikona

Kterým nastavíme Fill (Výplň) na 0%

Trojrozměrná ikona

Což způsobí, že vrstva jako taková nebude vidět, jen efekty aplikované na ni. Ty si navolíme v Layer style (Stylech vrstvy) a to konkrétně již dříve užitý Gradient overlay (Překrytí přechodem).

Trojrozměrná ikona Trojrozměrná ikona

Toto můžeme přidat i na jiná místa a dokonce se snese i úplný bílý pruh na hraně.

Trojrozměrná ikona

16) Nyní už jen zkopírujeme skupinu vrstev podle toho, kolik sloupců v grafu chceme:

Trojrozměrná ikona

Volitelně zvolíme jiné barvy svázaných vrstev.

Trojrozměrná ikona

Zmenšení do finální velikosti

Všimli jste si, že celá práce je vektor. Ten má velmi užitečnou vlasnost - dá se zmenšovat a zvětšovat bez ztráty kvality. Je tedy i vynikajícím nosičem právě pro ikony, jejichž zobrazení je třeba v různých velikostech. Nejčastěji se pak jedná o 256x256, 128x128, 64x64, 32x32, 16x16 a 12x12. První dvě jsou zejména pro efekt, následující dvě pro GUI offline aplikací a poslední pro web. To neplatí všude, ale bývá to tak. Já jsem ikonu vývíjel v zcela nestandardním rozlišení a to proto, že výsledek potřebuji zakomponovat do pozadí 64x64 a nechci, aby ikona byla stejně velká jako pozadí (tedy dotýkala se krajů), přičemž bych rád ze zvyku zmenšoval poměrově v celých číslech. Obecně ale platí u tohoto typu ikonek, že vyvíjet byste měli v minimálně dvojnásobné velikosti, než chcete publikovat. Proč? Jednoduše proto, že ikonky jsou po zmenšení o poznání hezčí - chyby zanikají v kontextu a hrany se zdají hladší.

Trojrozměrná ikona

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi