Створюємо якісну тему для блогу в Adobe Photoshop

30

Від автора: З цього підручника ви дізнаєтеся, як простими, прямими дизайнерськими прийомами можна створити якісну тему для блогу спільноти в Adobe Photoshop. Кілька технік, обговорюваних в цьому посібнику, включають використання належних інтервалів, друкарської розмітки тексту, квітів і зорової ієрархії — деяких основних інструментів з шухлядки успішного дизайнера. Давайте почнемо!

Перед тим, як ми приступимо до створення теми для блогу, я Вам рекомендую переглянути демо-результат роботи.

Вид нашої теми блогу, яку ми створимо

создать тему блога

Сьогодні ми розглянемо дизайн теми «Revolution Magazine» Алекса Паскаля (Alex Pascal) для WordPress. Повна версія з кодом доступна на ThemeForest в якості теми блогу WordPress.
Revolution Magazine – якісний, сучасний, першокласний журнал WordPress, який також виконує роль блогу спільноти, персонального блогу або чого завгодно. Якщо вам не вистачало іскри, щоб змусити палати свій простий старий блог і перетворити його в популярний журнал, то вважайте, що знайшли її.
Втім, все починається з дизайну, і Алекс проведе нас по тому шляху, яким він дістався до стадії дизайну свого проекту. Так як це навчальний посібник тільки по дизайну, він не буде вдаватися в кодування теми, але пам’ятайте про те, що в якості живого прикладу ви можете переглянути тему Revolution на ThemeForest.

Крок 1

Перейдіть до File (Файл) > New (Новий) > потім встановіть висоту приблизно на 2000px, ширину на 1400px і дозвіл на 72dpi.

создать тему блога

Крім того, потрібно переконатися, що всі Rulers (Лінійки) і Guides (Напрямні) видно. Отже, ми переходимо до View (Вид) > Extras (Додатково) / Rulers (Лінійки)/ Snap (Захоплення) (щоб наші об’єкти вирівнюються по напрямних).

создать тему блога

Тепер нам потрібно встановити кілька направляючих ліній для використання пізніше у своєму дизайні. Перейдіть до View (Вид) > New Guide… (Нова направляюча)> відзначте «Vertical» (Вертикальний) і впишіть наступні значення, для вставки натискаючи після кожного «OK». Нам потрібні напрямні лінії на 220px, 250px, 380px, 420px, 830px, 860px, 880px, 1155px і 1180px.

Тепер давайте заповнимо фон суцільним кольором. Виберіть шар «Background» (Фон), клацніть на ньому правою кнопкою миші, виберіть «Layer from background» (Шар з фону) і назвіть його. Тепер, використовуючи інструмент Rectangular Marquee (Виділення прямокутника) (M), створіть виділення з всієї робочої області і залийте його кольором #d0d0d0.

создать тему блога

Крок 2

Тепер створимо фон заголовка. Створіть новий шар і назвіть його «header» (заголовок), потім скористайтеся інструментом Rectangular Marquee (Виділення прямокутника) (M) і зробіть виділення зверху робочої області з інтервалом висотою 175px повністю через всю робочу область, заповніть будь-яким кольором. Двічі клацніть на тільки що створений шар і клацніть на «Gradient Overlay» (Накладення градієнта) > існуюче зображення градієнта > потім встановіть крайній праворуч колір на #383838. Розташуйте крайній лівий колір приблизно на 60% і змініть #2D2D2D.

создать тему блога

Тепер рухаємося далі і копіюємо шар «header» (заголовок), переміщаємо його прямо під перший заголовок. Ще раз двічі клацніть шар і перейдіть до «Gradient Overlay» (Накладення градієнта) > існуюче зображення градієнта > потім встановіть крайній правий колір на #e0e0e0. Розташуйте лівий колір приблизно на 50% і змініть колір на #d0d0d0.

создать тему блога

Тепер натисніть на «Inner Shadow» (Внутрішня тінь) і змініть колір на #EEEEEE, непрозорість на 100%, відстань на 1px, фільтр на 100% і розмір на 0px. Змініть кут на 90 градусів і зніміть перевірку «Global Lighting» (Загальне освітлення), так як в своїй темі ми будемо використовувати різні кути освітлення.

