přejít na obsah přejít na navigaci

Linux E X P R E S, Inkscape v praxi: Jak vznikala nová hlavička LinuxEXPRESu 1

Konference Cloud computing v praxi

Inkscape v praxi: Jak vznikala nová hlavička LinuxEXPRESu 1

Inkscape.png

Zkušený grafik, pracující se svobodnými nástroji, se podělí se čtenáři LinuxEXPRESu o své zkušenosti a znalosti. Vytvořit hlavičku webového portálu v Inkscape lze pomocí dvou základních dovedností - musíte umět vytvořit jednoduchý gradient  a stíny. A samozřejmě mít nápad.


reklama

Zahajujeme volnou sérii článků, která se bude věnovat svobodným grafickým nástrojům v praxi. Texty na základě svých zkušeností píše zkušený grafik Luděk Janda, který mnoho popsaných postupů používá v denní praxi. Pracuje ve Slackwaru, používá zejména Inkscape, ale cizí mu není žádný grafický program.

1. Vytvořte si nový dokument

V okně Vlastnosti dokumentu ([Shift+Ctrl+d]) nastavte údaje pro výšku a šířku na 990 px a 112 px.

Obrázek:  1.jpg

Rozměry nového dokumentu

2. Umístěte vodítka

Vytažením z levého a horního pravítka umístěte dvě horizontální a dvě vertikální vodítka na okraje dokumentu. Kromě nich umístěte jedno horizontální do výšky 32 px, to jest na hranici mezí spodním pruhem a kresbou s logem.

Obrázek:  2.jpg

Umístění vodítek

Při vytahování vodítek z pravítek nemusíte být příliš přesní. Stačí vodítka rozmístit jen nahrubo a pak na každé dvakrát kliknout. V dialogovém okně pak upřesníte skutečnou pozici vodítek na patřičné ose x (0 px, 990 px) a y (0 px, 32 px, 112 px).

Aktivujte přitahování vodítek v kartě Snap ve Vlastnostech dokumentu ([Shift+Ctrl+d]). Dále zvolte přitahování na rohy objektů (Bounding box corners) a upravte citlivost přichytávání na vodítka (Snap to guides) na hodnotu 8. Všechny hodnoty si můžete v průběhu sami upravovat podle vlastních požadavků a přichytávání také vypínat, pokud vám překáží v práci.

3. Spodní pruh hlavičky

