Креативные меню – дизайн, который едят глазами. Меню как нарисовать


Урок 3. Оформление группы ВКонтакте. Часть 2. Рисуем графическое меню в Photoshop

Шаг 1. Подготавливаем холст.

Открываем программу Photoshop и создаем новый файл. Для этого нажимаем пункт меню File (Файл) и выбираем там New (Новый). Название пунктов и кнопок в разных версиях программы может немного отличаться, поэтому ориентируйтесь, пожалуйста, по картинкам.

На этом шаге нам важно настроить следующие параметры:

  1. Задаем ширину и высоту изображения. Ширина должна быть не больше 388 пикселей. Высота может быть любой. Мы указали 500 пикселей. Важно: проверьте, чтобы в качестве единиц измерения были указаны именно пиксели, а не дюймы, сантиметры и т.п.
  2. Устанавливаем разрешение картинки (Resolution). По умолчанию там может стоять значение 72 или 150 пикселей/дюйм. Вы можете ничего не делать с этим.
  3. Режим цвета (Color Mode) должен быть выбран обязательно RGB color.
  4. Цвет подложки (Background contents) – прозрачный (Transparent) или белый (White). Нам кажется более удобным работать на прозрачной подложке.
  5. Нажимаете OK

У вас создался новый файл, в котором пока ничего нет.

Фон в виде клеточек означает, что на нем нет никакого цвета, он прозрачный (т.к. на предыдущем шаге мы выбрали прозрачную подложку).

Шаг 2. Рисуем картинку.

Теперь мы очень подробно расскажем, как нарисовать будущее меню для вашей группы. Мы предлагаем вам сделать меню в виде кнопок, т.к. оно довольно просто делается и при этом эффектно смотрится.

Чтобы нарисовать кнопку, сначала мы выбираем фигуру в виде скругленного прямоугольника. Для этого щелкаем правой кнопкой мыши на фигуру с прямоугольничком на панели рисования, а затем в появившемся меню выбираем нужную нам форму.

Затем нам нужно в панели, появившейся вверху экрана выбрать следующую кнопку:

После чего мы должны установить цвет нашей будущей фигуры. Для этого щелкаем мышкой по панели настройки цвета и в появившемся окне выбираем нужный нам цвет. Когда выбранный цвет нас устроит, нажимаем ОК:

Создаем новый слой:

Слои – это такой инструмент Photoshop, который позволяет нам размещать разные объекты как бы один поверх другого. В результате мы можем менять порядок объектов на рисунке, редактировать их или скрывать. Можно провести аналогию с работой мультипликатора: на одной прозрачной пленочке у него нарисовано море и небо, на другой – пальмы, на третьей – героиня из рекламы Баунти, которая расслабленно качается в гамаке. Накладывая одну пленочку на другую, он создает картинку, имея возможность по своему вкусу легко заменить голубое дневное небо на розовое закатное или пальмы на кактусы.

Итак, мы подготовили все инструменты к работе и можем нарисовать нашу первую кнопку. Для этого просто нажмите на рабочую область левой кнопкой мыши и потяните в сторону (не отпуская кнопку мыши).

Теперь добавим текст, выбрав на панели инструментов соответствующий инструмент и щелкнув мышкой в нужном месте экрана.

Чтобы переместить написанный текст на подходящее для него место, нажмите кнопку в виде стрелки, которая показана на рисунке, а затем, щелкнув по тексту и не отпуская кнопки мыши, перетащите текст на желаемую позицию. Таким же образом вы можете перемещать по рабочему полю любые объекты.

Чтобы отредактировать текст, снова нажмите на кнопку в виде буквы Т, а затем щелкните мышкой по тексту. Установите шрифт, размер шрифта, цвет текста по вашему вкусу.

Важно: чтобы редактировать текст или перемещать объекты, нарисованные на другом слое, вам сначала нужно выбрать этот слой.

Повторите те же действия для всех кнопок, которые вы хотите сделать в меню группы. Мы рекомендуем каждую кнопку делать в новом слое. Проще всего это сделать копированием, тогда вам не придется рисовать одинаковые кнопки вручную. Для этого выделите мышкой нужный вам слой и нажмите сочетание клавиш Ctrl + J. Затем переместите кнопку на желаемое место способом, описанным выше.

Вот что получилось:

