Открыть меню

Как изменить надпись у кнопки для сайта

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

Работать будем также в сервисе фотошоп-онлайн.

Итог нашей работы будет выглядеть вот так:

Для работы Вы должны загрузить изображение своей кнопки в фотошоп-онлайн.  Как это сделать рассказано вот здесь. После загрузки нужно зайти на вкладку «Слой» и выбрать команду «Новый слой». Таким образом Вы создадите слой, который будет основой всей нашей дальнейшей работы. Его появление Вы сможете проконтролировать в окне «Слои» справа. На скриншоте это хорошо видно. Новый слой добавляется над основным – изображением кнопки.

Далее на панели инструментов выбираете «Выделение прямоугольной области». Этот инструмент выделится голубой рамкой. Теперь в зависимости от изображения вашей кнопки выделите на нем область вокруг старой надписи. Желательно сделать это как можно шире. Можно даже от края до края. В моем случае кнопка имеет тиснение, поэтому я, чтобы сохранить данный стиль изображения, оставил небольшой отступ по краям.

Теперь нужно закрасить выделенную область максимально под цвет кнопки. Если кнопка однотонная, то проблем нет – достаточно просто наложить цвет на выделенную область.

Самый простой способ для этого -  воспользоваться инструментом «Кисть» (1).  Выбираем его также на панели инструментов. Затем ниже на панели кликаем на черном окне диспетчера цветов (2). Сразу после клика появляется окно выбора цвета. В этом окне нужно нажать на изображение картинки «IMG» (3). После этого кликнуть на окне отображение цвета (4) и перенести курсор на изображение кнопки.

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

Сразу после этого вы увидите выбранный цвет в окне отображения цвета и, если всё правильно, тогда нажимаете на кнопку «ДА» (6). Этими действиями мы задали цвет кисти. И теперь только остается, двигая кисть по выделенной области закрасить ее.

При этом предыдущий текст будет скрываться из поля зрения. Не бойтесь немного промахнуться в процессе работы. Ничего страшного не произойдет – цвет не выйдет за границу выделения области. А результат будет налицо.

Теперь все готово для наложения новой надписи. Для этого будем использовать инструмент текст. Выбирайте его и делайте клик на кнопке. Появится небольшой голубой прямоугольник на кнопке и под изображением — окно текста. Ничего не изменяя в этом окне, напишите в поле набора надпись, которая вам нужна. Я написал «Регистрация».

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

Если у вас нет данного шрифта, тогда прочитайте эту статью. Из нее вы узнаете, как установить шрифт и сможете скачать несколько шрифтов. Один из них, как раз тот, про который идёт речь.

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

При необходимости Вы можете изменить размер шрифта, сделать надпись жирной. А вот выравнивание использовать нет смысла. Применительно к кнопке делается это так: выбираете инструмент «Перемещение», наводите курсор на кнопку, делаете клик левой кнопкой мыши и, удерживая ее нажатой, устанавливаете надпись в нужное место.

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

Для этого вы должны на панели инструментов выбрать инструмент «Градиент» (1). Сразу после его выбора вверху над окном изображения появится строка характеристик данного инструмента. Кликните по окну «Градиент» (2).

У вас откроется окно настройки градиента. В нём есть уже предустановленные варианты, но нам они не понадобятся, мы сделаем свой.

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

Соответственно первая метка будет отвечать за нижнюю часть градиента, а вторая — за верхнюю.

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

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

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

Остаётся нанести надпись, как мы это делали выше, и сохранить полученное изображение. По большому счёту в этой работе сложного нет ничего. От вас потребуется только определенное старание и аккуратность в действиях. Сравните сами результаты, которые получились.

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2017 Я блогер — Онлайн-школа Евгения Вергуса · ИП Вергус Е. Е. ОГРН 313618119000022. Копирование контента запрещено.
Служба поддержки  |  Политика конфиденциальности  |  Снятие ответственности