Дизайн блогу: практикум зі створення макета

39

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

1. Підготовка та організація груп.

Працювати будемо на білому полотні розміром 950 на 1600 px. Після того як поставите напрямні, ширину можна збільшити до 1200 px, так буде зручніше. Дуже часто після створення дизайну блогу в psd виходить величезна кількість шарів, з якими непросто розібратися. Якщо верстати макет буде недосвідчений майстер, додаткової роботи не уникнути, будете переробляти і розжовувати йому кожну фиговину.

Ми підготуємося заздалегідь і розділимо всі наші шари по папках/групам. Іменувати їх будемо згідно назв блоків: шапка, контент, навігація, сайдбар і футер. Якщо якась група в підсумку не знадобиться (хоча це буде дивно), просто її видалимо.

Дизайн блогу: практикум зі створення макета

2. Група Header

В моєму прикладі шапка зроблена на текстурі «папір». Як підготувати:

Беремо стандартну «Текстура паперу 1». знайти її можна в текстурах Фотошопа.

Magic Wand Tool прибираємо чорний фон.

Виносимо те, що вийшло, на новий шар і затаскиваем в групу Header.

Папір повинна зайняти всю верхню частину документа. Оригінальний колір нам не знадобиться, тому виставляємо Lightness на значення -100.

Логотип у мене самий простий текстовий, відображений по лівому краю. Шрифт — VTKS Caveirada. Будь-які нестандартні шрифти зберігаються в папку диск комп’ютера. Якщо Фотошоп їх не затягує на робочу панель, перезавантажте програму. Зберігайте готовий макет!

На правий край вставляємо посилання. Активні посилання у нас будуть виділені сірим, таку фігуру можна зробити інструмент Lasso Tool.

Дизайн блогу: практикум зі створення макета

3. Текстура фону

Навіть самий стандартний дизайн блогу на wordpress можна зробити унікальним, якщо додати оригінальну текстуру фону. Нам знадобиться «Текстура паперу 3», яку ми перенесемо на макет. Зображення має повністю покрити сторінку, для цього приберемо його під всі інші шари.

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

Дизайн блогу: практикум зі створення макета

4. Промальовування основною області — контент.

На моєму макеті буде дві основних інформативних області:

власне, сам контент — статті, наприклад, — і анонси до них;

і сайдбар.

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

Створюємо виділення шириною 660 px (перевірити свій окомір можна через вікно Info, ще зручно відображати лінійку в пікселях, тоді ви завжди будете орієнтуватися в розмірах). Заливаємо новий шар білим фоном.

Дизайн блогу: практикум зі створення макета

Додаємо стиль. Подивіться, які налаштування вибирав я:

Дизайн блогу: практикум зі створення макета

Додам тільки, що сірий колір краще вибирати не на око, а за кодом, тоді не буде зайвих переходів.

Тепер накладемо текстуру, підійде стандартна «папір 2». Копіюємо її через виділення. В основній макет переносимо новий шар поверх білої області. Через трансформування добиваємося потрібного розміру. Обесцвечиваем. Через криву корекції затемнюємо.

Дизайн блогу: практикум зі створення макета

Тепер робимо контур текстової області. 1. Натискаємо комбінацію «Ctrl + лівою кнопкою миші на шар на панелі». Отримане виділення треба модифікувати, по 3 px по периметру підійде. Інвертуємо виділення, натискаємо Delete. Готове.

Дизайн блогу: практикум зі створення макета

Ще у мене на текстуру накладена маска шару і градієнт. Налаштування як на картинці:

Дизайн блогу: практикум зі створення макета

5. Меню навігації.

Тепер займемося групою Navigation. З допомогою Rectangular Marquee Tool створюємо виділення, як показано на картинці.

Дизайн блогу: практикум зі створення макета

Робимо чорну заливку. Аналогічно створюємо необхідну кількість кнопок або просто копіюємо. Через Horizontal Type Tool підписуємо кнопки. Куточок крайньої кнопки потрібно «загнути». Робимо виділення і повертаємо його на 450.

Дизайн блогу: практикум зі створення макета

Вирізаємо виділення і відображаємо на 1800.Збільшуємо яскравість (Lightness) «загину» до 30. У час, що залишився простір у рядку вставляємо іконки шарінга (соц. мереж), розмір 32*32 підійде.

Дизайн блогу: практикум зі створення макета

6. Простору для контенту.

Перед додаванням тексту готуємо область контенту: виділяємо шар під основне наповнення. Через Transform Selection зменшуємо значення ширини на 40 px, отримуємо двосторонній відступ по 20 px.

Дизайн блогу: практикум зі створення макета

Виставляємо ще 2 напрямні всередині області. Вписуємо наш заголовок, я використовував Horizontal Type Tool і Adobe Garamond Pro шрифт. При цьому працюємо строго в групі Content.

Дизайн блогу: практикум зі створення макета

Додаємо інформаційну рядок. Готове. Переходимо до ілюстрації статті. Виділяємо область заданого розміру 620*275. Виділяємо її в новий шар і заливаємо чорним. Виставляємо параметри стилю в точності як на картинці:

Дизайн блогу: практикум зі створення макета

Застосовуємо обведення: Size 4, Opacity 62%, Color в тон. Вставляємо ілюстрацію над основним шаром, вписуємо його в рамку комбінацією Ctrl+Alt+G.

В наш контент залишилося додати кнопку «Читати далі», для заливки я використовував відтінок #8e0a13, відокремити горизонтальною лінією шапку і за описаною вище техніці вставити мініатюру до статті розміром 165*165 px.
Повинно вийти так:

Дизайн блогу: практикум зі створення макета

Для навігації по сторінках використовуємо квадратні кнопки і кольорові заливки.

Дизайн блогу: практикум зі створення макета

7. Поле пошуку

У новому шарі і прямокутної області створюємо поле пошуку на білому тлі. Налаштовуємо стиль інструкції:

Дизайн блогу: практикум зі створення макета

Група Sidebar

Для організації групи нам знадобиться: Створити дві області, чорну і #1f1f1f.

Дизайн блогу: практикум зі створення макета

Підписати області, як показано на картинці, фігури беремо з інструменту Custom Shape Tool. Не забуваємо про відступи.

Дизайн блогу: практикум зі створення макета

Аналогічно створюємо кожну область сайдбара, використовуючи вже знайомі нам техніки.

9. Футер

В моєму прикладі футер найпростіший. Зигзаг на верхній межі я зробив інструментом Magnetic Lasso Tool в тому ж шарі.

Дизайн блогу: практикум зі створення макета

10. Візерунок фону

Візерунок я малював сам, це не шаблон. Робиться дуже просто:

В окремому документі олівцем малюємо малюнок, зберігаємо через Edit — Define Pattern під довільним ім’ям.

Дизайн блогу: практикум зі створення макета

В основному документі створюємо новий шар над фоном і робимо заливку.

Дизайн блогу: практикум зі створення макета

Готовий макет повинен вийде такий:

Дизайн блогу: практикум зі створення макета

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