создать тему блога

Тепер, коли фон у нас повністю готовий, давайте зробимо логотип вашого сайту! Створіть новий шар приблизно в 40px зверху, вирівняний по першій направляючої лінії, вживши Horizontal Type (Горизонтальний текст) (T), впишіть назву сайту своїм улюбленим шрифтом (демо-зображеннях використовується Helvetica Neue LT Std, але звичайні Helvetica або Arial теж підійдуть). Продовжіть зміна ефектів шару (Layer Styles) як на прикладі внизу.

создать тему блога

Ось як цей момент повинен мати заголовок.

создать тему блога

Крок 3

Вебсайт – ніщо без переходів, а тут вона така гарна! Давайте створимо панель навігації, відповідну до існуючого фону заголовка.

Навігація

Створіть новий шар і назвіть його «Vertical Gradient» (Вертикальний градієнт), візьміть інструмент Rectangular Marquee (Виділення прямокутника) (M) і зробіть виділення розміром 960px на 40px в 115px від верху робочої області, залишивши під ним приблизно 20px для фону, і заповніть його будь-яким кольором. Потім можна додати ефекти тільки що створеного шару (Layer Styles), як показано на зображенні нижче.

создать тему блога

создать тему блога

создать тему блога

Тепер скопіюйте тільки що створений шар і перейменуйте його в «Horizontal Gradient» (Горизонтальний градієнт). Змініть ефекти шару відповідно зображенню нижче.

создать тему блога

Нарешті, створити лінію розміром 960px на 1px в новому шарі з назвою «darklight» прямо над попередніми двома шарами і заповніть її кольором #1d1d1d. Ваша навігація зараз повинна виглядати приблизно як на зображенні внизу.

создать тему блога

Тепер давайте спробуємо зробити власну кнопку «домашньої» посилання («home» link), яка буде виділятися з інших посилань. Створіть новий шар і зробіть виділення за допомогою інструмента Rounded Rectangle (Заокруглений прямокутник) (U) приблизно 50px на 60px по вертикалі кольором #444444 і заповніть нижні закруглені кути так, щоб було виділення закруглено тільки вгорі.

Скачайте цю домашню іконку, відкрийте її в Photoshop і імпортуйте в свою робочу область. Змініть розмір приблизно до 18px на 17px і заповніть кольором #999999. Додайте її по центру свого попереднього шару і у вас тепер буде стильна домашня посилання!

Далі ми збираємося додати в свою елементи навігації! Візьміть інструмент Horizontal Type (Горизонтальний текст) (T), встановіть наступні стилі і впишіть пункт меню. У нашому прикладі перший пункт – це «Documentation» (Документація) з описом підтримки теми і керівництвом («theme support & guide»). Додайте стільки пунктів, скільки вам потрібно, залишаючи відступ 20px між усіма елементами меню.

создать тему блога

Іконки соціальних мереж

Для наступного кроку нам знадобляться іконки соціальних мереж. Ми почнемо з закачування цього комплекту іконок соціальних мереж від KomodoMedia, а потім розмістимо чотири іконки і десатурируем (зробимо менш насиченими) їх (Shift + Ctrl + U), як на зображенні нижче.

создать тему блога

Вітаємо! Заголовок нашого сайту вже повністю готовий! Давайте продовжимо працювати з його тілом.

Крок 4

Тепер, коли зроблений весь заголовок, ми продовжимо робити тіло свого сайту.

Основне тіло

Для початківців — ми збираємося розділити тіло (body) на дві половини: одну для основного вмісту і іншу – для бічної колонки (sidebar). Створіть новий шар, назвіть його «main body» і зробіть виділення за допомогою Rectangular Marquee (Виділення прямокутника) (M) шириною 640px і висотою такою, яка вам потрібна (щонайменше 1000px або близько того), починаючи прямо знизу від фону заголовка. Заповніть виділення кольором #ffffff. Тепер створіть новий шар, назвіть «sidebar» і зробіть виділення шириною 320px праворуч від шару «main body» і висотою такий же, як у нього. Заповніть #e6e6e6.

создать тему блога

