Створюємо гарний дизайн сайту з темним тлом і тонах

2

Від автора: з цього підручника ми дізнаємося, як розробити якісний дизайн веб-сайту в темних тонах в Adobe Photoshop. По мірі проходження навчального посібника з розробки сайту з темним фоном ми попрацюємо з простими формами (прямокутники, лінії, стрілки тощо), ефектами шару, шаблонами, імпортуванням і стилями параграфа, а також безліччю інших дизайнерських технік photoshop’у, які можна пристосувати до дизайну інтерфейсів своїх вебсайтів.

Програма: Adobe Photoshop

Версія: CS4 (або вище)

Складність: середня

Приблизний час виконання: 2 години

Завантажити вихідні коди

Кінцевий продукт (що Ви отримаєте)

разработка дизайна сайта

Про автора

Джуліан Шанилло (Julian Chaniolleau), також відомий як Devilcantburn, графічний та веб-дизайнер на фрілансі. Він також є автором статей на ThemeForest, його «перу» належать такі шаблони, як 96Display або Stereoline, його роботи можна подивитися на devilcantburn.com.

Цей дизайн сайту з темним фоном, є чудовим прикладом унікального стилю Джуліана. Виконаний в темних тонах, сайт досить вишуканий, навіть для використання в корпоративних сайту. Ескізи інших робіт Джуліана ви можете подивитися в його профілі на ThemeForest, DevilCantBurn.

Давайте приймемось за роботу!

Крок 1. Визначаємо документ

Почніть зі створення в photoshop’е нового документа розміром 1200 px x 1600px. Переконайтеся, що дозвіл встановлено на 72 pxs/дюйм, а фон визначено білим. Нам потрібно розкрити фоновий шар так, щоб можна було додати ефекти шару, клацніть по фону правою кнопкою миші і виберіть «Layer from Background» (Шар з фону). Потім ви можете знову перейменувати layer у background..

Заповніть фон кольором #101010.

Тепер створіть такі напрямні (Menu (Меню) > View (Вид) > New guide (Нова направляюча)…) :

120px по вертикалі

600px по вертикалі

1080px по вертикалі

У вас тепер є межі і середина області інтерфейсу.

Крок 2. Організуйте групи…

Для робочого процесу дуже важлива організація – так що наступним кроком ми почнемо створювати групи шарів (Layer Groups). Організований початок важливо з однієї основної причини: більшість величезних проектів вебсайтів при завершенні роботи мають сотні верств, так що якщо не почати з розумної організації, то легко загубитися, якщо ви не витратите якийсь час на групування елементів в папки («папки») і ретельне найменування всього і вся.

В панелі шарів (Layers panel) натисніть на іконку для створення нової папки, двічі клацніть на назву папки для його редагування. Зробіть те ж саме для всіх папок.

разработка дизайна сайта

Нам потрібні наступні основні папки для шарів:

Header (заголовок)

Slider (слайдер)

Main (основна частина)

Footer (нижній колонтитул)

разработка дизайна сайта

Крок 3. Створіть заголовок

Виберіть папку «header» в панелі шарів. Потім виберіть прямокутник (rectangle tool) з області векторних форм (Vector Shapes) інструментального ящика:

разработка дизайна сайта

Накресліть прямокутник. Назвіть його начебто «Top bar bg». Натисніть Ctrl+T або Cmd+T (для Mac) і встановіть його властивості 1200 px ширини на 10px висоти:

разработка дизайна сайта

Тепер додамо кілька тонких стилів; двічі клацніть на кольорове контрольне зображення в панелі шарів для встановлення кольору на #252525. Двічі клацніть на шар, щоб встановити ефекти шару як тут:

разработка дизайна сайта

Ця тонка внутрішня тінь («inner shadow») додасть до низу прямокутника ефект кромки – нам важливо відокремити його від решти схеми заголовка.

Крок 4. Створіть меню

Створіть в групі HEADER нову папку під ім’ям «Top Menu».

Накресліть новий прямокутник. Назвіть його типу «Top Menu bg». Натисніть Ctrl+T або Apple+T для встановлення властивостей як в «Top bar bg», але з висотою 90px і 10px в осьовій лінії Y. Так, цей прямокутник буде перебувати в панелі шарів прямо під шаром «Top nar bg».

разработка дизайна сайта

