Skocz do zawartości

Temat został przeniesiony do archiwum

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

KlaxoN

[Layouty] Robimy nasz pierwszy layout :) - tutorial

Rekomendowane odpowiedzi

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. :P

 

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.

 

1.jpg

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).

 

3.jpg

 

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).

4.jpg

5.jpg

 

Stroke:

6.jpg

 

Rezultat:

7.jpg

 

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.

8.jpg

 

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

 

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

10.jpg

11.jpg

 

Rezultat:

12.jpg

 

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.

 

13.jpg

 

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:

14.jpg

15.jpg

Rezultat:

16.jpg

 

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.

 

18.jpg

 

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ć:

19.jpg

 

Krok 8.

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

 

21.jpg

 

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.

 

23.jpg

 

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 :P :

 

-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 ;) .

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
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! :P:E;)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Powoli ale sukcesywnie bede je opanowywał. :E;)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

heh spoko tut ale go nie bede czytal :P, 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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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? :P

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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? :E czy moze trzeba powiekszyc obraz...? :P:E

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

No 1 piksel powinien byc widzialny :P . Spradz czy masz wybrany inny kolor niz tło. :P:E;)

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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 ^^

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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 :P

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

lay9fh.jpg

 

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

neonek: Ale rady nie używania tutków mijają się z celem :P . 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. :E

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? :E

 

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. :)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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 :)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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? :E

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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. :)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

  • Ostatnio przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników przeglądających tę stronę.

  • Tematy

  • Odpowiedzi

    • pewnie że wole niestety kosmici w komputroniku tylko pracują a na to nie mam wpływu tak jak i na to że zasilacz 1600 w jest niedostępny więc bedzie musiał wystarczyć 1300 w tak dokładnie wydaje po to 26 tys by "chapnąć" 2600 i kupic najtańszy tv 55 cali cholera trafił mi sie myśliciel i wizjoner a jak pomógł swoim mądrym postem cholera od teraz moje życie sie zmieni
    • @up Skill to w moim przypadku za dużo powiedziane. RL1 to w dużym stopniu przedsięwzięcie strategiczno-logistyczne, a nie tylko poznawanie movesetu przeciwników. Kluczem do walki z Malenią było ogarnięcie właściwego buildu i taktyki, bo jak chciałem po prostu wszystko wydodge'ować, to miałem poważne problemy z przejściem nawet pierwszej fazy. Dla zainteresowanych:
    • Chce pan tanio i szybko? To ma pan tanio, szybko i ekologicznie   To wyżej to taka robota na boku bo zmieniałem ram z 16 GB na 32 GB i eksmitowałem 5800x3d i na powrót dałem 5700G. Koszt zmiany ramu to jakieś 70 - 80 złotych o ile poprzednie g.skille pójdą za 120  - 130 zł. Tak, te klevvy kupiłem nówki za 101 zł za komplet  Fajnie, że mają czujnik temperatury.   
    • Pewny jesteś nazwy płyty? Według Google to MSI. Co do pytania to raczej nie warto bo praktycznie nic to nie zmieni. Chyba, że o ile dobrze rozumiem, to pamięci z i5 działają na 2666 MHz a z i7 oraz i9 na 2933 MHz. Wtedy za około 200 zł dojdą 4 wątki, trochę szybszy zegar i szybciej działające pamięci.  https://allegro.pl/oferta/procesor-intel-core-i7-10700f-2-90ghz-lga1200-15372094649?utm_medium=afiliacja&utm_source=ctr_2&utm_campaign=a87648d1-a282-4a5a-bbdf-1f1e1cd28cc4&utm_content=4ac103486af9#  
    • kupiłem se kołpaki (ze wzgledow praktycznych - psy mi sikaja na tarcze) i tak, wiem ze bieda, ale oryginały były w tej samej cenie a te mi sie podobaja bardziej - i TAK, wiem ze jestem w mniejszosci bo wiekszosci sie nie podobaja
  • Aktywni użytkownicy

×
×
  • Dodaj nową pozycję...