С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Дизайн кнопки «Контакты» в Фотошопе

Дизайн кнопки «Контакты» в Фотошопе

В этом уроке я покажу вам, как создать стильную кнопку "Контакты" в Photoshop. Это очень простой урок, он отлично подходит для начинающих, которые хотят узнать несколько новых приемов. Пробуйте!

 

Вот предварительный конечный результат.

 

Дизайн кнопки «Контакты» в Фотошопе

 

Хорошо, давайте начнем!

 

Для выполнения этого урока вам понадобятся следующие материалы:

 

Шрифт

 

Шаг 1

 

Создайте новый документ размером в 200 на 200 пикселей с белым фоном и разрешением в 72 точек на дюйм (веб-графика) - обратите внимание, что мы будем делать кнопку реального размера.


 

Здесь я покажу вам небольшой трюк: нажмите комбинацию клавиш Ctrl + R, чтобы отобразить линейку в верхнем и левом краю, нажмите мышью на линейке и перетащите направляющие к краям нашего холста, как показано ниже.

 

Дизайн кнопки «Контакты» в Фотошопе

 

Нажмите комбинацию клавиш Ctrl + Alt + C чтобы вызвать окно изменения размера холста и применяются следующие параметры.

 

 

У Вас должен получится следующий эффект (я изменил цвет фона на серый для демонстрационных целей).

 

Дизайн кнопки «Контакты» в Фотошопе

 

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

 

Шаг 2

 

Теперь давайте сделаем простой фон для работы. Я заполнил фон градиентом из серого и светло-серого.  Возьмите инструмент Градиент (Gradient Tool) и залейте фоновый слой, как показано ниже.

 


Дизайн кнопки «Контакты» в Фотошопе

 

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

 

Дизайн кнопки «Контакты» в Фотошопе

 

Измените размер и положение этого слоя, как показано ниже.

 

Дизайн кнопки «Контакты» в Фотошопе

 

Теперь у вас есть хороший фон для кнопки.

 

Шаг 3

 

Теперь берем инструмент Прямоугольник со скруглёнными углами (Rounded Rectangular Tool) на панели инструментов, задаём радиус скругления в 10 пикселей, и рисуем следующую фигуру по направляющим.

 

Дизайн кнопки «Контакты» в Фотошопе

 

Назовите этот слой "фон кнопки", и примените следующие стили для этого слоя.

 

Тень:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Наложение градиента:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Обводка:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Вот, что у вас должно получиться.

 

Дизайн кнопки «Контакты» в Фотошопе

 

Шаг 4

 

Теперь давайте добавим немного бликов и теней для фона кнопки. Создайте новый слой под слоем с фоном кнопки, используйте инструмент Прямоугольная выделенная область (Rectangular Marquee Tool), чтобы создать форму, как показано ниже.

 

Дизайн кнопки «Контакты» в Фотошопе

 

Назовите этот слой "тень" и примените к нему фильтр Размытие по Гауссу (Gaussian Blur) со следующими параметрами. 

 

 

Измените размер сверху (Ctrl + T) и уменьшите непрозрачность до 30%, вы будете иметь следующий эффект.

 

 

Создайте новый слой и назовите его "подсветка" в верхней части слоя с фоном кнопки, установите его Режим наложения на Перекрытие (Overlay), возьмите белую мягкую кисть и сделайте подсветку одним щелчком мыши, как показано ниже.

 

Дизайн кнопки «Контакты» в Фотошопе

 

Дублируйте этот слой и измените Режим наложения дублированного слоя на Нормальный (Normal), далее измените его размер превратив в очень тонкую полоску, поместите его чуть выше верхнего края слоя с фоном кнопки, как показано ниже.

 

Дизайн кнопки «Контакты» в Фотошопе

 

Вот, что должно у вас получиться на данный момент.

 

 

Шаг 5

 

Теперь сделаем простой конверт на эту кнопку. Создайте новый слой поверх всех предыдущих слоев, возьмите инструмент Прямоугольник (Rectanglar) и нарисуйте прямоугольник как показано ниже.

 

 

Назовите этот слой "конверт", и примените следующие стили для этого слоя.

 

Тень:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Внешнее свечение:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Обводка:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Вот, что должно у вас получиться на данный момент.

 

 

Шаг 6

 

Теперь давайте добавим еще несколько линий на конверт, чтобы он выглядел более реалистично. Создайте новый слой под названием "вершина конверта" и возьмите инструмент Многоугольник (Polygon Tool) на панели инструментов.

 

 

Примените следующие настройки (3 стороны).

 

Дизайн кнопки «Контакты» в Фотошопе

 

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

 

Дизайн кнопки «Контакты» в Фотошопе

 

Примените на этот слой следующие стили.

 

Тень:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Внутренняя тень:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Наложение градиента:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Обводка:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Вот, что должно у вас получиться на данный момент.

 

 

Дублируйте этот слой и переименуйте новый дублированный слой в "основание конверта", переверните его вертикально используя свободное трансформирование Ctrl + T.

 

Дизайн кнопки «Контакты» в Фотошопе

 

Сохраните все стили слоя кроме обводки, поместите этот слой как показано ниже.

 

Дизайн кнопки «Контакты» в Фотошопе

 

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

 

 

Вот, что должно у вас получиться на данный момент.

 

 

Шаг 7

 

Итак, мы почти закончили. Теперь мы можем ввести некоторый текст на кнопку - "Контакты" используя шрифт, который мы скачали, как показано ниже.

 

 

Здесь я использовал темно-красный цвет. Теперь давайте добавим следующие стили слоя для текста.

 

Внутренняя тень:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Наложение градиента:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Обводка:

 

Дизайн кнопки «Контакты» в Фотошопе

 

Здесь есть одна хитрость - при добавлении эффекта обводки в текст, убедитесь, что выбранный цвет немного светлее, чем цвет фона, для того чтобы получился эффект тиснения.

 

Дизайн кнопки «Контакты» в Фотошопе

 

Вот финальный результат моей работы.

 

Дизайн кнопки «Контакты» в Фотошопе

 

На этом всё. Я надеюсь, что вы узнали для себя что-то новое и полезное. До скорой встречи. 



Автор урока: Команда сайта psdvault.com


Переводчик урока: Ирина Шипилова 

Ссылка на источник



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 29.04.2012
  •   Просмотров: 1978
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

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

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки