Projektowanie strony fanowskiej krok po kroku

Ten post był planowany i przygotowywany od bardzo dawna. Początkowo miał być kontynuacją cyklu artykułów "Tworzenie strony fanowskiej" (jeden i dwa). Co zatem robi ten artykuł na blogu Fable 3? Odpowiedź jest prosta: w przypadku designu bez konkretnego przykładu ciężko coś wytłumaczyć. Nie ma sferycznego designu w próżni. Dlatego, gdy jakiś czas temu postanowiono wznowić jeden z naszych fanowskich serwisów poświęconych serii gier Fable, postanowiłem, że to właśnie ten przykład, za pomocą którego będę "dzielić się tajemnicami".

W rzeczywistości nie stawiałem sobie za cel ujawnienia wielkiej tajemnicy wszechświata ani nauczenia w jednym artykule jak stworzyć unikalny design dla Twojej strony fanowskiej. Temat designu jest ogromny i wieloaspektowy, by jeden projektant mógł go w pełni omówić na przykładzie jednej pracy... Chcę także od razu zaznaczyć, że to nie jest instrukcja obsługi Photoshopa. Jest ich sporo i bez mnie, Google w pomoc. Jako autor zakładam, że jesteś już zaznajomiony z podstawami funkcjonalności Photoshopa, dlatego nie oczekuj krokowych instrukcji "kliknij tutaj", "przejdź tam". To nie jest lekcja Photoshopa, to warsztat tworzenia designu. Opowiem jak pracuję, podpowiem kilka sztuczek i sekretów, które wcale nie są sekretami, ale jakoś często się o nich zapomina. Zaczynajmy :)

Przygotowujemy sztalugę i płótno

W naszym przypadku sztalugą może być, jak pewnie już się domyślasz, Photoshop CS4, a płótnem nasze źródłowe, wciąż puste nowe plik. Oprócz "fotomontażu" są też inne programy, takie jak Gimp. Niektórzy udają się do pracy w Corel Draw. Ale mimo wszystko lepszego Photoshopa jak dotąd ludzkość nie wymyśliła. To główne narzędzie projektanta webowego. Ten sam Corel Draw czy Adobe Illustrator mogą być używane do tworzenia poszczególnych elementów designu, ale "składać" projekt najwygodniej jest w Photoshopie.

Z "sztalugą" się uporaliśmy, przyszedł czas na płótno. Warto tutaj przypomnieć o rozdzielczości ekranu. Pięć lat temu wszędzie panowała rozdzielczość 1024x768, a 1280x960 dopiero zaczynało zdobywać umysły ludzi. Kilka lat temu 1680x1050 i 1600x1200 uważano za wysoką rozdzielczość. Dziś monitory z domyślnym Full HD stają się coraz bardziej normą, czyli mając na uwadze maksymalną rozdzielczość powinniśmy oczekiwać 1920x1080. Niemniej jednak 1024x768 nie spieszy się z przejściem na emeryturę, więc to nasza dolna granica. W rzeczywistości kluczowa jest głównie szerokość, ponieważ wysokość naszej strony będzie długa jak 90% wszystkich stron w sieci.

Kiedyś modne było robienie "ciągnących się" stron. Tzn. poszczególne elementy designu składały się z powtarzających się elementów, przez co strona rozciągała się w szerokości w zależności od rozdzielczości użytkownika. Ale z przybyciem Full HD taka metoda tuningu strony według rozdzielczości użytkownika stała się nieestetyczna. Ludzkie oko jest tak ułożone, że informacje umieszczone na wyciągnięcie ręki są odbierane dobrze z szerokości mniej więcej równej arkuszowi A4. Wszystko co szersze - jest już poza polem widzenia. Dlatego ostatnio standardem stało się robienie zawartości wąską, a pozostałą przestrzeń po lewej i prawej stronie wypełnia się jakimś tłem. Tak owce są syte, a wilki całe :) A więc nasza część z zawartością wyniesie 1000 pikseli (nie zapominajcie, że w przeglądarce po prawej stronie jest pasek przewijania, który "zjada" te 24 piksele z 1024). Odpowiednio, nasza przestrzeń na "pola" z tle będzie (1920-1000)/2=460 pikseli po lewej i prawej stronie. Aby nie wyjść przypadkowo poza ten obszar, używam prowadnic. W trybie włączonych linijek po prostu przesuwam kursor i "przenoszę" prowadnice na odpowiednie miejsca. Można również od razu oznaczyć środek naszego płótna. Dodatkowo zablokowałem sobie miejsce, które przeznaczam na nagłówek strony, w przyszłości się ona będzie przesuwać, ale „zaznaczenie” zrobiłem. Wszystko, wstępne przygotowanie zakończone. Przechodzimy do przygotowawczej :)

