Skip to content
Increase font size Decrease font size Default font size default color orange color green color
Путь: Главная Уроки по Gimp Иконки и кнопки Шаровидная иконка для вебсайтов

Иконки и кнопки

Шаровидная иконка для вебсайтов

04.08.2009 19:27
Содержание статьи
Шаровидная иконка для вебсайтов
Страница 2
Все страницы

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

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

1

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

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

2

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

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

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

3

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

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

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

- Выделение / Уменьшить: 1px (Select / Shrink: 1px)
- Выделение / Растушевать: 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). Примените этот градиент от верха до низа.

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



 
Комментарии 
 
0 # stablucker 23.07.2010 19:45
Зря сглажен БЛИК и непрозрачность его должна быть ниже.
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Дима 26.08.2010 20:41
Странно, что-то у меня на этом пункте закавыка вышла:


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

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

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

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


Вопрос есть. Можно ли заказать урок. Ну хотя бы чтоб понять что делать. А то есть картинка с чёрным фоном который нужно убрать...
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Upet 27.10.2010 11:38
Можно ещё подсветку сделать по низу
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # ДобК 28.03.2011 19:48
У меня на этот шарик ушло очень много времени из-за того,что урок написан очень скомканно, в один шаг совмещены действия, которые нужно объяснять как отдельные шаги.
К тому же создание всех слоев сразу резко повысило шансы в них потом запутаться.
з.ы. Судя по скриншотам, данные уроки переведены с немецкого языка, при том не очень качественно.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Добби 19.11.2011 12:35
В Inkscape тот же результат получается за 3-4 шага без этих танцев с бубном
Ответить | Ответить с цитатой | Цитировать
 
 
0 # zhart 19.11.2011 14:22
Так я и не спорю, конечно получается. Тем более, что Inkscape — это векторный редактор, а векторный редактор подходит для подобных целей гораздо лучше. Плюс полученное изображение можно масштабировать как угодно. Но ничего плохого в умении делать что-то подобное в растровом редакторе я все равно не вижу :)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Serg 18.01.2012 11:54
п.3 вообще не понятно.
"Снова создайте новый слой. Расположите его сзади предыдущего и создайте еще одну окружность. Чтобы сделать это быстро, нажмите D, затем нажмите Ctrl+,"
- расположить сзади (а на последнем скрине он спереди), непонятно;
- создайте еще одну окружность? что имеется ввиду? У меня активное выделение. Нужно заливку по нему сделать или что?
- сочетания клавиш вообще не работают.
Ответить | Ответить с цитатой | Цитировать
 
Добавить комментарий


Защитный код
Обновить