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

 

 

 

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

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

 

 

Помощь сайту

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

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

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

Меценаты

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

Вход на сайт

Профиль

Кто на сайте

Сейчас на сайте 32 гостя и 1 пользователь

  • ertyh5

 

 

 

 

 

 

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

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

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

 

Создаём красивую градиентную пластиковую кнопку для Вашего сайта
В этом уроке по работе с фотошопом я покажу как создать красивую пластиковую градиентную кнопку для Вашего сайта.
Откроем новый документ - "Файл - Новый" или просто нажмём 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 05.04.2011 23:20
:s :s :-x :-)
Ответить | Ответить с цитатой | Цитировать
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
большое спасибо за этот урок,
нужно было срочно кнопку нарисовать, а в фотошопе не очень хорошо умею работать.
а это очень подробный и хороший урок.
еще раз, большое спасибо!
Ответить | Ответить с цитатой | Цитировать
Олег
0 # Олег 27.08.2010 04:09
Не за что!
Ответить | Ответить с цитатой | Цитировать

Понравилось? Поделитесь:

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

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


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

Популярные уроки сайта:

Prev Next

Дрожащая анимация в ф…

Уроки анимации в фотошопе

Дрожащая анимация в фотошопе   Всем привет! Сегодня мы будем создавать анимацию дрожащего текста. Сначала мы создадим новый документ и зальем фоновый слой черным цветом. Затем установим шрифт из папки с исходниками и напишем текст...

Читать далее

Как перенести тень вм…

Видеоуроки

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

Читать далее

Фотомонтаж в Photoshop. Ва…

Обработка фотографий в фотошопе

  Фотомонтаж в Photoshop. Вариант №1 Как качественно отделить сложный объект от фона, перенести его на новую картинку и грамотно вписать в новое окружение   Этот мини-курс посвящен фотомонтажу. Мы с Вами объединим две картинки. Но...

Читать далее

Создание масок из кан…

Видеоуроки

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

Читать далее

Как сделать стекающий…

Уроки фотошопа текст

Как сделать стекающий текст в фотошопе   Всем привет! Сегодня мы будем создавать стекающий текст. Стекающий текст выглядит довольно необычно. Эффект стекающего текста вы сможете использовать в своих работах как с материалами из папки...

Читать далее

Как улучшить картинку…

Видеоуроки

  Видео урок Как улучшить картинку формата Jpeg Когда мы создаем коллаж или делаем какой-либо монтаж, довольно большой проблемой является подбор необходимых картинок. Для того чтобы выбрать нужные снимки, мы часто заходим на...

Читать далее

Яркий логотип в фотош…

Уроки рисования в фотошопе

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

Читать далее

Как сделать светящийс…

Уроки фотошопа текст

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

Читать далее

Коррекция контровых ф…

Обработка фотографий в фотошопе

Коррекция контровых фотографий в фотошопе. Метод №1 Контровая фотография – это такой момент съёмки, когда источник света находится позади снимаемого объекта. В результате можем получить проработанный передний план и «убитый» задний, или наоборот. В целом...

Читать далее

Коррекция контровых ф…

Обработка фотографий в фотошопе

Коррекция контровых фотографий в фотошопе. Метод №2 Продолжаем тему работы с тенями и светами, применительно к коррекции контровых фотографий. Первый урок здесь: https://www.photoshopsunduchok.ru/uroki/fotograf/5427-kontrovykh-fotografij Мы с Вами остановились на том, что выяснили, что метод, изложенный в 1-м...

Читать далее

Рождественская откры…

Уроки рисования в фотошопе

  Рождественская открытка для фотошопа   Всем привет! Сегодня мы будем рисовать открытку к Рождеству. Рождество – светлый семейный праздник, которого с нетерпением ждут и дети, и взрослые. Существует много прекрасных традиций, приуроченных к этому...

Читать далее

Новогодние пресеты дл…

