Получить новую статью

Вставьте здесь свой адрес:

Delivered by FeedBurner

Подписаться на статьи рубрики
Подписаться на статьи рубрики
Подписаться на статьи рубрики
БЫТОВАЯ ТЕХНИКА
новинки, содержание, ремонт
Подписаться на статьи рубрики
СЕРВИСЫ ОНЛАЙН
описание, рекомендации
Подписаться на статьи рубрики
ДИЗАЙН ВЕБ САЙТОВ
советы, показ, нюансы

users online

Обтравочная маска и создание кнопки в стиле веб дизайн двойной. Технология создания кнопки изложена на базе курса А. Захаренко. Публикую статью с целью помочь начинающим дизайнерам отработать приёмы с обтравочной маской и многими слоями.

Один раз постараться сделать кнопку «Заказать», «Купить» или с другим названием, а в дальнейшем использовать на своих проектах. И так, что мы будем иметь в результатах нашей работы?
Обтравочная  маска и создание кнопки

Кнопка стандартная имеет вид вытянутого четырёх угольника светло зелёного цвета с жёлтой подсветкой. С бликом глянца, объёмной формы со всех сторон, тенью снизу и текстовой тиснённой надписью.

Работаем в программе Фото Шоп CS6.
— Создаём файл размером 500 на 500 рх и заливаем его белым цветом.
— Создаём новый слой над фоновым  и инструментом ФИГУРА на новом слое   рисуем прямоугольник с закруглёнными краями, R = 10 px. и его заливаем тёмным зелёным цветом, ближе к жёлтому.
Обтравочная маска— Создаём ещё один,  новый, слой сверху и прикрепляем его к нижнему, обтравочной маской. Зажать Alt  и навести курсор мыши на границу между слоями в панели слоёв, возникнет прямоугольная стрелка и щелчок ЛКМ по границе. Такое действие ещё раз, отменяет обтравочную маску

Имейте в виду — все слои, прикреплённые обтравочной маской, красят ниже  фигуру в цвета слоя, не зависимо от расположения самого слоя и зависят только от своей  прозрачности каждого слоя.

— Берём КИСТЬ белого цвета, жёсткость = 0, размер по ширине кнопки.
— Находясь на новом слое с обтравочной маской, делаем разовую засветку кистью  белым цветом (один щелчок).

Рисуем кнопку— Выбираем режим «ПЕРЕКРЫТИЕ» в панели слоёв в верху слева и белый цвет будет ослаблен.

Кнопка сайта— Создаём ещё новый слой сверху и прикрепляем, его обтравочной маской с нижним слоем под ним.
— Берём КИСТЬ жёлтого цвета и делаем засветку по кнопке на месте белой кисти. Уменьшим немножко НЕПРОЗРАЧНОСТЬ 80-90%.Прикрепляем слой  обтравочной маской— Создаём ещё новый слой сверху и прикрепляем  его обтравочной  маской к нижнему под ним слою.

— Берём инструмент ВЫДЕЛЕНИЕ  на этом слое и рисуем  эллипс таким образом, чтобы он пересекал вдоль всю кнопку как показано на рисунке.

РОисуем кнопку— Переходим в инструмент ЗАЛИВКА и выбираем градиент от белого к

прозрачному. Если его нет, создадим градиент самостоятельно.

ЗАЛИВКА и выбираем градиент от белого к  прозрачному.

— Проводим линию от края выделения до края кнопки,  удерживая  Shift.

— Получаем  градиент от белого к прозрачному.

глянец кнопки— Снимаем выделение,  уменьшаем непрозрачность слоя до 15%.

knopka-8— Копируем основной слой кнопки под низ и заливаем цветом чуть более тёмным, чем сама кнопка.

— Сдвигаете этот слой на 2 рх ниже основного слоя. Так появляется тень снизу по всей длине кнопки...

— Создаём новый слой под слоем тени основной  кнопки  и берём инструмент ПРЯМОУГОЛЬНОЕ ЛАССО, выделяем область предполагаемой тени с одной стороны кнопки в виде треугольника, как на рисунке ниже.

слой — Заливаем чёрным цветом выделенную область.

размывание тени— Инструментом РАЗМЫТИЕ  размываем этот слойкнопка— Сочетанием Ctrl + T, используя свободное трансформирование, изменяем геометрию тени и её положение.

обтравочная маска— Далее создаём новый слой сверху слоя сверху размытого слоя и прикрепляем его обтравочной маской к размытому слою.

