ФотошопСундучок
Начните свой путь в мир ФОТОШОПА сейчас!


БЕСПЛАТНЫЕ РАССЫЛКИ ВКОНТАКТЕ

(более 20 рассылок) 

 

 

Помощь сайту

Понравился сайт? Внесите вклад в его развитие, пожертвовав любую сумму.

Деньги пойдут на оплату серверов и на развитие сайта.

В примечании к платежу, при желании, укажите свои данные.

Меценаты

Присоединяйтесь в

Вход на сайт

Кто на сайте

Сейчас 52 гостей и ни одного зарегистрированного пользователя на сайте

 

 

 

 

 

 

Последние комментарии

Яндекс.Метрика

Создаём красивую градиентную пластиковую кнопку для Вашего сайта

 

Создаём красивую градиентную пластиковую кнопку для Вашего сайта
В этом уроке по работе с фотошопом я покажу как создать красивую пластиковую градиентную кнопку для Вашего сайта.
Откроем новый документ - "Файл - Новый" или просто нажмём Ctrl+N.
В окошке "Новый" выберем параметры, показанные на рисунке и нажмём "Да".
Появится окошко "Без имени-1".
Выберем инструмент "Прямоугольник со спрямлёнными углами".
На панели выберем параметры, указанные на рисунке.
В окне нового документа нарисуем прямоугольник со спрямлёнными углами. В палитре "Слои" появится новый слой с векторной маской.
Добавим стиль слоя - нажмём в палитре "Слои" на иконку "fх" и в появившемся меню выберите "Тень".
В появившемся диалоговом окне "Стиль слоя" вы берите параметры, на которые указывают стрелки, остальные параметры остаются по умолчанию.
Выберем "Внутреннюю тень" и установим параметры, которые показаны на рисунке.
Выберем "Внешнее свечение" и установим параметры, которые показаны на рисунке.
Выберем "Наложение градиента". Изменим градиент, установленный по умолчанию. Для этого щёлкнем по градиенту.
Щёлкнем по левому нижнему маркеру, потом по окну выбора цвета. В окне "Выберите цвет" устанавливаем цвет - 0D4496. Нажимаем "Да".
Щёлкнем по правомунижнему маркеру, выберем цвет - 4c90f6.
Вот такой у нас получился градиент. В окне "Установки" нажимаем "Да".
В окне "Стиль слоя" нажимаем "Да".
Наша кнопка практически готова.
Выделим кнопку. Для этого нажимаем Alt и щёлкаем по миниатюре слоя.
Наша кнопка выделилась.
Выберем инструмент "Овальная область" и режим "Вычитание", как показано на рисунке.
Проведём "Овальной областью" по нашей кнопке, тем самым наполовину уменьшим наше выделение.
Вот такое выделение у нас получилось.
Создадим новый слой - щёлкнем по второй справа иконке в палитре "Слои".
Выберем инструмент "Заливка" (G).
Основной цвет установим белый.
Щёлкнем заливкой по выделенной области, она зальётся белым цветом.
Снимаем выделение - Ctrl+D.
Уменьшим непрозрачность верхнего слоя примерно до 7%.
Вот такая симпатичная пластиковая или градиентная кнопочка у нас получилась.
Выберем инструмент "Текст" (Т) и напишем необходимое нам слово, к примеру - скачать. Уменьшим непрозрачность текстового слоя примерно до 80%.
Сольём все слои - Shift+Ctrl+E.
Теперь создадим отдельный jpg-файл для нашей кнопки. Для этого выберем "Прямоугольное выделение" и выделим нашу кнопку.
Скопируем наше выделение - Ctrl+C.
Создадим новый документ - "Файл - Новый" или просто нажмём Ctrl+N.
Появится окно "Новый". Так как мы скопировали нашу кнопку в буфер обмена, то программа автоматически установит параметры скопированной области в новом документе. Поэтому в окне "Новый" мы просто нажимаем "Да".
Вставляем нашу кнопку в новый документ "Безимени-2" - Ctrl+V.
Вот так, в ходе обработки фотографии в фотошопе, мы создали красивую пластиковую градиентную кнопочку.

В этом уроке по работе с фотошопом я покажу как создать красивую пластиковую градиентную кнопку для Вашего сайта.



{smooth-scroll-top}

 

Создадим новый документ - "Файл - Новый" или просто нажмём Ctrl+N.




