Урок «Стеклянная кнопка»

В этом уроке используется плагин Падающая тень.

На этом уроке мы научимся создавать «стеклянные» кнопки для сайтов и программ. Вот такие:

Стеклянные кнопочки
Стеклянные кнопочки

1. Откройте Paint.NET. В качестве начального холста можно использовать открываемый по умолчанию (800 x 600). Выберите инструмент «Выбор области овальной формы», и с его помощью выделите круг размером 400 x 400 пикселей. Для получения идеально ровного круга удерживайте при выделении клавишу Shift. Размер круга можно контролировать на панели статуса:

Нажмите для увеличения

Выделение круга (нажмите для увеличения)

2. Для удаления излишней рабочей площади примените обрезание по выделению (Изображение — Обрезать по выделению или Ctrl+Shift+X):

После обрезания по выделению

После обрезания по выделению

3. Так как предыдущая операция полностью обрезала фон изображения, немного расширим его. Сначала установите дополнительный цвет прозрачным (это нужно для того, чтобы добавляемый фон не отличался от существующего):

Установка прозрачности

Установка прозрачности

Далее откройте окно установки размера полотна (Изображение — Размер полотна или Ctrl+Shift+R), установите режим «В процентах» и введите 125 %. При этом в разделе «Закрепить» должно быть выставлено «По центру»:

Установка размера холста

Установка размера полотна

Вот что в результате должно получиться:

После увеличения фона

После увеличения полотна

4. Теперь придадим нашей кнопке объема. Так как кнопка у нас будет зеленая, установим в качестве основного цвета темно-зеленый (00660A), а в качестве дополнительного — белый:

Установка первичного и дополнительного цветов

Установка первичного и дополнительного цвета

Используя «Волшебную палочку» выделите белый круг. Затем переключитесь на «Градиент» в «Круговом» режиме и используя правую кнопку мышки залейте круг начиная с приблизительно 1/3 от его низа и до верха:

Заливка круга радиальным градиентом

Заливка градиентом (нажмите для увеличения)

Для того, чтобы заливка получилась ровной, можете контролировать координаты начальной точки на панели статуса Paint.NET, а также удерживать нажатой клавишу Shift при перетаскивании градиента.

5. Дублируйте фон дважды (Слои — Создать копию слоя). Переименуйте верхний слой в «Верх», а средний в «Середина» (сделать это можно в диалоге Слои — Свойства слоя):

Три слоя изображения

Три слоя изображения

6. Начнем с верхнего слоя. С помощью инструмента «Перемещение области выделения» ухватитесь за верх круга и перетащите его вниз, пока высота круга не станет равна 350px (контролируйте на панели статуса):

Перетягивание выделения (нажмите для увеличения)

Перетягивание выделения (нажмите для увеличения)

Затем удалите выделенную область (нажмите клавишу Delete).

7. Теперь перейдем к слою «Середина». Для выделения круга используйте «Волшебную палочку». Кликните ею по фону, а затем инвертируйте выделение (Правка — Обратить выделение или Ctrl+I).

Повторите операцию проделанную с верхним слоем (перетащите верх круга вниз). Только на этот раз высоту эллипса оставьте равной 250 px. И снова удалите выделенную область.

После проделанных операций окно слоев должно выглядеть так:

Окно слоев

Окно слоев

8. Снова возвращаемся к слою «Верх» и применяем к нему эффект «Добавление или уменьшение» (Эффекты — Шум — Добавление или уменьшение…) со следующими параметрами: Радиус 10, Процент 0. Затем используйте «Волшебную палочку» для выделения внешней области (фона) и обратите выделение.

Установите в качестве основного цвета белый, а в качестве вторичного — темносерый и залейте полумесяц белым цветом (инструментом «Заливка»):

Заливка белым цветом

Заливка белым цветом

Нажмите CTRL+D (Правка — Отменить выделение) для снятия выделения и примените эффект «Радиального размытия» (Эффекты — Размытие — Круговое) с углом 2.

9. Применяем к слою «Середина» такое же «Добавление или уменьшение» (Радиус 10, Процент 0) как и к слою «Верх».