Теперь добавим в качестве фона картинку. Нужную картинку предварительно сохраните на своем компьютере.

Затем выберите в меню File (Файл) пункт Open (Открыть) и в появившемся окне укажите путь к вашей картинке и откройте ее. У вас появится новая рабочая область, в которой есть только ваша картинка. Чтобы скопировать ее в файл, где мы с вами сейчас рисуем меню, вам нужно:

  1. При помощи инструмента Выделение выделить ту часть картинки, которую вы хотите скопировать. Для этого ведите по ней курсором, зажав при этом левую кнопку мышки. Вокруг выделенной части изображения появится пунктирный прямоугольник.
  2. Нажмите в верхнем меню пункт Edit (Править), а затем Copy (Копировать), или просто сочетание клавиш Ctrl + C
  3. Перейдите в тот файл, где вы рисуете меню, создайте новый слой и нажмите в верхнем меню пункт Edit (Править), а затем Paste (Вставить), или просто сочетание клавиш Ctrl + V. Скопированное изображение появится у вас на рисунке.

У нас получилось так, что изображение не соответствует размерам рисунка и его нужно уменьшить. Для этого мы нажимаем сочетание клавиш Ctrl + T. Вокруг картинки появились маркеры-прямоугольнички, двигая которые, мы можем уменьшить, увеличить или растянуть изображение:

Ну а как передвинуть изображение на свое место, мы вам уже рассказали.

Когда полученный результат вас устроит, нажмите любую кнопку на панели инструментов (или просто нажмите клавишу Enter). Перед вами откроется окно, в котором программа спрашивает вас, хотите ли вы применить к изображению сделанные изменения. Нажмите Apply (Применить).

Как вы видите на рисунке, добавленная нами фотография закрыла собой нарисованные кнопки. Если у вас произошло то же самое, то просто перетащите слой с фотографией на панели слоев в самый низ.

После этого мы решили, что хотим немного поменять цвет текста (как это сделать, мы сегодня уже рассказали), и в результате получилось вот что.

Добавим кнопкам эффекта прозрачности. Для этого выделяем слой с нужной кнопкой, а затем в поле слоев меняем параметр Opacity (Прозрачность) со 100% на немного меньшее значение. Повторяем так для каждой кнопки.

Ну и для тех, кому понравилось рисовать: добавим эффект тени к кнопкам.

В открывшемся окне можете ничего не менять и просто нажать ОК. Повторить действия для каждого слоя с кнопками (кроме текстов).

Теперь нам нужно обрезать лишнюю часть подложки рисунка:

Вот что у нас в итоге получилось:

Шаг 3. Правильно сохраняем рисунок

Теперь нам нужно разрезать эту картинку на отдельные части, чтобы каждый пункт меню можно было сохранить в виде отдельной картинки. Вот как это делается.

Нажимаем в меню File (Файл), затем Safe for web (Сохранить для веб). Перед вами откроется окно с настройками для сохранения файла. Мы рекомендуем выбрать формат png-24 (он подходит в большинстве случаев) и снять галочку напротив Transparency (Прозрачность):

После того, как вы нажмете Сохранить, у вас на компьютере появится папка images, в которой будут лежать фрагменты вашего меню.

В следующий раз мы расскажем вам, как вставить меню в группу и добавить к нему ссылки.

Домашнее задание: нарисовать и сохранить красивое меню для группы.

Если вдруг что-то осталось для вас непонятным, не стесняйтесь задавать вопросы. Вопросы оставляйте прямо здесь, в комментариях под этим уроком. Следующий урок вы получите ровно через неделю. До встречи!

 

tibimi.ru

Креативные меню – дизайн, который едят глазами

Меню по праву можно назвать важной составляющей высококлассного обеда. Это не просто перечень блюд и напитков. Это лицо ресторана, ведь сначала мы «едим» глазами, а уже потом пробуем блюда на вкус. Чем красивее и привлекательнее меню, тем более хорошее впечатление сложится у посетителя. И если уровень обслуживания и талант шеф-повара исправить дизайнерам не под силу, то создать сногсшибательное меню  вполне в их компетенции.

Мы предлагаем вам посмотреть на 15 впечатляющих примеров меню, выполненных в разных стилях. Возможно, вы найдете здесь вдохновение, и создадите свой шедевр!

01.Ragu Café

Группа российских креативщиков разрабатывала всю айдентику для ресторана RAGU, но настоящий восторг вызывает именно меню. Стильные фотографии блюд позволяют клиентам увидеть их именно так, как они будут выглядеть на их столе. Это так круто, что возникает вопрос, почему остальные рестораны не делают так же?

02.Pelican

Два в одном – девиз ресторана и бара Пеликан в Сингапуре. Чтобы подчеркнуть дуальность этого заведения дизайнеры смешали образ человека и морских обитателей.

03. Hubbly Bubbly

Немного детской эстетики для небольшого ресторана в Орландо. Яркие цвета и простые иллюстрации создают приятный колорит, который идеально подходит для локального заведения.

04. Montero

Для мексиканского ресторана местное агентство Anargama сделали красивое меню с отсылкой к колониальному стилю, который отражает культурные ценности и особенности кухни этого  заведения.

05. Holly Burger

Традиционный американский стиль в свежей интерпретации дизайнеров Manuel Astorga и Rodrigo Aguade.

06. L’Encant

Меню суши-бара L’Encant в Испании разработало дизайнерское агентство Nuria Vila. Смешение испанской и японской культуры привело к созданию меню с использованием нестандартных материалов: деревянной обложки и каменной бумаги внутри.

07. Fade St. Social

Передать национальный характер и настроение заведения можно через меню, если оформить его иллюстрациями, как в случае с этим баром в Дублине. Иллюстратор Steve Simpson создал смешные и яркие рисунки, которые подчеркивают настроение бара.

08. Mr. Brown

Меню может быть не только частью айдентики, но и частью интерьера ресторана, как в случае с этим мексиканским заведением.

09. Smith

Если есть необходимость часто менять меню ресторана, не стоит делать его дорогим, ведь в итоге это может быть очень затратно. Ресторан-клуб в центре Торонто предлагает интересное меню в виде большой газеты с черно-белыми иллюстрациями и большим, хорошо читаемым текстом. В его создании участвовала иллюстратор Tracy Ma, которая сделала его стильным и недорогим, что позволяет менять его каждый сезон.

10. Eleven Madison Park

Это элегантное минималистичное меню появилось в Нью-Йоркском ресторане Eleven Madison Park. Разработанное дизайнером Juliette Cezzar оно предлагает 28 ингредиентов, из которых клиент может составить 16 блюд на свой выбор.

11. Fat Cow

Ресторан в Сингапуре, который специализируется на говядине, притом использует японский метод приготовления и подачи. Вдохновленное японской эстетикой «Wabi Sabi», креативное агентство Foreign Policy придумало специальную деревянную подставку, на которой подается меню.

12. Кафе Кафка

Кафе в Барселоне со средиземноморской кухней примечательно своим меню. Стилизованные под старину иллюстрации и интересная компоновка производят приятное впечатление и наглядно демонстрируют богатую историю заведения и его винтажный характер.

13.  Maddigan’s Freehouse

Традиционный лондонский паб Maddigan может похвастаться значительным количеством постоянных посетителей. Поэтому когда встал вопрос о том, чтобы обновить стиль, перед дизайнером Aaron Kitney была поставлена задача не отпугнуть старых клиентов, и привлечь новых. Так появился этот привлекательный консервативный дизайн.

14. Aroma

Когда содержание руководит формой. Именно это и произошло в случае с рестораном Aroma в Барселоне. Дизайнер Eren Saracevic использовал стиль минимализм, чтобы описать каждый пункт в меню. А в качестве поддержки основной идеи дизайнер поместил иллюстрацию носа на обложке меню.

15. Wives

Это коктейльное меню одно из самых примечательных. Следуя концепции сингапурского заведения «13 жён», каждый напиток – это история одной вымышленной женщины, которая рассказана в этой маленькой черной книжке. Это еще один креатив от студии Foreign Policy.

По материалам creativebloq.com

Related

www.pressfoto.ru

Красивое меню для сайта нарисовать

Урок о том, как нарисовать в Photoshop красивые кнопки меню для Вашего сайта, используя простые инструменты.

Во-первых, создайте новый документ размером 500х300 пикс. и залейте его с помощью инструмента ‘Градиент’ цветами #000000 и #1b2c3e:

