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

Популярная в некоторых кругах группа «Церебро Таргет» почти на 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.

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

Дальше всё ограничено только вашей фантазией. Можно записывать рисовальные процессы, действия в программах, видео, работу с текстом и графику, собственное лицо и прочее прочее прочее. Расскажу о трёх фишках, которые я реализовывал с помощью 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. Я ещё вещаю о кино в телеге — подписывайся ;)

Посмотрел сериал «Шучу». Сериал шикарный и в нём полно сложных технических сцен с применением визуальных фишек без компьютерных спецэффектов. После просмотра я полез искать в интернете инфу о съёмках сериала. Так и вбил «шучу как снимали». Сразу напоролся на бекстейдж сцены, которую сняли одним кадром без монтажных склеек. И эту сцену «пометила» Медуза.

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

Четыре предложения уместили в первые 16 секунд ролика, а дальше молчание. Но даже в этих предложениях гниют печальные неточности. Расскажу о них дальше

И только на 56-ой секунде прилетает КЭП, чтобы не сказать ничего нового и интересного. Хотя бы написали: «Лабрадоры не умеют расти за 20 секунд, поэтому пришлось пихать в кадр и щенка, и взрослого кабеля»

Разберу ошибки и очевидности в субтитрах к видео «Медузы»

1. «Героиня много лет смотрит смотрит одну передачу». Кто это написал, явно не видел сериал. Героиня меняет жизнь благодаря вдохновляющим речам ведущего детской передачи. И за двухминутную сцену непонятно, сколько лет нам показали. Конечно, если приглядеться, то можно предположить, что прошло около двух лет: на торте две свечи, скорее всего это два «чистых» года.
2. «Сцена снята одним дублем». Это ошибка в терминологии. Дубль — один прогон сцены. Дублей может быть сотни. Например, неудачные дубли в титрах с Джеки Чаном. То есть не факт, что сцену сняли с одного дубля, их могло быть два или двадцать (спойлер: дублей было пять). Правильнее было сказать: сцена снята одним кадром без монтажных склеек.
3. «Команде приходилось быстро менять мебель в кадр». Серьёзно?! Ну очуметь теперь, это так неочевидно по видео. Можно было уточнить, что команда не только двигала мебель. У комнаты несколько слоёв, которые убирали в нужный момент. Например, обратите внимание на волшебное появление кухни.
4. «А актрисе — переодеваться». Серьёзно?! Ну очуметь теперь в квадрате! Это ненужная информация, потому что итак понятно, что в кадре не тройняшки. Лучше бы написали, что актрису два раза подменила дублёрша: когда колотит стену и когда занимается йогой.

Что в итоге

Медуза схватилась за хайповый видос (видео вышло, когда сериал «Шучу» как раз шумел), закинула его в рубрику «Шапито», набросала на отъебись пару фраз и всё. После просмотра видео у меня вопрос к Медузе: стоило ли вообще добавлять такие субтитры, если они бестолковые и неуместные. Ответ: не стоило, конечно. Но ведь нужно было сделать вид какой-то деятельности, вот так и родились сабы :)

Помогу Медузе сделать «крутые» сабы

Чтобы позабавиться, дописал субтитры в распиздяйском стиле Медузы. И даже в этом распиздяйстве больше годноты, чем в текстовых обрубках оригинала.

Сделаю информативные субтитры сам

Давайте так... Я честно не знаю, зачем Медузе помечать такие видео и вываливать на потеху зрителям. Сериал знаменитый, видео интересное, на западе миллионы просмотров — так почему бы и нам не выложить его, только будто бы познавательное, с сабами и со своим логотипом. Но раз уж затеяли такое, то хоть больше сабов накидайте полезных (хотя, лучше было бы вообще без них).

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

• Это сцена из сериала «Шучу».
• Героиня меняет жизнь благодаря словам ведущего программы.
• Сцена длится 2 минуты. За это время героиня проживает 5 лет.
• Сцену сняли одним кадром, без монтажных склеек.
• Чтобы получилось идеально, потратили пять дублей.
• В съёмке сцены участвовало 50 человек!
• Снял серию режиссёр Джейк Шрейер.
• Джейк — клипмейкер.
• Он снимал клипы для Francis and the Lights, Benny Blanco, Chance the Rapper.
• И клипы без монтажных склеек тоже были.
• Но такой технически сложной сцены не было.
• Это дань уважения другому режиссёру и клипмейкеру — Мишелю Гондри.
• Посмотрите клип Мишеля для Radiohead — Knives Out. Вы всё поймёте.
• Вы можете знать Мишеля Гондри по фильму «Вечное сияние чистого разума».

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

Бонус

Раз уж упомянул в сабах клипы Мишеля Гондри и Джейка Шрейера, то вот.

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