Далі ми присвоїмо бічній колонці легку внутрішню тінь з лівої сторони для створення ілюзії «ламаного краю». Додайте до шару «sidebar» ефекти.

создать тему блога

Особливий слайдер

Створіть новий шар і, використовуючи Rectangle Marquee (Прямокутне виділення) (M), зробіть виділення розміром 960px на 360px зверху тіла, прямо під навігацією, і заповніть її кольором #e6e6e6. Створіть інший шар і, залишивши з усіх боків поле в 25px, всередині попереднього виділення зробіть виділення розміром 910px на 312px, заповніть кольором #ffffff. У ефекти шару додайте сюди внутрішній штрих в 1px кольором #dddddd.

создать тему блога

Для наступного кроку нам знадобиться пробне зображення для використання в якості заповнювача. Підійде будь-яке зображення чого завгодно, так що просто знайдіть що-небудь 580px на 300px і вставте в новий шар, зробіть зазори по 5px від кожної сторони тільки що зробленого нами контейнера.

создать тему блога

Створіть новий шар і назвіть його «tab_hover». Візьміть інструмент Rectangle Marquee (Прямокутне виділення) (M) і зробіть виділення 320px на 41px одразу праворуч від зображення у верхньому правому куті контейнера з білим слайдером. Заповніть будь-яким кольором. Скористайтеся інструментом Polygonal Lasso (Многоугольное ласо), клацніть 20px зліва від прямокутника, прямо посередині вертикалі і тримати натиснутим Ctrl, перетягуючи по діагоналі вгору і вправо, поки не дійдете до верхнього лівого кута прямокутника. Все ще притримуючи Ctrl, потягніть вниз, поки не дійдете до нижнього лівого кута прямокутника і, нарешті, тягніть назад до вихідного положення.

Заповніть це виділення будь-яким кольором.

Перейдіть до додавання ефектів, показаних на зображенні внизу, до шару «tab_hover».

создать тему блога

Тепер зробіть виділення Rectangle Marquee (Прямокутне виділення) (M) 320px на 92px прямо під «закладкою», додайте його в новий шар, названий «tab_space» та застосувати необхідні ефекти шару, описані на зображенні.

создать тему блога

Тепер давайте повторимо все знову для створення інших «закладок», дотримуючись злегка різних стилів для розрізнення «активного» стану від інших закладок.

создать тему блога

В кінці ми прийдемо до чогось на зразок цього і будемо готові продовжувати!

создать тему блога

Крок 5

Фьють! Ми майже закінчили! Найскладніше вже позаду, давайте продовжимо працювати над тілом сайту. У цьому кроці ми обговоримо основні техніки, такі як розташування інтервалів.
Почнемо ділянку «Latest Post» (останній пост) з власне посту. Давайте зробимо рамку за допомогою виділення розміром 615px на 210px інструментом Rectangle Marquee (Прямокутне виділення) (M), заповнивши його будь-яким кольором, у новому шарі з назвою «border», а потім додамо описаний на зображенні внизу градієнт. Як тільки закінчите з цим, вставити зображення розміром 610px на 200px, залишаючи всередині рамки відступи в 5px. Зображення не важливо, так що знову можете використовувати в якості заповнювача все, що завгодно!

создать тему блога

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

создать тему блога

Наступна частина досить зрозуміла. Використовуючи Horizontal Type (Горизонтальний текст) (T), напишіть заголовок, мета-інформацію і підписи для зображень-заповнювачів (для економії часу можете взяти текст з демоизображения), звертаючись за допомогою у встановленні інтервалів і вирівнюванні до попереднього зображення. Якщо потрібні стилі текстів, зверніться до зображень нижче. Коли додані всі тексти, візьміть Rounded Rectangle (Заокруглений прямокутник) (U) і зробіть кілька кнопок швидкого доступу (приблизно 120px на 32px), вирівняйте їх по лівій стороні від посади і додайте ефекти як на зображенні внизу. У вас зараз має вийти привабливий пост, який можна дублювати знову і знову — до почуття повного задоволення!

создать тему блога

Крок 6

