[Layouty] Robimy nasz pierwszy layout :) - tutorial

[KlaxoN 0]

Ostatnio zauważyłem że sie zrobił jakiś zastój w dziale o grafice. Sam wziąłem się za wykonanie mojego layota w całości w photoshopie i według tutoriala.

Mam troche doświadczenia związanego z robieniem stron, ale nigdy w aż takim stopniu zwiazanym z grafiką i photoshopem. Ale i tak zdecydowałem się przetłumaczyć ten tutorial i dodać do niego troche od siebie, ale prosze bardziej zaawansowanych userów w tej dziedzinie o pomoc i rady dla userów podejmujących się zrobienia tego layouta.

 

Oto link do oryginalnej wersji tutoriala (eng.): Oryginalna wersja tutoriala

 

A teraz rezultaty:

Ten uzyskany przez autora tutka - Rezultat uzyskany przez autora oryginalnej wersji tutka

A ten uzyskay przezmnie - Mój rezultat uzyskany dzięki temu tutorialowi

 

 

Tutorial ten pokazuje jak łatwo i szybko zrobić prostego layota. Wybrałem właśnie ten tut z obawy o sygnaturkowców, żeby stopniowo ich przyzwyczajać do coraz większych projektów.

A co do mojego tłumaczenia to wstawione tu obrazki będa pochodziły bezpośrednio z tutoriala w wersji oryginalnej.

 

----------------------No to zaczynamy-------------------------

 

Krok 1.

Otwieramy nowy dokument o rozmiarach 770 X 500 pikseli, z tłem wypełnionym na biało.

 

Krok 2.

Tworzymy nową warstwe i włączamy narzędzie pencil tool (ołówek), ustawiamy jego rozmiar na 1 piksel.

 

Teraz uzywając ołówka, rysujemy cztery linie poziome na górze strony.

 

Używamy takich kolorów dla każdej linii:

1 - #E4E3D6 (góra)

2 - #D2CFC0

3 - #A3A090

4 - #8F8D84 (dół)

 

Krok 3.

Robimy nowa warstwe. Używając rectangular marquee tool (narzedzie do zaznaczanie prostokatow), robimy zaznaczanie miej wiecej takie jak na obrazku (podlozny prostokat przylegajacy do krancow dokumentu).

 

 

Wypelniamy zaznaczenie na czarno

Klikamy dwa razy na zrobionej właśnie warstwie (w oknie warstw), żeby otworzyc blending options.

Włączamy opcje gradient overlay i stroke. Ustawiamy je tak jak na obrazku:

 

Gradient overlay:

Otwieramy opcje zawieraje ten pasek, wchodząc w blending options -> Gradient Overlay -> Klikamy na rysunek przedstawiajacy nasz gradient (ten z otwierana lista).

 

Stroke:

 

Rezultat:

 

Krok 4.

Robimy ponownie nową warstwe uzywając rectangular marquee tool, robimy zaznaczenia jak na obrazku, pamietajac ze gorna czesc przylega do wczesniej wykonanego paska.

 

Wypełniamy zaznaczenie kolorem: #375A80 używając wiaderka z farba i przyciskamy CTRL+D aby odznaczyć zaznaczenie (?) .

 

Wchodzimy w blending options tak samo jak poprzednio. Tym razem włączamy tylko opcje gradient overlay z ustawieniami jak na obrazku:

 

Rezultat:

 

Krok 5.

Robimy nową warstwe. Uzywamy znowu rectangular marquee tool i tym razem zaznaczamy wiekszy prostokat, przylegajacy do paska zrobionego przed chwila, bedzie w nim znajdowała się główna treść strony.

 

 

