Online grafické editory – díl první.

V tomto a několika následujících článcích bych rád čtenáře seznámil s bezplatnými online webovými aplikacemi dostupnými pro různé druhy využití, čímž bude v této dnešní části počítačová grafika. Tento typ aplikací již v současnosti nabízí dostatečně pokročilé schopnosti a je tak velmi dobře použitelnou alternativou ke klasickým desktopovým aplikacím, které může mnohdy i zcela zastoupit. Nasazení online webových aplikací s sebou může přinést některé nevýhody, ale i mnohé výhody a je tak jenom na vás, abyste na základě tohoto článku posoudili, zda tato změna pro vás může být dostatečně přínosná. V následujících odstavcích se Vám proto pokusím nastínit možnosti i omezení současných online grafických editorů a samozřejmě především porovnáme konkrétní dostupné editory.
 

Rozdělení grafických editorů

Grafické editory se obecně dělí do dvou skupin, podle toho za jakým účelem je chceme využívat – pokud je naším cílem vytvořit geometrickými tvary pomocí různých křivek (tzv. vektorů) obrázky jako jsou vizitky, loga, letáky atd., je pro tento účel vhodné nasazení tzv. vektorové grafiky se kterou pracují vektorové grafické editory. Chceme-li upravovat fotky, oscannované obrázky, aplikovat různé druhy efektů atd. je zase na místě použití tzv. rastrové (či jinak nazývané bitmapové) grafiky se kterou pracují rastrové (bitmapové) grafické editory. Liší se pak od sebe pochopitelně i formáty souborů, do kterých je obraz ukládán – pro rastrovou grafiku jsou určeny např. formáty JPG, PNG, GIF, TIFF, BMP či PSD, pro uložení vektorové grafiky se pak používají formáty jako SVG, CDR či AI.
 

Technologie online editorů

Jak již bylo v úvodu článku zmíněno, možnosti dnešních online webových aplikací jsou natolik pokročilé, že nabízí funkce i uživatelský komfort podobný jako aplikace klasické desktopové, kterým se tak čím dál tím více přibližují a proto se o nich mnohdy honosně hovoří jako o tzv. RIA (Rich Internet Application). RIA aplikace jsou realizovány pomocí různých webových technologií na straně webového klienta (resp. webového prohlížeče – např. Internet Explorer, Opera, Google Chrome atd.), uveďme si nyní některé z nich:

• JavaScript – skriptovací jazyk který je v současné době přímo bez jakýchkoliv přídavných pluginů (dodatečně instalovaných modulů pro webový prohlížeč) podporován prakticky všemi webovými prohlížeči, ve spojení s HTML, CSS (Kaskádové styly pro designování HTML) či XML dokáže s technikou nazvanou AJAX velmi dobře vytvářet RIA aplikace.
• Flash – webová technologie od firmy Adobe, těšící se dnes obrovské oblíbenosti a proto existuje i velké množství aplikací v ní vytvořených, které pak běží ve webových prohlížečích díky pluginu Flash player.
• Java applety – technologie od Sun Microsystems využívající platformu Java (fungující v prostředí Java Runtime Engine).
• JavaFX – poměrně nedávná technologie, rovněž pocházející od firmy Sun Microsystems postavená na platformě Java, z čehož vyplývá i výhoda podpory JavaFX prakticky všude tam, kde je instalovaná Java (Java Runtime Engine).
• Silverlight – relativně mladá technologie od Microsoftu s jádrem založeným na prostředí .NET, pro běh aplikací je vyžadován plugin ve webovém prohlížeči podobně jako u Flash, který je pro Silverlight  také největší konkurencí.

