Photoshop webdesign. Weboldal képszerkesztéssel. 1. Előkészületek

Photoshop webdesign Weboldal képszerkesztéssel A Photoshoppal való webdesignra hatványozottan igaz, hogy már a tervezésnél figyelembe kell venni néhány technikai részletet. Cserébe olyan weboldalakat kaphatunk, amelyek – a böngészőfüggetlenségen és a validitáson túlmenően – szépek és teljesen egyediek. Ne feledjük azonban, hogy a weboldal nem pusztán kép, tehát a küllem nem mehet a tartalmakhoz való akadálymentes hozzáférés kárára. Nézzünk bele egy Photoshopos weboldal könyvtárába, pl.: Webszerk\photoshop\09_Websites\Website_1 Egy HTML-t és egy images mappát fogunk benne találni. A HTML egy div-rendszert tartalmaz, melyet teljesen kitöltenek a benne lévő képek vagy háttérképek. Ezek a HTML tőszomszédságában található images mappában vannak, többségük azonos (gif, jpg vagy png) képformátumban.

1. Előkészületek A Photoshopból egy nagyon stabil div-rendszert fogunk exportálni, mely a kliens gépén beállított betűméret szerint átméretezhető, de a böngészőablak szélességére – ellentétben a liquid vagy hybrid sablonokkal – nem fog reagálni. Tehát aki keskenyebb kijelzőn vagy alacsonyabb felbontással nézi a weboldalunkat, az egy részét nem fogja látni, legalábbis scrollozás nélkül nem. Ezért az első kérdések egyike, hogy mekkora legyen a layout. A w3schools.com szerint a mai (2012) felhasználók 13%-a 1024×768-as kijelzőfelbontással böngészi a világhálót, 11.5%-a 1280×1024-essel, 10.7%-a 1280×800-assal, 8 – 8%-a 1440×900-assal ill. 1920×1080-assal és 6.5%-uk 1680×1050-essel. Egész más képet mutat a statcounter.com statisztikája: az asztali gépek használóinak 23%-a 1366×768-as, 16%-A 1024×768-as, 11%-a 1280×800-as kijelzőt használ, és csak 6-6%-uk dolgozik 1280×1024, 1440×900 vagy 1920×1080 pixeles kijelzővel. Mindenesetre jelenleg abból indulhatunk ki, hogy ha 1280×1024-es felbontásra tervezünk, akkor az asztali eszközzel szörfözők legnagyobb része mindent fog látni a layoutból, de a legbiztosabb oldalon akkor állunk, ha 1024×768-as layoutot készítünk. Az, ha a főkonténer nem tölti ki a teljes szélességet, hanem két oldalán 10-15%-os margó keletkezik, nem baj. A felhasználónak sokkal zavaróbb, ha a hasznos tartalmak eléréséhez folyton vízszintes görgetésre kényszerül. Sokan itt vétik az első hibát. Az, amit az átlag felhasználó első blikkre lát, tehát a böngésző nettó tartalma ugyanis nem azonos a kijelző felbontásával. A böngésző címsora, a menüsor, a bővítmények gombjai, mindenféle extra „toolbar”, az alsó állapotsor, és az oprendszer feladatléce mind-mind levonódik a magasságból. De a szélesség is csorbát szenved a keret és a scrollbar miatt, nem is beszélve arról, ha a felhasználó még egy oldalsó könyvjelzősávot is használ. Az elmúlt évtizedben ezért nagyon sok oldalt terveztek 960px szélesre. Első Photoshop-oldalunkat is ilyen szélességben fogjuk kivitelezni.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

A Prt Sc billentyűvel készítsünk egy screenshotot böngészőnkről 1024×768-as felbontás mellett. Nyissunk új dokumentumot Photoshopban és illesszük bele. Nem is baj, ha a keret bent marad a munka idejére, hiszen ritkán látunk weboldalt a böngésző kerete nélkül. De kezdhetünk egy 1000×600 px-es vászonnal is, keret nélkül. Jelenítsük meg a vonalzókat CTRL-R-rel. Alapértelmezetten a vonalzó (és sok minden más is) cm-ekben vagy inchben (Zoll) van megadva, de screendesignnál irreleváns, hogy mi hány cm, ezért látogassunk el az Edit / Preferences / Units & Rulers beállításokhoz, és állítsunk át mindent pixelre és pointra:

