Mých 10 tajných triků pro efektivní webdesign ve Photoshopu (1/2)
13/07/2007 / Webdesign
Takže nyní už opravdu něco k tématu. Tím je 10 triků, které mohou zefektivnit vaši práci při navrhování webů, kde záleží na každém pixelu. Protože triky jsou celkem obsáhlé, rozhodl jsem se je rozdělit do dvou dílů... Připraveni? Jdeme na to.1. Zatočte s neostrým podtržením
Takže jste vytvořili text v body, nastavili mu vyhlazení a nyní chcete udělat odkaz s podtržením. To zlé vyhlazení vám ale podtržení neudělá ostré, nýbrž všemožně rozmazané. Dělat manuálně linku se vám nechce, protože při každé změně textu to budete muset předělávat?
Na pomoc přichází přítelkyně Transformace. Přibližte si zobrazení na nějakých 1600 % a zvolenou textovou vrstvu dejte transformovat (Ctrl+T). Nyní párktát ťukněte do šipky nahoru. Princip jste asi pochopili.
2. Vykousněte text
Text můžete udělat zajímavějším, pokud mu dodáte určitou formu plasticity. Máte kupříkladu tmavěmodrý text na světlemodrém pozadí.
Udělejte kopii vrstvy s textem, dejte mu barvu o fous světlejší než má pozadí, umístěje jej pod původní text a posuňte např. o pixel dolů a doprava. Voilá, vykousnutí je na světě. Použití najde tam, kde bude text vložen jako obrázek.
3. Položky v horizontálním menu rozmístěte flexibilně
Teď něco složitějšího: Otázka snadno editovatelného rozmístění položek v menu mě budila z lechtivých snů o Comic Sansu od dob, kdy jsem navrhl svůj první web. Když jsem se rozhodl změnit velikost či typ fontu, celé menu se mi často rozhodilo. Odhadnout mezery mezi položkami je taktéž sázka do loterie (mám na mysli menu s nesymetrickými položkami ofkóz), co s tím?
Můj recept je následující: Do samostatných textových horizontálně zarovnaných vrstev vytvořte všechny položky, které v menu mají být. První (levé) položce (většinou Úvod) dejte zarovnání na levý praporek (Ctrl+Shift+L). Poslední, pravé položce (často Kontakt) dejte zarovnání na pravý praporek (Ctrl+Shift+R), zbylé položky, které jsou mezi nimi, zarovnejte na střed (na zkratku přijdete). Umístěte první a poslední položku na svá místa.
Teď potřebujete zjistit, kolik volného místa v menu máte, abyste ho mohli distribuovat. Nahustěte tedy všechny položky k jednomu kraji (krom umístěné položky z opačného kraje) a třeba nástrojem Výběr vybráním prázdného místa zjistětě v paletce Informace jeho velikost.
Zjistíte, že velikost prázdného místa vzniklého nahuštěním položek je např. 180 pixelů. V menu máte 5 položek, to znamená že potřebujete 4 mezery. 180 děleno 4 je 45. Položky od sebe budou vzdáleny 45 pixelů.
Proč takto složitě? Proč to zarovnávání na praporky? Uvidíte, že když nyní změníte typ nebo velikost fontu, krajní položky zůstávají na svých místech. Mezery mezi ostatními položkami zůstanou vždy stejně veliké. Edit: Nezůstanou stejně veliké, ale alespoň neuletí pryč. Budete to muset spočítat znovu.
4. Odsaďte text od kraje
Tento tip se týká spíše designu, nežli samotného postupu. Převážně začínající grafici I někteří zkušení grafici se soustředí na grafické propracování hlavičky a grafických prvků a nakonec zmrší nedotáhnou docela povedenou grafiku špatně umístěným textem, který je na ostatních prvcích doslova nalepen.
Ale textu se bude lépe dýchat a web bude působit vzdušněji, odsadíte-li text více od krajů a zvýšíte-li řádkový proklad (ideální pro web je to někde kolem 150 %) Naučíte se mít rádi prostor.
Tip: Černá barva textu (000000) může působit neotesaně. Zkuste textu nastavit tmavý odstín podkladové barvy.
5. Pracujte s vektory
Hodně grafiků při navrhování webů nerado používá vektorové objekty a vektorové masky, protože při jejich vytváření i posouvání vznikají nevzhledné, špatně vyhlazené okraje. Ha!
Mřížkou dojdete spasení. Základem každého Tvrdkovského designu je práce s mřížkou. Nemám teď na mysli knihy o gridech, umisťování prvků do nich a honění si trika s tím spojené. Mám na mysli mřížku, kterou disponuje Adobe Photoshop.
Nastavení mřížky najdete v Předvolbách (CTRL+K) > Vodítka, mřížka a řezy. Tam si nastavte čáry mřížky po 100 obrazových bodech a dělení na 10. Dále doporučuji vytvořit a zapamatovat si klávesovou zkratku na zobrazení/skrytí mřížky (osvědčilo se mi CTRL+§ na české klávesnici), protože mřížka základ všeho, přátelé.
Pokud nenastavíte jinak, budou se vám objekty při jejím zobrazení na mřížku automaticky přichytávat – a v tom je ten fígl.
Se zapnutou mřížkou tedy můžete vesele vytvářet vektorové objekty, které se budou automaticky přichytávat k jejím vodítkům a tím pádem bude vše krásně čistě a vyhlazené.
Hint: Teď byste potřebovali vektorový objekt posunout o pixel, že jo. Vyberte cestu či požadované body nástrojem pro výběr cesty a při 100% zobrazení s nimi můžete pomocí šipek hýbat. Důležité je to 100% zobrazení. Jenom při tomto zobrazení mají klávesy u vektorů krok 1 pixel a vše tedy zůstává vyhlazené. Při bližším zobrazení budete posunovat jen o části pixelu a čisté vyhlazení bude tatam.
To je pro dnešek vše. V pokračování článku se můžete těšit na triky se selekcí, výplěmi a krytím, vzorníkem, stíny a na pár rad pro rozvržení designu. Coming soon.
Budu rád za připomínky a názory, zda jsou popisované postupy pro vás příliš jednoduché a triviální, či naopak příliš složité. O tvorbě webů ve Photoshopu by se toho dalo napsat daleko víc, otázkou je, zda to někomu k něčemu bude.
Aktualizováno v sobotu 14. července v 15:30. Doplněny obrázky.
« Starší: Grafikův blog je zpět, co bude dál? Novější: Říkali mu Strašáček »
Komentáře pro článek: Mých 10 tajných triků pro efektivní webdesign ve Photoshopu (1/2)
[5] Michal Acler, 14/07/2007
Chtelo by to obrazky! Jen prvni tip jsem musel cist asi trikrat, nez jsem pochopil (bez zapnutyho PS), o cem je vlastne rec… Btw. co je text v body?
[6] Jiří Tvrdek, 14/07/2007
[5] Obrázky doplněny. Text v body je text v <body>.
hele super clanek, jako ostatne skoro vsechny tady.
Jen k bodu 3. Pokud maji tyto rady usnadnit praci, tak kopirovani dalsi vrstvy jen proto, aby se vytvoril tento bevel efekt, je zbytecny. Vyuzil bych styl vrstvy a drop shadow, ktery nastavim na bilou se 100% opacity, blend mode na normal, distance 1 a zbytek 0. Odpadne tim pripadna uprava spodni vrstvy pokud by se treba slogan menil. Prkotina, ale musel jsem to napsat ;)
[8] Jiří Tvrdek, 14/07/2007
[7] Jo to jsem chtěl napsat v druhé části dílu u stínu, že by ten postup šel použít i na tento třetí bod. A máš pravdu, používat to takto je vpodstatě zbytečné, i když rychlé…
Hezky clanek… jen jedna vec mi neni jasna.
Text v body… tim myslis text v hlavnim obsahu? Neco jako Lorem ipsum? Pokud ano tak nechapu proc ho vyhlazovat. Na webu preci potom take neni vyhlazeny.
Pokud necham u textu Anti-aliasing na none tak vypada presne tak jako v realu a podtrzeni je ostre jako britva…
[10] Jiří Tvrdek, 14/07/2007
[9] Ano, mám na mysli text v hlavním obsahu, ale vpodstatě jde o jakýkoliv podtržený text.
Nulový anti-aliasing vypadá přesně jako v reálu, pokud nemá uživatel ve windowsech zaplé vyhlazování. No a protože sám vyhlazování zaplé mám (na LCD se to líp čte), používám to i ve Photoshopu. Je to i hezčí v návrzích, zákazníkům se to líbí víc :)
[12] Kohout, 15/07/2007
Pěkný! Jen k bodu 2, řešim to mnohem flexibilněji: ve Stylu vrstvy dám Vržený stín, velikost stínu nastavím na 0, vzdálenost na 1 a pak už jen nastavím barvu, případně krytí. Efekt je stejný, ale výhoda je v tom, že pokud ten text chci ještě nějak upravit, nemusím znovu kopírovat tu textovou vrstvu.
[13] Jiří Tvrdek, 15/07/2007
[12] Viz. komentář 7 a 8 :)
[14] Michal Acler, 15/07/2007
Díky za obrázky, teď jsou popisované postupy mnohem jasnější! A rovněž díky za přínosné tipy, z nichž některé mi byly neznámé.
[15] Jiří Tvrdek, 15/07/2007
[14] Trochu jsem přecenil délku jednotlivých tipů, původně jich mělo být 10 bez obrázků. Když jsem pak viděl, kolik textu vzniklo z pěti a představil jsem si k tomu obrázky, tak jsem je tam raději nedával, aby to čtenáře hnedka neodradilo :) No propříště to asi budu vydávat po jednom, alespoň si hned nevyplácám témata :)
[17] Jiří Tvrdek, 15/07/2007
[16] Viz. komentáře 7, 8 a 12 :)
[18] Lukáš Strnadel, 16/07/2007
[10] S tímto bych zase tak moc nesouhlasil (jestli můžu ;-)). Podle mne vetšina potencialních zakazníku vyhlazovaní ve win. zapnuté nemá, dokonce si dovolím tvrdit, že ani neví kde se zapíná a z toho důvodu raději předkládám návrhy s none anti-aliasing. Vyhnete se tím dotazům typu: “A proč to písmo je takové hranaté když na tom obrázku bylo hezčí.” Dle mého názoru by se vyhlazovaní do návhrhu mělo vypínat. Samozřejmně tam kde bude text.. neplatí pro menu kde je někdy hezčí nebo nezbytné mít obrázkový odkaz.
[19] Jiří Tvrdek, 16/07/2007
[18] No, standardně je ve windowsech zapnuto vyhlazení až od určité velikosti (16 bodů cca?) Takže nadpisy lze s klidným svědomím dělat vyhlazené.
Uznávám že u toho textu je to sporné, ale prostě se mi na to na LCD líp kouká a nikdo si zatím nestěžoval.
No ale jinak jako nesouhlasit, to sis dovolil dost :D
[20] Michal, 16/07/2007
V IE7 je již automaticky zapnuto vyhlazování písma u všech webových stránek bez ohledu na to, zda je zapnuto vyhlazování ve Windows. A protože počet lidí jedoucích na IE7 roste, nemá význam pracovat bez vyhlazování.
[21] von Banhoff, 16/07/2007
dovolil jsem si přihodit nějaké další tipy ze svojí zahrádky, pokud se neurazíte
http://vfb.bloguje.cz/320230-35-bran-rosiho-photo-shopa.php
[22] Jiří Tvrdek, 16/07/2007
[21] Čéče tam toho je, některý tipy jsem si schovával na druhou část článku, teď abych vymýšlel nové :)
[23] Marek Vidtman, 16/07/2007
Nejsem grafik, ale take mam nazor na vyhlazovani pisem v navrzich ;). Vesmes take nesouhlasim s tim, ze by v navrzich melo byt pismo (na webu neobrazkove) vyhlazeno. Uz jen proto, ze ruzne prohlizece, vyhlazuji ruzne. Ukazka na vidtman.com/blogger. A to je to sejmuty na stejnem OS (WIN XP), na jinych OS to bezpochyby vypada opet trosku jinak.
[24] Jiří Tvrdek, 16/07/2007
Upozorňuji srdíčkové blogospammery, že jejich odkazy „Mrkněte pls na můj blogísek“ budou neprodleně smazány a jejich IP dostane pro komentování banán.
[25] Marek Vidtman, 16/07/2007
Jirko, nemyslel jsi tim [24] doufam mne (asi ne, kdyz jsi muj prispevek nesmazal ;) )? Tak jsem to opravdu nemyslel. Jen do komentaru nejde prihodit obrazek.
[26] Jiří Tvrdek, 16/07/2007
[25] Kdepak, tvůj příspěvek je k věci :)
[27] Jiří Tvrdek, 17/07/2007
[27] Myslím že je to každého věc. Poznatků pro i proti tu zaznělo dost a je na každém, jak s tím naloží.
Za sebe bych doporučil laickým klientům písmo nevyhlazovat, protože by tam mohlo dojít k nedorozumění. Zkušenější klienti nebudou mít potřebu něco takového řešit…
[28] Michal Acler, 19/07/2007
[28] Pekne pojmenovani, ti laicti a zkusenejsi klienti ;). Osobne antialiasuju to pismo, ktery chci mit v navrhu jako obrazek a nevyhlazuju to, co bude textem.
[29] Frantisek Szabo, 21/07/2007
Dobry den skvely clanek, Jen trosku nepochytavam Mrizku. Toto bohuzel nedokazu najit v mem Anglickem PSku… Předvolbách (CTRL+K) > Vodítka, mřížka a řezy. Mohl by mi nekdo poradit jak je to anglicky?
[30] Schimapnze, 24/07/2007
Tohle se vám dost povedlo. Takovéhle články mám nejraději. Takové, jak už zede napsali “know how”, ty s příklady s praxe, které se určitě využijí!
[32] Jakub Švehla, 16/08/2007
[30] Edit -> Preferences -> Guides, Grid & Slices. Zde v části pojmenované Grid napiš do kolonky Gridline every: 100 pixels a do kolonky Subdivisions: 10.
[1] gwh, 14/07/2007
Paráda, takovéhle “know how” články zbožňuju. Obzvlášť z oblasti PS. Díky za ně.