[WebDesign]Navigation Bar - podstawy

[ochota550]

 

 

Navigation Bar

Czyli inaczej Pasek Nawigacji to podstawa w naszej stronie internetowej. Dzięki niemu użytkownik może szybko przechodzić z jednej sekcji do drugiej i tak dalej. Pasek ten umieszczony jest zazwyczaj na topie (górze) strony.

 

O samym tutorialu

Krótko, zwięźle i na temat. Ten tutorial będzie poświęcony tworzeniu owego paska nawigacji od podstaw.

Postaram się przedstawić kilka technik na stworzenia paska nawigacji byś nauczył się jak najwięcej.

Samo stworzenie takiego paska zajmuje maksymalnie 5 minut tak więc nie zniechęcaj się

Mam nadzieje że przyda on się początkującym webdesignerom.

 

 

 

 

Oto co będziemy chcieli osiągnąć w tym tutorialu

 

 

 

 

 

 

 

 

 

 

 

 

Tak więc zaczynajmy.

Najpierw zaczniemy od pierwszego paska który widzicie.

Objaśnię stworzenie go w punktach poniżej:

 

 

 

 

 

1. Tworzenie "szkieletu"

Tak więc na początek otwieramy naszego Photoshopa i tworzymy nowy dokument [Ctrl + N] o rozmiarach 1024x600.

Następnie wybieramy Rectangular Marquee Tool (Zaznaczanie prostokątne) [M] i zaznaczamy pole na nasz pasek nawigacyjny; u mnie jest to 1024x46.

Teraz wybieramy kolor naszego paska. Jest to bardzo ważny punkt w tym tutorialu ponieważ musimy dobrać kolor tak by nie był zbyt jaskrawy oraz przyjemny dla oka użytkownika waszej strony. Jednocześnie jeżeli strona zawiera dużo informacji kolor naszego paska nie powinien zlewać się z kolorystyką strony. Ja jak widać wybrałem kolor lekko szarawy, będzie on doskonale pasował do stron o ciemnej kolorystyce (czarny, mocno szary itd.). Po lewej stronie umieszczamy nasze logo lub logotyp.

 

2. Typografia

Teraz czas wybrać do jakich stron ma przekierowywać nasz pasek nawigacyjny.

Ja wybrałem następująco: Games, Mods, Portfolio, About Us, Contact.

Drugą rzeczą jaką musimy zrobić to dobranie czcionki. Ja osobiście polecam takie czcionki jak Myriad Pro czy też Franklin Gothic Book.

Są to czcionki podstawowe tak więc będą pasować do większości waszych prac. Ja w tej pracy użyje czcionki ITC Avant Garde Gothic niestety jest ona płatna ale Myriad Pro powinien ją bez problemu zastąpić. Co do koloru czcionki... podobnie jak w pierwszym punkcie kolor czcionki nie może zlewać się z kolorem naszego paska nawigacji ponieważ musi ona być wyrazista oraz widoczna dla użytkownika naszej strony.

Dobrze skoro wybraliśmy już czcionkę czas by umieścić nasze "kategorie" które wybraliśmy na początku drugiego pkt.

Możecie zobaczyć jak ja to zrobiłem na zdjęciu powyżej.

 

3. Elementy podświetlane/animowane naszego menu

By pasek nawigacyjny naszej strony był bardziej dynamiczny możemy do niego stworzyć animowane buttony (przyciski).

Wyjaśnie jak mniej więcej to zrobić. Tworzymy nową warstwę i z narzędzi wybieramy Rectangular Marquee Tool (Zaznaczanie prostokątne) [M] i zaznaczamy obszar wokół naszej "kategorii" (nie musi być dokładnie). Wypełniamy nasz zaznaczony obszar [G] - jakimś kolorem by wyróżniał się z otoczenia. Następnie musimy dopasować nasz wypełniony kolorem obszar czyli inaczej nakładkę na nasz button tak by pasowała do naszego paska nawigacji.Tą operacje nazywamy "

Clipping Mask" lub jak to woli CM. Robimy to w następujący sposób: klikamy na nasza warstwę z nakładką i przesuwamy ją nad warstwę z naszym "szkieletem" paska nawigacyjnego. Zaznaczamy naszą warstwę z nakładką i przytrzymując klawisz Alt przesuwamy kursor myszki na warstwe ze "szkieletem" (musi nam sie pokazać właściwa ikonka) i wciskamy LPM po czym widzimy strzałke prowadzącą do warstwy z naszym "szkieletem" paska nawigacyjnego. Oto przykład:

Teraz nasza nakładka jest idealnie dopasowana do paska nawigacji. Ja oprócz dodania nakładki zmieniłem jeszcze kolor czcionki by nasz button bardziej sie wyróżniał i wyglądał bardziej estetycznie. I to by było na tyle jeżeli chodzi o pierwszy pasek nawigacyjny.

 

 

 

_________________________________________________________________________________________________

 

 

 

 

 

 

1. Wstęp

Powtarzamy pkt. 1 oraz 2 z poprzedniego tutoriala.

Z tym że w pkt. 1 najlepiej byłoby wybrać kolor niebieski, zielony czy też czerwony ponieważ na nich najlepiej będzie widać efekt który chce wam pokazać.

 

2. Obróbka naszego paska oraz świetliki

Otóż efekt o którym wspominałem to tzw. świetliki.

Dzięki temu nasz pasek będzie bardziej "żywy" co cieszy oko nasze jak i użytkownika strony.

Zanim jednak przejdziemy do świetlików nadajmy naszemu paskowi lekko chropowaty wygląd.

Zaznaczamy naszą warstwę z paskiem nawigacyjnym (szkieletem) i wchodzimy w Filter -> Noise -> Add Noise... i ustawiamy wartość na 1%.

Dobrze teraz nasz pasek ma lekko chropowaty wygląd. Czas na świetliki.

Tworzymy nową warstwę i przesuwamy ją nad naszą warstwę ze szkieletem i tak jak w pkt.3 w poprzednim tutorialu wykonujemy operacje zwaną

Clipping Mask. Następnie wybieramy miękki brush (pędzel) o kolorze białym. Jeżeli chodzi o jego wielkość to ja używam 100px ale to zależy jaki efekt chcemy uzyskać. Jeżeli mamy już wszystko ustawione tak jak być powinno zaczynamy malować "świetliki" na naszym pasku nawigacyjnym. Oczywiście upewniamy się że robimy to wcześniej utworzonej warstwie. Gdy już to zrobimy ustawiamy nasz warstwe na Overlay (nakładka) i ustawiamy Opacity (krycie) na około 20-50% (moje ustawienie to 30%). Dodatkowo możemy dodać szkiełko do naszego paska nawigacyjnego.

 

3. Zapalające się napisy

Tak jak w poprzednim tutorialu ma to za zadanie zwiekszenia dynamiczności naszego paska nawigacji. Przejdźmy od razu do rzeczy.

By stworzyć takie animowane buttony wystarczy zmienić jedynie krycie naszych warstw tekstowych np. na 50%.

Pamiętaj by tworzyć 2 wersje jeżeli chodzi o animowane buttony/napisy ponieważ kodując swoją stronę będzie potrzebował 2 wersji buttona!! Przykładowo jeżeli chcesz by po najechaniu myszką na napis by ten się zapalił, zmienił kolor lub coś innego musisz posiadać 2 jego wersje czyli 1 wersja (ta która jest widoczna na pierwszy rzut oka) oraz 2 wersja (ta która pokaże się gdy najedziesz na nią myszką).

 

4. Wyszukiwarka wbudowana w pasek nawigacji

Wyszukiwarka - czyli coś z czym ma problemy bardzo dużo ludzi. Osobiście uważam że powinni nagrać poradnik dla takich ludzi i nadawać go w telewizji by wgl. wiedzieli że takie coś istnieje lecz do rzeczy. Jeżeli mamy stronę z większym zakresem informacji wyszukiwarka to podstawa.

Będzie ona najlepiej widoczna na pasku nawigacyjnym lub w jego okolicach. Tworzymy ją bardzo prosto. Wyznaczamy pewny obszar i wypełniamy go kolorem najlepiej białym choć to zależy od kolorystyki strony. Możemy też dodać ramkę by nasza wyszukiwarka była bardziej widoczna na pasku nawigacyjnym. Gdy już mamy naszą wyszukiwarkę dodajemy tylko button który będzie odpowiadał za potwierdzenie. Najlepiej gdy jest on w innym kolorze niż nasza wyszukiwarka by był jak najbardziej widoczny.

 

 

 

 

_________________________________________________________________________________________________

 

 

 

 

Jeżeli chodzi o trzeci pasek nawigacji myślę że po przeczytaniu poprzednich tutoriali będziesz potrafił wykonać go samodzielnie. Wyjaśnie jedynie jak zrobić przerwy pomiędzy buttonami/kategoriami.

Tworzymy nową warstwę a następnie tworzymy linie ołówkiem (1px) o obojętnie jakim kolorze na naszym pasku nawigacji. Następnie wypełniamy go gradientem czarny-alpha. Styl ustawiamy na radial a Opacity czyli krycie na około 20% choć to zależy od kolorystyki.

 

 

 

 

_________________________________________________________________________________________________

 

Wszelkie błędy czy też problemy proszę pisać w temacie a postaram się je rozwiązać.

Tutorial jest w miare spory i pisany po północy tak więc mogą być w nim pewne błędy.

 

Do waszej dyspozycji oddaje również plik PSD z owymi paskami nawigacyjnymi

Plik jest jedynie do użytku własnego

 

 

_________________________________________________________________________________________________

 

 

 

 

 

 

Jak na razie żaden z użytkowników nie zamieścił swojej pracy w temacie

[RMCF1902]

Dodaj skan. Czas 1h

[Baksiu]

RMCF, ile razy mam Ci pisać, ze w FA nie trzeba skanu w dziale poradniki?

[Syrians]

Będzie więcej poradników na temat webdesignu?

Jakieś stopniowe tworzenie layotów, elementów strony, etc?

Chętnie skorzystam ;>

[ochota550]

Prawdopodobnie będzie ich więcej i to całkiem sporo, a to z tego względu iż jest to kierunek który nie jest rozwijany w naszym FanArcie.

Na chwile obecną będę musiał je robić tak na sucho czyli trochę objaśnienia oraz ss'y ponieważ aktualnie nie mam warunków do nagrywania.

[TheKonoszka]

Hah.;d

No w końcu coś z Webdesingu. Mam nadzieję, że będziesz stopniowo rozwijał ten kierunek w dziale..

Osobiście bardzo mi się przyda.. Like.;d

[Lukas.]

Ja również chętnie skorzystam z poradników o Web Desing'u Nauczę się czegoś nowego Like.