Most ki fogjuk vágni a tartalmat a keretből. Közelítsünk rá erősen a tartalom sarkaira, és kattintás-húzással húzzunk ki segédvonalakat a vonalzókból, úgy, hogy egymást a hasznos terület sarkaiban metsszék. Fontos, hogy minden segédvonal pontosan a pixelhatárokra essen! A Photoshop a pixel milliomodrészéig tud számolni, de screendesignnál csak az egész pixeleknek van értelme. Ha a segédvonal húzása közben nyomva tartjuk a SHIFT-et, akkor pixelenként fog lépkedni.

Váltsunk vissza teljes nézetbe, és jelöljük ki a négy segédvonal által határolt területet a téglalap kijelölővel. A segédvonalak bizonyos mértékig „mágnesesek”, ezért a kijelölés sarkai – ha nem vagyunk nagyon pontatlanok – belecuppannak a segédvonalak által alkotott sarkokba. Lessük meg az Info palettán, mekkora is a kijelölt terület (nálunk 1000×554-re sikeredett). Töröljük ki a tartalmat Delete-tel. Töröljük a háttér ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

(background) réteget, ha még ott lenne. Erre megjelenik az áttetszőséget jelző Photoshop-pizsama, tehát a réteg egy területén át tudunk látni, benne lyuk keletkezett.

Ezt .psd formátumban el is menthetjük, pl. browserkeret_1024.psd néven, és legközelebb már innen kezdhetjük a munkát.

2. Rács Noha éppen azért választottuk a Photoshopot, hogy a konvencionális, „rácsos” HTML-lapoknál szabadabb layoutokat alkothassunk, mégiscsak egy HTML-t fogunk exportálni, amiben ugyebár minden grafika téglalap alakú, és téglalap alakú dobozokban helyezkedik el. Jelenítsük meg a rácsot a View / Show / Grid parancssal. Alapértelmezetten ez egy kicsit sűrűbb a kelleténél, ezért vegyük elő mégegyszer a Preferences panelt, annak is a Guides, Grid & Slices... alpontját. Itt adhatunk a kockáknak egy oldalszélességet és feloszthatjuk őket finomabb osztásokra. Állítsuk ezeket az értékeket 100px-re és 5 osztásra. A rács, a segédvonalak és a szeletek a későbbiekben a CTRL-H billentyűkombinációval jeleníthetők meg ill. rejthetők el.

Webdesignra alkalmas rácsgenerátorból egyébként több is kering az interneten, az egyik ilyen a Layout Grid Generator nevű Photoshop-Script.


3. Alap-layout Helyezzük el a weblap fő tartalmi egységeit határoló segédvonalakat a rács segítségével. A rács mágneses lesz, ha ezt aktiváljuk a View / Snap to / Grid paranccsal. Háromoszlopos weboldalt szeretnénk, headerrel és footerrel. A bal oldalsáv fogja tartalmazni a navigációt, a jobb oldalra képet illesztünk majd be.

Ha eddig nem tettük volna meg, szerezzünk be egy színpalettát. Ezt a leggyorsabban a Window / Extensions / Kuler palettával tehetjük meg. Többféleképpen is lehet vele színpalettát generálni, de a legegyszerűbb, ha más felhasználók által egyszer már tetszetősnek ítélt paletták közül választunk egyet (Browse). Csak be kell írnunk egy fogalmat, és máris megjelennek azok a paletták, amelyeket szerzőjük ezzel a fogalommal asszociált. Jelöljük ki valamelyiket és a paletta alján található Add this Theme to Swatcheszal emeljük be színkapcsolóink közé. Ebben a projektben csak ezekkel a színekkel fogunk dolgozni. Kérjünk egy új réteget. Jelöljük ki a segédvonalak által közrefogott valamelyik téglalapot. Válasszunk ki egy színt a swatchok közül és töltsük ki a kijelölést a festékesvödörrel. Hasonló módon készítsük el a fejléc, az oldalsáv, a tartalom és a kép dobozait: rendre kérjünk egy új réteget, jelöljünk ki egy területet és színezzük be.


