Splashup: Tvoříme grafiku pro blog bez Photoshopu - Grafika.cz - vše o počítačové grafice

10. srpna 2009, 00.00 | Podnět pro napsání dnešního článku vzešel z prosté věty "já ale nemám Photoshop". Ukážeme si proto, že pro tvorbu grafiky není vždy třeba specializovaný software za desetitisíce, ale mnohdy postačí i jednodušší nástroje. A abychom to dotáhli úplně do extrému, využijeme online editor, který není třeba ani instalovat ale spouští se přímo v internetovém prohlížeči.

Při výběru vhodného online editoru (je jich opravdu více než dost), jsem se soustředil na to, aby bylo ovládání podobné Photoshopu, podporoval vrstvy, obsahoval základní nástroje a možnost uložit výsledek ve vrstvách. Nakonec padla volba na online editor Splashup. Jistě lze nalézt i lepší, ale pro naše snažení bohatě postačí tento. Přesto pokud se pokusíte využít jakýkoliv jiný, bude postup velmi podobný.

Jméno editoru již známe, adresa je www.splashup.com. Pro spuštění stačí kliknout na odkaz Jump Right In. Předtím ale doporučuji se zaregistrovat (Sign Up), protože tak získáte možnost ukládat soubory na server (v době testování občas zlobila možnost uložit soubory na disk). Krom toho registace znamená pouze vyplnění jména a e-mailu.

Nyní když máme editor spuštěný si řekneme, co vlastně chceme tvořit a poté probereme základní části programu.

Co tvořit - je napsáno již s nadpisu článku. Pokusíme se o jednoduchý design pro blog, tedy jakýsi deníček kde budou za sebou řazeny články doplněné z levé strany jednoduchým menu a nahoře hlavičkou, tzv. headerem. Při tvorbě se pokusíme využít to, co nám editor nabízí, abychom netvořili komplikovaně věci, na které program stavěný není.

Z čeho se aplikace skládá - vidíte na následujícím obrázku. Pokud jste již někdy viděli Photoshop, přijde vám rozhraní povědomé (z velké části jej kopíruje), v opačném případě pak možná oceníte fakt, že narozdíl od Photoshopu zde není milion paletek a nabídek, ale pouze pár. Jednotlivé části programu jsou:

1) Hlavní menu - zde nalezneme příkazy pro práci se soubory (nový, otevřít, uložit), vrstvami (nová, posunout, duplikovat), a nejrůznější efekty (ty ale dnes necháme stranou).
2) Menu nástroje - při vybrání konkrétního nástroje se zde zobrazí jeho možnosti - u nástroje obdélník poloměr zaoblení rohů, u nástroje přechod barva přechodu, ovšem i méně očekávané funkce - například u nástroje obdélníkový výběr možnost přepnout na kruhový výběr.
3) Nastavení měřítka dokumentu
4) Nástroje - známé z ostatních grafických programů - výběr, posun vrstvy, ořez, kreslící nástroje, guma, plechovka apod.
5) Nastavení barvy popředí a pozadí - stejně jako v Photoshopu jsou zde tlačítka pro přehození barev (šipky), a pro resetování barev na černou a bílou
6) Tlačítka zpět a vpřed - ať nemusíme stále klikat do menu
7) Informace - přesná poloha myši (X, Y) a velikost výběru (W, H)
8) Výběr barvy
9) Vrstvy

Pokud z menu File zvolíme možnost otevřít - Open, zjistíme, že můžeme otevřít soubor z počítače (Desk), soubor uložený na serveru programu (Splashup), soubor z jiného serveru (Facebook apod), nebo jakýkoliv jiný soubor na internetu, pokud známe adresu (http:).

My dnes ale začneme s prázdným plátnem, proto zvolíme možnost File - New, kde zadáme velikost obrázku, která bude okolo 900x600 px.