Теперь выберите инструмент ‘Закругленный Прямоугольник’ (Rounded Rectangle Tool) (Радиус: 10 пикс.) с любым цветом (это не тот цвет, который Вы будете использовать на самой кнопке):

Растеризуйте слой (Layer > Rasterize > Shape) и примените следующие стили слоя:

Должно получиться следующее:

Далее необходимо сделать выделение кнопки (Select > Load Selection) и сузить выделенную область на один пикс. (Select > Modify > Contract). Создайте новый слой и залейте цветом #1b1b1d:

Время добавить сияние кнопке. Создайте еще один новый слой и используйте инструмент Эллиптического Выделения (Elliptical Marquee Tool). Выделенную область залейте цветом #479ea5:

Используйте фильтр ‘Размытие по Гауссу’ (Filter> Blur > Gaussian Blur):

Получится это:

Далее примените ‘Размытие в Движении’ (Filter > Blur > Motion Blur) с такими параметрами:

Теперь должно получиться так:

Теперь используйте Многоугольное Лассо (Polygonal Lasso Tool), чтобы выделить область, подобную этой и заполните белым цветом:

Опять используйте фильтр ‘Размытие по Гауссу’ (Filter> Blur > Gaussian Blur)…:

…и ‘Размытие в Движении’ (Filter > Blur > Motion Blur) с такими параметрами:

Теперь сделайте выделение с помощью инструмента ‘Прямоугольное Выделение’ (Rectangular Marquee Tool):

Инвертируйте выделение (Ctrl+Shift+I) и нажмите Delete чтобы очистить выделенную область:

Теперь добавим текстуры. Создайте новый документ с прозрачным слоем 3х3 пикс. с прозрачным слоем и закрасьте 3 клетки карандашом по диагонали:

Теперь сохраните его как образец (Edit > Define Pattern). Вернитесь к исходному документу. Выделите верхнюю часть кнопки с помощью инструмента ‘Прямоугольное Выделение’ (Rectangular Marquee Tool) и залейте белым цветом:

Используйте следующие параметры наложения (blending options):

Установите непрозрачность 7% по и Вы увидите результат:

Но это еще не все. Создайте новый слой. Используйте Многоугольное Лассо (Polygonal Lasso Tool), а выделенную область залейте белым:

Примените ‘Размытие в Движении’ (Filter > Blur > Motion Blur):

Результат:

Теперь создайте новый слой и используйте карандаш, чтобы нарисовать элементы дизаина кнопки:

Создайте дубликат слоя (Ctrl+J) и примените ‘Размытие в Движении’ (Filter > Blur > Motion Blur):

Нарисуем горизонтальные линии. Создайте новый слой и нарисуйте линии цветом #479ea5:

Выделите нарисованные линии с помощью инструмента ‘Прямоугольное Выделение’ (Rectangular Marquee Tool) и залейте тем же цветом, что и линии:

Установите непрозрачность слоя 30% и объедините с предыдущим (с линиями). Затем примените ‘Размытие в Движении’ (Filter > Blur > Motion Blur):

Результат:

Выберите слой всей кнопки. Продублируйте её и залейте черным цветом:

Добавьте шума (Filter > Noise > Add Noise):

И установите непрозрачность слоя 60%. Результат:

Теперь добавим названия к кнопкам. Выберите инструмент ‘Текст’ (Horizontal Type Tool) и напишите свой текст цветом #70ffff:

Шрифт Electrofied (14 pt, Crisp), но Вы можете использовать другие цвета и шрифты. Все зависит от Вашей фантазии!

Конечный результат:

makoveckij.ru

как нарисовать меню

Ведущий Александр Никулин.

Рассмотрены вопросы: 1. Отрисовка меню в фотошопе 2. Создание вики-страницы в группе Используемые коды: ...

Я ВК - https://vk.com/flatingo # Группа ВК - https://vk.com/flatingo_games # Instagram - https://instagram.com/flatingo_games # Twitter ...

В этом видео я покажу, как просто нарисовать веселое МакМеню, кавайный фастфуд. Украшайте свою канцелярию...

меню, coreldraw.

IP сервера: 176.58.60.7:27015 Группа ВК: http://vk.com/switchgame ======= В этом видео мы рассмотрим как самостоятельно создать...

ссылка на архив https://www.dropbox.com/s/wftucrpzu7qenv1/%D0%BC%D0%B5%D0%BD%D1%8E.rar В следующем видео будет разбор лучших ваших ...

