Tiszta weboldal-elrendezés létrehozása a Photoshop-ban - A weboldal elrendezésének megtervezése nemcsak színes képeket rendez, hanem szöveget töltsön be a szövegkeretbe. Ez egy olyan megközelítés, amely az ügyfelek üzleti vállalkozásait méri. A weboldal színei és grafikái meghatározzák az üzlet jellegét, míg a weboldal tervezésének és a könnyű navigációs folyamatnak köszönhetően a felhasználót össze kell kötnie a szervezettel, és potenciális vevővé kell tennie.
Minden wannabe webes tervező számára kötelező a jó megjelenésű és könnyen elérhető weboldalak kialakítása. Ez az oktatóprogram célja, hogy végigvezesse a weblap-elrendezés egyszerű és tiszta webhelyének elkészítésének folyamatát a semmiből. A folyamat során fontos pontokat fog megtanulni, amelyek elősegítik a webes tervezéssel kapcsolatos további ismeretek megszerzését. 
Mielőtt megtervezné a weboldal elrendezését, írja le igényeit
Mielőtt elkezdené a weboldal elrendezésének megtervezését, tudnia kell, hogy hogyan fog kinézni a webhelye, és milyen témákat kell belefoglalnia a webhelybe. Alapvető fontosságú, hogy összeállítson egy olyan webhely-elrendezési elemet, amelyre az ügyfélnek szüksége van a saját webhelyén. Emellett egy jó tervezőnek az a képessége, hogy elkészíti a teljes weboldal modelljét, mielőtt elkezdi dolgozni a végső sablonon.
Különböző tervezőcégek alkalmazkodnak a különböző szintű előtervezési stratégiákhoz, amelyek tartalmazhatnak huzalkereteket, prototípusokat, makett, béta verziókat és még sok minden mást. Ebben az oktatóanyagban létrehozunk egy makett verziót, mielőtt elindítanánk az eredeti sablon kialakítását. A szürke árnyalatot használom, amely lehetővé teszi a makett blokk azonosítását
Vászon
Évekkel korábban, míg nagyon kevés operációs rendszer volt és korlátozott eszközök álltak rendelkezésre a weboldalak elérésére, az oldal méretét egy vagy két méretre rögzítették. Ma a forgatókönyv teljesen más. A végfelhasználók különböző méretű asztali számítógépeken, mobiltelefonokon, iPad-eken és táblagépeken érik el a webhelyeket. Ebben a sokszínű helyzetben nincs esély arra, hogy weboldalt adott méretre rögzítse. Vannak azonban egyes iparági méretek, amelyeket minden eszközre alkalmaznak. Lassan megtalálja a kedvenc méretet, vagy az ügyfél utalhat egy webhelyre, hogy utánozza a méreteket.
Ebben az esetben a következő dimenziókon dolgozunk. Ne aggódjon a magasság miatt, mivel az idővel változik. Minél több tartalmat ad hozzá a webhelyéhez, annál magasabb lesz a magassága.
Ne feledje, hogy általános az oldal függőleges lefelé görgetése, ezért előfordulhat, hogy nem rögzíti a weboldal egy adott magasságára, hacsak nem akarja, hogy a felhasználó Google-ként görgessen az Ön honlapján. De nem szükséges vízszintesen görgetni. Tehát korlátozza szélességét az ipari szabványok szerint, és ne légy kreatív a vízszintes görgetéssel.
Az interneten a felbontás 72.-re korlátozódik. A közelmúltban nagyobb felbontású képek és oldalak találhatók az iPad-en és néhány tablettán. De ez ritkán fordul elő, és jobb, ha a 72-höz marad, figyelembe véve az internetes sebességet szerte a világon.
Válassza ki a fájlokat a Ctrl + A paranccsal, és rajzoljon útmutatásokat egyformán az egész sablonban. A weboldalt gondosan kell megszervezni, és minden elem össze van hangolva egymással. És a weboldal elrendezési útmutatója segít Önnek könnyen elsajátítani azt.
Készítse el makettjét
Ha makett fájlt helyez az eredeti sablonra, sok időt takaríthat meg. Webhelyének megtervezése olyan egyszerűvé válik, hogy néhány perc alatt elkészíti a keretet. A makett azonban csak a keretek megtervezésében segít. A tervezés elemeinek részletekkel, a típus elrendezéssel és az összehangolással történő kiegészítése hosszabb időt vesz igénybe, mint a weboldal elrendezése.
Színrendszer és egyéb lehetőségek
A keretkészlet elkészítése után a következő dolog a színséma kiválasztása. Sokkal jobb, ha színei készen állnak, mielőtt elkezdené a tervezést.
Az egész arra az üzenetre vezethető vissza, hogy készítsd el fegyvereidet, mielőtt megkezdené a tervezést. Mindent, beleértve az ikonokat, képeket és a színválasztást, készen kell állnia a munka megkezdése előtt. A munka szervezése és megtervezése több időt takarít meg, és a tervezésre összpontosít, anélkül, hogy a köztük akadályok lennének.
A színek megválasztása a designer választása lehet, ha a cég új, és korábban nem rendelkezik vállalati identitással. Egyes esetekben az ügyfelek képet adnak arról, hogy milyen árnyalatokban szeretnék a logónak vagy a háttérnek lennie. A létező vállalatok esetében, ahol esetleg át kell terveznie egy teljes weboldalt, előfordulhat, hogy ugyanazokat a színeket kell választania, mint az ügyfél igényei szerint.
Számos weboldal segíthet Önnek millió színválaszték kiválasztásában az archívumokból. Próbálja ki a következő webhelyeket, hogy élvezze a színek kombinációjának széles választékát.
Color.adobe.com
Colourlovers.com
Itt néhány kék árnyalatot választottam a weboldal használatához. A teljes weboldalt a következő színséma szerint tervezzük. Ne felejtsük el három vagy négy színkombinációt választani, mivel nem tudjuk, melyik szín-ügyfél részesíti előnyben. Miután az ügyfél elkészítette a színsémát, mentse el az árnyékértékeket, és győződjön meg arról, hogy a színek létfontosságú szerepet játszanak a szervezet minden vertikális területén. Különösen a vállalati identitás területén.
Tervezési folyamat
Számos módja van a tervezők folytatására. Nincsenek olyan kemény és gyors weboldal-elrendezési szabályok, amelyek meghatározzák vagy követhetik a tervezés folyamatát, ez inkább olyan folyamat, amelyet a tervező a kényelme érdekében választ.
Egyes tervezők a teljes blokkokat és kereteket akarják felépíteni, és a második szakaszban megkezdik a részletek kidolgozását, majd a típus és végül az igazítások és kiigazítások elvégzését. Néhányan szeretik az oldal egyik részét egyszerre befejezni, és a következő oldalra vinni. A második stílust követjük.
A weboldalt a következő lépésekkel készítjük el
- Fejléc lábléc
- Amit csinálunk
- Szolgáltatások
- Forma
- hírek
- Lábjegyzet
Fejléc lábléc
A fejléc vagy a szalaghirdetés méretének meghatározására szolgáló hüvelykujjszabályt a kreativitásodra hagyják. A legújabb trendek szerint a webhelyek hatalmas képpel jelennek meg, amely lefedi a teljes számítógép képernyőjét. A stílust Hero-képnek nevezik, amely a közelmúltban meglehetősen népszerűvé vált.
Ebben az esetben 120 pixel magassággal és 550 pixel magassággal kezdtük a szalaghirdetést. A szélességnek meg kell egyeznie a dokumentum méretével.
Az egyszínű minták sima megjelenést mutatnak, amely nem igazán megy nagyobb keretekkel vagy képekkel. A sima megjelenés elkerülése érdekében a transzparens tetejére gradiens overlay réteget vettem fel. Olyan mélységet ad a szalaghirdetésnek, amely lassan átalakul az egyik árnyékból a másikba.
Ezután megkezdtük a logó importálását, és a fejléc bal felső sarkába, és egy másik nagyobb logót helyezünk el a zászló közepére. Megfigyelheti a weboldal elrendezésének vektor alakjait is a jobb felső sarokban, amelyeket a közösségi média linkjeinek megosztására használnak.
Ebben a szakaszban befejeztem a típus hozzáadását a Header & Banner részhez. A cég neve, a márkaüzenet, linkekkel és szolgáltatásokkal egészül ki a szövegbe. Megfigyelheti a transzparens átlátszó gombját is.
Sima szöveg vagy túl sok betűtípus speciális szolgáltatások nélkül rontja a weboldal megjelenését és hangulatát; az oldal hamarosan meghódítja a felhasználót, ami lehetővé teszi, hogy gyorsan elhagyja az Ön webhelyét. Nézze meg a vektor alakját, amelyet hozzáadtam a szolgáltatási linkekhez a szalag jobb felső sarkában. A stílus egyszerű, mégis kitölti az ürességet, elkerülve a hétköznapi megjelenést.
Válassza ki a vállalkozásnak megfelelő képet. Több millió stock kép érhető el az interneten, és nem fog túl sokáig tartani, hogy megtalálja az Ön igényeinek megfelelő képet.
Az én esetemben olyan jó minőségű képet találtam, amely szerintem jól megy a weboldalamon. Nincs üzleti témám a weboldal számára, így szabadon választhatok bármilyen képet, amely jól néz ki a reklámcsíkban.
Próbáljon meg letölteni néhány HD képet az alábbiakban bemutatott ingyenes stock képek webhelyekről
www.pixabay.com
A keverés olyan művészet, amelyet mesterként kell kezelnie, hogy gyönyörű reklámcsíkokat készítsen. Itt három réteget kevertem a fenti képen látható hatás elérése érdekében. Itt van, amit tettem
- Helyezze a képréteget a kék színű szalagcím tetejére
- Helyezze a színátmeneti átfedést a kép fölé
- Változtassa meg a kép átlátszóságát 40% -kal, és változtassa meg a keverési módot.
- Nézze meg a fenti képen a rétegek palettáját, hogy megértse, hogyan vannak egymásra rakva a rétegek.
Így fog kinézni a fejléc és szalaghirdetés, amikor éppen befejeztük a munkát. Egyszerre az egyik részén dolgozunk, és itt az ideje, hogy továbblépjünk a következő szintre.
Az igazítás alapvető fontosságú, ha a típusról van szó; van egy elképzelésed arról, hogyan kell kinéznie webhelyén, és a szöveget össze kell hangolni, mielőtt elkezdi. Ezen a szinten két különböző szövegkeretet használtam, mindkettőt balra igazítva.
A következő lépés a weboldal szolgáltatási részének megtervezése. Megterveztem egy szürke árnyalatú fémcsillagot, hogy bemutassam a cég különféle szolgáltatásait. A csillag szimbólum használatának szándéka az 5 csillagos szolgáltatások.
A szöveg összehangolásakor az útmutatók a legjobb barátok. A típus és az objektumok közötti koherencia úgy érhető el, hogy megfelelő módon kihasználják a fehér teret és az egyenlő réseket a tervezési elemek között. Számos weboldal-elrendezési iránymutatást alkalmaztam annak látására, hogy a keretben lévő összes objektumnak megfelelő hézagokat és távolságokat kell fenntartania, amelyek tisztességes mennyiségű szabad teret eredményeznek.
Tervezésünk következő lépése az űrlap mező létrehozása. Ebben az esetben ellentétben állok azzal a módszerrel, amelyet a reklámcsík tervezésénél használtunk. A képréteget a szilárd színű réteg alá helyezzük, és a jobb megjelenés érdekében a két réteg tetejére gradiens réteget alkalmazunk. A keverési módokkal való játék mindig elengedhetetlen, miközben nagyobb képeket helyez el.
A képek kiválasztásakor ehhez a webhelyhez nem kapcsolódik konkrét téma. Úgy gondolom, hogy ez a kép segít a webhely jobb megjelenésében.
Helyezze a képet a színes háttérréteg alá. A kép pontos rögzítéséhez a színes réteg méretéhez használja a réteg maszkolási lehetőségeket.
Vessen egy pillantást a fenti kép rétegek palettájára. A szilárd kék színű réteg a kép tetején található, a keverési módot átfedéské alakítja át, és az átlátszóság 65% -ra csökken.
A gradiens térképet a két réteg tetején használtam. A keverési mód színárnyalatra vált, és az átlátszóság változatlan marad.
Az űrlapdoboz készen áll, amely a negyedik szint végére hozza weboldal-kialakításunkat.
Következő szintünk két egyszerű szövegkeretből áll. Ez hasonlít a weboldal második szintjére, és a két mezőt a felső részhez hasonlóan igazítottam. A koherencia fenntartása az igazításban jó módszer a fehér tér felhasználására.
Amint elértük az oldal utolsó részét, itt az ideje, hogy ismét nézzük meg a lábléc méretét. A tervezőnek meg kell terveznie a lábléc magasságát az ott használni kívánt linkek alapján. Ebben az esetben 170 képpont magasságot adtam a láblékemnek. A szélesség megegyezik a weboldal szélességével.
Helyezze el a linkeket és képeket a követelményei szerint.
Ezzel befejeztük weboldalunk tervező részét. Az általunk használt színkombinációk minimálisak, sok fehér teret használunk fel a tervezéshez, és egyszerű szöveget adunk hozzá, minimális betűkészlettel. A szándék egy tiszta weboldal létrehozása, amely remélhetőleg teljesül.
Kérjük, ismételje meg az alábbiakban látható teljes oldal kialakítását
