Oktatóanyag: Weboldal elrendezése az Adobe Photoshop alkalmazással

A weblapok megtervezéséhez és a munka teljesen egyszerű és funkcionális módon, a kód megadása vagy megérintése nélkül, rengeteg eszközzel rendelkezik. Számtalan, pályázatok által javasolt (Az Adobe Dreamweaver egy példa), vagy közvetlenül online platformokon, például a Wix. A webdesigner számára azonban elengedhetetlen a kézi eljárások ismerete. A HTML5 és a CSS a weboldalak és a céloldalak elrendezésének alapvető pillére.

Azonban gyakrabban, mint amire számíthat, olyan alkalmazásokhoz kell fordulnia, mint az Indesign vagy Adobe Photoshop hogy kiegészítse az elrendezés munkáját és tökéletes befejezést nyújtson nekik. Ma ebben a kiterjedt oktatóanyagban látni fogjuk, hogyan lehet elrendezni egy weboldalt az Adobe Photoshop segítségével. Ebben az első részben maradunk a Photoshop által fejlesztendő munkában, bár a jövőben részletekben megtudhatjuk, hogyan alkalmazhatjuk ezt a munkát már közvetlenül HTML-kódban, hogy működőképessé váljon.

A drótvázunk kialakításával kezdve

A weboldal elrendezésével és kialakításával kezdve rendkívül fontos, hogy kezdjük azzal, hogy meghatározzuk, melyek lesznek az alapelemek, ez a csontváz. Ez a struktúra az összes tartalom (akár szöveges, akár multimédiás) tárolására szolgál. Az oldalunkat alkotó szakaszok meghatározásával teljes pontossággal dolgozhatunk rajtuk, és a lehető legpontosabb látványtervet nyújthatjuk.

Nagyon fontos, hogy vegyük figyelembe azokat a dimenziókat, amelyek a weboldalunkon lesznek, ha a dobozos vagy teljes szélességű. A dobozos weboldal egy kis konténer belsejében lesz, ezért szóköz jelenik meg körülötte. Éppen ellenkezőleg, a teljes internet lefoglalja az oldalt reprodukáló eszköz teljes képernyőjét. Az egyik vagy másik mód kiválasztása pusztán stilisztikai kérdésekre ad választ, és attól is függ, hogy milyen projekt igényein dolgozunk. Ebben a példában a dobozos üzemmóddal fogunk dolgozni, így nem fogja elfoglalni a böngésző által biztosított összes helyet.

A drótváz elkészítéséhez először meg kell tennünk, hogy belépünk az Adobe Photoshop alkalmazásba, és belefoglaljuk azokat a méreteket, amelyekre az oldalunknak szüksége van. Ebben a példában oldalunk 1280 pixel széles lesz. A méretkérdés azonban változhat a végső rendeltetési helytől vagy az eszköztől függően, amelyen az oldalunkat reprodukálni szeretnénk. Kétségtelen, hogy ahhoz, hogy a webdesign működőképes és hatékony legyen, annak is kell lennie fogékony és alkalmazkodnia kell a piacon lévő összes eszközhöz. Ebben az esetben azonban azon fogunk dolgozni, hogy létrehozzunk egy prototípust, amelyet az asztali számítógépen reprodukálni fogunk. Ennek ellenére az érzékeny kérdést később tárgyaljuk, egyelőre itt van a képernyőn megjelenő dimenziók hierarchiája. Ne feledje, hogy ebben az esetben elkészítjük a céloldal elrendezését az Adobe Photoshop alkalmazásban, majd áttelepítjük a HTML5 és CSS3 fájlokra. Ennek a kis gyakorlatnak az a célja, hogy a Photoshopban létrehozott terveket felhasználható és interaktív webdizájnná alakítsa, amely reagál a felhasználó mozgására.

Mérések mobiltelefonokhoz

iPhone 4 és 4S: 320 x 480

iPhone 5 és 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Tablettamérések

Az összes iPad modell, valamint az iPad Mini: 1024 x 768

Galaxy Tab 2 és 3 (7.0 hüvelyk): 600 x 1024

Galaxy Tab 2 és 3 (10.1 hüvelyk): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Mérések asztali számítógépekhez