Ihned se nám vytvoří nový prázdný dokument, který již sice obsahuje jednu vrstvu, bohužel průhlednou - což znázorňuje šachované pozadí. Začneme tím, že tuto vrstvu vyplníme jednolitou barvu - a abychom tak mohli udělat, nejprve si vysvětlíme, jak barvu vybrat. Slouží k tomu paletka Color, která je vidět i na prvním očíslovaném obrázku (pod číslem 8), a skládá se z těchto částí:

1) poslední zvolená barva
2) nově zvolená barva - tyto dva obdélníky slouží pro porovnání staré a nové zvolené barvy
3) paleta ve které se mění nasycení (vlevo nenasycená = šedá, vpravo úplně nasycená barva) a světlost (nahoře nejsvětlejší - bílá, dole nejtmavší - černá). Nebudu vás zatěžovat teorií o modelu HSV (zájemce odkážu na článek na wikipedii), spíš si jen řekneme, že podobně se vybírá barva i v Photoshopu.
4) oblast pro změnu odstínu barvy
5) oblast pro změnu krytí (průhlednosti) zvolené barvy. Zatímco v Photoshopu vybíráme krytí u konkrétního nástroje (např. plechovka), zde volíme krytí již u výběru barvy - zcela nahoře má barva 100% krytí (je neprůhledná), zcela dola je úplně průhledná.
 

Ještě jednou si prohlédněte minulý obrázek a sami zkuste namíchat podobnou barvu. Pokud chcete mít úplně přesně stejnou, zapamatujte si hodnoty RGB a ty vepište do vaší paletky Color.

Po vybrání barvy zvolíme nástroj Plechovka (na obrázku zakroužkován) a klikneme kdekoliv do plochy. Tím vyplníme vrstvu danou barvou.

Na chvíli se pozastavíme nad paletkou vrstvy - Layers, kde si všimneme, že jednotlivé vrstvy můžeme pojmenovat, aby v nich byl pořádek, a zároveň tlačítky vpravo můžeme vrstvy přidávat a mazat (tlačítko plus a mínus). Takže si jednu vrstvu přidáme.

Poté zvolíme nástroj obdélník (Box), v horním menu nastavíme kreslení výplně (Draw Fill), ale vypneme kreslení obrysu (Draw Border) a nastavíme zakulacení rohů (Corner Radius) např. na 9 px. Na obrázku je vše zakroužkováno. Před samotným kreslením ještě nastavíme barvu na bílou a pak už nakreslíme obdélník...

...přibližně takto velký a takto umístěný (dole je místo na obsah, vlevo pak pro menu).

Stačí malý zobáček abychom z obdélníku udělali bublinu, tak proč to nezkusit. Tentokrát přepneme na nástroj polygon a zmenšíme počet stran na 3 - tedy trojúhelník. Všimněte si, že před kreslením vždy vytvoříme novou vrstvu (ať v nich máme pořádek a ať s nimi můžeme případně dál samostatně manipulovat). Zobáček kreslíme stejně jako obdélník - klikneme do plochy a táhneme.

Jako další krok bude vytvoření jednolitého barevného pozadí pro obsah. K tomu ale potřebujeme další barvu, nejlépe světlejší odstín pozadí. Jenže tuto barvu už v paletce Color nemáme, co s tím?

Pomůžeme si nástrojem kapátko (Eyedropper), kterým klikneme na pozadí (pozor - tuto vrstvu musíme mít vybranou). Poté posuneme výběr barvy na místo, které ukazuje šipka - do oblasti světlejších barev.

Opět zvolíme nástroj obdélník, tentokrát ale vypneme zaoblení rohů (=nastavíme na 0), vytvoříme novou vrstvu (ne vždy je to nutné, ale je dobrý zvyk se to naučit, nic tím nezkazíte) a nakreslíme pozadí pro obsah. Co říkáte, už to začíná vypadat jako internetová stránka?

