Tworzenie layoutów, czyli początki webdesignu

[Syrians]

Hmm...cześć. Jak nazwa tematu wskazuje mam do Was, znawców prośbę, pytanie. Jakoś tak Mnie natchnęło, żeby spróbować, a co tam. Przechodząc więc do sedna, co muszę wiedzieć na początek jeśli chciałbym zacząć tworzyć layouty. Chcę zacząć od layoutów, bo sygnaturki czy avatary są mi zbędne. Mam teraz garstkę pytań. Od czego mam zacząć, jak mam zacząć, jakie podstawy powinienem znać, żeby w ogóle zacząć zabawę z grafiką...na razie tyle mi przyszło do głowy. Teraz tak pod koniec, do layoutów lepiej gdybym wykorzystywał Photoshopa? Jeśli tak, to którą wersję, która by najlepsza była, zawczasu chcę wiedzieć, żeby później nie żałować...

Jeśli ktoś się bawi w layouty....to jest to takie trudne, na jakie mi się wydaje?

 

Tłumaczcie mi to tak, jak dziecku, bo zielony w tym temacie jestem praktycznie

 

 

Z góóóóóóóóóry wszystkim będę wdzięczny na odpowiedzi, mam nadzieję, że rozwiejecie me wątpliwości i otrzymam od Was pomocną dłoń

[Silenzio]

No to może ja cię oświecę.

Tworzenie layoutu składa się, powiedzmy, z 4 kroków:

1. Projekt

Tutaj na kartce A4 projektujesz rozmieszczenie poszczególnych boxów. Ma to na celu ogólne zobrazowanie zamysłu- taki szkic.

2.Tworzenie Pliku *.psd

Tutaj Projekt przekładasz na grafikę komputerową i dopracowujesz do perfekcji (ps. szerokość to zwykle 1008px.)

3. Cięcie Projektu

Tutaj używając narzędzi odcięcia tworzysz siatkę boxów i zapisujesz je do plików z rozszerzeniem jakiego potrzebujesz- np. *.png

4. Zakodowanie Strony

Jak skończysz pkt.1-3, to zajmujesz się CSS'em i HTML'em.

 

Ogólnie przydadzą ci się takie linki:

 

Kurs HTML/CSS- bardzo dobra strona do nauki:

http://www.kurshtml.edu.pl/

 

Tworzenie Layoutu- przejrzysty poradnik, krok po kroku( Konkurencyjne forum, więc daję w QUOTE):

1. Najpierw zapoznaj się z tematem. Dowiedz się jak najwięcej, czego on dotyczy, zorientuj się z czym się kojarzy, byś wiedział czego szukać.

Przykładowo strony o samochodach [raczej - bo to też po części zależy od zleceniodawcy, jeśli mówimy o komercyjnych projektach] nie zrobisz cukierkowo różowej.

 

2. Zrób sobie spis WSZYSTKICH elementów, które ZAWSZE będą na stronie. Przykładowo takim elementem jest menu, często też wyszukiwarka. Będziesz wiedzieć dla jakich elementów musisz znaleźć stałe miejsce.

 

3. Przeglądnij strony, które mogą Cię zainspirować, pomóc w wymyśleniu układu. Pamiętaj, że układ musi być przejrzysty, uporządkowany, by potencjalny internauta mógł wszystko znaleźć od razu. Bardzo ważnym elementem na stronie jest menu. To kluczowa część, musi być wyróżniające się i łatwe w obsłudze. Co do inspiracji, to tu masz parę przydatnych stron:

Web Templates | Flash Templates | Template Monster

Browsing Web Interfaces on deviantART

CSSelite.com - CSS Gallery Showcasing the best in CSS web design and development.

digart.pl | projekty | strony www

Browse Art, Photography, Web Design, Flash, Skins, Themes, Logos, Icons ,Fonts, Literature, and Artisan Crafts on Artician Design

Web Design Inspiration - Inspirujące strony www - web.vivee.info

LogoPond - Identity Inspiration - - logo/typy na strony

 

4. Naszkicuj na kartce parę wersji układu. Z każdą następną zacznie Ci się rozjaśniać. Pamiętaj o rozsądnym ustawieniu elementów. Tu dochodzą też kwestie marketingowe, jak i psychologiczne - jakie elementy powinny być najbardziej widoczne i zwracać uwagę? Które muszą być, ale jak najmniej widoczne? Zastanów się nad tym przy rozmieszczaniu.

5. Znajdź odpowiednią kolorystykę pasującą do tematu. Proponuję stosować się do niepisanej zasady grafików, a mianowicie: dwa kolory podstawowe + jeden uzupełniający. Oczywiście nie trzeba sztywno robić wg schematu, wiadomo, że w przyszłości bez problemu możemy więcej używać, jednakże początkującym dla dobrego efektu zaleca się tyle - opanować dobre zestawienie ze sobą tych trzech kolorów. Ważne są również stocki. Oto pomoce:

