Как сделать красивое меню для группы вконтакте. Как сделать красивое меню в группе вконтакте Создание меню в фотошопе
Разберем, как сделать объемное горизонтальное меню для сайта. Для начала создаем документ шириной 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=Нaзвание_страницы
Вместо надписи страницы, может создать произвольное название нашей будущей страницы. Назовем её к примеру меню группы. Нажимаем карандаш и переходим в режим вики-разметки. Теперь можно добавить фотографии которые только что создали в программе 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) и кликните по оставшейся нижней опорной точке, чтобы удалить ее. В результате ваш квадрат должен превратиться в треугольник!
Законченное изображение