Vraťme se však zpět k online grafickým editorům – drtivá většina všech stávajících je dnes vytvořena pomocí technologie Flash, i když se objevují už první vlaštovky, které jsou vytvořeny např. technologiemi Silverlight či přímo v samotném HTML (verze 5) ve spojení s JavaScriptem a CSS, což se jeví jako ideální případ neboť webový prohlížeč nepotřebuje žádné dodatečné pluginy pro běh takové aplikace (avšak plnému využití HTML v5 v RIA aplikacích však stále ještě brání jeho nedokonalá podpora v současných webových prohlížečích – viz. http://www.findmebyip.com/litmus/ ).
 

Grafické funkce

Veškeré níže uvedené online grafické editory si porovnáme z hlediska funkcí i ovládání uživatelského prostředí, jimiž editory disponují. Naprostou samozřejmostí u grafických editorů by v dnešní době měly být minimálně následující funkce:

• Tužka (Pencil)
• Štětec (Paintbrush)
• Obdélník (Rectangular)
• Elipsa (Eliptical)
• Guma (Eraser)
• Výplň (Bucket Fill)
• Kapátko (Color Picker)
• Písmo (Type tool)
• Lupa (Zoom)
• Oříznutí (Crop tool/Canvas size)
• Změna velikosti (Image size)

Abychom tedy mohli porovnat editory na základě jejich schopností pro pokročilejší grafické úpravy než jen pomocí výše uvedených základních funkcí, zvolíme si několik nástrojů, které jsou pro pokročilé úpravy obrazu rovněž často nezbytné, avšak zdaleka v každém grafickém editoru je již nenajdeme. Jsou to následující nástroje:

• Jas / Kontrast (Brightness/Contrast)
• Odstín a Saturace (Hue/Saturation)
• Práce s obrazovými vrstvami (Layers)
• Rotace/Překlopení (Rotation/Flip)
• Kouzelná hůlka (Magic wand tool)
• Klonovací razítko (Clone stamp tool)
• Úrovně (Levels)
• Křivky (Curves)
• Filtry (Filters)

Kromě těchto nástrojů ještě porovnáme grafické editory dle podporovaných grafických formátů, které jsou schopny editory načítat a do kterých umožňují obraz ukládat.

Dostupné online grafické editory

V následujícím textu budou tedy popsány vybrané bezplatné online grafické editory – vzhledem k poměrně slušnému množství existujících editorů budou v tomto dílu seriálu popsány jen ty, které jsou určeny pouze pro rastrovou grafiku a mohou být použity i pro vytváření obrázků (nikoliv tedy jen úpravu existujících obrázků, zejména fotografií). V příštím článku budou tedy následovat rastrové grafické editory pro úpravu fotografií (foto-editory) a také vektorové grafické editory.
 

Rastrové  grafické editory

Phoenix

Tento grafický editor patří do skupiny online editorů, jež k veřejnému využití zdarma nabízí společnost Aviary na svých webových stránkách www.aviary.com. Nutno podotknout, že webové aplikace které lze na těchto stránkách najít, velmi dobře pokrývají většinu designerských nástrojů jež grafik ke své práci potřebuje, k dispozici jsou zde ale dokonce i zvukový a hudební editor. V dalším článku proto naleznete ještě jeden grafický editor od této společnosti, pro změnu však pro vektorovou grafiku. Veškeré editory od této společnosti jsou vytvořené technologií Flash, měly by tedy fungovat ve všech webových prohlížečích (s instalovaným pluginem pro Flash) stejně spolehlivě.

Grafický editor Phoenix je velmi přehledný, jeho uživatelské prostředí má uspořádání prvků s ovládáním podobným oblíbenému Adobe Photoshop a těší se i slušné podpoře grafických formátů. Dokáže načítat obrázky JPG, GIF a PNG – ukládat umí kromě těchto ještě do formátu TIFF, bohužel však do žádného formátu který by podporoval zachování obrazových vrstev (layers), což je velká škoda vzhledem k tomu že editor práci s vrstvami umožňuje a dokonce na velmi dobré úrovni. Kromě ukládání obrázků do počítače uživatele dokáže spolupracovat i s online alby na Facebooku či Flickru, kam je možné rovnou z prostředí editoru své obrázky uložit. Editor nabízí nadstandardní funkce (např. zmíněné značně pokročilé možnosti práce s vrstvami) v porovnání se současnými online grafickými editory a je velmi dobře prakticky využitelný pro většinu běžných grafických prací. Bohužel jak napovídá tabulka níže, chybí mu některé funkce jako např. užitečné klonovací razítko či křivky pro práci s barvami, které by tento editor pozvedly i v očích profesionálnějších grafiků. Aplikace nezvykle poskytuje i komplexní nápovědu a dokonce srozumitelný tutoriál na pokročilejší techniky s možností diskuse uživatelů.

Navzdory výše uvedeným nedostatkům má grafický editor Phoenix značný potenciál a v budoucnu po dopracování některé funkcionality (zejména podpory ukládání obrazu s vrstvami, klonovacího razítka či křivky) by měl šanci uspokojit i pokročilou práci s grafikou – vyzkoušet si jej můžete již nyní na internetové adrese www.aviary.com/online/image-editor .

Nakonec nabízím krátký ukázkový příklad práce v tomto editoru: http://www.youtube.com/watch?v=lWohpl1HxYg

Pixlr editor

V tomto případě jde o nezvykle kvalitní, svižnou online aplikaci vytvářenou technologií Flash, kterou společně s dalšími nástroji pro grafickou úpravu nabízí vývojový tým Pixlr na svých webových stránkách www.pixlr.com .

Grafický editor Pixlr patří bezesporu k favoritům současných online grafických editorů a to díky bohatým funkcím které nabízí, ale i velmi přehlednému a intuitivnímu uživatelskému prostředí, které je věrnou podobou osvědčeného Adobe Photoshop. Že nejde o náhodu, potvrdí i zcela výjimečná podpora souborů typu PSD (nativní formát Adobe Photoshopu který dokáže zachovat více vrstev obrazu), který dokáže společně s formáty JPG, GIF, PNG, BMP a PXD tento editor načítat. Ukládat obraz je pak možné do formátů JPG, PNG, BMP a PXD (vlastní formát Pixlr který podporuje zachování vrstev obrazu) a to do počítače uživatele či na online alba Facebooku, Flickru, Imm.io či vlastního alba Pixlr. Pro uživatele Photoshopu je editor Pixlr skutečně důstojnou online alternativou, oproti např. konkurenčnímu webovému počinu od Adobe, jenž si označení „Photoshop Express“ opravdu nezaslouží (o Adobe Photoshop Express více informací v dalším článku). Pro našince je navíc velmi příjemná i plná česká lokalizace (kromě češtiny je k dispozici dalších 23 jazykových mutací!). Trochu škoda je absence nápovědy v aplikaci, k dispozici je pouze stručný blog s několika tipy pro ovládání programu.

Editor Pixlr nasadil laťku opravdu hodně vysoko, funkcionalitou i ovládáním převyšuje i mnohé klasické desktopové grafické editory a proto rozhodně doporučuji jej alespoň vyzkoušet – v povedené české lokalizaci je uživatelům k dispozici na internetové adrese http://www.pixlr.com/editor/?loc=cs .

Na jednoduchou ukázku použití editoru Pixlr se můžete podívat zde: http://www.youtube.com/watch?v=1Hm0dfON4IA

Splashup

Splashup je dalším online grafický editor vytvořeným technologií Flash, dříve uváděný pod názvem Fauxto.

Uživatelské prostředí tohoto editoru vypadá velmi sympaticky, je intuitivní a nabízí podobné rozložení ovládacích prvků jako Adobe Photoshop. Navzdory příjemnému prvnímu dojmu ovšem tento editor postrádá nemálo užitečných funkcí, jako jsou kouzelná hůlka, klonovací razítko, úrovně či křivky. Přičíst k dobru je možné editoru zajímavou funkci „Capture From Webcam“ která – jak již název napovídá – umožňuje sejmout obraz přímo do editoru z webové kamery. Splashup dokáže načítat soubory ve formátech JPG, GIF a PNG a ukládat poté do JPG, PNG a FXO – paradoxní ovšem je, že do tohoto vlastního formátu (který podporuje zachování vrstev obrazu a je odvozen od původního názvu tohoto editoru) dokáže editor obrázky uložit, ale má problém jej načíst. Kromě možnosti ukládat soubory do počítače nabízí Splashup i neobvykle širokou podporu ukládání do online alb, kterými jsou Facebook, Flickr, Picasa, Photobucket, Smugmug i vlastní album Splashup. V menu editoru je sice k dispozici volba nápovědy, není ale aktivní (zřejmě se na ní pracuje) a tudíž uživatel zatím nemá možnost bohužel žádné pomoci při práci s programem.

Celkově působí editor Splashup dobrým dojmem, po dopracování některých chybějících funkcí by byl téměř ideální… Tento grafický online editor naleznete na webových stránkách www.splashup.com .

Ukázku práce v editoru Splashup si můžete prohlédnout zde: http://www.youtube.com/watch?v=izkuodGGs6w

Sumo Paint

Sumo Paint je dalším editorem vytvořeným technologií Flash, který svými schopnostmi ovšem ostatní flashové grafické editory nechává hodně pozadu…

Uživatelské prostředí tohoto editoru je velmi podobné zavedenému stylu Adobe Photoshop, proto je jeho ovládání velmi intuitivní a snadné. Nabídka grafických nástrojů je na online editor neuvěřitelně bohatá, vedle níž i mnoho komerčních editorů vypadá jak chudý příbuzný. Dostupné jsou i zajímavé nástroje jako např. Symmetry tool, který umožňuje symetrické kreslení útvarů dle středové souměrnosti. Podpora grafických formátů sice není největší, ovšem z těch nejčastěji používaných žádný nechybí – program dokáže otevřít soubory typu JPG, GIF, PNG a SUM, ukládá potom do formátů JPG, PNG či SUM (což je vlastní formát s podporou zachování obrazových vrstev). Kromě uložení obrázku do počítače nabízí i možnost uložení na vlastní účet Sumo kde je možné si své obrázky i nechat hodnotit komunitou uživatelů. Podpora jiných webových alb zatím chybí. Sumo Paint disponuje i perfektně propracovanou nápovědou ve formě ukázkových videí, na nichž jsou všechny funkce uživateli názorně demonstrovány.

Sumo Paint patří jednoznačně na vrchol online grafických editorů a lze o něm říci, že je zcela plnohodnotnou alternativou většině klasických desktopových grafických editorů. Rozhodně jej doporučuji vyzkoušet – k dispozici je na internetové adrese www.sumopaint.com .

Zde je možné zhlédnout krátké video s ukázkou práce v tomto editoru: http://www.youtube.com/watch?v=NAEoeWnYYvI

Další jednoduché online editory:

Fat paint

(www.fatpaint.com)

Thumba

(www.thumba.net)

ImageEditor.net

(www.imageeditor.net)

MyImager.com

(www.imyimager.com)

AliMagic

(www.alilg.com)

Shrnutí

Nyní si všechny výše uvedené online editory shrneme do seznamu a seřadíme podle dostupného množství vybraných grafických nástrojů, jimiž editory disponují a nakolik jsou proto schopné umožnit uživatelům pokročilé grafické úpravy. Nejkvalitnější online grafické editory tedy naleznete na prvních místech tohoto seznamu.

Závěr

V dnešním dílu jsme si nastínili, že v současné době již existuje dostatečné množství dostupných technologií, které umožňují vytvoření důstojných alternativ ke klasickým desktopovým aplikacím, což jsme si také jasně dokázali na konkrétních případech vybraných online grafických editorů. Po jejich vyzkoušení mnozí z Vás jistě přišli na to, jaké výhody a jaké nevýhody mu tento typ aplikací přináší – za výhody lze bezesporu považovat, že je není nutné instalovat a především jsou dostupné na všech počítačích, kde je připojení k Internetu. To však může být někdy naopak nevýhodou, neboť ne všude a vždy je již internetové připojení k dispozici, kromě toho rychlost tohoto typu aplikací obvykle není taková jako u klasických desktopových aplikací a není ani možné využívat některé možnosti operačního systému jako je kopírování do clipboardu či vložení z něj.

Navzdory tomu si myslím, že již skutečně uzrál čas pro praktické využití online webových aplikací, v leckterých případech dokonce pro nahrazení některých klasických desktopových grafických editorů přímo těmito online alternativami. Zejména dva nejschopnější dnes uváděné editory Pixlr a Sumo Paint mají myslím velké šance stát se plnohodnotnými grafickými editory pro většinu grafických úprav které běžný ale i pokročilý uživatel potřebuje.

Diskuze k článku

Jitka, 31. 5. 2011 (17:02):

Sumopaint už má v češtinu. Mizernou, ale má.

Jiří Kysela, 28. 5. 2011 (14:44):

Jakube, skoda, ze Vas nazor se neshoduje s vetsinovym nazorem grafiku. Jednak, pripojeni k Internetu pro online graficke editory opravdu neni treba rychle, v domacnostech malokde dnes najdeme pripojeni pod 1MBps, coz je rychlost pro online editory naprosto dostacujici, a dalsi Vas padny argument – nemyslim si, ze v dnesni dobe maji fotoaparaty bezne praci s layery, klonovaci razitko atd…. Vice k teto komunikaci nemam co dodat.

Jakub, 28. 5. 2011 (13:04):

Musím konstatovat, že autor článku zřejmě chápe základní úpravy obrazu, který v dnešní době mají i fotoaparáty, za převratné a srovnává tyto funkce s adobe photoshop, které tyto funkce uměl již v roce 1998. Zřejmě autor článku měl nainstalovanou právě A. Photoshop v5.5 z roku 1998, se kterou srovnával tyto online editory. Zajisté online editory jsou fajn (po odmyšlení velkého záporu být on-line, na rychlém připojení), ale tyto online editory můžou maximálně vytlačit free nebo shareware verze bitmapových editorů, ale rozhodně nemají šanci se stát plnohodnotnými „grafickými“ editory pro pokročilé uživatele jak píše autor, je mi líto, ale k tomu mají hóoodně daleko. Jakub

Mario Gomes, 25. 1. 2011 (09:53):

Please correct this misleading info about Fatpaint:

1. It can save layers.
2. It has support for clone paint.

Please, also concider adding these features to the table:

1. Multiple Page layouting & desktop publishing features (multipe objects, etc.).
2. Print on Merchandize.
3. Vector drawing.
4. Image search on all major photo sharing websites and search engines.
5. Support for Pen Tablets.

Thanks

Jiri Kysela, 26. 1. 2011 (12:29):

In public free version of FAT Paint there are not any possibilities to save layers in image… There is only option to save it as PNG or JPG (these formats don’t support layers). Clone paint I don’t see anywhere….
This article compares only selected tools of graphic editor, not possibilities like Print on Merchandize or Support for Pen Tablets…

Mario, 31. 1. 2011 (23:27):

Layers are saved when you save the Fatpaint project, so its possible to save layers and all things that make up a project. But if you are talking about saving in some photoshop format with layers, than I understand.

Mario Gomes, 31. 1. 2011 (23:33):

Clone paint: When you press one of the paint tools; brush, airbrush or pen, a radio button option „Clone“ is displayed right under the tool icons.