Рубрика: Photoshop Уроки | Урок прочитали: 863
 (голосов: 0)

Яркая кнопка для сайта

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

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

Теперь добавьте новый слой, выше слоя «Задний план» и назовите его «Освещение фона», выберите большую, мягкую, круглую кисть (B) серого цвета и сделайте один клик в положении, указанном ниже:

Шаг 2. Теперь выберите инструмент «Прямоугольник со скругленными углами» (U) и поставьте настройки, как показано:

Теперь нарисуйте прямоугольник в центре холста, как показано ниже: (не волнуйтесь о расположение, главное, что вы нарисовали прямоугольник)

К этому слою примените следующие «Стили слоя», сделать это вы сможете, нажав на иконку «Добавить стиль слоя» на панели слоев:

У вас должен получиться следующий результат:

Шаг 3. Теперь загрузим выделение, получившегося прямоугольника, для этого нажмите на миниатюру слоя с прямоугольником, удерживая клавишу Ctrl.

Создайте новый слой над слоем с прямоугольником, выберите мягкую круглую кисть (B) белого цвета и сделайте одиночный клик в месте, показанном ниже:

У вас должно получиться следующее:

К этому слою примените следующие стили слоя:
Тень

У вас должен получиться следующий эффект:

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

Шаг 4. Теперь продублируйте этот слой еще раз и поместите его выше всех остальных слоев. Теперь примените Редактирование -> Трансформирование -> Отразить по вертикали.

Переместите этот слой при помощи инструмента  «Перемещение» (V) немного вниз, чтобы внизу прямоугольника получилась такая же яркая линия края как и сверху.

К слою с текстом примените следующие стили слоя:
Тень

У вас должен получиться следующий результат:

Чтобы добавить больше «силы» вашему тексту, просто продублируйте слой с текстом и у вас получится очень элегантная, чистая и яркая кнопка:

Перевод: Кулагин Никита
Ссылка на источник

           

Похожие файлы и публикации:

Яркая кнопка для сайта
Вот такой домик получится после данного урока
Яркая кнопка для сайта
В этом уроке я покажу, как создать стильную кнопку контактов. Это достаточно простой урок, который смогут выполнить даже те, кто совсем недавно изучают программу Фотошоп.
Яркая кнопка для сайта
В этом уроке  Вы научитесь создавать интересный огненный эффект с помощью программы  Фотошоп  и  использовать  его  для художественного оформления своих  работ.
Яркая кнопка для сайта
Здравствуйте, в этом уроке мы будем «плавить» фотоаппарат, используя инструменты «Маска слоя» и фильтр «Пластика». Итак, начнём!
Яркая кнопка для сайта
Шаг 1. Откройте изображение, напоминающее лист фотоальбома или лист старой книги. Убедитесь, что на нем будет хорошо виден текст и изображение.
Яркая кнопка для сайта
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Яркая кнопка для сайта
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Яркая кнопка для сайта
Приближается самый волшебный праздник – Новый год! Пора начинать подготовку, в этом уроке мы создадим простую новогоднюю открытку.
Яркая кнопка для сайта
Сегодня мы будем создавать фото-реалистичную беспроводную клавиатуру от Apple.
Яркая кнопка для сайта
Шаг 1. Создайте новый документ размером 900 на 790 px (пикселей) и залейте фон черным цветом. Создайте новый слой и назовите его "Создание формы". Выберите инструмент  Ellipse Tool (Эллипс) (U) на панели инструментов:
Яркая кнопка для сайта
В этом уроке мы с помощью программы Фотошоп создадим танец красок!
Яркая кнопка для сайта
Сегодня мы будем рисовать вот такой карандаш.
Яркая кнопка для сайта
В этом уроке Вы научитесь создавать эффект волшебного освещения. В конце урока у Вас получится вот такая работа.
Яркая кнопка для сайта
Сегодня мы поработаем над созданием интересного эффекта – лицо, распадающееся на кусочки.
Яркая кнопка для сайта
 В  этом уроке  Вы узнаете,  как создать текст в перспективе с отражением и  с 3D эффектом.
Яркая кнопка для сайта
В этом уроке мы научимся рисовать губную помаду. Вот, что у нас получится.
Яркая кнопка для сайта
Здравствуйте, сегодня я хочу продемонстрировать вам, как сделать девочку с леденцом в Фотошопе. Для этого урока я использовал Фотошоп версии CS2, но другие версии тоже подойдут. Этот урок будет сложен для тех, кто плохо обращается с инструментом «Перо» (Р), но, как говорится «Практика приводит к совершенству». Итак, начнём!
Яркая кнопка для сайта
В этом уроке я покажу, как нарисовать красную сумку для покупок. В этом уроке будут приведены основные приёмы рисования, такие как создание фигур, затемнение, и добавление теней.
Яркая кнопка для сайта
В этом уроке мы с Вами создадим лёгкий яркий красочный эффект для текста. Финальный результат:
Яркая кнопка для сайта
31 октября состоится страшный праздник "Halloween"! Какой же праздник без тыквы?