Jste tu poprvé? - Skrýt (musíte být přihlášeni)

Tvorba typografického portrétu

  • napsalMorf3us
  • sekcePhotoshop
  • kategorieOstatní
  • verze programuCS5
  • znalostiautor předpokládá, že máte přečtené předchozí díly seriálu

28. 11. 2013 v 22:50 10 Tvorba typografického portrétu

Vytvořit typografický portrét pomocí základních nástrojů Photoshopu není nijak obtížné, a v tomto tutoriálu si ukážeme jak na to.

Většina z vás už se s podobným typem typograficky založených děl setkala. Pokud ne, setkáte se s nimi nyní. Na první pohled se může zdát, že bude postup tak komplikovaný, že by to snad zvládl pouze Photoshop guru. Opak je pravdou, jedná se o kombinaci těch nejzákladnějších nástrojů:

  • Pero
  • Nástroj text
  • V konečných krocích jednoduché maskování

Krom těchto základních nástrojů ale potřebujete ještě jednu věc, která už není součástí programového vybavení – vůli, opravdu pevnou vůli vydržet až do konce. Trpělivost a poctivá ruční práce je vaší tajnou zbraní

1. Příprava

a) Fotografie

Nejprve je potřeba najít vhodnou podkladovou fotografii, ze které budete vycházet. Pokud nejste extrémní detailista (jako já), tak vám výběr fotografie zabere pár minut. Pokud jste, připravte se na několikahodinové googlení (nebo použijete nějakou svoji fotografii).

Pokud jste našli fotografii, z které máte dobrý pocit, gratuluji a můžeme se pustit do dalšího kroku a tím je hledání textu. Tip: Pokud se jako já rozhodnete dělat portrét člověka, pokuste se najít fotku s co nejuhlazenějšími vlasy. A vůbec, čím méně vlasů bude dotyčný/á mít, tím lépe. Vlasy je potřeba tvořit z malinkatých písmen a tak by se mohlo stát, jako mně u portrétu Scarlett, že nad tvorbou vlasů strávíte snad více času, jak nad zbytkem portrétu.

b) Text

Co by to bylo za textový portrét, kdyby nebyl vytvořen z textu. Nikdo vám nezakazuje použít byť jen jediné slovo (nebo dokonce i písmeno) k vytvoření celého díla. A podle toho také bude vypadat výsledek. Pokud chcete aby vaše přáce stála za to, bude potřeba se poohlédnout po komplexním a obsáhlém textu.

Zapneme poznámkový blok a jdeme hledat text. (Poznámkový blok, protože se do něj při kopírování z netu nekopírují styly - jako je tomu třeba u Wordu – a nemusíte si to ručně od-formátovávat. Pokud vám to nevadí, klidně používejte Word, Open Office, či podobné programy.)

Osobně jsem texty k portrétům hledal na imdb.com v profilu jednotlivých hereček / herců. Známější osobnosti mívají i seznamy citátů z jejich filmů, rozsáhlé životopisy apod. A pokud nebudete tvořit herce, nebo ani portrét člověka, jistě si poradíte třeba s wikipedií, nebo pomocí googlu najdete relevantní texty.

Po shromáždění textu ho doporučuji trochu „očesat“ – odstranit zbytečné uvozovky, zbavit se závorek a dalších věcí, které pak do celku nezapadají. Není to vyloženě nutné, ale každý ne-abecední znak na sebe strhává více pozornosti a narušuje celek.

2. Hurá do Photoshopu

Než začnete pracovat s textem, je třeba připravit scénu. Nejprve umístěte obrázek na pozadí s neagresivní barvou, například černou. Volba barvy je na vás, ale uvědomte si, že do toho obrázku budete koukat třeba 5 a více hodin, takže volte s rozvahou.

Nebojte se vaši fotku zvětšit tak, jak vám to bude vyhovovat, v této chvíli nás deformace pixelů ani tolik nezajímá, ve finálním zamaskování se tyto drobnosti díky rozmanitosti textu ztratí. Pro představu - obrázek, který je použit v tomto tutoriálu, měl rozlišení 1620 x 2500.

