Mých 10 tajných triků pro efektivní webdesign ve Photoshopu (2/2)
11/08/2007 / Webdesign
Takže zpátky k tématu blogu. V prvním díle jsme si probrali neostré podtržení při vyhlazení textu, vykousnutý text, tipy pro horizontální menu, odsazení textu a práci s vektory. V tomto díle vás čekají o něco jednodušší tipy, avšak se srovnatelnou efektivitou :)
Mimochodem, podobný seznam tipů dal před nedávnem dohromady i von Bahnhoff, takže i u něj můžete najít inspiraci. Je jich hodně, ale nenechte se odradit.
6. Používejte efektivní selekce
Photoshop nám chce ulehčit práci tím, že nabízí možnost prolnutí výběru hned při jeho vytváření. V nástrojové liště zadáte množství prolínaných bodů, uděláte výběr a prolnutí máte na světě. Kolikrát jste se ale setkali s tím, že uděláte náročný výběr složité oblasti a pak zjistíte, že je prolnutý, ačkoliv jste potřebovali ostrý?
Daleko efektivnější je, vytvořit si na prolnutí výběru efektivní klávesovou zkratku a prolínat až po jeho vytvoření. Inspirace pro vás: Na prolnutí výběru používám zkratku CTRL+ALT+D, na zúžení CTRL+SHIFT a -, na rozšíření CTRL+SHIFT a +.
7. Výplň a krytí
Dost dlouho jsem nevěděl rozdíl mezi výplní a krytím vrstvy. Tak tedy – Krytí má vliv na celkovou viditelnost vrstvy včetně efektů, kdežto Výplň se týká jen samotného obsahu vrstvy. Efekty jako vržený stín, úkos a reliéf, vytažení, apod., zůstanou viditelné.
Nyní už tedy vím, jak ve photoshopu jednoduše vytvořit kružnici. Stačí udělat kruh, dát mu efekt Vytažení a snížit výplň vrstvy na 0 %. Co bych za to tenkrát při vytváření hokejových wallpaperů dal :) (Na doprovodném obrázku najdete i názornou ukázku nulové výplně a stoprocentního krytí červeně vytaženého obdélníku)
8. Orientace ve vzorníku
Moc z vás pravděpodobně vzorník nepoužívá, ale to neznamená, že by se vám nemohl hodit. Chcete-li se například držet nějaké barevné palety (ať už dané grafickým manuálem, nebo se třeba rozhodnete použít paletu z Kuleru), vzorník se vám v každém případě šikne.
Bohužel nejde pro každý projekt mít samostatný vzorník, který by se s ním ukládal, jak je tomu třeba v Indesignu. A tak vám při jeho častém používání vznikne ve vzorníku docela maglajz. Mým řešením je, pojmenovat si první barvu daného projektu jako „Jméno projektu začátek" a poslední barvu jako „Jméno projektu konec". Blbé, ale funguje to.
9. Dvojité vytažení pomocí stínu
Stín je vlastně kopie tvaru vrstvy, kterou můžeme oproti originálu libovolně posouvat, rozostřovat, prolínat i obarvovat. Potřebujeme-li tedy dvojité vytažení vrstvy, stačí nám udělat první vytažení klasicky (Vrstva > Styl > Vytažení) a druhé pomocí stínu. Pouze mu změníme režim prolnutí na Normální, vybereme požadovanou Barvu vytažení, Krytí zvýšíme na 100 %, snížíme Vzdálenost na nulu, Rozsah naopak dáme na 100 % a Velikostí nadefinujeme šířku vytažení. Posouváním vzdálenosti pak můžete vytvořit efektní posunuté vytažení.
Jak mnoho čtenářů v prvním díle podotklo, podobným užitím stínu lze dojít k efektu v bodě 2.
Jak podotkl Mac, namísto stínu můžete podobným způsobem použít i efekt Vnější záře.
10. Rady pro rozvržení designu
Často se vám určitě stává, že pěkný web poznáte už z malého náhledu. Nemusíte vidět všechny detaily, abyste poznali, že celek skvěle funguje. Zkuste si občas jen hrubě naskicovat web v barevných plochách a ty pak jednu po druhé dopracovávat. Takový postup se hojně využívá při kresbě, nejdřív se vytváří hrubá skica a až postupně se dodělávají detaily. Soustředění ale probíhá vždy na celek, který nesmíte ztratit ze zřetele.
U webu je to obdobné, ať se vám ta hlavička povede jakkoliv, vždy bude záležet na celkovém dojmu. Zejména u náročnějších webů se proto vyplatí ujasnit si barevnost a vyvážení ploch hned na začátku a opravdu si tu práci s nalezením vhodné kombinace dát. Ušetříte si pak spoustu nervů.
Neberte to ale jako dogma. Takový Honza Sotorník z PeckaDesign prostě lepí jednotlivé části na sebe bez velkého plánování – a funguje to taky skvěle.
« Starší: Říkali mu Strašáček Novější: 10 jednoduchých rad, jak určit svou cenu na trhu »
Komentáře pro článek: Mých 10 tajných triků pro efektivní webdesign ve Photoshopu (2/2)
[3] Jiří Tvrdek, 11/08/2007
[1] Ať žijí Apple-wannabies! :)
[8] Marek Brádler, 12/08/2007
Photoshop je úlet:D Normálně používám Fireworks, ale už když jsem četl první díl, musel jsem PS vyzkoušet. No nějak mi to s ním nejde. Nebylby třeba ještě jeden díl .. 3/2? :)
1/ díky zveřejnění linku
2/ v podobných návodech (tutorials), které nejsou v angličtině je zvykem uvádět také originální (rozuměj anglické názvy) funkcí a položek menu, Photoshop si v angličtině nechávají sice zejména profíci, pro které podobné články nejsou primárně určené, ale je možné, že i leckterý začátečník či středně pokročilý má z různých důvodů “originální” photoshop
[10] Miroslav Thoren Jahoda, 13/08/2007
Děkuji za velmi užitečný a zajímavý článek. Neplánujete udělat další díl? Stálo by to za to! Děkuji!
[11] Jiří Tvrdek, 14/08/2007
[10] Pokud budu mít nějaké další tipy, určitě si je nenechám pro sebe. :)
[1] Mac, 11/08/2007
Veľmi pekné pokračovanie miniseríálu. Doplnil by som ešte (ak smiem), že je namieste vypnutie palety Navigator (na pohyb je lepší stlačený medzerník) a nahradiť ju paletou Character na úpravu textu, bez tej sa pri webdesigne nezaobídem. Mimochodom, pozerám, že niesom jediný kto používa flyakite OSX :).