A to je teprve začátek. Pouze taková poznámka bokem - pokud se vám náhodou povedlo nakreslit toto pozadí ZA hlavičkou (tedy bílá barva přesahuje přes tuto vrstvu), stačí odpovídajícím tlačítkem (šipka nahoru) posunout tuto vrstvu nad ostatní.

Nyní přistoupíme k trochu složitější věci - pokusíme se přidat nějakou ilustraci, protože jistě uznáte, že design pouze se dvěma obdélníky a textem není úplně to nejzajímavější. Po dlouhém zkoumání nástrojů které se nám k tomu nabízejí jsem zvolil trochu méně tradiční cestu - pokusíme se nakreslit obrázek složený se znaků fontu Arial. A po vzoru aplikace Twitter se pokusíme nakreslit ptáčka.

Začneme hlavičkou - zvolíme nástroj Text, nastavíme font Arial a největší velikost, jakou nám program dovolí. Poté nastavíme tmavší modrou barvu a do plochy klikneme a napíšeme písmeno o. Zvolená barva je R: 29, G:33, B:53.

Poté zvolíme nástroj změna velikosti (na obrázku opět zakroužkován) a chytnutím a táhnutím za jeden roh písmeno zvětšíme přibližně do této velikosti. Následně klikneme nahoře v menu na tlačítko Apply Transformation (tím transformaci potvrdíme).

Další nástroj použijeme k rotaci objektu - princip je stejný, po otočení opět nezapomeneme kliknout na Apply Rotate. Tím je "hlava" hotová.

A přistoupíme k zobáčku. Pro rychlejší práci minulou vrstvu zkopírujeme - menu Layer - Duplicate Layer.

Nástrojem Text do ní klikneme a přepíšeme na písmeno v.

Stejně jako minulou vrstvu, i tuto zmenšíme a otočíme, a aby toho nebylo málo, ještě jednou ji zkopírujeme a provedeme to samé. Výsledek by mohl být zobáček podobný tomuto.

Základ znáte, pokračování je jen na vás. Na následujícím obrázku vidíte výsledek mého snažení - pro tělo jsou použity závorky, pro nohy písmena l.

U poloprůhledného zobrazení je dobře vidět, že záda a ocas jsou dvě samostatné vrstvy.

V dalším kroku trochu oživíme pozadí - přidáme lineární přechod z trochu tmavší barvy do té naší. K tomu nejprve vybereme nástroj přechod (gradient)...

...a v horní liště klikneme na první barvu přechodu a nastavíme ji podle obrázku.

To stejné uděláme i s druhou barvou, trik je v tom, že u této stáhneme krytí na nulu (viz šipka), takže vznikne jednobarevný přechod do průhledné.

Vytvoříme novou vrstvu, která bude pod samotným obsahem a tímto přechodem klikneme a táhneme v oblasti pozadí - jak ukazuje obrázek.

Tato na první pohled nevýrazná úprava opět trochu oživí design.

A teď - co do hlavičky? Máme ptáčka, ale cpát tam Twitter se mi nechtělo, tak jsem se rozhodl pro blog fanouška hudební skupiny, která má něco společného se slovem bird. Po rychlém prozkoumání playlistu na mě vyskočila skupina Stars a jejich Window Bird, Beatles s písní Free as a Bird, a konečně finální volba - zpěvák Andrew Bird. Od něj snad jen doporučím skvělou píseň Heretics, a můžeme pokračovat v práci.

Nástroj Text je nám již dobře známý, pouze pro tentokrát zvolíme trochu vkusnější font než standardní Arial. Na obrázku je použit font Rockwell, ale můžete zvolit i jakýkoliv jiný. S nastavenou největší velikostí a tmavě modrou barvou napíšeme do hlavičky název blogu.

Takže prozatím máme toto. To už bychom asi v Malování nevytvořili...

Ale nebudeme se zdržovat, ještě nás pár věcí čeká - například levé menu. Opět nástrojem Text napíšeme několik teček za sebou, čímž vznikne tečkovaná čára, a zároveň předěl mezi menu a ptáčkem.

