Portál AbcLinuxu, 23. dubna 2024 19:38

Inkscape - 5 (přechody)

2. 7. 2007 | Vítězslav Válka
Články - Inkscape - 5 (přechody)  

Přechody a podobné efekty, které dodávají grafice větší přesvědčivost, jsou velice populární. Předvedeme si tedy, jak nakreslit tabuli s označením ulice.

Výchozí prvky

Základem celé práce je vytvoření podkladového obdélníku červené barvy, což pomocí F4 určitě hravě zvládnete. Optimálně v poměru stran asi 16:10. Druhým základním prvkem je text „LINUXOVÁ“ písmem, které bude odpovídat tomu na pouličních tabulích. Nemělo by jít o nijak náročný úkol. Přesto, pokud si nevíte rady, jak to zvládnout nejlépe, podívejte se na předchozí díl seriálu Inkscape - 4 (text).

Ideálním písmem pro tento typ použití je jakékoliv zúžené a tučné bezpatkové písmo. V našem případě jsem použil naprosto standardní font DejaVu Sans Condensed Bold, které jsem mírně roztáhl na výšku (přestože to odporuje typografickým pravidlům). Když text vystředíte na červený obdélník pomocí Ctrl+Shift+A, tak by výsledkem měl být níže uvedený obrazec.

inkscape - prechody: 1

Pokud budete chtít dosáhnout opravdu věrného vyobrazení, doporučuji některé z písem z databází písem, které uvádím na konci článku.

Ornamentální rámeček

Dalším krokem je klasický rám uliční tabule. Inspiraci najdete kdekoliv na Internetu, já jsem se inspiroval na portálu stock.xchng. Předpokládám, že v tomto případě jde o pražskou variantu.

Ideální postup je rozdělit si grafiku na dílčí prvky a ty pak snadno duplikovat a zrcadlit, abyste dosáhli požadovaného výsledku. Nakreslíme si tedy jednu čtvrtinu rámečku pomocí jednoho obdélníku (F4), který libovolně roztahujeme do délky tak, abychom nezměnili jeho šířku.

V zásadě byste si měli vystačit s natahováním, duplikováním a otočením o 45 stupňů. Chce to trošku zručnosti a odhadu - také se mi to nepodařilo napoprvé. Několik experimentů jistě pomůže.

inkscape - prechody: 2

Tip – šablona pro kresbu v proporcích

Můžete si pomoci vložením obrázku z tohoto návodu, ten bude fungovat jako šablona. Ideálně tak, že si otevřete okno s vrstvami (Ctrl+Shift+L) a vytvoříte si pomocí ikony s obrázkem „+“ novou vrstvu. Do této vrstvy naimportujete obrázek, který jste nejsprve stáhli k sobě. No a pak tuto vrstvu jen posunete dospodu a zamknete. Ideální šablona je hotová, proporce pak snadno „obkreslíte“.

Vytvořené pruhy označíte a pomocí Ctrl++ je spojíte do jedné křivky metodou add/sčítání. Pak už jen pomocí nástroje Editace bodů (F2) jednotlivě odstraníte body, které tvoří přesahy původních pruhů. Celý objekt zduplikujete (Ctrl+D) a o 90 stupňů otočíte doleva. Takto vytvořený objekt pak ještě navíc zrcadlově převrátíte a vznikne vám základní stavební kámen rámování uliční tabule.

inkscape - prechody: 3

Aby rámeček respektoval proporce obdélníkové tabule, bude třeba opět pomocí nástroje pro editaci bodů (F2) snížit výšku svislé části rámečku. Dejte si však pozor na to, že pomocí celkové deformace objektu by došlo ke zúžení vodorovných čar a deformaci šikmých, proto taková metoda není vhodná a je lépe použít editaci samotných bodů. Výsledkem pruhů obarvených na bílou barvu a několikrát zduplikovaných a zrcadlených bude obrázek níže.

inkscape - prechody: 4

Přechody a virtuální prostorovost

Teď se konečně můžeme pustit k tomu nejzajímavějšímu. Přechodům a efektní „apple“ grafice. Začínáme vytvořením duplikátu červeného pozadí. Následně snížíte jeho výšku na 50 % (uchopením spodní deformační kotvy/klíče/šipky). Převedete ho z obdélníku na křivku (Ctrl+Shift+C) a přebarvíte na bílo. Nástrojem pro editaci bodů chytnete a natáhnete spodní hranu tak, aby se z ní stal nejprve oblouk a později pomocí referenčních bodů vytvoříte libovolnou vlnovku.