4. Effektek Ha olyan kedvünk van, adhatunk ezeknek a dobozoknak egy finom textúrát is, pl. a Filter / Noise / Add noise parancssal vagy a Filter Gallery Texture csoportjával. Az utoljára alkalmazott szűrőt további elemekre a CTRL-F billentyűkombival lehet alkalmazni. Néhány doboznak vetett árnyékot (Drop Shadow) is adhatunk. A rétegek (Layers) paletta alsó ikonjai közül az fx-szel rendelhető a réteghez egy ún. stílus. A stílusok olyan effektek, amelyek főleg a rétegek kontúrját befolyásolják (vetett árnyék, belső árnyék, külső / belső ragyogás, dombormű, keret), de van itt néhány szín- és átmenetes kitöltő effekt is. Ha megtaláltuk a megfelelő beállításokat, és leokéztuk ezt az ablakot, a rétegstílust az Alt nyomvatartásával drag’n’droppal gyorsan átmásolhatjuk a többi elemre. Megvan a weboldal csontváza, a következőkben megtöltjük tartalmakkal.

5. Szövegek Szövegeket karakterekként nem képes exportálni a Photoshop; amit itt beírunk, az az alatta lévő rétegekkel együtt képként kerül exportálásra. A szöveges tartalmakat majd a WYSIWYG-szerkesztőben fogjuk ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

beilleszteni. Ha valamit be is ír az ember Photoshopban, azt általában azért teszi, mert olyan effektekre van szükség, amit CSS-sel nem lehetne megoldani (ilyen pl. Bevel & Emboss). Helyezzük el a fejlécbe cégünk teljes nevét, és jelmondatát. Ehhez bármilyen betűtípust használhatunk, sok jó megoldás létezik. Az elején eldöntöttük, hogy milyen színekkel fogunk dolgozni, és egy weboldalhoz háromnál több különböző színárnyalat nemigen szükséges (több különböző világosságú és telítettségű változata, ill. átmenete lehet). Ehhez hasonlóan betűtípusból sem kell több kettőnél (de ezek szerepelhetnek úgy kétféle méretben, megvastagítva vagy dőlten). Adjunk a szövegnek is vetett árnyékot. A vetett árnyék (Drop Shadow) – minden más kontúreffekttel együtt – a Rétegek (Layers) paletta alsó gombjai közül a másodikkal érhető el. Ha kikattintjuk a Use global light jelölőmezőt, akkor az adott réteget érő „fényforrás” a többiétől függetlenedik.

6. Képek Először beillesztjük a logót (logo.png). A File menü Place parancsa mindjárt okos objektumként illeszti be, ami ezután áthelyezhető és átméretezhető. Az okos objektumokba a rétegikonra való duplakattintással lehet belépni. Illesszük be a képet (bamboo-forest.jpg) szintén a Place parancssal. Tegyük a helyére: a jobb oldalsáv fölé – a rétegpalettán is! Ha az Alt nyomvatartásával a két réteg közé kattintunk, metszetük keletkezik: csak annyit látunk az erdőből, ameddig az oldalsáv kiterjed. A két réteg közötti kapcsolatot jelzi a felső rétegen (bamboo-forest) megjelenő balra-lefelenyíl, és hogy némi bekezdést is kapott:

7. Szeletelés (Slicing) Sok mindent lehetne még csiszolni az oldalon, de mi most azt fogjuk megnézni, hogyan lehet az ilyen layoutokat felszeletelni és exportálni. Felszeletelni azért kell, hogy a keletkező HTML-oldal olyan egységekre legyen osztva, amelyeknek tartalmi szerepet adhatunk és amelyeket CSS-ből megcímezhetünk. A böngészőablak réteget eltávolítjuk, mert már csak útban lenne. A maradék űrt le is vághatjuk.


Kezdhetjük a szeletelést. Váltsunk a Slice Toolra, és jelöljük ki a logót befogadó négyszöget. Fontos, hogy ekkor a View / Snap To (mágnesesség) már csak a Guides értéket viselje. Amint kiválasztottuk, megjelenik a bal felső sarkában a 01-es sorszám. A képterület fennmaradó része további 3 szeletre esik szét, mert a HTML ugyebár kénytelen mindent téglalapokra osztani. Osszuk fel a layoutot úgy, hogy minden tartalmi elemnek külön szelete legyen, és ne keletkezzék felesleg. Gondoljunk arra is, hogy ha a HTML-t a későbbiekben szövegekkel töltjük fel, már itt is megszabhatjuk a szövegek határait, és a margókról padding-utasítások gondoskodnak majd. Az egyes felületeket már itt is linkesíthetjük, mégpedig úgy, hogy a Slice Select Toollal (a Slice Toollal egy csoportban) duplán rákattintunk egy szeletre (legyen ez most a logó). A megjelenő panelben megadhatjuk az URL relatív elérési útját (pl. index.html), a Message Text-tel pedig egyes böngészők állapotsorát befolyásolhatjuk. A Slice Select Toollal kattintsunk duplán a szövegterületeinkre, és adjunk nekik értelmes neveket (name), pl. logo, fejlec, bal, tartalom, jobb, labresz. Így később könnyebb lesz rájuk találni a kódban.


