Scribus je program na sázení textů s obrázky a publikaci dokumentů (tzv. DTP – desktop publishing). Jde o open source a je tedy zdarma pro průzné operační systémy, např. Windows, Mac OS a Linux. Scribus je obdobná aplikace jako jsou placené aplikace QuarkXPress a Adobe InDesign. Text i obrázky jsou u DTP programů jako je Scribus vkládány do rámečků (frames), se kterými můžeme libovolně manipulovat. DTP programy jsou vhodné pro tvorbu vizitek, brožur, propagačních materiálů, magazínů včetně tiskové přípravy s ořezovými značkami. Bližší informace ke Scribusu najdeme na oficiálních stránkách:
Fonty Liberation Sans a Liberation Serif jsou fonty, které jsou zdarma k dispozici pod svobodnou licencí. Tyto fonty jsou obdobou fontů Arial a Times New Roman od Microsoftu, které jsou však svázány komerční placenou licencí.
Fonty Liberation Sans a Liberation Serif jsou použity jako defaultní fonty v LibreOffice, což je kancelářský balík zdarma vydaný pod svobodnou licení. LibreOffice lze nainstalovat do Windows, Linuxu i na MacOS.
Vhodná velikost tabletu záleží na tom, co s tabletem chcete dělat, jaká máte očekávání, jakou částku chcete a můžete do nákupu investovat. Jiné požadavky bude mít profesionální grafik, jiné student na základní, střední či vysoké škole pro potřeby distanční výuky. Obecně platí, že s větším tabletem se vám bude pracovat lépe. Nicméně to automaticky neznamená, že čím větší, tím lepší. Pro většinu spotřebitelů nebo pro začátečníky s tabletem bude asi stačit zlatá střední cesta.
Rozhodla jsem se pro značku Wacom, protože je více preferovaná mezi grafiky, ačkoli bývá dražší než ostatní značky. O výběru tabletu Wacom Intuos Pro Paper L mne přesvědčilo video: Top 9 Best Drawing Tablets 2020. Ve videu je volena varianta Wacom Intuos Pro L bez možnosti kreslení na papír, kterou považuji nyní za lepší, levnější volbu. Zde je výběr pořadí tabletů dle autora tohoto videa, doplněno o mé poznámky:
Aktualizováno: 19. 5. 2021, datum vydání: 11. 10. 2020
Koupila jsem si pro on-line výuku a pro kreslení grafiky tablet Wacom Intuos Pro Paper L. Je to můj první tablet, takže nemám porovnání s jinými tablety na trhu. Je celkem drahý, stojí kolem 15 000 Kč. Vybrala jsem si variantu, která umí převádět nákres z papíru do grafické podoby, nicméně po ozkoušení to považuji za zbytečnost. Kdybych se měla rozhodovat znova o koupi, koupila bych si cca o 2 000 Kč levější variantu tohoto tabletu, a to Wacom Intuos Pro L. Tento bratříček, by měl být naprosto stejný v parametrech, jen bez možnosti kreslení na papír.
Dle statistik statcounter za období březen 2019 až březen 2020 jsou nejpoužívanějším rozlišením displejů (monitorů – dekstopů, mobilů i tabletů) rozlišení 360 × 640, 1366 × 768 a 1920 × 1080. Všechna rozlišení zachovávají poměr 16 : 9 (resp. 9 : 16).
U obrázků zobrazovaných na webu je vhodné zachovat určité poměry výšky a šířky. Obrázky je nutné ořezat a jejich rozměr patřičně přepočítat. Pro usnadnění této práce jsem zpracovala následující tabulky s vhodnými rozměry obrázků v pixelech při zachování určitého poměru výšky a šířky.
Pří výpočtu rozměru obrázku jsme u webdesignu většinou limitováni šířkou obrázku a patřičně dopočítáme výšku. Pro tyto účely je třeba poměr otočit, aby se nám výška dobře počítala. Vezmeme převrázený poměr, tj. výška : šířka a tímto koeficientem následně násobíme předem zvolenou šířku. Dostaneme tak výšku obrázku.
Aktualizováno: 29. 11. 2020, datum vydání: 17. 8. 2016
Design tohoto webu jsem proměnila do následující palety barev vygenerované pomocí W3.CSS Color Themes. Za základní barvu jsem zvolila #673ab7, což je jedna z nabízených palet (themes) w3-deep-purple.
Aktualizováno: 4. 12. 2020, datum vydání: 22. 7. 2016
Design tohoto webu jsem proměnila do následující palety barev vygenerované pomocí W3.CSS Color Themes. Za základní barvu jsem zvolila #888844. Základní barva byla vybrána pomocí Color Pickeru.
Aktualizováno: 29. 11. 2020, datum vydání: 22. 7. 2016
W3.CSS nabízí k použití barvy (W3.CSS Colors) a k některým z nich jsou připravené palety barev (W3.CSS Color Themes) a k nim předpřipravená CSS (w3.css). Já však v designu používám např. opozitní barvy a pak mi chybí pěkně zpracovaná protilehlá paleta barev. Také mi chybí u palet jejich vyjádření v číselném hexadecimálním kódu. Člověk mnohdy potřebuje vědět, která to je přesně barvička, např. pro úpravy v grafických programech, pro nastavení Google reklamy apod.
Aktualizováno: 29. 11. 2020, datum vydání: 26. 4. 2016
Adobe Photoshop
Adobe Photoshop je Mercedesem v počítačové bitmapové grafice. Bitmapová grafika znamená, že výsledný obrázek je složen z maličkých barevných teček, kterým říkáme pixely. Profesionální grafická studia se bez Photoshopu a dalších nástrojů od Adobe obvykle neobejdou.
Photoshop se hodí na úpravu fotek, malování i kreslení. Bohužel firma Adobe si nechává velice dobře zaplatit za své profi grafické programy. Adobe Photoshop lze mít legálně od 24 EUR za měsíc. Studentská licence je o něco levnější.
Aktualizováno: 1. 10. 2020, datum vydání: 20. 12. 2015
Adobe Flash nahrazen Adobe Animate
Profesionálním nástrojem pro tvorbu flashových animací býval Adobe Flash Professional CC nahrazený nyní programem Adobe Animate. Adobe Animate je profesionální placený program, umí export animací do různých formátů, včetně HTML5 Canvas, WebGL, Flash/Adobe AIR nebo SVG. Dřívější flash není v současné době příliš podporován. Flashovou animaci lze vytvořit i pomocí programů, které jsou zdarma.
Aktualizováno: 26. 9. 2020, datum vydání: 3. 7. 2015
Hrubý posun myší
Když vybereme nástroje pro posun z levého hlavního panelu M, je možné požadovaný objekt posouvat myší. Bohužel tento posun je mnohdy příliš hrubý a chytá se vodítek apod. Navíc se často stane, že posuneme vrstvu, kterou vůbec posouvat nechceme, protože chytneme myší úplně něco jiného.
Tip: Nechtěnému výběru jiné vrstvy lze zabránit stiskem klávesy SHIFT, která zabrání automatickému vybrání vrstvy. Ale pořád je k dispozici hrubý posun vrstvy pomocí myši. Když se nám podaří kliknout s nástrojem pro posun na správnou vrstvu, je možný jemný posun pomocí kurzorových šipek také.
Jemný posun pomocí šipek
Gimp umožňuje i jemný posun pomocí kurzorových šipek. Je třeba vybrat z menu volbu: Nástroje / Nástroje transformace / Přesunout M. Následně lze pomocí kurzorových šipek přesunout jemně vrstvu, kterou potřebujeme.
Aktualizováno: 22. 9. 2020, datum vydání: 7. 11. 2014
V grafice se často používají tzv. opozitní barvy, které se vzájemně liší v barevném posunu o 180°, nebo triáda, podobné barevné odstíny apod. Lze si v tom trochu najít určitý systém a odhad. Myslela jsem si, že si na základě toho následně najdu vhodný způsob, jak si vytvářet vhodné palety barev pro návrh webu (např. tím, že si z palety vyberu konkrétních 4 až 5 barev různě odstupňovaných od sebe). Nakonec jsem stejně zjistila, že je lepší využívat generátor barev, kterým si vyberete vhodnou paletu. Nicméně zde přikládám vytvořené paletky základních odstínů pro barvu #ffaa01.
Aktualizováno: 22. 9. 2020, datum vydání: 2. 11. 2014
V Gimpu jsem si vytvořila vlastní palety barev odstupňované v modelu OSH po změnách 10 % sytosti S (vertikální změna) a H tmavosti barvy (horizontální změna). Jde vždy o shodný odstín barvy, pouze se buď přidává bílá (S) nebo černá (H). Barevně jsem paletu rozvrhla stejným způsobem, jakým to dělá Gimp.
Nepřesné barvy
Ačkoli je barva zadána přesně po desítkách pomocí modelu OSH v Gimpu, tak když si zpětně naberete barvu, tak zjistíte, že ji Gimp trochu přeuložil do jiných hodnot. Asi je to tím, že jsou barvy ukládány v RGB, což je trochu jiná interpretace barev. Vím, že se podobně choval u některých barev i Photoshop.
Aktualizováno: 5. 10. 2020, datum vydání: 31. 10. 2014
Adobe Color CC
Hledáte vhodné barevné navržení pro web? Může vám pomoci tento generátor barevných schémat Adobe Color CC od společnosti Adobe.
Paletton.com
Dalším obdobným nástrojem je tento generátor barevných schémat. Je v češtině i angličtině a nabízí různé barevné variace. Na světě je jeho novější podoba.
Aktualizováno: 21. 9. 2020, datum vydání: 29. 10. 2014
Gimp je bitmapový grafický editor. Je k dispozici zcela zdarma. Svým způsobem jde o konkurenci k programu Photoshop od firmy Adobe. Photoshop je ale placený. V rámci nabídky Creative Cloud lze mít např. Photoshop od 12 € za měsíc. Profesionální grafická studia pracují hlavně s Photoshopem.
Pokud však nechcete investovat nemalé peníze, tak Gimp je dobrá volba. Gimp toho neumí tolik jako Photoshop, ale základní věci zvládá celkem dobře. Občas ho teda proklínám, protože jsem zvyklá na Photoshop, ale přecházím na Gimp, protože je a bude vždy zdarma. Co se týká profesionální práce, tak Gimp bude vždy o krok pozadu za Photoshopem, ale kdo má věčně řešit licence…
Aktualizováno: 7. 6. 2020, datum vydání: 5. 1. 2014
Jak napsat plus či mínus (resp. pomlčku)?
Standardní plus + a mínus − na numerické klávesnici ve vektorovém editoru Inkscape funguje jako lupa. Plus zvětšuje zobrazovanou plochu a mínus zmenšuje zobrazovanou plochu. Když píšeme text, tak se také tyto znaky chovají jako lupa, což není vždy žádoucí.
Aktualizováno: 7. 6. 2020, datum vydání: 31. 12. 2013
Vektorový editor Inkscape se změnou velikosti objektu mění i velikost šířky okraje. Toto chování lze změnit pomocí volby Soubor » Nastavení Inkscape… » Transformace » Měnit šířku okraje při změně měřítka.
Aktualizováno: 7. 6. 2020, datum vydání: 30. 12. 2013
Vektorový editor Inkscape, který je zdarma, umí maskování objektů. Maska má vliv na průhlednost maskovaného objektu. Můžeme si představit, že se na objekt díváme skrz masku. Tam, kde je maska černá, nebude nic vidět. Tam, kde je bílá bude vidět všechno. Abychom si toto pravidlo zapamatovali, můžeme si představit černou barvu jako tmu, takže objekt ve tmě není vidět a bude průhledný. Bílá by nám mohla symbolizovat světlo, tedy objekt bude v těchto místech viditelný. Odstín šedi bude šero, budeme vidět objekt částečně.
Aktualizováno: 7. 6. 2020, datum vydání: 29. 12. 2013
Vektorový editor Inkscape, který je zdarma, umí oříznout jeden objekt podle tvaru jiného objektu. Ořez není trvalý, lze následně zrušit.
Vybereme objekty
Vybereme objekty. Na pořadí vybraných objektů nezáleží – je jedno, který vybereme jako první, a který jako druhý. Záleží však na tom, který objekt je nahoře, a který je dole. Ořez aplikujeme volbou Objekt » Ořez » Nastavit.
Aktualizováno: 29. 11. 2020, datum vydání: 19. 12. 2013
On-line konvertory
Na webu jsou k dispozici on-line konvertory PDF to JPG či PNG. Převod je rychlý. Výsledný obrázek lze ovlivnit pouze základním nastavením, nicméně pro běžné použití to obvykle stačí.
Aktualizováno: 19. 5. 2020, datum vydání: 5. 10. 2013
Jak přidat Like Button na webové stránky
Odkazy na HTML kód, který se umístí do webových stránek, jsou k dispozici v sekci pro vývojáře Social Plugins.
Ochranná známka facebook
Způsoby užití ochranné známky Facebook jsou uveřejněny na webu Facebook Brand Resource Center. Nebo-li nemůžeme si s logem facebooku dělat, co se nám zlíbí. Například nesmíme měnit jeho barvy. Na stránkách Facebooku najdeme doporučené způsoby užití loga f, like ikonky apod. Zdrojové soubory v různých formátech (PNG, EPS, SVG) lze stáhnout ve formátu zip. Co smíme a nesmíme dělat je popsáno na stránkách a před stažením souborů musíme s podmínkami užití předem souhlasit.
Aktualizováno: 21. 5. 2020, datum vydání: 1. 9. 2013
Vytvoření vzorku (pattern)
Pokud chceme vyplnit nějaký objekt v Inkscape vlastním vzorkem, tak si vzorek nejprve musíme zvlášť vytvořit. Doporučuji vytvoření v samostatné vrstvě. Uděláme si tam třeba mřížku. Pokud chceme zachovat původní zdrojový obrázek mřížky, tak je následně vhodné ještě udělat duplikaci vrstvy, ve které máme umístěn vzorek.
V duplikované vrstvě vybereme celý vzorek a zvolíme volbu Objekt » Vzorek » Objekty na vzorek. Inkscape se vzorkem pracuje samostatně a udělá si z něj “speciální objekt”, který lze dále různě ještě deformovat a nastavovat nástrojem Node Tool. (Pozn.: Vzorek lze přeměnit zpět na objekty pomocí volby Objekt » Vzorek » Vzorek na objekty.)
Lze jednoduše nahrát soubor přes webové rozhraní a stáhnout si zkonvertovanou verzi souboru. Nevýhodou tohoto řešení je, že dáváte zdrojový soubor všanc internetu. Sever se zaštiťuje, že soubory po nahrání smaže bez prohlížení obsahu.
Aktualizováno: 20. 4. 2020, datum vydání: 22. 10. 2012
Vytvořit snímek obrazovky lze různými způsoby.
Print Screen na klávesnici
Nejjednodušší je zmáčknout klávesu Print Screen na klávesnici. Sice se zdá, že se nic nestane, ale ve skutečnosti se vytvoří snímek obrazovky. Snímek obrazovky se uloží do schránky Windows (clipboardu) – podobně jako kdybyste zmáčkli Ctrl + C.
Když si následně otevřete nějaký grafický editor a dáte v něm vložení Ctrl + V, tak se snímek vloží a zobrazí jako obrázek. Jako grafický editor můžete použít např. program Malování, který je dostupný přes menu Start → Všechny programy → Příslušenství → Malování. Stačí pak na kratě Domů dát příkaz Vložit. Podobně snímek můžete vložit například do Wordu – stačí dát Ctrl + V. Podobně lze snímek vložit do programu Gimp.
Aktualizováno: 23. 11. 2019, datum vydání: 16. 8. 2012
V předchozím článku jsem ukázala, jak jednoduše můžete vytvořit vlastní text formou Bezierových křivek a zkosit si ho.
Bohužel tento postup nefunguje, tak jak člověk očekává, například u textu, u kterého chcete mít hranaté rohy a okraje. Inkscape křivku bez problémů zkosí, ale okraj Bezierovy křivky je veden kolmo ke směrnici křivky, takže se otočí spolu s textem. Navíc v některých případech vznikají nežádoucí efekty, kdy písmo vlivem zalomení nekončí tak, jak byste potřebovali – na účaří.
Aktualizováno: 23. 11. 2019, datum vydání: 14. 8. 2012
Vlastní logo si můžete vytvořit například úpravou textu napsaného nějakým fontem. Obrys písma si následně upravíte dle libovůle tím, že text necháte převést na křivku a dále pracujete s touto křivkou.
Pokud se Vám však žádný font nelíbí, můžete si logo udělat zcela po svém například rovnou formou Bezierových křivek. Tuto možnost zde v rychlosti popíši. Tvorba loga proběhla ve vektorovém programu Inkscape, který je zdarma.
Aktualizováno: 23. 11. 2019, datum vydání: 3. 7. 2012
Často upravuji (nejlépe hromadně pomocí akce ve Photoshopu) nascanované dokumenty na přesný rozměr. V takovém případě je vhodné vědět přesnou šířku a výšku obrázku v pixelech. Proto jsem si sem připravila tabulku pro přepočet formátů při scanování v 300 dpi a 600 dpi.
Aktualizováno: 23. 11. 2019, datum vydání: 29. 6. 2012
Z Photoshopu jsem byla zvyklá, že pomocí nástroje Crop si obrázek otočím a oříznu naráz – prostě super a pohodička. V Gimpu permanentně hledám patřičný postup. Nástroj Crop v Gimpu totiž otočení přímo neumí. Obrázek musíme nejprve otočit a následně oříznout.
Jak obrázek otočit a oříznout?
Pro přesnější otočení (např. textu) si můžeme do obrázku umístit vodítka, a to jejich vytažením z oblasti okraje dokumentu.
Aktualizováno: 20. 11. 2019, datum vydání: 10. 3. 2012
Blender 2.62 lze přepnout do češtiny. Menu a nápověda budou pak v češtině.
Stáhnete si horní panýlek a místo volby Info si vyberete User Preferences. Kliknete na záložku System. Sjedete dolů a zaškrtnete volbu International Fonts. Vyberete Language: Czech (Český) a zaškrtnete Interface i Tooltips. Pokud chcete, aby toto nastavení bylo výchozí, zmáčknete tlačítko Save As Default. Nakonec vytáhnete si zpátky panýlek a přepnete ho zpět do Info. Blender pak na Vás bude mluvit pěkně česky. Pokud by někomu čeština nestačila, může si Blender přepnout třeba do japonšniny :).
Aktualizováno: 20. 11. 2019, datum vydání: 10. 3. 2012
Vložení textu
Text do Blenderu 2.62 vložíme jednoduše příkazem Add/Text.
Režimy textu
Text má dva režimy – editační mód a objektový mód. Přepínáme se mezi nimi klávesou TAB. V editačním módu lze psát text, v objektovém módu manipulujete s textem jako celkem. V editačním módu si text přepíšete na svůj vlastní text.
„A“ v režimu RGBA znamená alpha kanál (tj. průhlednost). Nastavování probíhá až po vyrendrování obrázku.
Renderování jsem nastavila do samostatného okna, protože se s ním lépe manipuluje a lze snadno zavřít. Standardní nastavení renderování je do aktuálního okna volbou Display: Image Editor. Bohužel při tomto nastavení se Vám po vyrendrování změní 3D scéna na Editor type: UV/Image Editor. Pokud chcete zpátky pak 3D scénu, musíte si přepnout typ okna zpět na 3D scénu, tj. nastavit ikonku vlevo na Editor type: 3D View.
Aktualizováno: 20. 11. 2019, datum vydání: 17. 2. 2012
Přesné zarovnání objektů v 3D programu Blender je velice důležité. Postup není vůbec jednoduchý a na webu či v knížce ho nejdete obvykle pro starší verze Blenderu. Proto zde popíši postup krok po kroku pro Blender 2.5. Permanentně tento postup zapomínám a pak ho objevuji pracně znova a znova …
Aktualizováno: 12. 11. 2019, datum vydání: 6. 2. 2012
Pokud jste zvyklí na Photoshop a začnete pracovat s Gimpem, tak vás jistě zaskočí to, že při mazání nástrojem Guma nebo při výmazu daného výběru pomocí Delete se vám mazaná plocha vyplní bílou barvou místo toho, aby byla transparentní.
Přidání alpha kanálu
Aby výmaz šel do transparentna, tak je zapotřebí v Gimpu nejprve nastavit pro danou vrstvu alpha kanál. Vrstva bez alpha kanálu je vidět v seznamu vrstev s tučným názvem. Vrstva s alpha kanálem (s průhledností) je vidět normálním písmem.
Aktualizováno: 10. 11. 2019, datum vydání: 30. 4. 2011
Obrázky ke stažení
Na webu najdete spoustu galerií obrázků (fotobanek), které nabízejí obrázky ke stažení a použití zdarma. Je však třeba si pročíst patřičné licenční podmínky, zda pro daný účel budete moci obrázek opravdu použít. Nicméně bych byla v tomto směru velice opatrná. Nikdy si nemůžete být stoprocentně jistí, zda nabízený obrázek je opravdu zdarma a není pod něčí licencí.
Aktualizováno: 4. 12. 2020, datum vydání: 30. 4. 2011
OCR - rozpoznávání textu
OCR (optical character recognition) je rozpoznávání textu z naskenovaného obrázku.
Pokud potřebujete například text v nějakém obrázku převést na editovatelný text, je nutné pro převod do textu použít OCR program. Některé skenery mají OCR v sobě už zabudovány. Můj skener sice OCR v sobě má, ale neumí česky...
Takže jsem hledala vhodný zdarma program. Nakonec jsem zjistila, že Microsoft Office má v sobě OCR zabudované, takže žádná nová instalace nebude potřeba :). Microsoft Office sice není zdarma, ale většina lidí instalaci má.
Aktualizováno: 10. 11. 2019, datum vydání: 23. 4. 2011
Místo ICO lze mít i GIF, PNG
Formát ICO znamená formát souboru ve formě ikonky Microsoft Windows. Formát souboru ico lze použít např. pro ikonku HTML stránek.
V tagu link při vytváření HTML stránek již nemusí nutně být obrázek ve formátu ICO. Lze použít i PNG či GIF. U tagu link se nastaví atribut rel="icon" a atribut href se nastaví na daný soubor obrázku, např. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">.
Gimp
Gimp je grafický program, který bezproblémů uloží obrázek do formátu ICO. Jde o program, který je zdarma.
Aktualizováno: 7. 11. 2019, datum vydání: 1. 3. 2011
Scribus je program pro sázení textů. Je zdarma. Jde o alternativu například k placeným DTP programům typu QuarkXpress. Když jsem ho nainstalovala, objevovala se mi při spuštění chybová hláška, že není nainstalován Ghostscript, že proto nebudou fungovat importy EPS (Encapsulated PostScript) souborů. Protože chci pracovat s vektorovou grafikou a načítat ve Scribusu vektorové soubory, tak jsem se rozhodla tento problém řešit.
Pozn. ze dne 11. 9. 2011: Návod níže je psán pro starší verzi Scribusu. Má nová zkušenost s aktuálnější stabilní verzí Scribusu 1.3.3.14 Windows 32-bit je taková, že stačí nainstalovat příslušný Ghostscript 9.04 (pro OS Windows Vista 64-bit mi pro 32-bitový Scribus fungoval pouze 32-bitový Ghostscript) a Scribus si vše už najde sám a tím vše končí :).
Aktualizováno: 7. 11. 2019, datum vydání: 1. 3. 2011
Lyx (WYSIWYM textový editor TeX/LaTeX) je textový editor, který je zdarma. Umožňuje mimo jiné psát dobře matematické výrazy. MS Word, co se týká matematiky, zatím nemá šanci. Vůbec začínám MS Word používat čím dál méně...
Blender je program pro tvorbu 3D grafiky a je zcela zdarma. Blender je ideální pro ty, kteří by rádi začali s 3D grafikou, ale nemají k dispozici drahé komerční programy typu 3DS Max.
Základní informace k Blenderu najdete v knize Blender - naučte se 3D grafiku od Pavla Pokorného a dále v tutoriálech na blender3d.cz, některých videí na blender.org. Můžete se naučit základní tvorbu 3D objektů. Ovládání Blenderu je pro uživatele Windows trochu nestandardní. Blender je zdarma ke stažení na blender.org. Je k dispozici i verze pro Windows.
Aktualizováno: 13. 12. 2021, datum vydání: 28. 2. 2011
Inkscape je open source vektorový grafický editor. Je tudíž zcela zdarma. Lze ho nainstalovat jak do Windows, tak na Linux a MacOS. Já zatím používám jeho osvědčenou verzi 0.92.
Výsledné soubory ukládá do formátu SVG. SVG formát zvládá i animace a nechá se zobrazit na webu. Podpora SVG v prohlížečích roste. Výslednou grafiku můžete samozřejmě vyexportovat do bitmapového obrázku PNG.