Wypełniamy zaznaczenie na biało (#FFFFFF) i odznaczamy to co zaznaczyliśmy klikają CTRL+D.

Wchodzimy w blending options, tym razem używając takich ustawień w gradient overlay:

Rezultat:

 

Krok 6.

Teraz ustawiamy uzywany kolor na #C8CED8 i włączamy pencil tool(ołówek) i ustawiamy jego rozmiar na 2.

 

Teraz rysujemy linie o wysokosci 2 pikseli na dole, przylegającą do prostokąta który zrobiliśmy przed chwilą w kroku 5.

 

 

Krok 7.

Następnie ustawiamy kolor na biały i uzywając pencil tool (ołówka) ustawionego na rozmiar 1 piksela, rysujemy nastepna linie. Znajdującą się 1/4 cala od dołu prostokąta narysowanego w kroku 5. A jeżeli niewiecie ile to jest cal to narysujcie na oko tyle zeby się zmieściła jedna linijka tekstu poniżej rysowanej lini.

 

Tak miejwięcej ma to wygladać:

 

Krok 8.

Zmieniamy grubość ołówka na 4 piksele i rysujemy dwie pionowe linie, odchodzace od dołu najwiekszego prostokąta.

 

 

Te linie podzielą główny obszar naszego dokumentu na części.

PS. Niewiem czego na obrazku pisze ze linie są szerokosci 2 pikseli, ja zrobilem o grubosc 4, ale to zalezy od was.

 

Krok 9.

Robimy nową warstwe, i uzywająć rectangular marquee tool zaznaczamy prostokąt znajdujący się między górną linią a paskiem zrobionym w kroku 3. Wypełniamy zaznaczenie białym kolorem i odznaczamy.

 

Krok 9 nie jest niezbedny, mozna go pominać, ustawiając odpowiednio wyciety obrazek w nastepnym kroku.

 

Krok 10.

Używając poprzednio zrobionego prostokąta za przewodnika (?), ustawiamy na nim obrazek.

Można użyć Renderu, zdjęcia lub czegokolwiek co według nas pasuje. Autor użył fotke ulicy w miescie, na której znajduje sie dużo przyciemnianych szyb.

 

 

Kończące poprawki:

 

Już miejwięcej widać co i jak, ale jeszcze przed nami detale, które praktycznie beda tworzyc ten layout.

Macie tu dużą dowolność ale ja miejwiecej opisze jak jest to zrobione na layoucie autora i moim.

 

Może zaczne od góry :

 

-Header:

Generalnie w tej części możecie wykorzystać wiedze nabytą podczas robienia sygnaturek, macie pełną dowolność.

Można zacząć od zabawy ze zdjeciem na gorze, mozna potraktowac go balansem kolorów (CTRL+L), żeby ładnie pasował kolorystycznie do naszego layouta, dobzre jeżeli będa w nim jakieś czarne motywy.

Autor zrobił również logo firmy, ale mozna je rowniez zastapic tekstem. W przykładowym layoucie zeby połączył pole zawierające logo i obrazek użyty jest kształt (pasek) na krancu białego obszaru z ustawionym gradientem i cieniem. Ja w swoim poszedlem na łatwizne i potraktowałem obrazek biało-przezroczystym gradientem.

Na obrazku przeprowadzony jest równiez pasek z linkami, pełniący funkcje menu, robimy go rysując biały prostokąt i ustawiając jego przezroczystość na 50 %, a potem wstawiamy linki pasującą nam czcionką. Można dodać jeszcze ozdobnik w stylu kwadratów przy każdym linku, dzięki temu oddzielimy linki od siebie.

 

-Pasek z kroku 3:

Tutaj umieszczamy tekst krótką informacją o firmie. Uzywamy koloru szaro/niebieskiego żeby ta informacja nie odwracała uwagi od głównej treści strony (ja użyłem #8F8D84).

 

-Pasek z kroku 4:

Używamy tego paska, jako paski z tytułami poszczególnych cześci głownego obszaru. Warto je oddzielić.

Ja to zrobiłem tak:

Przedłużyłem białe pionowe linie żeby oddzielić poszczególne paski, potem uzywając rectangular marquee tool zaznaczałem poszczególne krótkie paski, kopiowałem na nową warstwe, a potem ustawiałem w blending options właściwość Inner Glow.

 

-Główna obszar strony:

Używałem tutaj czarnego tekstu, ale z tym możecie poeksperymentować. Wstawiając obrazek ustawiałem w nim stroke na 2 piksele i kolor: #C8CED8

 

-Dół strony:

Można tutaj zrobić poziomą linie o wysokości 2 pikseli też szarą, użwając już wczesniej użytych kolorów (np. koloru tekstu z informacji o firmie).

Przy tej lini dajemy jeszcze dodatkowe linki. Autor uzył wyróżniającego się koloru, ja wolałem coś bardziej pasującego do kolorystyki strony. Wszystko zalezy od was.

-Inne uwagi:

Generalnie dopiero po wstawieniu tych wszystkich detali i szczegółów widać efekt waszej pracy i czego dokonaliście. Możecie wykazać się tutaj własnął inwencją, nie musicie wszystkiego robic dokladnie jak w tutku, ale jak nie macie pomysłów to możecie je czerpac z pracy mojej i autora oryginalnej wersji tutoriala.

 

Jak znajdziecie jakies błędy to piszcie to poprawie,w końcu to moj pierwszy tutek/przetłumaczenie + poprawki .

[Tubis 0]

No normalnie jesteś wielki KlaXoN. Zaraz się biore do roboty. Trzeba się wziąć za coś innego niż tylko sigi

[witmann 0]

Niby ok, tylko nie rozumiem idei robienia obrazka dokładnie takiej wielkości jak przygotowywany layout - ogranicza się sobie w ten sposób pole robocze, co przy bardziej rozbudowanych projektach znacząco wpływa na wygodę pracy. Lepiej zrobić na początku większy obrazek i ograniczyć go za pomocą prowadnic (slices) a przed cięciem obrazka na kawałki zrobić cropa do tych prowadnic i tyle.

[KlaxoN 0]

Tubis: Dzieki, mam nadzieje że w praktyce też tutorial zda egzamin.

 

Witmann: Ale to tutorial dla początkujących. Dzięki za rade, sam nawet nie słyszałem o takim sposobie , napewno przy następnym projekcie wykorzystam. A napisąłem tak jak pisało w oryginalnej wersji.

[witmann 0]

Dzięki za rade, sam nawet nie słyszałem o takim sposobie

A to się nie czytało mojego w wątku z poradami dla początkujących webdesignerów, co? No ładne kwiatki!

[KlaxoN 0]

A czytałem czytałem tylko musiało mi umknąć. Bo przeraża mnie narzędzie do wycinania (prowadnice itd. ) w photoshopie.

Powoli ale sukcesywnie bede je opanowywał.

[neonek 19]

heh spoko tut ale go nie bede czytal , nie wiedzialem ze go tak szybko napiszesz dzisiaj ja sam zaprezentuje swoja prace bez zadnych tutoriali, chce opakzac wszystkim ze sie da samemu cos wymyslec zobaczymy jakie beda efekty mojej pracy

[wasik_12 0]

eeee ja cos musialem zle zrobic....na poczatku jak zrobilem nowa warstwe to nie moglem na niej wogole rysowac na tamtej drugiej tez eee wiec jak to trzeba zrobic?

[witmann 0]

wasik - no nie mów, że masz problemy z warstwami Utwórz nową tak samo jak to robiłeś przy sigach. Może wybrałeś przez pomyłkę jakieś inne narzędzie?

[wasik_12 0]

niee nie o to chodzi normlanie biore nowa warstwe potem biore "olowek" no i rysuje i nic sie nie pojawia.....hmmm a 1 px jest normalnie widzialny? czy moze trzeba powiekszyc obraz...?

[KlaxoN 0]

No 1 piksel powinien byc widzialny . Spradz czy masz wybrany inny kolor niz tło.

Jeszcze zobacz czy na gorze gdy masz wybrany ołówek masz ustawione opacity na 100%.

[neonek 19]

ja juz mam okolo 30% swojego laya szkoda ze tak malutko czasu mam , robie po okolo 10 min, dzisiaj troche wiecej czasu poswiecilem na logo, ktore moim zdaniem jest ladniutkie neon jeszcze w tym tyg. pokaze swoja sile ^^

[witmann 0]

Nie spiesz się Neon Zrobienie dobrego layoutu zajmuje około dwóch, trzech dni - nie licząc fazy projektowania i wymyślania

[wasik_12 0]

mi juz jakos iidzie to robienie ale mam inne pytanie poniewaz ja sie na htmlu nie znam to jak np podziele ktorys pasek aby tam umiescic linki to tam wystzaarczy napisac nazwe linka i nic sie nie stanie przez to ze podziele ten pasek.....eeee sry ze tak niezrozumiale napisane ale ja n00b w htmlu i innych sprawac

[witmann 0]

Nie rozumiem o co Ci chodzi Jak podzielisz, to się weź za kurs htmla i juz bedziesz wiedzial co i jak A na Laba wrzucaj screen z layoutu przed podzieleniem.

[wasik_12 0]

 

e podzielilem a potem przeczytalem twoj post...ale co tam a tak wogle jak mi wyszlo?

[neonek 19]

heh szczerze? ja niedawno , keidy w ogole sie nie interesowalem grafiak bylem tak samo zielony jak Ty w sprawach grafiki, mniej obalilem tutorialow ale moim zdaniem umniemy mniej wiecej tyle samo, nawet Ty wiecej znasz technik o grafice (malo czytam tutkow ) no ale tutaj mogles sie bardziej wykazac cala wiedza jaka zdobyles rozumiem pierwszy raz itp ... wiem ze zaraz moge zostac przez niektorych zjechany testami typu: ,, no to czekamy co Ty naskrobiesz cwaniaczku'' itp no ale uwazam ze slabo Ci to wyszlo ... popracuj nad tym wszystkim, nie jedz idealnie wedlug tuta (najlepiej zebys w ogole na nim nie operowal ) tylko wykaz w leyu cala swoja dotychczasowa wiedze jaka masz.

 

tyle oddemniem ja moze swoje skoncze jutro, albo pojutrze jak czas pozwoli.

 

pozdrawiam.

[KlaxoN 0]

neonek: Ale rady nie używania tutków mijają się z celem . Przy pierwszym layu jeszcze dużo osób chce ekperymentować i sami robi, ale wyniki są różne. Chodzi o to że niektórzy dopiero po paru layach jak już sobie poeksperymentują sięgają po tutki, ale inni mają kolejność odwrotną, czyli tak jak z sigami - najpierw dużo tutków i jak będą już coś umieli to eksperymentują na własną rękę.

 

wasik: Ogólnie widać że większa część dobrze wykonana, tylko w oczy rzucają się te nierówne linie, bo jednak te obszary na niebieskim pasku i na obszarze głównym muszą być tak samo podzielone, bo na górze będą nazwy poszczególnych części z dołu.

Więc to by pasowało poprawić .

Nawet fajnie wygląda pomysł z paskiem u góry, z zostawianiem miejsca między nimi, ale z lewej masz jaby zaczęte kolorowanie?

 

A co do górnego paska, to render jaki użyłeś jest ciemny z elementami zielonego, może gdybyś się balansem kolorów pobawił żeby z tego zielonego zrobić niebieski. Bo generalnie jakiś większy obrazek tam by pasował, ale jak dodasz tekst i reszte detali to zobaczymy może ten też będzie dobry.

 

A reszta w porządku, dobrze dobrane gradienty.

 

Ogólnie zrób te detale jeszcze, bo tak jak napisałem w tutku, dopiero wtedy będzie widać dobry efekt.

[witmann 0]

wasik:

- gorne kreski po lewej mają jakieś błedy

- nierówne podzielenie niebieskiego pasa - powinno być równo z dołem (tak jak KlaxoN mówił)

- dlaczego taki minimalizm na bannerze? Trochę to nudne Jakieś tło by się przydało. A jeśli już nie chcesz tła, to wtedy granatowy pasek sporo wyżej, zaraz pod bannerem i będzie lepiej. Bo ta przerwa tam raczej niczemu nie służy.

- białe kreski oddzielające szare gradienty na dole bardziej mi się podobają od szarych, ale to już kwestia gustu.

 

Ogólnie jak na pierwszy raz to nieźle. Pracuj a będzie lepiej

[marciv 0]

Mój layout robiony bez tutoriala :

Layout

[witmann 0]

marciv:

- prawy gorny rog, na lewo od "hardstyle" - źle przechodzi jedno tło w drugie.

- dlaczego zanim się strona załaduje to tło jest tak oczojebnie zielone?

- to ozdobne coś z napisem "NEWS" będzie utrudniało dodawanie tekstu. Będzie trzeba kombinować z tabelkami lub CSS.

[wasik_12 0]

na reender nie patrzyc dalem na szybca spac mi ise chcialo z tymi kreskami odzielajacymi tez a co do tych kresek u dolu co mialy byc nabialo to jakos mi nie chcialy sie narysowac

[marciv 0]

ten zielony to fatalna pomylka w dreamweaverze!! nie chcialo mi sie poprawiac , jesli chodzi o newsy to pomysl na to mam - bedzie zastosowany flash - nawet ciekawie to wyszlo , a te przejscie przy hardstyle teraz zauwazylem - dzieki.

[Filip 0]

Bardzo ładnie Tylko myśle panowie ,że lepiej pisać swoje tutoriale ( inwencja ! ) niż tlumaczyć czyjeś...

 

Ja postaram się do 2 tygodni zamieścić swój tutorial tworzenia layout'ów.

 

Pozdrawiam

Filipk

[KlaxoN 0]

Hehe Ja mam narazie za małe umiejętności w tej dziedzinie żeby napisać swoj tut o layach. A nic sie nie działo w grafice to przetłumaczyłem ten, ale dodałem też coś od siebie.