Бесплатный
графический редактор


Случайный урок:

Девушка из золота

Сайт Родителям о детях








Система Orphus



Рисуем кнопку для веб-страницы

Автор: Андрей Пожарко

Добавлено: 2008-12-20


Урок написан для GIMP версии 2.6.3. В других версиях названия инструментов могут несколько отличаться.

Откройте новый документ размером 100х100 пикселей с белым фоном. Чтобы было удобнее работать можно установить масштаб изображения 400%.

Подготовим направляющие, для этого выберите в меню Изображение - Направляющие - Новая направляющая. Создадим две горизонтальные и две вертикальные направляющие со значениями 13 и 88 пикселей.

Создадим новый слой с прозрачным фоном клавишами Shift+Ctrl+N или через меню Слой - Новый слой и назовем его Основа. Чтобы переименовать слой достаточно дважды щелкнуть мышкой на имени слоя, также можно это сделать через контекстное меню Правка атрибутов слоя.

Внутри наших направляющих нарисуем круг с помощью Эллиптического выделения  (E).

Далее выберем основной цвет #66ad11 и фоновый #036611 , а затем выбираем инструмент Градиент  (L).

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

Теперь нам нужно залить этим градиентом нашу кнопку. Для этого нужно ткнуть и протащить мышкой от верхнего левого в нижний правый угол. Чтобы двигаться под углом ровно 45 градусов, нужно удерживать клавишу Ctrl.

 

Уже на что-то стало похоже, но нужно добавить рамку по контуру. Дублируем слой Основа клавишами Ctrl+Shift+D, через меню Слой - Продублировать слой или просто нажав соответствующую кнопочку  под списком слоев. Назовем дубликат Рамка, и поместим его между слоями Основа и Фон. Это можно сделать либо перетащив мышкой слой в списке слоев на нужно место либо выделив его и нажав внизу списка слоев стрелки вверх или вниз.

Наша выделенная область все еще должна быть активной. Теперь на этом слое Рамка расширим выделение на 2 пикселя. Это будет означать, что наша рамка вокруг кнопки будет иметь такую толщину. Если вы хотите сделать рамку толще или тоньше - выберите другое значение. Чтобы расширить выделение нужно в меню Выделение выбрать пункт Увеличить и задать соответствующее значение.

 

Далее чтобы слой Фон нам не мешал видеть рамку кнопки, которая у нас тоже белого цвета, его можно временно отключить нажав на изображение выпученного глаза рядом со слоем.Теперь будем создавать саму рамку. Это мы сделаем очень просто выбрав наш дубликат главного слоя под названием Рамка и нажав на клавиатуре клавишу Delete или через меню Правка - Очистить. В результате выделенная область очистится и мы получили "дырку" размером чуть больше нашей кнопки. Заливаем ее белым цветом с помощью инструмента Плоская Заливка  (Shift+B). Получим такую картину:

 

Теперь будем делать тень под кнопкой. Это можно сделать разными способами. Мы выберем такой. Дублируем слой Рамка и назовем дубликат как Тень. Переместим его под слой Рамка. При этом выделение все еще должно оставаться активным, оно нам еще нужно. Переходим на слой Тень и очищаем выделение от белого цвета клавишей Delete. Вместо белого зальем его черным цветом инструментом Плоская заливка (Shift+B). На изображении ничего не изменилось, так как слой Тень пока перекрывается слоем Рамка. Но вид списка слоев должен измениться.

 

И только теперь выделение можно снять через меню Выделение - Снять или клавишами Shift+Ctrl+A. Вместо этого выделим слой Тень полностью через меню Выделение - Все или клавишами Ctrl+A. Теперь нужно размыть слой тень. Для этого применим фильтр Гауссово размывание, который находится в меню Фильтры - Размывание. Это фильтр не изобилует настройками и основной параметр для него - это величина размывания. Зададим ей значения около 5 пикселей.

И вот что получилось после применения размывания:

Теперь займемся внутренней частью кнопки и нарисуем отблеск на кнопке для большей реалистичности. Для этого создадим еще один слой (Shift+Ctrl+N) с прозрачным фоном и назовем его Отблеск. Переместим его на самый верх в списке слоев. Снова сделаем Эллиптическое выделение (E) внутри направляющих, но на этот раз уменьшим его на 2 пикселя в меню Выделение - Уменьшить.

Теперь нам нужно из существующего выделения отнять часть и для этого тем же Эллиптическим выделением создадим еще один эллипс при этом удерживая нажатой клавишу Ctrl.

Выберем цвет для отблеска например #a5d777. Выбираем инструмент Градиент  (L). В параметрах зададим его тип - От основного к прозрачному и форму - Радиальная. Протянем мышкой сверху вниз как показано тут:

Получим вот-такой результат:

Если хотите, чтобы отблеск был более заметен, можно либо выбрать более светлый оттенок для отблеска, либо еще проще - дублировать слой Отблеск. Но мы решили не переусердствовать. Кстати, если отблеск получился наоборот слишком яркий, можно уменьшить Непрозрачность для слоя с отблеском со 100% скажем до 60% или как вам больше нравится.

Далее будем создавать стрелку на кнопке. Для этого создадим еще один слой Кнопка и снова поставим его самым верхним. Нарисовать стрелку можно разными способами, возможно у вас есть своя методика, а я же решил упростить вам задачу и подготовил кисть с изображением стрелки. Ее нужно разархивировать в папку с кистями либо в свою собственную, либо в папку по умолчанию, которая в Windows например находится обычно в C:\Program Files\GIMP-2.0\share\gimp\2.0\brushes\ . Посмотреть папки с кистями и добавить свои папки можно в меню Правка - Параметры - Каталоги - Кисти. После этого на панели Кисти, которая вызывается клавишами Shift+Ctrl+B, нужно нажать кнопочку Обновить кисти. после чего скопированная кисть появится на панели.

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

 

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

Просмотров: 37080




 

 

Ваши комментарии     



ingvar       16.02.2009 - 22:00       Ссылка      

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


ingvar       16.02.2009 - 22:02       Ссылка      

извините, не прикрепилось


Андрей Пожарко       16.02.2009 - 22:02       Ссылка      

Ну а где же сама картинка?


Андрей Пожарко       16.02.2009 - 22:03       Ссылка      

А почему не прикрепилось? Выдало какую-то ошибку?


ingvar       16.02.2009 - 22:09       Ссылка      

не берет фоты с расширением гимпа по умолчанию, сейчас попробую пересохранить


ingvar       16.02.2009 - 22:12       Ссылка      

вот, пробую


Андрей Пожарко       16.02.2009 - 22:14       Ссылка      

Ну да, не берет, их просто браузер не покажет.


Андрей Пожарко       16.02.2009 - 22:16       Ссылка      

О! Здорово как получилось!


ingvar       16.02.2009 - 22:19       Ссылка      

Спасибо. А Вы будете что-то типа форума организовывать. Ведь в гимпе, мне кажется, возможностей больше, чем у фотошопа. Вы бы выкладывали уроки, давали советы, отвечали на вопросы и так далее smile


Андрей Пожарко       16.02.2009 - 22:26       Ссылка      

Обязательно будет форум, но чуть позже. Дело в том, что форумом тоже нужно заниматься кому-то (модерировать), а это еще больше времени отнимет, так как пока я один и за программиста и за автора и т.д. Как только появится возможность будет добавлен форум, раздел со статьями, гостевая книга.


Тарас       12.03.2009 - 13:43       Ссылка      

Вот такая иконка получилась...


Андрей Пожарко       12.03.2009 - 15:06       Ссылка      

Красиво. Правда с описанной методикой нет почти ничего общего, но зато я рад, что помог развить творческий подход к задаче smile


BULcH       04.05.2009 - 22:34       Ссылка      

Мдя ! Урок конечно норм ! Но на мой взгляд в фотошопе это было бы сделать гараздо проще ! Хотя возможно и не так это я в ГИМПе только учусь работать в то время как фотошоп уже немного освоил! По методам управляемости фотошоп мне кажется лучше !


Андрей Пожарко       04.05.2009 - 23:11       Ссылка      

Ну, Photoshop - программа тоже хорошая, но стоит очень дорого. Золотыми выйдут кнопочки, если для их рисования выложить за этот PhotoShop больше, чем ваш компьютер с потрохами стоит wink


Lusha       06.07.2009 - 07:56       Ссылка      

А что делать, если хочешь картинку вставить? Я как вставляю, так контур пропадает...


Андрей Пожарко       06.07.2009 - 08:53       Ссылка      

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


Lusha       06.07.2009 - 10:20       Ссылка      

Сейчас кину картинку... Вот! Дальше я ничего не понимаю... Люди, не могли бы вы создать урок по созданию кнопки с картинкой внутри. Плииииииз???


Андрей Пожарко       06.07.2009 - 11:38       Ссылка      

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


Lusha       08.07.2009 - 19:44       Ссылка      

а как вставить получившиеся кнопки на форум?


Андрей Пожарко       08.07.2009 - 19:57       Ссылка      

Уточните, что вы имеете в виду. Вставить в сообщение на форум или встроить в дизайн страницы форума?


Lusha       08.07.2009 - 20:03       Ссылка      

Встроить в дизайн ролевой игры=)) Я в этих терминах не специалист=))


Андрей Пожарко       08.07.2009 - 20:19       Ссылка      

Тут сложно что-то посоветовать не видя объекта обсуждения. В общем случае кнопка делается с прозрачным фоном и сохраняется в формате GIF. Чтобы вставить ее на странице вам нужно владеть хоть какими-то познаниями в области HTML. В упрощенном варианте в нужном месте кода вставляете <a href="обработчик"> <img src="knopka.gif"> </a>. Понятное дело, что пути нужно заменить на правильные. В более сложном варианте еще рисуется кнопка в нажатом состоянии, тогда код будет выглядеть чуть по-другому. Если покажете что и куда вставлять, сможем дать более точный ответ.


Lusha       08.07.2009 - 21:03       Ссылка      

http://sexuality.forum24.ru/ вот сюда


Андрей Пожарко       08.07.2009 - 21:21       Ссылка      

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

Например  <area alt="Регистрация" coords="36,61,182,77" href="Ваша ссылка на тему с анкетами">.

Значит прямоугольник с координатами 36,61,182,77 у вас соответствует кнопке "Регистрация". Вам нужно будет дописать еще несколько таких же строчек, только с координатами уже ваших свеженарисованных кнопок.


Neosferaty       23.07.2009 - 06:37       Ссылка      

Круто! Сейчас набиваю руки под этот метод smile Автору спасибо!


Amanus       02.09.2009 - 14:22       Ссылка      

 Спасибо)


Alex       05.10.2009 - 09:12       Ссылка      

Спасибо за науку, получилось с первого раза!


Alex       05.10.2009 - 09:16       Ссылка      

Подскажите, как сделать кнопку активной (с анимацией)? Чтоб как настоящая кнопка была! Заранее спасибо!


Андрей Пожарко       05.10.2009 - 23:52       Ссылка      

Alex, чтобы сделать такую кнопку,

Добро пожаловать

нужно подготовить несколько изображений этой кнопки в разных состояниях -


1)не активная


2)активная


3)нажатая

Затем в HTML-коде нужно написать приблизительно так:
<a style='border:0' href="/forum/"
onmouseover="document.it1.src='/image/20081222/knopka/b-over.jpg'"
onmouseout="document.it1.src='/image/20081222/knopka/b-out.jpg'"
onMouseDown="document.it1.src='/image/20081222/knopka/b-down.jpg'">
<img src="/image/20081222/knopka/b-out.jpg" name="it1" alt="Добро пожаловать" border="0"
width="325" height="33"></a>
Я эту кнопку конечно же не рисовал, а состряпал в Файл-Создать-Кнопки-Круглая кнопка (в старых версиях GIMP это меню находится в другом месте). А вам нужно проделать приблизительно то же руками.


Alex       06.10.2009 - 07:34       Ссылка      

благодарю!


Sahiyuka       07.11.2009 - 15:03       Ссылка      

и у меня получилось


vmaya       21.12.2009 - 10:40       Ссылка      

Мне иногда нужно быстро нарисовать кнопку, поэтому написал программку для таких целей: http://vmaya.ru/button/ , пользуйтесь если понравится


Дмитрий       11.01.2010 - 10:25       Ссылка      

vmaya! Здравствуйте! А можно ли вашу программку отдельно без интернета? Огромное спасибо - очень удобная:)))


seska       21.02.2010 - 07:26       Ссылка      

круто,надо-бы попробовать


Pupik       23.02.2010 - 03:21       Ссылка      

vmaya - Просто Супер прога! Огромное спасибо!


mobbich       17.03.2010 - 11:38       Ссылка      

спс автору сайта за его труд...


ilyxasan       05.01.2011 - 11:08       Ссылка      

вот кнопка


Zhukov       09.02.2011 - 20:22       Ссылка      

ilyxasan, у вас не плохо получилось ,но тень местами слишком насыщенная wink


Александр       26.03.2011 - 05:19       Ссылка      

Спасибо за стрелку smile


Глеб       20.04.2011 - 10:30       Ссылка      

Как включить меню там где: Слои каналы отменить конт?


Андрей Пожарко       20.04.2011 - 10:36       Ссылка      

Глеб, не понял что нужно включить, но думаю что оно находится в меню Окна.


Аноним)       20.04.2011 - 10:59       Ссылка      

Андрей спасибо большое!


Глеб       20.04.2011 - 11:15       Ссылка      

Непонимаю когда надо 2 элинистический круг делать самый последний там где из выделения нужно часть отнять


Глеб       20.04.2011 - 11:23       Ссылка      

Вобщем стрелку непонял как делать


Глеб       20.04.2011 - 11:29       Ссылка      

Всё понял)


Юрий       17.05.2011 - 21:33       Ссылка      

Прикольно, спасибо


Алексей       09.06.2011 - 00:35       Ссылка      

Господа, подскажите, пожалуйста, как вообще в GIMP 2.6.11 вызвать список слоев? Там где глаза... smile smile smile


S-28       09.06.2011 - 08:09       Ссылка      

Алексей, Окна - Прикрепляющиеся диалоги - Слои. Или можно открыть меню другого окошка, например, "История" и выбрать Добавить вкладку - Слои.


Алексей       10.06.2011 - 02:43       Ссылка      

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


Андрей Пожарко       10.06.2011 - 06:43       Ссылка      

Алексей, если у вас версия GIMP 2.6, то выберите в меню Файл - Сохранить как и укажите нужный формат для сохраняемого файла, например JPG. Если версия 2.7, то Файл - Экспорт.


Алексей       10.06.2011 - 16:25       Ссылка      

Ну вот, вроде получилось...


Тони       18.06.2011 - 00:18       Ссылка      

прикольно, надо попробовать


mpak       03.07.2011 - 04:32       Ссылка      

Интернет торговля без посредников и комиссий. http://ОткрытыйМагазин.РФ


Pavel       10.08.2011 - 15:39       Ссылка      

спасибо за урок.. перешел с Вин на Лин (следовательно с Фотошопа на ГИМП) вот снова учусь... wink


JD       10.11.2011 - 08:17       Ссылка      

о как


INUBOH@UKR.NET       07.01.2012 - 14:50       Ссылка      

Немножко совместил с другим уроком! smile Как вам? smile


ABelorukov       15.01.2012 - 15:48       Ссылка      

Спасибо! Для новичка очень полезный урок.


Ксю       26.04.2012 - 13:17       Ссылка      

Как выбрать основной и фоновый цвет? Не пойму(


Андрей Пожарко       26.04.2012 - 13:23       Ссылка      

Кликайте мышкой эти прямоугольники и выбирайте. Верхний - основной цвет, нижний - фоновый.


Ксю       26.04.2012 - 14:32       Ссылка      

Спасибо, а что делать, если не появляется окно "Слои"? Раньше сразу появлялось, но теперь пропало(


Андрей Пожарко       26.04.2012 - 14:33       Ссылка      

Посмотрите в меню Окна.


Ксю       26.04.2012 - 14:37       Ссылка      

Спасибо!. smile


Victoria       08.07.2012 - 18:28       Ссылка      

Большое спасибо автору! и за урок и за информацию в комментариях smile


жожа       04.05.2013 - 20:48       Ссылка      

INUBOH@UKR.NET скиньте пожалуйста ссылку где вы делали вашу кнопку. Мне нужно создать такую кнопку, которая меняется (становится прозрачнее или меняет цвет),если навести на неё.


Андрей Пожарко       13.05.2013 - 15:06       Ссылка      

Выше уже показывал как это делается http://gimp.nas2.net/?n=4&id=5#614


Дімон       20.09.2013 - 21:34       Ссылка      

cool круто


Дімон       20.09.2013 - 21:36       Ссылка      

спасибі за урок


Дімон       20.09.2013 - 21:37       Ссылка      

спасибі за урок


Дімон       20.09.2013 - 21:37       Ссылка      

cool круто


МишанЯ       28.09.2014 - 08:00       Ссылка      

Здорово у вас здесь..


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

[b] [i] [u] [quote]     :) :| :( :D :o ;) :/ :P :lol: :mad: :rolleyes: :cool:


Введите результат =    








Проект OpenNET © 2008-2017 Андрей Пожарко Деньги владельцам сайтов