Expertet.ru

Как сделать красивую кнопку 1 часть

Здорово ребята! Сегодня мы будем делать кнопку для сайта в фотошопе. Наша задача изготовить два образца: первый вид кнопки будет до момента нажатия, а второй - во время нажатия. Т.е. когда человек наводит курсор на кнопку, она меняет свой вид. Получается красиво и ваш сайт становится более интересным. Итак, приступим.

Заходим в фотошоп. Я буду показывать на версии CS 2, в других версиях процесс аналогичен, главное понять суть и все у вас получится. Мы делаем кнопку при условии, что вы уже закачали в фотошоп все необходимые материалы. Как это делать, я расскажу в следующей статье: Градиенты и материалы фотошопа для сайта.

File -> New. Теперь выбираем настройки для нашей кнопки: ширина 107 пикселей, а высота 40, разрешение я возьму 300, для сайта вы можете выбрать и по-меньше.

настройки кнопки

Лупой увеличиваем изображение, чтобы удобнее было работать.

увеличиваем холст

В нижнем правом углу находим вкладку слои (Layers) и щелкаем правой кнопкой по нашему изображению: создать дубликат слоя (Duplicate Layer).

делаем дубликат слоя

Даем любое имя новому слою. У меня имя будет по умалчиванию.

имя дубликата

Теперь нижний, основной слой, можно убрать в корзину или сделать невидимым. Таким образом, мы создаем прозрачность и эффекты на кнопке. В версиях фотошопа ниже CS4 есть определенные недостатки, поэтому мы работаем именно так. Стеркой удаляем белый фон на активном слое или выделяем рамкой и удаляем. Мы получаем картинку с бело-серыми квадратиками. Это и есть наша прозрачность.

убираем основной слой

Рисуем нашу кнопку, выбрав инструмент "прямоугольник со скругленными углами", при этом оставляем часть картинки пустой.

инструмент скругленный прямоугольник

цвет заливки

Теперь пишем текст на нашей кнопке, например, "Поиск". Берем инструмент текст "Т" и в свободном месте картинки пишем наш текст, потом располагаем его верхним слоем в наших слоях (Layers).

текст кнопки

Естественно, наш текст должен быть другого цвета, чем кнопка. Если надо сместить кнопку или текст, то пользуемся инструментом движения (Move Tool), находится рядом с рамкой. Далее придаем нашей кнопке множество эффектов. Выбираем в слоях нашу кнопку. Эффекты мы находим рядом с вкладкой слои (Layers), круглая кнопка f внизу. Выбираем Blending Options - основные настройки (самый верхний пункт).

эффекты для кнопки

меню эффектов

В появившемся меню мы может делать различные эффекты. Там все интуитивно понятно. Вы бегаете по пунктам и меняете настройки. Я задействую галочки: Drop Shadow, Inner Shadow, Outer Glow, Inner Glow, Bevel and Emboss, Gradient Overlay, Stroke. Stroke - окантовка или рамка вокруг кнопки, размер беру в 1 пиксель, цвет черный, чтобы кнопка выделялась краями четко. Остальные настройки, кроме градиента беру по умалчиванию. Если они вам не нравятся, то вы легко можете в них зайти и поменять. Это очень просто.

настройки эффектов

выбираем настройки

Остался важный пункт – градиенты (Gradient Overlay). Заходим в него и выбираем градиент из вашей коллекции, если у вас мало градиентов, то в следующей статье я покажу, как их число увеличить. Выбираем нужный градиент и щелкаем «ок». Смотрим на изменения нашей кнопки.

выбираем градиент

У нас появилась красивая расцветка, кнопка стала похожа на 3д, появилась тень и всякие внутренние и внешние свечения, которые делают ее красивой. Теперь осталось ее сохранить в формате PNG, этот формат поддерживает прозрачность. Фаил -> сохранить для веба.

сохраняем файл

Выбираем PNG-24 и сохраняем.

формат png

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

второе изображение кнопки

Хотелось бы показать, как теперь подключить все эти картинки к сайту и использовать на практике, но статья не резиновая. В следующий раз я расскажу о подключении дополнительных материалов к фотошопу, в том числе о градиентах, для увеличения ваших возможностей быстрого и простого изготовления материалов к бизнес-проекту. Ну а затем, так же в другой статье, покажу, как ставить такие кнопки на сайт. До скорого!

Автор: Сергей Щеглов 2015-03-08 Просмотров: 304