Дизайн фан-сайту крок за кроком

Цей пост готувався і готувався вже дуже давно. Спочатку він мав вийти як продовження циклу статей "Створення фан-сайту" (раз і два). Що ж тоді ця стаття робить у блозі Fable 3? Відповідь проста: у випадку з дизайном без абсолютно конкретного прикладу нічого не поясниш. Не буває сферичного дизайну у вакуумі. Тому, коли деякий час тому було вирішено робити перезапуск одного з наших фан-сайтів, присвячених серії ігор Fable, я вирішив, що ось він той самий приклад, з допомогою якого я буду "ділитися премудростями".

Насправді, я, звичайно, не ставив собі за мету розкрити велику таємницю всесвіту або ж з допомогою однієї статті навчити створювати унікальний дизайн для вашого фан-сайту. Тема дизайну величезна і багатогранна, щоб один дизайнер міг її повністю розкрити на прикладі всього однієї роботи... Ще хочу відразу зауважити, що це не урок роботи з Photoshop. Їх вистачає і без мене, гугл в допомогу. Як автор я передбачаю, що ви вже знайомі з азами функціоналу Photoshop, а значить покрокових інструкцій "натисніть сюди", "перейдіть туди" не чекайте. Це не урок по Photoshop, це майстер-клас по створенню дизайну. Я розповім про те, як працюю я, підкажу деякі хитрощі та секрети, які насправді не секрети, але чомусь про них часто забувають. Приступимо :)

Готуємо мольберт і полотно

У нашому випадку мольбертом буде, як ви вже могли здогадатися, Photoshop CS4, а полотном наш вихідний, поки що пустий новий файл. Окрім "фотожаби" є ще й інші програми, наприклад Gimp. Дехто встигає працювати в Corel Draw. Але так чи інакше, краще Photoshop людство поки що програми для веб-дизайну не придумало. Це основний інструмент веб-дизайнера. Той же Corel Draw або Adobe Illustrator можуть використовуватися для створення окремих елементів вашого дизайну, але "збирати" макет зручніше всього в Photoshop.

З "мольбертом" розібралися, прийшов час полотна. Тут варто згадати про роздільну здатність екрану. Років п'ять назад всюди і скрізь панувала роздільна здатність 1024х768, а 1280х960 тільки починало захоплювати уми людей. Кілька років тому 1680х1050 і 1600х1200 вважалися великим розділом. Сьогодні ж монітори з дефолтним Full HD стають все більш нормою дня, т.е. орієнтуватися в якості максимального розділення нам варто на 1920х1080. Тим не менш, 1024х768 не поспішає остаточно піти на пенсію, а значить це наша нижня планка. Насправді принципово в більше мірі саме ширина, оскільки по висоті наш сайт буде довгим-придовгим, як і 90% усіх сайтів в мережі.

Раніше було модно робити "тягнучі" сайти. Т.е. окремі елементи дизайну складалися з повторюваних частин, завдяки чому сайт розтягувався в ширину під роздільну здатність користувача. Але з приходом Full HD такий метод підгонки сайту під роздільну здатність користувача став неестетичним. Людське око влаштоване так, що інформація, розташована на відстані витягнутої руки, сприйматися добре з ширини, приблизно рівної листу А4. Все, що ширше - вже не в фокусі. Тому контентну частину останнім часом прийнято робити вузькою, а залишену ліворуч і праворуч простір заповнюється якимось фоновим декором. Так і вівці ситі, і вовки цілі :) І так, контентна частина у нас буде дорівнює 1000 пікселів (не забувайте, що в браузері праворуч є рядок скролла, яка "з'їдає" ці самі 24 пікселі з 1024). Відповідно наша область під "поля" з фоновими красотами буде (1920-1000)/2=460 пікселів зліва і справа. Щоб не вийти ненароком за цю область я використовую напрямні. В режимі включених лінійок я просто провожу курсором і "протягую" напрямні на потрібні місця. Можна також позначити відразу центр нашого полотна. Я ще приблизно відзначив по висоті те місце, яке я відводжу під шапку сайту, в майбутньому вона буде рухатися, але "зарубку" я собі зробив. Все, попередня робота завершена. Переходимо до підготовчої :)

