A weben rengeteg webhelysablon található, de van egy hátrányuk - nem egyediek. Ha az oldal tulajdonosa nem akarja, hogy a webhelye máshol megismétlődjön, megrendelhet egy sablont egy profi tervezőtől, vagy megpróbálhatja saját maga létrehozni.
Szükséges
Adobe Photoshop program
Utasítás
1. lépés
Saját sablon létrehozása nem olyan nehéz feladat, mint amilyennek első pillantásra tűnhet. A munkavégzéshez szüksége van az Adobe Photoshopra - természetesen legalább alapismeretekkel kell rendelkeznie a munkával kapcsolatban. Mielőtt azonban elindítaná a programot, és elkezdene létrehozni, előre meg kell gondolnia a jövőbeli terveket. Ennek legkényelmesebb módja, ha először megismerkedünk legalább száz kész sablonnal, felmérjük azok előnyeit és hátrányait. Ügyeljen bizonyos tervezési elemek sikeres megoldására. Ez nem jelenti azt, hogy lemásolja őket, de ésszerű néhány szép és kényelmes megoldást alapul venni.
2. lépés
Más emberek sablonjainak elemzése és saját kreativitása alapján képet kell kapnia arról, hogyan fog kinézni webhelye. A legjobb, ha a jövőbeli terv durva vázlatait színes ceruzákkal készítjük a szokásos A4-es lapokon. Csak akkor szabad elkezdeni dolgozni a Photoshop alkalmazással, ha már pontosan megismerte, mit fog pontosan rajzolni.
3. lépés
Indítsa el a Photoshopot, hozzon létre egy új 1200x1600 méretű projektet, állítson be átlátszó hátteret. Kapcsolja be a Vonalzó eszközt, ha még nincs bekapcsolva, nyomja meg a Ctrl + R billentyűkombinációt. Csattanás engedélyezése: Nézet - Csattanás.
4. lépés
Most el kell osztanunk a sablont olyan útmutatókkal, amelyek megmutatják az elemek határait - oldalak, oszlopok stb. Például fel akarja osztani a sablont úgy, hogy a sablon bal oldalán egy keskeny oszlop, a jobb oldalon jobbra egy széles oszlop legyen, és a tetején legyen hely egy fejlécnek. Ez azt jelenti, hogy három függőleges vonalra (a sablon bal szélére, a jobbra és a közöttük lévő vonalra) és egy vízszintes vonalra van szükség, amely a fejléc alsó szegélyét mutatja. Függőleges vonal beállításához vigye a kurzort a bal oldali bal vonalzóhoz, nyomja meg az V gombot, és miközben a gombot lenyomva tartja, húzza a vonalat a kívánt helyre. Ugyanezt tegye a másik két függőleges vonallal is. A vízszinteseket ugyanúgy építik, csak a felső vonalzót használják.
5. lépés
Keressen egy hátteret a sablonjának, ennek kicsi, ismétlődő mintának kell lennie. Nyissa meg a Photoshop alkalmazásban, válassza ki, másolja. Ezután illessze be a sablonba annyiszor, ahányszor ki kell tölteni a háttérrel. A beillesztés a következőképpen történik: "Szerkesztés" - "Beillesztés", majd húzza a háttérterületet a kívánt helyre. Még gyorsabb képet beilleszteni a Ctrl + V paranccsal. Ugyanígy adjon hozzá egy hátteret a webhely fejlécéhez. Különböző színátmenet-kitöltéseket használhat a háttér létrehozásához.
6. lépés
A Ceruza eszköz segítségével rajzolja meg a sablon határait, összpontosítva a már megrajzolt vonalakra (vagyis azok tetejére). Megkapta a legegyszerűbb sablon alapját, most ki kell egészítenie a szükséges részletekkel - navigációs gombokkal, menüsorokkal, különféle díszítő elemekkel stb. A gombok és egyéb elemek létrehozásával kapcsolatos további információkért olvassa el az Adobe Photoshop használatával kapcsolatos cikkeket.
7. lépés
A sablon elkészült, most darabokra kell vágnia, hogy beillessze őket a html oldalba. A vágáshoz használja a Szelet eszközt. Megtalálásához kattintson a jobb gombbal a Keret eszközre, és válassza a megnyíló menü Kivágás parancsát. Most kívánt módon beágyazhatja a sablont, majd elmentheti: "File" - "Save for Web". A megnyíló ablakban válassza ki a fájltípust: HTML & images, adja meg a fájl nevét: index.htm és mentse el. Lesz egy index.htm fájlja és egy képmappája szeletelt képekkel.
