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

power button wallpaper

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

рисуем кнопку power

Рисуем значок включения/выключения.

Выберем инструмент «эллиптическое выделение» и в его параметрах поставим галочки возле пунктов «рисовать из центра» и «фикс. соотн. сторон».

рисуем кнопку включения/выключеня

Нарисуем круг диаметром в 856 px.

рисуем кнопку включения/выключеня

В параметрах инструмента изменим режим на «вычесть из текущего выделения» и снова нарисуем окружность, но уже с диаметром равным 828px.

рисуем кнопку включения/выключеня

рисуем кнопку включения/выключеня

Теперь выберем прямоугольное выделение, также изменим режим на  «вычесть из текущего выделения» и нарисуем прямоугольник так, как видно на скриншоте ниже.

рисуем кнопку включения/выключеня

Увеличим получившееся выделение на 20px (выделение>увеличить), и зальем его серым цветом.

рисуем кнопку включения/выключеня

рисуем кнопку включения/выключеня

Изменим режим прямоугольного выделение на «Заменить», поставим галочку возле пункта «закругленные углы» и изменим радиус скругления на 20px.

рисуем кнопку включения/выключеня

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

рисуем кнопку включения/выключеня

Таким образом мы получили значок включения и выключения.

Рисуем кнопку Power

Следующим этапом будет непосредственно сама кнопка.
Пока скроем значок включения/выключения и добавим новый прозрачный слой.
С помощью эллиптического выделения нарисуем окружность диаметром в 8560px и зальем ее серым цветом.

рисуем кнопку power

Уменьшим выделенную область на 80px (выделение>уменьшить) и нажмем «Del» на клавиатуре.

рисуем кнопку power

рисуем кнопку power

Уменьшим выделение еще на 20px и зальем его серым цветом. Если все сделано правильно, то результат будет таков:

рисуем кнопку power

Теперь нужно выделить весь слой с кнопкой (ПКМ по слою>альфа-канал в выделение) и залить его из центра градиентом с параметрами, как на скриншоте:

рисуем кнопку power

Обратите внимание на то, что выбран градиент «Rounded Edge»

рисуем кнопку power

Воспользуемся инструментом «тон/насыщенность» (цвет>тон/насыщенность) с параметрами, как на изображении ниже:

рисуем кнопку power

рисуем кнопку power

Также подкорректируем контрастность при помощи кривых (цвет>кривые):

рисуем кнопку power

рисуем кнопку power

Добавим новый слой белого цвета и применим к нему фильтр «шум HSV» (фильтры>шум HSV) с параметрами, как на картинке ниже:

рисуем кнопку power

Воспользуемся фильтром «радиальное размывание движением» со значением угла «10» (фильтры>размывание>размывание движением).

рисуем кнопку power

Изменим непрозрачность слоя до 50, а в качестве режима наложения выставим «перекрытие». Объединим слой с предыдущим.

рисуем кнопку power

Снова вернемся к нашему значку и используя инструменты «масштаб» и «перемещение» разместим его в центре будущей кнопки Power.

рисуем кнопку power

Мне показалось, что значок выглядит слишком тонким, поэтому я решил сделать линии немного толще. Для этого выделим слой со значком (ПКМ по слою>альфа-канал в выделение) и увеличим выделение на 10px (выделение>увеличить).

рисуем кнопку power

Не снимая выделение перейдем к слою с кнопкой и нажмем клавишу «Del» на клавиатуре. Слой со значком можно теперь удалить или скрыть.

рисуем кнопку power

Белый фон для наглядности

К слою с кнопкой применим фильтр «добавить фаску» (фильтры>декорация>добавить фаску) со значением «3». Галочку возле пункта «работать с копией» нужно убрать.

рисуем кнопку power

рисуем кнопку power

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

рисуем кнопку power

Вернемся к слою с кнопкой и выделим его (альфа-канал в выделение). Применим к слою фильтр «отбрасываемая тень» (фильтры>свет и тень>отбрасываемая тень) с следующими параметрами:

рисуем кнопку power

В результате мы получили неактивную кнопку Power.

рисуем кнопку power

Рисование кнопки с подсветкой

Удалим слой с тенью, а слой с фоном перекрасим в необходимый цвет, например в оранжевый.

рисуем кнопку power

рисуем кнопку с подсветкой

При помощи кисти с мягкими краями добавим несколько светлых пятен.

рисуем кнопку с подсветкой

Далее снова выделим слой с кнопкой (альфа-канал в выделение) и инвертируем (выделение>инвертировать). И добавим свечения при помощи фильтра «отбрасываемая тень» с такими настройками:

рисуем кнопку с подсветкой

По краям кнопки также появилось свечение — убрать его можно при помощи ластика. Результат должен быть таким:

рисуем кнопку с подсветкой

Скопируем слой со свечением и применим к нему «гауссово размывание» (фильтры>размывание>гауссово размывание) со значением «85». Объединим слои.

рисуем кнопку с подсветкой

Почти готово, осталось провести небольшую цветокоррекцию.
Скопируем полученный слой и обесцветим его (цвет>обесцвечивание).

рисуем кнопку с подсветкой

Режим наложения скопированного слоя изменим на «перекрытие» и откорректируем контрастность при помощи кривых так, как показано на скриншоте:

рисуем кнопку с подсветкой

Если все сделано верно, то на выходе получим вот такую вот кнопку power с подсветкой:

power button