Kis képernyők (például netbookokban használják): 1024 x 600

Közepes képernyők: 1280 x 720/1280 x 800

Nagy képernyők: szélessége nagyobb, mint 1400 képpont, például 1400 x 900 vagy 1600 x 1200.

Az elemek terjesztésének és a szakaszok hozzárendelésének megkezdéséhez nagyon fontos, hogy az olvasható és dallamos befejezés érdekében figyelembe vesszük az arányokat. Alapvető fontosságú, hogy használja a szabályok és útmutatók opcióit, amelyeket a Nézet felső menüben talál. Az arányos és pontos munkavégzés érdekében a legjobb, ha százalékokból dolgozunk. Kattintson a nézet menüre, majd az «Új útmutató» lehetőségre a felosztás módjának kiválasztásához. Ebben az esetben négy függőleges felosztást készítünk 25% -on, és referenciaként vesszük őket, hogy képeinket a láblécbe, a logónk képét pedig a fejlécbe helyezzük.

Van egy kód, amely kijelöli azokat a területeket, amelyek elfoglalják a mi területünket modell és mindegyiküknek a funkciója. Például annak a területnek a megjelölésére, amelyet egy kép elfoglal, téglalapokat hozunk létre egyfajta kereszttel. Annak jelzésére, hogy videókat szeretnénk felvenni egy bizonyos területre, a lejátszási szimbólumot a tárolónkba helyezzük. Ebben az első példában csak képekkel fogunk dolgozni, a felső rögzítésen látható az a terület, amelyen logo weboldalunkról.

Ez lenne a végeredmény drótvázra. Mint láthatjuk, egy fejlécre oszlik, amely abból a képből áll, amelyben a logó megtalálható, és amely két fül, egy keresőmotor és a keresőmező négy gombja kíséretében a kezdőlapra mutató linkként szolgál. Ezenkívül, már a testen belül, felvettünk egy oldalsávot, amely elválasztó sávból áll, és egy sor kategóriát, amelyek kategorizálják a webhelyünkön megjelenő tartalom típusát. Egy másik szakasz számozással, amely tartalmazza a webhelyünkön létező bejegyzéseket, és végül egy listát a webhelyünk legreprezentatívabb metacímkéivel.