Попередня підготовка завершена

Черпаємо натхнення

Ця стадія найпростіша і складна одночасно. Вам потрібно зібрати матеріал, з якого ми і будемо творити наш дизайн. Якщо ви професійний художник, ви, звичайно, можете самостійно намалювати всі необхідні арти і елементи інтерфейсу або доручити це своїй команді... З іншого боку, в такому випадку, що ви, Артемій Татьяныч Андреевич, забули в цій статті? :) Це стаття для початківців. Нам знадобляться тематичні арти і елементи для нашого інтерфейсу або принаймні те, з чого ці елементи ми зможемо зробити. Швидше за все, що з першого разу ви не наберете всього необхідного для своєї роботи, а значить до пошуку артов і натхнення доведеться повертатися ще не раз. Шукати я зазвичай починаю з офіційного сайту, потім переміщуюсь на великі фан-сайти, якщо такі є. А після цього переключаюсь на пошук картинок Гуглом і Яндексом. При чому саме обома пошуковими системами, оскільки результати видачі сильно відрізняються. Там, де сфейлить один, інший знайде тонни матеріалу. Добре, якщо арта багато, є великі скріншоти інтерфейсу гри, розробник випускає багато обоїв... але найчастіше вам хоч чого-небудь, але не вистачатиме.

В результаті моїх пошуків було знайдено немало арту по Fable і не тільки, по різним частинам гри. Але ось по третій частині гарних артов кот наплакав. Але ви збирайте все: обої, концепти, скріншоти... Ніколи не знаєш, що тобі знадобиться. Повною добіркою знайденого матеріалу я не буду вас утомляти. В спойлері ви знайдете ті елементи, які в підсумку лягли в основу дизайну.

Ця рамка в підсумку була розібрана на цілу купу окремих елементів інтерфейсу


Перший нормальний арт, знайдений по третій частині

А це другий арт. Все, більше в потрібній стилістиці не знайшлося нічого

А ось цей арт був відразу взятий під фон. Він не ідеальний, але краще не знайшлося.

Арт до другої частини знадобився вже в самому кінці роботи

Куди ж без логотипа?

Починаємо роботу

От тепер можна братися за роботу. Підкажу відразу маленьку хитрість, я регулярно зберігаю результати роботи під новим ім'ям дотримуючись історії версій. За замовчуванням перший результат це версія 0_1, далі йдуть 0_2, 0_3 і т.д. Версія 1_0 настає тоді, коли ви вважаєте, що зробили все, що хотіли і можна починати показувати роботу рецензентам/друзям/замовникам. Швидше за все, що дизайн вимагатиме правок. Тоді з'являться версії 1_1, 1_2 і т.п. Це зручно, щоб відстежувати свій власний прогрес, а ще для того, щоб у разі необхідності була можливість повернутися до ідей з більш старої версії або висмикнути звідти якийсь елемент, який в поточній версії ви видалили або змінили до неузнаваності.

І ще одна порада, в Photoshop всі ваші елементи зберігаються на окремих шарах. Не лініть, відразу давайте їм осмислені імена, а шари якогось окремого елемента групувати з допомогою функції ctrl+b. Коли у вашому файлі накопичується понад 100 шарів, розібратися без підписів і групувань стає вкрай важко.

Але досить балаканини, пора подивитися на перший результат. Хоча це навіть не перший, це майже нульовий:

На цьому етапі приблизно обрисована область для контенту, арту легли орієнтовно на ті місця, де вони могли б бути. По всюди видні вже видимі вами і не видимі елементи, які в подальшому повинні будуть вписатися в дизайн. Ну або не вписатися. Рухаємось далі. На цій стадії, до речі, було проведено дві важливі технічні роботи. Дуже старанно з фону був вирізаний наш персонаж, а рамка розібрана на дрібні частини.

