Rheinwerk Design Adobe Photoshop CS4 - Haladó technikák - 11
11.2 Eljárások és összeszerelési technikák
A webdesign területén a Photoshop kihasználhatja kreatív lehetőségeinek hatalmas körét. Itt különösen az egyes alkalmazási területei sok szempontból összefonódnak. Az alkalmazott eljárások és módszerek nagymértékben átvihetők a képernyőtervezés hasonló feladataira, függetlenül attól, hogy egy CD-ROM felhasználói felületéről van-e szó, vagy egy video-DVD menü-tervezéséről. Csak a kimenet képformátumai vannak eltérések (lásd 11.3. Szakasz).
11.2.1 Munka előkészítése: Határozza meg a kép méretét
11.1. Táblázat: A képernyőméretek és a legfontosabb böngészők megoszlása (állapot: 04/2009, forrás: marketshare.hitslink.com)
Ami a nyomtatást illeti, viszonylag egyszerű: egy A4-es lap mérete 297 x 210 mm, és ennyi. A CD-ROM képernyőjének megtervezésekor általában 1024 x 768 vagy 800 x 600 képpont méretű képméretek vannak. A DVD-menü kialakításánál is egyértelmű a helyzet: 720 x 576 képpont az európai PAL rendszer számára vagy 720 x 480 képpont az amerikai NTSC TV rendszer számára.
A webdesignban ez a téma korántsem egyértelmű. Természetesen a jelenleg elterjedt monitorméretek először meghatározzák, hogy mi lehetséges és hasznos egyáltalán. Ezen méretek eloszlása szintén fontos (lásd 11.1. Táblázat).
Sokkal nehezebb megbecsülni a weboldal tényleges "hasznos területét". Gyakorlatilag minden böngészőnek különböző értékei vannak itt, mert a görgetősávoknak, az állapotsoroknak, a menü- és a címsoroknak is meg kell találni a helyüket. Ez a méret függ a felhasználó konfigurációjától, valamint az esetleges további telepített eszköztáraktól vagy "Témáktól" (saját felhasználói sablonok, pl. Firefoxhoz). Ha ezt a Mac és Windows csaknem tucatnyi jelenlegi böngészőjéhez és a különböző képernyőméretekhez kellene összegyűjteni, nagyobb táblára lenne szükség.
11.1. Ábra Az Adobe Dreamweaver szabványos webhelyméretei (fent) és az egyéni fájlméretek a Photoshop for File programban • Új (lent)
Az Adobe a Dream-weaver szerkesztőablak lábába néhány, a dokumentum előnézetéhez tartozó szabványos webhelyméretet felvett, ami a tapasztalatok szerint nagyon hasznosnak bizonyult. Ezen számok alapján létrehozhatja saját alapértelmezett méreteit a Photoshop alkalmazásban a Fájl • Új parancs kiválasztási párbeszédablakához.
11.2.2 Képernyőképpel történő munka
Ennek az ablaknak a képernyőképe hasznos annak érdekében, hogy reális benyomást szerezzen nemcsak az elérhető méretről, hanem arról is, hogy a webhely később hogyan néz ki a legtöbb néző böngészőablakában.
A képernyőkép (kulcs) a vágólapra kerül és felszabadul az ablak tartalmától a Photoshopban, hogy a későbbi munkához keretet biztosítson egy legfelső szintű képernyőtervezési fájlban (javítás a »lock« -al! Mivel az Internet Explorer 6.0 még mindig meglehetősen elterjedt, iránymutatásként szolgálhat a későbbi munkákhoz, különösen azért, mert ez a "legrosszabb eset" a felületi elemek dimenzióinak szinte minden vonatkozásában. Alig egy böngésző hagy kevesebb helyet a weboldalak számára a szokásos konfigurációban.
11.2. Ábra A Microsoft Internet Explorer 6.0 képernyőképe Windows XP rendszeren ablaktartalom nélkül (1 024 768 képpont)
A böngészőablak, amely a képernyőterv részét képezi, a prezentációk számára is megvan az az előnye, hogy az ügyfél jobban el tudja képzelni a jövőbeni oldalt ezzel a kerettel, amennyiben nincsenek valódi weblapok. Amikor a végső gyártásról van szó, eltávolíthatja a böngésző kereteit a vágóeszközzel.
11.2.3 A Photoshop összeszerelő eszközei
Időközben nagyon vonzó az eszköztár, amely általában a képernyőtervezők és különösen a webdesigntervezők rendelkezésére áll a Photoshop-ban végzett összeszerelési munkájukhoz. Ez nem éppen megkönnyíti az áttekintést, de számos lehetőséget nyit meg.
A képszintek bevezetésével csak ezek a szintek és azok módjai léteztek, de most a beállítási és kitöltési szintek képelemként használhatók, amelyek továbbra is szerkeszthetők. Ezek a fájlméret szempontjából már nem jelentősek, mert nem tartalmaznak képpontokat. A maszkolás réteg, vektor és nyíró maszkok formájában kibővíti a lehetőségeket az eredeti mű törlése nélkül. Ezenkívül a csoportok és nem utolsó sorban az intelligens objektumok és az intelligens szűrők további fontos eszközök.
Intelligens tárgyak | A Photoshop CS2-ben bemutatott intelligens objektumok az összeszerelési feladatok nagyon fontos eszközévé fejlődtek, különösen a képernyőtervezés során. A sokféle képanyag roncsolásmentes integrálása sokkal nagyobb alkotói szabadságot eredményez, mint korábban. Ennek a fajtatípusnak a használatakor számos finomságot kell figyelembe venni, mert ezek nem mindig viselkednek úgy, ahogyan azt más programok hasonló funkcióitól elvárhatnánk (beleértve az Adobe programját is). Ezeket a furcsaságokat és néhány trükköt a kezelésükről az alábbiakban foglaljuk össze:
A Photoshop CS4 segítségével végül eldöntheti, hogy egy réteg maszkot szeretne-e összekapcsolni a képréteggel, és áthelyezi-e vele vagy sem.
A vektoralaknak, legyenek azok formasíkok, vektormaszkok vagy utak, nagyobb a helymeghatározási pontosság, mint egy pixelnél. Ugyanez vonatkozik az irányelvekre is. Ez nagyon idegesítő lehet, különösen a web-tervezési feladatoknál, mert később pixel pontossággal vágják őket a vezetővonalak mentén. A webdesignban ezért mindig tartsa lenyomva a gombot, amikor a vezetővonalakat pozícionálja, hogy azok csak a teljes pixelnél kattanjanak a helyükre.
A pozicionálás nagyon hatékony vizuális segédleteként az Adobe a CS2 verzió óta bevezette az úgynevezett "Smart Guides" -eket (mágneses vezetőket), amelyek csak akkor jelennek meg, amikor valamit mozgatnak, és amelyek lehetővé teszik, hogy néhány, valóban fontos statikusra koncentrálhasson. Korlátozhatja a segédvonalakat.
11.2.4 Képek és HTML
A kimenet hosszú ideig táblázatalapú struktúrán alapult. A táblázatok azonban meglehetősen megbízhatatlanok és soha nem igazán stabilak, egyszerűen azért, mert soha nem erre a célra szánták őket. Időközben a lépcsőzetes stíluslapok (CSS) végre egyre fontosabb szerepet játszanak a webdesignban. Itt lehetséges a képkockák pixeles pontosságú pozícionálása és sokkal jobb tipográfia egyidejűleg karcsúbb kóddal. Időközben - a különböző szoftvercégek közötti kemény technológiai és politikai csaták után, egyúttal a W3C-vel - a böngészők és az operációs rendszerek sokaságában a kijelző bizonyos megbízhatósága tapasztalható. A Photoshop ezt figyelembe veszi, mivel táblázatos és CSS-alapú kimenetet is kínál. Ez különösen érdekes a Photoshop felhasználói számára, mert sok közülük hasznos a webdesign következő lépései során is, pl. B. olyan weboldal-szerkesztőkkel, mint a Dreamweaver, kompetensek. Kevesebb és világosabb kóddal jelentősen megkönnyebbülnek ők és természetesen azok is, akik kézzel írják (újra vagy újra) a kódot.
A tervezett képanyag webes megjelenítéséhez részben el kell hagyni a tiszta képformátumok világát, és olyan vegyes technológiákkal kell foglalkoznia, mint a képek integrálása egy oldalleíró nyelvre. Bár sok Photoshop-felhasználó ismeri az internet és a HTML alapjait, itt egy rövid összefoglaló.
A technikában jártas grafikusok voltak az elsők, akik kreatív célokra "visszaéltek" a "webes nyelv" HTML által biztosított szintaktikai elemekkel. A HTML egy jelölő nyelv, amely a tartalmi hierarchiák feltérképezésére szolgál. Ezenkívül minimális tervezési erőforrásokat kínál, amelyeknek csak a lehető legkevésbé korlátozott olvashatóságot kell garantálniuk számos technikai platformon. Hét fejlécszint létezik, néhány speciális formátum, félkövér, dőlt, aláhúzott szöveg, egyszerű táblázatok, a képek és az adathordozók referenciákon keresztüli integrálásának lehetősége és még néhány szolgáltatás. De ennyi volt: a HTML nem egy elrendezéssel kompatibilis oldalleíró nyelv, mint a PostScript, a pontos keretrendszer felé orientálva.
Csak a HTML-ben szereplő táblák jelentenek félúton hasznos módszert egyfajta keretalapú elrendezéshez. Az első webdesignerek ezekkel a szűkös forrásokkal kezdődtek. Hosszú ideig nem sok minden változott ezen a webdesignon alapulva, amely a képernyőterv legnagyobb részét teszi ki. A képfeldolgozó eszközzel végzett fejlesztés során a Photoshop egyre inkább a fiatal tudományág tervezőeszközévé vált. Az idő múlásával ez nagyon tükröződött a program jellemzőiben.
11.2.5 Betűtípusok az internethez
11.3. Ábra A webes pixeltípusok kiválasztása
Szinte nincs olyan képernyőterv, amely ne tartalmazna legalább minimális tipográfiai elemeket. Szinte semmi sem működik írás nélkül. Ellentétben a nyomtatással, ahol egy betűkép minden grafikai részletét kihozhatja, amikor a betű a nyomtatólemezre érkezik, általában legalább 2400 dpi képalkotóval, a képernyőtervezésnél mindig a képernyő felbontásával foglalkozunk, azaz. viszonylag csekély 72 ppi. Nyilvánvaló, hogy a kényesebb betűtípusok itt elveszítik sajátosságaikat.
A képernyő megtervezéséhez egyértelmű, semmitmondó betűtípusokra van szükség, inkább azokra, amelyek nem sorosak, mint a másikkal. Különösen a kisebb betűméreteknél nemcsak a betűkészletek minősége, hanem az olvashatóság is gyorsan csökken. A többit a betűtípus simításával, az antialiazissal végzik, amely kis betűkészletekben betű helyett valami kimosódáshoz vezet. Ennek orvoslására vannak úgynevezett pixel betűtípusok. Mindezeket a körülményeket a 9.7. Szakasz tárgyalja részletesebben és példákkal illusztrálja.
11.2.6 Színek az internethez
Képernyőtervezési alkalmazásoknál a színekre is más szabályok vonatkoznak, mint pl. B. a nyomtatásban. Ez különösen igaz az internetre, mivel a létrehozott tartalom néha hatalmas számú különféle képernyőn jelenik meg, amelyek színvonala általában ugyanolyan kegyetlen, mint kiszámíthatatlan. Az olyan stratégiák, mint a színkezelés, még csak gyerekcipőben járnak a webszektorban, és valódi javulás nem látható. Ezek a keretfeltételek szükségessé teszik, hogy világos, jól elkülöníthető színvilággal dolgozzanak a képernyő tervezésénél. A finom árnyalatok és kontrasztok meglehetősen helytelenek a szövési ágazatban, ha egyértelmű felismerhetőségről van szó. A színösszeállítások és a kapcsolódó eszközök fejlesztésével kapcsolatos információk, a webdizájnt illetően is, az 5.8. Szakaszban találhatók.
11.4. Ábra Színséma előnézete webelrendezésként a Color Schemer alkalmazásban