8. Export Az exportálás során be lehet állítani, hogy táblázat-alapú avagy dives, CSS-sel formázott oldalt szeretnénk. Mindkettő ugyanúgy nézne ki, de a dives konstrukcióval ill. a headben elhelyezett stílus-utasításokkal rugalmasabbak leszünk. Ha mindent elrendeztünk, nekiláthatunk a HTML exportálásának. Válasszuk a File / Save for Web… parancsot. A megjelenő panelben lehet beállítani az egyes szeletek vagy valamennyi szelet tömörítését. Jelöljük ki a teljes területet, úgy, hogy valamennyi szelet a valódi színét mutassa (a nem-kijelölt szeletek halványabbak). Most a jobb oldalon választhatunk a tömörítési metódusok között: GIF, JPEG, PNG-8 (8 bit / csatorna színfelbontás, 1 bites alpha) és PNG-24 (24 bit / csatorna, 8 bites alpha). Görgessük végig ezeket a lehetőségeket, és közben két dologra figyeljünk: egyrészt, hogy hogyan változik a képminőség (ehhez nem árt közelebb hajolni a kijelzőhöz), másrészt, hogy hogyan alakul a file-méret és a letöltési sebesség. Utóbbiakról a kompozíció alatt a bal sarokban tájékozódhatunk. Jelen példában a PNG-8 tömörítéssel (a színek száma lehet maximális, azaz 256), járunk a legjobban. A PNG-ket tartalmazó mappa az aktuális beállítások mellett 129 Kbyte-ot nyomna, ami 2012-ben egy elfogadató méret. Az alsó sor arról tudósít, hogy egy 28,8 Kbit/s sebességű modem potom 1 perc alatt le is töltené a képeket. Hogy milyen sebességű modem mellett mért letöltési időt mutasson, azt mellette elhelyezett nyíl legördülőjében lehet beállítani. A szeleteket egyenként is ki lehetne jelölni és különböző módokat és minőségi fokozatokat is meg lehetne adni, de mi most az egészet egységes tömörítésben és minőséggel fogjuk menteni. Kattintsunk a Save-re. A megjelenő tallózóablakban hozzunk létre a .psd file szomszédságában egy új mappát, pl. Website néven. Nevezzük el a keletkező HTML-t indexnek. Fontos, hogy a Save as type: opció HTML and Images-re, és a Slices: opció All Slices-re legyen állítva. A Settings-et váltsuk Other...-re, hogy a következőkben magunk dönthessünk egy sor opció felől. Az első párbeszédlapon (HTML) jelöljük be az Output XHTML dobozt. Minden egyebet hagyjunk úgy. A második lapon (Slices) állítható be, hogy táblázatalapú oldalt kérünk –e (Generate Table) vagy divekből állót (Generate CSS). Feltétlenül az utóbbit válasszuk. A Referenced: mezőben eldönthetjük, hogy id-s vagy classos címzést adjon az egyes diveknek – ennek nincs nagy jelentősége. Az alsó mezőkben adható meg a szeletek (azaz későbbi id-k) nevének összetétele. Ha nem akarunk sok felesleges kódot, a dokumentum-nevet (doc.name) ne vegyük bele. A következő lap (Background) a háttérrel ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

foglalkozik, nem szükséges változtatnunk, mert valamennyi konténernek háttérképe lesz, a bodynak pedig majd CSS-ben adunk háttérszínt. Az utolsó lapon (Saving Files) megadhatjuk, miből álljon a képszeletek neve. Erre is ugyanaz vonatkozik, mint az id-kre: elég csak a slice name. Kattintsuk be a Mac OS9-et, hogy az esetleges nem-OS9barát nevek átneveződjenek. A Copy background Image-et kattintsuk ki. Okézzuk le ezt a dialógust, és mentsük el az egészet.

