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

Как сделать стильную кнопку для сайта в фотошопе. Подробный урок

 

В этом подробном уроке я описал, как сделать красивую кнопку на сайт.

Пошаговое описание со скринами.

 

 

 

В конце урока у нас получится вот такая кнопочка:

 

 

 

1. Создаем новый документ 120х60 пикселей (Файл>Новый).


2. Открылся наш документ. Для удобства увеличим масштаб. 


3. Теперь с помощью инструмента Заливка сделаем наш фон черным.


Для этого разблокируем наш фон двойным щелчком мыши 


И используя инструмент Заливка зальем черным цветом.


4. Теперь нарисуем форму нашей кнопки.
Берем инструмент Прямоугольник со скругленными углами и нарисуем нашу форму.



5. Теперь наложим эффектов на нашу фигуру.
Двойным кликом по слою открываем Стиль слоя и идем в пункт Обводка.

6. Затем Внутреннее свечение:

7. И Наложение градиента (#418b35; #9ac838):


8. Теперь дублируем наш слой с фигурой перетащив мышкой, как на рисунке.


9. Теперь открываем Стиль слоя дублеката фигуры и идем в пункт Наложение цвета.
Ставим белый (остальные эффекты остались, т.к. мы скопировали наш слой с эффектами).


10. Затем у копии слоя выставляем Непрозрачность на 50% 


11. Теперь берем инструмент Перо.
Ставим первую точку (одним щелчком) на позиции под номером 1.
Затем ставим вторую точку под номером 2. 
У нас получилась прямая линия.
Затем третью точку ставим на линии и с нажатой клавишей Ctrl двигаем ее на позицию номер 3.
Последнюю точку ставим так же только чуть левее.


12. Затем соединяем наше выделение вокруг изображения.


13. После того, как мы выделили нажимаем правой кнопкой мыши по выделению.
Откроются функции, там выбираем пункт Образовать выделенную область.


14. Откроется окно: там выставляем все, как на рисунке и нажимаем ОК.


15. Теперь наше выделение обвело пунктиром.


16. Далее нажимаем кнопку Delete, что бы очистить все, что выделили.


17. Затем снимаем выделение сочетанием клавиш Ctrl+D.


18. Сейчас мы создадим визуальные детали на кнопке.
Создаем новый слой и называем его линия.


19. Затем выбираем инструмент Прямоугольная область и выделяем вертикальную линию на кнопке.


20. выставляем первый цвет Белый и с помощью инструмента Заливка заливаем наше выделение.
После чего сочетанием клавиш Ctrl+D снимаем выделение.



21. Теперь нарисуем вот такие стрелочки.


22. Для этого выбираем инструмент Произвольная фигура.


И в открывшейся панели выбираем фигуру стрелки и рисуем стрелочку.


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


И в пункт Тень и ставим все, как у меня.


24. Аналогично делаем все тежи эффекты для другой стрелки.


25. Далее напишем текст на кнопке. Пусть будет регистрация (с помощью инструмента Текст).


26. Теперь наложим эффектов на наш слой с текстом.
Вызываем двойным щелчком панель Стиль слоя и идем в пункт Наложение цвета:


27. А затем в пункт Тень:


28. В итоге у нас вышла фот такая стильная кнопка на сайт.


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

Надеюсь, что этот урок вам помог.
Тренируйтесь и играйте цветами и эффектами в программе Adobe Photoshop.

Автор урока: Евгений Айбазов
-------------------------------------------------------------------
Ознакомтесь с моим предидущем уроком Как сделать автарку для сайта, блога или форума.




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


  • 28.08.2012
  •   Просмотров: 13219
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
оксана (15.06.2013 | 11:56)

прекрасный и понятный урок! спасибо

Лариса (12.08.2013 | 21:05)

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



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

Илья (07.09.2014 | 01:13)
Доброе время суток! Кнопка хороша))) Но при нажатии на кнопку delete в пункте 16 выдается вот такая ошибка "Невозможно выполнить запрос содержимое слоя не редактируется" Что именно сделано не правильно?
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по 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
Партнерские ссылки