Для вирізання я частіше користуюсь не ластиком, а масками шару. Чорним кольором закриваємо області, які треба приховати, білими залишаємо видимі частини. Полутонові сірого - області напівпрозорості. Завдяки цьому, якщо я сотру щось зайве, його можна буде легко повернути на місце. Вирізаного персонажа в максимальному розділенні я зберіг окремо, щоб не загубився.

Рамка була розібрана на частини відрізанням дрібних шматочків і перетворенням їх на текстури. Кутки - це відбиті ще тричі лівий верхній куточок. Так я досяг симетричності.

Спочатку дизайн планувався похмурим, по стилю близьким нашим першим двом основним артам. З допомогою м'яких кистей і різних режимів змішування вдалося перетворити фон, досить вже яскраву картинку, в досить похмуре полотно. Контентну частину я намагався зобразити у вигляді складеного втроє пергаменту, який мала б обрамляти знайома вам золота рамка. Корона, як один з ключових елементів, продовжувала присутність у дизайні. Я почав потроху підшукати собі шрифт для меню.

З красивими кириличними шрифтами мається невелика напруга. Тому що, як правило, їх просто немає. Т.е. англійські букви є, а російських немає. Або за російську версію просять немалих грошей, або руська версія зроблена народними умільцями криво і паскудно. Ну або ж все добре, але шрифт нечитаємий :) Шрифт на картинці називається bonzai. Кому треба, звертайтеся. Поділюсь. Ідемо далі.

Після деяких мук почало по трохи прорисовуватись щось осмислене. Зроблено першу версію головного меню (воно потім зміниться, але заготівля стане в нагоді не раз). Уважні товариші можуть помітити, що ліва і права частина цього меню - це наша корона, поєднана з завитком з рамки. Не бійтеся комбінувати різні елементи інтерфейсу. Разом вони часто дають несподіваний, але приємний результат. Крім того, змінилась концепція основної контентної частини. Я намагався зобразити щось на зразок королівської мантії, але результат мені зовсім не сподобався. А тому прийшло волеве рішення, концепцію змінити.

Це ще не нова ітерація, це, по суті, просто проба пера: а як воно буде виглядати у світлому варіанті і без "мантії"? - Явно краще, але треба думати далі. До речі, елементи зліва вгорі це "літери" шрифту fleur. Чудова річ для створення елементів інтерфейсу. Ціла купа завитків і квітків в одному флаконі.

А ось і щось нове. Я експериментував з розташуванням нашого героя в шапці сайту, але головне не це. Я відмовився від горизонтального меню і спробував зробити вертикальне. А що, виглядає зовсім непогано. А центральне меню у нас зсунулося в футер.

Ще одна проміжна ітерація, де я порівнював горизонтальне меню і вертикальне, підсумовуючи про те, щоб зробити бічні блоки розсовуваними по кліку.

Ось він той самий випадок, коли вам знадобляться збережені попередні версії. Дизайн пішов кудись зовсім не туди. Сувій на всю ширину контенту разом з рамкою посередині і зменшеними рамками для бічних блоків виглядає жахливо. Я відмовився від цього варіанту, повернувся на крок назад і вирушив іншим шляхом.

І ось він момент істини! Повернувшись на крок назад, попрацювавши з нашими елементами, в підсумку вийшов макет, який вже досить близький до фінального. Усі основні елементи зібрані і на своїх місцях: головне меню, бічні блоки, контент, шапка і футер. Якщо придивитися, то можна помітити, що деякі з попередньої невдалої ітерації мені все ж знадобилися. Текстова розмітка бралася з веб-сайту про Dragon Age, тільки щоб прикинути розташування тексту. В якості основного був взятий Palatino Linotype. Це красивий стандартний шрифт, що дуже важливо. У цьому випадку ваш сайт без проблем буде відображатися у всіх користувачів Windows точно. Є спосіб, звичайно, використовувати власні шрифти, які сайт буде завантажувати в кеш користувача, але це зайва трафік і проблеми відображення шрифту в різних браузерах. Не рекомендую захоплюватись цим. В інтернетах є чудова таблиця стандартних шрифтів Windows. Сам користуюсь, і вам рекомендую. А ось в шапці, можна і навіть потрібно використовувати декоративні шрифти. Для назви сайту саме на цій стадії я знайшов чудовий шрифт, який називається Algerius Caps. Відчуйте різницю з тим, що був!

