Photoshop webdesign

Kategóriák - Photoshop, Webdesign

Webdesign és honlapkészítés Photoshop-ban




• 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önyvtárba 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.


Hagyjon üzenetet!

Responsive template also for mobilephones - © Minden jog fenntartva! - © All rights reserved - Varga Zsolt
Stat