A weboldal tervezése egy összetett folyamat, amelynek első és egyik legfontosabb lépése a grafikai arculat elkészítése. Ezt a feladatot általában egy webdesigner végzi, aki a megrendelő elképzelései alapján, a teljes arculatot figyelembe véve hozza létre a látványtervet. Az Adobe Photoshop továbbra is elengedhetetlen eszköz a színvonalas webdesign megtervezéséhez.
A Photoshop szerepe a webdesign folyamatában
A fórumokon gyakran felmerül a kérdés, hogyan lehet Adobe Photoshop segítségével honlapot (vagy annak grafikáját) elkészíteni, és hogyan lesz ebből a kész grafikából egy böngészhető, tartalommal feltölthető weboldal. Mivel legjobb tudomásunk szerint ilyen jellegű képes/szöveges leírás még nem áll rendelkezésre magyar nyelven, igyekszünk elmagyarázni. Fontos megjegyezni, hogy a honlap kinézete ebben a leírásban alapszintű lesz (header, tartalom, footer), ennél természetesen lehet sokkal bonyolultabb, szebb, színesebb grafikát is készíteni.
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 weboldal készítésre fel, hiszen teljesen egyedi megjelenése lesz a weboldalunknak. A Photoshop Alapozó tanfolyam kezdő szintről indul, de lépésenként a haladó szintig kísér. Számos esetben indokolt a photoshop grafikával történő weboldal készítés, hiszen rengeteg előnye van.
Látványterv készítése Photoshopban
Az első lépés egy 800x600-as dokumentum létrehozása. Ezt dupla kattintással konvertáljuk réteggé, majd nevezzük el 'content'-nek. A CTRL+ALT+C megnyomásával a canvas méretét állítsuk át 1000x800 képpontra. Hozzunk létre egy új réteget, nevezzük el 'body'-nak, húzzuk be a 'content' alá, töltsük ki feketével, és alkalmazzunk rá gradiens overlayt. A style legyen 'radial', a szín maradjon, a 'reverse'-t változtassuk meg, a 'scale' legyen maximum.
A 'content' rétegen alkalmazzunk 'color overlay'-t, válasszunk őszies színt. Alkalmazzunk rá 'stroke'-ot, ami legyen fehér, 5 pixel és 'inside'. Kattintsunk a stílusokra, legyen 'inner glow', a szín legyen ugyanaz, mint a háttér, csak legyen sötétebb egy picit. A 'size'-t pedig húzzuk fel egy kicsit.
Néhány őszies fotót válasszunk ki, nyissunk meg, majd állítsuk be fejlécnek. Hozzunk létre egy új réteget, majd készítsünk egy fekete négyzetet, ami a menü háttere lesz, az átlátszósága legyen 50%. Írjuk fel a menüpontokat fehérrel.
Baloldalra tervezzünk egy lekerekített hírek dobozt, alkalmazzunk rajta néhány stílust, a színe legyen világosabb, mint a háttér, a stroke pedig sötétebb. Írjuk be, hogy "Hírek", rakjunk elé egy kört a shape layer segítségével. Alkalmazzunk 'gradient overlay'-t. A fejlécből válasszunk ki két színt.
Duplikáljuk a feliratot, húzzuk a másik oldalra, írjuk át a szöveget. Készítsünk egy szövegdobozt, szúrjunk be tetszőleges szöveget, kövessük a videón látható formázási utasításokat. A "Hírek" dobozba is illesszünk szöveget, valamint pár fotót is.
A kép feldarabolása (Slicing)
Az elkészített grafikát a weblapok HTML-táblázat vagy CSS-rétegek használatával történő összeállításához szeletekre kell darabolni. A szeletek a képek feldarabolásával kapott alkotórészek. A szeletelt képek exportálása és optimalizálása a "Mentés webre" paranccsal történik.
A Photoshop-ban célszerű a grafikát nagyobb egységekre felbontani "guides" (segédvonalak) segítségével. Ezeket a vonalakat úgy tudod létrehozni, hogy az egérmutatóval az ablak bal oldalán és fenti részén látható vonalzóra állsz, majd az egeret nyomva tartva "belehúzod" a segédvonalat a képbe. Ha nem jelenik meg, akkor a "View > Show > Guides" részen lehet a megjelenését ki-/bekapcsolni.
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 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
Miután a grafikát feldaraboltad, nyiss egy új HTML lapot a "File > New" (CTRL+N) parancsra kattintva. Szúrj be egy táblázatot, mely nálam most 3x3 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, hogy 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.
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. CSS használatával).
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 1x1-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.
Weboldal készítésről 5 perc alatt (Egyszerűbb nem is lehetne...)
Í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.
Webdesign oktatás és profi eszközök
Szeretnél egy ütőképes oktató anyagot? A videók teljes hossza több mint 8 óra, 16 fejezetre és 60 videóra osztva. Ezek a videók minden verzióban (legfeljebb bővülnek), ezért az újabb változatokkal is használható. Célja, hogy megtanítsa a weboldal designok készítéséhez szükséges ismereteket.
A "Tanulj hatékonyan oktató videóval: Photoshop titkok, 2." című oktató videó lényegében egy magyar nyelvű film, amely DVD-n található, vagy online nézhető meg és a számítógéped segítségével tudsz lejátszani. Ez az anyag tudást ad, amit máshogy nem, vagy csak sok utánajárással, kínlódással szerezhetsz meg.
A Behance ProSite egy weboldal építő rendszer, amely az Adobe CC előfizetéshez tartozik. 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. A ProSite-tal készített site-ok 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.
A ProSite design moduljában lehetőség van 100%-ig testreszabni az oldalt. Módosíthatjuk a hátteret, akár fotóhátteret vagy textúrát is betehetünk, feltölthetünk saját logót is, de lehet a főcím szöveges is a weboldalon. A Layoutban módosíthatjuk továbbá például az ún. Dividereket, ezek az egyes szekciókat elválasztó vékony vonalak, sőt még a weboldal elemeinek pozícióját, egymástól és a böngészőablak széleitől való távolságát is megadhatjuk. Mindent lehet tili-tolizni, színezni, a szövegek esetében pedig kb 8-10 tetszetős betűtípus is rendelkezésre áll.
Weboldal készítésről 5 perc alatt (Egyszerűbb nem is lehetne...)
A webdesigner, aki az oldal megjelenéséért felelős, vagyis a grafikát elkészíti, nagy értéket képviselhet. Nagyon egyszerűen: megtanulsz használni egy grafikai programot, mire tényleg jó weboldal designokat készítesz majd. Jól hangzik, ugye?