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


Всем привет!

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

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

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

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

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

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

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

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

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

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

Liga Novi4kov
<br />Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This

Или ссылку на изображение 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 и скачивайте или сохраняйте ссылку на изображение, как описано выше.


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

 

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



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




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


Comments 14


@lumia
Круто! Спасибо, Мила, возьму на вооружение твой кейс!)

25.10.2017 16:59
0

Спасибо, @aurus! Рада стараться )

25.10.2017 17:13
0

ой какая замечательная программка! прямо хочу пойти сделать себе кнопочку такую! очень красивые кнопочки!

25.10.2017 17:03
0

Да, Наташ, интересно по перебирать там кнопочки, пробуй обязательно )

25.10.2017 17:16
0

сделаю себе чтонить красивенькое. а то на такие полноценные кнопочки как у тебя мне тяму не хватает ))

26.10.2017 22:26
0

Спасибо, полезная информация!

25.10.2017 17:15
0

Пожалуйста, пользуйтесь, @santa-barbara!

25.10.2017 17:18
0

миль пардон, дамы. я про старое - не могу найти ссыль на то как шаблон для поста сделать. нет ли у вас в анналах?

25.10.2017 17:57
0

@marcosorte, чтобы найти другие шаблоны, можно перейти по навигационному тегу или через кнопку в меню:

Ещё можно воспользоваться ботом-инструктором, в котором собраны все ссылки на обучающие материалы:

Вот шаблон поста: /vp-liganovi4kov/@vp-liganovi4kov/novaya-rubrika-keis-novichka-prostoi-shablon-posta-v-razmetke-markdown и ещё как сохранить этот шаблон в браузере Google Chrome: /ru--prilozheniya/@dobryj.kit/rasshirenie-dlya-google-chrome-shablony

26.10.2017 12:57
0

спасибо!))

26.10.2017 13:02
0

как полезно, буду использовать на steemit !

25.10.2017 17:58
0

спасибо, как раз то,что искал

29.10.2017 12:46
0