Как создать кнопки в фотошопе. Создание кнопки в фотошопе

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

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

Шаг 1

Создаем документ произвольных размеров. После чего делаем одну хитрость, которая для рисования мелких деталей просто незаменима.

Теперь следуем инструкции. Свернем документ, чтобы он был не на весь экран.

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

Теперь делаем так, как показано на скриншоте ниже, тем самым у нас появится второй экран с нашим документом. Главная изюминка этого метода в том, что один из документов можно сделать большого масштаба, к примеру 200-500% и тем самым намного удобнее будет работать с деталями, а на втором в 100% масштабе видеть все изменения.

Этап подготовки пройдет, пора начинать рисовать саму кнопку.

Шаг 2

Создаем новый слой, выбираем цвет, который будет основным для кнопки, я предпочел этот: #8cb314 , выбираем инструмент Rounded Rectangle Tool (настройки инструмента можно поглядеть на скриншоте ниже) и рисуем форму будущей кнопки.

Шаг 3

На этом шаге мы будем придавать объема нашей кнопке. Начнем с центра, его надо немного затемнить, выделим центральную область.

Выбираем цвет, немного темнее, чем у нас на кнопке, я использовал: 6a8a09, после используем Gradient Tool и выставляем настройки как на скриншоте ниже.

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

Но появилась проблема - градиентная заливка не соответствует форме кнопки. Благо решается она очень просто, щелкаем правой кнопкой мыши на слое и выбираем Create Clipping Mask.

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

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

Подбираем светлый цвет (светлее, чем верхняя часть кнопки), выбираем Gradient Tool и настраиваем, как на скриншоте ниже.

Теперь создаем новый слой (примечание: все слои, которые мы накладываем поверх кнопки, сразу переводим в Clipping Mask, свидетельством тому, что слой переведен служит маленькая, черная стрелка слева от изображения слоя).

На новом слое применяем градиент, вытягиваем его сверху вниз.

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

Шаг 4

Общий объем задан. Приятным дополнением будет более тщательная проработка границ кнопки. С помощью Rectangular Marquee Tool создайте прямоугольное выделение высотой в один пиксель.

Настраиваем градиент, как на рисунке ниже и тянем от центра к любому краю.

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

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

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

Полученное выделение закрашиваем белым и уменьшаем непрозрачность слоя. Я снизил до 12%.

Шаг 5

Добавляем текст на кнопку.

Копируем слой с текстом, переносим его ниже основного текста, красим в более темный цвет, сдвигаем на 1 пиксель вправо и на 1 вниз, после чего уменьшаем непрозрачность слоя. Это придает тексту немного объема, в зависимости от уровня выставленной непрозрачности для этого слоя, вы сможете сделать эффект более сильнее или слабо выраженным.

Остался последний штрих - я считаю, что саму кнопку можно сделать слегка четче. Для этого надо слить то большое количество слоев, что мы сделали на протяжении всего урока, кроме двух текстовых слоев. Делается это так: выделяем через Shift все слои и жмем Ctrl+E.

После того, как слои будут слиты в единый, сделаем его копию и применяем к ней фильтр Filter ? Sharpen ? Unsharp Mask… Рекомендую поиграть с настройками, для получения наиболее подходящего вам результата.

Остался один вопрос: «Зачем мы перед этой операцией дублировали слой». Все очень просто - если вдруг действия фильтра через минуту вам покажутся немного перенасыщенными, то уменьшить эффект можно снизив непрозрачность слоя, к которому был применен фильтр.

Кнопка готова, удачи.

Поделитесь уроком

Правовая информация

06.07.2015 27.01.2018

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

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

Главное чтобы кнопка правильно вписывалась в дизайн сайта или дизайн того, где вы будете её использовать.

Создайте новый документ в фотошопе. Кнопку мы нарисуем с помощью инструмента Прямоугольник со скругленными углами .

Теперь необходимо настроить инструмент. Цвет я использовал оранжевый — #ff8b00 . А радиус углов установил 4 пикселя .

Теперь рисуем саму кнопку. Размеры делайте с учетом того, какой примерно длинны будет надпись на кнопке — чуть больше, чтобы были уши.

