Иногда расстаюсь с вещами с помощью популярного интернет-сервиса — «Авито». Если продаю хорошую вещь, то рассказ сам по себе складывается в замечательную историю. Вот пример.

Задача: продать старую стиральную машинку

Результат: продал стиральную машинку за час

Моя старушка

Довольный клиент :)

Нудный редактор доебётся: почему «69х40х82», а не «69 × 40 × 82». Так вышло

В объявлении всё по феншую. Рассказал историю вещи — есть, одобрение специалиста — есть, причина продажи — есть, чёткое описание преимуществ — есть, целевая аудитория — есть, забота — есть.

История закончилась забавно. Приехала тётя с дядей за 50. Заявили, что готовы торговаться. Я морально был готов скинуть рублей 500, но они скромно предложили скинуть 100 ₽, «потому что старая уже». Договорились.

После чего тётя заботливо взвалила машинку на себя и сама понесла к лифту, а затем и к машине. Дядя посмотрел на меня и оправдался, что ему нельзя поднимать тяжести. Прелестно.

На сладкое

А вот второй пример с суперчестным подходом, который тоже сработал. Накипело — вывалил. Продал монстра за час.

Этот Асус приходит ко мне в кошмарах и ест моих нерожденных детей

Красным подчеркнул фразу, чтобы твоё внимание зацепить

Замечательная Альбина попросила придумать мем про аббревиатуры. Я решил помочь, а заодно рассказать, как делаю сюжетные или киногифки.

Я хотел сделать картинку, но в голове всплыл отрывок из комедии «Брюс всемогущий»: Джим Керри издевается над коллегой, заставляя его говорить всякую ересь в прямом эфире.

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

Показываю по шагам, как монтировал гифку

Вот так выглядит готовый смонтированный отрывок в Final Cut.

От идеи до финальной версии — ≈4 часа

А теперь сначала и по порядку

Шаг 1. Отрывок записываю через Quick Time и бросаю его в Final Cut. Просматриваю видео и вырезаю всё лишнее с помощью инструмента Blade (В)

Остаётся семь кусков. Буду их переставлять, замедлять, ускорять и резать

Шаг 2. Добавляю чёрные прямоугольники, чтобы перекрыть текст на экране. На них размещу свой текст

Чёрный квадрат делаю в Фотошопе и сохраняю в формате .PNG

Буквы можно редактировать как угодно, и это я ещё не использовал анимацию и эффекты

Шаг 3. Добавляю титры. Их в Final Cut на любой вкус и настроек у каждого вида свои

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

Второй увеличенный отрывок. Здесь использовал вид титров Scrolling. Проблема, что они движутся снизу вверх. Поэтому для правой стороны сделал Reverse

Вот так выглядит Scrolling без редактирования

Третий отрывок. Здесь использовал вид титров Drifting. Для каждой фразы менял шрифт и направление «полёта»

Вот так выглядит Drifting без редактирования

Шаг 4. Теперь мне важно сделать переход от основного видео к финальной замедленной части. Идею своровал (как художник, естественно) из социальных видео, которые в конце замедляются на душераздирающих кадрах.

Ещё финальные кадры замедлил со 100 до 25% и добавил шуточку для внимательных :)

Если сделать резкий переход, то получится не очень красиво. Поэтому для плавных переходов подключаю силы программы.

Сравните левый и правый экраны: резкий переход слева всё портит

Поэтому я добавил для перехода эффект — Cross Dissolve, а в конце эффект затемнения — Fade to Color

Шаг 5. Видео сохраняю на компьютер

Шаг 6. Записываю гифку с помощью проги GIF Brewery 3, немного редактирую результат и сохраняю

Шаг 7. Уменьшаю размер гифки на сайте Gifcompressor. Я любую гифку пропускаю через компрессор

Готово!

Кто-то скажет:

— Что-та слишком сложно! Проще вариантов нет?

— Конечно, есть.

Способ раз. Обратиться ко мне, я помогу, придумаю, реализую.

Способ два. Необязательно упарываться в Final Cut. Можно использовать обычную программку для создания гифок, например GIF Brewery 3, и в ней же добавить текст. Как это делать, рассказывал в статье Как редакторам и авторам просто создавать гифки и другую анимацию.

Например, вырезаю нужный кусок из фильма и творю. Получается быстро и весело.

Фильм «Кровь и бетон» (1991)

Примеры сюжетных гифок для FFC Media

Первые сюжетные гифки я делал для FFC Media — журнал о блокчейне. Главред журнала Алексей Березовой предложил мне обыгрывать с помощью гифок новости и статьи. Решили, что отлично сработают отрывки из фильмов с наложенным текстом. Приведу примеры.

Джеффри Бернс — американский юрист‐миллиардер сообщил миру о создании города на блокчейне
«12 стульев» (1976)

Элла Памфилова призналась, что слова «избирательный ящик» и «избирательная урна» наводят её на мысли о смерти. Памфилову понесло, и она предложила провести ребрендинг слова «блокчейн»
«Аэроплан» (1980)

Генеральный директор «Норильского Никеля» Владимир Потанин собирается разработать собственную криптовалюту
«Иван Грозный» (1944)

Герман Оскарович хочет организовать свою криптовалютную биржу, на которую сгонит всех своих клиентов и будет грести комиссионные лопатой
«Удача Логана» (2017)

Жадность не порок думают создатели биржи Bitfinex и вливают на биржу миллионы USDT, чтобы манипулировать биткоином

Авторитетный американский экономист Нуриэль Рубини, весь такой в белом пальто, просветил нас про крипту с трибуны Сената
«Кавказская пленница» (1966)

Китайский крипто-миллионер Сун купил пиринговую сеть BitTorrent
«Король Лир» (1971)

В начале этого года у PR‐консультанта Майкла Терпина сперли 3 миллиона криптомонет на сумму 22 млн долларов США
«Голый пистолет» (1988)

Сказ про то, как Блохчейн всех победит
«Безумный Макс» (2015)

Одна из первых гифок — бессюжетная. Хотел, чтобы внизу титры кратко рассказывали новость, а в это время на экране что-то происходило.
«Разборки в стиле Кунг-Фу» (2004)

Сюжетные гифки вовлекают аудиторию!

В комментариях к прошлой статье о гифках были такие комменты

Статья в группе «Церебро Таргет»

Я меня нет ответа, хотя я интуитивно понимаю, что гифки — это весело и даже вирусно.

Но может комментарий от главреда FFC Media Алексея поможет сделать определённые выводы:

«Мы начали использовать гифки, чтобы увеличить вовлечение аудитории в соцсетях. Этот инструмент свою задачу выполнил. Мы увидели прирост подписчиков после каждого поста и расшары, чего не наблюдалось при постинге обычных текстовых форматов. Более того, время проведённое читателями на сайте, во время компании по производству гифок выросло примерно на 20%».

И ещё один комментарий от Алексея из поста в Фейсбуке

«Брюс всемогущий» (2003)

P. S. Я ещё вещаю о кино в телеге — подписывайся ;)

И подписывайся на Дети Клода Шеннона — полезный канал редакции Эвотора и журнала «Жиза».

Спонтанный пост добра, но не претензий, или как правильно копировать чужой труд.

Популярная в некоторых кругах группа «Церебро Таргет» почти на 200 000 человек опубликовала у себя мою статью. Об этом мне написали в редакторском чатике в телеге, иначе я бы и не узнал. Я обрадовался, это же охуеть как круто. Но радость сменилась недоумением.

Если посмотреть на скриншот, то видно, что картинка моя, и основные моменты из статьи мои

Кликнув на ссылку «Вся статья тут», я рассчитывал попасть на страницу своего блога. Но хуй там плавал. Нежные руки СММ-щика перенесли всю мою статью в редактор ВКонтатке, то есть «перепечатали» вместе с гифками и картинками.

Ссылка на мой блог всё же есть, но в самом конце статьи, спрятанная под словом «Источник»

Знаете, какой я трафик, простихоспаде, с этой ссылки-источника получил? Около 10 переходов. А вот результаты на странице Церебро: 350 лайков, 60 репостов, 14 000 глазиков. Заебись для Церебро, не заебись для меня.

Я написал Феликсу, создателю Церебро. Феликс — классный парень и всё сделал грамотно. Он сразу добавил ссылку на мой блог в самом посте.

Пока писа́л, уже 15 000 глазиков у статьи :)

Но меня всё равно не покидает неприятное чувство, что люди не умеют или не хотят правильно делиться чужим контентом. Я уверен, что будь мой пост не мой, а какого-нибудь публичного человека, то ребята бы прям в шапке поста написали ЭТОТ ПОСТ НЕ НАШ, ЭТО ПОСТ ПУТИНА!

Дальше немного моего идеального мирка, или как нужно делиться чужим контентом.

Как правильно делиться чужими статьями

Понятно, что есть всякие законы, ПРАВИЛА, но я ж про идеальный мирок, в котором люди всё делают по-человечески, а не блюдут какие-то законы.

1. Сразу заявляйте чей пост и давайте ссылку на автора или его блог. У вас не убудет от такой щедрости, а вот человеку, чей пост вы взяли, будет приятно.

Например, грамотно поступают ребята из телеграм-канала «Что почитать редактору»: называют автора и дают ссылку на его пост.

С этого поста пришло в блог около 400 человек. Сразу хочется творить дальше

2. Не стоит пихать ссылку на источник за семью печатями, потому что читатели в основной массе пробегутся по диагонали и даже не заметят ту самую важную ссылку. В итоге лавры уйдут тому, кто статью скопировал.

3. Спросите у автора, а можно ли поделиться постом и на каких условиях. Или просто сделайте ему комплимент, мол всё заебись, можно взять и у себя опубликовать с ссылкой на тебя?! Можно!

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

Вопрос в зал. Нормально так делиться чужими статьями? Может я зря расстроился и всё круто? А может кто-то наступил на мои авторские права? Мне искренне интересно, потому что с одной стороны я рад, что не зря потратил 8 часов на статью и она кому-то нужна, а с другой стороны жалко, что часть аудитории никогда и не узнает кто автор.

Всем мир!

Кадр из фильма «Дитя Человеческое» (2006), Альфонсо Куарон — гений

P. S. Только сейчас перед публикацией подумал: а что я особенный что ли? В интернете постоянно идёт активный пиздинг контента. Я ещё легко отделался, ссылку на меня даже оставили. А ведь сколько толкового контента так и расхватывается смм-редисками. Просто я впервые с таким столкнулся. Мудрая супруга на мои терзания поделилась мыслью от Дюрана: сделал плохо — обосрут, сделал круто — спиздят, делай средне. Так что расслабься, всё круто.

Мне задают вопрос из зала: «Залип на твоём портфолио. Где учился пилить адовые гифки, какими инструментами пользуешься?» Вопрос об анимации задают не в первый раз, поэтому расскажу. Сразу предупреждаю, что инструменты неидеальные, всегда можно делать круче и быстрее. Но мне хватает для задач, и ладно.

Как делаю гифки

Раз. Волшебное кодовое слово «gif» на ютюбе

Понравился мне котейка в рекламе минералки. Ставлю в строке браузера слово gif, жму энтер и попадаю в сервис по созданию гиф-анимации — Gifs.

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

Главный минус — программа часто просит денег за всякие «премиум фичи», ну и добавляет свою вотермарку на ВАШ ПРОДУКТ!

Делаю гифку сервиса, которая делает гифки

Два. Расширение для гугла — MakeGIF Video Capture.

Захотелось мне вырвать на память танец парней в видео. Я жму иконку расширения в правом нижнем углу, выбираю «Начать гифку», настраиваю параметры и «Стартую». В нужный момент жму «Готово».

Минусов у расширения не заметил, кроме того, что оно ограничено браузером, потому что часто нужно анимировать что-то вне браузера.

После можно ускорить или замедлить гифку, инвертировать и добавить надпись. Готово

Три. Программа на компьютер — LICEcap.

Это простенькая программка на компьютер. Скачать можно бесплатно для винды и мака на официальном сайте.

Дополнение от 21 февраля Так уж вышло, что пока я писал другую статью, то открыл для себя программу по работе с гифками — GIF Brewery 3. На по всем параметрам выигрывает у LICEcap.

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

1. Кнопка на сайт, внутри которой набирается текст

Как работает кнопка, можно посмотреть на сайте «Любакс»

Чтобы провернуть такое, я создал ячейку таблицы в гугл документах. У ячейки убрал границы и залил тем же цветом, что и будущая кнопка на сайте. Выбрал размер записываемой области в LICEcap и записал, как набираю нужные слова.

Такое можно накодить, но не все умеют кодить

2. Сменяющиеся картинки

Тоже на сайте «Любакс»

Купил мечтающую швею на фотостоке. В Фотошопе вырезал комиксный баббл, будто швея мечтает. В презентациях гугла наделал слайдов, в каждый из которых добавил одежду. Слайды раскрасил и запустил слайд-шоу. Слайд-шоу записал с помощью LICEcap. В Редимаге вставил мечтающую швею, а позади вставил гифку.

Помните, дети: нужно делать, а не мечтать!

3. Сюжетные гифки

Тема обширная, поэтому написал отдельную статью: Как редакторам делать сюжетные гифки и зачем они нужны. Если кратко, то: придумайте сюжет → выберите отрывок из фильма → смонтируйте его → добавьте титры → сделайте гифку.

Выходит что-то подобное. Гифка для новостного сайта о блокчейне FFC Media. Элла Памфилова предложила провести ребрендинг слова «блокчейн».

Что делать, если нужно отредактировать гифку

Чтобы отредактировать гифку, я использую сервис Gifgifs. А точнее одну боковую панель.

Я всегда уменьшаю вес гифки без потери качества с помощью GIF optimizer и отрезаю лишние поля с помощью GIF crop. Остальное по вкусу.

Всё тоже самое можно делать на сайте Iloveimg или просто сжимать гифки на сайте Gifcompressor — разницы в результатах не замечал.

Иногда нужно конвертировать гифку в видео, например, чтобы добавить в инстаграм. Я конвертирую в MP4 на сайте Gif-2-mp4.

Что делать, если лень самому возиться с гифками

Есть два отличных варианта для лентяев ;)

1. Giphy — использовал предательски мало, хотя гифок там миллионы и миллионы. Плюс на сайте есть свой редактор гифок, которым я успешно не пользовался.

2. Giphy GIF Search — бот в Телеграме, который поможет подобрать гифку для любой ситуации.

Например, удобно общаться с супругой

Анимация в Редимаге, как инструмент для визуальных эффектов

В Школе редакторов я делал все страницы в Редимаге. Помимо того, что в этом конструкторе удобно верстать страницы, там ещё есть чудо-блок Animation. С помощью него можно крутить, увеличивать/уменьшать, двигать предметы, а также делать их прозрачными и наоборот. Я активно использовал его в своих работах.

Слева от Земли и справа от дома стоят белые прямоугольники. Благодаря им не видно, как батарейки движутся сквозь Землю и здание.

За час можно разобраться

Заставил Трампа истерить. Для этого использовал функцию анимации — Scale. Она увеличивает или уменьшает масштаб предмета. Уменьшил на 5 пикселей масштаб и приказал повторять это действие через каждую 0,1 секунду. А чтобы было плавнее, приказал шевелиться в одну сторону, а потом в обратную

Сшил платье. Здесь долго рассказывать, но тоже использовал и Scale и Move для каждого куска ткани.

Анимация в Фотошопе

Когда я делал курсовую для школы редакторов, захотелось сделать анимацию для главного экрана. С помощью инструментов Редимага ничего не вышло, а специальные программы для анимации осваивать не хотелось. На помощь пришёл Фотошоп. Я вообще не знал, что он умеет работать с анимацией, но он умеет.

1. Первая строчка — отморозки. Всего отморозков пять и у каждого по 12 анимаций. Так много, чтобы они плавно появлялись и исчезали. Увеличивал и уменьшал параметр «Прозрачность».
2. Вторая строка — подписи над отморозками. Пять разных надписей появляются резко и исчезают резко тоже с помощью параметра «Прозрачность».
3. Третья строчка — облако газа из баллончика. Струя газа состоит из четырёх анимаций: нормальный размер + три растянутых через CMD+T состояния.
4. Четвёртая строчка — дама. Она статична. Но это только на картинке. В жизни она активная и ходит на йогу.

Если нужно что-то анимировать, то вот этого русского видео на ютюбе хватит, чтобы научиться

Основные моменты из статьи

1. Программ и сервисов для создания гифок в интернете море — выбирайте, что удобнее вам.
2. Мой набор для создания гифок: LICEcap, Gifs, Расширение для гугла.
3. Любую гифку обязательно нужно сжать и покропить: Gifgifs, Iloveimg, Gifcompressor.
4. Любую гифку на любой вкус можно подобрать на Giphy.
5. Giphy GIF Search — бот для поиска гифок с телеге.
6. Иногда удобно баловаться анимацией в Редимаге или в Фотошопе.
7. И НИКОГДА, ЗАКЛИНАЮ НИ-КОГ-ДА, НЕ ВСТАВЛЯЙТЕ ГИФКИ В СТАТЬЮ ПРОСТО ТАК!!! Этим грешит, например, блог Текстерры, в котором каждая вторая статья напичкана неинформативными мемами и гифками.

P. S. Я ещё вещаю о кино в телеге — подписывайся ;)

Кадр из фильма Пон Джун-Хо «Паразиты»

Коллега попросила посмотреть текст «свежим взглядом». А там такой блок:

• «По акции клиент получит:
  Эвотор 7.2 за 12 800 ₽ вместо 15 700;
  годовую подписку на сервис Маркировка за 3000 ₽ вместо 6000.
  В итоге онлайн-касса для работы с маркировкой будет стоить 15 800 рублей. Суммарная скидка на комплект — 5900 ₽.»

Читаю, а у меня в голове:

Самый короткий путь — отредактировать текст, чтобы читалось проще. Но есть вариант получше: превратить текст в картинку, на которой аккуратно расставить нужные слова. Такое и читать приятнее, и можно применять вне текста, например, в презентациях или соцсетях.

Попробовал сделать картинку

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

1. Создал документ 1000 × 750 пикселей и скопировал на него весь текст.
2. Слова пока что не редактировал, но разбил текст на логические абзацы.
3. Название акции выделил пожирнее и покрупнее и отделил от основного текста бо́льшим расстоянием.
4. Остальные предложения разделил пространством.
5. Весь текст, он же содержание, подружил с прямоугольником, он же формат. Самое простое правило, чтобы всё на плакате было ровно и красиво: левое поле меньше верхнего (фиолетовые прямоугольники), нижнее поле больше верхнего, справа оставляю воздух, весь текст выравнял по левому краю.

Удалил все лишние слова, чтобы самая важная информация на картинке хорошо считывалась. Сразу в лучших традициях распродаж перечеркнул старую цену.

Было 1 → Стало 2

Поменял заголовок. Зачем говорить, что есть некая акция для клиентов Эвотора, если можно сразу в заголовок вынести суть акции. А суть как раз одна из строк: Эвотор 7.2 и «Маркировка» за 15 800 ₽ — так и оставил пока что.

Было 2 → Стало 3

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

Было 3 → Стало 4

Появилась проблема. Мне не нравится, что перечёркнутые цены по размеру такие же как и финальные. Главное ведь — это финальная скидка. Уменьшил начальные цены до размеров названия.

(Прошло 10 минут). Мне сначала казалось, что цены после скидки — это главное. Но они не считываются без контекста. Поэтому увеличил заголовок. Теперь видно о чём речь.

Я до сих пор не трогал фразу «Экономия — 5900 ₽». Вот честно, я не понял зачем она. Убрал. И без неё всё отлично. На крайний случай, можно в основном тексте прописать, сколько сэкономит клиент.

Было 4 → Стало 5

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

Сразу покажу на примере, как выглядит белый вариант в гипотетической ленте — слева, и как выглядит вариант поярче — справа. После расскажу, как сделал оранжевый вариант.

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

Добавляю красоты в чёрно-белую иллюстрацию

Красота — штука субъективная и каждый видит её по-разному и создаёт по-разному. Для меня достаточно аккуратно расставить буквы и добавить на фон цвета... и буквы я уже расставил :) Дело за цветом.

1. У Эвотора главный цвет — оранжевый, добавил его. Сразу стало бохаче.
2. Буквы перекрасил в белый цвет.
3. Говорят что в 2020 году главный тренд в веб-дизайне — это мягкие градиенты. Тренды нельзя игнорировать — смешал оранжевый с белым.
4. А ещё люблю тонкие рамочки.
5. Из-за рамочки пришлось ужать текст, потому что теперь рамка — это прямоугольник-формат, который дружит с текстом-содержанием.
6. Чтобы низ совсем не пустовал, добавил логотип компании в левый нижний угол и адрес сайта в правый нижний угол. Эта парочка, так называемые якорные объекты, прилипла к углам и выровнялась с границами основного текста.
7. Развернул линии, которые перечёркивают старые цены. Так лучше видно старую цену.

Было 5 → Стало 6

Было 1 → Стало 6
Я всегда рад конструктивной критике, особенно, что касается вёрстки. Так что пишите, будем вместе двигать пиксели ;)

Повторюсь ещё раз. Я не профверстальщик, я только учусь. Но даже такой работы в ФШ хватит, чтобы победить комок сложного текста и превратить его в практически элитную картинку... Хотя, вру... Можно сделать ещё элитнее.

К сожалению, не все поняли шутку. Например, порадовал комментарий «Прежде чем ставить на картинку кого попало, нужно разобраться кто ваша ЦА!». Вот это поворот :)

Вот так. Секс победит любую картинку в ленте соцсетей. А чтоб меня не обвинили в объективации женского тела, добавлю и мужчину. Теперь меня обвинят и в том, и в том.

Стив Джобс бы одобрил

P. S. Я ещё вещаю о кино в телеге — подписывайся ;)