[Layout] Zaczynamy !!!

Dlaczego layout? Po co? W jakim celu? W jakim programie tworzyć layout?

Layout czyli graficzne przedstwaienie strony. Od tego właśnie najlepiej zacząć tworząc swoją strone internetową.

Tworząc go odrazu nakreślimy elementy swojej strony takie jak: menu, logo czy stopka. Niezależnie od tego jakim jesteś grafikiem tworząc strone musisz w mniejszym lub w większym stopniu ją opanować. Zaraz ktoś odezwie się, że do grafiki trzeba mieć talent. Wcale nie! Jedni mają większe zdolności a inni poprostu więcej czasu muszą poświęcic przy jej robieniu. Gdy stworzysz layout będziesz sprawniej tworzył inne elementy strony bo bedziesz juz mial wzorzec czyli podstawe tworzenia. Oczywiście nie mam tu na myśli kompletnej podstawy bez kodu np: PHP.

Dobrze jest przed samym zaczęciem tworzenia stron "pozwiedzać" inne strony internetowe i nie chodzi tu o to żebyś "skopiował"' piksel w piksel wygląd z niej. Chodzi o to żeby wpadł Ci do głowy jakis pomysł, natchnienie na własną stronę.

Z czego korzystać przy tworzeniu layoutu? Standardem jest Photoshop czasami pojawia się GIMP ale ogólnie stworzyć layout można w każdym programie graficznym. Jednak Photoshop daje spore możliwości i bardzo ułatwia prace.

Przykłady na tej stronie są właśnie tworzone m.in. w Photoshopie i są jedynie materiałami pomocniczymi, ktore w jakimś stopniu mają za zadanie ułatwić stworzenie własnego layoutu.

Zacznijmy już. Stwórzmy nowy dokument .PSD o width 900px i height 1100px.

Naszym celem bedzie zrobienie takiego layoutu (Omisho#2):

Ten layout jest zrobiony bez loga (top'u) strony, które trzeba samemu zrobić. Jest bardzo prosty bo składa sie jedynie z #menu, i #tresci.

Pierwsze co musimy zrobić to nadać odrazu tło czarne naszemu dokumentowi. Po tak stworzonym podkładzie możemy zająć się #menu i #trescią.

Określamy szerokść #menu równą 150 px a #treści 500px. Tworzymy więc #menu o takiej szerokość i wysokosci a następnie zamalowywujemy go kolorem ciemno szarym.

Stworzony kwadrat kopiujemy jeszcze dwa razy. Pierwszą kopie obracamy lekko w lewo i nadajemy opacity na 70%. Drugą kopie obracamy nieznacznie bardziej w lewo w stosunku do pierwszej kopii i nadajemy opacity na 50%. Całość wygląda tak:

Nadajemy przykładową nazwe menu "Lorem" Trebuchet MS koloru białego i wielości 22. Niżej podpis menu o wielkosci 16. Wewntąrz menu każdy odośnik będzie oznaczony kawdratem białym 13 px na 13px. Robimy kopie tego kwadratu nadajemy jej opacity na 70%.

i obracamy lekko w lewo. Menu gotowe wygląda tak:

Czas na #tresc. Jest stworzona dokładnie tak samo jak menu tylko w wielkości 500px na 600px.

Podobnie jak w menu dla odróżnienia kolejnych elementów należy stworzyć/skopiować taki sam kwadrat wraz z jego kopią i powiekszyć nieznacznie. Efekt taki:

Tak zrobiony laout należy zapisać do .png i pociąć do xHTML i CSS. To był krótki przykład jedynie. Mam nadzieje, że pozwolił wam na poznanie w mniejszym lub większym stopniu procesu tworzenia layoutu.

Autor: Łukasz Lewak (LiON_87)