A tartalmi területen, amelyet egy szakasz fog meghatározni, amely tartalmazza önkezelhető tartalom, megtaláljuk cikkeink tartalmát. Ebben az esetben zsemlemorzsa vagy zsemlemorzsa (amely jelzi weboldalunk organikus felépítését, a cikk címsorát, a metaadatokat, egy bekezdést mint szövegtestet, amelyen belül egy kép szerepel.

Láblécként négy képet mellékeltünk, amelyek hivatkozásként szolgálnak oldalunk más területeihez. Ide sorolhatunk logókat vagy más érdekes részeket. Bár a valóságban ez a terület inkább hasonlóan fog viselkedni előjáró, mivel maga a lábléc egy kicsit lejjebb megy a használati irányelvekkel, a jogi nyilatkozatokkal és a szerzői jogokkal.

Miután meghatároztuk oldalunk alapszerkezetét vagy vázát, a következő szintre kell lépnünk. Ez a weboldalunk egyes területeinek megfelelő kialakításából fog állni. Más szavakkal, elkezdenénk e területek mindegyikét "kitölteni" azzal a tartalommal, amely végül bekerül a weboldalunkra. Javasoljuk, hogy mielőtt a drótvázon dolgoznánk, ne kezdjük el megtervezni ezeket az elemeket, mert nagyon valószínű, hogy ha ebben a sorrendben csináljuk, később módosítanunk kell az arányokat. Fennáll annak a veszélye, hogy torzítjuk képeinket és át kell dolgozni az egyes elemek kialakítását, amely időpazarlássá vagy rosszabb minőségű eredményt eredményez.

Ebben az esetben a weboldalunk kialakítása rendkívül egyszerű lesz. A anyagtervezési előírások, mivel a Google logót fogjuk használni ennek a gyakorlatnak a példázására. Tisztáznom kell, hogy a bemutató célja a műszaki ismeretek bemutatása, ezért az esztétikai eredmény ebben az esetben nem releváns. Amint láthatja, apránként megtöltjük a teret mindazokkal a területekkel, amelyeket korábban a sémánkban meghatároztunk. Azonban az utolsó pillanatban egy apró módosítást hajtottunk végre. Mint észrevette, jelentősen csökkentettük logónk méretét, és az alsó fejléc területére elválasztó vonalat illesztettünk, amely tökéletesen összekapcsolódik a felső menüvel. Ebben az esetben egy forrásbank gombjait és anyagait használtuk. Tervezőként magunk is megtervezhetjük őket (főleg ez az opció ajánlott, ha azt szeretnénk, hogy a márkanév vagy a logó által bemutatott tonikhoz nagyon hasonló legyen).

Fontos, hogy ne feledjük, hogy ennek a példának a bemutatásához két különböző szinten fogunk dolgozni. Egyrészt dolgozni fogunk a tárgyakon, másrészt a weboldal megjelenésén. Vagyis egyrészt weboldalunk csontvázában, másrészt pedig mindenütt lebegő elemek, amelyeket ez a csontváz támogatni fog. Észre fogja venni, hogy vannak olyan területek, amelyek egyáltalán nem fognak lebegni, mint például az a terület, amelyet az oldalsávunk elfoglal, az előtalp vagy az elválasztó sáv, amely elválasztja a fejlécet a testtől.

Az 1, 2, 3 és 4 szerkezetek a háttér a weboldalunkról, így valójában nem lesz szükségünk az Adobe Photoshop alkalmazásból történő exportálásra, bár meg tudjuk csinálni, de nem szükséges. Amikor arra kerül sor Lapos színek (A lapos kialakítás és az anyagtervezés egyik alapvető jellemzője, kódon keresztül tökéletesen alkalmazhatók CSS stíluslap segítségével). A többi elemet azonban el kell menteni a HTML-kódba történő későbbi beillesztés céljából. Ebben a kis diagramban az oldal hátteréhez tartozó területeket is reprodukáltuk, hogy világos elképzelésünk legyen arról, mi lesz a webhelyünk végső megjelenése.

Amint rá fogsz jönni, a séma létrehozásának az Adobe Photoshop alkalmazásában az a célja, hogy megkapja az egyes elemek valós dimenzióját, és tisztázza az egyes elemek elrendezését és felépítését. Természetesen a szöveges tartalomnak nincs helye a folyamat ezen szakaszában, mivel annak lennie kell kódszerkesztőnktől kapta. Arra is ki kell mutatnunk, hogy ebben a gyakorlatban gombokkal és statikus elemekkel fogunk dolgozni, bár általában ezeket általában olyan keretrendszerekből alkalmazzák, mint a Bootstrap, vagy közvetlenül a Jquery-ből.

Miután létrehoztuk a weboldalunkat alkotó elemeket, itt az ideje elkezdeni őket exportálni és menteni a HTML projekt mappában található képek mappába. Fontos, hogy megszokja, hogy drótvázáról exportál, mert nagyon valószínű, hogy módosítania kell néhány eredeti elemet a csontváz konfigurációja alapján. (Például ebben az esetben megváltoztattuk az eredeti gombok, a logó és a kompozíció részét képező elemek nagy részét, beleértve az alsó területen lévő képeket is).

Fontos, hogy megtanuljunk minden elemet önállóan menteni, hogy azokat a meglévő méretekkel és pontosan mentsük el. Bármilyen hiba, bármennyire is minimális, befolyásolhatja a weboldal összes elemét. Ne feledje, hogy kapcsolatban állnak egymással és tökéletes dimenziókkal kell rendelkezniük, hogy HTML-ből be lehessen őket írni a végső webbe. Ebben az esetben önállóan kell kivágnunk és mentenünk a következő elemeket:

• Logónk.
• Minden gomb (azok, amelyek a főmenü részét képezik, és a többi).
• Az összes kép.

Sokféleképpen megtehetjük, és talán talál egy alternatívát, amely hatékonyabb az Ön számára. De ha először készít ilyen típusú elrendezést, javasoljuk, hogy kövesse az alábbi tippeket.

• Először el kell mennie abba a mappába, ahol a drótkeretünket tartalmazó PSD fájl található, és annyiszor másolja le, ahányszor az exportálni kívánt elemeket. Ebben az esetben 12 példányt hoztunk létre az eredetiből, és elmentettük őket ugyanabba a mappába. Ezután átnevezi az összes példányt, és mindegyikhez hozzárendeli a benne található elem nevét. 12 példányunk átnevezésre kerül: Logó, 1. menü gomb, 2. menü gomb, keresősáv, 1. felső gomb, 2. felső gomb, 3. felső és 4. felső gomb. A fennmaradó négyet átnevezzük: 1. kép, 2. kép, 3. kép és 4. kép.
• Ha ez megtörtént, megnyitjuk a fájlt a logó nevével.
• Megyünk a réteg palettánkra, és megkeresjük a logót tartalmazó réteget. Majd megnyomjuk Ctrl / Cmd miközben rákattintunk az említett réteg miniatűrjére. Ily módon a logó automatikusan kiválasztásra kerül.
• A következő lépés az lesz, hogy elmondjuk a Photoshopnak, hogy azt akarjuk, hogy pontosan vágja ki ezt a logót. Ehhez csak a kulcsból vagy a parancsból kell meghívnunk a levágóeszközt C.
• Miután ezt megtettük, az Enter gombra kattintva megerősítjük a vágást.
• Most a Fájl legfelső menüjébe lépünk, hogy a Mentés módra kattintsunk. Kiválasztjuk a nevet, amely ebben az esetben «Logo» lesz, és kijelölünk egy formátumot PNG, mert a fájl a legjobb minőséget kínálja az interneten.
• Megismételjük a folyamatot az összes példánnyal és az elemekkel együtt. Ha levágta, ellenőrizze, hogy a paletta többi rétege megegyezik-e láthatatlan vagy megszüntetik. Így minden elemet átlátszó háttérrel menthetünk.

Ebben az esetben a 2. menü gombunkat választjuk ki a réteg palettáról. A képernyőképen láthatja, hogy a gombunk határai hogyan lettek automatikusan kiválasztva.

Miután kiválasztottuk a vágóeszközt a C billentyűből, a vásznunk csak a gombunk méreteire csökken.

Itt az ideje, hogy egyesével elmentse azokat az elemeket, amelyek a weboldalunk részét képezik, és felveszi azokat a képek mappába, és amelyeket később felhasználunk. Hívásokat kezdeményezünk a kódunkból, és folytatjuk az elrendezést, de ezentúl a kódszerkesztőnktől.

Bár számos eszköz és alternatíva van egy weboldal elrendezéséhez, amelyek teljesen intuitívvé teszik a folyamatot, nagyon fontos, hogy megtanuljuk ezt egy kézikönyv. Ily módon megtudhatjuk, mi az alapja a weboldal tervezésének.

Összegzés:

1. Tervezze meg a struktúra különös figyelmet fordítva a továbbítani kívánt tartalomra és azokra a szakaszokra, amelyeket a webhelyén létre kell hoznia.
2. Dolgozzon a csontvázán vagy drótvázra az Adobe Photoshop alkalmazásból, megjelölve, hogy a tartalom mely területeken jelenik meg és milyen formátumban.
3. A korábban kifejlesztett intézkedésekre és márkákra támaszkodva kezdje el tervezés a szövedék felülete. Minden elemet tartalmaz (úszó és rögzített egyaránt). Ne felejtse el feltüntetni a megfelelő gombokat, logót és képeket.
4. Vágja ki egyenként az összes elemet, amely a projekt része. Győződjön meg arról, hogy megfelelő intézkedésekkel rendelkeznek, és később nem okoznak problémákat.
5. Mentse el az összes elemet formátumban PNG a projekt mappában lévő képek mappában HTML.
6. Ne feledje, hogy ennek a projektnek kimenete lesz a webablakba, ezért nagyon fontos, hogy vegye figyelembe a színmódot és alkalmazza RGB.
7. Merítsen ihletet más weboldalakból, amelyeket csodál, mielőtt munkába áll, és ne felejtse el megbeszélni ezt a csapat tagjaival. Abban az esetben, ha ez egy ügyfél számára készült projekt, próbáljon meg ragaszkodni a eligazítás amennyire csak lehetséges.