webdesign tanfolyam - mintalecke 1. - blogdesign tervezés photoshopban

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

HTMLBlog design Azt mondják az okosak, hogy ma nálunk blogolásból nem lehet megélni! Ezt megcáfolja az index rengeteg tematikus bérblogja. Sok bloggert ismerek, aki bár a csekket nem a blog által keresett pénzből fizeti be, de egyéb extra juttatásokat kap telefonok, kütyük stb.Neked nem kell blogot írnod, de kiszolgálhatod a rengeteg blogger egyedi blogsablon igényét, vagy ha írsz, készíthetsz magadnak!

Gridek Ma egy új fogalommal is megismerkedünk. Ez a grid alapú tervezés. Sokszor kérdezik tőlem, mitől lesz egységes, arányos, vagy éppen átlátható egy honlap. A grid egy háló, amely segítségével az elemek számolgatás, és elcsúszás nélkül tervezhetőek.Alapesetben 1024x768-as felbontásra tervezünk még mindig. Hogy mire tervezzünk azt a weboldalak statisztikai adatai szolgáltatják. Vannak általánosan elfogadott mérések, pl. statisztikai cégek felmérései, illetve van az adott oldal egyedi statisztikája, amelyben jól látszik a látogatók átlagos monitorfelbontása.

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!


Ez az adott témától, és a célcsoporttól nagyban függ - más felbontással netezik a kicsit már rosszabbul látó nagyi, az egyébként az unokák által levedlett monitoron - és mással folyton utazó, netbookkal rohangáló menedzser.Vannak oldalak, ahol már számottevő a mobil eszközökről érkező látogatások száma, ezért egy designtervezés során jó ezt is figyelembe venni, illetve elkészíteni egy esetlegesen fapadosabb, de használhatóbb mobil verziót is.

Ezeket a statisztikai adatokat a Google ingyenes statisztikai szolgáltatása, a Google Analytics nyújtja - www.google.com/analytics Vissza a gridekhez. Az 1024 széles oldalhoz optimális a 960 px széles tervezés, amely számításba vesz böngésző sávot, esetlegesen más olyan tényezőt, amely a hasznos területet csökkenti, és minden szempontból élvezhetővé teszi.


http://www.google.com/analytics








Ilyen keretrendszer a 960 gs, azaz 960 grid system. Ez egy előre felosztott tervezési képernyőt takar, ahol ez a 960px hasznos terület egyforma sávokkal van elválaszva. Ezeknek a sávoknak ismerjük a szélességét, a sávok közötti távolságot, így egységesen tudunk hozzájuk igazítani bármilyen tartalmat.12 ill. 16, 24 oszlopra osztották fel ezt a 960 px-t. Hogy melyiket használjuk, az az adott munkától, és elrendezéstől függ, de az oszlopok 60 ill. 40 px szélesek, egyenként 10 px eltartással.Hogy miről is beszélek, azt inkább nézd meg, és megérted:http://960.gs/demo.html A 960 gs segít abban, hogy a tartalmakat rendezett formában tudd megjeleníteni, a tartalom ne csúszkáljon ide oda, és az előre kiszámolt oszlop méretek okán nem fordulhat elő, hogy összevissza méretek jönnek létre pl. 326 px széles doboz, vagy 611 px széles tartalom rész.Ez mindenki munkáját megkönnyíti, hisz átláthatóvá teszi a tervezést, és az elhelyezett tartalmakat egyaránt. A végeredmény is kellemes a szemnek - a http://960.gs/ oldalon található designok mind erre a rendszerre lettek tervezve.


http://960.gs/demo.html







http://960.gs/

http://960.gs/

http://960.gs/

http://960.gs/


Egytől egyig kellemes, áttekinthető és profi megjelenést nyújtanak pusztán attól hogy a rajtuk lévő tartalom rendezett, mert az emberi agy a szimmetriára törekszik, az ilyen megjelenés megnyugvást, biztonságérzetet, bizalmat ad.



Az oldalon sok érdekességet találsz a grid rendszerről (nem ez az egyetlen), de minket most az a letölthető csomag érdekel, ami ma használni fogsz a tervezéshez.A http://960.gs oldalon bal oldalt, a logó mellett találsz egy Download linket, amely a nathansmith-960-Grid-System-826cbc2.zip fájlt rejti. Töltsd le kérlek! A csomagban is sok mappa van, nézegesd meg őket. Amire most szükséged lesz, azt a templates/photoshop mappában találod.

