Forum PCLab.pl: MuOnline Layout - tutorial - Forum PCLab.pl

Skocz do zawartości


Otwarty

Ikona Najnowsze pliki

  • (2 Stron)
  • +
  • 1
  • 2
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

MuOnline Layout - tutorial Oceń temat: -----

#1 Użytkownik jest niedostępny   witmann 

  • Uzależniony od forum
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 10942
  • Dołączył: Wed, 28 Lip 04

Napisany 25 Luty 2006 - 21:26

Długo obiecywany layout ;) Trochę późno, ale różne sprawy, lenistwo itp. uniemożliwiły wcześniejsze ukończenie ;)

Layout w takiej formie w jakiej jest zaprezentowany w wersji finalnej może być użyty wyłącznie przez uzytkownika o nicku Filipinho. Inni mogą zrobić podobny a nawet taki sam i zaprezentować tu na forum ale nie mogą go użyć do własnych projektów!

Dobra, ale do roboty.

1. Tworzymy nowy obrazek o wymiarach 1030x800, 96dpi, tryb RGB 16bit, tło dowolne.

2. Ograniczamy sobie obszar roboczy do szerkosci 1000 px stosując prowadnice View-->New Guide. Robimy dwie prowadnice Vertical, jedna na 15 px druga 1015 px, oraz jedną prowadnicę horizontal na 10 px.

3. Ustalamy wysokosc glownego bannera, w naszym przypadku będzie to 170 px, więc dokladamy jeszcze jedną prowadnicę horizontal na 180 px (10 początkowe+170 wysokosci bannera). Całość powinna wyglądać mniej więcej jak na obrazku:

Dodaj obrazek

4. Resetujemy kolory (klawisz "D") i naciskamy Alt+Backspace by wypełnić tło na czarno.

5. Teraz czas na bannerek. Tworzymy nowy dokument o wymiarach 1000x170 i czarnym tle. Korzystając z abstract brushy dostępnych tu i ówdzie (na przykład deviantart.com) tworzymy tło naszego bannerka. ja korzystałem z pędzli MetalCXAbstract90. U mnie to wyglądało tak:

http://img483.images...annertlo6bb.jpg

6. Zaznaczamy cały banner za pomocą kombinajcji ctrl+A i kopiujemy (jeśli jest więcej niż jedna warstwa to robimy 'copy merged'). Tworzymy nową warstwę na naszym layoucie i wklejamy banner. Umieszczamy go pomiędzy górnymi prowadnicami. Na osobnych wartstwach dopieszczamy nasz banner umieszczając na nim rendery, tekst itp. (można to zrobić później).

7. Przygotujemy sobie teraz pole pod menu. Będą dwie kolumny po lewej i prawej stronie oraz wąski pasek pod bannerem. W tym celu tworzymy nowe prowadnice, 185px vertical i 845px vertical (w ten sposb robimy dwie kolumny o szerokosci 170px). Do tego prowadnica 200px horizontal. Jeszcze można zrobić dodatkową prowadnicę na samym dole, 10 px od dolnej krawędzi, czyli 790 px horizontal.
Całość powinna wyglądać mniej więcej tak:

Dodaj obrazek

8. W przypadku tego layoutu sporo elementów będzie otoczonych białą ramką. Zrobimy ją tak, aby miała ładny efekt wypukłości. Tworzymy nowy obrazek o wymiarach 500x5px, wybieramy narzędzie ołówka, kolor biały i rysujemy na samej górze białą poziomą linię (trzymając shift, by rysować równe kreski). Zmieniamy kolor na lekko szary i rysujemy kolejną kreskę zaraz pod tamtą białą. Potem znowu ściemniamy kolor i rysujemy następną kreską, itd. Ostatnia kreska powinna być nadal szara, a nie czarna.
U mnie po powiększeniu wyglądało to tak:

Dodaj obrazek

Pierwszą kreskę dałem odrobinę ciemniejszą od drugiej, bo tak mi bardziej pasowało, ale nie jest to konieczne.

9. Zaznaczamy cały obrazek z kreskami (ctrl+A) i wklejamy na obrazek z layoutem. Wykładamy górę i dół bannera za pomocą tych pasków (wklejając nowe kopie naszego obrazka z kreskami). Wszystko oczywiście na osobnych warstwach.

10. Zrobimy teraz poziome menu. Zaznaczamy obszar pomiędzy dolną krawędzią bannera a następną poziomą prowadnicą. Foreground color ustawiamy na #262626, Background Color - #5f5f5f. Wybieramy narzędzie do gradientu i po powiększeniu obrazu do 300-400% robimy gradient od góry do dołu, zaczynając gdzieś pomiędzy jedną trzecią a połową wysokości tego poziomego pasa. Uzyskamy w ten sposób coś takiego:

Dodaj obrazek

11. Duplikujemy naszą warstwę z tym gradientem. Filter->Noise->Add Noise. Amount 18%, Gaussian, Monochromatic. Potem Filter->Blur->Motion Blur. Angle 0, Distance około 25. Zmieniamy opacity tej warstwy na 75%. uzyskamy w ten sposób coś na kształt faktury drewna.

12. Teraz podzielimy naszą "drewnianą" belkę na przyciski. Wybieramy kolor prawie czarny (np. #1a1a1a), narzędzie ołówka o grubości 1px. Rysujemy na nowej wartswie pionowe kreski tak, jakbyśmy wycinali w tej drewnianej belce przyciski. Po narysowaniu dwóch kresek w odległości 150 px (można się wspomóc siatką) wyglądać to będzie mniej więcej tak:

Dodaj obrazek

13. Teraz wybieramy kolor sporo jaśniejszy (np. #5f5f5f). Rysujemy ołówkiem 1px pionowe kreski zaraz obok tamtych dwóch ciemniejszych. Na jedną kreskę ciemną przypada jedna kreska jasna przylegająca do niej z prawej strony. Po wszystkim będzie to wyglądało tak:

Dodaj obrazek

I już mamy jeden przycisk! Teraz dodając kolejne kreski na lewo od tego przycisku możemy tworzyć kolejne.

14. Przechodzimy do naszych kolumn. Tło będzie stanowił poziomy gradient. U mnie pomiędzy kolorami #881e1e a #bc2323. Gradienty robić umiecie, więc sobie poradzicie :P

15. Teraz zajmiemy się dopieszczeniem tła w kolumnach menu. Jako, że layout ten był robiony na potrzeby serwisu MU Online, postanowiłem do tła wsadzić logo tej gry. Korzystając z jednej z tapet dostępnych na stronie oficjalnej przygotowałem sobie taki oto symbol:

Dodaj obrazek

Stworzyłem nową wartwę, tuż nad warstwą z gradientem z kolumny i wkleiłem ten symbol. Opacity warstwy ustawiłem na 43% i dodałem Outer Glow o takich parametrach:

Dodaj obrazek

Potem blending mode warstwy ze znakiem ustawiłem na "Darken". Duplikowałem tę warstwę i przenosiłem niżej, by wypełnić całą kolumnę. Powstało coś takiego:

Dodaj obrazek

Identycznie zrobiłem z prawą kolumną.

16. Teraz miejsce na treść. Tworzymy nowe prowadnice: 190px vertical, 840px vertical, 205px horizontal, 225 px horizontal i 240px horizontal. Można jeszcze dodać jakąś poziomą jako granicę dolną okienka, które w ten sposób powstanie. To już wedle uznania.

17. Tworzymy nową warstwę. Zaznaczamy obszar pomiędzy prowadnicami na wysokości 205px i 225px. Ten obszar wypełniamy gradientem pionowym od koloru białego do lekko szarego, np. #afafaf. Otrzymamy coś takiego:

Dodaj obrazek

Będzie to miejsce na tytuł newsa/tekstu.

18. Pod tą białą belką mamy kolejny obszar ograniczony przez prowadnice. Tutaj nawiążemy do kolorystyki poziomego menu. Zaznaczamy ten obszar i robimy taki sam gradient jak przy menu poziomym oraz robimy "drewnianą" fakturę (punkt 10 i 11 tego tutoriala).

19. Teraz czas na dolną krawędź okienka. Odnajdujemy warstwę z białym paskiem otaczającym menu (pamiętacie - ten skłądający się z pięciu coraz ciemniejszych kresek). Duplikujemy tę wartwę i przenosimy w dół, w miejsce, gdzie chcemy mieć dolną krawędź okienka. Teraz wystarczy dowolną metodą przyciąć tę belkę na odpowiednią szerokość.

20. Teraz tło okienka. Tworzymy nową warstwę i umieszczamy ją na liście POD warstwą z dolną krawędzią okna. Tworzymy gradient podwójny (przechodzący od koloru #bc2424 w kolor #871e1e i z powrotem). Jakby ktoś nie wiedział to taki gradient robi się wybierając narzędzie gradientu, klikając na jego podgląd na górnym pasku narzędzi. Otworzy się okienko. Klikamy raz na środku powyżej naszego gradientu i raz poniżej. Dodane zostaną dwa małe prostokąciki a gradient zmieni się w podwójny. Klikając na te prostokąciki można na dole zmieniać ich właściwości. Mają być dokładnie w połowie (location - 50%). Podgląd tutaj:

Dodaj obrazek

Takim gradientem wypełniamy obszar pomiędzy górą a dołem naszego okienka. Dostaniemy coś takiego:

Dodaj obrazek

21. Identycznie jak robiliśmy biały nagłowek okienka przygotujemy nagłówki sekcji menu w kolumnach. Odpowiednie prowadnice już mamy, więc wystarczy tylko zaznaczyć właściwy obszar i wypełnić gradientem. Też takim biało-szarym. Punkt 17 tutoriala.
Wyglądać to powinno tak:
Dodaj obrazek

Wystarczą dwie belki nagłowkowe, bo potem się je powieli w razie potrzeby. Do cięcia layoutu i tak się je usuwa i zapisuje oddzielnie.

22. Krok już właściwie ostatni (hurra! :E). Tworzymy nową warstwę NA SAMEJ GÓRZE listy warstw. Pozostało nam jedynie otoczyć niektóre elementy białą linią o grubości 1 px. W tym celu używamy ołówka lub zaznaczenia i opcji Edit->Stroke. Ja zrobiłem to w ten sposób:

Dodaj obrazek

Po dodaniu paru bajerów otrzymałem coś takiego:

Dodaj obrazek


I to by było na tyle. Wszelkie skargi/prośby/zażalenia mile widziane. Pytania także ;)

Jeszcze dzisiaj (a jak nie dzisiaj to jutro) postaram się wsadzić na Laba tutorial do narzędzia Slice, które pozwoli nam pociąć ten layout i wygenerować pasujący do niego kod html.

#2 Użytkownik jest niedostępny   neonek 

  • Ten co świeci najmocniej
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 5527
  • Dołączył: So, 10 Gru 05

Napisany 25 Luty 2006 - 21:36

hmm niezly tut , sredni efekt moim zdaniem :P raczej top hehe, czekam na tutorial o wycinaniu :)

#3 Użytkownik jest niedostępny   rzepak 

  • Uzależniony od forum
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 4929
  • Dołączył: Cz, 29 Lip 04

Napisany 25 Luty 2006 - 21:39

ta góra nie jest najlepsza, ten odblask nie pasuje zdecydowanie, a nawet jak by juz musial tam byc to za duzy stanowczo

#4 Użytkownik jest niedostępny   witmann 

  • Uzależniony od forum
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 10942
  • Dołączył: Wed, 28 Lip 04

Napisany 25 Luty 2006 - 21:50

Wiem, że efekt średni, mogło wyjść lepiej, ale coś ostatnio weny nie mam. A ważne chyba, że się zamawiającemu podoba, nie? ;)

