Як зробити гарне меню для групи вконтакті. Як зробити гарне меню у групі вконтакте Створення меню у фотошопі
Розберемо як зробити об'ємне горизонтальне меню для сайту. Спочатку створюємо документ шириною 1600 пікселів, діною 2000 пікселів.
Створюємо новий шар.
На бічній панелі інструментів вибираємо "Прямокутна область".
Тепер утворюємо робочу область майбутнього меню.
За допомогою інструмента «Заливка» заповнюємо виділену область кольором. Щоб спростити вашу роботу – #0391ff, саме цей колір я задіяла. Як змінити колір, ви знайдете тут.
Тепер спробуємо знайти середину заготівлі меню. Для цього вибираємо інструмент «переміщення» та клацаємо по шару із заготівлею.
Тепер бачимо середину і можемо помітити її собі. Знання її місцезнаходження нам ще знадобиться.
Встановимо допоміжну лінію на середині документа. Для цього нам доведеться перемістити курсор до лінійки розташованої біля бакової панелі інструментів та витягнути її.
На бічній панелі інструментів вибираємо «Текст» та прописуємо назву майбутніх розділів.
Наприклад я вибрала тематику меблів і вирішила розробити меню для сайту для наступних розділів:
- Головна
- Кухні
- Спальні
- М'які меблі
- Передпокій
- Стінки
- Про компанію
- Контакти
Пишемо в рядок. Між кожним розділом залишаємо відстань за допомогою прогалин.
Arial шрифт розмір 18 пікселів. Ці параметри ми знайдемо на панелі «Текст».
Тепер за допомогою вищезгаданого інструменту "Переміщення" встановлюємо текст посередині робочого документа, орієнтуючись на допоміжну пряму.
Тепер додамо наше меню трохи обсягу.
Розділимо кнопки. Для цього необхідно вибрати інструмент «лінія» на панелі інструментів. Беремо колір трохи темніше за поле нашого меню. Допустимо #0179d6. Проводимо горизонтальну лінію, затискаючи клавішу shift завтовшки 1 піксель. Намагаємося провести рівно. Від кордону до межі синьої області. Якщо з цим виникли труднощі, ви можете змінити її розмір за допомогою інструмента переміщення.
Потім раструємо лінію, що вийшла.
Тепер нам слід продублювати отриманий елемент. Для цього у вікні шарів клацаємо по шару з фігурою лівою кнопкою миші та вибираємо «Створити дублікат шару».
Клацаємо по шару, що вийшов, і вибираємо «Параметри накладання». Нам потрібна вкладка "Накладання кольору". Беремо колір трохи світліше за поле меню. Наприклад, # 6bbeff.
Тепер за допомогою інструмента "Переміщення" відтягуємо шар від дубля. Ставимо їх поряд. Для цього вам доведеться збільшити зображення. Фігури слід розташувати поруч так, щоб між ними не було просвіту.
Ось що в нас вийшло. Кнопка стала об'ємною. Ми створили імітацію світла та тіні. Тепер зробимо те саме з іншими кнопками.
Дублюємо шари, щоб скоротити час роботи.
Об'єм з'явився, але чогось не вистачає. Спробуємо надати об'єму смузі меню.
Створимо горизонтальні лінії тим самим методом, задіявши кольори #0063af і #78c2fb.
Розташуємо їх згори. Ось що в нас вийшло.
Просте об'ємне меню для сайту готове!
Доброго часу доби, шановні відвідувачі. Ви бажаєте навчитися робити гарне меню для своєї групи У Контакті, але не знаєте, як зробити. Тоді урок «Як створити меню У Контакті», що навчає відео, допоможе вам покроково створити дане меню.
Даний урок є продовженням попереднього відео уроку «Оформлення групи В Контакті», який ви зможете переглянути. Також для створення меню буде потрібно програма Adobe Photoshop. Про те як встановити та працювати з цією програмою ви зможете дізнатися з розділу.
Також можете скачати шаблони, які застосовуються в даному відео уроці https://yadi.sk/d/EFuM8IjjO3zVUA .
1. Створення меню у фотошопі
У програмі фотошоп перейдемо у вкладі файл, натискаємо створити або Ctrl+N. Створимо документ новий документ шириною 600 пікселів, висота 420 пікселів, роздільна здатність 100 пікселів на дюйм. Далі натискаємо файл відкрити і вибираємо будь-яке зображення, що сподобалося, з комп'ютера.
Вибирайте інструмент прямокутна область або клавіша M на клавіатурі, виділяємо зображення. Далі натискаємо в меню на вкладку редагування та вибираємо копіювати або поєднання клавіш Ctrl+C. Переходимо до нашого створеного документа і вибираємо редагування в меню вставити або поєднання кнопок Ctrl+V.
Вибираємо інструмент переміщення або клавішу V. У меню редагування вибираємо вільне трансформування або клавіші Ctrl+T. Потягнувши один з кутів, утримуючи клавішу Shift для рівномірної зміни розміру, утримуємо нашу картинку.
1.1. Створюємо кнопки
Вибираємо інструмент прямокутник або клавішу U. Підбираємо колір, а потім створюємо кнопку. У бічній панелі праворуч можна встановити параметри радіуса округлення. Допустимо зробимо 5 пікселів. У вкладці Перегляд переконайтеся, що допоміжні елементи були включені. Перемістимо нашу кнопку на середину зображення.
Натисніть на шар кнопки, правою кнопкою миші вибираємо параметри. Накладаємо ефект тіні для кращого виділення кнопки на світлому фоні. За допомогою інструмента переміщення, затиснувши клавішу Alt на клавіатурі, перетягнемо кнопку трохи нижче, тим самим її скопіювавши. Таким чином, створюємо третю кнопку, віддаливши її на таку відстань, про що нам підкажуть допоміжні елементи. Затиснувши клавішу Ctrl, ми виділимо шари, вибираємо інструмент переміщення та розміщуємо їх по центру документа.
Вибираємо інструмент горизонтальний текст або клавішу T. Далі натискаємо ліву кнопку миші обов'язково за межами майбутніх кнопок. Пиши потрібний нам текст, переносимо текст приблизно центром кнопки чи Ctrl+V. Після задаємо назву іншим кнопок.
Вбираємо інструмент розкрійки або клавіша C. Почергово виробляємо наші створені кнопки. Виділяємо першу нашу кнопку і наводимо в один із кутів. При цьому значок розкривання має залишатися незмінним. Далі виділяємо другу та третю кнопку. Натискаємо в меню файл та зберігаємо документ у себе на комп'ютері. Після цього натискаємо зберегти для web. Зберігаємо кнопки на комп'ютер.
2. Редагування меню У Контакті
Переходимо до нашої групи В Контакті. Після автарки спільноти переходимо до групи статистики. В адресному рядку браузера є цифри спільноти, вони якраз і потрібні для подальшого редагування групи. Для редагування групи нам знадобиться наступне посилання, яке вам потрібно буде скопіювати https://vk.com/pages?oid=-XXX&p=Назва_сторінки
Замість напису сторінки може створити довільну назву нашої майбутньої сторінки. Назвемо її наприклад меню групи. Натискаємо олівець та переходимо в режим вікі-розмітки. Тепер можна додати фотографії, які щойно створили у програмі Adobe Photoshop. Зберігаємо сторінку та натискаємо кнопку попереднього перегляду та дивимося як виглядає наше меню. Якщо ви помітили кнопки є дуже маленьким, а між кнопками є пробіли.
Переходимо у візуальний режим редагування. Натискаємо на кожну кнопку по черзі і вибираємо розміри клавіш ширина 610 пікселів, а висота вирівнюється автоматичний. Це найбільше значення в контакті.
Забираємо проблеми між кнопками. Для цього переходимо в меню редагування та візуальному редакторі прописуємо наприкінці кожного запису; nopadding. Копіюємо цей текст і вставляємо до інших картинок. Натискаємо зберегти сторінку і дивимося що у нас вийшло натискаючи кнопку перегляд. Тепер наші кнопки стали одним цілим.
У цьому уроці створюватимемо оригінальну кнопку для сайту.
Крок 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
Ця стаття буде докладним мануалом і я розповім, як зробити меню для групи вконтакті. Красиво оформлене меню групи ВК сприяє реальному збільшенню відвідувачів та зростання продажу на сайті.
Здрастуйте, мої шановні читачі. Давайте сьогодні я розповім, як зробити гарне меню для групи ВКонтактета абсолютно безкоштовно. До речі навчившись створювати такі теми, можна трохи заробити на цьому -))). Вже жоден комерційний сайт не працює без створення своєї спільноти в соціальних мережах, особливо ВК, що гарантовано допомагає привести нових клієнтів, а також розкрутити свій бізнес.
Але якщо Ваша спільнота буде непривабливою і як у всіх, хто захоче там залишитися? Я думаю ніхто! Тож давайте прикрасимо свої групи якісним дизайном і навчимося робити це дуже швидко. Перед тим як почати створювати графіку та наше майбутнє меню необхідно встановити програму фотошоп на свій комп'ютер для подальшого нарізання картинок. Багато хто запитає, навіщо взагалі потрібно нарізати картинки. Тут справа в тому, що для кожного посилання меню ми повинні створити окрему смужку із загального банера.
Існує сьогодні кілька видів створюваного меню:
- Відкрите із активними пунктами;
- Закрите у вигляді закріпленого запису;
- З окремими картинками або загальною суміжною картинкою банера та меню.
Суть створення обох варіантів одна й та сама. Тільки основна відмінність у додаткових елементах та типах запису і про це докладніше буде у цій статті.
Для роботи з меню нам допоможе wiki-розмітка, яка вбудована сьогодні у текстовий редактор ВКонтакте. Від звичайного вона відрізняється тим, що для неї використовуватимуться стандартні команди для виведення тієї чи іншої картинки та вставки посилань на потрібні елементи. Сама wiki-розмітка дає можливість вставити код для відображення зображень, відео та інших елементів.
Закрите меню групи ВК
У даному випадку ми спостерігатимемо ліворуч від основної аватарки групи гіперпосилання у вигляді напису «меню групи» при натисканні на яке у нас буде відкриватися наше меню з активними пунктами та зображеннями.
Вигляд меню буде наступним:
Відкрите меню групи (закріплений матеріал)
Суть полягає у створенні вже відкритих пунктів меню, які відображатимуться в описі самої групи, де зазвичай і відображається за всіма умовами. В опис буде закріплено нашу картинку, яку ми підготуємо заздалегідь та зв'яжемо її зі сторінкою, на якій у нас будуть активні пункти. Дане меню стало дуже популярним останнім часом і користується попитом у замовників. Виглядають вони так:
Як зробити гарне меню для групи Вконтакте: покрокова інструкція
Отже, в першу чергу нам необхідно буде створити головну аватарку групи, яку ми розмістимо праворуч і заглушку нашого меню у вигляді банера.
- Для аватарки 200х332 пікселя;
- Для основного банера меню 395х282 пікселі.
Як ви могли помітити висота зображень відрізняється і це зроблено для того, щоб картинки не з'їжджали по висоті і були на одному рівні, так як висота назви спільноти та статус займають близько 50 px і саме цю величину нам необхідно буде прибрати з висоти меню.
Щоб було зрозуміло, якщо висота головної аватарки групи 332, то від неї віднімаємо 50 і отримуємо висоту основного меню рівну 282. Якщо ж розміри не мають значення, то висоту можна буде виставляти довільну.
Наступним кроком після створення спільноти буде налаштування матеріалів, і тут нам необхідно заборонити учасникам створювати додаткові сторінки та блоки, а лише писати на стіні. Для цього необхідно буде перейти в розділ під аватаркою групи під назвою «управління спільнотою», де нам необхідно зробити наші матеріали «обмеженими» як показано нижче.
Тепер займемося створенням загальної композиції. Можна звичайно просто вставити картинку замість аватарки і в опис, але не будемо дилетантами і покажу як зробити професійно, щоб це була одна повноцінна картинка, що переходить одна в іншу.
Створимо нове полотно у фотошопі розмірами 600х350 пікселів, яке ми будемо використовувати як трафарет, вирізавши в ньому отвори для наших картинок. Для роботи нам необхідно перевести розміри всіх елементів і лінійок у пікселі і робиться це наступним шляхом: «Редагувати-установка-основне» і тут уже виставляємо пікселі.
Наступним кроком створення відкритого меню необхідно зробити вирізки під банер і аватарку, які ми потім отримаємо для завантаження. Для цього переходимо до розділу лівого вертикального меню і вибираємо розкрійку.
Використовуючи ліву кнопку миші, як ви виділяєте область, необхідно виділити блоки потрібних нам розмірів і після кожного виділення натискаємо кнопку видалити «Delete» і вибираємо 50% сірого. Такі дії призведуть до того, що блоки будуть потрібних розмірів і виділені кольором, відмінним від основного фону.
Повинно вийти таке:
А тепер просто вибираємо гумку і функцією «чарівний гумка» тиснемо на кожен сірий блок і отримаємо трафарет з вирізами. Наступним кроком ми вибираємо наше основне зображення і підкладаємо під фон і отримаємо готові картинки на який можна буде написати текст з назвою чи меню інші рекламні елементи.
Чудово. Після того як ви помістили картинку нашого дизайну, нам залишається вибрати «зберегти для Web» і на виході ми отримуємо 2 наші картинки. Тепер йдемо знову до нашої групи і можемо заливати головну аватарку (вертикальну). Банер для меню ми будемо використовувати трохи пізніше під час роботи з кодом wiki-розмітки.
Давайте створимо саме меню, з активними пунктами, які будуть перенаправляти користувача на потрібні розділи стороннього сайту або альбоми і каталоги в самій групі. Використовуватимемо нове зображення для різноманітності -))).
Отже, переходимо знову у фотошоп і створюємо нове полотно з розмірами 400х300 пікселів. Після чого вибираємо у розділі: файл-помістити та вибираємо картинку для фону меню.
На малюнку розміщуємо кнопки нашого майбутнього меню і нарізаємо картинку як ми робили вище шляхом виділення потрібних блоків. Після цього також вибираємо «зберегти для web» і отримуємо папку з нашими нарізками. У моєму випадку вийшло 4 картинки в окремій папці.
Тепер нам необхідно завантажити з фотошопу картинки в окремий альбом і приховати від сторонніх очей. Після завантаження кожна картинка отримає свою нову назву та унікальний id.
Зверніть увагу, що у вас має бути:
- Відкриті матеріали у режимі «обмежені»;
- Включено обговорення;
- Папка з фотографіями відкрита для всіх.
Тепер залишається налаштувати нашу сторінку де і відображатиметься на менюшка. Для цього переходимо на головну сторінку спільноти та обираємо свіжі матеріали та редагувати та називаємо «НАШЕ МЕНЮ».
Далі нам необхідно вставити картинки, які ми отримали при нарізці у фотошопі. Хтось використовує коди розмітки, але щоб не мудрувати голову пропоную просто вибрати вставку картинки натиснувши на іконку фотоапарата і по черзі завантажити один за одним.
Працюючи в текстовому редакторі якщо після завантаження картинок, ми натиснемо на іконку у вигляді дужок у правому верхньому кутку, то повинні побачити такий код:
Порада:Важливим моментом після завантаження зображень є видалення відступів. Вирішується це вставкою "nopadding" перед розмірами зображень.
Для пояснення нижче розписано, що звідки береться, але враховуючи, що все буде вставлено автоматично і не потрібно мудрувати, і відкривати як деякі пишуть кожну картинку і брати id, то просто завантажуємо та зберігаємо.
[]
де xxxxx - id вашої картинки
yyyyy – ширина в пікселях (не більше 388)
Повинно в результаті вийти ось так:
Наразі наші картинки зібрані в окремий банер. А для того, щоб додати кожному пункту посилання, просто натискаємо при відключеній розмітці на картинку і в розділі посилання вставляємо скопійований url.
І ось ми підійшли до найважливішого та останнього пункту створення нашого меню вконтакті. Тепер нам необхідно зберегти нашу сторінку з картинками та скопіювати її адресу. У моєму випадку він виглядає так:
https://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit
Пам'ятаєте ми на початку статті робили заглушку меню, яке буде продовженням нашої головної аватарки і під неї якраз і робили трафарет. Ось саме зараз нам і знадобиться.
Переходимо на головну сторінку та робимо таке:
Крок №1.
Вставляємо адресу сторінки в текстове поле для нового запису на стіні, після чого вона перетворюється на посилання.
Крок №2.
До запису прикріплюємо зображення нашої заглушки для меню та натискаємо надіслати.
Крок №3.
Тепер після публікації запису натискаємо на час створення в нижній лівій частині запису та вибираємо "ЗАКРІПИТИ".
Чудово! На цьому закінчуємо. Тепер ви вмієте створювати класні меню та можете заробляти на цьому непогані гроші. Раджу все робити у такому порядку:
- Вигадуємо структуру та замовляємо дизайн зображень меню;
- Робимо припасування розмірів і нарізку всіх зображень;
- Вставляємо в альбоми картинки;
- Редагуємо у редакторі всі нарізки та публікуємо на головні сторінки групи.
В результаті роботи ми отримаємо таке меню.
А ось саме меню при натисканні воно вискакуватиме з активними посиланнями. Варто пограти з розмірами та підігнати під свій екран, але не забуваємо і про відображення у мобільних пристроях.
ВАЖЛИВО: Після зміни дизайну ВК у 2016 році внесено нові зміни при створенні зображень та вимоги до картинок про які.
Завантажити шаблон меню групи ВК + усі вихідники уроку
Сподіваюся, матеріал був корисний, і ви з легкістю тепер зрозуміли, як зробити гарне меню для групи ВКонтакте. Підписуйтесь на оновлення блогу та до швидких зустрічей у нових постах. Якщо залишилися питання, пишіть їх у коментарях, і я обов'язково допоможу Вам.
Прикладаю відеоролик для закріплення прочитаного -))).
У пропонованому уроці по Фотошоп ми познайомимо вас з процесом створення нескладного меню.
Перегляд завершеного зображення
Крок 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) і клацніть по нижній опорній точці, щоб залишити її. В результаті ваш квадрат має перетворитися на трикутник!
Закінчене зображення