Ha rákattintasz a 960_grid_16_col.psd-re, akkor megnyílik a Photoshopban a 16 oszlopos grid sablon - ami szép rózsaszín oszlopokból, és kék segédvonalakból áll.

A hasznos terület ugye 940px+10+10 a széleken. Az oszlopok 40 px szélesek. Itt megnézheted ismét, hogyan alakulnak a méretek: http://960.gs/demo.html


http://960.gs

http://960.gs

http://960.gs

http://github.com/nathansmith/960-Grid-System/zipball/master









Egy rendkívül egyszerű blogdesignt fogunk elkészíteni.A blog egy fejlécből, egy tartalmi részből, és egy oldalsó menüsávból - un. sidebarból fog állni.

Ebből rögtön a boxok méretei is megvannak - 700 széles a tartalmi rész, 220 széles a sidebar, a menü meg ugye 940 px - ez az infó jól jön majd a kódolásnál.De előbb jöjjön a design. Ha a rózsaszín csíkok zavarnak, a Layer palettán kapcsold ki a szem ikont, így csak a segédvonalak maradnak, ami ugyanúgy elegendő. A View menüben találsz egy Snap, illetve Snap to menüpontot. Ez ha be van kapcsolva, pl. Snap to Guides - akkor a grafikák automatikusan a segédvonalakhoz igazodnak majd. Ha ezt valamiért mégsem akarod, akkor itt tudod ki és be kapcsolni.



A fenti vonalzóból húzz két vízszintes segédvonalat, hogy kijelöld a menü helyét. Egy egyszerű, pár menüpontos vízszintes menüt tervezz az alábbiakkal: Főoldal, Hírek, Kategóriák, Galéria, Kapcsolat Egyszóval egy átlagos blogmenüt. A menüpontokhoz a websafe Trebuchet MS betűtípust használtam, 18 px méretben, a szín pedig #660066. A menüpontokat egymáshoz úgy tudod igazítani, ha CTRL gomb lenyomásával kijelölöd mindet a Layer palettán, és a felső sorban megjelenő eszközökkel pozicionálod őket.



Ideje egy mentést is eszközölni!Vigyázz, ne a 960gs mintafájljára ments rá, mentsd el a munkád - Save as - blogdesign.psd néven! A következő elem legyen a sidebar megrajzolása a lekerekített téglalap eszközzel - Rounded Rectangle Tool, amelynek a lekerekítési értékét, azaz mennyire kerekek legyenek a sarkok - a felső menüben a Radius érték adja meg. Legyen a Radius 20 px.Ezzel rajzold meg a 4 oszlopot kitöltő sidebart. Édesmindegy milyen színnel rajzolod meg, a következő lépés úgyis az lesz, hogy a rétegen állva a Blending Optionst piszkáljuk egy kicsit, a Color Overlay-el egy másik színt adva neki: #996699.



Ugyanezzel az eszközzel a blogbejegyzések dátumát jelző kis grafikát is megtervezzük, a Radius itt 10, és a szín is egy másik lila - # 660066, amin jól fognak mutatni a fehér számok.Itt is a Trebuchet MS betűtípust használtam - a szám 40px, a hónap rövidítés 24 px, és mindkét esetben fehér. Az ilyen tervezésnél figyelj arra, hogy a kövér számok is beleférjenek - pl. a 30-assal és a 10-essel is ugyanolyan jól működjön.



Általános szabály, hogy a tervezésnél mindig a vélhetően leghosszabb, és legrövidebb felirattal is ki kell próbálni a megjelenést. Ez főleg akkor fontos, ha az oldal többnyelvű, és mondjuk németül hosszabb szó ugyanaz a menüpont.Ennek fényében válaszd ki a betűtípust és méreteket. Nyisd meg a lipsum-com-ot, és legyen a címsor egy csík Lorem Ipsum - Trebuchet MS 22 px.Készülj fel arra, hogy valaki jó hosszú címet fog adni a postjainak. A postok szövege pedig Arial, 12px és #333333 - sötétszürke. Figyelj az igazításokra! Már kezd egészen blogformája lenni.



Mi van még egy blogon? Hát kommentek, meg persze tovább lapozás. Készíts ismét egy lekerekített téglalapot a postok alá, a Radius marad 10, és legyen világos szürke.Mindkét post alatt helyezd el őket a komment és a tovább menüpontok kijelzésével.



