Дизайн чистої і елегантний макет блогу в Photoshop CS6

У цьому уроці я збираюся показати вам процес створення простий і чистий дизайн блогу за допомогою останнього Photoshop. Ми збираємося використовувати нове Стилі символів і Стилі абзаців щоб допомогти нам оптимізувати процес.

Щоб виконати цей підручник, потрібні такі ресурси:

Безкоштовний шрифт Sansation від Bernd Montag.
26 Повторюваний зразок пікселів з PSDfreemium.
Безкоштовні іконки соціальних медіа від Daniele Selvitella.

Демо

Підготовка полотна

Крок 1

У цій конструкції ми плануємо використовувати 960 gs. Завантажте шаблон зі своєї головної сторінки та у файл zip, знайдіть файл Photoshop. Відкрийте файл "12 Grid колонки" у Photoshop.

Натисніть піктограму очей для шару сітки 12 Col, щоб приховати його; ми зараз не будемо потрібні.

Крок 2

Поточний розмір полотна занадто малий. Натисніть Зображення> Розмір полотна (або Ctrl + Alt + C). Додайте більший розмір і переконайтеся, що встановіть його опорну точку в центр.

Крок 3

Натисніть Ctrl + R, щоб відкрити лінійку. Натисніть Перегляд> Нове Керівництво для створення нового керівництва, яке допоможе нам точно сконструювати. Виберіть Вертикальна і на Посаді: 185 px зробити вертикальну направляючу 185 px з верхнього лівого верхнього кута.

Крок 4

Намалюйте іншу вертикальну напрямну в положенні 150 px, 1095 px і 1130 px.

Нижче наведено остаточне керівництво всередині полотна.

Підготовка кольорової теми

Крок 5

Для цього дизайну ми збираємося використовувати комбінацію кольорів від Colorlouver. Натисніть посилання "Попередній перегляд", щоб відкрити комбінацію кольорів як файл jpeg.

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

Підготовка фону

Крок 6

Виберіть Фон шар і клацніть значок блокування на панелі "Шари", щоб розблокувати його. Двічі клацніть на мініатюрі, щоб змінити колір.

Натисніть другий колір, # 948371, , щоб вибрати його.

Крок 7

Намалюйте прямокутну форму на верхній частині полотна. Це буде другий фон.

Етап 8

Збережіть форму. В Панель параметрів, відчинено Заповніть Колір і натисніть кнопку колір колесо значок. Коли відкриється діалогове вікно вибору кольору, натисніть перший колір, щоб вибрати його. За її Інсульт виберіть колір Немає.

Крок 9

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

Змінити його Суміш режиму до Екран і зменшити його Непрозорість до 37%.

Крок 10

Створіть новий шар і назвіть його "тінь".

Намалюйте прямокутний вибір внизу вторинного фону, як показано. Натисніть Редагувати: заповнити. Набір Використовуйте до Чорний. Натисніть в порядку для заповнення виділення чорним.

Крок 11

Зм'якшіть його за допомогою Gaussian Blur. Натисніть Фільтр> Розмиття> Розмивання по Гауссу.

Крок 12

Утримуючи клавішу Alt, помістіть курсор між ними тінь і верхній фон шар. Не відпускаючи клавішу Alt, натисніть кнопку перетворити шар на Clipping Mask. Перетворюючи його на Clipping Mask, тінь тепер переходить у верхній фон.

Крок 13

Зберіть тінь Непрозорість до 50% щоб зробити його тонким. Нижче ви можете побачити результат у 100% збільшенні.

Крок 14

Це завжди гарна ідея поставити ці шари в одну групу. Зробити це, виберіть всі шари а потім натисніть Ctrl + G.

Заголовок

Крок 15

Намалюйте прямокутник на верхньому полотні, як показано на малюнку.

Крок 16

В Панель параметрів, набір Інсульт колір до # af9f8e.

Крок 17

За її Заповніть виберіть колір лінійний градієнт від # d0c4b9 до # a89c91.

Нижче наведено результати зі 100% перегляду.

Назва сайту

Крок 18

Додайте назву сайту з лівого боку дизайну. Слідкуйте за розміщенням, як показано нижче. Двічі клацніть текст і додайте Тінь. Для шрифту використовуйте Sansation.

Використання стилів символів

Крок 23

Давайте збережемо налаштування символів як стиль символів. Ця функція є спрощеною версією стилів символів у InDesign. Щоб зберегти його, активуйте текст і натисніть значок "Новий стиль символу".

Двічі клацніть новий стиль символу та використовуйте наведені нижче параметри.

Крок 24

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

Крок 25

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

Крок 26

Отже, в чому сенс використання стилів символів? Стилі символів допомагають нам централізувати налаштування символів. Ми можемо просто редагувати стиль символів, щоб редагувати кожен текст за допомогою цього стилю. Див. Приклад нижче. Якщо ми редагуємо тип шрифту всередині стилю символів Головне меню - Звичайне до Corbel, все нормальне меню автоматично змінюється на Corbel.

Крок 27

Зробіть новий шар і розмістіть його під смужкою меню. Ctrl-клацніть на панелі меню, щоб зробити новий вибір на основі його форми. Заповніть його чорний.

Крок 28

Видалити виділення за допомогою комбінації клавіш Ctrl + D. Gaussian Blur, Фільтр> Розмиття> Розмивання по Гауссу.

Повзунок

Крок 29

Намалюйте прямокутну форму шириною 10 стовпців (див. Нижче).

За її Колір заливки виберіть # dfd1c2. За її Інсульт виберіть # c8baac з розміром 10 пт. Натисніть невелику стрілку зі списком поруч із переглядом рядка та переконайтеся, що Вирівняти всередині вибрано.

Крок 30

Вставте зображення на верхню частину кадру. Перетворити на Відсічна маска натиснувши Ctrl + Alt + G. Зображення автоматично перейде в рамку слайдера. Якщо потрібно, ви можете переміщати та змінювати розмір зображення, не впливаючи на його кадр.

Крок 31

Намалюйте іншу прямокутну форму за повзунком одного кольору. Переконайтеся, що він прив'язаний до найвідповідальнішого посібника. Додати Стиль шару> Накладення шаблону використання піксельного шаблону з PSDfreemium. Тон вниз його Непрозорість зробити його тонким.

Крок 32

Намалюйте прямокутну форму над формою Заповніть: # b3aca5 і без обведення. Натисніть Ctrl + T, а потім повернути на 45 °. Перетворити форму шару на Відсічна маска.

Крок 33

Дублюйте форму і змініть її розмір. Змінити його Заповніть до більш темного кольору. Перетворити форму шару на Відсічна маска.

Крок 34

Повторіть той самий крок, щоб намалювати іншу стрілку на іншій стороні.

Крок 35

Натисніть Ctrl-клік, щоб створити новий вибір. Зробіть новий шар і перетворіть його в a Відсічна маска. Заповніть виділення за допомогою чорний.

Крок 36

Після цього зніміть виділення (Ctrl + D) пом'якшують використовуючи Gaussian Blur.

Якщо потрібно, можна зменшити непрозорість тіні.

Крок 37

Намалюйте закруглений прямокутник на кут повзунка Заповніть # c8baac.

Крок 38

Намалюйте коло у формі. Встановіть його Інсульт до чорний з розміром 1 пт і видалити заливку.

Крок 39

Виберіть коло шлях використання Вибір шляху інструмент. Shift + Alt - перетягніть шлях, щоб повторити його.

Повторіть це, щоб намалювати більше кіл.

Крок 40

Виберіть один з контурів кола. Натисніть Ctrl + Shift + J, щоб вирізати його на новий шар.

Крок 41

В Панель параметрів, видалити його Інсульт і змінити його Заповніть до a радіальний градієнт від # e38989 до # bb5c5c. Додати Стиль шару> Зовнішнє світіння і Тінь.

Крок 42

Намалюйте еліптичний вибір під повзунком. Зробіть новий шар і заповніть його чорний.

Крок 43

Зніміть виділення (Ctrl + D). Пом'якшити його за допомогою Gaussian Blur.

Нижній фон

Крок 44

Намалюйте іншу прямокутну форму для нижнього фону. Використовуйте те ж саме Заповніть і Інсульт колір у вигляді повзунка.

Як завжди, будьте дуже обережні з його розміщенням. Ми хочемо, щоб це покрило кожне керівництво на полотні.

Додати Стиль шару> Накладення шаблону.

Нижче наводиться результат у 100% збільшенні.

Крок 45

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

Крок 46

Зробіть новий шар, помістіть його за форму. Заповніть виділення за допомогою чорний. Натисніть Ctrl + T, клацніть правою кнопкою миші та виберіть Перспектива.

Перетягніть його верхній кут назовні.

Знову клацніть правою кнопкою миші та виберіть Масштаб. Перетягніть верхню ручку вниз.

