"КЕЙС НОВИЧКА" - создание кнопки без использования Photoshop

Всем привет!

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

Конечно, сейчас есть масса сервисов, с помощью которых можно создать кнопку, но я вам предлагаю один из самых простых и наглядных: Cool Text.

Там есть уже готовые варианты оформления текста:

Можно воспользоваться одним из них, лишь изменив содержание надписи. Или можно полностью смоделировать свою картинку.

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

Рассмотрим вариант уже готового текста:

В поле Logo Text / Add Symbol вводим свой текст. Тут есть одна особенность, шрифты в основном на латинице, поэтому кириллица будет иметь самый простой вид или отображаться некорректно.

В этой же вкладке Text можно изменить размер и начертание шрифта. А в сдедующей вкладке Image нужно просто выбрать необходимый формат файла File Format из предложенных в выпадающем списке вариантов:

• Для текста с прозрачным фоном стоит выбрать формат png.
• Для картинки подойдут форматы png и jpg.
• А для анимированного изображения нужен формат gif.

Для данного примера необходим формат png.
И остаётся последний штрих, нажать на кнопку Create Logo и скачать файл Download. Зарегистрированные пользователи могут получить готовый для вставки HTML код:

<a href="https://cooltext.com"><img src="https://images.cooltext.com/5038786.png" width="652" height="183" alt="Liga Novi4kov" /></a>
<br />Image by <a href="https://cooltext.com">Cool Text: Free Logos and Buttons</a> - <a href="https://cooltext.com/Edit-Logo?LogoID=2635578690">Create An Image Just Like This</a>

Или ссылку на изображение Permanent Image Address:

Рассмотрим ещё один вариант.

Здесь есть возможность значительно изменить вид текста:

Как видите, появилось больше вкладок.
Во второй вкладке Logo пожно изменить цвет текста Text Color, обводку Text Opacity, текстуру обводки Pattern и форму Follow Shape. После простых манипуляций получилось так:

Теперь переходим во вкладку Shadow.
Здесь можно выбрать наиболее приглянувшийся вам вид тени Shadow Type, задать её смещение Shadow Offset X, выбрать цвет Shadow Color и непрозрачность тени Opacity.

Далее во вкладке Image настраиваем выравнивание Alignment, выбирая необходимое из выпадающего списка. Настраиваем ширину и высоту изображения в пикселях. И тоже выбираем нужный формат File Format. Тут настройки по умолчанию обычно заданы подходящие, поэтому дополнительно можно ничего не менять.

Теперь, если вам нравится полученный результат, жмите кнопку Create Logo и скачивайте или сохраняйте ссылку на изображение, как описано выше.

Теперь вашу картинку необходимо превратить в кнопку. Для этого следует вставить ссылку таким образом:

 [![](https://images.cooltext.com/5038786.png)](href="https://golos.io/created/vp-liganovi4kov")

[![](ссылка на изображение)](href="адрес страницы для перехода по ссылке")

На этом обзор сервиса окончен. Пользуйтесь с удовольствием!

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

Для вас старалась: @lumia