Як створити гарне меню у фотошопі. Як створити меню в контакті
Привіт всім! Цього разу ми приготували вам урок про те, як створюється готовий до друку буклет для уявного кавового магазину під назвою “Violet Coffee”. У цьому уроці йтиметься про підготовку фону та пару допоміжних об'єктів, які ми згодом імпортуємо до Adobe InDesign для завершення буклету. Чи готові? Поїхали!
Перед початком
Цей урок претендує стати керівництвом для тих, хто починає осягати мистецтво дизайну друкованих видань. Тут ми торкнемося кількох важливих тем, що стосуються налаштувань документа, одиниць вимірювання та розмірів, розмітки, відступів та друку без них, роботи з кольором, типографіки і навіть дещо надрукуємо
Я розбив урок на дві частини, одна з яких присвячена створенню фону для меню та кількох елементів дизайну за допомогою інструментарію Photoshop, у другій частині піде мова про роботу над результатами першої в Adobe InDesign, щоб правильно згорнути вміст, підготувати документ до друку і, власне, надрукувати його.
Робота проходитиме в рамках уявної легенди, за якою клієнт “ікс” забезпечив нас парою картинок та Word документом із текстом для буклету. Ну а ваше завдання, як дизайнера, полягатиме в тому, щоб зібрати з цього красивий макет, який буде не соромно надрукувати і показати клієнту.
Давайте почнемо. Для уроку знадобиться таке:
- Чашка з кавою,
- Дим,
Розмітка документа
Пам'ятайте, що олівець та аркуш паперу завжди насамперед! Накидайте бажаний результат і варіанти його досягнення. Нижче наведена моя чернетка, яка і послужить відправною точкою для подальшої творчості. Має бути дві сторінки: лицьова та зворотна.
На лицьовому аркуші буде макет обкладинки, а на зворотному - безпосередньо текст меню. Листівка складатиметься вдвічі, як буклет. Як основні кольори використовуватиметься фіолетовий і чорний для фону і практично білий - для тексту. Розміри полотна можуть змінюватись, але на мою думку "double - letter" цілком підійде. Так ми під кожну сторінку матимемо свій формат леттер (215,9 ? 279,4 мм). Взагалі прийнято друкувати меню на великих форматах, але зрештою все залежить від ваших уподобань. Що ж, визначившись із цілями та ідеями, можна рухатися далі.
1 Крок
Створимо один документ для шаблону з фоном, на якому помістимо назву компанії та нанесемо чашку кави.
Відкрийте Photoshop та виконайте File > New. Для початку визначтеся, який формат паперу ви хочете використовувати (це може впиратися також у бюджет клієнта). Я пропоную почати роздуми з розміру Letter 8,5 x 11 дюймів (215,9 x 279,4 мм). Ще дуже важливо виставити дозвіл на цьому етапі (мінімальний дозвіл для поліграфічного друку на мій досвід становить 300 точок на дюйм (300ppi)). І на цьому етапі нам потрібно задати колірний режим CMYK.
Обкладинка буклету буде однією цілою частиною і вийде внаслідок додавання удвічі вже надрукованого аркуша меню. Тому для того, щоб фон вийшов плавним, без небажаних врізок і переходів, ми створюватимемо його як цілісний документ, що передбачає збільшення вихідного розміру шаблону в два рази (“Double Letter”).
Збільште ширину паперу Letter до 17 дюймів. Після перевірки введених параметрів натисніть OK.
2 Крок
Зараз ми маємо полотно, що нормально друкується, але все-таки, не завадило б подбати про додатковий простір по периметру для підстрахування при друку без полів. Активуйте лінійки (Rulers, Ctrl + R) і винесіть на робочу область чотири напрямні (кликаємо по лінійці і тягнемо на полотно) по одній на кожну межу документа. Потім відкрийте Image > Canvas Size та збільште документ на 1/8 дюйма зверху, знизу та з боків. Цього можна досягти, просто додавши по 0,25 дюйма до висоти та ширини, як показано у мене на ілюстрації нижче. Переконайтеся, що точка фіксації (Anchor) знаходиться в центрі, і натисніть OK.
Розробка фону
3 Крок
Почнемо з власне графіки. Для початку розтягнемо шар із градієнтом Gradient Fill Layer. Виконайте Layer > New Fill Layer > Gradient та вкажіть кольори градієнта наступні значення: Violet (C:80, M:100, Y:30, K:25) та Black (C:70, M:70, Y:70 та K: 95), що є узагальнене значення насиченого чорного (Rich Black у друкарні) і працює дуже вигідно. Не забудьте виставити Angle на 90 градусів.
4 Крок
Зараз застосуємо деякі ефекти до фону. Створіть новий шар поверх шару з градієнтом, виставте основний колір рівним C:80 M:70 Y:60 K:80, задайте фоновий білим. Потім відкрийте Filter > Render > Clouds. Змініть режим накладання цього шару на Overlay. Потім виконайте Filter > Blur > Motion Blur, задайте Angle рівний 90 градусів, а Distance 999px. У результаті підкоригуйте рівні Levels (Ctrl + L) як показано нижче, щоб завершити роботу над ефектом.
5 Крок
За допомогою Pen Tool (P) створіть фігуру, як показано нижче. Залийте шлях кольором C: 10, M: 15, Y: 0, K: 0. Для зберігання шарів у належному порядку використовуйте групи. Насамперед я створив групу з назвою "Curves Right" і помістив у неї всі криві для правої частини полотна. Після цього виконайте Layer > Layer Mask > Hide All і залийте її горизонтальним градієнтом від білого до чорного, роблячи видимою лише ліву частину фігури. Зрештою спустіть Opacity шару до 25% і задайте йому режим накладання Color Dodge.
6 Крок
Дублюйте свою фігуру кілька разів (утримуючи Alt і перетягуючи шар) і за допомогою Transform Tool змініть кожен із дублів так, щоб отримати щось схоже на вміст наведеної нижче ілюстрації. Ви можете внести стільки кривих, скільки захочете. Спробуйте грати зі значеннями Opacity кожної з фігур, щоб отримати якомога цікавіший ефект.
Потім виділіть групу Curves Right і перетягніть її на праву частину полотна. Після цього дублюйте її (це також можна домогтися утримуванням Alt і перетягуванням) і виконайте Edit > Transform > Flip Horizontal для відображення дубля по горизонталі. Потім перейменуйте дубль у “Curves Left” і перетягніть його на лівий бік полотна.
7 Крок
Створіть новий шар поверх “Curves”. За допомогою Ellipse Tool (U) намалюйте рожевий кружок (C:5 M:55 Y:0 K:0). Щоб коло вийшло правильної форми, утримуйте Shift під час його розтягування. Потім відкрийте Filter > Blur > Gaussian Blur (вас попросять розтеризувати шар – виконайте це), задайте радіус розмивання 50px і натисніть OK. Далі змініть режим накладання шару на Color Dodge, встановіть 50% значення Opacity і помістіть цю плямку кудись поверх будь-якої з ваших кривих.
Дублюйте цей шар стільки разів, скільки вважаєте за потрібне, змініть Opacity, пограйте з розмірами кожного дубля, та й спробуйте отримати щось схоже на наведену нижче ілюстрацію. Після того, як ви закінчите з гуртками, перенесіть їх у окрему папку з назвою щось на зразок “Light Spheres”.
8 Крок
На цьому кроці вам потрібно буде відкрити набір пензлів із зірочками. Створіть новий шар і нанесіть на ньому кілька білих зірочок у різних місцях. Далі додайте до шару стиль Outer Glow з режимом накладання Screen та розміром 70px, кольором C:15, M:55, Y:0, K:0. Зрештою задайте шару рівень Opacity близько 70%.
Додаємо назву
9 Крок
Наступним кроком буде додавання логотипу. Звичайно, його не можна буде назвати логотипом у цьому сенсі цього слова, тому що логотип - це складніший елемент дизайну, тому назвемо його просто "назва компанії". Тепер розділіть праву половину документа на дві колонки за допомогою вертикальної напрямної та винесіть ще три горизонтальні, щоб поділити сторінку на чотири однакові за висотою рядки. Потім за допомогою Type Tool (T) нанесіть слово VIOLET білими великими літерами на праву частину документа в другий рядок. Я використовував комерційну гарнітуру Avant Garde, але ви можете скористатися будь-яким доступним аналогом (Futura, Century Gothic і так далі). Параметри тексту наведено на ілюстрації нижче. Після цього виділіть одну букву “O” і змініть колір на C:10, M:85, Y:0 і K:0. Завершальним штрихом стане застосування до тексту стилю Gradient Overlay кольорами від сірого до білого з режимом накладання Linear Burn, Opacity 75% і кутом 90 градусів. Дивимося ілюстрацію:
10 Крок
Тепер додамо шар із відображенням до текстового шару. Для цього дублюйте свій напис, розтрируйте його (швидкий спосіб зробити це: створити порожній шар під шаром з текстом, виділити шар з текстом і щойно створений порожній шар і натиснути Ctrl + E щоб злити їх в один) і виконайте Edit > Transform > Flip Vertical. Покладіть копію відразу під написом. Для завершення ідеї нам залишилося звести нанівець шар із відображенням, і зробити це можна за допомогою додавання маски до шару: Layer > Layer Mask > Hide All, яку потім потрібно залити градієнтом від чорного до білого за допомогою Gradient Tool (G).
11 Крок
Фінальним акордом буде нанесення на текст пари яскравих білих зірочок із набору пензлів Stars Brush. Повторіть наведений нижче малюнок, не забувши зменшити шар Opacity до 85%.
12 Крок
Тепер давайте нанесемо слово "coffee" трохи правіше і нижче "Violet". Для цього можна використовувати будь-яку гарнітуру Script (наприклад, я взяв Edwardian Script). Потім додамо стиль Gradient Overlay кольорами від C:10, M:85, Y:0, K:0 до C:15, M:55, Y:5, K:0. Після цього всі шари, що належать до так званого лого компанії, варто помістити в окрему папку під назвою “Logo”.
Композиційні шари
13 Крок
Давайте налаштуємо Layer Comps, щоб мати можливість зберігати дві різні версії дизайну у двох окремих файлах за допомогою Automated Script.
Для початку увімкніть панель Layer Comps (Windows > Layer Comps). Переконайтеся, що у вас увімкнена видимість папки “Logo” і на панелі Layer Comps натисніть кнопку New для створення нового композиційного шару. Перейменуйте його в Cover. Після цього сховайте папку “Logo” (відключіть видимість) та створіть новий композиційний шар під назвою “Inner”. Можете попереключати видимість шарів, щоб остаточно переконатися в тому, що все було зроблено правильно.
14 Крок
Тепер відкрийте File > Scripts > Layer Comps to Files. У діалоговому вікні виберіть тип файлу PSD, відкрийте папку, в якій ви хочете зберегти свої файли, задайте для їх назви якийсь відмінний префікс типу “Violet”, а інші налаштування залиште за замовчуванням. Після натискання Run Photoshop автоматично створить файл для кожного композиційного шару, назви файлів будуть містити назви цих шарів.
Додаємо графічні елементи. Горнятко кави
15 Крок
Відкрийте у фотошоп картинку з чашкою кави, виконайте подвійне клацання по шару “Background” на палітрі Layers, щоб зробити його редагованим. Потім за допомогою Pen Tool (P) у режимі Paths обведіть чашку по контуру. Після цього натисніть кнопку Exclude Overlapping Path Areas на панелі Options інструмента у верхній частині екрана та обведіть внутрішнє коло ручки. Потім, як ви закінчите з шляхами, виконайте Layer > Vector Mask > Current Path для перетворення шляху у векторну маску та вичленування чашки з фону.
16 Крок
Тепер ви можете перенести чашку на робочий документ. За бажанням цей шар можна раструвати (клік правою кнопкою миші по шару на палітрі Layers та вибір пункту Rasterize Layer). Назвіть шар із чашкою “coffee cup”.
Потім, використовуючи техніку, викладену на кроці 10, додайте до чашки відображення, але цього разу за допомогою великого і м'якого чорного пензля (Brush Tool, B) в режимі маски сховайте незграбні краї відображення, як показано на малюнку нижче.
17 Крок
Як невелику деталь ми додамо до чашки тінь. За допомогою Ellipse Tool розтягніть насичений чорний еліпс між чашкою та її відображенням. Потім відкрийте Filter > Blur > Gaussian Blur, у вікні, що з'явилося, задайте радіус розмивання рівним 35 px і натисніть Ok.
18 Крок
Для збереження фіолетового настрою використовуємо коригуючий шар Photo Filter Adjustment Layer поверх чашки (кнопка New Fill Or Adjustment Layer у нижній частині панелі Layers). Переконайтеся в тому, що він додався в режимі Clipping Mask (відсічний маски) і змініть його відтінок на C:40, M:80, Y:0, K:0, Density задайте на рівні 25%. Після цього перенесіть усі шари з чашкою в окрему групу під назвою “Coffee cup”.
19 Крок
Тепер давайте візуалізуємо невеликий струмок аромату, що йде від нашої чашки з кавою. Відкрийте фото з димом і виконайте подвійне клацання по шару “Background”, щоб перевести його в режим редагування. Потім натисніть Ctrl+I для інвертування кольорів зображення. У вікні налаштувань Hue / Saturation (Ctrl + U) встановіть значення Hue -92 для надання серпанку фіолетового відтінку.
Тепер давайте витягнемо дим із фотографії. На панелі Channels (Window > Channels) дублюйте канал Red, натисніть Ctrl + A, Ctrl + C, щоб зберегти копію в буфер обміну, потім видаліть дубльований шар, перейдіть назад на канал RGB, щоб повернути зображенню свій колишній колір.
На панелі Layers виберіть шар із димком і виконайте Layer > Layer Mask > Hide All, після чого клацніть по цій масці з натиснутою Alt, щоб зробити її видимою. Потім вставте на маску зображення, яке ви скопіювали до буфера до цього. Після того, як ви перейдете на свою оригінальну мініатюру із шаром, ви побачите, як спрацював цей прийом.
20 Крок
Перетягніть шар із димом на наш основний документ. Потім розтрируйте його та назвіть “Smoke”. Помістіть його над чашкою кави. Додайте маску до цього шару і залийте її градієнтом від білого до чорного, щоб сховати верхню частину струмка кавового аромату.
У результаті дублюйте шар Smoke, помістіть копію поверх оригінального шару і виконайте Filter > Blur > Gaussian Blur з радіусом розмивки близько 35%. Так ми створимо приємну ауру, що світиться, для шару з димом.
21 Крок
Зараз, щоб зробити чашку ще більш чарівною, додайте трохи світлових плям і зірочок, як ми це вже робили для фону на кроках 7 і 8. Після цього помістіть усі шари, пов'язані з чашкою, включаючи дим, зірки та відблиски в окрему папку з назвою "Coffee".
Експортуємо графічні елементи
22 Крок
На даний момент ми маємо дві важливі групи із шарами: “Coffee” та “Logo”. Обидві групи є додатковими графічними елементами, які ми згодом повинні будемо імпортувати в InDesign. Тому зараз нам потрібно підготувати їх та експортувати в окремі файли. Почнемо з гурту “Logo”. Дублюйте її (перетягніть групу на кнопку New палітри Layers), перейдіть на цей дубль і натисніть Ctrl+E, щоб його раструвати. Те саме проробіть із групою “Coffee”.
23 Крок
Виберіть шар “Logo Copy”, потім клацніть по ньому правою кнопкою миші та виберіть Duplicate Layer. У діалоговому вікні, що відкрилося, задайте йому нове ім'я і в полі Destination Document виберіть пункт New. Це створить копію шару в новому документі з такими ж розмірами, як і оригінал. За допомогою Crop Tool видаліть порожні ділянки копії та збережіть документ, давши йому якусь інформативну назву типу “Logo.psd”. Повторіть цей процес із шаром “Coffee copy”.
Файли на виході
24 Крок
Що ж, із Photoshop на сьогодні все. На цьому етапі ви повинні мати такі ключові елементи для того, щоб мати можливість використовувати їх у другій частині уроку: два PSD файли з фоном (один для обкладинки, інший - для внутрішніх сторінок), PSD файл з логотипом на прозорому тлі та PSD файл з чашкою кави також на прозорим фоном.
Зараз у нас є все для створення готового до друку документа InDesign, включаючи інформацію, надану замовником.
У цьому уроці створюватимемо оригінальну кнопку для сайту.
Крок 1.
Створіть новий документ, колір фону задайте показником: #f7f5f6. Активізуйте інструмент Rounded reqtangle Tool (Прямокутник із закругленими кутами) з радіусом округлення 10 пікселів. Як колір переднього плану встановіть колір з показником: #2f88bb. На новому шарі створіть невеликий округлений прямокутник.
Крок 2.
Тепер перейдіть до Layer Style (Стилі шару)та застосуйте для намальованого прямокутника Outer Glow (Зовнішнє світіння)і Inner Glow (Внутрішнє свічення)з наступними налаштуваннями:
Крок 3
Утримуючи клавішу
Активізуйте інструмент Elliptical marquee Tool(Овальна область виділення) і, утримуючи клавішу
Крок 4.
Створіть новий шар і за допомогою інструмента Elliptical marquee Tool(Овальна область виділення), створіть еліпс, як показано на малюнку. Тепер, використовуючи інструмент Gradient(Градієнт), стиль - від основного до прозорого, і створіть градієнтну заливку з овального виділення. Цей градієнт виконуватиме функцію тіні.
Крок 5.
Далі, утримуючи клавішу
Крок 6
Встановіть непрозорість шару з кнопкою до 32%. Утримуючи клавішу
Крок 7.
Залийте створене виділення білим кольором та змініть непрозорість до 11%.
Крок 8
Тепер створіть новий шар і намалюйте коло, як показано нижче.
Крок 9
У цьому уроці Фотошопу ми розглянемо як зробити стильне навігаційне меню для сайту.
У цьому уроці Фотошопу ми розглянемо, як зробити стильне навігаційне меню для сайту.
Фінальний результат
Приступаємо до уроку Фотошопу
Створіть документ із розмірами → 500 x 200 (File > New(Файл > Новий / Поєднання клавіш "Ctrl+N")) і залийте його сірим кольором ( Paint Bucket Tool(Інструмент Заливка/Клавіша "G")).
Далі використовуйте Rectangular Marquee Tool(Прямокутна область виділення / Клавіша "M") і створіть приблизно таке виділення (вибачте за різні кольори фонів у цьому та попередньому зображенні, просто не звертайте увагу на це): ↓
Параметри градієнта: ↓
Drop Shadow(Тінь). ↓
Stroke(Обведення). ↓
Inner Shadow(Внутрішня тінь). ↓
Виділіть своє меню, затиснувши Ctrl Select > Modify > Contract(Виділення > Модифікація > Стиснути), 2 пікселя.
Створіть новий шар ( New Layer(Новий шар / Поєднання клавіш "Ctrl+Shift+N")) і залийте виділення білим кольором ( Paint Bucket Tool(Інструмент Заливка / Клавіша "G")), тепер за допомогою трансформації ( Ctrl+T), зробіть, щоб цей шар покривав половину нашого меню.
Змініть opacity(непрозорість) на 25% .
Давайте попрацюємо над кнопками меню.
Створіть приблизно таке виділення, як на малюнку нижче, залийте будь-яким кольором. ↓
Drop Shadow(Тінь), Gradient Overlay(Накладення градієнта).
Параметри градієнта: ↓
Виділіть свою кнопку, затиснувши Ctrlнатискаючи ліву кнопку миші на зображення на панелі шарів. Далі йдемо Select > Modify > Contract(Виділення > Модифікація > Стиснути), 2 пікселя.
Створіть новий шар і залийте виділення білим кольором і за допомогою трансформації ( Ctrl+T), зробіть, щоб цей шар покривав половину нашої кнопки.
Тепер змініть opacity(непрозорість) так, щоб ви могли звернути увагу на білий шар. я ставив 6% .
У цьому уроці ви дізнаєтеся, як за допомогою Photoshop створити просте і стильне меню.
Крок 1
Відкриваємо Photoshop і тиснемо Ctrl+N, щоб створити новий документ із параметрами, показаними нижче на скріншоті. Активуємо сітку View - Show - Grid(Вигляд - Показати - Сітка) та прив'язку до сітки View - Snap to - Grid(Вигляд - Прикріпити до - Сітка). На даний момент нам потрібна сітка з комірками 5 px.
Переходимо Edit - Preferences - Guides, Grid and Slices(Редагування - Установки - Направляючі, сітка та фрагменти) та знаходимо параметри Grid (Сітка). Для Gridline Every(Лінії через кожні) вводимо 5, а для Subdivision(Внутрішній поділ на) – 1. Також встановлюємо колір сітки на #a7a7a7. Закінчивши, тиснемо OK.
Сітка дуже допомагає в роботі, раджу нею нехтувати. Також відкриваємо панель інформації Window - Info(Вікно – Інформація).
Крок 2
Встановлюємо колір переднього плану на #3f8ecf, беремо Rounded Rectangle Tool(Закруглений прямокутник) (U) та призначаємо його радіус на 20 px. Створюємо прямокутник розміром 160 х 40 px та дублюємо його (Ctrl+J). Вибираємо дублікат та змінюємо його колір на білий. Активуємо Rectangle Tool(Прямокутник) (U), тиснемо кнопку Intersect shape areas(Область перетину фігур) на верхній панелі та малюємо квадрат розміром 40 х 40 px, як показано на третьому скріншоті. Переміщаємось на панель шарів і двічі клацаємо по шару з білим прямокутником, щоб відкрити вікно Layer Style (Стиль шару).
Застосовуємо Inner Glow (Внутрішнє світіння), Gradient Overlay(Накладення градієнта) та Stroke(Обведення) з налаштуваннями, як на скріншоті нижче.
Крок 3
Виділяємо синій прямокутник та ще раз дублюємо його (Ctrl+J). Виділяємо дублікат, змінюємо його колір на білий та активуємо Rectangle Tool(Прямокутник) (U). Тиснемо кнопку Intersect shape areas(Область перетину фігур) на верхній панелі і малюємо прямокутник розміром 120 х 40 px, як показано нижче.
Переходимо на панель шарів, клацаємо правою кнопкою по шару з білим прямокутником, створеним у попередньому кроці, та вибираємо Copy Layer Style(Копіювати стиль шару). Переходимо до білого прямокутника, який ми створили в цьому кроці, тиснемо правою кнопкою по ньому і вибираємо Paste Layer Style(Вклеїти стиль шару).
Крок 4
Беремо Type Tool(Текст) (Т) і пишемо текст на кнопці (колір #a1d8ff). Потім відчиняємо вікно Layer Style(Стиль шару) та застосовуємо до тексту стилі шару, як показано нижче.
Крок 5
Повертаємось до синього прямокутника, який ми створили на другому кроці. Відкриваємо вікно Layer Style Drop Shadow(Тінь). Дублюємо цей прямокутник (Ctrl+J), виділяємо копію, відчиняємо вікно Layer Style(Стиль шару) та редагуємо стиль шару, як показано нижче. Потім виділяємо всі створені прямокутники і групуємо їх (Ctrl+G). Так кнопка буде виглядати, коли меню приховано. Останні штрихи ми додамо у фінальному кроці.
Крок 6
Переміщуємося до панелі шарів, тиснемо правою кнопкою по створеній групі та вибираємо Duplicate Group(Дублювати групу). Виділяємо копію групи та опускаємо її трохи нижче за оригінал, як показано на скріншоті.
Крок 7
Тепер зосередимося на дублікаті гурту. Спочатку підкоригуємо текст. Змінюємо його колір на #b4b4b4, потім тиснемо правою кнопкою по шару та вибираємо Clear Layer Style(Очистити стиль шару). Відчиняємо вікно Layer Style(Стиль шару) та додаємо до тексту стиль шару Drop Shadow(Тінь).
Крок 8
Встановлюємо колір переднього плану на #f5f5f5, беремо Rounded Rectangle Tool(Закруглений прямокутник) (U) та призначаємо його радіус на 20 px. Створюємо прямокутник розміром 160 х 35 px та розміщуємо його під кнопкою, як показано на малюнку 1. Потім дублюємо його (Ctrl+J) та змінюємо колір копії на білий. Активуємо Rectangle Tool(Прямокутник) (U), тиснемо на кнопку Intersect shape areas(Область перетину фігур) на верхній панелі та малюємо прямокутник розміром 40 х 35 px, як показано на малюнку 2.
Переходимо на панель шарів та зменшуємо Fill(заливання) цього шару до 0%. Потім відчиняємо вікно Layer Style(Стиль шару) та застосовуємо стиль шару Inner Shadow(Внутрішня тінь).
Крок 9
Активуємо закруглений прямокутник, який ми створили на початку попереднього кроку, та дублюємо його (Ctrl+J). Активуємо копію та на панелі шарів переміщуємо її вище (Shift+Ctrl+]). Зменшуємо Fill (Заливка) до 0%, відкриваємо вікно Layer Style (Стиль шару) та застосовуємо стилі шару.
Крок 10
Активуємо другий прямокутник, створений у восьмому кроці, і дублюємо його (Ctrl+J). Переміщуємо копію вище (Shift+Ctrl+]), потім копіюємо стилі шару з попереднього кроку та вставляємо їх у цей прямокутник.
Крок 11
Тепер зосередимося на правій частині кнопки, створеної на попередньому кроці. Встановлюємо колір переднього плану на #ebebeb, беремо Rectangle Tool(Прямокутник) (U) і створюємо прямокутник розміром 10 х 5 px, як показано нижче.
Далі тиснемо кнопку Add to shape area(Додати до області фігури) і відразу над попереднім малюємо новий прямокутник розміром 5 х 10 px, як показано на малюнку 2. Переконуємося, що створений шар активний, і тиснемо Ctrl+T. Повертаємо стрілку на -45 градусів і тиснемо Enter.
Переходимо на панель шарів, затискаємо клавішу Ctrl та клацаємо по мініатюрі шару з прямокутником, створеним у попередньому кроці. В результаті навколо фігури має з'явитись виділення. Не знімаючи виділення, беремо Move Tool(Переміщення) (V) і перевіряємо, що шар зі створеною стрілкою все ще активний.
Переміщаємось на верхню панель і тиснемо кнопки Align vertical centers(Вирівнювання центрів по вертикалі) та Align horizontal centres(Вирівнювання центрів по вертикалі), як показано на малюнку. Відкриваємо Layer Style(Стиль шару) та застосовуємо стилі шару для стрілки.
Крок 12
Беремо Type Tool(Текст) (Т) і пишемо будь-яке слово на кнопці, як показано нижче (колір #b4b4b4). Потім застосовуємо до тексту стиль шару Drop Shadow(Тінь). Виділяємо шар з текстом і всі шари, створені останніх чотирьох кроках, і групуємо їх (Ctrl+G).
Крок 13
Чотири рази дублюємо групу, створену у попередньому кроці. Розміщуємо копії, як показано на малюнку нижче, та змінюємо на кожній кнопці текст.
У пропонованому уроці по Фотошоп ми познайомимо вас з процесом створення нескладного меню.
Перегляд завершеного зображення
Крок 1
Відкрийте Фотошоп натисніть Ctrl+N, створивши таким чином новий документ. Введіть наведені нижче установки та натисніть OK. Увімкніть відображення сітки: Перегляд > Показати > Сітку (View > Show > Grid), а також увімкніть прив'язку до сітки: Перегляд > Прив'язка до… > Ліній сітки (View > Show > Grid). На даний момент нам буде достатньо ліній через кожні 5 пікселів. Перейдіть до меню Редагування > Установки > Напрямні, Сітка та Фрагменти (Edit > Preferences > Guides, Grid & Slices) та зверніть увагу на розділ Сітка (Grid). Введіть значення 5 у полі “Лінія через кожні…” (Gridline Every) та значення 1 у полі “Внутрішній поділ на…” (Subdivision). Нарешті встановіть колір сітки: #a7a7a7 і натисніть OK.
Нехай вас не лякає густа сітка, що з'явилася на полотні. Вона потрібна, щоб полегшити вашу роботу. Крім усього іншого, включимо також відображення інфо-панелі: Вікно > Інфо (Window > Info) щоб у реальному масштабі часу відстежувати положення ваших елементів та фігур.
Крок 2
Встановіть Основний колір (Foreground): #3f8ecf, виберіть інструмент Прямокутник із закругленими кутами (Rounded Rectangle Tool) і встановіть радіус 20 пікс. Створіть векторний контур розміром 160x40 і продублюйте його: Control + J. Виділіть копію та зробіть її білою. Перейдіть на інструмент Прямокутник (Rectangle Tool), натисніть кнопку Перетин з виділеною областю (Intersect) на верхній панелі, і накресліть векторний контур розміром 40x40 пікселів, як показано на третьому зображенні внизу. Звернемося до палітри шарів і двічі клацніть по білому контурі, щоб відкрити вікно стилів шару.
Застосуйте Внутрішнє світіння (Inner Glow) та Обведення (Stroke), а потім введіть параметри, показані на наступних ілюстраціях.
Крок 3
Знову виділіть синій округлений прямокутник, створений на попередньому кроці, і продублюйте його: Control + J. Виділіть копію, зробіть її білою, і перейдіть на інструмент Прямокутник (Rectangle Tool). Натисніть кнопку Перетин із виділеною областю (Intersect) на верхній панелі, і накресліть векторний контур розміром 120x40 пікселів, як показано на другому зображенні нижче.
Знову звертаємось до палітри шарів. Клацніть ПКМ по білому контуру, створеному на попередньому кроці, і виберіть пункт "Копіювати стиль шару" (Copy Layer Style). Далі, клік ПКМ за білим контуром, створеним на початку цього кроку, і пункт "Вставити стиль шару" (Paste Layer Style).
Крок 4
Виберіть інструмент Текст (Type Tool) і наберіть текст, як показано на наступному зображенні. Задайте колір тексту: #a1d8ff , потім, відкривши вікно стилів шару, введіть установки, показані нижче.
Крок 5
Повертаємося до синього округленого прямокутника, створеного на другому кроці, відкриваємо вікно Стилів шару та вводимо наведені нижче установки. Продублюйте цю фігуру: Control + J, виділіть копію, знову відкрийте вікно стилів шару, і застосуйте Тінь (Drop Shadow) з наведеними нижче настройками. Виділіть всі фігури, створені на даний момент, і згрупуйте їх: Control + G. Це буде ваше закрите меню. На останньому кроці ми ще трохи доопрацюємо його.
Крок 6
Знову звернемося на палітрі шарів. Клацніть на групі, створеній на попередньому кроці, ПКМ і виберіть пункт “Дублювати групу” (Duplicate Group). Перейдіть до новоствореної групи, перетягніть її нижче і розташуйте так, як показано на зображенні нижче.
Крок 7
Продовжимо роботу із групою, створеною на попередньому кроці. Насамперед потрібно проредагувати текст, що є тут. Змініть колір на #b4b4b4, після чого клацніть по ній ПКМ (на палітрі шарів) і виберіть пункт "Очистити стилі шару" (Clear Layer Style). Відкрийте вікно стилів шару та застосуйте до сірого тексту Тінь (Drop Shadow) з наведеними нижче настройками.
Крок 8
Встановіть Основний колір (foreground color): #f5f5f5, виберіть інструмент Прямокутник із закругленими кутами (Rounded Rectangle Tool) та встановіть радіус: 20 пікселів. Створіть векторний контур розміром 160x35 пікселів, розташувавши його, як показано на першому зображенні нижче, після чого створіть дублікат: Control + J. Виділіть дублікат, і зробіть його білим. Перейдіть на інструмент Прямокутник (Rectangle Tool), натисніть кнопку Перетин з виділеною областю (Intersect) на верхній панелі, і накресліть векторний контур розміром 40x35 пікселів, як показано на другому зображенні внизу.
Звернемося до палітри шарів. Зменшіть непрозорість заливки (Fill) цього контуру до 0%, після чого, відкривши вікно стилів шару, застосуйте наведені на зображенні нижче налаштування:
Крок 9
Знову виділіть округлений прямокутник, створений на початку попереднього кроку, та продублюйте його (Control + J). Виділіть копію, перемістіть її на передній план: Shift + Control + ], зменшіть непрозорість заливки (Fill) до 0%, відкрийте вікно стилів шару та введіть такі налаштування:
Крок 10
Знову виділіть другий контур, створений на кроці 8, і продублюйте його: Control + J. Виділіть копію, перемістіть її на передній план: Shift + Control + ]. Далі відкрийте вікно стилів шару та підкоригуйте параметри стилю шару Тінь так, як показано нижче.
Крок 11
Займемося правою частиною фігур, створених у виконання останніх кроків. Встановіть Основний колір (foreground color) - #ebebeb, оберіть інструмент Прямокутник (Rectangle Tool), створіть векторний контур розміром 10x15 пікселів і розташуйте його як показано на першому зображенні нижче. Виділіть цей маленький прямокутник. Клацніть по кнопці Додати до виділення (Add) на верхній панелі опцій і намалюйте ще один векторний контур розміром 10x15, як показано на другому зображенні нижче. Переконавшись, що останній створений контур, як і раніше, активний, натисніть Control + T, поверніть його на 45 градусів і натисніть Enter.
Переходимо до палітри шарів. Утримуючи Ctrl, натисніть на іконці шару з векторним контуром, створеним на попередньому кроці. В результаті буде завантажена його проста виділення область. Тепер виберіть інструмент Виділення (Selection Tool) та переконайтеся, що активний саме шар із векторним контуром – стрілкою.
Клацніть по кнопці “Вертикальні центри” (Align vertical centers) та “Горизонтальні центри” (Align horizontal centers) на верхній панелі опцій, щоб вирівняти стрілку як показано на п'ятому зображенні внизу. Далі відкрийте вікно стилів шару та застосуйте такі стилі з наведеними нижче настройками.
Крок 12
Виберіть інструмент Текст (Type Tool) і наберіть простий текст, як показано на зображенні нижче. Задайте колір #b4b4b4, після чого відкрийте вікно стилів шару та застосуйте Тінь із наведеними на зображенні налаштуваннями. Виділіть цей новий текст із елементами, створеними на останніх чотирьох кроках, і згрупуйте все це: Control + G.
Крок 13
Створіть ще чотири копії останньої групи. Розташуйте нові групи так, як показано нижче, та змініть написи.
Крок 14
Зверніть увагу на підпункт меню, позначений у мене як “Tutorials”, відкрийте вікно стилів шару стосовно фігури-стрілки і введіть наступні параметри:
Крок 15
Виділіть текст “Tutorials” та змініть його колір на #2c95dd. Також виділіть сірий округлений прямокутник під текстом, відкрийте вікно стилів шару, застосуйте Накладення Градієнта (Gradient Overlay) з наведеними нижче настройками.
Крок 16
Для виконання завершальних кроків нам знадобиться сітка розміром комірки 1 піксель. Тому пройдіть в меню Редагування > Установки > Напрямні, Сітка та Фрагменти (Edit > Preferences > Guides, Grid & Slices) та введіть значення 1 у полі “Лінія через кожні…” (Gridline Every). Встановіть Основний колір #a1d8ff, виберіть інструмент Прямокутник, створіть 6-піксельний квадрат і розташуйте його так, як показано на першому зображенні нижче. Далі виберіть інструмент Виділення контуру (Direct Selection Tool) та зверніть увагу на нижню частину створеного векторного контуру. Виділіть праву опорну точку та перемістіть її на 3 пікселі вліво. Перейдіть на інструмент Видалення опорної точки (Delete Anchor Point Tool) і клацніть по нижній опорній точці, щоб залишити її. В результаті ваш квадрат має перетворитися на трикутник!
Закінчене зображення