A tartalmi résszel meg is vagyunk. Jöhet a sidebar, ahová tervezzünk egy kereső ablakot, néhány gombot, és pár social media ikont, ahol még követni lehet a blog gazdáját. A kereső mezőhöz ismét a lekerekített téglalapot tudod használni, maradhat 10-es a Radius.Keresés gomb helyett egy kis nagyító ikon is megteszi, ami jellemzően a keresés szimbóluma az interneten.Kereshetsz akár ikont is hozzá, de két mozdulattal rajzolhatsz is egyet. A kör alakzatot válaszd, és a Shift lenyomása mellett rajzolj a keresőmezőbe egy kis szabályos kört, ez lesz a nagyító feje. Most még egyszínű, de a Blending Options palettán a már ismert módon tudsz neki egy körvonalat is adni. Én 2 px-es körvonalat adtam a Stroke segítségével, a menüben használt #660066 színnel.



Szárat pedig a Line Tool eszközzel tudsz neki rajzolni - az a vonal eszköz, ugyanott ahol a kör, illetve a lekerekített téglalap is található.



Ha úgy véled ez nem elég, akkor a mezőbe halványan írd oda a Keresés, vagy a Keresett kifejezés szavakat, hogy egyértelmű legyen, mire való ez a mező. Most készítsünk két egyforma gombot, amik a Rólam, ill. Sajtó feliratokat tartalmazzák.A keresőmező jó is lesz gomb alapnak, készíts belőle egy másolatot, majd a Blending Options fülön adj neki keretet, árnyékot, színezés és/vagy átmenetet, hogy gomb formája legyen. Én a Drop Shadow 90 fokos értéket használtam, egy sötétszürke #333333 árnyékot vetve, és 2 px körvonalat. A lekerekített formákhoz kerestem egy hasonló social media ikonszettet, ami a designhoz hasonlatosan nem csillogó, hanem jól illeszkedik bele.http://designmodo.com/designmodo-free-social-bookmarks-networking-icons-set/


http://designmodo.com/designmodo-free-social-bookmarks-networking-icons-set/





















Nagyon jók vagyunk, és már majdnem készen! Már csak a fejlécből a logó, vagy annak megfelelő felirat hiányzik, illetve valami pityputy, amivel kicsit feldobjuk ezt a végtelenül egyszerű blogdesignt. A Blogdizájn felirat a Bello Pro betűtípussal készült, a virágszerű alakzatok pedig a Custom Shape Tool eszközzel, ezek a Photoshopban alapból benne vannak - a Shape fül alatt, vagy a Load-al behívhatóak. Ezért eléggé elhasználtak is, sok helyen feltűnnek, de jól illusztrálható velük, hogy egy kis egyszerű alakzattal, pár színnel gyors és látványos fejlécet lehet készíteni.Az egy-egy virág elmosását a Filter > Blur More, azaz több elmosás menüponttal lehet elkészíteni.



Ne felejts el közben menteni időnként, mert úgy jársz mint én az előbb, aki figyelmetlenségből Cancelt nyomtam a végén, és a menü után mentettem utoljára, így kezdhettem előlről az egészet, még jó, hogy leírtam :D Nem árulok el titkot azzal, hogy a folytatás mi lesz - elkészítjük a HTML verziót a terv alapján! Addig kérlek Photoshopban a leírtak alapján próbáld rekonstruálni!Valamint a figyelmedbe ajánlok pár linket és egyéb grid rendszer tanulmányozásra!



http://designshack.co.uk/articles/css/free-960-gs-css-photography-template-and-tutorial/http://sixrevisions.com/web_design/the-960-grid-system-made-easy/http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/http://grid.mindplay.dk/http://grid-based.com/http://www.noupe.com/css/5-popular-css-frameworks-tutorials-tools-for-getting-started.htmlhttp://www.facebook.com/note.php?note_id=419812175774&comments&ref=mfhttp://www.legittutorials.com/using-setting-960gs-photoshop/http://www.designbygrid.com/http://www.tutorial.hu/css-framework-wordpress-theme-gyujtemeny-css-okossagok/


http://designshack.co.uk/articles/css/free-960-gs-css-photography-template-and-tutorial/


























http://sixrevisions.com/web_design/the-960-grid-system-made-easy/




















http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/






























http://grid.mindplay.dk/








http://grid-based.com/








http://www.noupe.com/css/5-popular-css-frameworks-tutorials-tools-for-getting-started.html



























http://www.facebook.com/note.php?note_id=419812175774&comments&ref=mf





















http://www.legittutorials.com/using-setting-960gs-photoshop/
















http://www.designbygrid.com/








http://www.tutorial.hu/css-framework-wordpress-theme-gyujtemeny-css-okossagok/






















webdesign tanfolyam - mintalecke 1. - blogdesign tervezés photoshopban

Documents