Nyní je potřeba fotografii zamaskovat, aby vás nerušilo její pozadí. Nemusí jít o dokonalou masku, spíše naopak – je lepší nechat okolo postavy tenký obrys, aby bylo při práci jasně vidět, kde končí postava a kde už začíná pozadí. Až budete s maskou spokojeni, nastavte krytí této vrstvy na 50%. Opět, záleží na vás, můžete mít nastavené krytí 100%, ale budete muset pracovat s takovou barvou textu, která je kontrastní jak na bílé, tak i na černé, proto je lepší snížit krytí a přizpůsobit text barvě pozadí. Navíc i zde může být fotografie velmi světlá a z té záře by vás po čase začaly bolet oči. Tip: Barvu a vůbec zpracování celého pozadí si zvolte jak chcete, nemusí to být vůbec jednolitá barva, ale pokud s touto technickou začínáte, je lepší začít jednoduše a až když budete mít několik překreslení za sebou, můžete se pustit do složitějšího zpracování. Ušetříte si hodně času a nervů.

3. Začíná otročina

Jestliže máme vše připravené, můžeme se konečně pustit do práce. Jak jsem zmiňoval hned na začátku, základem pro vkládání textu je nástroj Pero [P]. Vyberte ho tedy a nakreslete svou první křivku. Nikde není psáno, jak má vypadat. Záleží čistě na vaši intuici a na tom, jaký „flow“ u výsledného díla chcete. Možná jste narazili na pár tutoriálů, kde stačilo vložit jeden dlóóuhatánský vodorovný odstavec, tak 100x ho nakopírovat a poté zamaskovat. Nu, i takto to jde, ale výsledek vypadá nezajímavě a ‚placatě‘, bez jakékoliv kreativity. U tohoto postupu se kvalita výsledku skutečně odvíjí od toho, jak dobře budete fotku obtahovat.

Doporučuji začít v oblasti, kde čelo přechází ve vlasy. Platí všechna pravidla práce s perem, takže pokud uděláte špatnou křivku, buďte v klidu, protože ji můžete i nadále editovat a kdykoli chytnout kotevní bod (CTRL + klik na bod a následné táhnutí bodu či jeho ‚ramen‘).

Jestliže máte křivku nakreslenou, vyberte nástroj Text [T], kurzorem najeďte nad křivku a okamžitě uvidíte, že se ikona kurzoru změní. Přesuňte se do svého poznámkového bloku, zkopírujte kus textu (doporučuji delší, aby se vešel na celou křivku) a vložíte. Jak vidíte, text krásně kopíruje tvar křivky.

Na 99% se koncem věty netrefíte do délky křivky. Nestane se ani to, že by text ‚dojel‘ až na konec křivky, protože za posledním zobrazeným slovem je očividně nějaké dlouhé slovo a proto zde vzniká mezera. Vy ale ve většině případů chcete, aby byla křivka zaplněna textem až po okraj.

Zde přichází na scénu úprava textu – nikoli obsahu, ale formátu. V hlavní menu vyberte Okna > Znaky a uvidíte základní okýnko na manipulaci s textem. Tip: Doporučuji volit co nejčitelnější font, takže ideálně bezpatkový, osobně jsem snad vždy použil Arial (s vyjímkou portrétu svých hodinek, kde jsem využil asi 20 fontů).

Vyberte celý text na křivce (klikněte na jakékoli slovo a stiskněte CTRL + A) a v okně Znaky si nyní hrajte dle potřeby. Můžete upravovat buďto samotnou velikost, šířku či výšku písma, nebo mezery mezi písmeny. Za mě doporučuji neroztahovat / nezkracovat text pomocí větších mezer mezi znaky, protože pak bude někde text nahňácaný a jinde až přehnaně ‚vzdušný‘ a mezery budou ve finále jak pěst na oko. Doporučuji si hrát pouze s šířkou písma. Nicméně, neplatí to tak vždy – u složitějších a zakroucenějších tvarů se znaky vkládají tak trochu zvláštně a vznikají větší mezery, takže se asi párkrát dostanete i k této úpravě. Pro představu, při práci jsem se s šířkou textu snažil držet v rozmezí 80-120%. Občas jsem musel přetáhnout a texty pak vypadaly divně.

Nevím jak ve starších verzích, ale v CS6 stačí vybrat text, kliknout myší do okénka s procenty u šířky textu a zvětšovat si zmenšovat hodnotu pohybem kolečka na myši. Tohle jsem dříve nevěděl (nebo to možná u starších verzí nešlo) a veškerá procenta zkoušel a přepisoval ručně. Nejde tu o přesnost, proto ruční výběr nepotřebujete, a cokoliv co vám ušetří práci se hodí.