Ha ezután belenézünk a Website mappába, ott egy HTML és egy images mappa lesz. Utóbbi tartalmazza a kisebb-nagyobb PNG-eket, amelyekből az oldal áll. A forráskódban láthatjuk, hogy a head szekcióban egy sor id-khez rendelt stílus szerepel, a bodyban pedig csak a divek vannak, bennük 1-1 img taggel. Ha kipróbáljuk az oldalt több különböző böngészőben, láthatjuk, hogy mindenütt teljesen azonosan néz ki. A divek px-ben megadott koordinátáit, szélességüket és magasságukat ugyanis csak egyféleképpen lehet értelmezni, és a bennük szereplő JPEG-ek megjelenítése pedig már végképp nem vita tárgya. Ha ezek után még módosítanánk valamelyik szeleten, esetleg egy elem rollover-státuszát szeretnénk exportálni, válasszuk újra a Save for Web & Devices parancsot, és jelöljük ki csak az adott elem szeletét. Ezúttal válasszuk az Images Only (csak képek – azaz ne írja felül a HTML-t) és a Selected Slices (csak a kijelölt szeletek exportja) opciókat. Hogy az új kép ne írja felül a régit (pl. mert annak a rollover állapota lesz), lépjünk egy mappával feljebb, és oda mentsük a képet. Átnevezés után áttehetjük az images mappába.

8. WYSIWYG-szerkesztés Nyissuk meg a HTML-t Dreamweaverben. Valószínűleg szeretnénk a főkonténert középre zárni; ehhez abszolút módon kell pozícionálni, és jobbra-balra automatikus margót kell, hogy felvegyen: #Table_01 { position:absolute; left:0px; top:0px; width:1024px; height:725px; }



#Table_01 { position:relative; margin-left:auto; margin-right:auto; width:1024px; height:725px; }

Az abszolút pozícionálás és a jobbról és balról való automatikus (a megjelenítéskor mért) távolság jelenti a középrezárást.


Szeretnénk elhelyezni a szövegeket. A probléma az, hogy jelenleg valamennyi divben egy vele azonos méretű kép pöffeszkedik, így nem írhatunk bele. A megoldás az lesz, ha ezeket a képeket megtesszük a div háttérképének, és „eléírunk”. Ez egy kicsit körülményes, de segít a Properties panel. 1. Jelöljük ki a képet. 2. A Properties panelen kattintsunk duplán az Src (forrás) mezőbe, így az elérési út kijelölődik. Vágjuk ki ezt a CTRL-X-szel. 3. Attól, hogy nincs forrása, az img tag még mindig ott rontja a levegőt. Jelöljük ki és töröljük a Delete billentyűvel. 4. Most jelöljük ki magát a divet; legjobb ha a Design nézet alatti DOM-hierarchiában kattintjuk meg. 5. A div tulajdonságai között van egy Bg image mező, ide kell beillesztenünk az elérési utat. Enter.

A művelet akkor sikerült, ha ugyanazt látjuk, mint előtte. De a konténer most már üres, a kép a háttérképe lett (amint azt a head stílusai között is láthatjuk) – így bele lehet írni. Ismételjük meg ezt az összes többi divvel, amibe bele akarunk írni. Végül másoljunk be valamennyi tartalmi dobozba vakszöveget. A túlcsordult tartalmakat a szülő div Overflow tulajdonságával tehetjük scrollozhatóvá (Properties bal alsó sarka). Ha egyebet nem teszünk, az ilyen oldal lefelé véges. A lapot ezután WYSIWYG-eszközökkel fejlesztgetjük tovább, pl. a Page Properties-zel (CTRL-J): Ne felejtsük el, hogy ha a dobozoknak kitöltést (padding) adunk, korrigálnunk kell méreteiket is.

Ha az oldaltulajdonságok hatása alól egyes divek tartalmát ki akarjuk hagyni, akkor jó szolgálatot tesz a CSSszerkesztő is. Az újabb tulajdonságok és stílusok rendre beleíródnak a helyükre a headbe. Ha valamelyik kép további módosításra szorul, a kijelölése után kattintsuk meg a Properties palettán a Ps szimbólumot, és az adott PNG máris megnyílik Photoshopban, ahol szerkeszthető és új néven elmenthető.


Ha a lap elnyerte végső külalakját, a Save as... menüponttal új neveken el lehet menteni, és a másolatokban ki lehet cserélni a tartalmakat.

További jegyzetek letöltéséhez látogasson ide: timetodesign.hu/tananyag.html


Photoshop webdesign. Weboldal képszerkesztéssel. 1. Előkészületek

Recommend Documents