Wstępne przygotowanie zakończone

Czerpiemy inspirację

Ten etap jest jednocześnie najprostszy i najtrudniejszy. Będziesz musiał zgromadzić materiały, z których stworzymy nasz design. Jeśli jesteś profesjonalnym artystą, z pewnością możesz samodzielnie narysować wszystkie potrzebne elementy lub zlecić to swojemu zespołowi... Z drugiej strony, w takim razie, co ty, Artemij Tatjanowicz Andreevich, robisz w tym artykule? :) To artykuł dla początkujących. Potrzebujemy tematycznych grafik i elementów do naszego interfejsu lub przynajmniej czegoś, z czego te elementy możemy stworzyć. Prawdopodobnie za pierwszym razem nie zgromadzisz wszystkiego, co potrzebne do swojej pracy, więc będziesz musiał wracać do poszukiwań grafik i inspiracji wielokrotnie. Zwykle zaczynam od oficjalnej strony, następnie przechodzę na duże fanowskie strony, jeśli takie istnieją. A potem przesiadam się na wyszukiwania grafik w Google i Yandex. Przy czym używam obu wyszukiwarek, ponieważ wyniki są znacząco różne. Gdzie jedna zawodzi, druga znajdzie tony materiału. Dobrze, jeśli grafik jest dużo, są duże zrzuty ekranu interfejsu gry, twórca wydaje dużo tapet... ale najczęściej i tak czegoś brakuje.

W wyniku moich poszukiwań znalazłem sporo grafik dotyczących Fable i nie tylko, dotyczących różnych części gry. Ale co do trzeciej części, ładnych grafik było bardzo mało. Zbieraj wszystko: tapety, koncepcje, zrzuty ekranowe... Nigdy nie wiesz, co się przyda. Nie będę was męczyć pełnym zestawem zebranego materiału. W spoilerze znajdziecie elementy, które ostatecznie stały się podstawą designu.

Ta ramka została ostatecznie rozłożona na całą masę osobnych elementów interfejsu


Pierwsza normalna grafika, znaleziona w trzeciej części

To druga grafika. Więcej w potrzebnej stylistyce nic nie znalazłem

Ta grafika została od razu wybrana na tło. Nie jest idealna, ale nic lepszego nie znalazłem.

Grafika do drugiej części była przydatna już na samym końcu pracy

Jakbyż bez logo?

Zaczynamy pracę

Teraz możemy zabrać się do pracy. Podpowiem od razu mały trik, regularnie zapisuję wyniki pracy pod nową nazwą, dbając o historię wersji. Domyślnie pierwszy rezultat to wersja 0_1, potem są 0_2, 0_3 itd. Wersja 1_0 nadchodzi wtedy, gdy uważasz, że zrobiłeś wszystko, co chciałeś, i możesz zacząć pokazywać pracę recenzentom/przyjaciołom/zleceniodawcom. Prawdopodobnie design będzie wymagał poprawek. Wtedy pojawią się wersje 1_1, 1_2 itd. To wygodne, żeby śledzić swój postęp, a także w razie potrzeby móc wrócić do pomysłów z wcześniejszej wersji lub ściągnąć stamtąd jakiś element, który w obecnej wersji usunąłeś lub zmieniłeś do niepoznania.

I jeszcze jedna rada, w Photoshopie wszystkie twoje elementy są przechowywane na osobnych warstwach. Nie leniuchuj, by od razu nadawać im sensowne nazwy, a warstwy konkretnego elementu grupować za pomocą funkcji ctrl+b. Kiedy w twoim pliku składa się ponad 100 warstw, rozróżnienie bez podpisów i grupowania staje się niezwykle trudne.

Ale dość gadania, czas spojrzeć na pierwszy rezultat. Choć to właściwie nie jest pierwszy, to niemal zerowy:

Na tym etapie zarysowana została mniej więcej przestrzeń dla zawartości, grafiki poszły na orientacyjne miejsca, gdzie mogłyby się znaleźć. Wszędzie widać już elementy, które w przyszłości powinny wkomponować się w design. No albo się nie wkomponują. Idziemy dalej. Na tym etapie nota bene wykonano dwie ważne prace techniczne. Bardzo starannie z tła został wycięty nasz bohater, a ramka rozłożona na małe części.