Клацніть правою кнопкою миші та виберіть Деформація. Перетягніть лівий і правий сегменти всередину.

Пом'якшити його за допомогою Gaussian Blur.

Тон вниз Непрозорість до 20%.

Крок 47

Намалюйте білий фон у фоновому режимі. Це буде фон для основного вмісту сайту.

Додайте до лівої, правої та верхньої сторони фону пробіл на 10 px. Інтервал повинен бути легким, тому що ми зробили керівництво на ранніх етапах. Додати Стиль шару> Зовнішнє світіння.

Крок 48

Додайте новий напрямок, 25 px з верхньої сторони форми.

Заголовок розділу

Крок 49

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

Додайте заголовок розділу та його опис за допомогою інструмента "Текст". Застосовуйте стилі, які ми зробили раніше. Переконайтеся, що з верхньої сторони фону додайте простір розміром 25 px за допомогою допомоги, наданої раніше.

Крок 50

Намалюйте рядок 5 px під описом сайту Заповніть: # 938270 і Обведення: Немає.

Повідомлення про блог

Крок 51

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

Крок 52

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

Крок 53

Намалюйте прямокутну форму під заголовком з шириною 4 стовпців. Набір білий за її Заповніть і #bebebe за її Інсульт. Додати Стиль шару> Обведення.

Крок 54

Вставте зображення поверх форми. Перетворити його на відсічну маску (Ctrl + Alt + G).

Крок 55

Намалюйте закруглений прямокутник Заповніть: # 8e8380 і Обведення: Немає. Перетворити на Відсічна маска.

Крок 56

Створіть нові стилі символів для метаданих блогу.

Крок 57

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

Крок 58

Активувати Тип і перетягніть, щоб створити текстове поле. Встановіть його ширину до 4 стовпців. Натисніть Тип> Вставити Lorem Ipsum заповнити його автоматично згенерованим Lorem Ipsum з Photoshop.

Крок 59

Створіть новий стиль абзацу для вмісту символу. Натисніть нову піктограму на панелі "Стилі абзацу".

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

Етап 60

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

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

Крок 61

Намалюйте закруглений прямокутник Заповніть: # 8e8380 і Обведення: Немає. Додати Стиль шару> Накладення шаблону. Для узгодженості використовуйте той же шаблон, що й у повзунку.

Етап 62

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

Крок 63

Попередня кнопка призначена для нормального стану. Давайте дублювати його і змінити його колір на # f76b6a. Також встановіть його тип мітки напівжирним.

Крок 64

Помістіть публікацію в групі, а потім натисніть Ctrl + J, щоб повторити її. Натисніть Alt, щоб повторити групу.

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

Етап 65

Дублювати Докладніше і змінити його мітку на номер. Ми будемо використовувати його для навігації по сторінках. Не забудьте встановити одну з кнопок для наведення курсору.

Крок 66: Нижній колонтитул

Давайте почнемо працювати на нижньому колонтитулі. Додайте назву віджета та його опис.

Етап 67

Додати посилання та намалювати під ним лінію на 1 піксель. Набір Заповніть: Немає і Обведення: # 8e8380.

Етап 68

Натисніть Більше варіантів і виберіть пунктирна лінія.

Крок 69

Додайте більше посилань до віджета.

Етап 70

Дублюйте віджет.

Етап 71

Також потрібно додати умову наведення. Встановіть одне з посилань на жирний шрифт.

Під цим активним посиланням додайте лінію 5 px. Встановіть його колір # f76b6a. Для узгодженості зовнішній вигляд цього посилання схожий на активне меню на панелі меню.

Етап 72

Додайте ще один прямокутник у нижній області. Встановіть його Заповніть до # 3d3123.

Інформація про нижній колонтитул

Етап 73

Додати інформацію про нижній колонтитул за допомогою Тип інструмент. Дайте йому темряву Тінь щоб додати контраст до його фону.

Соціальна мережа

Крок 74

Додайте піктограми соціальних медіа від Daniele Selvitella. Додати Стиль шару> Зовнішнє світіння.

Етап 75

Встановіть звичайну піктограму на 50%. Для стану hover, давайте просто збережемо його Непрозорість в 100%.

Етап 76

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

Кінцевий результат

Це наш кінцевий результат. Ви можете бачити, що остання версія Photoshop має деякі цікаві можливості для розробки веб-макета. Стилі символів і стилі абзаців є значним поліпшенням для кожного веб-дизайнера.

Демо
Завантажити джерело