Досить цікавий етап, який наочно демонструє, що навіть у близькому до завершення дизайні завжди можна щось покращити. По-перше, я все ж відмовився від нижнього меню і остаточно перетворив його на футер. Пам'ятаєте, я говорив, що горизонтальне меню нам ще знадобиться? - Знадобилося. Сам макет був очищений від вже непотрібних елементів, щоб вони не захаращували нам дизайн. Але саме головне в тому, що короні в дизайні знайдено остаточне місце. Долой меч з ножен! Ми беремо один з наших артов і випилюємо з нього руку з мечем і короною. Робота з закрашуванням логотипа, який висів поверх рукавички, була просто филигранною. Це той випадок, коли масштаб вище 1000% буває не зайвим. А ще я почав працювати з кольорокорекцією нашого фону. Занадто він жовто-зелений. Приглушив його. Я для цього зазвичай використовую додатковий шар, залитий потрібним кольором з типом змішування soft light (м'який світло), але по мірі необхідності можна пробувати і інші типи змішування. У цьому випадку гамма коректувалась за допомогою блакитного шару.

Я продовжував вдосконалювати дизайн. Виправив розташування арта на фоні, знову поправив його кольорову гаму. Прибрав майже весь залишок після попереднього очищення сміття, один завиток тільки пропустив. Але ще звернув увагу, що на фоні неба назва сайту виглядає блякло. А тому я виправив стиль і зробив його контрастним до фону, але тим не менш з використанням основних кольорів сайту.

Фінішна пряма

Парааааам! Ось вона версія 1_0. Насправді не остаточна, але саме на цій стадії я вирішив показати макет своїм друзям і послухати критику. Сміття тут вже немає зовсім, в черговий раз зроблений фон. Але що ще важливо, додана менюшка з пошуком і кнопочками соціальних мереж. Спочатку буде працювати тільки RSS, але вже скоро відкриється твіттер, ютуб-канал і сторінка на фейсбуці.

Перше важливе зауваження - нашому герою явно одиноко в шапці сайту. Йому потрібна компанія. На жаль, красивих жіночих артов до третьої частини виявлено не було, але на допомогу прийшла циганка з арта до другої частини. Воно і до речі. Сайт адже не тільки про третю частину. Взамін на дівчину нашого героя довелося позбутися пістолета, він став явно зайвим.

Але на цьому справа не закінчилася, надійшла ще одна порція зауважень. Сайт вийшов дуже кричуще золотим, а золота рамка у центральному контентному блоці забирала занадто багато місця. Ну що ж, відтінок приглушив за допомогою шарових ефектів, рамку зменшив. Ланцюги, які ускладнювали дизайн і ускладнювали верстку, також були прибрані. Настав момент істини. Остаточний варіант:

www.Fable-game.ru

Послесловие

Насправді попереду нас ще чекала верстка, яка також внесла свої невеликі корективи. Наприклад, розташування фону і героїв стосовно нього. Були ще правки стилів, пошук багів і ляпів. Але це вже справа техніки. Найскладніше позаду. Коли ви дійшли до цього етапу, можна розслабитися, похвалити себе і сміливо заносити в своє портфоліо нову роботу. А вже потім братися за наповнення і донаповнення сайту матеріалами, продумувати оптимальну структуру... але це вже зовсім інша історія :)

Щиро сподіваюсь, що моя "розповідь з картинками і про картинки" припала вам до душі, а головне, що він допоможе вам у створенні ваших власних красивих, неповторних, дивовижних дизайнів для ваших сайтів. Чекаю ваших запитів, пропозицій або зауважень у коментарях.

*Автор дизайну і тексту я, Ksandr\_Warfire

Матеріал підготовлений спеціально для GAMER.ru