Бічна колонка – майже така ж життєво важлива деталь теми блоку спільноти! У показових цілях ми просто створимо кілька характерних віджетів — безсумнівно, неможливо охопити користувальницький дизайн кожного елемента, але навіть незначна частина дозволить вашому винахідливого розуму злетіти і створити їх ще безліч!

Для цієї ділянки роботи нам знадобиться безкоштовний Icon Pack від Graphic River і імпортувати в свій проект іконки RSS 48x48px і Twitter 48x48px. Розташуйте їх у 20px від лівого боку бічної колонки і переконайтеся, що вони вертикально вирівняні по першому посту ліворуч.

Візьміть Horizontal Type (Горизонтальний текст) (T) і напишіть довільну кількість передплатників, використавши шрифт Georgia, а слова «subscribers» і «followers» – Arial, як показано на зображенні нижче.

создать тему блога

Як щодо простого рекламного віджета? Звичайно! Візьміть інструмент Rectangular Marquee (Прямокутне виділення) (M) і зробіть виділення 280px на 410px, заповніть простим білим кольором і привласніть йому внутрішній штрих в 1px кольору #dddddd. Візьміть пару зразків-оголошень з Theme Forest і вкладіть їх у новий контейнер, залишивши між кожними відступи в 9-10px (залежить від того, чи робляться вони між рамками або між кожним оголошенням).

Нарешті, напишіть швидкий текстовий віджет (Text Widget) за допомогою Horizontal Type (Горизонтальний текст) (T), використовуючи стилі, дані на зображенні внизу.

создать тему блога

Візьміть Rectangular Marquee (Прямокутне виділення) (M) і зробіть контейнер розміром 280px на 225px. Заповніть його кольором #eeeeee і зробіть внутрішній штрих в 1px кольору #dbdbdb. У новому шарі зробіть закладку приблизно 84px на 37px у верхньому лівому куті контейнера, залишаючи відступи в 4px з кожного боку, потім в тому ж шарі створіть інше виділення 270px на 180px і заповніть білим, створюючи прямокутник з маленьким висить зліва вгорі прямокутником.

Зробіть в ньому внутрішній штрих в 1px кольором #e0e0e0. Закінчите дві інші закладки, кожен раз залишаючи відступ 4px з кожної сторони. Заповніть текстом шрифту Arial 12px Bold. Зробіть маркер абзацу 3px на 3px, заповнений #bbbbbb і створіть стільки абзаців, скільки хочете.

создать тему блога

Ось і все з бічної колонкою, давайте перейдемо до решти сайту!

Крок 7

Тепер повільно закінчуємо цей сайт … вгадали, нижнім колонтитулом! Давайте зробимо нижній колонтитул, швиденько створивши для нього фон. Візьміть Rectangle Marquee (Прямокутне виділення) (M) і створіть виділення 960px на 510px в новому шарі, прямо під фоном основного тіла (main body). Заповніть виділення кольором #2d2d2d. Воно послужить нижнім колонтитулом з 4 колонками. Прямо під цим кольоровим блоком зробіть виділення 960px на 60px, заповніть його #1d1d1d і вкладете в новий шар. Воно послужить сегментом нижнього колонтитула «copyright» і є простим, але ефективним способом позначити кінець сторінки.

создать тему блога

На сайті у нас в нижньому колонтитулі буде 4 однакових колонки, кожна шириною 200px з полем 25px між ними. Щоб все було однаковим, ми залишимо 25px зверху нижнього колонтитула, після чого будуть заголовки кожної колонки. Давайте, візьміть Horizontal Type (Горизонтальний текст) (T) і почніть друкувати заголовки кожної колонки, використовуючи стилі, описані на зображенні внизу. Залишаючи 20px під заголовками, напишіть короткий параграф або список елементів, відокремлений простим крапковим роздільником за принципом «один піксель ставимо, другий пропускаємо».

создать тему блога

Висновок

Вітаємо, ви тільки що створили якісну тему для блогу спільноти в Adobe Photoshop.

Сподіваємося, ви засвоїли деякі підказки й хитрості щодо того, як розробляти окремі сторони якісно організованих сайтів і зможете в майбутньому використовувати ці навички у своїх проектах!

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

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

E-mail: [email protected]

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