Poté vytvoříme menu - na obrázku vidíte, že jsem jeden řádek vynechal a ten potom napsal jako samostatnou vrstvu, takže vybraná položka je odskočená.

A ještě navíc tučná. Jak ale uvidíte později, zase jsem to změnil zpět, vy si samozřejmě zvolte to, co se vám líbí víc a nebojte se experimentovat.

Vytvoření obsahu je pouhé hraní si s nástrojem Text a nastavováním velikosti a typu písma. Barva je všude stejná - tmavě modrá.

Poslední věc, kterou nakreslíme do obsahu bude ikonka komentářů. Jako základ využijeme nástroj obdélník, kde nastavíme zaoblené rohy...

...a stejně jako u hlavičky, i zde přikreslíme trojúhelník aby vznikl další zobáček. Nad vzniklou ikonku napíšeme světlejším písmem počet komentářů. Jak si můžeme všimnout na tomto obrázku, přidal jsem ještě mezi jednotlivé "články" opět tečkovanou čáru, pouze světlejší a nenápadnější. To lze udělat buď změnou barvy, nebo stáhnutím krytí dané vrstvy (v paletce vrstvy).

A design je hotový. Jednoduchý, přehledný a... šedý! Nějak jsme v průběhu tvorby zapomněli na ostatní barvy a tak máme všehovšudy jen tři odstíny modré. To musíme napravit.

Třeba tak, že po ploše "rozházíme" barevná písmena a. Začneme například touto barvou...

...vrstvu zkopírujeme...

...a posuneme jezdec odstínu (pruh s duhou).

To děláme do té doby, než máme dostatek barviček...

...a poté už jen vrstvy kopírujeme, zmenšujeme, zvětšujeme a otáčíme.

Zajímavě vypadá i pokud je z písmena vidět třeba jen bříško.

A to už je opravdu vše. Tedy alespoň z kreslení a tvorby.

Nesmíme totiž zapomenout obrázek uložit - menu File - Save Image.

A to buď do počítače nebo na server splashup. U druhé možnost nejprve vybereme vhodnou záložku (1), přidáme složku (2), vybereme ji (3) a zadáme jméno souboru (5). Pokud už nějaký obrázek ve složce máme, objeví se v prostoru (4).

Po kliknutí na Save máme na výběr z několika formátů. Krom standardních jpg (ztrátová komprese) a png (bezztrátová komprese) můžeme zvolit i možnost fxo, což je interní formát programu, který dovolí uložit obrázek i s vrstvami.

Dialog Save Completed potvrdí uložení...

Ovšem pokud zvolíte možnost File - Open, vás soubor zde asi nenajdete. Jde o to, že serveru chvilku trvá, než obrázky uloží a pak se zobrazí v programu, proto je potřeba pár minut počkat (i při vytváření složky).

Závěr: Smysl dnešního článku nebylo ukázat všechny možnosti programu Splashup, ale přesvědčit se o tom, zda je možné vytvořit v online editoru něco smysluplného a použitelného. To se potvrdilo, a tak pomineme-li mouchy a drobné nedostatky (třeba absence zapojení klávesnice do ovládání programu), přináší online editory (a že jich je mnohem více) celkem zajímavý doplněk pro ty, kterým se zdá Photoshop moc drahý nebo jsou třeba na cizím počítači a potřebují si jen něco načrtnout. Uživatelské rozhraní je u většiny produktů velmi podobné a okamžité spuštění přímo v prohlížeči bez nutnosti instalace je nesporná výhoda.

Takže - máte-li zájem i o další články týkající se tvorby grafiky ve volně dostupných programech, nezapomeňte to napsat dolů do diskuze. Stejně tak pokud se vám povede něco zajímavého vytvořit, nestyďte se své dílo ukázat. A to už je opravdu vše, přeji hodně štěstí při práci.