Создаём красивую градиентную пластиковую кнопку для Вашего сайта
В этом уроке по работе с фотошопом я покажу как создать красивую пластиковую градиентную кнопку для Вашего сайта.
Откроем новый документ - "Файл - Новый" или просто нажмём 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.
Вот так, в ходе работы с фотошопом, мы создали красивую пластиковую градиентную кнопочку.
большое спасибо за этот урок, нужно было срочно кнопку нарисовать, а в фотошопе не очень хорошо умею работать. а это очень подробный и хороший урок. еще раз, большое спасибо!
Временно закрыто комментирование для гостей, нужна обязательная регистрация, ввиду засилья спамботов. зарегистрируйтесь на сайте, что бы оставлять комментарии!
Комментарии
То что надо))
нужно было срочно кнопку нарисовать, а в фотошопе не очень хорошо умею работать.
а это очень подробный и хороший урок.
еще раз, большое спасибо!