ebben a Photoshop webdesign oktatóanyagban egy hatalmas, tiszta és professzionális weboldal-elrendezést tervezünk a Photoshopban. Az ebben az oktatóanyagban elvégzett elrendezés személyes vagy vállalati weboldal-tervezésként használható. Ez a kialakítás elég felhasználóbarát, ezért nagyszerűnek kell lennie webhelye hírnevének.
frissítés: Ez egy kétrészes sorozat első része, amely megtanítja, hogyan kell létrehozni az elrendezést a Photoshopban, majd hogyan lehet átalakítani szabványoknak megfelelő (X)HTML webdesignra.
a “tiszta és professzionális webdesign” sorozat
- 1.rész: tiszta és professzionális webdesign létrehozása a Photoshopban
- 2. rész: tiszta és professzionális webdesign kódolása
végső előnézet
vessen egy pillantást az elrendezésre, amelyet ebben az oktatóanyagban hozunk létre. Az alábbi kép végső előnézetét láthatja, vagy kattintson ide a teljes méretű verzióhoz. 
Photoshop-dokumentum előkészítése
1 Hozzon létre egy új dokumentumot a Photoshopban (Ctrl/Cmd + N) a következő kép beállításaival.
állítsa be az egységek és vonalzók beállításait
2 Győződjön meg arról, hogy pixel egységekben dolgozik, ami a webdesign szabványos rögzített egysége.
állítsa be a következő beállításokat a Vonalzókhoz a Beállítások párbeszédablakban (Ctrl/Cmd + K); kattintson az egységek & vonalzók elemre, és győződjön meg arról, hogy mindent az alábbi ábrán látható módon állított be. 
útmutatók hozzáadása a tartalomterület kijelöléséhez
3 aktiválja a Photoshop-vonalzókat a nézetből > vonalzók.
kapcsolja be a vonalzók láthatóságát a “Ctrl/Cmd + R”megnyomásával.
nyissa meg az Info panelt is Ablak > Info (gyorsbillentyű: F8).
az információs panel hasznos információkat ad a kiválasztott eszköztől függően.
az “M” megnyomásával válassza ki a téglalap alakú sátor eszközt, és hozzon létre egy 120 képpont széles dobozt a vászon bal sarkából. A méretet úgy állíthatja be, hogy a kiválasztás közben megnézi az információs panelt.
most kattintson a bal vonalzóra, és húzza az útmutatót a kijelölés jobb oldalára az alábbi képen látható módon. 
4 vigye ezt a kijelölést a vászon jobb szélére. Rendeljen egy másik útmutatót a kiválasztás bal oldalához.
a vászonnak most így kell kinéznie: 
a logó létrehozása
5 Most elkészítjük a weboldalunk logóját.
a logó nagyon egyszerű lesz, és színátmeneti hatása lesz. Hozzon létre egy új csoportot (réteg > új > csoport), és nevezze el “logo” – nak.
6 Válassza ki a vízszintes típusú eszközt (T), majd írja be nagybetűkkel a “SMASHING” szót (vagy a webhely nevét).
7 ezután a karakter panelen állítsa a betűtípust Arial-ra, a stílust félkövérre, a méretet pedig 42pt-re. Állítsa az anti-aliasing method opciót Sharp értékre, és használja a #101112 színt.
ezeket a beállításokat az Opciósávon is beállíthatja, ha a típus eszköz az aktív eszköz. 
tartalomterület hozzárendeléséhez 8 kattintson duplán a Rétegstílus párbeszédpanel megnyitásához. Válassza ki a színátmenet-átfedést, kattintson a színátmenet-szerkesztőre, és használja az alábbi beállításokat.
9 helyezze a “SMASHING” típusú réteget felülről 35 képpont, balról pedig 0 képpont távolságra. Ezt pontosan megteheti a Mozgatás eszközzel (V) és a nyílbillentyűkkel. Másolja ezt a típusú réteget (réteg > réteg duplikálása).
mozgassa a duplikált réteget közvetlenül a “SMASHING” szó mellett, és szerkessze a szöveget “Dzine” – re. Ismételje meg a 6., 7., 8. lépést, de használjon különböző színátmeneti színeket (bal színmegállás: #b27625, jobb színmegállás: #e5ad27) a “Dzine”szóhoz.
10 Válassza ki a vízszintes típus eszközt (T), majd adjon hozzá egy címkesort a logó alatt a következő beállításokkal. 
11 a végleges logónak az alábbi képre kell hasonlítania.
az útmutatók be – / kikapcsolásához lépjen a > > Rács megjelenítése menüpontra, vagy használja a Ctrl/Cmd +parancsikont ; 
a navigációs sáv létrehozása
12 hozzon létre egy új csoportot, és nevezze el “navigáció”, A “logó” csoport felett kell lennie. Húzzon egy útmutatót a felső vonalzóról, 150 képponttal a vászon felső széle alatt. Válassza ki a téglalap eszközt (U), és rajzoljon egy 4PX magasságú vízszintes vonalat #e3ab27 színnel a vászonra.
13 adjon hozzá navigációs linkeket 12 képpont magasan ebből a vízszintes vonalból, 20 képpont a bal oldali vezető jobb oldalán.
válassza ki a lekerekített téglalap eszközt (U), és rajzoljon egy 72 x 35 képpontos méretű dobozt. Vigye ezt a réteget a szöveges linkek alá, és nevezze el a réteget “lebeg”.
egyenesítse ki az alsó lekerekített sarkokat a Convert Point eszközzel. Mozgassa az egyenetlen élek oldalát alul egy 8 képpontos margóval, hogy az élek megegyezzenek az alsó többi belső élekkel.
kattintson duplán a” hover ” rétegre a Rétegstílus párbeszédpanel megnyitásához és a színátmenet színek hozzáadásához (bal színmegállás: #e5ad27, jobb színmegállás: #b27625). Válassza ki a vízszintes típusú eszközt (T), válassza ki a “Home” szöveget, majd változtassa meg a színt #ffffff (fehér) értékre. 
a “Hívjon minket” szakasz létrehozása
14 ezután létrehozzuk a “Hívjon minket” részt a tervezésünk jobb felső sarkában (pontosan a logó ellentétes oldalán).
töltse le ezt a telefonikont, és helyezze a megfelelő útmutató közelébe. Nevezze el ezt a réteget “telefon ikon”. Válassza ki a vízszintes típusú eszközt (T).
adjon hozzá egy telefonszámot a telefon ikon bal oldalán az Arial betűtípussal, amelynek mérete 20PT, színe pedig #292929.
adjon hozzá néhány kapcsolódó szöveget a telefonszám alá az Arial betűtípussal, félkövér betűvel, 11pt méretű és # 595959 színű. 
létrehozása a fejléc
15 most megyünk egy hozzon létre a fejléc szakasz. Hozzon létre egy új csoportot, és nevezze el “header” – nek.
16 válassza ki a téglalap eszközt (U), majd hozzon létre egy 1200 x 440 képpont méretű téglalapot.
tegye ezt a téglalapot 1 képpont távolságra a navigációs sáv alá, és nevezze el ezt a réteget “header bg” – nek. Kattintson duplán a “header bg” rétegre, válassza ki a gradiens Overlay réteg stílusát, és ez a két szín legyen a Gradiensszerkesztőben (bal színmegállás: #2e2226, jobb színmegállás: #7a7556).
Lásd az alábbi képet a téglalap helyzetéről és a színek részleteiről. 
17 hozzon létre egy másik téglalapot a téglalap eszközből (U), amelynek mérete 960 x 360 képpont.
tegye ezt a téglalapot a “header bg” réteg tetejétől 40 képpont, a bal oldali vezetőtől pedig 0 képpont távolságra. Nevezze el ezt a réteget “fejléc konténer”. Az alábbiakban bemutatjuk, mit tettünk eddig a tervezéssel.
a “kiemelt projekt” szakasz létrehozása
18 ezután létrehozzuk a kiemelt projekt részt. Hozzon létre egy új csoportot a fejléccsoporton belül, és nevezze el “fp” – nek. Válassza ki a téglalap eszközt (U), és hozzon létre egy téglalapot, amelynek mérete 630 x 340 képpont a fejléctartály tetejétől és baljától 10 képpont távolságra.
adja meg ennek a rétegnek a #000000 színét, és nevezze el “fp container” – nek. 
19 nyisson meg egy képet a Photoshopban, amelyet ide szeretne helyezni kiemelt projektként. Válassza a > All (Ctrl/Cmd + A) lehetőséget, majd szerkessze a > Copy (Ctrl/Cmd + C) elemet.
gyere vissza a mi web design.
hozzon létre egy új réteget az “fp container” réteg felett, majd lépjen a > beillesztés szerkesztése (Ctrl/Cmd + V) elemre a kiemelt projektkép beillesztéséhez. Nevezze át ezt a réteget “fp image” – re. Kattintson a jobb gombbal az” fp kép ” rétegre, majd válassza a Vágómaszk létrehozása lehetőséget.
most a kép csak a téglalap belsejében látható (“fp konténer”).
végezze el a beállításokat úgy, hogy a kiemelt projekt képe hasonló legyen az alább látható képhez. 
20 lépjen a > Szerkesztés > átalakítás > skála elemre (Ctrl/Cmd + T). Az Opciósávon kattintson a forgatás mezőbe, írja be a -4-et, majd nyomja meg kétszer az enter billentyűt a szög beállításához.
maradjon ugyanazon a rétegen (“fp kép”), és válassza a fényességet a réteg keverési módjaként. 
21 ezután létrehozzuk a kiemelt projektkép cím-és leírássávját. Válassza ki a téglalap eszközt (U), és hozzon létre egy téglalap alakot, amelynek mérete 630 x 90 képpont a #161718 szín használatával.
változtassa meg a réteg átlátszatlanságát 90% – ra, és nevezze el “title bg” – nek. Helyezze ezt a téglalapot az alábbi képen látható módon. 
tartalomterület hozzárendeléséhez 22 hozzon létre egy másik téglalapot, amelynek mérete 630px 1px a # 9c9c9c szín használatával, és nevezze el “cím vízszintes vonal”.
helyezze ezt a téglalapot a “title bg” réteg tartalmának felső szélére.
23 adjon hozzá egy címet és leírást a 21.lépésben létrehozott téglalapba, a cím és a leírás alábbi beállításainak használatával.
a címhez:
- betűtípus: Arial, szín: # ffffff, méret: 25pt és anti-aliasing módszer opció: Sharp
a leíráshoz:
- betűtípus: Arial, szín: # a4a4a4, méret: 12pt és anti-aliasing módszer opció: Nincs
a “Gyors idézet” szakasz létrehozása
24 hozzon létre egy másik csoportot a fejléccsoporton belül, és nevezze el “Gyors idézet” – nak. Válassza ki a téglalap eszközt (U), és hozzon létre egy téglalapot, amelynek mérete 300 x 340 képpont. Helyezze ezt a téglalapot 10 képpont távolságra a kiemelt projekt szakasz jobb oldalán, és nevezze el “qq container” – nek.
25 átmásolunk egy Rétegstílust egy másik rétegből, amelyet egy előző lépésben hoztunk létre.
lépjen be a “navigáció” csoportba, kattintson a jobb gombbal a “hover” rétegre, válassza a Rétegstílus másolása lehetőséget, térjen vissza a “qq container” rétegre, kattintson a jobb gombbal, majd válassza a Rétegstílus beillesztése lehetőséget. Most ugyanaz a Rétegstílusunk van, mint a “hover” réteg a “qq container” – nél. 
26 válassza ki a vízszintes típusú eszközt (T).
írja be a “Quick Quote” szót a “qq container” belsejébe 20 képpont távolságra a tartalmazó doboz felső és bal szélétől. Állítsa a betűtípuscsaládot Trebuchet MS – re (vagy az Ön által preferált webes betűtípusra), a fehér szín (#ffffff) és az anti-aliasing method beállítás Sharp értékre. A lekerekített téglalap eszközzel (U) három űrlapmezőt hozunk létre.
válassza ki a lekerekített téglalap eszközt (U), és állítsa a sugarat 3px értékre. Ezután hozzon létre két lekerekített téglalapot, amelyek mérete 260px 35px a fehér szín (#ffffff) használatával. Ezután nevezze el az alakzatrétegeket “field1”, illetve “field2” néven.
hozza létre a harmadik lekerekített téglalapot 260 x 75 képpont méretű fehér színnel (#ffffff), és nevezze el “field3” – nak. Válassza ki a vízszintes típus eszközt (T), és hozzon létre címkéket minden űrlapmezőhöz. 
27 válassza ki a lekerekített téglalap eszközt (U), majd hozzon létre egy 80 képpontos 35 képpontos dobozt, és nevezze el “BTN küldése” – nek.
28 kattintson duplán a rétegre a rétegstílusok párbeszédablak megnyitásához, majd jelölje be a színátmenet átfedés jelölőnégyzetet balról.
kattintson a színátmenet-szerkesztőre, és változtassa meg a színátmenet színeit az alábbiak szerint. 
29 válassza ki a vízszintes típusú eszközt (T), és írja be a “Küldés” szót az Arial betűtípussal, a stílus félkövér és a méret 13pt. Jelölje ki mindkét réteget a Rétegek panelen (“btn küldése” és “szöveg küldése”).
30 válassza az Áthelyezés eszközt (V) az Eszközök panelen, majd kattintson a függőleges középpontok igazítása, a vízszintes középpontok igazítása lehetőségre az Opciósávon.
(Alternatív megoldásként ugyanazt az eredményt érheti el a Layer > Align > Vertical Centers és Layer > Align > Horizontal Centers menüpontban). 
a fő tartalomterület létrehozása
31 hozzon létre egy új csoportot, és nevezze el “tartalomnak”. Válassza ki a téglalap eszközt (U).
hozzon létre egy 300 x 175 képpontos téglalapot, és nevezze el “c01” – nek. Helyezze ezt a réteget 30 képpontra a fejléc alá, a bal oldali útmutatóból pedig 0 képpontra. Kattintson duplán a rétegre, és használja a következő kép beállításait.
32 most tartalmat fogunk hozzáadni ehhez a dobozhoz. Válassza ki a vízszintes típusú eszközt (T), majd adja hozzá a “About SmashingDzine”szöveget. Válassza ki a” Névjegy ” szót a vízszintes típusú eszköz (T) segítségével, majd változtassa meg a színét #b47825-re.
Ezután válassza ki a “Smashing” szót, majd változtassa meg a színt #2f2f2f-re. adjon hozzá egy kis leírást és egy linkszöveget a cím alá. A következő opciókat használták a cím, a leírás és a hivatkozás szövegéhez.
(ezeket a beállításokat szükség szerint módosíthatja). 
a címhez:
- betűtípus: Trebuchet MS, stílus: normál, méret: 24pt, anti-aliasing módszer: Sharp
a leíráshoz:
- betűtípus: Arial, stílus: normál, méret: 12pt, anti-aliasing Módszer: Nincs, szín: #767676
a Link szövege:
- betűtípus: Arial, stílus: félkövér, méret: 13pt, anti-aliasing Módszer: Nincs, szín: #252525, aláhúzás
33 most hozzáadunk egy négyzet alakú mezőt a leírás mellett. Válassza ki a téglalap eszközt (U) és a #ffffff színt, tartsa lenyomva a Shift billentyűt az arányok fenntartásához, és hozzon létre egy négyzetet, amelynek mérete 88 x 88 képpont. Mozgassa ezt a négyzetet 10 képpont távolságra a téglalap bal oldalán (“c01”).
nevezze el ezt a réteget “border” – nek. Kattintson duplán a rétegre a Rétegstílus párbeszédablak megnyitásához, majd adjon hozzá egy körvonal-rétegstílust a következő beállításokkal: 
34 hozzon létre egy másik 82 képpont méretű 82 képpont méretű dobozt, majd helyezze a” határ ” réteg közepére. Nevezze el ezt a réteget “box” – nak, és változtassa meg a négyzet színét #d5d5d5-re.
jelölje ki a csoport összes rétegét (“tartalom” csoport), lépjen a réteg > új > csoport rétegekből (Ctrl/Cmd + G) elemre, és nevezze át ezt az új csoportot “névjegy”. 
Megjegyzés: A belső szürke négyzet alakú doboz egy kép helytartója, amelyet bármilyen választott képpel helyettesíthet.
35 másolja a “Névjegy” csoportot (kattintson a jobb gombbal a csoportra, válassza a Duplicate Group lehetőséget), és nevezze el “szolgáltatások”-nek. Kattintson a jobb gombbal a” szolgáltatások “csoportra, válassza ki újra a duplikált csoportot, majd nevezze el”portfóliónak”.
jelenleg három csoportunk van (“about”, “services” és “portfolio”). Vigye az utolsó csoportot (“portfólió”) a jobb oldali útmutatóba az alábbiak szerint. 
36 jelölje ki mindhárom csoportot a Rétegek panelen, majd lépjen a Layer > a > vízszintes központok elosztása elemre, hogy egyenlően helyezze el őket.
kattintson ide a következő kép teljes méretű képének megtekintéséhez. 
37 módosítsa a “szolgáltatások” csoport (középen) és a “Portfólió” csoport (jobbra) címeit az alábbiak szerint. (Meg lehet változtatni ezeket a címeket szerint a követelmény.) 
lábléc létrehozása
38 hozzon létre egy új csoportot, és nevezze el “láblécnek”.
válassza ki a téglalap eszközt (U), és hozzon létre egy 1200 x 100 képpont méretű téglalapot a tervezési elrendezés alján. Nevezze el ezt a réteget “lábléc bg”. Használja ugyanazt a gradiens Overlay stílust, mint a” header bg “réteg, a jobb egérgombbal kattintva a” header bg ” rétegre, majd a Rétegstílus másolása lehetőséget.
menjen vissza a lábléc csoportba, kattintson a jobb gombbal a “lábléc bg” rétegre, majd válassza a Rétegstílus beillesztése lehetőséget. 
39válassza ki a vízszintes típusú eszközt (T), és adjon hozzá szerzői jogi szöveget és lábléchivatkozásokat a bal oldalon az Arial betűtípussal, 12pt méretű és szürke színű (#dddddd). 
40 a jobb oldalon hozzá fogjuk adni az e-mail előfizetés részt.
hozzon létre egy új csoportot a “lábléc” csoporton belül, és nevezze el “feliratkozás” – nak. Válassza ki a lekerekített téglalap eszközt (U), és hozzon létre egy 85 x 35 képpontos téglalapot. Nevezze el ezt a réteget “subscribe btn”.
41 ismételje meg a 26.lépést az űrlapmezők és címkék hozzáadásához.
42 válassza ki a vízszintes típusú eszközt (T), majd írja be a “Feliratkozás” szót az Arial betűtípussal, a stílus félkövérre állítva, a méret pedig 13pt.
válassza ki mindkét réteget (“subscribe BTN” és “Subscribe text”).
43 A feliratkozás gomb létrehozásához ismételje meg a 28.lépést.
44 válassza ki a lekerekített téglalap eszközt (U), majd állítsa a sugarat 3 képpontra. Hozzon létre egy lekerekített téglalapot 210 x 35 képpont méretű fehér színnel (#ffffff), és nevezze el ezt az alakzatréteget “e-mail mező”néven. Adjon hozzá egy szöveges sort az “e-mail mező”fölé.
végeredmény
OK, ez az, és végeztünk. Itt van a végeredmény.
kattintson az alábbi képre a teljes méretű elrendezés megtekintéséhez. Köszönöm a következő együtt én bemutató. Remélem, mindannyian élvezték és tanultak valami újat ebből a bemutatóból.
kérjük, hagyja meg észrevételeit alább, és ossza meg gondolatait és véleményét, szeretném hallani őket. Ezt a tervezési bemutatót megoszthatja barátaival is, ha úgy gondolja, hogy hasznos lehet számukra!
töltse le a forrásfájlt
az oktatóanyag Photoshop fájlját (PSD) az alábbi linkről töltheti le ZIP archívumként.
- tiszta-professzionális-webelrendezés (ZIP, 2,4 MB)
Összegzés
ha úgy dönt, hogy ezt a kialakítást használja, mindenképpen optimalizálja a képeket a betöltési idő csökkentése érdekében. Ennek a döntésnek nagyszerűnek kell lennie olyan kis helyszíneken, mint például egy golfpálya, mert egyszerű, könnyen használható és felhasználóbarát.
kapcsolódó tartalom
- Hogyan hozzunk létre egy tiszta Blog Design Photoshop
- kódolása tiszta Web 2.0 Stílus Webdesign a Photoshopból
- hozzon létre egy sima és minimalista webes elrendezést a Photoshopban
A szerzőről
Waheed Akhtar szabadúszó webdesignerként Dubaiból, az Egyesült Arab Emírségekből. A Boost Inspiration alapítója és szerkesztője, ahol a digitális művészet, a grafikai tervezés, az illusztráció, a fotózás és a tipográfia különböző kreatív erőforrásait mutatja be inspirációként. A Twitteren vagy a Facebook-on keresztül érheti el.