Gimp. Делаем кнопки в стиле Web 2.0

Наверное, каждый пользователь Internet слышал о Web 2.0. Это слово все чаще показывается на страницах Интернет-изданий. Я здесь не буду объяснять что это такое. Если вам интерсно, то этот термин был придуман в 2004 году в O'Reilly Media. После этого об этой технологии заговорили.

Если вы заходили на известные Web 2.0 сайты, то должны были заметить некоторые визуальные эффекты, отличающие их от обычных сайтов. Например, зеркальное отражение логотипа, специальные кнопки и т.п.

Сегодня я опишу способ создания кнопок в стиле Web 2.0 с помощью Gimp. Обычно все описывают создание таких кнопок в Photoshop, но в Gimp - никто.

Лишь в одной статье я это нашел. Поэтому, с разрешения владельца статьи, я хочу повторить и описать весь процесс здесь. Все, что здесь описано, я проверил сам, используя эту замечательную статью Using Gimp to make Web 2.0 Buttons and Graphics.
Я использовал Gimp 2.2.11 . Описанные приемы работают и в более старых версиях. Если у вас очень старая версия, советую обновить.

Создание изображения:

Итак. Открываем Gimp и создаем новую картинку (File -> New), со следующими параметрами:

Ширина - 200px
Высота - 100px
Фон - прозрачный





















Кнопка:

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

,выделяем область будущей кнопки:








В этом окне заходим в 'Select->Rounded Rectangle'. Если у вас нет такого пункта, попробуйте 'Script-Fu->Selection->Round'. Если и этого нет, тогда у вас действительно очень старая версия Gimp. Смотрим как сделать это в старых версиях how to make a rounded selection in the old way.
В появившемся диалоге надо только нажать Ok.

Вы увидите, что-то наподобие следующего:










Теперь заполним созданную кнопку Web 2.0 цветом. Для этого сойдет все яркое и ослепляющее. Для примера выбираем цвет #f48f35. Этот цвет часто используют для RSS иконок. Но можете выбрать и что-нибудь другое. Теперь кнопка будет выглядеть так:










Освещение (Блик):

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









Создаем новый слой и с помощью Gradient Tool делаем градиент, наподобие приведенного ниже рисунка (я выбрал стандартный градиент - Linear (FG to BG)).










Текст:

Выбираем T в меню Gimp, и пишем нужный нам текст. Можно добавить некоторые эффекты. Например, использовать тень. Для этого выбираем первый слой, идем - 'Scrit-Fu->Shadow->Drop Shadow' и устанавливаем текст тени, и ее протяженность:





















Все. Для пущей наглядности, создаем новый слой с белым фоном и двигаем его в самое начало (перед самым первым слоем). Получаем следующее:









Тренируйтесь. Усовершенствуйте.