Теперь сделаем небольшой объем в стиле flat. Парадокс, но объем будет в плоском стиле. Для этого сделайте копию слоя с прямоугольником (CTRL+J ) и тот прямоугольник который ниже по слоям — передвиньте его на 2-3 пикселя вниз в рабочей области. Поменяйте ему на цвет на более темный, в данном случае — #bf6800

Результат должен выглядеть так. В принципе вы можете делать объем больше, все зависит на сколько передвинете нижний прямоугольник. По сути это кнопка под кнопкой.

Теперь чтобы кнопка была интересней и сочнее — я предлагаю добавить стиль Градиент на верхний прямоугольник. Для этого нажмите двойным кликом на слой с прямоугольником и найдите стиль Наложение градиента .

Необходимо выполнить настройку — угол наклона 90 градусов.

А также сам градиент, цвета — #ff8c00 и #ffcc3f .

Кнопка преобразилась.

Осталось добавить надпись. Я использовал шрифт Myriad Pro и белый цвет. Размер и цвет шрифта — также нужно выбирать исходя из дизайна где будет находиться ваша кнопка.

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

Для этого сделайте копию слоя с надписью и ту которая ниже передвиньте на 1 пиксель вниз и поменяйте цвет — #be6d00 . Точно также мы делали с прямоугольниками.

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

Создайте новый документ. Размер тут не так важен, главное, чтобы в нем поместились три варианта нашей кнопки.

Теперь создайте группу слоев, кликнув на иконку с папкой в палитре слоев, и назовите ее button (типа, кнопка).

Будем работать в этой группе, т.к. правильное структурирование слоев всегда полезно. Теперь выберите инструмент Rounded Rectangle Tool и установите в настройках радиус округления углов на 5px и фиксированный размер формы 200х45px.

Щелкните по любому месту документа, создав при этом основу для кнопки.

Затем, дважды кликните по слою с формой и перейдите к окну редактирования стилей. Или просто перейдите Layer > Layer Style > Blending Options . Добавьте следующие стили:

Вот, что Вы должны были получить:

Теперь добавьте текст. В этом уроке используется пресловутый Calibri размером 16pt белого цвета. И примените стиль Drop Shadow к этому слою.

Первый вариант готов. Теперь создадим вариант кнопки, который будет появляться, когда мы наводим на нее мышь. Помните, мы в начале урока создали группу слоев? Вот ее и перетащите на значок создания нового слоя, появится дубликат группы. Переименуйте его в hover (типа, навели мышь).

Работаем с этой группой слоев. Откройте ее и дважды щелкните по слою с основой для кнопки. Откроется окно редактирования стилей слоев. Добавьте стиль Color Overlay .

Щелкните по группе слоев hover , выберите инструмент Move Tool и, не используя мышь, клавишами перемещения (по-простому стрелками) переместите группу вниз, как на рисунке. Главное, чтобы изображения примыкали друг к другу.

Готово. Как и в предыдущем шаге создайте дубликат группы слоев hover и назовите ее active (типа, нажимаем). Щелкните по слою с основой кнопки, удалите стиль Color Overlay и измените стиль Gradient Overlay , как на рисунке:

Также переместите изображение этой группы слоев вниз, но уже ниже изображения группы hover .

Итак, первый этап пройден. Мы создали три варианта кнопки и готовы перейти к правильному сохранению.

Сохранение изображения

Сделайте невидимым фоновый слой, щелкнув на иконку в виде глаза напротив слоя. Находясь на группе слоев active в палитре слоев, нажмите Ctrl+Shift+Alt+E , чтобы создать новый слой, который включит в себя все видимые части изображения (в нашем случае это кнопки). Затем перейдите на этот слой. После этого, используя любой инструмент выделения, создайте область выделения вокруг изображения, как на рисунке:

Нажмите Ctrl+C , чтобы скопировать изображение и создайте новый документ:

Обратите внимание, что документ создается уже с теми размерами, которые включают в себя все видимые части скопированного изображения. После создания изображения, нажмите Ctrl+V , чтобы вставить наши кнопки. Сделайте невидимым фоновый слой и перейдите Save for Web . Сохраните файл под названием buttons.png .

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

Верстка кнопки, используя стили CSS

Откройте Ваш html -файл. Сначала создадим ссылку:

Нажми меня!

Вот что получается:

A { display: block; /*Говорим браузеру, чтобы он отображал ссылку, как блочный элемент*/ width:202px; /*Определяем ширину блока*/ height:47px; /*Определяем высоту блока*/ text-indent: -9999px; /*Отступ первой строки*/ background-position: left top; /*Выравниваем фон по левому (X) верхнему (Y) углу*/ background-repeat: no-repeat; /*Не "размножать" картинку*/ background-image: url(buttons.png); /*Спрайт*/ }

Обратите внимание на значение параметра text-indent . Такой большой отступ сделан для того, чтобы сам текст было не видно, а ссылка была. Текст оставляется для поисковых роботов, так сказать для получения SEO-эффекта)). Вот, что мы получим:

Теперь нам необходимо указать нашей ссылке, как вести себя при наведении и клике по ней. Для этого используются псевдоклассы :hover и :active . В этом шаге понадобится вооружиться калькулятором. Объясню почему: так как изображение у нас одно, то для подстановки определенной его части в качестве фона блока с ссылкой, нам необходимо указать точное число пикселей, на которое будем смещать изображение. Посмотрите на рисунок:

Мы создавали кнопку высотой 45px. После применения стиля Stroke , согласно параметрам у нас с каждой стороны кнопки прибавилось по 1px. Итого, получается, что высота кнопки стала 47px. Если учесть, что первоначальное смещение фона равно 0, то при наведении мыши на кнопку, нам необходимо сместить фон на 47px вверх, т.е. подставить в значение Y , которое отвечает за смещение по вертикали, параметра background-position -47px. Аналогично и с нажатием на кнопку, только уже смещаем не на 47px, а на 47px+47px=94px.

A:hover { background-position: left -47px; } a:active { background-position: left -94px; }

Вот и все! Использование спрайтов выгодно тем, что обычно размер (вес) спрайта намного, в разы, меньше суммарного размера (веса) отдельных изображений. Но тут есть и негативный момент – чтобы подготовить спрайт, требуется большее количество времени. Решать Вам.

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

Откуда взялась идея?
Да откуда она взялась? Так вот есть такой хороший сайт под названием яндекс, уверен все его знают , у этого сайта появился раздел яндекс.диск и вот однажды зайдя в этот раздел увидел кнопки в желто-оранжевых оттенках, честно скажу что я влюбился в эти кнопки и у меня тут же в голове пронеслась идея создать такую кнопку в фотошопе!.
Мое удивление.
Оказывается данная кнопка сделана чисто на CSS3 я то думал что просто картинка, а оно вот что, не знаю может покажется странным кому то что я удивился, но я если честно не разбираюсь в CSS3 на таком уровне так базово. И так небольшую историю послушали, теперь приступаем к самому уроку!

Шаг 1. Создание документа.

Для начала создайте документ. Размеры выбирайте по своему вкусу я сделал 400х400 что бы размер картинок был не очень большим.

Шаг 2. Создание формы кнопки

Для этого на панели инструментов возьмите инструмент прямоугольник со скругленными углами.

И выставьте такие настройки:

Затем создаем вот такую фигуру нашей кнопки:

Внутреннее свечение/Inner Glow:

Шаг 3. Светлая часть

Для этого берем инструмент прямоугольник со скругленными углами с такими настройками:

И создаем вот такую фигуру:

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

После этого оставаясь на нашем слое и удерживая клавишу CTRL кликаем по слою с фоном нашей кнопки:

Получаем выделение кнопки, теперь нажмите комбинацию клавиш CTRL+SHIFT+I (получаем инверсию выделения) затем клавишу DELETE . Все получаем правильно вырезанную форму.

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

Затем в панели инструментов выберите основной цвет и назначьте вот такой цвет: #fbdf76 .

Теперь нажимаем комбинацию ALT+Backspace и заливаем нашу фигуру.

И да чуть не забыл что бы эффект смотрелся лучше нашу только что залитую фигуру с помощью свободной трансформации уменьшите по бокам на 1 пикс . И прозрачность опустите до 70% .

Результат:

Шаг 4. Делаем высветления и затемнения.

1. Нижнее осветление кнопки.

Берем инструмент кисть .

Ставим такие настройки:

Создаем новый слой и проводимся кистью по нижней части кнопки:

Обрезаем лишнее как делали выше, т.е выделить слой кнопки, инвертировать и удалить.
Прозрачность сделайте 40% .

2. Верхнее осветление кнопки.

Проделайте все тоже самое только цвет кисти будет таким: #fdefaa . Мой результат:

3. Затемнение середины.

Опять делаем то же самое только нужно делать это посередине светлой части кнопки и теперь не надо ничего инвертировать и выделять, просто не выходите за границы кнопки. Цвет кисти: #f9d659 . Прозрачность 90% .
Получаем:

Кнопка готова но без теней смотрится не очень красиво и сейчас мы с вами сделаем эту тень!

Шаг 5. Создание теней.

Создание теней это очень трудоемкий процесс и долгий поэтому попробую объяснить более понятно.

1. Задняя тень

И так начнем. Создайте новый слой. Сбросьте цвета нажатием клавиши D . Нажмите X если основной цвет не черный. Возьмите инструмент Овальная область .

Создайте вот такую фигуру:

Заполняем ее комбинацией клавиш ALT+Bakspace .

Убираем выделение CTRL+D .

Применяем фильтр размытие по гауссу.

Затем трансформируем нашу тень комбинацией CTRL+T .

И затем с помощью прямоугольной областью удаляем нижнюю часть:

Как вы заметили, низ тени получился, мягко говоря, пи**ец . Для этого берем инструмент размытие и размываем уголки.

2. Нижняя тень.

Дублируем нашу кнопку т.е без свечений теней и т.д а просто саму кнопку. Очищаем от стилей. И перемещаем слой ниже слоя самой нашей кнопки.
Так теперь измените цвет на черный и растрируйте слой. Затем переместите фигуру ниже на 1 пикс.

И размываем по гауссу.

Следуя шагам этого урока вы научитесь создавать векторную кнопку питания в Adobe Illustrator. Сначала вы узнаете, как настраивать сетку, создать простой прямоугольник, который послужит фонов. Затем, используя техники создания основных векторных форм, создадите круг и контур, которые будут составлять саму кнопку. В заключение, используя все преимущества панели Оформление (Appearance), вы добавите цвет, тени и блики, придавая глубину объектам.

Шаг 1.

Нажмите Ctrl + N , чтобы создать новый документ. Выберите Пикселы (Pixels) в выпадающем меню Единицы измерения (Units) , выставьте ширину (width) и высоту (height) документа 600 пикселей, затем нажмите кнопку Дополнительно (Advanced) , выберите Цветовой режим (Color mode): RGB, Растровые эффекты (Raster effects): Экранное (Screen (72ppi) , убедитесь, что снята галочка в окошке Выровнять новые объекты по пиксельной сетке (Align New Objects to Pixel Grid) , нажмите ОК.

Настроим сетку: в меню выберите Просмотр > Показать сетку (View > Show Grid (Ctrl + ") и еще раз Просмотр > Выравнивать по сетке (View > Snap to Grid (Shift + Ctrl + ") . Вам нужна будет сетка с ячейкой в 5 пикселей, настроить ее можно перейдя в меню Редактирование > Установки > Направляющие и сетка (Edit > Preferences > Guides > Grid). Поставьте значение 5 в окошке Линия через каждые (Gridline every) и поставьте 1 в окошке Внутреннее деление на (Subdivisions). Не пугайтесь этих приготовлений с сеткой – это упростит вам работу, к тому же вы всегда можете выключить видимость сетки, нажав (Ctrl + "). Также вы можете выбрать в меню Окно > Информация (Window > Info (Ctrl + F8), чтобы посмотреть информацию о единицах измерения документа. Убедитесь, что там стоят пикселы. Если нет, можете установить их через Меню > Установки > Единицы измерения > Основные (Edit > Preferences > Units > General). Это значительно упростит дальнейшую работу.

Шаг 2.

Возьмите Инструмент Прямоугольник - Rectangle Tool (M). Сбоку панели Инструментов (Toolbar) удалите цвет с обводки, а цвет заливки выберите R=50 G=50 B=50. Теперь один раз кликните по холсту левой кнопкой мыши, чтобы открыть окно настроек. Введите значение 610 в поля ширина (Width) и высота (Height) и нажмите ОК. В итоге вы должны получить квадрат 610 х 610 пикселей . Далее, откройте панель Выравнивание (Align) - Окно > Выравнивание (Window > Align) (Shift + F7) . В выпадающем окне панели выберите пункт Выровнять по монтажной области (Align To Аrtboard) , затем кликните на иконки Горизонтальное выравнивание по центру (Horizontal Align Center) и Вертикальное выравнивание по центру (Vertical Align Center) . В результате ваша темная фигура должна закрыть всю монтажную область, как показано на рисунке.

Шаг 3.

На панели Инструментов (Toolbar) выберите цветом заливки R=70 G=175 B=15 и переключитесь на Инструмент Эллипс - Ellipse Tool (L) . Создайте круг диаметром 110 пикселей и так же отцентрируйте его, как мы делали с квадратом.

Шаг 4.

При выделенном зеленом кружке, перейдите в меню Объект > Контур > Создать параллельный контур (Object > Path > Offset Path) . В появившемся окне введите -40 пикселей и нажмите ОК. Выделите полученный контур и перейдите на панель Оформление (Appearance) - Окно > Оформление (Window > Appearance) . Удалите цвет с заливки, цветом обводки выберите белый и увеличьте толщину обводки (Stroke Weight) до 6 пунктов.

Шаг 5.

Выделите белый контур и перейдите в меню Объект > Контур > Добавить опорные точки (Object > Path > Add Anchor Points). Затем возьмите Инструмент Прямое выделение - Direct Selection Tool (А) , выделите верхние точки (отмечены на втором рисунке) и просто нажмите клавишу Удалить (Delete) на клавиатуре. Выделите оставшийся контур, откройте панель Обводка (Stroke) – Окно >Обводка (Window > Stroke) и кликните на иконку В итоге все должно выглядеть, как на третьем рисунке.
Далее возьмите Инструмент Перо - Pen Tool (P) и создайте вертикальный контур высотой в 15 пикселей , затем разместите его так, как показано на четвертом рисунке. Выставьте этому контуру цвет обводки белый, толщину (Weight) 6 пунктов , кликните иконку Скругленные концы (Round Cap).

Шаг 6.

Выделите оба белых контура и перейдите в меню Объект > Контур > Преобразовать обводку в кривые (Object > Path > Outline Stroke) . Выделите обе созданные фигуры и нажмите сочетание клавиш Ctrl + 8 (или через меню Объект > Составной контур > Создать - Object > Compound Path > Make).

Шаг 7.

Выделите зеленый круг, перейдите на панель Оформление (Appearance) и нажмите иконку Добавить новую заливку (Add New Fill) внизу панели. Выберите эту новую заливку, откройте панель Градиент (Gradient) - Окно > Градиент (Window > Gradient ) и кликните по миниатюре градиента, чтобы добавить линейный градиент по умолчанию от черного к белому. На панели Градиент установите Угол (Angle): 90 градусов. Затем выделите правый ползунок цвета градиента и установите цвет на R=0 G=95 B=0, цвет левого ползунка установите R=130 G=225 B=75. Далее при выделенной второй заливке перейдите в меню Объект > Контур > Создать параллельный контур (Object > Path > Offset Path), введите в появившемся окошке Смещение (Offset) -8 пикселей и нажмите ОК.

Шаг 8.

Опять же при выделенном зеленом круге, на панели Оформление (Appearance) добавьте третью заливку, нажав на иконку Добавить новую заливку (Add New Fill). Так же выберите градиент по умолчанию для этой заливки, затем установите Угол (Angle): 90 градусов, цвета градиента смотрите на рисунке. Затем нажмите стрелочку слева от вкладки с новой заливкой, далее кликните по надписи «Непрозрачность» (Opacity) и в появившемся окне установите режим наложения Перекрытие (Overlay) и уменьшите Непрозрачность (Opacity) до 60%. Затем в меню выберите Объект > Контур > Создать параллельный контур (Object > Path > Offset Path), выставьте Смещение (Offset) -4 пикселя и нажмите ОК.

Шаг 9.

Выделите зеленый кружок, и добавьте четвертую заливку. Выберите ее и примените Градиент - Gradient Tool (G): Тип (Type): Радиальный (Radial); цвета градиента смотрите на рисунке. Затем в меню выберите Объект > Контур > Создать параллельный контур (Object > Path > Offset Path), Смещение (Offset) -10 пикселей. Далее добавьте из меню Эффект > Стилизация > Внутреннее свечение (Effect > Stylize > Inner Glow) с такими настройками:

Режим наложения: Перекрытие (Overlay);

цвет R=0 G=0 B=0

Непрозрачность (Opacity): 30%;

Размытие (Blur): 10 пикселей

выберите пункт По краю (Edge)

Шаг 10.

Теперь при выделенном зеленом кружке, на панели Оформление (Appearance) выделите текущую обводку и установите ее цвет – черный. Перейдите на панель Обводка (Stroke), установите толщину (Weight) в 1 пункт, затем нажмите иконку Обводка внутри линии (Align Stroke to Inside) . Далее на панели Оформление (Appearance) уменьшите Непрозрачность (Opacity) черной обводки до 15%, измените режим наложения на Рассеянный свет (Soft Light). Далее перейдите в меню Объект > Контур > Создать параллельный контур (Object > Path > Offset Path), Смещение (Offset) -10 пикселей и нажмите ОК.

Шаг 11.

При выделенном зеленом кружке, на панели Оформление (Appearance) выберите текущую обводку и дублируйте ее, нажав иконку Создать дубликат выбранного объекта (Duplicate Selected Item) (отмечена голубой стрелкой на рисунке ниже). Теперь выберите только что созданную обводку, увеличьте толщину (Weight) до 3 пунктов и уменьшите Непрозрачность (Opacity) до 10% . Дублируйте эту обводку в 3 пункта, затем увеличьте толщину (Weight) дублированной обводки до 5 пунктов и установите Непрозрачность (Opacity) в 5%.

Шаг 12.

Снова выделите зеленый кружок. Добавьте новую заливку на панели Оформление (Appearance), затем уменьшите ее Непрозрачность (Opacity) до 50%, и измените режим наложения на Перекрытие (Overlay). Далее перейдите в меню Эффект > Исказить и трансформировать > Трансформировать (Effect > Distort & Transform > Transform) и выставьте такие настройки: Масштабирование: - По горизонтали (Scale - Horizontal) 30%; По горизонтали (Scale - Vertical) 5%

Перемещение: - По горизонтали (Move- Horizontal) 0 пикселей; По вертикали (Move-Vertical) 30 пикселей.

Снимите галочки Отразить зеркально по оси Х (Reflect X) и Отразить зеркально по оси Y (Reflect Y), Случайно (Random).
Далее выберите в меню Эффект > Деформация > Арка (Effects > Warp > Arch) и примените следующие настройки:

- выберите пункт По горизонтали (Horizontal)

- Изгиб (Bend): -40%

Раздел Искажение

- По горизонтали (Horizontal): 0%

- По вертикали (Vertical): 0%
Нажмите ОК.

Шаг 13.

Выделите зеленый кружок, добавьте новую заливку и установите ее цвет R=30 G=30 B=30. Перетащите эту заливку в самый низ на панели Оформление (Appearance), при выделенной заливке перейдите в меню Объект > Контур > Создать параллельный контур (Object > Path > Offset Path) , выставьте Смещение (Offset) 4 пикселя, нажмите ОК. Далее примените Эффект > Стилизация > Тень (Effect > Stylize > Drop Shadow) со следующими настройками:

Режим наложения: Рассеянный свет (Soft Light);

Непрозрачность (Opacity): 80%;

Сдвиг по оси Х (Х Offset): 0 пикселей;

Сдвиг по оси Y (Y Offset): 1 пиксель;

Размытие (Blur): 0 пикселей;

Цвет (Color): белый.

Шаг 14.

Далее при выделенном зеленом кружке, снова добавьте новую заливку, перетащите ее вниз на панели Оформление (Appearance), добавьте Линейный градиент (linear gradient), Угол (Angle): 90 градусов, цвета смотрите на рисунке. Затем в меню выберите Объект > Контур > Создать параллельный контур (Object > Path > Offset Path), Смещение (Offset) 15 пикселей, нажмите ОК.
Добавьте через меню Эффект Размытие Размытие по Гауссу (Effect > Blur > Gaussian Blur), Радиус (Radius) 10 пикселей. Нажмите ОК.

Шаг 15.

Опять же при выделенном зеленом кружке на панели Оформление (Appearance) выделите нижнюю заливку и дублируйте ее, нажав иконку Создать дубликат выбранного объекта (Duplicate Selected Item). Откройте существующий эффект этой заливки Параллельный контур (Offset Path) и уменьшите Смещение (Offset) до 10 пикселей , затем откройте эффект этой заливки Размытие по Гауссу (Gaussian Blur) и уменьшите Радиус (Radius) до 3 пикселей. Нажмите ОК.

Шаг 16.

Выделите зеленый кружок, на панели Оформление (Appearance) выберите зеленую заливку с цветом (R=70 G=175 B=15) и перейдите в меню Эффект > Стилизация > Внутреннее свечение (Effect > Stylize > Inner Glow) и установите такие настройки:

Режим наложения: Перекрытие (Overlay);

цвет черный

Размытие (Blur): 5 пикселей

выберите пункт По краю (Edge).
Нажмите ОК.

Добавьте еще один эффект: Эффект > Стилизация > Внешнее свечение (Effect > Stylize > Outer Glow)

Режим наложения: Нормальный (Normal);

цвет R=10 G=125 B=0

Непрозрачность (Opacity): 100%;

Размытие (Blur): 2 пикселей

Шаг 17.

Выделите белый составной контур и замените текущую заливку на Градиент - Gradient Tool (G): Тип (Type): Радиальный (Radial) от белого к серому R=211 G=211 B=211, угол (Angle): 0 градусов

Шаг 18.

При выделенном составном контуре добавьте вторую заливку и установите ее цвет R=100 G=205 B=45 . Измените режим наложения на Умножение (Multiply) , затем в меню выберите Объект > Контур > Создать параллельный контур (Object > Path > Offset Path), Смещение (Offset) -2,5 пикселя. Нажмите ОК.

Шаг 19.

Далее выделите составной контур (если он не выделен), на панели Оформление (Appearance) выберите текущую обводку, измените ее цвет на черный, уменьшите Непрозрачность (Opacity) до 15% и нажмите иконку Обводка внутри линии (Align Stroke to Inside) . Вернитесь на панель Оформление (Appearance) и добавьте еще одну обводку, нажав иконку Добавить новую обводку (Add New Stroke) (на рисунке указано голубой стрелкой). Выберите эту новую обводу и уменьшите ее Непрозрачность (Opacity) до 25%, нажмите иконку Обводка снаружи линии (Align Stroke to Outside).

Шаг 20.

Выделите кружок вместе с составным контуром и дублируйте их, нажав Ctrl + C > Ctrl + F. Теперь выделите эти копии и перетащите их на несколько пикселей вниз, как показано на втором рисунке.

Шаг 21.

Выделите кружок скопированной кнопки и на панели Оформление (Appearance) выделите пятую заливку (считая снизу) и замените цвета градиента на те, что показаны на картинке (желтый и оранжевый). Затем замените цвет зеленой заливки на оранжевый (R=227 G=128 B=10) . Выберите эту оранжевую заливку и откройте ее эффект Внешнее свечение (Outer Glow) и измените настройки на такие: Режим наложения: Нормальный (Normal);

цвет R=239 G=65 B=54

Непрозрачность (Opacity): 100%;

Размытие (Blur): 2 пикселя.

Шаг 22.

Шаг 23.

Надеюсь, вам понравился урок, и вы будете применять полученные знания в ваших будущих проектах.