A weboldal készítés egy összetett folyamat, amelynek során a grafikai tervezéstől a kódolásig számos lépésen kell végigmenni. Habár vannak tartalomkezelő rendszerek (CMS), amelyek megkönnyítik ezt a munkát, egyedi grafikai elemek megvalósításához gyakran a Photoshop bizonyul a leghatékonyabb eszköznek. Ez a cikk bemutatja, hogyan lehet Photoshopban elkészíteni egy weboldal grafikáját, és hogyan alakítható át ezután böngészhető, tartalommal feltölthető site-tá.
Miért érdemes Photoshopot használni webdesignhoz?
Az Adobe Photoshop még mindig elengedhetetlen kelléke a színvonalas webdesign megtervezésének. Számos esetben indokolt a Photoshop grafikával történő weboldal készítés, hiszen rengeteg előnye van. Egy megálmodott grafikai design néha sokkal egyszerűbben megvalósítható Photoshop által, mint a tartalomkezelő rendszerekben (CMS), kódolásról nem is beszélve. Hiába vagy jó webfejlesztő, ha nem vagy grafikus, szükséges egy munkatárs, aki megálmodja és elkészíti a dizájnt. Nagy honlapkészítő cégek pont ezért drágák, mert minden munkafolyamatra más-más embert alkalmaznak. Egy webdesignernek átfogó ismeretekkel kell rendelkeznie minden területre vonatkozóan.
A Photoshop Alapozó tanfolyam kezdő szintről indul, de lépésenként a haladó szintig kísér. A weblapok és felületeik elemeinek elkészítéséhez használjon rétegeket és szeleteket. Rétegszedők használatával kipróbálhat különféle lapkompozíciókat és exportálhatja a lapok egyes változatait. Az Animációs panellel webes animációkat hozhat létre, majd animált GIF-képként vagy QuickTime-fájlként mentheti azokat.
A Behance ProSite: Integrált weboldalkészítő rendszer
Az Adobe CC előfizetéses rendszeréhez tartozik egy weboldal építő rendszer is, a Behance ProSite. Ezzel az eszközzel személyes portfólió weboldalt hozhatunk létre, ahol bemutathatjuk munkáinkat. A Behance-en kitöltheted a személyes adataidat, szakmai szempontból is, tehát megadhatsz önéletrajzot, elérhetőséget, referenciákat, stb. Ezután projekteket kell létre hoznod, ezek képezik majd a portfóliódat. Bármennyi projektet létrehozhatsz, a majdani portfólió weblapodon csak azok fognak szerepelni, amiket te akarsz, nem feltétlenül automatikus a rendszer, de ha akarjuk lehet automatikus is.
Ha mindez megvan, fel kell tölteni a projekt borítóképét, ami a Behance profiloldaladon, és a portfólió weboldaladon is szerepelni fog, erre kattintva jutnak majd el a látogatók az adott képanyaghoz. Ha készen vagy egy alap képanyaggal, jöhet a weboldal készítés. Itt tudod a weboldalad alapvető kinézetét megadni. Mind a négy sablonkategóriánál megtalálod a világos és a sötét árnyalatú verziót és a View Customization Examples linkre kattintva megnézhetsz példákat, hogy más Behance felhasználók mit tudtak kihozni az adott sablonból.
A sablonok közti különbség lényegében az album-(projekt)borítók elhelyezkedése illetve a menüsor pozíciója és formázása az oldalon. Itt találod majd a Behance oldaladon már feltöltött projektjeid (albumjaid) listáját, és itt adhatod meg, hogy ezekből melyek szerepeljenek a portfólió weboldaladon, továbbá azt, hogy ezek milyen sorrendben kövessék egymást. Szerencsére úgy variálod őket kézzel, ahogy akarod, szóval nem időrendben vagy ABC-sorrendben pakolja őket a rendszer egymás alá-mellé.
A Design modul többi szekciójában az egyes projektoldalakat, és a Galérián kívüli egyéb aloldalakat tudjuk testre szabni. Itt hozhatunk létre egyéb aloldalakat. A Gallery ugye adott, ebben vannak a projektjeink, ez a nyitóoldal, de létrehozhatunk más jellegű oldalakat is. Ez lehet egyszerű szöveges oldal, ahová bemutatkozást írhatunk például, lehet külső linkre mutató oldal, lehet Blog szekció is, ahová később cikkeket tehetünk ki és lehet egyedi oldal is. Fogunk ugyanitt találni egy Resume nevű oldalt is, ha a Behance-ben kitöltöttük a szakmai és személyes adatainknál a Work Experience szekciót, akkor a Resume (vagyis önéletrajz) oldalon ezek az adatok fognak megjelenni.
Egyedi domain nevet tudunk megadni, alapból ugyanis a felhasználónév.prosite.com lesz a weboldalunk elérhetősége, de ha van saját domain nevünk, azt itt beállíthatjuk. Landing page lehet bármelyik aloldalunk vagy bármelyik projekt oldalunk. Akkor sincs gáz, ha a fentieket egy svungra nem tudjuk megcsinálni, az oldalon ugyanis el lehet menteni piszkozatokat, tehát legközelebb onnan folytathatjuk a weboldal építést, ahol legutóbb befejeztük. Ugyanígy lehet próbálkozni is, ha van már egy élő oldalunk, bátran próbálkozhatunk másik típusú oldal, másik design létrehozásával is, ezeket piszkozatként elmenthetjük.
A ProSite-tal készített site-ok egyébként reszponzív oldalak, ami azt jelenti, hogy nem csak monitoron mutatnak jól, hanem tableten és mobilon is, mert automatikusan igazodnak, átrendeződnek, egyszerűsödnek a kijelzőméretnek megfelelően. Weboldal készítésre fel, én már megcsináltam a saját oldalamat, amit az emkorecphoto.hu címen értek el, de ezzel a szolgáltatással készült például Borsi Flóra weboldala (floraborsi.com) is, akinek az egyik fotója most épp a Photoshop CC nyitóképe minden szoftverindításnál.
A Photoshop használata a weboldal grafikai elemeinek elkészítéséhez
Tulajdonképpen, ha egyedi webdesignal szeretnénk elkészíteni weboldalunkat, akkor az első lépés az lesz hogy photoshopban készítjük el a grafikát. Első körben rajzold meg a kívánt honlapgrafikát. A grafika egy header-t (fejléc), egy tartalmi részt illetve egy footer-t (lábléc) tartalmaz. A gombokat jelenleg kihagytam hogy a minél egyszerűbb legyen a módszer ismertetése, de ha van rá igény, remélhetőleg a leírtak alapján már simán meg tudod oldani a feladatot.
A grafika elkészítésekor célszerű figyelembe venni, hogy ha 800×600-as felbontáshoz szeretnéd elkészíteni, akkor ne 800px széles legyen a kép, mert a honlapot majd oldalirányba gördíteni kell (ennek oka, hogy a 800×600 a monitor felbontása, ebből még helyet foglal a böngészőprogram kerete, a gördítőmenük stb.) Maradj meg a kb 770px széles grafikánál, az még "biztonságos" szélesség.
A grafika elkészítésekor próbáld meg úgy elkészíteni az egészet, hogy a lehető legtöbb helyen majd a későbbiekben háttérképeket tudj definiálni a gyorsabb megjelenés/lapletöltés érdekében. A Photoshop-ban célszerű a grafikát nagyobb egységekre felbontani "guides" (segédvonalak) segítségével. Ha készen vagy egy alap képanyaggal, jöhet a weboldal készítés. Itt tudod a weboldalad alapvető kinézetét megadni.
Miután megvannak a segédvonalak, következzen a kép feldarabolása. Az eszköznek 2 állása van (ezek között a gombon nyomva tartott egérrel tudsz váltani). A slice-oknak célszerű beszédes nevet adni, ezzel a későbbiekben biztos egyszerűbb lesz a dolgod. Macerás tud lenni mikor pl. 20-30 "kepneve01, kepneve02 stb.. A slice-ok tulajdonságait úgy tudod módosítani, hogy a slice-t kijelölve nyomsz egy jobbegérgombot, és a megjelenő menüben kiválasztod az "edit slice options.."-t.
Először is mentsd el (ha még eddig nem tetted volna meg) a grafikádat, lehetőleg PSD formátumban, hogy minden beállításod és layer-ed megmaradjon. Az ablak bal oldalán látható (és piros körrel jelzett) "slice select tool"-lal tudod kiválasztani, hogy épp melyik szelet legyen az aktuális. Erre azért van szükség, mert minden egyes szelet tulajdonságait egyesével be lehet állítani (minőség, fájltípus stb.). Több szeletet a SHIFT gomb nyomvatartásával tudsz kijelölni.
Miután beállítottál mindent, válaszd ki a "Save" gombot, és megjelenő ablakban megadhatod, hogy a képeket hova és hogy mentse el. Elsőre szerintem célszerű "slices"-nál az "all user slices"-t beállítani, így a képből az összes - általad jelölt - slice-t el fogja menteni.
A weboldal felépítése HTML és CSS segítségével
Nyiss egy új HTML lapot a "file > new" (CTRL+N)-ra kattintva. Szúrj be egy táblázatot, mely nálam most 3×3 lett. A 3 sorra azért van szükség, mert van header, tartalom, footer.
Beállíthatod továbbá hogy milyen legyen a betűk színe, mekkorák legyenek a "margin"-ok (margók), a linkek színei, illetve hogy mi legyen a háttérkép (de ez jelenleg nem fontos, inkább egy színkódot adtam meg). Megjegyzés: ez a megoldás közel sem a legjobb, hisz ezeket a tulajdonságokat sokkal jobb ha CSS-ből szabályozod.
Állítsd be a táblázat celláinak méretét. Ehhez a lenti "properties" ablakban a cellákat kijelölve írd be a "W" (width = szélesség) mellé a "20"-t. Következő lépésként állítsd be a felső sor (header) háttérképét. Ezt megcsinálhatod úgy is, hog nem az egész sornak állítod be csak a középső cellának, mert a 2 szélső cella úgyis teljesen ki lett töltve a 2db kerekítéssel.
A 3. Maradt a középső sor …ennek 3 celláját olvaszd össze oly módon, hogy kijelölöd mindhárom cellát, majd a lenti "properties" ablakban megkeresed a "merges selected cells using spans" gombot és rákattintasz. Itt most megint egy olyan megoldás következik, amire több megoldás is lehetséges (pl. A összeolvasott 2. sorban a háttérkép teljesen "faltól-falig" tart, ha ide bármilyen szöveget beteszel, az rálóg a honlap falára, csúnya lesz. Ezért vhogy távolságot kell tartani a falaktól, amire egyik lehetséges módszer egy újabb táblázat beillesztése (de ez már csak 1×1-es lesz). Az újonnan beillesztett cellát igazítom középre. Így megvan a 10-10 px távolságtartás a falaktól.
Íme a kész honlap böngészőbeli kinézete. A fenti grafikát nagyon egyszerűen akár rugalmas honlapszerkezethez is fel lehet használni, minimális módosítással. A feladat mindössze annyi, hogy a középső (tartalmi rész) terület háttérképét 3 részre kell szétszedni, hogy a lap jobb és bal széléhez a "fehér csíkos" képrészletet be tudd állítani mint háttérkép. A táblázat fix 509px széles beállítását töröld, illetve helyette állítsd be pl. 90% szélességet. A szélső cellának (tartalmi rész sora) pedig illeszd be háttérképként az előzőekben mentett "tartalom-bal.jpg" és "tartalom-jobb.jpg" képeket.
Tippek és trükkök a hatékony webdesignhoz Photoshopban
Az egérmutatásra változó elem a weblapokon látható olyan gomb vagy kép, amely megváltozik, ha az egérrel rámutatnak. Egérmutatásra változó kép létrehozásához legalább két kép szükséges: a normál állapotban látható elsődleges kép, illetve a megváltozott állapotban látható másodlagos kép. Az elsődleges és másodlagos képeket rétegek használatával hozhatja létre.
Miután létrehozta egy réteg tartalmát, másolatot készíthet a rétegről, melynek szerkesztésével az eredetitől némileg eltérő tartalomhoz juthat, miközben a rétegek illeszkedését nem bontja meg. Egérmutatásra változó elemek effektjeinek létrehozásakor megváltoztathatja a rétegstílust, a láthatóságot vagy helyzetet, módosíthatja a színeket és a színárnyalatokat, illetve akár szűrőhatásokat is alkalmazhat.
Rétegstílusokat is alkalmazhat annak érdekében, hogy az elsődleges réteget felruházza bizonyos effektekkel, például színátfedésekkel, vetett árnyékkal, ragyogással vagy domborítással. Az egérmutatásra változó párok létrehozásához elegendő menteni a kép egy-egy változatát a rétegstílus bekapcsolt, illetve kikapcsolt állapotában.
A Stílusok panel előre definiált stílusainak segítségével gyorsan létrehozhat olyan egérmutatásra változó gombokat, amelyek a normál állapoton kívül rendelkeznek egy rámutatásra, illetve egy az egérgomb lenyomására megjelenő állapottal is. A Téglalap eszközzel egyszerű alakzatot rajzolhat, majd automatikusan gombbá alakíthatja egy stílus, például a normál bevésett stílus alkalmazásával. Ezután a réteg másolásával és egyéb előre definiált stílusok, például a bevésett rámutatási stílus alkalmazásával további gombállapotokat hozhat létre.
A weben közzétehet nagy felbontású képeket, melyek részleteit az érdeklődők pásztázással és nagyítással tekinthetik meg. A szokványos méretű kép ugyanannyi idő alatt töltődik le, mint egy vele egyező méretű JPEG-fájl.
Az előtér színét a Szín panelen, a Színtár panelen vagy az Adobe Pipettával állíthatja be. A Szín panel menüjében kattintson a Szín HTML-kénti másolása vagy a Szín hexadecimális kódjának másolása parancsra. A Mentés webre és eszközökre párbeszédpanelben kattintson a színtárra, vagy válassza a Matt > Egyéb elemet. Az Adobe Pipettában kattintson jobb gombbal a hexadecimális értékre, majd válassza a Másolás elemet.