10. Установите в свойствах (Слои — Свойства слоя или F4) слоев «Верх» и «Середина» режим смешивания «Экранное осветление» а прозрачность установите на 100:

Установки слоя

Установки слоя

После этого наше изображение должно смотреться так:

Кнопка почти готова

Кнопка почти готова

11. Кнопка почти готова. Осталось только нанести на нее требуемый символ. Для этого создадим новый слой (Слои — Добавить новый слой или Ctrl+Shift+N) и поместим его между «Фоном» и «Серединой». Перемещать очередность слоев можно с помощью специальных стрелочек в окне слоев:

Стрелки перемещения слоев

Стрелки перемещения слоев

Напечатаем на новом слое требуемый символ. Например иконку «обновления». Для этого выберите в панели инструментов «Текст», установите шрифт «Webdings» с размером 200, включите английскую раскладку и напечатайте на новодобавленном слое букву «q»:

Нанесение символа обновления

Нанесение символа обновления

12. Для придания символу рельефа воспользуемся плагином «Падающая тень» (Эффекты ? Object ? Drop Shadow (Тень)) с параметрами Смещение по горизонтали 0, Смещение по вертикали 10 и Радиус размытия 10. Цвет тени подберите «по вкусу»:

Применение эффекта падающей тени

Применение эффекта падающей тени

13. Выровняйте изображения (Изображение — Объединить все слои или Ctrl+Shift+F) а затем примените эффект «Падающая тень» (с теми же параметрами) еще раз:

Готовая кнопка

Результат

Использован туториал с en.wikibooks.org.

комментариев 113

  1. Егор Белоев:

    опять не получается… :(( В слоях пустая картинка.

  2. Аму:

    УРАААААааааа СПАСИБО У МЕНЯ ПОЛУЧИЛОСЬ АРИГАТУСИКИ

  3. Ivo:

    «11. Кнопка поти готова. » опечатка. что-то неслишком красиво получилось. но смысл понятен

  4. admin:

    Ivo — спасибо за замечание. Исправил.

  5. nicon1505:

    Блин, у меня версия 3.36 а эффекта падающая тень нету… чё такое?

  6. admin:

    Надо установить плагин. Читайте внимательно и все у Вас получиться. Это касается и других уроков.

  7. victor:

    слушайте у меня в конце символ *обновить* получается не в центре кружка а сбоку В чём проблема?

  8. admin:

    victor — так его нужно в центре кружка напечатать. Или перетащить после печати в нужное место.

  9. victor:

    так у меня курсор в центре стоит как пишу у меня сдвигается а перенести не получается

  10. admin:

    На всякий случай :)

    Перетаскивать нужно с помощью специального «хватателя» в правом нижнем углу текстовой надписи:

    Может случиться, что он «не влазит» в размеры изображения. Тут нужно будет что-то предпринять — увеличить размер фона изображения, или уменьшить размер шрифта.

  11. victor:

    ок ща попробуем)

  12. victor:

    во я придумал выход.

    Напечатать этот символ куда он встанет потом взять волшебную палочку, инвертировать , и потом этот символ перенести с помощью *переместить выделенное*

    теперь боле менее

  13. пaпa:

    Кстати это все придумали примерно лет 10 назад , а то и больше.:

  14. GARFIELD:

    Блин, а у меня символа такого нет :(

  15. Бермуд:

    Здорово !!!!
    Никогда бы сам до такого не додумалсО
    Круть

  16. Наташа:

    Ураааа получилось только без тени потому что не могу скачать плагин а так всё очень сильно понятно и всё получаеться!
    а будет когдани-будь урок чтобы из фотографии сделать рисунок как картина из акварели? сделайте плиzzzzz&

  17. DANTE:

    Офигительно получилось, хоть плагина нету, можно сделать кое что похожее:
    дублировать символ, выделить фон, инвертировать выделение…
    закрасить его в чёрный, потом снять выделение…
    выбираем в эффектах —> размытие —> гауссовское пятно, выставляем значение не больше 20…
    потом выделяем весь слой и перемещаем чуть вправо и вниз…
    и готово)))

  18. DeadmaN:

    как открыть окошко «слои» ???

  19. 123:

    вы все придурки у меня даже получилось)))

  20. Xenon:

    блин, у меня эффект дроп шедоу не фурычит. Когда его открываю он мне выдает: «Этот плагин вызвал ошибку и будет закрыт»((

  21. Legenda:

    Да я за пару минут всё сделал. Очень легко.

  22. Настя:

    спасибки))) всё сразу получалось))) ясно и понятно объясненно))) и эффект сразу установился))))

  23. Николай:

    у меня края после уменьшения получаются неровные. Помогите!

  24. Жерар:

    Спасибо, всё получилось. Только в конце можете добавить, что при сохранении, нужно ставить «автоопределение» или «32-бита», а то при «8-битах» тень под кнопкой исчезает.
    Сам столкнулся, не понял сначала в чём проблема.

  25. Антон:

    Не могли бы подсказать, как сохранить в формате bmp 32 bit?

  26. лолшто:

    как применить Антиалиасинг? а то чет не оч края выходят

  27. дмитрий:

    у меня не видно рисунков !! пипец

  28. Алина:

    Скажите пожалуйста, а как убрать верх, середину? Как их для начала ВЫДЕЛИТЬ вообще?

  29. Бахтияр:

    супер все круто получилось , я только немного изменил зелёный на чёрный , тень сделал синею и немного прозрачную ! круто всё круто получилось ….!!!!!!!!!!!!1 спс за урок ! довайте ещё уроки мне не терпится ещё чемунибудь научится !!!!!!!!!))))))))))))

  30. анонимка:

    У меня когда я на гардинете выполняю инструкцию №4, получается круг БЕЛЫЙ, а НЕ ЗЕЛЁНЫЙ!!!Помогите пожалуйста!

  31. RODAN_2307:

    Круто! Классно получилось. И одновременно несложно. СПС!)))))))))))))))

  32. Аноним:

    А я не могу скачать этот плагин,потому что не знаю как.

  33. Людмила:

    Анонимно-это от меня.

  34. Сашка:

    спасибо автору, всё получилось! сначала тоже затупил по поводу папки effects, потом создал её собственноручно, кинул туда плагин, перезагрузил программу и заработало:)

  35. Aleksandr:

    Как сделать, чтобы при сохранении Paint.net автоматически предлагал сохранять в jpeg вместо png.

  36. Doll:

    Шикарно! Всё вышло!!!

  37. LeLe:

    Апрф…
    У меня ткого нет!!(((
    Захожу в эффекты-стилизация, а там Drop Shadow нет…
    Там только обозначение края, рельеф, чеканка, эзкиз..(((

  38. Аноним:

    у меня тоже всё получилось!!!!!!

  39. Юля:

    У меня тоже все сразу получилось ))) А когда уже будут новые уроки? Я уже все переделала что у вас есть, хочу еще!

  40. zxcvvcxz:

    У меня ступор на 7-ом пункте
    Инвертирую становится фиолетовым!? 6-й пункт затем не получается перемещается полностью квадрат

  41. Re: Rock`n`rollMAN:

    zxcvvcxz в 7 не надо ничего инвертировать(неточности перевода) нажми правка-обратить выделенное(инвертировать выделенное снова он перевод))

  42. zxcvvcxz:

    Спасибо — сделал Вроде получилось но всё равно каряво!
    Хорошие примеры — давно хотел что нибудь поделать буду пробовать пока не запомню порядок действий!
    А вот вопрос — DDS Формат поддерживает?

  43. нася:

    последние не получилось

  44. 2112:

    тупый уроки, у меня в пеинте другие надписи!!!

  45. vova:

    THX !!!

  46. Мария:

    Урок супер.
    Вот только теней почему-то нет, но я использовала кое-что и она стала светиться :D
    http://s51.radikal.ru/i133/1005/0c/75ae908149a5.png
    Вот ссылка на мою работу

  47. Sasha:

    У меня шрифт не рисует стрелочку а какие то самолётики :'(

  48. Sasha:

    Получилось

  49. YURA:

    всё чётко получилось и Drop Shadow установить и кнопку сделать
    все спасибо хто это придумал

  50. М.:

    СУПЕР!!!! Класс просто!

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