Dla webmastera > Tutoriale

Projektowanie nagłówka - tutorial by PA_BLO PT2

(1/2) > >>

PA_BLO:
LINK DO PIERWSZEJ CZĘŚCI TUTORIALU
Projektowanie pozostałych elementów graficznych
10. Mając zaprojektowane główne elementy naszego nagłówka, możemy przystąpić do zabrania się za pozostałe dodatkowe sekcje. Pierwszą z nich może być miejsce na tzw. ostatnio dodane zdjęcia. Będzie to mały box w kształcie prostokąta, który idealnie będzie pasował w miejscu pod wiadomością powitalną. Z uwagi na to, że chcę aby górna część nagłówka (powyżej nawigacji) zachowała lekkość, stąd moja decyzja aby elementy graficzne w tej części były delikatne. Uważam, że dobrym rozwiązaniem jest, aby tło w sekcji z ostatnimi zdjęciami było jasne i wtopione w tło - podobnie jak w przypadku tła pod wiadomością powitalną. Mocniejszym elementem tu może być komunikat o zdjęciach. W tym celu tworzę prostokąt o takiej samej barwie jak tło główne, z tym że tryb krycia zmieniam na "Łagodne światło", zmniejszając krycie do 30% - przez co, będzie ono o ton jaśniejsze od tła głównego. Teraz możemy przejść do stworzenia elementu oznaczającego, że to właśnie sekcja z najnowszymi zdjęciami. Fajnym rozwiązaniem jest wykorzystanie brushy typu "circle" dodając do nich podobny font, chociażby wcześniej wspomniane La Carte. {zobacz} Projektowanie samych miniaturek zdjęć zostawiam Wam, gdyż tu należy popisać się znajomością stylu CSS.

11. Innym fajnym rozwiązaniem jest stworzenie specjalnego boxu, gdzie można dodać inne ciekawe informacje, które nie pojawią się na stronie głównej w panelu bocznym. W tym celu poniżej poziomu nawigacji strony (dolna część nagłówka), stworzyłem prostokąt na szerokość nawigacji i wysokość mniej więcej taką samą jak kończy się główna postać. Prostokąt wypełniłem kolorem białym. Ale żeby nie było tak pusto, zdecydowałem się dodać dwa zdjęcia Miley aby wypełnić chociaż częściowo obszar tego contentu. Po odpowiednim dostosowaniu zdjęć wrzuciłem je i wykadrowałem aby zbędne brzegi nie wystawały po za krawędź boxu. Następnie obie warstwy ze zdjęciami złączyłem w całość z warstwą główną boxu. Teraz przystępujemy do nadawania stylu. Pierwszym efektem jaki dodałem był cień o trybie mieszania "Nakładka" i kryciu 13%. Jego kąt to 132 stopnie, odległość 1px, zasięg 0% i rozmiar 0px. Teraz przechodzimy do cienia wewnętrznego. Nadałem mu barwę odrobinę ciemniejszą od tła głównego. Tryb mieszania "Mnożenie", krycie 75%, odległość 0px, podlewka 7% i rozmiar to już zależy od Was (ja mam na 29px). Kolejny efekt to black wewnętrzny, którego krycie zmniejszyłem do 35%, podlewka na 0% zaś rozmiar to 5px. Kolor blasku wewnętrznego ustawiłem na o ton ciemniejszy błękit niż ten z tła głównego. Dodatkowo można pokusić się o obrys wewnętrzny o grubości 1px i kolorze minimalnie ciemniejszym niż tło.Gdy box jest już gotowy, to teraz pora uzupełnić go treścią. To zależy już od Was na co się zdecydujecie. Można dodać kilka słów o naszej gwieździe, wypromować jakiś jej projekt, zareklamować nowe wydawnictwo (płytę, film) bądź zwyczajnie dodać coś w postaci najnowszych wpisów z Twittera, odtwarzacz z utworami mp3. Ale te drugie rzeczy to już zabawa skryptem a tego w Photoshopie nie zrobimy. Dlatego też aby zobrazować Wam przykładowy efekt wypełnienia, wpisze przypadkowy tekst i nadam mu styl. Jak widać tło boxu mam dość jasne z elementami obrazów, ale co nie zmienia faktu iż jak dam za jasną czcionkę to zwyczajnie nie będzie jej widać. Dlatego postawiłem na zbliżony odcień błękitu, do tego jaki wykorzystałem podczas pisania wiadomości powitalnej. Jednak takie rzeczy jak dobór koloru czcionki trzeba samemu kontrolować gdyż przy każdym innym zastosowaniu palety barw, będzie wymagany inny kolor tekstu. Po lewej stronie przykładowo zdecydowałem się wspomnieć o najnowszym projekcie mojej głównej gwiazdy. Dlatego też, zrobiłem miniaturkę jej nowego albumu i napisałem kilka słów o nim. Dodałem też osobne odnośniki klikacze, aby czytelnik mógł przenieść się na konkretną podstronę w celu poznania większej ilości szczegółów. Jednak pamiętajcie, że nie należy też przesadzać z ilością elementów na nagłówkach, gdyż będą one dezorientować czytelnika. Oceniając dotychczasowy efekt, uważam że na tym etapie mogę zakończyć pracę nad nagłówkiem. Oczywiście można dodać więcej efektów, jednak wolałem nie przesadzać. Nagłówek prezentuje się tak {zobacz}.


