Webdesign és honlapkészítés Photoshop-ban
(Kenyeres Zsolt)

• Bevezető
A neten találhatunk ingyenes .psd(photoshop document) sablonokat. Ezeket könnyen alakíthatjuk, testre szabhatjuk és elmenthetjük HTML formátumban is. Nagyjából a következő lépéseket kell egy átalakítás során csinálni.

• Rétegek kijelölése és mozgatása

A toolbar-on lévő legelső nyílvég ikont tegyük aktívvá. Vigyük a módosítani kívánt képrészlet vagy terület fölé, majd nyomjuk meg az egér jobb gombját. A felsorolt listában azok a rétegek láthatóak, amelyek az egérkurzor alatt helyezkednek el, többnyire fentről lefelé. Válasszuk ki azt a réteget, amelyet mozgatunk vagy más felhasználásra átalakítunk.

• Elhelyezés

Akár egy új állományban, akár az aktuális helyen alakíthatjuk át a grafikai elemeket. Nyissunk egy új ablakot és az egeret vonszolva az új ablakba dobjuk át azokat a rétegeket, elemeket, amelyekből összeállítjuk az új design-t. Használhatjuk a kijelölést és a nem kívánt részleteket egyszerűen kijelölés és kivágás műveletével formázhatjuk.

• f(x) rétegstílusok

Ha egy rétegen kettőt kattintunk, a rétegen elhelyezkedő alaknak, shape-nek adhatunk árnyékot, belső ragyogást vagy azt egy színátmenettel átszínezhetjük például.

• Mentés webes eszközre

Szelet eszközzel az egész fotó montázst feldarabolhatjuk részekre, amelyeket a program maga számoz be. Általában a design-on van egy fejléc és egy lábléc is, amelyeket általában nem kell felosztani további részekre. Menük esetében külön képre menthetjük az egér állapotaitól függő más színű vagy kiemelt, felosztott, feldarabolt képrészleteket. Mentés webes eszközre menüponttal a felszeletelt részek formátumát be is állíthatjuk. Elmentve az egészet a képdarabok egy "/images" könyvtrába kerülnek.

• HTML forráskód

A képrészek CSS-el formázva vagy egy táblázat háttereként lehetnek alkotó részei az egész weboldalnak, vagy egyszerűen egy <img> tagként szerepelhetnek. Hogy a weboldal struktúráját megtartsa, ajánlott a táblázatok alkalmazása. Erről szól egy másik cikkem ezen az oldalon.