Webhely elrendezése az egyéniség kifejeződésének, a webes tervezésnek
Van ilyen weboldal, de csak gyöngyház gombokkal? Nem? Nos, akkor meg fogunk nézni. Annak érdekében, hogy ne menjen, és ne keressen a hálózatot egy "kopott" portál számára, rendelje meg a "testreszabáshoz". De először létre kell hoznia egy webhely elrendezést.
Milyen webhelyelrendezést?
Az olyan helyek, mint az autók és az épületek először a makettekben jelennek meg, és csak akkor íródnak HTML-ben. Ha több oldalas portálról beszélünk, az erőforrás elrendezés az összes oldalának elrendezéséből áll.
A legtöbb esetben az alapszabályok, a formatervezés és a stílus minden oldalon azonos. De az összes stilisztika középpontjában áll az oldal főoldalának kialakítása. Ezért leggyakrabban a webhely főoldalának elrendezésének kialakulása szerepel. Ez a stílus és a tervezési elemek örökölik a portál többi részét.
A főoldalon kívül az összes másodlagos kialakítás különböző változatai is kifejlesztésre kerülnek. Ezt követően az egyiket felülvizsgálták és jóváhagyták a projektmenedzser, majd az ügyfél.
A nagy stúdiókban a művész részt vesz az elrendezés létrehozásában és jóváhagyásában. A vázlatváltozatok kidolgozásának időtartamát és azok számát a projektmenedzser állapítja meg az ügyféllel a fejlesztés első szakaszaiban.
Az elrendezés elkészült és jóváhagyott verziója átkerül a sminkművészre. Ennek alapján a html-kiszolgáló "lecseréli" a vázlatot részekre, és a részleteinek elrendezését a hiperszövegnyelvi címkék segítségével állítja elő.
Egy ilyen részletes bemutató után gyorsan el szeretné kezdeni a Photoshopban a webhely elrendezésének független létrehozását. De először meg kell fontolnunk egy sor szabályt, amelynek meg kell felelnie a jövőbeli grafikai elrendezésnek.
Az internetes portál mintaformájának jelei
A hálózati erőforrás grafikus indexképeinek a következő tulajdonságokkal kell rendelkezniük:
5) Nem használhat nehézkes háttérképeket háttérként - súlyosan súlyozza az egész oldalt, és növeli a letöltési időt.
6) Csak az egyedi rácsokkal igazítsa az összes réteg helyzetét.
7) A Photoshop alkalmazásban a webhelyelrendezésben használt feliratok alkalmazása során szabványos betűkészleteket kell használnia. A kép torzításának hatásaihoz külön képeket kell használni.
8) A formanyomtatványok megjelenítésekor meg kell próbálnunk ragaszkodni a szabványos arányokhoz.
9) Számos "ablak kiegészítők" elemet (gombokat, ikonokat) helyeznek el az elrendezéshez csatolt különálló fájlba.
10) A listák és menük kiterjesztése és leengedése két állapotban (zárt és kibontott).
Most, hogy ismerkedtél meg valódi psd webhelyelrendezéssel, meg fogjuk találni az üzletet.
Példa egy webhely elrendezésének létrehozására
Először el kell döntenie, hogy az oldal főbb blokkjai elhelyezhetők-e. Ezek a következők:
- A kalap a tetején van. Leggyakrabban megjeleníti a logót és a webhely nevét;
- Menü - több aktív elemet vagy gombokat tartalmaz a webhely oldalainak navigálásához;
- Bal és jobb oszlopok;
- Alagsor - az oldal elrendezésének alján található.
Számos változat létezik e blokkok elhelyezésében egymáshoz képest. A példában a kombináció klasszikus verzióját használják:
Fontos továbbá, hogy pontosan meghatározzuk a webhelyelrendezés méretét a Photoshopban.
Például a technikai megbízásban azt jelzik, hogy ez egy portál lesz, amelynek szélessége a közepén és a gumi oldalon van. A legkisebb képernyőfelbontás (1024 x 768 képpont) alapján az elrendezés szélessége 1003 képpont. A többi (21 képpont) a gördülő területre lép (görgetés). A gumi oldalak egymástól 100 pixel távolságra vannak. Az elrendezés magassága az adott méretű tervezési elemektől függ. Az átlagos hossza 500-600 képpont.
És most kezdődik a legérdekesebb:
1. Hozzon létre egy új fájlt, és állítsa be a jövőbeli elrendezés méretét. Ehhez menjen a "Fájl" - "Új" menühöz. A megjelenő ablakban adja meg a méretét és a fájlnevet:
2. Ezután hozzon létre hátteret az oldal elrendezésében. Az eszköztáron válassza ki a Színátmenet eszközt. A felső panelen állítsa be a típusát és a színét, és rajzoljon felfelé a színátmenetet. Íme, mi történt:
3. Jelölje meg az elrendezés felületét útmutatók segítségével. Először megnevezzük az elrendezés alapvető elemeit (sapkák, alagsorok, menük és oldalak):
4. Tervezze meg a webhely psd elrendezését a fejléccel kezdődően.
- Válassza ki a terület nevét a "Rectangular Area" (Szögletes terület) eszközzel;
- Ezután a határolt területet gradienssel töltjük;
- Használja a "Szöveg" eszközt a webhely nevének megadásához:
Itt van egy kép a kész elrendezésről. Az elemek gyors szerkesztéséhez fontos a rétegek fészkelő hierarchiájának fenntartása. Fontos, hogy mindegyik réteg számára értelmes nevet adjon.
A rétegek csoportosításához létre kell hoznia egy mappát az elhelyezésükhöz. Ehhez kattintson a Rétegek panel alján található mappa ikonra. Az elemek csoportosítása úgy történik, hogy rétegeket húz a kívánt mappába:
5. Az oldal elrendezésének létrehozása folytatódik a menüsáv kialakításával, közvetlenül a fejléc alatt.
- Hozzon létre egy külön fájlban a menü gomb munkadarabját. Mentjük PSD formátumban. A jövőben hasznos lesz:
Mindkét oldalon ugyanolyan szín és minta lesz. Ezeket a "Négyszögletű kiválasztás" eszközzel és egy gradienssel kell alkalmazni. Minden oldalfalhoz, mint minden elemhez, saját réteget hozunk létre:
7. Most vesszük a psd oldal elrendezését. Az oldalsó panelekkel ellentétben a kitöltés eszközzel, majd a szűrők bármelyikével (a főmenü "Szűrő") fogunk befejezni:
8. Ahhoz, hogy az elrendezés minél hihetőbb legyen, a tartalom megjelenítési területén helyezze el a szöveget egy képhez. A másik rétegből húzható a réteg húzásával. De a weboldal elrendezésének végleges verziója:
Természetesen ez a példa nem mintha a legjobb lenne.
A weboldal elrendezésének harmonikus kombinációja mellett további elemeket és feliratokat is felvehet. De mindez ugyanúgy történik, mint fent.
Mi történik a webhelyelrendezéssel?
A tervezés grafikus ábrázolásától kezdve az elrendezés tervezője a html oldal elrendezését alkotja. Ugyanakkor a helyszín elemeinek és részének minden aránya megmarad.
Azok a tervezési elemek, amelyeket nem lehet html címkékkel megjeleníteni. kivágják a grafikai elrendezésből, majd háttérképként használják őket. Példánk esetén az ilyen elemek a fő háttér és az összes komponens rajzait tartalmazzák. A webhely nevét és logóját külön-külön vágják és beillesztik a html-kódba.
Egyes összetett kialakítású vezérlők szintén kivágásra kerülnek, és háttérképként használatosak. Példánkban ezek a részek gombok.
Vagy lehet html egyszerre?
A webhely elrendezésének elrendezése egyszerre html-ben hatástalan. A tervezési elemek közül sok nem jeleníthető meg a hiperszöveg nyelv használatával. Ezenkívül a vizuális megjelenítés szerkesztése és fejlesztése sokkal könnyebb és gyorsabb.