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

    • A może zaczniesz czytać ze zrozumieniem? Widzę że trafiło na operatora drona i jak już napisane że czegoś nie wolno to emocje biorą górę... Nawet pogrubiłem Ci i podkreśliłem mega istotne stwierdzenie, czyli:  jeżeli zdjęcie jest na tyle wyraźne żeby można było ich rozpoznać lub ustalić inne szczegóły. Zatem oczywistym jest, że jak wykorzystujesz drona do takich zdjęć jakie dałeś, to nie ma ono przesłanek do naruszenia prywatności, bo nie da się rozpoznać szczegółów. Lecz drony można wykorzystywać w różny sposób a cała dyskusja zaczęła się od tego, że ja to napisałem, ale uwaga! w odniesieniu do nagrania z drona jakie pokazała TV Republika z przeszukania domu Ziobry, gdzie: 1. Działania operacyjne prowadziły służby specjalne 2. Nagranie pokazywało dość wyraźnie osoby wykonujące te działania.   Co do licencji to ok, użyłem niewłaściwego określenia, ale raczej powinieneś wiedzieć, że chodzi o uprawnienia, które musisz odnawiać co 5 lat, jeżeli latasz dronem o masie powyżej 250g i jako operator musisz być zarejestrowany, a dron musi mieć naniesiony numer operatora. Też o tym już pisałem, więc użycie określenia "licencja" było skrótem myślowym, bo myślałem, że to ogarniesz.  Pisałem już też o tym, że można od googla ubiegać się o wymazanie obiektów prywatnych, o to samo może upomnieć się jednostka wojskowa. To jest ich sposób po prostu na polubowne załatwianie takich spraw, bez zbędnych dróg prawnych. To co innego niż zdjęcia z drona wykonywane przez osoby prywatne lub firmy, których zleceniem była jakaś konkretna działalność. Wtedy taka jednostka może iść do operatora drona i zażądać usunięcia zdjęć lub wymazania konkretnych obiektów i ma do tego prawo, jak nie to sprawa kończy się rozstrzygnięciem w sądzie. Nie, nie pisałeś i wiem o strefach, ale podałem po prostu dosadny przykład by zobrazować jak wygląda Twoje myślenie w tym temacie, że jak coś nie jest wprost zakazane to jest dozwolone. Nie, to tak nie działa, bo to co robisz musi być wykonywane z poszanowaniem praw innych osób czy Ci się to podoba czy nie.  
    • Horizon na PS5 ma tryb 40fps, tzw balans, bo sam grałem na tym klatkarzu na moim monitorze 1440p. Dla pewności można zobaczyć OSD na monitorze, które pokazuje wyświetlany jest aktualnie obraz, plus zmiana między trybami graficznymi zawsze obraz mignie, bo zmienia się 60hz na 120hz.
    • Ale to już nie pierwsza taka sytuacja, głupie to strasznie taka scheda po konsolach gdzie zawsze jest biedne anizo najczęściej x4 
    • Nie wiem czy HFW tak ma, ale niektóre studia Sony robią tryb 40 fps właśnie z myślą o tv 120 Hz ale to garstka gier
  • Aktywni użytkownicy

×
×
  • Dodaj nową pozycję...