В окошке "Новый" выберем параметры, показанные на рисунке и нажмём "Да".




Появится окошко "Безимени-1".




Выберем инструмент "Прямоугольник со скруглёнными углами".




На панели выберем параметры, указанные на рисунке.




В окне нового документа нарисуем прямоугольник со спрямлёнными углами. В палитре "Слои" появится новый слой с векторной маской.




Добавим стиль слоя - нажмём в палитре "Слои" на иконку "fх" и в появившемся меню выберем "Тень". Не забудьте перейти с маски слоя на сам слой.




В появившемся диалоговом окне "Стиль слоя" выберите параметры, на которые указывают стрелки, остальные параметры остаются по умолчанию.




Выберем "Внутреннюю тень" и установим параметры, которые показаны на рисунке.




Выберем "Внешнее свечение" и установим параметры, которые показаны на рисунке.




Выберем "Наложение градиента". Изменим градиент, установленный по умолчанию. Для этого щёлкнем по градиенту.




Щёлкнем по левому нижнему маркеру, потом по окну выбора цвета. В окне "Выберите цвет" устанавливаем цвет - 0D4496. Нажимаем "Да".




Щёлкнем по правому нижнему маркеру, выберем цвет - 4c90f6.




Вот такой у нас получился градиент. В окне "Установки" нажимаем "Да".




В окне "Стиль слоя" нажимаем "Да".




Наша кнопка практически готова.




Выделим кнопку. Для этого нажимаем Alt и щёлкаем по миниатюре слоя.




Наша кнопка выделилась.




Выберем инструмент "Овальная область" и режим "Вычитание", как показано на рисунке.




Проведём "Овальной областью" по нашей кнопке, тем самым наполовину уменьшив наше выделение.




Вот что у нас осталось.




Создадим новый слой - щёлкнем по второй справа иконке в палитре "Слои".




Выберем инструмент "Заливка" (G).




Основной цвет установим белый.




Щёлкнем заливкой по выделенной области, она зальётся белым цветом.




Снимаем выделение - Ctrl+D.




Уменьшим непрозрачность верхнего слоя примерно до 7%.




Вот такая симпатичная пластиковая градиентная кнопочка у нас получилась.




Выберем инструмент "Текст" (Т) и напишем необходимое нам слово, к примеру - скачать. Уменьшим непрозрачность текстового слоя примерно до 80%.




Сольём все слои - Shift+Ctrl+E.




Теперь создадим отдельный jpg-файл для нашей кнопки. Для этого выберем "Прямоугольное выделение" и выделим нашу кнопку.




Скопируем наше выделение - Ctrl+C.




Создадим новый документ - "Файл - Новый" или просто нажмём Ctrl+N.




Появится окно "Новый". Так как мы скопировали нашу кнопку в буфер обмена, то программа автоматически установит параметры скопированной области в новом документе. Поэтому в окне "Новый" мы просто нажимаем "Да".




Вставляем нашу кнопку в новый документ "Безимени-2" - Ctrl+V.




Вот так, в ходе работы с фотошопом, мы создали красивую пластиковую градиентную кнопочку.



{smooth-scroll-top}

 

 

Печать

Комментарии  

Татьяна
0 # Татьяна 21.03.2012 20:51
Спасибо, очень подробно и понятно! :-)
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 27.01.2012 03:54
:woohoo: :woohoo: :woohoo:
То что надо))
Ответить | Ответить с цитатой | Цитировать
Аркаша
0 # Аркаша 16.11.2011 22:55
ПРОСТО СУПЕР !!!
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 06.04.2011 04:43
:evil: :s :huh:
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 15.03.2011 17:17
Спасибо!!!!! :D :-)
Ответить | Ответить с цитатой | Цитировать
Павел
0 # Павел 12.12.2010 21:16
очень хороший урок все так подробно.
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 04.12.2010 16:50
Спасибо!!! :cheer: очень хороший урок:-)
Ответить | Ответить с цитатой | Цитировать
Марина
+3 # Марина 19.07.2010 23:19
большое спасибо за этот урок,
нужно было срочно кнопку нарисовать, а в фотошопе не очень хорошо умею работать.
а это очень подробный и хороший урок.
еще раз, большое спасибо!
Ответить | Ответить с цитатой | Цитировать
73PH_adminv15
0 # 73PH_adminv15 27.08.2010 04:09
Не за что!
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

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


Прикрепить фотографии