inkscape - prechody: 5

Nakonec už jen nástrojem pro přechod (Ctrl+F1) vhodně táhnete ze spoda nahoru v rámci plochy zvlněného obdélníku. Jistotu, že jde o přesnou svislici, si zajístíte klávesou Ctrl při tažení. Potom spodní část přechodu doladíte tak, že ji stáhnete někde až pod celou tabuli. To aby přechod nebyl tak tvrdý.

Tip – zjemnění přechodu

Zjemnění přechodu můžete dosáhnout ještě jinou cestou - snížením průhlednosti celého objektu s přechodem. Panel s tímto nastavením zobrazíte pomocí kláves Ctrl+Shift+F nebo dvojkliknutím na aktivní barvu objektu (v levém spodním rohu obrazovky, hned nad barvou okrajové linky).

inkscape - prechody: 6

Pro efekt téměř dokonalý doporučuji do pozadí přidat modré orámování pod bílé linky. Toho snadno dosáhnete prořezáváním jednotlivých objektů do sebe a následně jejich vycentrováním.

inkscape - prechody: 7

Tip – vzájemné prořezávání objektů

Vhodnými klávesami jsou zde zejména: Ctrl++ pro sčítání, Ctrl+- pro prořezávání jednoho objektu druhým (ten, který je vidět celý, prořezává do toho pod ním) a Ctrl+* čímž vznikne průsečík objektů.

inkscape - prechody: prorezavani

Výsledek

Myslím, že jste to s přehledem zvládli. Teď můžete zkušenosti snadno uplatnit při vytváření například webových ikon s efektním plastickým vzhledem.

inkscape - prechody: 8

Seriál Inkscape (dílů: 6)

První díl: Inkscape - 1 (seznámení), poslední díl: Inkscape - 6 (vizitka).
Předchozí díl: Inkscape - 4 (text)
Následující díl: Inkscape - 6 (vizitka)

Související články

Přechod z CorelDraw! na Inkscape
Scribo, scribere, Scribus
Scribo, scribere, Scribus - II
Scribo, scribere, Scribus - III
Seriál: GIMP v příkladech
Recenze: GIMP - Grafický editor pro Linux a Windows
Snímání obrazovky aneb vyfoťte si okno
GNU Lilypond - The music Typesetter - I
Geomview - váš interaktivní 3D prohlížeč
Reportáž: Blender Conference 2005, De Waag, Amsterdam
Myslíme trojrozmerne

Odkazy a zdroje

Rozcestník serverů s písmy zdarma
linuxova-ulice.svg
prorezavani.svg

Další články z této rubriky

VDR a DVB-T2, část 2.
VDR a DVB-T2, část 1.
Šifrovaný Proxmox VE 6: ZFS, LUKS, systemd_boot a Dropbear
MapTiler – proměňte obrázek v zoomovatelnou mapu
Syncthing

Diskuse k tomuto článku

2.7.2007 07:22 Alcor | skóre: 20
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
Odpovědět | Sbalit | Link | Blokovat | Admin
Super článek ... Díky
xvasek avatar 2.7.2007 08:40 xvasek | skóre: 21 | blog: | Zlín
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
Odpovědět | Sbalit | Link | Blokovat | Admin
Tyjo, tak to je mazec.