Do wycinania najczęściej używam nie gumki, a maski warstwy. Czarne pole malujemy nad obszarami, które chcemy ukryć, a białymi zostawiamy widoczne części. Odcienie szarości - obszary półprzezroczystości. Dzięki temu, jeśli skasuję coś niepotrzebnego, będzie można łatwo przywrócić to z powrotem. Wydzielonego bohatera w maksymalnej rozdzielczości zachowałem osobno, więc się nie zgubi.

Ramka została rozłożona na części przez odcinanie małych kawałków i przekształcenie ich w tekstury. Rogi - to trzykrotnie odbity lewy górny róg. Tak zdobyłem symetrię.

Początkowo design planowano mroczny, w stylu bliskim naszym pierwszym dwóm elementom graficznym. Dzięki miękkim pędzlom i różnym trybom mieszania udało się przekształcić tło w dość mroczny obraz. Część zawartości próbowałem przedstawić w postaci złożonego potrójnie pergaminu, który miał być otoczony znaną wam złotą ramką. Korona, jako jeden z kluczowych elementów, wciąż była obecna w designie. Powoli zaczynałem układać sobie nową czcionkę do menu.

Z ładnymi czcionkami cyrylicznymi jest trochę problemów. Zazwyczaj ich po prostu nie ma. Tzn. są angielskie litery, ale nie ma rosyjskich. Albo za wersję rosyjską żądają niemałych pieniędzy, albo wersja rosyjska jest źle zrobiona przez ludowych rzemieślników. No albo wszystko jest dobrze, ale czcionka jest nieczytelna :) Czcionka na obrazku nazywa się bonzai. Kto potrzebuje, niech pisze. Podzielę się. Idziemy dalej.

Po pewnych mękach zaczęło się powoli wykrystalizowywać coś sensownego. Zrobiona została pierwsza wersja głównego menu (potem zmieni się, ale podstawa będzie przydatna nie raz). Uważne osoby mogą zauważyć, że lewa i prawa część tego menu to nasza korona połączona z zawinięciem z ramki. Nie bójcie się łączyć różnych elementów interfejsu. Razem często dają niespodziewany, ale miły efekt. Poza tym zmieniła się koncepcja głównej części z zawartością. Próbowałem przedstawić coś w rodzaju królewskiego płaszcza, ale efekt mi się zupełnie nie spodobał. Dlatego podjąłem decyzję o zmianie koncepcji.

To jeszcze nie nowa iteracja, to w zasadzie po prostu próba pióra: a jak to będzie wyglądać w jasnej wersji i bez "płaszcza"? - Zdecydowanie lepiej, ale trzeba myśleć dalej. Przypominam, że elementy po lewej stronie u góry to "litery" czcionki fleur. Wspaniała sprawa do tworzenia elementów interfejsu. Cała masa zawinięć i kwiatuszków w jednym opakowaniu.

A oto coś nowego. Eksperymentowałem z rozmieszczeniem naszego bohatera w nagłówku strony, ale najważniejsze nie to. Zrezygnowałem z poziomego menu i spróbowałem zrobić pionowe. A co, całkiem nieźle. A centralne menu przeszło do stopki.

Jeszcze jedna pośrednia iteracja, w której porównywałem poziome menu i pionowe, zastanawiając się nad zrobieniem bocznych bloków rozwijających się po kliknięciu.

Oto ten moment, kiedy przydadzą się zapisane wcześniejsze wersje. Design poszedł w zupełnie złym kierunku. Rolka w całej szerokości zawartości razem z ramką na środku i zmniejszonymi ramkami dla bocznych bloków wyglądała fatalnie. Zrezygnowałem z tej wersji, wróciłem krok wstecz i podążyłem inną drogą.

I oto moment prawdy! Wracając o krok wstecz, po zabawach z naszymi elementami, w końcu powstał układ, który jest już bardzo bliski ostatecznemu. Wszystkie główne elementy są zebrane i na swoich miejscach: główne menu, boczne bloki, zawartość, nagłówek i stopka. Jeśli się przyjrzysz, możesz zauważyć, że coś z poprzedniej nieudanej iteracji i tak mi się przydało. Tekstowe formatowanie było brane z przypadku z strony o Dragon Age, by po prostu oszacować układ tekstu. Jako główny użyłem czcionki Palatino Linotype. To ładna standardowa czcionka, co jest bardzo ważne. W takim przypadku twoja strona bez problemu wyświetli się wszystkim użytkownikom Windows. Można oczywiście używać własnych czcionek, które strona będzie ładować do pamięci podręcznej użytkownika, ale to dodatkowy ruch i problemy z wyświetlaniem czcionek w różnych przeglądarkach. Nie radzę się w to wdrażać. W internecie znajduje się świetna tabela standardowych czcionek Windows. Sam korzystam, i polecam ci. A w nagłówku można, a nawet trzeba używać czcionek dekoracyjnych. Na tym etapie znalazłem niesamowitą czcionkę, znaną jako Algerius Caps. Poczuj różnicę z tym, co było!