How to draw Chalkboard Lettering Coffee Menu. In this tutorial I show how you can letter your own coffee chalkboard menu creative Cafe style. Website: www.

В данном видео я делаю планшеты под меню бара. Подобный вариант многие из вас уже встречали в меню баров,...

Второй урок из серии обучающих видео по работе с игровым движком Unity3D В данном уроке мы научимся рисовать...

Простое меню в Bat файле при помощи команд set и if ============

В этом видео мы сделаем бургер-меню. Так называются кнопки, где есть три полоски, которые обычно анимируются...

Ссылка для создания вики-страницы (скопируйте) - http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы Параметры (разделяются...

сделать меню для группы вконтакте в фотошопе ссылка на архив https://yadi.sk/i/utOlZ75BbcD5D.

Сегодня с девочками Надюшка http://www.youtube.com/watch?v=dEv1vRfXqsQ Леночка http://www.youtube.com/watch?v=bMY3J_sIlyg готовим ...

https://vk.com/wedroom72.

Рисуем меню для группы ВКонтакте в Photoshop.

Вторая часть видео урока: https://itproger.com/course/unity-android/4 Как сделать игру на Андроид Unity 5 | Урок #3 - Главное меню....

Как оформить лд Разворот МОЕ МЕНЮ / Идеи для лд нарисовать рисунок любимой еды - милые картинки рисунок поэт...

Видео урок о том, как самостоятельно сделать wiki-меню для сообщества ВКонтакте с использование сервиса...

Хотите создать меню для группы ВКонтакте? Закажите дизайн у профи ▻http://vk-dizayn.ru Хотите привлечь живых подпис...

Видео "Как бесплатно оформить группу Вконтакте за 45 минут" - http://www.youtube.com/watch?v=oWm0dSpkwEI Наша группа: http://vk.com/wikisty...

Как создать свое меню в android приложении, как добавить пункты в меню, как обработать нажатие (выбор) пунктов...

С этими праздниками, нормально до видео не добраться :) Сегодня мы будем делать меню с выпадающими списками...

Видео от подпищика! Группа Вконтакте: http://vk.com/fotoneck Как похудеть? Жидкий каштан! Подробней: http://vk.cc/3ylKaS Курс...

Недавно на моем канале был выпущен трейлер, посвященный серии видеоуроков по созданию меню для группы ВКон...

ВАЖНО: Процесс создания меню изменился. Теперь все настраивается в одном месте Пользовательские команды...

Самоучитель C++ 15 серия Создаем программу в Visual Studio, Как сделать меню в консоли, оператор switch case Сервисный...

Посмотрите уроки по html5 и css3: https://webformyself.com/minikurs/html5/ В этом видео мы продолжим верстку кругового меню, погово...

В этом видео я показываю как сделать меню для группы ВКонтакте состоящее из двух столбцов. Если у вас есть...

В этом видео я расскажу вам как изменять меню и обновлять оффсеты. Обновляю оффсеты на 5:20 И не забудьте...

Пошаговый план по созданию сайта: https://webformyself.com/hivideo/ многоуровние меню меню структура меню древовидная...

В этом уроке мы с вами научимся делать меню ВКонтакте просто и самостоятельно. Зачем платить деньги другим...

Инструкция, как сделать меню для группы ВКонтакте. Скачайте шаблон для меню группы ВКонтакте бесплатно....

Как удобнее рассматривать в Кореле? А как правильнее.

Видео "Как бесплатно оформить группу Вконтакте за 45 минут" - http://www.youtube.com/watch?v=oWm0dSpkwEI В этом уроке наглядно...

В этом видео я покажу как сделать дизайн меню для группы Вконтакте, дизайн поста и как это всё сверстать...

terraria 1.3.1.1 download waitforchild roblox dependency on version could not be satisfied cannot activate because this product is incapable of kms activation. windows 7 skidma scripts ?? 19 atlantic craft jurassic craft season 2 arathor private server valthume walkthrough rosadin tv descargar

debojj.net

Как нарисовать меню сайта?

В сети можно найти множество макетов сайтов. Ими удобно пользоваться в тех случаях, когда нет времени на то, чтобы писать весь код с нуля. Гораздо проще отредактировать имеющийся шаблон, изменив его дизайн. Так, чтобы нарисовать собственное меню сайта, необходимо выполнить несколько действий. Создать сайт самостоятельно с Wix.com

Инструкция
  • Для примера рассматривается работа в системе ucoz. Оформление различных элементов сайта часто задается с помощью таблицы стилей (CSS). Чтобы получить к ней доступ, войдите в панель управления, используя учетную запись администратора. На главной странице панели выберите раздел «Управление дизайном».
  • В развернувшемся списке страниц, доступных для редактирования, выберите в категории «Общие шаблоны» пункт «Таблица стилей (CSS)». Просмотрите информацию, прописанную в строках, относящихся к общему оформлению (блок General Style) и конкретно к меню (блоки, в названиях которых стоит слово Menus). Вам необходимо выяснить, какие параметры заданы для панели меню: ширина, высота, фон панели и кнопок, изображения и так далее.
  • Если параметры вас не устраивают, замените их на те, которые вам нужны, и сохраните шаблон. После этого, уже можно запускать графический редактор и, используя полученные сведения, рисовать собственные кнопки. Сохраните их и вернитесь на сайт. В меню «Инструменты» выберите пункт «Файловый менеджер» или нажмите одноименную строку-ссылку, расположенную под блоком с кодом.
  • Загрузите на сайт новые кнопки (стрелки-указатели или другие графические элементы, которые вы будете использовать в меню). Пропишите значение для кнопок в коде (например, background: url('http://ссылка на изображение из файлового менеджера') no-repeat ХХpx ХХpx), задайте параметры для выравнивания, положения на странице. Пропишите стиль и размер шрифта для разделов меню (font-family и font-size) и внесите другие изменения, нужные вам.
  • Нажмите на кнопку «Сохранить», дождитесь оповещения о том, что шаблон успешно сохранен и откройте страницу сайта, чтобы оценить результат проделанной работы. Если вас что-то не устроило, вы можете отменить свои действия в окне редактирования CSS, воспользовавшись кнопкой в виде стрелки влево на панели инструментов.
  • Оцените статью!

    imguru.ru

    Создаём дизайн для меню в Фотошоп

    В этом уроке вы узнаете, как с помощью 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 (Тень).

    Далее нам нужно отредактировать прямоугольник. Меняем его цвет на #f5f5f5 и удаляем стили слоя. Затем открываем окно Layer Style (Стиль слоя) и применяем новые стили слоя, как показано ниже.

    Шаг 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+]), затем копируем стили слоя из предыдущего шага и вставляем их на этот прямоугольник.

    Далее применяем к первому прямоугольнику из восьмого шага стиль слоя Drop Shadow (Тень).

    Шаг 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

    Четыре раза дублируем группу, созданную в предыдущем шаге. Размещаем копии, как показано на рисунке ниже, и меняем на каждой кнопке текст.

    Шаг 14

    Теперь доработаем подменю Tutorials. Активируем слой со стрелкой в группе с кнопкой Tutorials и открываем окно Layer Style (Стиль слоя). Применяем стили слоя.

    Шаг 15

    Активируем текстовый слой Tutorials и меняем его цвет на #2c95dd. Также активируем серый закругленный прямоугольник под текстом и применяем к нему стиль слоя Gradient Overlay (Наложение градиента).

    Шаг 16

    Для финального шага нам необходимо сменить параметры сетки. Переходим Edit - Preferences - Guides, Grid & Slices (Редактироание - Установки - Направляющие, сетка и фрагменты) и параметр Gridline Every (Линии через каждые) устанавливаем на 1. Устанавливаем цвет переднего плана на #a1d8ff, берем Rectangle Tool (Прямоугольник) (U) и создаем квадрат размером 6 х 6 px.

    Затем активируем Direct Selection Tool (Частичное выделение) (А), хватаем нижний правый узелок квадрата и тянем его к центру на 3 px. После этого удаляем левый узелок и получаем треугольник.

    Открываем окно Layer Style (Стиль слоя) и применяем для треугольника стили слоя.

    Шаг 17

    Дублируем треугольник из предыдущего шага (Ctrl+J). Активируем копию, перемещаем ее в группу созданную в пятом шаге и размещаем на первой кнопке.

    Финальный результат

    Еще вариант

    Автор: Andrei Marius

    photoshop-master.ru