Как сделать красивые кнопки в фотошопе. Рисуем кнопку · «Мир Фотошопа

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

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

Шаг 1. Создаем новое изображение размером шириной 250px и высотой 100px

Шаг 2. Выделяем изображение «Выделение - Всё (Ctrl+A)»

Шаг 3. Закругляем края у выделения «Выделение - Закруглить прямоугольник» (настройки по умолчанию)

Шаг 4.

Шаг 5. Так как выделение у нас активно, заливаем его цветом (выбрать по вкусу). Я выбраз зеленый (#009100 ). Просто перетаскиваем цвет из палитры на рабочую зону (на выделение) не отпуская левую кнопку мыши. Теперь у нас получился зеленый прямоугольник с закругленными краями на белом фоне. Продолжаем:

Шаг 6. Продолжаем работать с активным выделением. Уменьшим его на два пикселя (2 px). Для этого нажимаем по верхнему меню «Выделение - Уменьшить» и вводим нужный параметр - это 2px. И нажимаем «ОК»

Шаг 7. Создаем новый прозрачный слой «Слой-Создать слой» (Shift+Ctrl+N)

Шаг 8. Заливаем активное выделение градиентной заливкой. Цвет переднего плана немного посветлее нашего базового цвета. У меня это получился светло зеленый с параметром #43c343. Выбираем инструмент «Градиент» с параметром «Основной в прозрачный» и применяем инструмент от верха нашего изображения к низу.

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

Шаг 9. Продолжаем работать с активным выделением. Создадим новое прямоугольное выделение в режиме вычитание

Шаг 10. Создаем новый прозрачный слой «Слой-Создать слой» (Shift+Ctrl+N)

Шаг 11. Продолжаем работать с активным выделением. Заливаем активное выделение градиентной заливкой. Цвет переднего плана-Белый. инструмент «Градиент» с параметром «Основной в прозрачный». Применяем инструмент от верха нашего выделения к низу Должно получится так, если вы все сделаете правильно:

Шаг 12. Выделение - Снять (Shift+Ctrl+A)

Шаг 13. Добавим надпись на нашу кнопку с помощью инструмента «Текст» напищем нужное нам слово. В моем случае - это «Download»

На этом урок по рисованию кнопки для сайта в гимпе закончен. Вот мой конечный резульат. Сдесь я только добавил подложку под надпись:

Следуя шагам этого урока вы научитесь создавать векторную кнопку питания в 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.

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

Уровень сложности: Средний.

Время выполнения: 1 час.

В этом уроке я научу вас рисовать кнопки для плеера. В этот раз — фиолетовые и розовые, потому что серые и черные иногда кажутся немного скучными. Кнопки рисовать нетяжело. В работе мы будем использовать такие эффекты как Внешнее Свечение и Размытие по Гауссу, а также инструменты Трансформации и Превращения.

Шаг 1

Откройте новый веб-документ. Внешний круг кнопок — полупрозрачный, поэтому фон в этот раз для нас важен. Включите инструмент Прямоугольник (M), нарисуйте фигуру 720 x 170 пикселей и залейте фиолетовым цветом. Перейдите в палитру Внешний Облик и во вспомогательном меню выберите команду Добавить Новую Заливку. Для этой новой заливки выберите темно-серый цвет (85% черного). А затем откройте меню Эффект > Имитация и примените эффект Зернистость фотопленки. Установите Непрозрачность 70% и фон готов.

Шаг 2

Включите инструмент Эллипс (L) и нарисуйте круг 83 x 83 пикселя. Залейте его линейным градиентом, а угол установите 90 градусов. Затем откройте меню Эффект > Размытие > Размытие по Гауссу и примените Радиус 1.5 пикселей. Чтобы сделать круг полупрозрачным, установите Непрозрачность 50%.

Шаг 3

Скопируйте круг, вклейте копию вперед и удалите все оформление. Скопируйте и вклейте назад новый круг (зеленый), чтобы получить еще один (красный). Прежде чем продолжить, откройте меню Редактирование > Установки > Основные и установите Перемещение курсора (Keyboard Increment) 0.5 пикселей. А теперь выделите красный круг и переместите его, дважды нажав клавишу со стрелкой вниз. Выделите оба круга и в палитре Обработка контуров нажмите кнопку Удаление из составного объекта (Subtract from shape area) > Преобразовать (Expand).

Получившуюся фигуру отодвиньте назад и залейте ее радиальным градиентом от белого к черному. Затем откройте меню Эффект > Размытие > Размытие по Гауссу и примените Радиус 1 пиксель. Установите режим наложения Осветление (черный цвет станет прозрачным) и Непрозрачность 60%.

Шаг 4

Выделив первый круг, откройте меню Объект > Контур > Создать параллельный контур, установите и примените смещение -8 пикселей, чтобы получить круг меньших размеров. Удалите все оформление и залейте его фиолетовым цветом. Откройте меню Эффект > Стилизация и примените эффект Внешнее Свечение (параметры указаны на рисунке). Вокруг второго круга появится тень.

Шаг 5

Скопируйте и вклейте вперед второй круг, цвет заливки оставьте, а эффект Внешнее свечение удалите (в палитре Внешний облик). Выделив новый круг, откройте меню Объект > Контур > Создать параллельный контур. Установите и примените смещение -7 пикселей, чтобы получить круг меньших размеров. Измените цвет заливки на фиолетовый. Выделите оба круга, созданных в этом шаге, откройте меню Объект > Переход > Параметры перехода, выберите Заданное число шагов 20. А затем снова откройте меню Объект > Переход и выберите команду Создать.

Шаг 6

Дальше откройте палитру Слои, выделите из группы Перехода фиолетовый круг меньших размеров. Скопируйте и вклейте его вперед, но вытащите из группы, потому что там он не нужен. Залейте новый круг (красный) линейным градиентом от белого к черному и установите угол 90 градусов. Режим наложения выберите Осветление (черный станет прозрачным), а Непрозрачность установите 40%.

Шаг 7

Скопируйте и вклейте вперед последний круг и сделайте голубую обводку. Затем скопируйте и вклейте вперед голубой круг, чтобы получить красный круг, и сдвиньте его, пять раз нажав клавишу со стрелкой вниз. Выделив оба круга, в палитре Обработка контуров нажмите кнопку Удаление из составного объекта (Subtract from shape area) > Преобразовать (Expand). Получившуюся фигуру залейте радиальным градиентом от черного к серому. Затем откройте меню Эффект > Размытие > Размытие по Гауссу и примените Радиус 1.7 пикселей. Режим наложения установите Умножение. И два или три раза нажмите клавишу со стрелкой вниз, чтобы немного сдвинуть фигуру.

Шаг 8

Дальше займемся значками на кнопках. Чтобы создать значок для кнопки Play, включите инструмент Многоугольник, сделайте щелчок на документе и введите значения как на рисунке, чтобы получить треугольник. Поверните его на -90 градусов, откройте меню Эффект > Стилизация > Скругленные углы и примените Радиус 5 пикселей. Чтобы создать значок для кнопки Stop, с помощью инструмента Прямоугольник (M) нарисуйте квадрат 20?20 пикселей и снова примените эффект Скругленные углы. Значок для кнопки Pause создается из двух тонких прямоугольников (4?22 пикселя). Только в этот раз, применяя эффект Скругленные углы, выберите Радиус 2 пикселя.

Затем выделите все три значка, в меню Объект выберите команду Преобразовать внешний облик и затем Разгруппировать. Измените размер значка для кнопки Play, сделайте несколько копий и в комбинации со значком для кнопки Pause создайте значки для кнопок Play Faster и Play Next (см. рисунок ниже). Когда закончите, сгруппируйте фигуры, из которых они состоят. Затем откройте меню Объект > Трансформировать > Зеркальное отражение, выберите Вертикальное и нажмите Копировать. И у вас будут готовые значки для кнопок Play Slower и Play Previous.

Шаг 9

Залейте значок для кнопки Play фиолетовым цветом. Перейдите в палитру Внешний облик и во вспомогательном меню выберите команду Добавить новую заливку. Для второй заливки выберите цвет как на рисунке, а затем откройте меню Эффект > Исказить и трансформировать > Трансформировать и в блоке Переместить установите по вертикали 1.5 пикселей. С остальными значками сделайте то же самое.

Шаг 10

Вернемся к кнопке из шага 7. Сгруппируйте все фигуры, из которых она состоит. Затем откройте меню Объект > Трансформировать > Перемещение. В поле «По горизонтали» установите 100 пикселей и нажмите Копировать. Повторите это действие пять раз (Ctrl + D). Остается только расположить значки на кнопках — и готово.

Шаг 11

Фон у розовых кнопок такой же как и у фиолетовых. Его можно просто скопировать и поменять цвет заливки (см. рисунок ниже).

Чтобы создать розовые кнопки, просто замените фиолетовые оттенки розовыми. На рисунке внизу показаны основные шаги и нужные цвета. Если цвет или градиент не указан, значит менять ничего не нужно.

Также измените цвет заливки значков (см. рисунок ниже). Повторите шаг 10 и розовые значки готовы.

Шаг 12

Если вам не нравятся женские цвета, можете создать черные кнопки. Начните с фона и измените цвет заливок…

Затем замените фиолетовые оттенки кнопок — серыми (см. рисунок ниже).

Затем измените цвет значков, расположите их на кнопках — и готово.

Это готовый рисунок. Можете создать кнопки другого цвета, если хотите. Только подбирайте цвет кнопок под цвет фона, поскольку большой круг — полупрозрачный. А если хотите изменить размер кнопок, преобразуйте сначала все эффекты.

У вас остались вопросы или есть что добавить по теме статьи?

Сегодня попробуем научиться рисовать вот такую глянцевую кнопку в Inkscape. Когда я только изучал графический редактор Inkscape – это был мой первый красивый рисунок, который я нарисовал в нем. Я выбрал зеленый цвет для кнопки, ну а вы можете выбрать тот цвет, который вам больше по душе. Ну, что ж, рисуем кнопку?

Рисуем кнопку в Inkscape

Для начала нарисуем круг, который будет основой для кнопки. Я рисую круг размерами ширины и высоты 900х900 px . Важно, чтобы круг был ровным. Заливаем его радиальным градиентом, расположив градиент как на рисунке. Центральная точка градиента будет иметь цвет 10% grey, а две боковых 70% grey.

Второй шаг, который следует сделать – продублировать (Ctrl+D ) уже готовый круг. Уменьшаем клавишей (< ) внутренний круг до значений ширины и высоты 720х720 рх и отображаем его вертикально. При необходимости, круги нужно выровнять между собой по горизонтали и вертикали.

Далее рисуем кнопку и проводим ту же операцию с дублированием круга. Дублируем внутренний круг и уменьшаем его до размеров 670х670 рх . При помощи радиального градиента, я даю ему зеленый цвет, от светлого к более темному. Центральная точка градиента цвет # aaffaa, цвет боковых точек #00aa00.

Теперь нужно придать объем кнопке. Вновь дублируем, но уже внутренний зеленый круг и придаем цвет 90% grey. К радиальному градиенту нам понадобятся опорные точки. Нажимаем «Изменить» и в окошке нажимаем один раз «Добавить опорную точку».

Каждой точке нужно придать свой цвет и прозрачность. Итак, центральная точка будет прозрачная на 100%, опорным точкам придаем цвет 40% grey и также ставим абсолютную прозрачность, а у боковых точек нет прозрачности и цвет 90% grey. Отодвигаем опорные точки, как на рисунке, просто потянув за них мышью.

В уроке «Рисуем кнопку в Inkscape» осталось только добавить блики. Для этого нужно нарисовать овал, примерно такой формы как на рисунке. У меня он размером 380х190 рх . Обязательно выровняйте его вертикально по отношению к зеленому кругу.

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

Рисуем второй блик, но чуть по-другому. Создаем овал или дублируем предыдущий, опускаем вниз, как на рисунке. У меня размер 240х90 рх . Желательно выровнять два овала (блика) между собой по вертикали.

Красим в белый цвет при помощи радиального градиента – центральная точка имеет значение прозрачности 40%, а боковые точки абсолютно прозрачны.

Все, глянцевая кнопка готова! Сейчас, рисование такой глянцевой кнопки, у меня занимает всего несколько минут, хотя раньше, на нее нужно было гораздо больше времени. Я надеюсь, что вы быстро освоите такие рисунки, и сможете экспериментировать с цветами и формами кнопок. Урок «Рисуем кнопку в Inkscape» закончен, и до встречи в уроках « » и « ».

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

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

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