{"@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-glossy-orb-icon/#webpage","url":"https://openarts.ru/gimp-glossy-orb-icon/","inLanguage":"ru-RU","name":"\u0428\u0430\u0440\u043e\u0432\u0438\u0434\u043d\u0430\u044f \u0438\u043a\u043e\u043d\u043a\u0430 \u0432 Gimp","isPartOf":{"@id":"https://openarts.ru/#website"},"image":{"@type":"ImageObject","@id":"https://openarts.ru/gimp-glossy-orb-icon/#primaryimage","url":"https://openarts.ru/media/gimp-glossy-orb-icon-00.png","caption":""},"primaryImageOfPage":{"@id":"https://openarts.ru/gimp-glossy-orb-icon/#primaryimage"},"datePublished":"2009-08-04T13:27:02+00:00","dateModified":"2018-05-23T07:22:26+00:00","description":"\u0428\u0430\u0440\u043e\u0432\u0438\u0434\u043d\u0430\u044f \u0438\u043a\u043e\u043d\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430\u0445, \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432 Gimp. \u0422\u0430\u043a\u0438\u0435 \u043c\u0435\u043b\u043e\u0447\u0438 \u043f\u043e\u0432\u044b\u0448\u0430\u044e\u0442 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0430\u0439\u0442\u0430.","breadcrumb":{"@id":"https://openarts.ru/gimp-glossy-orb-icon/#breadcrumb"}},{"@type":"BreadcrumbList","@id":"https://openarts.ru/gimp-glossy-orb-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-glossy-orb-icon/","url":"https://openarts.ru/gimp-glossy-orb-icon/","name":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0448\u0430\u0440\u043e\u0432\u0438\u0434\u043d\u043e\u0439 \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 Gimp"}}]},{"@type":"Article","@id":"https://openarts.ru/gimp-glossy-orb-icon/#article","isPartOf":{"@id":"https://openarts.ru/gimp-glossy-orb-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 \u0448\u0430\u0440\u043e\u0432\u0438\u0434\u043d\u043e\u0439 \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 Gimp","datePublished":"2009-08-04T13:27:02+00:00","dateModified":"2018-05-23T07:22:26+00:00","commentCount":"5","mainEntityOfPage":"https://openarts.ru/gimp-glossy-orb-icon/#webpage","image":{"@id":"https://openarts.ru/gimp-glossy-orb-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":[]}]}

Создание шаровидной иконки в Gimp

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

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

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

Откройте Gimp и создайте новый файл размером 250х250 пикселей. Закрасьте фон серым цветом #828282.

Создаем новый файл в Gimp
2

Выберите инструмент Эллиптическое выделение (E, Elliptical Selection-Tool) и создайте правильную окружность. После этого создайте новый пустой слой, выберите инструмент Градиент (L, Gradient-Tool). В качестве цвета переднего плана на панели инструментов Gimp выберите черный цвет, в качестве цвета фона – красный.

Теперь тащите градиент сверху до низу этого слоя.

Тащим градиент от верха до низа слоя
3

Выделение все еще должно быть активным.

Снова создайте новый слой. Расположите его сзади предыдущего и создайте еще одну окружность. Чтобы сделать это быстро, нажмите D, затем нажмите Ctrl+,

Теперь выполните следующие шаги:

1. Выделение / Уменьшить: 1px (Select / Shrink: 1px)
2. Выделение / Растушевать: 100px (Select / Feather: 100px)

После этого нажмите Del два раза, чтобы удалить выделенную часть.

Выделяем и растушевываем выделение в Gimp
4

Активируйте слой, содержащий градиент.

Выберите в меню Gimp:
Фильтр / Свет и тень: Отбрасываемая тень) X/Y: 0/0, Непрозрачность: 60%
(Filter / Licht and Shadow: Drop Shadow. X/Y: 0/0, Tranparency: 60%).

Создаем тень от шара
5

Активируйте слой, содержащий градиент. Из контекстного меню диалога слоев Gimp выберите Альфа-канал в выделение (Alpha to selection).

Создайте новый слой. Выберите цветом переднего плана белый (на панели инструментов Gimp). Выберите инструмент Градиент (Gradient-Tool). В свойствах инструмента в выпадающем списке выберите Основной в прозрачный (FG to Trasparent). Примените этот градиент от верха до низа.

Создаем градиент из белого в прозрачный
6

Выберите в меню Gimp Выделение / Снять (Select / None)
Активируйте инструмент Масштаб (Scale-Tool) (Shift+T или соответствующая кнопка на панели инструментов Gimp).
Кликните по слою, появляется диалоговое окно. Задайте новые размеры – ширина 175 и высота 150 пикселей. Нажмите Изменить (OK).

Изменяем размеры градиента
7

Выберите инструмент перемещения (клавиша M) и переместите полученное белое свечение (градиент) в центр верхней части сферы.

Перемещаем градиент в центр верхней части сферы
8

Выберите в меню Gimp:
Фильтры / Размывание / Гауссово размывание: Значение: 5
(Filter / Blur / Gaussian Blur: Value: 5).

Размываем полученный градиент
9

Мы почти закончили. Теперь Вы можете добавить для примера любой символ, который Вы пожелаете. Выберите инструмент создания текста (клавиша T или соответствующая кнопка на панели инструментов Gimp) и напишите, к примеру, знак вопроса ? белого цвета по центру шара. Теперь можно выбрать в свойствах слоя режим Объединение зерна, это придаст изображению более интересный вид.

Добавляем символ для примера

Это все, урок окончен! У нас получился замечательный шарик 😉

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

Наш шар готов, урок закончен!

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

5 комментариев на «“Создание шаровидной иконки в Gimp”»

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

    • Так я и не спорю, конечно получается 😉
      Тем более, что Inkscape — это векторный редактор, а векторный редактор подходит для подобных целей гораздо лучше. Плюс полученное изображение можно масштабировать как угодно. Но ничего плохого в умении делать что-то подобное в растровом редакторе я все равно не вижу 🙂

  2. п.3 вообще не понятно.
    Снова создайте новый слой. Расположите его сзади предыдущего и создайте еще одну окружность. Чтобы сделать это быстро, нажмите D, затем нажмите Ctrl+,
    – Расположить сзади? А на последнем скрине он спереди. Непонятно.
    – Создайте еще одну окружность? Что имеется ввиду? У меня активное выделение. Нужно заливку по нему сделать или что?
    – Сочетания клавиш вообще не работают.

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

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