Как можно сделать красивые кнопки для сайта?
В процессе создания сайта встает вопрос о добавлении всевозможных графических элементов в его дизайн. Это могут быть баннеры, фон страницы, красочные кнопки управления. Но что делать, если вы не обладаете должными дизайнерскими навыками? Вам помогут онлайн сервисы, с помощью которых можно сделать кнопки для сайта в режиме онлайн.
Оглавление:
Сервис cooltext
Первым в нашем списке идет вот этот сайт:
http://cooltext.com/
Давайте с его помощью сделаем красочную кнопку "Скачать". Переходите на главную страницу сервиса.
Здесь вы увидите список возможных вариантов оформления. Выберите подходящий, и щелкните на него. Откроется страница для редактирования.
Нам нужно указать все необходимые параметры для изображения. Давайте последовательно пройдем по всем пунктам.
- Logo text. Здесь нужно ввести текст, который вы хотите видеть на кнопке. Мы набираем "Скачать".
- Font. Этот параметр отвечает за шрифт. Если вам не нравится тот, который указан для этого стиля по умолчанию, вы можете изменить его.
- Text size. Размер шрифта - можете изменить его. Мы оставили стандартные "70"
- Use gradient. Данная опция позволяет использовать градиент в цветовом оформлении кнопки. Если вы хотите применить его, поставьте эту галочку. Дальше вам нужно отметить стиль градиента, и его направление (галочка "horizontal").
- Outline color. Выбирайте цвет для рамки, которая будет отображаться вокруг кнопки.
- Outline width. И задавайте ее ширину.
- Shadow Type. Включение и выбор режима тени.
- Shadow Offset. Размер тени по горизонтали и вертикали соответственно.
- Shadow Color. А здесь мы зададим цвет тени для кнопки, и процент ее прозрачности.
- Alignment. Выравнивание текста относительно блока.
- Image Width&Height. Ширина и высота кнопки.
- File Format. В каком формате сохранить кнопку.
Пройдите все пункты, и установите нужные параметры. После этого вам следует нажать кнопку Create Logo. Вы перейдете на страницу результатов. Здесь можно скачать кнопку - нажмите "Download image". Если результат вас не устроил, вы можете вернуться на страницу редактирования. Для этого используйте пункт "Edit image".
У нас получилась вот такая кнопка.
Сервис Da Button Factory
Еще один удобный инструмент, который попал нам на анализ. Заходите на главную страницу сервиса.
https://dabuttonfactory.com
Вы увидите предлагаемый конструктор.
В этот раз мы создадим кнопочку "Регистрация". Она тоже очень часто используется на сайтах.
Процесс аналогичен. Нам нужно последовательно указать все параметры, и скачать готовый файл. Давайте начнем.
- Text. Здесь мы снова вводим желаемый текст для кнопки. На этот раз мы пишем "Регистрация".
- Font. Выбираем шрифт. Мы оставили стандартный "Calibri". Можно сделать шрифт жирным - поставьте галочку "bold", или с курсивным начертанием - галочка "italic"
- Size. Размер шрифта.
- Color. Его цвет.
- Text shadow. И снова тень для текста. Если вы отметите эту галочку, она будет отображаться у надписи на кнопке. Нужно будет указать размер "Distance", и цвет "Color".
- Size. Размер кнопки. Выбираем фиксированные параметры - пункт "Fixed". В полях "Width" и "Height", задаем ширину и высоту соответственно.
- Style. Внешний вид кнопки. Можно выбрать прямоугольную, с закругленными краями и овальную. Мы оставили прямоугольный вариант - пункт"rectangular box".
- Background. Параметр цвета для кнопки. Мы оставили единый цвет "unicolored".
- Border. Рамка для кнопки
- Shadow. Тень для кнопки.
После того, как вы полностью настроили свою кнопку, выбирайте тип готового файла. Для этого в центре экрана есть выпадающий список. После этого просто щелкайте на кнопку указателем мыши, и вызывайте контекстное меню. Затем щелкайте пункт "Сохранить изображение как", и выбирайте папку, в которую вы хотите сохранить готовую кнопку.
У нас получилось вот что.
Видео к статье:
Заключение
Таким образом, вы сможете сами создавать несложные элементы дизайна - логотипы, кнопки и тд. Нет необходимости прибегать к дорогостоящим услугам дизайнера. Если вы планируете создать небольшой сайт, то подобной графики вполне будет достаточно.
Наши рекомендации
Самые популярные теги в инстаграм.
Как очистить кэш браузера гугл хром.
Стоит почитать
Зачем искать информацию на других сайтах, если все собрано у нас?