Обработка фотографий в фотошопе

  Новогодние пресеты для фотошопа У нас продолжается Новогодняя неделя и вскоре мы будем праздновать Старый Новый год! :-) В связи с этим решил подарить Вам 8 пресетов (стилей, 3D лутов) для раскрашивания...

Читать далее

Мини-курс «Обработка …

Обработка фотографий в фотошопе

Мини-курс «Обработка контровой фотографии» Продолжаю серию мини-курсов по обработке фотографий. Напомню, что мы с Вами рассмотрели различные варианты работы с яркой солнечной фотографией: разбитой на темную и светлую половину пейзажной пейзажной с большим количеством водных...

Читать далее

Анимация мигающие ого…

Уроки анимации в фотошопе

Анимация мигающие огоньки в фотошопе   Всем привет! Сегодня мы будем создавать анимацию свечения огоньков на елочке. Огоньки на елке добавляют самому любимому празднику детей и взрослых, Новому Году, еще больше волшебства. Мы попробуем погрузиться...

Читать далее

Подготовка темного фо…

Видеоуроки

  Видео урок Подготовка темного фото кобработке в фотошопе  Практически любая обработка фотографии, будь то методика Дэна Маргулиса или просто классическая обработка снимка, должна начинаться с устранения посторонних проблемных цветов с изображения. Но, если...

Читать далее

Команда «Выделение и …

Видеоуроки

  Видео урок Команда «Выделение и маска» в фотошопе В этом уроке применим возможности команды «Выделение и маска» для того, чтобы вырезать нужный объект на фотографии. Заодно рассмотрим какие новые функции появились у этой...

Читать далее

Обои со снежинками в ф…

Уроки рисования в фотошопе

  Обои со снежинками в фотошопе   Всем привет! Сегодня мы будем рисовать новогодние обои для рабочего стола – со снежинками. Вот и наступила зима! Какой она будет – морозной и снежной или теплой и мягкой?...

Читать далее

Замена неба в фотошоп…

Видеоуроки

  Видео урок Замена неба в фотошопе В последних версиях фотошопа появились отдельные интересные функции по выделению объектов. В частности, мне понравилось, как работает команда «Замена неба». Поэтому записал два урока. В первом уроке рассмотрим эту...

Читать далее

Новогодняя открытка в…

Уроки рисования в фотошопе

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

Читать далее

Инструмент Быстрая ма…

Обработка фотографий в фотошопе

  Инструмент Быстрая маска в фотошопе   Всем привет! Зима, холодно, а хочется тепла, моря и романтики. В сегодняшнем нашем уроке "Инструмент Быстрая маска в фотошопе" мы с вами создадим красивую романтичную картинку...

Читать далее

Как сделать новогодни…

Уроки рисования в фотошопе

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

Читать далее

Инструмент трассиров…

Обработка фотографий в фотошопе

  Инструмент трассировка в фотошопе   Всем привет! Продолжаем рассматривать новые возможности программы Adobe Photoshop (версия 22.0). В этой версии программы появилась интересная возможность обычным пользователям наравне с бета-тестировщиками испробовать новые инструменты. Давайте...

Читать далее

Как нарисовать штрих-…

Уроки рисования в фотошопе

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

Читать далее

Текст пунктиром в фот…

Уроки фотошопа текст

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

Читать далее

Как сделать текстуру …

Уроки рисования в фотошопе

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

Читать далее

Pro-экшены. Как ускорит…

Видеоуроки

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

Читать далее

Медная текстура в фот…

Уроки рисования в фотошопе

  Медная текстура в фотошопе   Всем привет! Сегодня мы будем рисовать медную текстуру. Этот урок примечателен тем, что нам не понадобятся исходники или готовые текстуры. Весь процесс будет происходить с нуля. Сначала мы создадим новый квадратный документ и применим...

Читать далее

Соглашение / Оферта
Автор сайта: Накрошаев Олег, Все права защищены Copyright, © 2009-2020