Rheinwerk Design Adobe Photoshop CS4 - Pokročilé techniky - 11. časť
11.2 Postupy a techniky montáže
V oblasti webového dizajnu môže Photoshop využiť obrovský rozsah svojich kreatívnych možností. Tu sa predovšetkým jednotlivé oblasti jeho použitia prelínajú mnohými spôsobmi. Použité postupy a metódy sú vo veľkej miere prenosné na podobné úlohy v dizajne obrazovky, bez ohľadu na to, či ide o používateľské rozhranie pre disk CD-ROM alebo dizajn ponuky pre video DVD. Existujú iba rozdiely v obrazových formátoch výstupu (pozri časť 11.3).
11.2.1 Príprava práce: Určite veľkosť obrázka
Tabuľka 11.1 Rozdelenie veľkostí obrazoviek a najdôležitejších prehľadávačov (stav 04/2009, zdroj: marketshare.hitslink.com)
Pokiaľ ide o tlač, je to pomerne jednoduché: hárok A4 je 297 x 210 mm a to je všetko. Pri návrhu obrazovky pre disk CD-ROM zvyčajne existujú veľkosti obrázka 1 024 x 768 alebo 800 x 600 pixelov. Záležitosť je jasná aj pri dizajne ponuky DVD: 720 x 576 pixelov pre európsky systém PAL alebo 720 x 480 pixelov pre americký televízny systém NTSC.
Vo webdizajne nie je táto téma ani zďaleka jasná. Samozrejme, v súčasnosti bežné veľkosti monitorov najskôr určujú, čo je vôbec možné a užitočné. Dôležitá je aj distribúcia týchto veľkostí (pozri tabuľku 11.1).
Oveľa ťažšie je však odhadnúť skutočnú „využiteľnú plochu“ webu. Prakticky všetky prehľadávače tu majú odlišné hodnoty, pretože posuvné pruhy, stavové riadky, lišty ponúk a záhlavia potrebujú svoje miesto. Táto veľkosť závisí aj od konfigurácie používateľa, ako aj od ďalších nainštalovaných panelov nástrojov alebo „Tém“ (vlastné šablóny používateľského rozhrania, napr. Pre Firefox). Ak by sa to malo zhromaždiť pre takmer tucet súčasných prehliadačov pre Mac a Windows a rôzne veľkosti obrazoviek, bola by potrebná väčšia tabuľka.
Obrázok 11.1 Štandardné rozmery webových stránok z aplikácie Adobe Dreamweaver (vyššie) a vlastné veľkosti súborov vo Photoshope pre súbor • Nové (nižšie)
Spoločnosť Adobe láskavo zahrnula niektoré štandardné veľkosti webových stránok na náhľad dokumentu do päty okna editora Dream-weaver, čo sa ukázalo ako veľmi užitočné. Na základe týchto čísel môžete vo Photoshope vytvoriť svoje vlastné predvolené veľkosti pre dialógové okno výberu príkazu Súbor • Nové.
11.2.2 Práca so snímkou obrazovky
Screenshot tohto okna je užitočný, aby ste získali realistický dojem nielen o dostupnej veľkosti, ale aj o tom, ako bude web vyzerať neskôr v okne prehliadača väčšiny divákov.
Screenshot (kľúč) dopadne do schránky a je zbavený obsahu okna vo Photoshope, aby mohol poskytnúť rámec pre neskoršiu prácu v súbore dizajnu obrazovky na najvyššej úrovni (opraviť pomocou „zámku“!). Pretože je stále dosť rozšírený, môže Internet Explorer 6.0 slúžiť ako vodítko pre neskoršiu prácu, najmä preto, že pokiaľ ide o rozmery povrchových prvkov, je to takmer vo všetkých ohľadoch „najhorší prípad“. Máloktorý prehľadávač momentálne necháva menej priestoru pre webové stránky v štandardnej konfigurácii.
Obrázok 11.2 Screenshot aplikácie Microsoft Internet Explorer 6.0 v systéme Windows XP bez obsahu okna (1 024 768 pixelov)
Okno prehliadača ako súčasť dizajnu obrazovky má tiež výhodu v prípade prezentácií, že si zákazník dokáže lepšie predstaviť budúcu stránku s týmto rámcom, pokiaľ nie sú k dispozícii skutočné webové stránky. Pokiaľ ide o finálnu produkciu, môžete rám prehliadača odstrániť pomocou nástroja na orezanie.
11.2.3 Montážne nástroje vo Photoshope
Medzitým je veľmi atraktívny panel nástrojov, ktorý je k dispozícii návrhárom obrazoviek všeobecne a najmä webovým dizajnérom pri ich montážnych prácach vo Photoshope. To prehľad presne neuľahčuje, ale otvára to rôzne možnosti.
Po zavedení úrovní obrazu existovali iba tieto úrovne a ich režimy, ale teraz je možné použiť úrovne nastavenia a plnenia ako prvky obrazu, ktoré je možné naďalej upravovať. Už nie sú významné z hľadiska veľkosti súboru, pretože neobsahujú žiadne obrazové pixely. Použitie maskovania vo forme vrstvových, vektorových a orezávacích masiek rozširuje možnosti bez odstránenia originálnych umeleckých diel. Okrem toho sú ďalšími dôležitými prostriedkami skupiny a v neposlednom rade inteligentné objekty a inteligentné filtre.
Inteligentné objekty | Inteligentné objekty predstavené v aplikácii Photoshop CS2 sa vyvinuli do veľmi dôležitého nástroja pre úlohy spojené s montážou, najmä pre dizajn obrazoviek. Nedeštruktívna integrácia rozmanitého obrazového materiálu má za následok oveľa väčšiu tvorivú slobodu ako doteraz. Pri použití tohto typu vrstvy je potrebné vziať do úvahy veľa jemností, pretože sa nie vždy správajú tak, ako by sa dalo očakávať od podobných funkcií v iných programoch (vrátane programov od Adobe). Tieto vtipy a niekoľko trikov, ako s nimi zaobchádzať, sú zhrnuté nižšie:
S Photoshop CS4 sa môžete konečne rozhodnúť, či chcete prepojiť masku vrstvy s vrstvou obrázka a presunúť ju s ňou alebo nie.
Vektorové tvary, či už sú to roviny tvaru, vektorové masky alebo cesty, majú vyššiu presnosť určovania polohy ako pixel. To isté platí pre usmernenia. To môže byť veľmi nepríjemné, najmä pokiaľ ide o úlohy webdizajnu, pretože tam budú neskôr pozdĺž pomocných čiar rezané s presnosťou na pixely. Pri webdizajne by ste preto pri umiestňovaní vodiacich línií mali vždy držať klávesu, aby zapadli na svoje miesto iba v celých pixeloch.
Ako veľmi efektívna vizuálna pomôcka na určovanie polohy spoločnosť Adobe zaviedla od verzie CS2 takzvané „Smart Guides“ (magnetické vodidlá), ktoré sa zobrazujú iba pri pohybe a ktoré umožňujú sústrediť sa na niekoľko skutočne dôležitých statických údajov. Môže obmedziť pomocné vedenia.
11.2.4 Obrázky a HTML
Výstup bol dlho založený na tabuľkovej štruktúre. Tabuľky sú však dosť nespoľahlivé na zobrazenie a nikdy nie sú skutočne stabilné, jednoducho preto, že nikdy neboli určené na tento účel. Medzitým hrajú kaskádové štýly (CSS) vo webovom dizajne čoraz dôležitejšiu úlohu. Tu je možné pixelové presné umiestnenie rámcov a oveľa lepšia typografia so súčasne štíhlejším kódom. Medzitým - po náročných technologických a politických bojoch medzi rôznymi softvérovými spoločnosťami a súčasne s W3C - existuje v displejoch v mnohých prehliadačoch a operačných systémoch niečo ako určitá spoľahlivosť. Photoshop to zohľadňuje tým, že ponúka výstupy založené na tabuľkách aj CSS. To je obzvlášť zaujímavé pre používateľov Photoshopu, pretože mnohé z nich sú užitočné aj pre ďalšie kroky vo webdizajne, napr. B. s editormi webových stránok, ako je Dreamweaver, sú kompetentní. Pri menšom a prehľadnejšom kóde sa výrazne uľaví im a samozrejme aj tým, ktorí kód píšu (stále alebo znova) ručne.
Pre výstup navrhnutého obrazového materiálu na web je potrebné čiastočne opustiť svet čistých obrazových formátov a zaoberať sa zmiešanými technológiami, ako je začlenenie obrázkov do jazyka popisu stránky. Aj keď veľa používateľov Photoshopu pozná základné základy webu a HTML, tu je rýchle zhrnutie.
Technicky zdatní grafici ako prví „zneužili“ syntaktické prvky poskytované HTML „webovým jazykom“ na kreatívne účely. HTML je značkovací jazyk, ktorý má mapovať hierarchie obsahu. Okrem toho ponúka minimálne prostriedky na návrh, čo by malo na mnohých technických platformách zaručiť iba čo najmenej obmedzenú čitateľnosť. K dispozícii je sedem úrovní nadpisov, niektoré špeciálne formáty, tučné písmo, kurzíva, podčiarknutý text, jednoduché tabuľky, možnosť integrácie obrázkov a médií prostredníctvom odkazov a niekoľko ďalších funkcií. Ale to bolo ono: HTML nie je jazykom popisu stránky kompatibilným s rozložením, ako je PostScript, svojou orientáciou na presnú architektúru rámca.
Iba tabuľky v HTML sú z polovice užitočným spôsobom, ako získať akési rámcové rozloženie. Prví weboví návrhári začali s týmito skromnými prostriedkami. Na tomto základe webového dizajnu, ktorý tvorí najväčšiu časť dizajnu obrazovky, sa dlho veľa nezmenilo. Počas tohto vývoja z nástroja na spracovanie obrazu sa Photoshop čoraz viac stáva dizajnérskym nástrojom pre túto mladú disciplínu. Postupom času sa to veľmi výrazne prejavilo na vlastnostiach programu.
11.2.5 Písma pre web
Obrázok 11.3 Výber pixelových typov písma pre web
Neexistuje takmer žiadny dizajn obrazovky, ktorý by neobsahoval aspoň minimálne typografické prvky. Bez písania nefunguje takmer nič. Na rozdiel od tlače, keď písmo dokáže vytiahnuť všetky svoje grafické detaily, keď príde písmo na tlačovú dosku s obvykle najmenej 2 400 dpi osvitovej jednotky, v dizajne obrazovky musíme vždy vychádzať z rozlíšenia obrazovky, t. J. S pomerne mizerných 72 ppi. Je zrejmé, že jemnejšie písma tu strácajú svoju zvláštnosť.
Pokiaľ ide o dizajn obrazovky, vyžadujú sa jasné, nezmyselné písma, skôr tie bez pätiek ako s. Najmä pokiaľ ide o menšie veľkosti písma, nielen rapídne klesá kvalita písma, ale aj čitateľnosť. Zvyšok sa robí vyhladením písma, vyhladzovaním, ktoré malými písmenami vedie k niečomu vymytému namiesto písmena. Na odstránenie tohto problému slúžia takzvané pixelové písma. Všetky tieto okolnosti sú podrobnejšie popísané v časti 9.7 a ilustrované príkladmi.
11.2.6 Farby pre web
Pre aplikácie pre návrh obrazoviek existujú aj iné pravidlá pre farby ako napr. B. v tlači. To platí najmä pre web, pretože vytvorený obsah sa zobrazuje na niekedy obrovskom množstve rôznych obrazoviek, ktorých farebné správanie je zvyčajne rovnako kruté ako aj nepredvídateľné. Stratégie ako správa farieb sú vo webovom sektore iba v začiatkoch a žiadne skutočné zlepšenie nie je v dohľade. Tieto rámcové podmienky si vyžadujú, aby pri návrhu obrazovky bolo potrebné pracovať s jasnými a dobre oddelenými farebnými schémami. Jemné nuansy a kontrasty nie sú v sektore tkania celkom zreteľné, pokiaľ ide o jasnú rozpoznateľnosť. Informácie o vývoji farebných schém a súvisiacich nástrojov, tiež s ohľadom na webdizajn, nájdete v časti 5.8.
Obrázok 11.4 Náhľad farebnej schémy ako webového rozloženia v aplikácii Color Schemer