Как создать или как сделать демотиватор

Всем доброго здравия, как отгремели праздники? Всех еще раз с прошедшими праздниками. А теперь давайте о деле. Сегодня я хочу рассказать о том, как сделать такие красивые картинки, которые я начал делать с недавних пор. Дело в том, что мне показалось не красивым представление анонса статьи в виде картинки 200х200, надо что-то более емкое, тем более все чаще на блогах можно встретить картинки с тематическими подписями, не в виде описания к картинке а именно надпись на самое картинке. Все чаще стали появляться самодельные Демотиваторы как анонс к статьям.

А все на самом деле началось с интервью. С интервью с автором блога blognat.ru. Именно его блог заинтриговал меня картинками такого рода, хотя я видел подобное еще на некоторых ресурсах.

Мне очень понравился такой подход по нескольким причинам:

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

- Кроме информационной составляющей (пользователь понимает о чем статья), красивые демотиваторы придают некоторый лоск вашему блогу. Он становиться красивее. Пользователь начинает смотреть блог как комикс, выбирая интересные моменты именно по картинкам. Где красивее - тому внимание уделяется побольше.

- Уникальность изображений. Ведь получившаяся картинка - уникальна. Больше такой нигде нет. В результате уникальности картинок на вашем блог - вы, а точнее ваши картинки будут востребованы и эти картинки будут чаще просматриваться пользователями. Вы ведь не раз уже ходили по картинкам из Гугла или Яндекса?

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

Как создать демотиватор своими руками

Создать демотиватор, как оказалось, не так сложно. Есть несколько он-лайн сервисов.

- собственно самый простой способ — создать демотиватор с помощью сайта demotivators.ru. Там все итак понятно, но я все-таки обьясню.

• I этап:
  - Загрузили
  - Выбрали тип будущего демотиватора, я всегда оставляю «Обычный».
  - Согласились с правилами.
• II этап:
  Мы уже видим загруженное изображение и нам нужно только
  - заполнить заголовок изображения
  - текст под изображением
  - нажимаем на «Предпросмотр»
• III этап:
  Смотрим на то что получилось, редактируем по необхдодимости, добавляем на сайт по необходимости или просто скачиваем себе на компьютер.

- Есть еще один способ — создать интересный демотиватор с помощью программы MotivatorMaker, скачать её, кстати, .

вставили описание, комментарий и нажали на кнопку. Все, больше делать то ничего и не нужно. Программа сделает все за вас. А в итоге, обоими способами мы получим одну и ту же картинку:

Отличие первого способа от второго в том, что создание демотиватора с помощью сервиса demotivators.ru проходит на самом сайте, вам ничего не нужно устанавливать. Но и из-за этого сервис ставит на полученные изображения свой знак «demotivators.ru» под картинкой.

И еще могу порекомендовать еще один нужный онлайн сервис для закругления углов в картинках — думаю некоторым он окажется очень полезным и нужным — roundpic.com

Принцип действия простой. Вы просто «скармливаете» скрипту свою картинку, вставляете описание и подпись к картинке и вуа-ля — демотиватор готов. Кроме таких сервисов есть также отдельный софт для создания демотваторов нужного нам уровня. Принцип действия такого софта ничем не отличается от принципа дейтвия скриптов. По-моему это, кстати, один из не многих случаев, когда софт писался по аналогу скрипта.

Как сделать демотиватор в фотошопе

Предыдущие способы хороши тем что не требуют от вас больших усилий и знаний, но все-таки некоторые вещи нужно знать, чтобы делать качественный продукт. Ваш блог — это качественный продукт? Конечно! Поэтому нужно сделать его качественно красивым, да и вообще, по хозяйству, базовые знания фотошопа еще никому не помешали. Итак. Скачали и установили фотошоп. Что делать дальше?

Определяем размер демотиватора и создаем рабочее поле

Задача первая — узнать какой максимальной ширины может быть ваша картинка на вашем блоге, чтобы не портить всю картину. Я делал это эксперементальным методом. Залил картинку на сайт — посмотрел как смотриться, увеличил, уменьшил, обновил — посмотрел как смотриться. Так я понял что максимальная ширина моих картинок может быть 600 пикселей. А значит, чтобы создать демотиватор для себя — я должен создавать картинку, шириной 600 пикселей. Но что делать с высотой? Не долго думав, я прикинул, что нормальный демотиватор будет примерно 600х400 или 600х300 и так же методом «научного тыка» смотрел как будет лучше смотреться на моем блоге. В итоге получилось то что получилось (600х300).

Чтобы создать картинку с таким размером, мы просто должны в фотошопе нажать «Файл — Новый» или комбинацию клавиш «CTRL+N». В появившемся окне нас не интересуют никакие настройки кроме размера, там и выставляем 600х300 пикселей.

Подбираем картинки, подбираем размер, работаем со слоями

Итак, мы определились с размером, сейчас нам нужно создать какой-то «шаблон», чтобы в будущем нам пришлось, только изменять картинку в демотиваторе и подпись. Для этого нам нужно будет поработать со слоями.

Итак, первое что нам нужно сделать — заливаем наш документ каким-нибудь цветом, например черным. Далее выбираем «выделение области» и выделяем всё наше поле. Далее выбираем «Редактирование — Свободное трансформирование» и потягивая за края выделенной области — уменьшаем её так, чтобы слева, справа и сверху было примерно одинаковое расстояние, а снизу было расстояние побольше. Снизу нужно расстояние побольше специально для того, чтобы поместилась надпись.

После наших манипуляций нужно нажать на любую кнопку на панели инструментов — тогда появится окошко с вопросом «применить ли такое трансформирование?» Отвечаем «ДА».

Теперь нужно область, которую мы окрасили в черный цвет стереть. Для этого выбираем инсрумент «Волшебный ластик» и просто нажимаем на область с черным цветом в любое место. И сразу видим клетчатый рисунок. Не забываем выбрать инструмент «Заливка» и залить черным цветом белую(!) область, т.е. в нашем случае это уже контур нашей картинки.

Итак, один слой у нас готов. Теперь нажимаем на кнопку «Добавить слой». На этом слое у нас будут картинки. Все картинки я беру из Яндекс.Картинки и Google.Images . т.е. из общедоступных источников. Выбрали картинку, подходящую по размеру и тематике и вставили в наш рисунок, на наш слой, который мы только что создали. И вот что у нас получилось.

Вот в принципе и все, я конечно, понимаю, что для новичков это не совсем понятное объяснение, возможно новички не сразу все поймут Если у вас будут какие-то вопросы , вы сразу пишите мне — я с радостью отвечу вам. Если кто не знает моих контактов, можно связаться через форму обратной связи на странице «обо мне»

Еще пару слов: мы сделали демотиватор с помощью фотошопа, он получился довольно симпатичный. Но как быть если вы хотите добавить эффектности, допустим, шрифту? Я раньше думал что чтобы сделать карсивый и эффектный шрифт — нужно быть мега профессионалом. Оказывается нет. Есть классная коллекция шрифтов, можно просто скачать шрифт и использовать его в фотошопе. Только и всего.

Вот вам некоторые коллекции красивых шрифтов. Выбирайте и пользуйтесь.

fontov.net
ifont.ru
dejurka.ru/graphics/grunge-fonts
azfonts.ru/top100.html
font-cat.com

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

Если вы совсем не в курсе как пользоваться такой программой как Photoshop — рекомендую изучить следующие курсы.

• Photoshop для онлайн бизнесмена
• Видеопродажник

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

monetablog