Створіть потрібний вам текст пунктів меню. Я використовую для створення меню шрифт «Droid Serif», але ви можете те, що хочете. Розташуйте його в 20px від правої напрямної лінії.

разработка дизайна сайта

Я вставляю по 4 пробілу («spaces») (4 рази натисніть на клавішу пробілу) між кожним пунктом і вибираю розмір шрифту 18px.

Крок 5. Додайте логотип

Створіть в групі HEADER над усіма групами нову папку з назвою «Top Logo». Натисніть її і виберіть Menu (Меню) > Files (Файли) > Import (Імпорт). Я включив в папку вихідних даних зразок логотипу під назвою «logo_zombie.psd». Виберіть його і розташуйте в 130px зліва і 5px зверху.

Можете додати до логотипу які завгодно нові ефекти стилю.

Крок 6. Створіть слайдер

Виберіть групу SLIDER, створіть прямокутник як в Кроці 3, і встановіть властивості 400px висоти і 100px в осьовій лінії Y.

Назвіть його приблизно «Gradient» і двічі клацніть на кольорове контрольне зображення в панелі шарів для визначення кольору #77b400. Двічі клацніть на шар для встановлення ефектів шару як тут:

разработка дизайна сайта

Градієнт від чорного (#00000) з непрозорістю 100% до чорного з непрозорістю 0

разработка дизайна сайта

Тепер у вас повинен вийти ескіз зразок цього:

разработка дизайна сайта

Стратегія додавання тіньового градієнта («shadow gradient») замість використання фіксованих кольорів дуже важлива, тому що дозволить нам пізніше легко змінювати кольори шляхом регулювання основного кольору прямокутника.

Далі створіть нову папку з назвою «slider_block». Створіть прямокутник (як правило, за допомогою векторного інструменту Заокруглений прямокутник (U)), в цій групі під ім’ям «Transparency».

разработка дизайна сайта

Розташуйте його згідно з цим значенням: двічі клацніть на шар в панелі шарів, щоб відкрити опції ефектів шару, і встановіть його як тут:

разработка дизайна сайта

Скопіюйте шар «Transparency», видалите опції ефектів шару і назвіть його «picture area». Встановіть непрозорість фону на 100% і зменшіть згідно з цим значенням для створення ефекту багатошаровості:

разработка дизайна сайта

Крок 7. Створіть керуючі елементи слайдера

Створіть новий документ 100px на 100px. Виберіть інструментарію користувача векторну фігуру Заокруглений прямокутник (U) і клацніть правою кнопкою миші на документ, щоб відкрити список користувацьких векторних фігур. Щоб створити стрілку, я почну з фігури стрілки за замовчуванням, а потім ми модифікуємо її під себе:

разработка дизайна сайта

Створіть фігуру шириною приблизно 50px. Назвіть шар «Arrow slider». Перетворіть її, як захочете… за допомогою інструменту white arrow (A), ви можете пристосувати векторні доріжки і зробити будь-яку власну стрілку…

разработка дизайна сайта

Накладіть на шар ефекти за допомогою цих параметрів:

разработка дизайна сайта

Видаліть фон цього документа і збережіть його як: ArrowSlider.psd в папці PSD.

Наведіть стрілку в групу «slider_block». Щоб зробити це: Menu (Меню) > File (Файл) > Import (Імпорт)… Виберіть ArrowSlider.psd і помістіть його у будь-яку, яку захочете, позицію поруч зі слайдером.

разработка дизайна сайта

Скопіюйте шар стрілки (Ctrl+J або Cmd+J) для створення стрілки ліворуч і додайте його.

Використовуйте для обертання стрілки до потрібного положення Menu (Меню) > Edit (Редагувати) > Transform (Трансформування) > Rotate on horizontal axis (Повернути по горизонтальній осі).

Крок 8. Підсвітите слайдер

Приховайте групу «slider_block».

Створіть новий порожній шар і візьміть інструмент Виділення кола (Circle selection (M)) для створення кола приблизно в 200px.

Заповніть її білим кольором.

разработка дизайна сайта

Реалізуйте виділення, потім використовуйте Filter (Фільтр) > Gaussian Blur (Розмиття Гауса) і встановіть на 50px.

разработка дизайна сайта

Встановіть злиття шару на overlay» (накладення) і пересуньте наверх слайдера.

Двічі скопіюйте цей шар і додайте шари внизу областьи слайдера ліворуч і праворуч…

разработка дизайна сайта

Крок 9. Виділіть слайдер

Скопіюйте шар «gradient» і перейменуйте його в «dark bar». Зменшіть висоту до 20px і додайте внизу шару «gradient».

разработка дизайна сайта

Змініть колір шару на чорний замість кольору градієнта та встановіть непрозорість фону шару на 60%.

Двічі клацніть, щоб відкрити опції ефектів шару і створіть Відкинути тінь (dropshadow) і Внутрішню тінь (innershadow), як тут:

разработка дизайна сайта

разработка дизайна сайта

Посуньте шар вниз на 1px.

Тепер у вас між слайдером і чорним фоном є красиво виділена лінія.

разработка дизайна сайта

Крок 10. Примусьте слайдер парити над поверхнею!

Відкрийте файл background.jpg з папки з исходниками (з викачаних файлів) і перейдіть до Menu (Меню) > Edit (Редагувати) > Define pattern (Задати шаблон)…. Потім закрийте файл.

Тепер виберіть шар фону, клацніть на нього двічі, щоб відкрити опції ефектів шару, і клацніть на таблицю шаблонів (Patterns). Клацніть тут новий, тільки що створений фон.

Тепер зробіть виділення шару прозорість (Transparency) (Ctrl + клік або Cmd + клацання на шар).

Створіть новий шар з назвою «Shadow», помістіть його під шар «Transparency».

Залийте його чорним кольором і додайте Розмиття Гауса (Gaussian Blur).

Menu (Меню) > Filters (Фільтри) > Blurs (Розмиття) > Gaussian Blur (Розмиття Гауса)… і зробіть його довжиною 20px.

Тепер перетворіть його, щоб виглядало як отбрасываемая тінь (dropshadow)….

разработка дизайна сайта

Знову використовуйте Menu (Меню) > Filters (Фільтри) > Blurs (Розмиття) > Gaussian Blur (Розмиття Гауса)… але вже з довжиною 5px.

І знову перетворити його, щоб розмір підходив під шар прозорість (transparency)….

разработка дизайна сайта

Виберіть шар «Shadow» і одночасно зробіть виділення шару «Transparency» (Ctrl+ клік або Cmd+ клацання на шар в панелі шарів).

Тепер переверніть виділення Ctrl+i або Cmd+i і клацніть на іконку для створення маски непрозорості в шарі «Shadow». Тінь зараз прихована під областю прозорості.

разработка дизайна сайта

Крок 11. Поліпшите логотип

Перед тим, як перейти до основної частини, ми доведемо до розуму логотип, зробимо його більш динамічним.

Створіть під шаром логотипу новий порожній шар і назвіть його «shadow logo». Зробіть виділення шару логотипу і заповніть шар «shadow logo» чорним.

Додайте Розмиття Гауса (Gaussian Blur) завдовжки 1,5 px.

Трансформуйте його. Ctrl + T або Cmd + T, щоб трансформувати, посуньте контрольну точку повністю вліво і пересуньте правий ідентифікатор вниз на 20px…

разработка дизайна сайта

Тепер у вас є гарний ефект глибокої тіні. Можете, якщо хочете, додати ще ефектів до самого логотипу!

Крок 12. Визначте колонки

Тепер ми додамо додаткові напрямні, щоб створити 4 колонки, які планується помістити інший контент…

Створіть такі напрямні (Menu (Меню)> View (Вид)> New guide (Нова направляюча)…) :

355px по вертикалі

375px по вертикалі

590px по вертикалі l

610px по вертикалі

825px по вертикалі

845px по вертикалі

У нас є тепер 4 колонки по 215px кожна і за 20px між ними.

Крок 13. Блок девізу

Імпортуйте geek_zombie.png з папки з вихідними даними і додайте його посередині першої колонки.

Створіть велику рядок девізу з потрібним вам текстом. Я використовував шрифт «Droid Serif» розміром 30px і висотою рядка 42pt. Звичайно, ви можете користуватися своєю власною розміткою тексту

Накресліть під девізом прямокутник висотою 7px.

Імпортуйте geek_zombie.png з папки з вихідними даними і додайте його посередині першої колонки.

Створіть велику рядок девізу з потрібним вам текстом. Я використовував шрифт «Droid Serif» розміром 30px і висотою рядка 42pt. Звичайно, ви можете користуватися своєю власною розміткою тексту

Накресліть під девізом прямокутник висотою 7px.

разработка дизайна сайта

Створіть на чорному прямокутнику ефекти шару, як тут:

разработка дизайна сайта

У вас вийшла смуга з красивою фаскою (ефектом об’ємності).

разработка дизайна сайта

Виберіть 3 шари (Зомбі + Девіз + чорна смуга), і натисніть Ctrl + G або Cmd + G, щоб їх згрупувати. Перейменувати групу «Slogan». Зверніть увагу, наскільки організованими ми залишаємося в процесі роботи!

Крок 14. Блок першої колонки

Візьміть інструмент Текст (Text) і створіть назву. Я знову використовую шрифт 30pt – зауважте, як він схожий на девіз, щоб оформлення було схожим. Таким чином досягається послідовний, професійний вигляд всього дизайну.

Визначте область тексту приблизно в 128px від заголовка і вставити у неї маленький текст – «заповнювач». Я користуюся 13pt Arial, але ви можете взяти будь-який, який вам подобається.

Скопіюйте створену нами раніше для девізу чорну смугу і вставити її під текстом 20px від низу тексту.
Змініть розмір так, щоб він заповнив першу колонку.

разработка дизайна сайта

Створіть за допомогою векторної форми (Vector Shape (U) область малюнка 215 x 88px.

Скопіюйте її, перейменуйте його в «Tranparency_1col»і розтягніть в довжину, щоб вийшов блок 215 x 108px.

Натисніть Ctrl+ або Cmd+, щоб зрушити шар в панелі шарів вниз.

Виберіть шар «Transparency» і скопіюйте ефекти стилю, щоб застосувати їх до скопіювати шару («Tranparency_1col»).

Тепер можна вставити в область малюнка своє зображення. Клацніть правою кнопкою миші на зображення і виберіть «Create clipping mask» (Створити отсекающую маску).

разработка дизайна сайта

Крок 15. Створіть інші колонки

Тепер можна скопіювати першу колонку (група шару), а потім зрушити її до другій колонці. Змініть вміст (зображення/текст) на потрібне вам.

Зробіть те ж саме для колонок 3 і 4…

разработка дизайна сайта

Крок 16. Нижній колонтитул

Перейдіть до Menu (Меню) > Image (Зображення) > Canvas size (Розмір області) та введіть розмір області як тут:

разработка дизайна сайта

Накресліть прямокутник. Назвіть його начебто «Footer bg». Натисніть Ctrl+T або Cmd+T (для Mac) і встановіть властивості:

разработка дизайна сайта

Двічі клацніть на кольорове контрольне зображення в панелі шарів, щоб встановити колір на #101010. Двічі клацніть на шар, щоб встановити ефекти шару, як тут:

разработка дизайна сайта

Виділіть та скопіюйте шари «dark bar» і «Gradient» з групи Slider.

Згрупуйте шари і розмістіть їх у панелі шарів під «footer bg».

Пересуньте їх вниз документа.

Змініть розмір, щоб створити потрібний стиль.

У своєму прикладі я зробив шар градієнта висотою 35px і шар «Dark bar» – заввишки 8px …

Вставити логотип вниз прямо в 20px від направляючої праворуч.

разработка дизайна сайта

Скопіюйте пункти верхнього меню, щоб вставити їх в нижній колонтитул поверх шару «footer bg».

Створіть рядок copyright шрифтом Arial, 11pt, чорного кольору.

разработка дизайна сайта

Скопіюйте «footer bg» і зменшіть його висоту до 10px.

Посуньте його прямо на «footer bg». Так ви створите для нижнього меню гарний ефект фаски.

разработка дизайна сайта

Готово! Створюйте власні версії!

разработка дизайна сайта

разработка дизайна сайта

разработка дизайна сайта

Висновок

Спасибі за увагу, на цьому урок з созданияю красивого дизайну веб-сайту в темних тонах закінчено! Сподіваюся, ви зможете скористатися прийомами і техніками цього навчального посібника в своїх власних проектах. Якщо ви, сподіваюся, запам’ятали, у створенні добре спроектованого сайту ключовий момент – це організація. Такі ж точно комплекти шарів можна використовувати для створення структури HTML/CSS на початку кодування. Ще раз спасибі!

киберсант-вебмастер

E-mail: [email protected]

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.