Kolory:

ColorSchemer Gallery | Website-ready color schemes for ColorSchemer

ColorToy 2.0 - The Flash Color Scheme Generator

kuler

Color Palette Generator - dopasowuje kolory do stocka

Color Scheme Designer 3

COLOURlovers :: Color Trends + Palettes

ColorToy 2.0 - The Flash Color Scheme Generator

Stocki:

http://sxc.hu

Stock Photography: Search Royalty Free Images & Photos

Zanim kupisz zdjęcie z iStock to możecie je wykorzystać w pracy ze znakiem wodnym, jak robi większość osób. Tu macie link do strony, dzięki której powiększycie zdjęcie:

iStockZOOM - www.kanjar.pl - BETA2.1

 

6. Zacznij tworzyć szablon w programie graficznym (Photoshop, Gimp - nie będę omawiała samej procedury tworzenia). Pamiętaj o tym, żeby robić szablony o szerokości 1008px (optymalnie 1000px), bo obecnie większość monitorów na rynku ma właśnie taką (po odjęciu scrollbar'a). Gdy będziesz robić mniejszą, to dla większości świata Twoja strona będzie nieczytelna, mała i zgubi się w przeglądarce.

Na początku zaprojektuj podstawowe ułożenie, najważniejsze efekty, typografia - kombinuj z nią długo, by dobrać jak najlepszą czcionkę. Pamiętaj o tym, by nie wygładzać czcionek, które będą pisane ręcznie (głównie w contencie). Ważny jest również odpowiedni kontrast. Tutaj wiele początkujących popełnia podstawowe błędy, np. na białej stronie używają czarnych czcionek, co bardzo męczy wzrok. Lepiej użyć ciemnoszarego fonta, który niewiele na pierwszy rzut oka będzie się różnił, a za to nie będzie męczył wzroku. Zwróćmy uwagę też na odpowiedni rozmiar i interlinię oraz krój - powinien być taki, żeby każdy potencjalny internauta miał go na swoim komputerze. Najpopularniejsze to Arial, Verdana i Tahoma. Optymalny rozmiar czcionek jest w granicach 10-12px, a interlinii około 14px.

To takie podstawy. Więcej o typografii znajdziecie tu:

Typografia w projektach stron WWW | Ludwik.org - bardzo ciekawy artykuł, który w przyjazny sposób opowiada o typografii

Rodzaje fontów

 

7. Gdy już masz całość teraz zajmij się dodawaniem efektów. Ten schemat proponuję dla początkujących, by nabrać wyczucia, bo wielu przesadza z efektami od razu do każdego dodanego elementu ładując ile się da. Dlatego robiąc najpierw szkielet, a później efekty będziemy mieli wgląd w wygląd całej pracy.

 

8. Gdy myślisz, że skończyłeś, to zobacz na swoją stronę. Co Cię nie zadowala? Jak powinno być? Zmieniaj. Później pokaż innym do oceny, może ktoś zwróci Ci uwagę na jakiś nieczytelny element, może Ci podpowie co u niego źle wygląda.

[Syrians]

Dobrze, więc dziękuję za oświecenie. O HTML i CSS mi nie chodzi, bo znam, głównie mi się tutaj o tą grafikę rozchodzi. Ale pewnie i tak powinienem znać jakieś podstawy w programie graficznym.

Co do cięcia etc, zrobię to w GIMP'ie czy PS byłby lepszy?

[Marcid]

Co do cięcia etc, zrobię to w GIMP'ie czy PS byłby lepszy?

 

Lepszy Ps

 

A tutaj masz tutka jak ciąć layout:

http://www.mpcforum.pl/topic/177877-tutps-ciecie-layoutu-oraz-jego-zapis/

[Syrians]

Dobra, dzięki Marcid. Wersje PS'a dużo się między sobą różnią? Którą najlepiej wybrać?

[Baksiu]

Najlepiej oczywiście CS5 - a jak to w świecie komputerów bywa - co najlepsze to najdroższe. Różnią się kilkoma funkcjami, w CS5 z takich większych zmian doszła możliwość 3D (szczerze mówiąc nie miałem okazji jeszcze jej poznac). Imo CS5 jest oczywiście bardziej przejrzysty i na pewno łatwiej będzie go ogarnąć.

[Syrians]

Dobra, w takim razie dziękuję za informacje. Wracając jeszcze do początku...od czego tak szczerze powinienem zacząć pracować? Co wykonywać na początku?