Nástrojem Tvorba obdélníků a čtverců ([F4]) nakreslete obdélník o rozměrech 990 px × 32 px ve spodní části dokumentu. Obarvěte výplň na červeno (#aa0000ff) - pro tento účel budete používat dialogové okno Výplň a obrys ([Shift+Ctrl+f]). Pokud má obdélník obrys, odstraníte ho tak, že v kartě Vykreslení čáry zatrhnete hodnotu Bez barvy.

Obrázek:  3.jpg

Obdélník s červenou výplní

4. Barevný přechod ve spodní části

Vytvořte duplikát původního objektu ([Ctrl+d]) a výplň nového přebarvěte na tmavě červenou (#550000). Nástrojem Tvorba a úpravy barevných přechodů ([Ctrl+F1]) nasměrujte táhlo gradientu v požadovaném úhlu - v našem případě ve svislé pozici. Abyste dosáhli přesného naklonění 90°, držte při pohybu táhlem gradientu klávesu [Ctrl]. Horní táhlo by mělo lícovat s hranou objektu. Přechod mírně upravíte přidáním zarážky (v okně Editor barevných přechodů - dostanete se na něj zvolením možnosti Úpravy... v dialogu pro Výplň). Nová zarážka se objeví uprostřed táhla. Posuňte ji do horní části a obarvěte ji na výrazně světlejší, než je barva cílová (#aa0000ff). Tím dosáhnete působivého prudkého přechodu v horní části.

Obrázek:  4b.jpg

Vytvoření přechodu

5. Horní část hlavičky

Nakreslete obdélník nástrojem Tvorba obdélníků a čtverců ([F4]) o rozměrech 990 px × 80 px. V dialogovém okně Výplň a obrys ([Shift+Ctrl+f]) nastavte hodnotu výplně na jasně červenou (#ef2929ff).

Obrázek:  5.jpg

Horní část hlavičky s jasně červenou výplní

6. Pravidelné pruhy

Objekt duplikujte ([Ctrl+d]) a v dialogovém okně Výplň zvolte károvanou ikonu Vzorek. Nastavte její hodnotu v rozbalovacím menu na Stripes 1:1.5 white. Průhlednost výplně (opacity) zmenšete na 15 %.

Obrázek:  6a.jpg

Výběr typu výplně

Dále natočte pruhy pod úhlem 45°. Objekt s pruhy editujte nástrojem Edit path nodes ([F2]). V určité vzdálenosti od objektu se objeví malá táhla (někdy bývají skutečně daleko). S jejich pomocí nastavte hustotu pruhů a jejich sklon.

Obrázek:  6b.jpg

Úprava pruhů

7. Barevný přechod vrchní části hlavičky

Postupujte podobně jako u vytváření gradientu spodního pruhu. Objekt s pruhy duplikujte [Ctrl+d]. V okně Výplň a obrys ([Shift+Ctrl+f]) zrušte vybarvení výplně vzorkem (které si objekt ponechává po duplikaci) a vybarvěte ho (#ef2929ff). Průhlednost (opacity) výplně vraťte zpět na 100 %. Nyní vytvořte gradient nástrojem Tvorba a úpravy barevných přechodů ([Ctrl+F1]). Horní bod umístěte na horní hraně objektu a táhlo směřuje svisle dolů.

Obrázek:  7.jpg

Vytvoření gradientu horní části

Nebojte se experimentovat. Při volně Tvorba a úpravy barevných přechodů ([Ctrl+F1]) si zvolte jednotlivé koncové body přechodu a dívejte se, jak na ně reaguje dialogové okno Výplň a obrys ([Shift+Ctrl+f]). U každého bodu lze měnit barevnost, průhlednost apod. Body lze na ose přidávat i odebírat.

8. Barevný podklad pro hlavičku je hotový

Podívejme se, jak vypadá vytvořená hlavička nyní. Pomocí nástroje Přiblížení/oddálení obrázku ([F3]) si obrázek zvětšete do velikosti 1:1. Skryjte vodítka. Voilà.

Obrázek:  8.jpg

Výsledný podklad pro hlavičku

Příště umístíme kreslené logo LinuxEXPRESu a přidáme stínovaný text.

Nahoru

Top články z OpenOffice.cz

Příspěvky

Inkscape v praxi: Jak vznikala nová hlavička LinuxEXPRESu 1
finn 1. 09. 2008, 03:43:06
Odpovědět  Odkaz 
Velice dobrym zdrojem, jak se naucit s inkscapem jsou tyto screencasty: http://screencasters.heathenx.org/
Re:Inkscape v praxi: Jak vznikala nová hlavička LinuxEXPRESu 1
pleytwak 1. 09. 2008, 09:21:46
Odpovědět  Odkaz 
Clovece dik, tedy musim rict, ze to jsou s prominutim kure*sky dobry navody, alespon pro me.
Josef Vanžura Inkscape v praxi: Jak vznikala nová hlavička LinuxEXPRESu 1
gindar 1. 09. 2008, 09:24:18
Odpovědět  Odkaz 
hezký tutoriál... ale hlavička ve stylu Web 2.0... Není to ten pravý LE, nevystihuje ráz tohoto webu, přijde mi najednou ta červená nějak agresivnější (je to přeci jen v takovém reklamním stylu; prezentace nějaké firmy); Grafik je šikovný, ale prostě se to k LE nehodí.
Chybička se vloudila
Beginer 1. 09. 2008, 12:04:24
Odpovědět  Odkaz 
Myslím, že se Vám tam vloudila drobná chybička. V části 4. Barevný přechod ve spodní části máte chybnou klávesovou zkratku pro vytvoření duplikátu. Jsem dal dle textu ctrl+g a divil jsem se, že konečný výsledek byl nějaký prapodivný. Ještě že dle dalšího textu jsem přišel na to, proč. Nj, jsem začátečník :-D
Vlastimil Ott Re:Chybička se vloudila
Vlastimil Ott 1. 09. 2008, 12:36:48
Odpovědět  Odkaz 
Omlouvám se, chybu jsem udělal já při korektuře a formátování. Zkratka je Ctrl+d, opraveno.
Inkscape v praxi: Jak vznikala nová hlavička LinuxEXPRESu 1
Kibo 2. 09. 2008, 22:23:14
Odpovědět  Odkaz 
Bezva tutorial. Už se těším na pokračování.
Inkscape v praxi: Jak vznikala nová hlavička LinuxEXPRESu 1
w 7. 09. 2008, 12:51:07
Odpovědět  Odkaz 
jj, na inkscape se zacinam taky divat a vypada to velmi velmi zajimave. Zatim jsem sice jako doma v Corelu (tedy co se vektorovych zalezitosti tyce) a to je taky to jedine proc mam na svem ubuntim desktopu nainstalovany VMWare a jsem nucen virtualizovat widle, ale jak to tak vidim, asi zacnu misto hrani si v inkscape v nem skutecne pracovat aby me to donutilo si zvykat na mirne odlisnejsi prostredi. Jinak pekny clanek.
Inkscape v praxi: Jak vznikala nová hlavička LinuxEXPRESu 1
pre 7. 09. 2008, 23:41:54
Odpovědět  Odkaz 
Skoro to vypadá, že ten text "opravdový linuxový magazín" neni uprostřed tý hvězdy...

Přidat názor

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Luděk Janda


  • Distribuce: macos x, slackware


Soutěž - reproduktory Trust

Redakční blog

Redakce

Redakce, 21. prosinec

Pište pro LinuxEXPRES

Baví vás Linux? Pište o něm, není to nic těžkého. LinuxEXPRES hledá nové autory.


Pavel Fric

Pavel Fric, 23. říjen

Nové motivy pro přehrávač Sayonara

Pomozte rozšířit možnost měnit vzhled programu za běhu


Pavel Fric

Pavel Fric, 28. únor

Lollypop


Všechny blogy »