Skocz do zawartości

Temat został przeniesiony do archiwum

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

witmann

MuOnline Layout - tutorial

Rekomendowane odpowiedzi

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:

 

tut14sw.th.gif

 

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.imageshack.us/img483/6854/bannertlo6bb.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:

 

tut25jg.th.gif

 

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:

 

tut33st.gif

 

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:

 

hwu4r9l7pfoesyg6.jpg

 

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:

 

v5di3an1hdr79wk7.jpg

 

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:

 

b48f9c9q2x3oiqit.jpg

 

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:

 

ewk2frz9r6wz9aeo.gif

 

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:

 

6cnx3716y6nzo23v.gif

 

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:

 

iytj79wlycyk8c71m.jpg

 

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:

 

0othfupwq5fa8c8um.jpg

 

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:

 

4cphf6txc1lt4db2m.jpg

 

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

 

xpa1ze40679xu331m.jpg

 

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:

d5jfafvf5agpb3s6m.jpg

 

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:

 

6ah5c87v7ew205nom.jpg

 

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

 

noccojvbghz71txgm.jpg

 

 

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.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Taki odblask lepszy?

 

vypj02rp7ux5qrhem.jpg

 

A może taki?

 

ifv3750un2oloa6km.jpg

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

reszta calkiem calkiem

Udostępnij tę odpowiedź


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

reszta calkiem calkiem

Dzieki.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

drugi odblask zdecydowanie lepszy ;)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
.....

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.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

layout3gw.th.jpg

 

 

 

 

Lekka przeróbka:

layout2ht.th.jpg

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
Wielkie dzięki witmann za tutka. Jak powiedziałem trzeba wziąć się za coś innego niż sigi. Oceńcie czy wyszło:

layout3gw.th.jpg

Lekka przeróbka:

layout2ht.th.jpg

 

Mi się podoba :-)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
Gość hultaj_90

Oto mój 1 layout..nie było tak źle ale skiepściłem kilka rzeczy...

Nie śmiejcie sie zbyt głośno.. :E

 

s96j2ytn0zstphycm.jpg

 

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
Gość hultaj_90

hmmm...zaraz sie wezme za poprawki..

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
I tu już zakończyłem prace bo sie zagubiłem :mad2::mad:

Masz problem z prowadnicami? Powiedz dokładnie o co chodzi to się postaram wyjaśnić :)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

1.Jakie wg was najlepsze sa kolory na stronke?

2.Czy wg was lepsze jest jasne czy ciemne kolory?

 

Zacząłem robic szalon w czarno granatowym kolorze bo już sam nie wiem jakie kolory mam dać :/

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

ja wole jasne, a co do kolorów

to colorblender.com

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

  • Popularne aktualnie

  • Tematy

  • Odpowiedzi

    • Cześć Pojawił się update działania #gpupricebot . Przede wszystkim pojawiła się (bardzo podstawowa) strona projektu Na tą chwilę spełnia 3 zadania: - Posiada linki do zaproszenia na serwer discordowy, - Na dole znajduje się link to "Tabeli" (screen załączony), która zawiera wszystkie aktualne oferty. Można je dowolnie filtrować, - Będzie działała jako "skracacz" linków do pojawiających się ofert na discordzie (i w niedługim czasie telegramie). Funkcja 2 i 3 wymaga dołączenia do serwera discordowego. W ramach autoryzacji sprawdzane jest członkostwo na serwerze. Aktualnie prowadzone prace: - Dodanie linków z domeny gpupricebot.eu dla wszystkich botów, - Skończenie dodawania pozostałych kategorii produktów, - Stworzenie czegoś na wzór mojego #gpu-query ale dla budowania zestawów komputerowych. - W tle dodawanie kolejnych sklepów. Plus filmik z działania GPU-Query: Filmik Jeśli macie jakieś uwagi to piszcie w komentarzach albo na PW. Dzięki! Szala
    • Do poczytania w dodatku po Polsku więc chyba każdy ogarnie  Rośnie konkurencja dla DLSS. Digital Foundry analizuje FidelityFX 2.0. Duże zmiany w drugiej wersji algorytmu https://www.eurogamer.pl/rosnie-konkurencja-dla-dlss-digital-foundry-analizuje-fidelityfx-20
    • Zobacz czy nie masz limitów mocy, skoro w benchmarku jest chłodny  
    • Niektórzy moii znajomi całościowo lub częściowo, wywalili sobie na podwórkach sztuczną trawę Odchodzi problem koszenia. Raz na ruski rok tylko odkurzyć i umyć karszerem. Można wziąć Ukraińca jak dla kogoś to wyzwanie. No, ale kto co lubi. 
    • Czym zatem Twoim zdaniem różni się robienie wokół 100m^2 mieszkania a 100m^2 domu? Wyobrażasz sobie sypanie wungla w kotłowni, czy jak?   Cena, Panie. To jest minusem Koledzy co poszli w dachówkę zabulili po 50-60 tysięcy za podobny metraż dachu i jeszcze dopłacili za cięższą więźbę. Masakra. U mnie 30k za wykończenie dachu. Najlepsza obecnie jest dachówka cementowa (praktycznie niezniszczalna, tylko potrafi się zielenią pokryć ), ale to też jest ciężkie... a jeszcze lepsze jest doczekać na spadek cen stali, zrobić drugi strop+płaski dach i nalać ciepłym moczem na wykańczanie dachu. Ale oczywiście nie po cenie stali "wojennej", może za 2-3 lata to znów będzie dobra opcja.   Źródło tych mądrości? Przecież Wam piszę, że goliłem ten teren robocikiem i sobie poradził. Somsiad też ma 1000m^2 i też sobie radzi. Przecież w ogóle mogłem tego robota pożyczyć, bo somsiad ma, a ma, bo sobie radzi to chyba oczywiste, inaczej by dymał z kosiarką spalinową albo elektryczną po terenie. No żywopłotu "nie chcem ale muszem". Ale jest jedno ale - MOGĘ... Co możesz zrobić, by somsiad z pobliskiego bloku nie dorzucił do Ciebie pomidorem? Nic nie możesz, bo nie wolno Ci niczego posadzić po drodze więc wiesz. A krety niech sobie kopią. Nie jestem typem człowieka, który będzie się onanizował do tego, czy jest idealnie równy trawnik o idealnie równomiernym zagęszczeniu. Rozrywki dla boomerów z harnasiem w ręku.
  • Aktywni użytkownicy

×
×
  • Dodaj nową pozycję...