Логотипчик



Назад


Создание уникальной кнопки №1 в Adobe Photoshop

В данной статье о Photoshop мы узнаем, как сделать уникальную кнопку для сайта.

Для начала создадим новый файл в Adobe Photoshop (фотошопе) размером 300 на 100 пикселей. Идем Файл>>Новый…

Вкладка для создания нового файла

В окне параметров нового файла задаем все как на картинке

Окно с параметрами нового файла

Получим такой слой

Новый слой

1. Два раза щелкнем по слою и нажмем на кнопку Да в появившемся окошке, тем самым сняв замочек с этого слоя.

С помощью инструмента «Прямоугольник со скругленными краями» рисуем фигуру. Ставим радиус закругления, например, 10 пикселей.

Слой с первой фигурой

С помощью инструмента «Перемещение» можем передвинуть прямоугольник в удобное место. Зальем прямоугольник каким-нибудь цветом и сделаем для него обводку. Для этого два раза щелкаем по слою с прямоугольником. Появиться окно стилей слоя

Окно со стилями слоя

Перейдем во вкладки Наложение градиента, Обводка и установим такие значения параметров, какие показаны на картинках

Вкладка для эффекта Наложение градиента

Вкладка для эффекта Обводка

У нас получилась такая картинка

Первая фигура с примененными эффектами

Но так не очень интересно. Давайте добавим еще одну фигуру на нашу кнопку.

2. Создадим новый слой, нажав соответствующую кнопку в палитре слоев.

С помощью инструмента «Прямоугольник со скругленными краями» рисуем фигуру поверх нашего прямоугольника. Ставим радиус закругления опять 10 пикселей.

Картинка с двумя фигурами

Причем к новой фигуре применились те же стили, что и для первой фигуры.

3. Добавим к нашим фигурам еще один эффект Тиснение. Щелкаем два раза по слою с первым прямоугольником. Переходим на вкладку эффекта и задаем параметры как на картинке

Вкладка для эффекта Тиснение

Затем проделываем все также и для второй фигуры.

Вот что получилось

К фигурам применено тиснение

4. Сделаем нашу кнопку информативной. Для этого напишем на ней текст (в первом прямоугольнике) и вставим картинку (во вторую фигуру). Текст набираем с помощью инструмента «Горизонтальный текст».

Например, так

Добавлен слой с текстом

Теперь добавим картинку, связанную с фотошоп или с рисованием вообще.

Я подобрал такую картинку

Картинка для добавления на кнопку

Чтобы добавить ее на нашу кнопку, откроем этот файл через фотошоп, не закрывая рабочий. Он откроется в новом документе. Кликнем по слою в палитре слоев с картинкой и создадим дубликат

Вкладка для создания дубликата слоя

Откроется окно, в котором в качестве документа назначения укажем файл с нашей кнопкой, в данном случае это Безимени-1

Окно для параметров дубликата слоя

Нажимаем на кнопку Да и переходим Окно>>Безимени-1

Вкладка для перехода к другому файлу

Видим что картинка слишком большая. Уменьшим ее. Для этого выделим слой с картинкой для вставки и идем Редактирование>>Свободное трансформирование

Вкладка для свободного трансформирования

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

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

Диалоговое окно для применения трансформирования

Нажимаем кнопку Применить. Получаем такое изображение

Полученная кнопка с белым фоном

Такую кнопку можно поставить, например, в меню сайта или на странице для перехода в данном случае к урокам с фотошоп.

5. Осталось добавить подходящий фон. Для этого надо узнать фон вашей страницы. У меня это цвет #00CCFF. Идем в палитру слоев, выбираем слой с фоном и заливаем его нужным цветом. Переходим в стили слоя, кликнув по нему два раза. Открываем вкладку Наложение цвета

Вкладка для наложения цвета

Щелкаем по месту задания цвета, оно выделено на рисунке. Появится еще одно окно

Окно для выбора цвета

Цвет ставим в выделенное поле.

Нажимаем на кнопку Да. В итоге получаем очень интересную кнопку

Полученная кнопка с нужным фоном

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

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

Для этого скопируем PSD-файл с нашей кнопкой. Откроем его и поменяем цвет обводки и текста на #477e4b. Для этого два раза щелкаем по слоям и заходим во вкладку Обводка. В случае текстового слоя это вкладка Наложение цвета.

Так кнопка будет выглядеть при наведении

Картинка для кнопки с измененной обводкой

Посмотрим, как она будет работать

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



К верху страницы


<- К предыдущей статье   К следующей статье ->

Низ сайта