Channah:
ojej instrukcja brzmi ciekawie a efekty są super, muszę koniecznie całość wypróbować i zobaczyć efekt ;))

Matthew:
Supeeeer  ;D  ;D  ;D

B△stille:
Instrukcja jak instrukcja - przydatna i praktyczna. Oczywiście wielki szacun dla gościa,który to przygotował i opracował specjalnie dla nas. Jednak moje zdanie na ten temat jest troszkę inne niż reszty ekipy. Uważam,że każdy grafik powinien tworzyć według własnych upodobań i to co jest najważniejsze - tworzyć swoje własne projekty. Takie instrukcje jak ta pozwala na kopiowanie pracy jeden do jednego. Oczywiście mój komentarz nie jest hejtem, po prostu to moje zdanie. Na stronach fanstrefowiczów ciężko o prawa autorskie do grafik bo każdy może nas skopiować (niestety). No,ale jeśli komuś to pomoże w odkryciu niesamowitego talentu,to tylko życzę powodzenia (:

PA_BLO:
B△stille, zgadzam się z Twoją wypowiedzią w 100%. Ale będąc na tym forum praktycznie od samego początku wiele razy pojawiały się wątki w których użytkownicy pytali się o to jak uzyskać dany efekt. Dlatego też, tutorial prezentowany przeze mnie jest stworzony mniej więcej po to, aby odpowiedzieć na takie pytania. Podobnie jak Ty uważam, że każdy powinien znaleźć swój styl, który najbardziej mu odpowiada. Ale nie będziemy mogli tego zmienić, aby większość porzuciła ten charakterystyczny styl tworzenia szablonów, gdyż jest on na tyle powszechny że blisko 70% stron na FanStrefie ma taki design. Nie przywłaszczam sobie prawa do takiego designu bo zdaje sobie sprawę, że nie jest to mój autorski wymysł. Ja robię tylko coś, w czym wiem że jestem dobry i staram się pomóc innym. Ale zapewniam Was, że przy tworzeniu szablonów potrafię rozróżnić to czego oczekuje ode mnie zamawiający a co chętnie ja sam widziałbym na swojej stronie. Stąd przyznaję, że ten styl w tutorialu nie jest moim stylem (tylko czymś co jest powielane i do czego sam metodą prób i błędów dochodziłem aby uzyskać efekt jak koledzy o koleżanki). Jeśli to komuś pomoże, to proszę bardzo i na zdrowie :)

Nawigacja

[0] Indeks wiadomości

[#] Następna strona

Idź do wersji pełnej