#5 Użytkownik jest niedostępny   Filipinho 

  • Jim Carrey Rlz!
  • PipPipPipPip
  • Grupa: Forumowicze
  • Postów: 651
  • Dołączył: Wt, 20 Gru 05

Napisany 25 Luty 2006 - 21:51

Dla Mnie jest super... tylko ten co pokazałes to nie dokonczony :E mojemu koledze też się podoba...

#6 Użytkownik jest niedostępny   witmann 

  • Uzależniony od forum
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 10942
  • Dołączył: Wed, 28 Lip 04

Napisany 25 Luty 2006 - 21:58

Taki odblask lepszy?

Dodaj obrazek

A może taki?

Dodaj obrazek

#7 Użytkownik jest niedostępny   Filipinho 

  • Jim Carrey Rlz!
  • PipPipPipPip
  • Grupa: Forumowicze
  • Postów: 651
  • Dołączył: Wt, 20 Gru 05

Napisany 25 Luty 2006 - 21:59

Druga :D

#8 Użytkownik jest niedostępny   stickman 

  • nowy avatar !
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 1509
  • Dołączył: Nd, 03 Paź 04

Napisany 25 Luty 2006 - 22:07

tak nawiasem mowiac, nie podoba mi sie tło bannerka - nie pasuje do reszty.
reszta calkiem calkiem

#9 Użytkownik jest niedostępny   witmann 

  • Uzależniony od forum
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 10942
  • Dołączył: Wed, 28 Lip 04

Napisany 25 Luty 2006 - 22:16

Zobacz poststickman, o 25 lutego 2006, 22:07, napisał(a):

tak nawiasem mowiac, nie podoba mi sie tło bannerka - nie pasuje do reszty.

W porządku - Twoje zdanie, ale nie musisz się trzymać tutoriala ani mojego efektu podczas pracy nad własnym layoutem :)
Specjalnie dałem tło odcinające się od reszty, by trochę zrównoważyć tę czerwień. Jakby banner też był czerwony to by oczy bolały ;)

Cytuj

reszta calkiem calkiem

Dzieki.

#10 Użytkownik jest niedostępny   b4rtaz 

  • undefined
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 3567
  • Dołączył: Cz, 03 Lis 05