(A nedaly by se obrázky publikovat přímo v svg, když už to většina prohlížečů podporuje? :)
2.7.2007 09:09 Robert Krátký | skóre: 94 | blog: Robertův bloček
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
Viz "Odkazy a zdroje" :-)
2.7.2007 09:49 Kris | skóre: 6
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
Odpovědět | Sbalit | Link | Blokovat | Admin
Tak nevím, vytvořil jsem si ty pruhy, všechny označil a po CTRL++ mi zmizely, asi něco dělám blbě :-D
4.7.2007 09:30 Ludek
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
Mně taky, nebo když označím několik čar deformují se, mizí ... nejsem schopen je spojit (sjednotit)
4.7.2007 09:37 Ludek
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
No jasně začalo to fungovat až na Ctrl+K tedy Kombinace. Pak teda nevim... no nic...
4.7.2007 16:51 Kris | skóre: 6
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
Mě to naCTRL++ už funguje, ale nesmí se to kreslit čárou ale obdélníkem :-)
2.7.2007 09:59 Jan Martinek | skóre: 43 | blog: johny | Brno
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
Odpovědět | Sbalit | Link | Blokovat | Admin
Mě přijde, že v těch ukázkách chybí zapnutá mřížka. Vidím ten příklad čistě geometricky, zvlášť když je v článku uvedený poměr stran (které mu moc nevěřím, ale držel jsem se ho).
Zkusil jsem to doslova naklikat na milimetrový papír. Žádné odhadování, žádné deformace, žádná zručnost, nepoužil jsem ani to prořezávání objektů (jen překrývání). Bylo to razdva hotové:
http://kf.fyz.fce.vutbr.cz/pub/inkscape/mrizkova.png
http://kf.fyz.fce.vutbr.cz/pub/inkscape/mrizkova.svg
Jenže já zas nemám ty umělecké sklony. Neustále narážím na to, že něco v inkscapu nakreslím precizně, ale vypadá to ve výsledku blbě.
Buď jak buď, článek se mi líbí a díky za něj.
8.7.2007 17:48 mmm
Rozbalit Rozbalit vše Umelecke sklony
Vyzera to blbo lebo si to robil analyticky, prilis si sa drzal toho co si myslel, ze je spravne. Aj ked autor tvrdi ze pomer stran je 16 na 10, nie je, je to skor takych 22 na 10, tzn. v tvojom pripade zniz vysku. Po druhe, tebou vytvoreny biely ramcek je prilis hruby, respektive si mal dat viac priestoru medzi bielymi ciarami (uplne splyva). Ak chces aby to posobilo umelecky, naber odvahu a kresli od oka, mozno to nepojde zo zaciatku lahko, ale nakoniec zistis, ze je to najlepsi sposob, ktory ta prinuti k predstavivosti. Teda, ze si predtym nez nieco nakreslis uvedomis ako to bude vyzerat a ci to nechces urobit inak.
zager avatar 10.7.2007 14:55 zager | skóre: 23 | Praha
Rozbalit Rozbalit vše Re: Umelecke sklony
Je to tak jak pise mmm. Vse jsem delal od oka. Presto, ze jsem drive take postupoval matematickou cestou, tak jsem pozdeji prisel na to, ze je lepsi to tam nasekat a pak dopilovat, nez jit cestou konstrukce. Ctenar, tedy v tomto pripade pozorovatel, nikdy nevnima konstrukcni sklatbu, ale celkovy dojem. Tomu je tedy treba podridit celou praci. Prikladem je treba to, ze v typografii maji obla pismena maly presah pres vysku hranatych tvaru. Presto to nikdo, kdo se nezabyva typografii, ani netusi. Opticky by totiz presna pismena vypadala pri kruhovem tvaru mensi.
Webdesign a grafika, to je můj život na vitavalka.cz
4.7.2007 00:10 nejsem | skóre: 14 | blog: nejsem
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
Odpovědět | Sbalit | Link | Blokovat | Admin
podle me pri zmacknuti ctrl+* nevznikne prusecik (bod), ale prunik (plocha...
------------------------------- A vy snad těm počítačům věříte?
zager avatar 10.7.2007 14:52 zager | skóre: 23 | Praha
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
To mate pravdu. Dekuji za upozorneni :)
Webdesign a grafika, to je můj život na vitavalka.cz
16.7.2007 14:51 cornelius | skóre: 11 | Ostrava
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
Odpovědět | Sbalit | Link | Blokovat | Admin
Chybka se vloudila do věty: "Panel s tímto nastavením zobrazíte pomocí kláves Ctrl+F nebo..."

Dialogové okno pro úpravy výplně a obrysu se nevyvolává Ctrl+F(což je vyhledání objektu) ale pomocí Ctrl+Shift+F
"I'm trying doprdele!"
16.7.2007 15:12 Robert Krátký | skóre: 94 | blog: Robertův bloček
Rozbalit Rozbalit vše Re: Inkscape - 5 (přechody)
Dík, opraveno.

ISSN 1214-1267, (c) 1999-2007 Stickfish s.r.o.