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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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