— После этого ПИПЕТКОЙ  берём цвет самого низа основной кнопки  и заливаем им этот новый слой инструментом ЗАЛИВКА. Тень приобретает оттенок цвета кнопки.

кнопка сайта

— Для большей реалистичности, уменьшаем прозрачность заливки тени  до 70%.

— После этого  выделяем оба этих слоя тени  и командой ОБЪЕДИНОТЬ СЛОИ, эти слои превращаем в один слой.

— Дублируем этот слой и отразим по горизонтали.

— Перемещаем дубль слоя на другую сторону кнопки и объединяем  оба слоя  общей тени  командой ОБЪЕДИНИТЬ СЛОИ.

кнопка сайта

— Создадим небольшую внутреннюю подсветку и свечение кнопки снаружи.

— Для этого создаём в самом верху слоёв новый слой и прикрепляем его к нижнему слою обтравочной маской.

— Удерживая Ctrl и щелчок ЛКМ по иконке основного слоя кнопки на панели слоёв.

— Происходит выделение кнопки.режим мягкий свет

— Переходим на инструмент ВЫДЕЛЕНИЕ, делаем щелчок ПКМ  по картинке кнопки и выбираем команду ВЫПОЛНИТЬ ОБВОДКУ.

размытие по Гауссу

— Ставим -2 рх, цвет белый с желтизной, чек внутри, и ОК.

— Снимаем выделение обычным способом,  Ctrl+D,  или в верхней панели инструментов.

обтравочная маска

— Далее, переходим  ФИЛЬТР – РАЗМЫТИЕ – РАЗМЫТИЕ ПО ГАУССУ, ставим  R = 3-4 px  и Ок. Размытие превращает жёлтую рамку в 2 рх в слабо заметную окантовку внешней подсветки.

— Перейти на ЛАСТИК —  непрозрачность 50%  и снизу подтираем, чтобы не было явного свечения с наружи.

прикрепить обтравочную маску

— Теперь придадим  основной кнопке  выпуклость  (объёмность) сверху, сбоку, снизу.

— Для этого подсветим белым цветом сверху и с боков, а снизу подсветим чёрным цветом.

— Подсвечиваем сверху.  Создаём новый слой с самого верху слоёв основной кнопки и прикрепляем его в обтравочной. маске, как обычно.

— На этом слое выбираем КИСТЬ белого цвета и проходимся сверху и по бокам кнопки, подсвечивая, её белым. Смотреть на рисунке.

рисуем кнопку для сайта— Далее, переходим, ФИЛЬТР, РАЗМЫТИЕ, РАЗМЫТИЕ ПО ГАУССУ, ставим  до 8рх и ниже, НЕПРОЗРАЧНОСТЬ  до 30%. Нажимаем Ок.

Происходит некоторое смягчение оттенков.

— Берём ЛАСТИК и подтираем с боков переходы  в подсветке.

заливка слоя— С подсветкой сверху и с боков закончили, переходим к затемнению снизу кнопки.

— Опять создаём новый слой сверху слоёв основной кнопки и прикрепляем его как обычно.

— Инструментом КИСТЬ чёрного цвета, диаметром поменьше (50рх) и снизу слегка подкрашиваем  кнопку, потом размываем по Гауссу (9рх). Техника работы такая же, как и с верхней стороной кнопки. Ничего другого.

— В панели слои вверху Режимы, выставляем МЯГКИЙ СВЕТ и НЕПРОЗРАЧНОСТЬ до 45%.

— Можно ослабить немного жёлтый цвет сверху, техника подобна изложенной выше.

— Кнопка готова. Подсветка и объёмность реализованы.

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

Для того, чтобы скопировать  кнопку в целом, объедините  все слои в одну папку и дублируйте, уменьшайте, увеличивайте,  меняйте цвета, тексты под любые задачи дизайна.

Пример, как это может быть ниже.

примеры кнопкиВероятно, могут быть вопросы, задавайте и пишите в комментариях.

Публикации по курсу А. Захаренко «Веб дизайн двойной»  будут продолжены

по самым трудным и интересным элементам дизайна сайта.

Подписывайтесь на рубрику ДИЗАЙН. Приходите на Форум школы веб-дизайна Алексея Захаренко в среду почитателей Фото Шоп по адресу http://webdesign2.ru/forum/

 

 

 

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Используем интернет для заработка: Электронная книга

Не крутой, но пожизненный доход при наличии Internet и мобильный телефон.