Bardzo interesujący etap, który wyraźnie demonstruje, że nawet w projekcie bliskim ukończenia zawsze można coś poprawić. Po pierwsze, zrezygnowałem z dolnego menu i ostatecznie przekształciłem je w stopkę. Pamiętasz, mówiłem, że poziome menu jeszcze będzie potrzebne? - Przydało się. Sam układ został oczyszczony z już niepotrzebnych elementów, żeby nie zaśmiecały nam designu. Ale najważniejsze, że korona w designie znalazła swoje ostateczne miejsce. Dość z mieczem z pochwy! Bierzemy jeden z naszych grafik i wycinamy z niego rękę z mieczem i koroną. Praca nad zakryciem logo, które wisiało nad rękawicą była po prostu misterną. To ten przypadek, kiedy skala powyżej 1000% nie jest zbyteczna. A jeszcze zacząłem pracować nad korekcją kolorów naszego tła. Zbyt żółto-zielony. Stłumiłem go. Zwykle stosuję dodatkową warstwę, pokrytą potrzebnym kolorem z trybem mieszania soft light (miękki światło), ale w razie potrzeby można próbować i innych typów mieszania. W tym przypadku gamma była korygowana za pomocą niebieskiej warstwy.

Kontynuowałem dopracowywanie designu. Poprawiłem rozmieszczenie grafiki na tle, ponownie poprawiłem jej kolorystykę. Usunąłem prawie cały pozostały po poprzednim czyszczeniu bałagan, tylko jeden ornament przeoczyłem. Ale jeszcze zwróciłem uwagę, że na tle nieba nazwa strony wygląda blado. Dlatego poprawiłem styl i uczyniłem go kontrastowym w stosunku do tła, ale jednak z użyciem podstawowych kolorów strony.

Finałowa prosta

Para aaaam! Oto wersja 1_0. W rzeczywistości nie jest ostateczna, ale na tym etapie postanowiłem pokazać układ moim przyjaciołom i posłuchać krytyki. Nie ma tu już w ogóle bałaganu, po raz kolejny poprawiono tło. Ale co jeszcze ważne, dodano menu z wyszukiwarką i przyciskami mediów społecznościowych. Początkowo będzie działać tylko RSS, ale już wkrótce zostanie uruchomiony Twitter, kanał YouTube i strona na Facebooku.

Pierwsza ważna uwaga - nasz bohater zdecydowanie jest samotny w nagłówku strony. Potrzebuje towarzystwa. Niestety, pięknych żeńskich grafik do trzeciej części nie znaleziono, ale z pomocą przyszedł cygan z grafiki do drugiej części. A to jest zresztą na czasie. Strona nie dotyczy tylko trzeciej części. W zamian za dziewczynę, naszego bohatera trzeba było pozbawić pistoletu, stał się on oczywiście zbędny.

Ale na tym nie koniec, nadeszła kolejna porcja uwag. Strona okazała się zbyt krzykliwie złota, a złota ramka wokół centralnego bloku zawartości zajmowała zbyt wiele miejsca. Cóż, odcień stłumiłem za pomocą efektów warstwy, ramkę zmniejszyłem. Łańcuchy, które obciążały design i komplikowały kod też zostały usunięte. Nastał moment prawdy. Ostateczna wersja:

www.Fable-game.ru

Po słowie

W rzeczywistości przed nami czekało jeszcze kodowanie, które również wprowadziło swoje drobne poprawki. Na przykład, układ tła i bohaterów w związku z nim. Były jeszcze poprawki stylów, wyszukiwanie błędów i niedociągnięć. Ale to już techniczna sprawa. Najtrudniejsze za nami. Gdy dotrzesz do tego etapu, możesz się zrelaksować, pochwalić się i śmiało umieścić nową pracę w swoim portfolio. A potem zabierać się do napełniania i uzupełniania strony materiałami, przemyśleć optymalną strukturę... ale to już zupełnie inna historia :)

Szczerze mam nadzieję, że moja "opowieść z obrazkami i o obrazkach" przypadła Wam do gustu, a przede wszystkim, że pomoże Wam w tworzeniu Waszych własnych pięknych, niepowtarzalnych, zdumiewających designów dla Waszych stron. Czekam na Wasze pytania, propozycje lub uwagi w komentarzach.

*Autorem designu i tekstu jestem ja, Ksandr\_Warfire

Materiał przygotowany specjalnie dla GAMER.ru