Napisany 25 Luty 2006 - 22:22

Efekt ostateczny jakoś mi się wogóle nie podoba. :)

#11 Użytkownik jest niedostępny   rzepak 

  • Uzależniony od forum
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 4929
  • Dołączył: Cz, 29 Lip 04

Napisany 25 Luty 2006 - 22:29

drugi odblask zdecydowanie lepszy ;)

#12 Użytkownik jest niedostępny   BeneQ 

  • Uzależniony od forum
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 1411
  • Dołączył: Pt, 25 Mar 05

Napisany 25 Luty 2006 - 23:08

hmm... a ja czekam na tutek o cieciu -ale juz tu widze kilka przydatnych porad, ktore napewno sie przydadza :)

#13 Użytkownik jest niedostępny   KlaxoN 

  • _________________________
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 1325
  • Dołączył: Cz, 01 Gru 05

Napisany 26 Luty 2006 - 11:15

Zobacz postwitmann, o 25 lutego 2006, 22:16, napisał(a):

.....
Specjalnie dałem tło odcinające się od reszty, by trochę zrównoważyć tę czerwień. Jakby banner też był czerwony to by oczy bolały ;)
...


No zgodze sie z tobą, ale ja bym spróbował ten "odcinający się" kolor bardziej dobrać. Ciekaw jestem jakby to wyglądało w kolorach szarych, żeby było dobrane do tych pojedynczych szarych elementów strony.

A co do tutoriala, to przeanalizuje, wygląda na dobrze napisany, może akurat będą jakieś ciekawostki. Niektóre elementy są nawet pomysłowe. Ale efekt ostateczny rzeczywiscie raczej średni.

#14 Użytkownik jest niedostępny   wasik_12 

  • gópi!
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 1293
  • Dołączył: Pn, 26 Gru 05

Napisany 26 Luty 2006 - 11:25

Wow jak tylko wgram psa to zrobie takie cus :D ale sprobuje cos od siebie dodac :) ale pewnie i tak mi nie wyjdzie....:D

#15 Użytkownik jest niedostępny   Tubis 

  • Gaduła
  • PipPipPip
  • Grupa: Forumowicze
  • Postów: 141
  • Dołączył: Wed, 28 Gru 05

Napisany 26 Luty 2006 - 15:06

Wielkie dzięki witmann za tutka. Jak powiedziałem trzeba wziąć się za coś innego niż sigi. Oceńcie czy wyszło:
Dodaj obrazek




Lekka przeróbka:
Dodaj obrazek

Ten post był edytowany przez Tubis dnia: 26 Luty 2006 - 19:18


#16 Użytkownik jest niedostępny   Filipinho 

  • Jim Carrey Rlz!
  • PipPipPipPip
  • Grupa: Forumowicze
  • Postów: 651
  • Dołączył: Wt, 20 Gru 05

Napisany 26 Luty 2006 - 19:23

Zobacz postTubis, o 26 lutego 2006, 15:06, napisał(a):

Wielkie dzięki witmann za tutka. Jak powiedziałem trzeba wziąć się za coś innego niż sigi. Oceńcie czy wyszło:
Dodaj obrazek
Lekka przeróbka:
Dodaj obrazek


Mi się podoba :-)

#17 Użytkownik jest niedostępny   neonek 

  • Ten co świeci najmocniej
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 5527
  • Dołączył: So, 10 Gru 05

Napisany 26 Luty 2006 - 20:30

a mi nie :/ zrobicie wedlug tego tutoriala troche inaczej a nie w wiekszosci pdobnie, kolorystyka .... itp...

#18 Gość_Usunięty_*

  • Grupa: Goście

Napisany 19 Marzec 2006 - 20:01

Oto mój 1 layout..nie było tak źle ale skiepściłem kilka rzeczy...
Nie śmiejcie sie zbyt głośno.. :E

Dodaj obrazek

Rady,oceny,poprawki,sugestie wszytsko mile widziane :P :)

Ten post był edytowany przez hultaj_90 dnia: 19 Marzec 2006 - 20:02


#19 Użytkownik jest niedostępny   Pulpit 

  • ಠ╭╮ಠ
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 26266
  • Dołączył: Pt, 11 Lis 05

Napisany 19 Marzec 2006 - 20:14

Hmmm te komórki w menu po bokach nie podpasowywują mi, a jeszcze bardziej ta duża czcionka po środku. Kolorystyke zmień jeszczei cool :E te kreski szare ciekawe są :)

#20 Gość_Usunięty_*

  • Grupa: Goście

Napisany 19 Marzec 2006 - 21:10

hmmm...zaraz sie wezme za poprawki..

  • (2 Stron)
  • +
  • 1
  • 2
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych