797 MGraphics.ru - Трюки в Photoshop - Рисуем кнопку в стиле Web 2.0 в Photoshop
Уроки photoshopa


Photoshop - Трюки в Photoshop

Рисуем кнопку в стиле Web 2.0 в Photoshop

Условия перепечатки материалов

Рейтинг статьи: 0.000.000.000.000.00
Проголосовало 0 человек.
Оцените статью:

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

Рисуем кнопку в стиле Web 2.0 в Photoshop

Начнем с создания нового изображения с разрешением 72 точки на дюйм. Размеры - любые, подходящие для рисования кнопки. Затем с помощью инструмента Rounded Rectangle Tool нарисуем прямоугольник-основу со скругленными углами для нашей кнопки.

Рисуем кнопку в стиле Web 2.0 в Photoshop

Рисуем кнопку в стиле Web 2.0 в Photoshop

Откроем диалоговое окно настроек стилей слоя. Применим эффект Gradient Overlay с каким-нибудь градиентом. Это будет цветовая основа нашей кнопки. В уроке используется градиент с цветами #434343 и #000000.

Рисуем кнопку в стиле Web 2.0 в Photoshop

Затем применим эффект Stroke с трехпиксельным обрамлением черного цвета вокруг кнопки. Также добавьте эффект Inner Glow - это будет внутреннее свечение кнопки.

Рисуем кнопку в стиле Web 2.0 в Photoshop

Теперь создайте новый слой. Нарисуйте еще один прямоугольник со скругленными углами белого цвета. Это будет прямоугольник для придания стеклянности кнопке. Спозиционируйте его похожим образом (см. рисунок ниже), а также растрируйте слой, выбрав пункт меню Rasterize в палитре слоев.

Рисуем кнопку в стиле Web 2.0 в Photoshop

Перейдите в режим быстрой маски, нажав Q. Сверху вниз проведите градиентом, примерно так, как показано на рисунке ниже:

Рисуем кнопку в стиле Web 2.0 в Photoshop

Теперь выйдите из режима быстрой маски, снова нажав Q, и нажмите Delete для удаления области выделения.

Рисуем кнопку в стиле Web 2.0 в Photoshop

Если кнопка не выглядит достаточно стеклянной, попробуйте добавить эффект Satin к оригинальному слою (слою с основой).

Рисуем кнопку в стиле Web 2.0 в Photoshop

Добавьте какой-нибудь текст поверх кнопки. Это может быть текст "RSS feed", как в примере, а может быть и любой другой текст, разумеется. Затем слейте все слои кнопки воедино, выбрав в палитре слоев все необходимые слои и выбрав пункт меню Layer > Merge Linked. Теперь дублируйте слой-кнопку, нажав Ctrl+J. И спозиционируйте дубликат ниже основного слоя, как показано на рисунке ниже:

Рисуем кнопку в стиле Web 2.0 в Photoshop

Затем переверните слой, выбрав пункт меню Edit > Transform > Flip Vertical.

Рисуем кнопку в стиле Web 2.0 в Photoshop

Наконец, выберите пункт меню Layer > Add Layer Mask > Reveal All для нижнего слоя кнопки (дубликата). И с помощью инструмента Gradient Tool сделайте затемнение (так называемый фэйд-эффект), чтобы придать кнопке полноценный вид отражения. Результат:

Рисуем кнопку в стиле Web 2.0 в Photoshop


Вчера кстати взял ноутбуки в кредит - https://www.oscomp.ru/category_149.html для себя и для своего сына на сайте компании ОСКОМП. В общем какого было мое удивление когда на ноутбуке спокойна запустился Photoshop со всеми моим плагинами и все так быстро работала, что я был в шоке. У меня на компьютере нужно выключать плагины поочереди, что бы не так сильно лагает и мой компьютер вроде мощней чем ноутбук, но все же.

Разместил: MGraphics.ru
Опубликовано: 04.06.2010
Статья "Photoshop - Трюки в Photoshop - Рисуем кнопку в стиле Web 2.0 в Photoshop" прочтена 8520 раз.





Последние новости


Яндекс.Метрика