Ze začátku vám bude upravování textu u každého řádku připadat otravné, ale jakmile se do toho dostanete, budete to dělat automaticky a od oka poznáte, o kolik % +- hodnotu navýšit. Jakmile upravíte první křivku, nejjednodušší je ji duplikovat (vyberte nástroj přesun [V], stiskněte ALT a vybranou vrstvu posuňte, automaticky tak vytvoříte kopii), umístit o kus níže a pomocí pera o kousek posunout jednotlivé body s ohledem na obrázek. Snažte se, aby se textové vrstvy vzájemně nepřekrývaly. U vlasů jde překrývání použít k dosažení lepšího efektu, ale uvnitř samotného je lepší znaky nepřekrývat. Při dokončování se vám určitě stane, že bude obtížné nějaký text do posledních míst vtěsnat a je zcela normální, že budete občas u slov měnit odsazení, výšku a šířku. Ale nechci vás strašit, třeba se vám tomu nějakým zázrakem podaří vyhnout.

Křivku jsme deformovali, ale mít pod sebou dva stejné texty se nehodí - takže buď se znovu zanořte do poznámkového bloku, anebo – což doporučuji – pouze odmažte dostatek textu, aby se ztratilo to, co je na křivce výše, a zůstal nový. Obvykle si zkopíruji třeba desetiřádkový text a ve dvaceti křivkách jen odmázávám bez nutnosti pracovat s poznámkovým blokem. Jelikož je to text, tak se Photoshop nijak nesesype a ty desítky řádků u pomyslného ‚bufferu‘ každé křivky nejsou nijak náročné na výkon.

Ještě jeden tip – někdy slovo nezačíná přesně tam, kde začíná křivka (kvůli nějakému divnému poloměru prvotního kotevního bodu) a po čase vás určitě omrzí to neustále upravovat. Doporučuji klidně začátek křivky protáhnout dál, než by měl být a text normálně posunout pomocí mezerníku. Někdy máte v jedné části portrétu pěknou křivku, jejíž část se vám hodí v jiném místě a je na dlouho ji editovat, takže mezerník přijde vhod. Možná si říkáte „jaképak na dlouho, vždyť to je otázka pár vteřin“, ale když si představíte, že stejný úkon vykonáváte třeba u 300 křivek, tak je to ztracená půlhodina. Proto – buďte leniví, ušetříte čas. Důležitý je výsledek, ne čistota práce s vrstvami.

Stejný postup nyní budete aplikovat dokola a dokola, dokud nebudete mít finální kompozici. Obkreslujte linie a snažte se držet směr, který detaily původního obrázku udávají. Tip: Organizujte si vrstvy do skupin, jinak byste se z toho časem zbláznili. Až budete přesouvat desítky vrstev sem a tam, vyplatí se vám to.

4. Začišťování a krůčky k dokonalosti

Pokud jste přežili nespočet hodin duplikování, tvoření, ladění a upravování křivek a textu, GRATULUJI! Opravdu gratuluji, odvedli jste velký kus práce a nikdo o vás nemůže říct, že máte slabou vůli. Pokud jste se z toho zbláznili, nic si z toho nedělejte, asi to k tomu patří. Po všech těch dlouhých hodinách by váš výsledek měl připomínat tento obrázek:

Nyní je čas na maskování. Pokud chcete mít z obrázku ještě lepší pocit, že vypadá vážně ‚profi‘, můžete vzít do ruky kapátko [ I ] a postupně nabírat barvy z pokladové fotografie a aplikovat je na jednotlivá slova. Tímto jsem si také prošel – u již zmíněného portrétu Scarlett – a.. nu, slabším povahám to nedoporučuji a očekávám, že se všichni spokojí s maskou.

Pokud máte opravdu zájem, postup pro barvení podle podkladové fotky je následující: skryjte vrstvu s textem, vezměte kapátko, vyberte barvu z pokladové fotografie v místě slova, které chcete obarvit, zviditelněte textovou vrstvu, vyberte dané slovo a klikněte 2x na tlačítko, jímž se mění barva popředí a pozadí. Pokud chcete tento postup opakovat ještě asi tak 1000x (nepřeháním), nebráním vám v tom.

Maskování

Skryjte všechny vrstvy mimo těch textových. Úplně navrch vytvořte novou vrstvu a sjednoťte vše viditelné. Z nějakého důvodu v CS6 nevidím v nabídce sloučení, které by neodstranilo slučované vrstvy, proto doporučuji zkratku (CTRL + ALT + SHIFT + E), která vše sloučí do nové vrstvy a ponechá všechny skupiny nedotčené (to by vám asi hráblo, kdybyste o všechnu práci najednou přišli, ze zvyku uložili, pak vám spadl program a zůstal by vám jen obrázek).

Teď jste spojili stovky vrstev v jednu. Skryjte vše kromě této vrstvy (podržte ALT a klikněte na ikonku oka vedle vrstvy) a vytvořte z nové vrstvy výběr: CTRL + klik na náhled vrstvy v panelu vrstev. Tím se vám vytvoří výběr. Poté si – s aktivním výběrem – zobrazte podkladovou fotografii, vyberte ji v panelu vrstev a přidejte výběr jako masku vrstvy (klikněte na třetí ikonku zleva ve spodním panelu vrstev).

Teď skryjte podkladovou fotografii a zobrazte si černé pozadí. Pokud jste vycházeli z dobré fotky, máte vyhráno, pokud ne, možná bude potřeba některá místa doladit – viz obrázek.

Ladění – zamkněte si pixely u dané vrstvy (v panelu Vrstvy ikonka připomínající malou šachovnici), vezměte kapátko a z fotografie vyberte nejbližší barvu té, kterou chcete špatná místa zamalovat. Vezměte štětec [B] s tvrdostí 0% a malujte. Pokud se něco pokazí, stále tu je tlačítko [Zpět] :)

Závěr

Takto vypadá finální dílo ve vyšším rozlišení. Další textové portréty si můžete prohlédnout na mém DeviantArt profilu.

Děkuji za pozornost a doufám, že jste se něco přiučili. Jak jste sami viděli, nejde o žádnou složitou techniku, ale spíše o trpělivost. Budu rád, když se v komentářích podělíte o své výsledky. Přeji hodně štěstí do tvorby a grafice zdar!

V grafickém světě se pohybuji jako lVlorf3us, v reálném světě jako Tomáš Vachuda. V komerčním světě se zajímám hlavně o loga a tiskoviny, v osobní tvorbě zase o digitální matte-painting, montáže a typografické hrátky. V obou směrech se snažím neustále zlepšovat a moc rád se o své poznatky podělím.

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #10
  • Neregistrovaný kolemjdoucí
  • 10. August 2015 | 13:57
  • Skupina: Neregistrovaní

Hodně povedené :) někdy vyzkouším :) ale vypadá to na solidní piplačku

  • #9
  • Morf3us
  • 3. December 2014 | 17:48
  • Skupina: Autoři / Redaktoři

Neregistrovaný kolemjdoucí > Ano, máš pravdu, asi jsem to tam zmínil nešikovně. Odkazoval jsem na svůj jiný typografický portrét (právě na tu Scarlett). ;)

MAKL > Tak právě proto jsem psal tutorial, aby si to lidi zvládli vytvořit sami. :)

  • #8
  • Neregistrovaný kolemjdoucí
  • 9. September 2014 | 16:00
  • Skupina: Neregistrovaní

:-) tohle není Scarlett ale Yvonne

  • #7
  • MAKL
  • 3. August 2014 | 16:43
  • Skupina: Neregistrovaní

Hledám někoho kdo by mi to udělal našel by se tu někdo? :)

  • #6
  • Morf3us
  • 15. March 2014 | 16:17
  • Skupina: Autoři / Redaktoři

Díky. Nic dalšího neplánuju, z typografie dělám jen toto. Ale třeba někdo jiný něčím přispěje. Co konkrétně myslíš pojmem typografický design?

  • #5
  • 5p1d3rb0y
  • 13. March 2014 | 18:53
  • Skupina: Registrovaní Uživatelé

Tutoriál super. Bude v budoucnu více článků zaměřených na typografický designe?

  • #4
  • Morf3us
  • 6. December 2013 | 18:50
  • Skupina: Autoři / Redaktoři

Díky všem. :-) On se tenhle tut od ostatních tutů trochu liší, jelikož tady jde spíše o samostatnou práci a ode mě máte jen krátkou nápovědu, jakého postupu se držet. Takže nejsem tak naivní, abych věřil, že všichni věnují na zkoušku těch 5+ hodin tvorbě, ale pokud někdo ano, tak budu držet palce a určitě výsledek moc rád uvidím.

Pěkná práce, chce to špetku trpělivosti. Ale výsledek stojí za to :)

  • #2
  • F3RD4
  • 3. December 2013 | 15:05
  • Skupina: Autoři / Redaktoři

Moc hezké! Vždy sem si říkal jestli je v tom nějaká finta v tvorbě takového efektu a nebo jestli je to proste jen prcačka... koukám, že b je správně :D

  • #1
  • Martys
  • 28. November 2013 | 23:24
  • Skupina: Registrovaní Uživatelé

Pecka :-)

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi