{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://openarts.ru/#website","url":"https://openarts.ru/","name":"OpenArts","publisher":{"@id":"https://openarts.ru/#person"},"potentialAction":{"@type":"SearchAction","target":"https://openarts.ru/?s={search_term_string}","query-input":"required name=search_term_string"}},{"@type":"WebPage","@id":"https://openarts.ru/gimp-3d-arrow-icon/#webpage","url":"https://openarts.ru/gimp-3d-arrow-icon/","inLanguage":"ru-RU","name":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c 3D \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u0432 Gimp | OpenArts","isPartOf":{"@id":"https://openarts.ru/#website"},"image":{"@type":"ImageObject","@id":"https://openarts.ru/gimp-3d-arrow-icon/#primaryimage","url":"https://openarts.ru/media/gimp-3d-arrow-icon-00.png","caption":""},"primaryImageOfPage":{"@id":"https://openarts.ru/gimp-3d-arrow-icon/#primaryimage"},"datePublished":"2009-08-05T10:55:07+00:00","dateModified":"2018-05-23T07:24:14+00:00","description":"\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u043f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441 3D-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0435\u043b\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0447\u0435\u0433\u043e-\u043b\u0438\u0431\u043e.","breadcrumb":{"@id":"https://openarts.ru/gimp-3d-arrow-icon/#breadcrumb"}},{"@type":"BreadcrumbList","@id":"https://openarts.ru/gimp-3d-arrow-icon/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"WebPage","@id":"https://openarts.ru/","url":"https://openarts.ru/","name":""}},{"@type":"ListItem","position":2,"item":{"@type":"WebPage","@id":"https://openarts.ru/tutorials/","url":"https://openarts.ru/tutorials/","name":"\u0423\u0440\u043e\u043a\u0438"}},{"@type":"ListItem","position":3,"item":{"@type":"WebPage","@id":"https://openarts.ru/tutorials/gimp/","url":"https://openarts.ru/tutorials/gimp/","name":"\u0423\u0440\u043e\u043a\u0438 Gimp"}},{"@type":"ListItem","position":4,"item":{"@type":"WebPage","@id":"https://openarts.ru/gimp-3d-arrow-icon/","url":"https://openarts.ru/gimp-3d-arrow-icon/","name":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c 3D \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u0432 Gimp"}}]},{"@type":"Article","@id":"https://openarts.ru/gimp-3d-arrow-icon/#article","isPartOf":{"@id":"https://openarts.ru/gimp-3d-arrow-icon/#webpage"},"author":{"@id":"https://openarts.ru/author/zhart/#author","name":"zhart"},"publisher":{"@id":"https://openarts.ru/#person"},"headline":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c 3D \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u0432 Gimp","datePublished":"2009-08-05T10:55:07+00:00","dateModified":"2018-05-23T07:24:14+00:00","commentCount":"2","mainEntityOfPage":"https://openarts.ru/gimp-3d-arrow-icon/#webpage","image":{"@id":"https://openarts.ru/gimp-3d-arrow-icon/#primaryimage"},"keywords":"gimp,\u0438\u043a\u043e\u043d\u043a\u0438,\u043f\u0441\u0435\u0432\u0434\u043e-3d","articleSection":"\u0423\u0440\u043e\u043a\u0438 Gimp"},{"@type":"Person","@id":"https://openarts.ru/author/zhart/#author","name":"zhart","image":{"@type":"ImageObject","@id":"https://openarts.ru/#personlogo","url":"https://secure.gravatar.com/avatar/48486e993558dbe6edce1f9dd6d1687e?s=96&d=wavatar&r=g","caption":"zhart"},"sameAs":[]}]}

Создание иконки с изображением 3D стрелки в Gimp

Есть необходимость в красивой 3D иконке? Тогда Вы на правильном пути 🙂 В этом уроке мы покажем, как создать 3D-иконку при помощи Gimp. Мы продемонстрируем 3D-эффект на примере изображения стрелки, которое может быть использовано для кнопки загрузки чего-либо.

Этот урок включает в себя 22 шага и потребует на выполнение около 35 минут для пользователя среднего уровня.

Урок по рисованию в Gimp 3D иконки
1

Откройте Gimp и создайте новый файл 300х300 пикселей. Назначьте фоновым цветом любой на Ваш выбор. В нашем примере это цвет #bbbbbb.

Создаем новый файл в Gimp и назначаем ему фоновый цвет
2

Следующий шаг нашего урока — это создание базовой формы стрелки.

Добавьте новый пустой слой.
При помощи инструмента прямоугольного выделения (клавиша R или соответствуюищий значок на панели инструментов Gimp) создайте выделение примерно такого же размера, как на рисунке. Чтобы сделать закругленные углы, выберите в меню Gimp:
Выделение / Закруглить прямоугольник: 35%
(Selection / Rounded Rectangle: 35%)

Создаем в Gimp выделение с закругленными углами
3

Залейте выделение цветом #929292. Снимите выделение (Ctrl+Shift+A или пункт меню Gimp Выделение / Снять).

Заливаем выделение цветом
4

Сделайте этот слой невидимым (кликните по значку с изображением глаза в диалоге слоев Gimp). После этого создайте новый слой.

Нарисуйте квадрат при помощи инструмента выделения. Залейте выделение тем же цветом, что в прошлый раз — #929292. Снимите выделение (Ctrl+Shift+A или пункт меню Gimp Выделение / Снять).

При помощи инструмента вращения (комбинация Shift+R или соответствуюищий значок на панели инструментов Gimp) поверните полученный квадрат на 45 градусов.

Делаем слой невидимым, создаем новый слой, в котором создаем квадрат и заливаем его цветом
5

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

После этого выберите в меню Gimp Выделение / Снять (Selection / None ), чтобы убрать выделение.

Создаем прямоугольное выделение и удаляем выделенную область
6

Сделайте видимым слой, который до этого мы делали невидимым (кликните на иконку с изображением глаза в диалоге слоев).

Делаем скрытый слой видимым
7

Расположите оба слоя так, чтобы стрелка-указатель (треугольник) располагалась ниже. Если прямоугольник со скругленными краями слишком большой — обрежьте нижнюю часть или поднимите его немного вверх.

Подгоняем слои друг под друга
8

Теперь объедините оба слоя. Чтобы сделать это, кликните правой кнопкой мыши по верхнему слою в диалоге слоев Gimp и выберите Объединить с предыдущим (Merge down). Теперь мы имеем цельную стрелку в одном слое. Теперь выберите в меню Gimp Фильтры / Карта / Рельеф (Filter / Map / Bumpmap). Выставьте опции как на изображении (оно кликабельно).

Объединяем слои в диалоге слоев Gimp и создаем рельеф
9

Кликните по слою правой кнопкой мыши (в диалоге слоев) и выберите пункт Альфа-канал — Выделение (Selection from Alpha).

Создайте новый слой.
Выделение / Уменьшить: 15px (Select / Shrink: 15px).
Выберите #b1d631 цветом переднего плана и #55a32a цветом заднего плана.
Залейте слой и выберите инструмент Градиент (Gradient). Создайте градиент начиная с левой нижней части и заканчивая в правой верхней.
Снимите выделение.

У Вас должно получиться что-то типа того, что изображено на картинке.

Создаем новый слой и градиент в нем
10

Используйте фильтр Рельеф (Bumpmap) еще раз и примените те же его значения что и раньше для этого слоя.

Теперь объедините эти два слоя тем же способом, что использовали раньше.

Используем фильтр для создания рельефа
11

Сделайте дубликат полученного слоя.

Теперь мы перевернем полученный слой:

Слой / Преобразования / Отразить по вертикали
(Layer / Transform / Flip vertically).

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

Делаем дубликат слоя и отражаем его по вертикали, после чего передвигаем вниз
12

Теперь используйте инструмент Перспектива (Perspective-Tool). Используйте уменьшение масштаба для того, чтобы видеть все изображение.

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

Создаем эффект объема при помощи инструмента Перспектива
13

Двигайте изображение ближе к середине. Вы получите что-то вроде того, что на картинке.

Двигаем изображение по холсту
14

Сделать 3D эффект в Gimp очень просто. Продублируйте этот слой, активируйте дубликат в диалоге слоев, кликнув по нему. Этот слой должен находиться ниже оригинального слоя. Кликните по изображению, чтобы сделать активным его. Нажмите на клавишу на клавиатуре, чтобы передвинуть слой ровно на 1 пиксель вправо.

Продублируйте дубликат еще раз, активируйте его и опять передвиньте его при помощи клавиши на 1 пиксель.

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

Делаем 3D эффект
15

Чтобы ускорить процесс, скройте фоновый слой в диалоге слоев Gimp (нажав на изображение глаза рядом с названием слоя). Нажмите Ctrl+M или выберите в меню Изображение / Объединить видимые слои (Image / Merge visible layers).

Ускоряем процесс создания 3D эффекта в Gimp
16

Теперь повторите шаг 14 урока, но уже с полученным слоем. Только на этот раз двигать изображение нужно на 4 пикселя вправо. После этого снова объедините видимые слои.

Повторяем предыдущие шаги с полученным слоем
17

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

Обрезаем острия стрелок для придания им более красивого вида
18

Выберите в меню Gimp Цвет / Яркость-Контраст (Colors / Brightness and Contrast) и снизьте яркость до -25, а контрастность установите в значение +25.

Снижаем яркость и увеличиваем контрастность при помощи соответствующей опции в Gimp
19

Теперь снова сделайте фон видимым и залейте его белым цветом. Создайте прямоугольное выделение вокруг нижней (перевернутой) стрелки.

Делаем фон видимым и заливаем его белым цветом, после чего обводим выделением нижнюю стрелку
20

Вырежьте выделенную часть при помощи комбинации Ctrl+X и вставьте ее при помощи комбинации Ctrl+V. Кликните на кнопку создания нового слоя (или нажмите комбинацию Ctrl+Shift+N), чтобы сделать полученное плавающее выделение отдельным слоем.

Вырезаем выделенную область и вставляем ее, затем делаем ее отдельным слоем
21

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

Создаем маску слоя в Gimp
22

Нажмите клавишу D, чтобы сбросить цветовые значения переднего плана и фона на дефолтные. Выберите инструмент Градиент (Gradient-Tool). Создайте градиент как показано на рисунке — от точки 1 до точки 2.

Создаем градиент при помощи соответствующего инструмента Gimp

Урок окончен 😉

Наша картинка готова

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

2 комментария на «“Создание иконки с изображением 3D стрелки в Gimp”»

  1. Блин, всё получается, кроме как заливание цветом и назначение фонового цвета. Скажите, в какой вкладке выбирать цвет для заливки? Или заливает цветом фона, или цветом переднего плана, или текстурой. Другого не дано…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *