Иллюстрации для статей: скрины, гифки, мокапы

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

Вместо введения — кусочек переписки об иллюстрациях из редакторского чата Дела:

Пойдемте учиться плохому!

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

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

Затем нажать cmd + shift + 4 + пробел, на экране появится значок фотоаппарата, его нужно навести на браузер и кликнуть мышкой или по тачпаду. Готово.

Если нужно показать что-то с телефона, показываем вместе с телефоном — это называется мокапом. Выглядит так:

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

Выбираете айфон восемь, открывается меню с выбором модели и цвета телефона, выбираете, какой больше нравится или поближе к вашей модели:

Загружаете скрин, который сохранили на комп через черную кнопку, можно загружать пачкой:

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

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

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

Графики нужны к статьям о статистике, расходах, распределении и всяких таких штуках. Я не знаю, как делать графики в фотошопе — пыталась смотреть уроки, но что-то сложно, поэтому делаю в гугл-таблицах. Мне кажется, получается прилично:

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

Впереди десяток скриншотов, но делается всё это минут за пять — рассказывать дольше.

Итак, создаю новую гугл-таблицу и ввожу данные:

Затем выделяю столбцы и нажимаю Вставка — Диаграмма

Гугл-таблица создает стандартный график. Она сама выбирает тип графика, ориентируясь на данные:

Сразу же откроется окошко настройки диаграммы. Выбираю столбчатую диаграмму вместо линейной и редактирую название:

Было

Стало

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

Чтобы покрасить диаграмму в цвет издания, нужно узнать его номер в формате #000000, это можно сделать в фотошопе. Я сохраняю картинку, из которой буду брать цвет на компе, открываю ее в фотошопе, пипеткой кликаю на нужный участок. Выбранный цвет появляется в левой панели, вон тот розовый квадратик.

Кликаю на квадратик, открывается палитра цветов, и внизу — номер цвета в нужном формате. Копирую его:

Возвращаюсь в гугл-таблицу и вставляю скопированный цвет, нажимаю ОК, и диаграмма красится!

Теперь нужно убрать полоски с заднего плана. Во вкладке «Дополнительно» листаю до конца, нахожу пункт «Основные линии сетки» и убираю галку.

После меняю шрифт, кликаю на текст и открывается окошко настроек текста, выбираю:

Всё, осталось только сохранить. Кликаю на три точки, выбираю «Скачать в пэ-эн-гэ»

Если нужен график на прозрачном фоне, открываю фотошоп и убираю белый фон: инструментом «Волшебная палочка» выбираю белое и нажимаю cmd + x.

Иногда еще добавляю эмоджи, чтобы было нагляднее:

Эмоджи беру в Эмоджипедии, добавляю в график в фотошопе: открываю график, открываю эмоджу, выделяю эмоджу и копирую в график. Нажимаю cmd + t и настраиваю размер и расположение эмоджи.

Если оставить просто тест, будет тоже нормально, но статистика в виде таблиц и цифр нравится только лишь некоторым, а картинки с эмоджами — всем, но можно схитрить: поставить и список с буквами и цифрами, и картиночку.

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

Но иногда есть только шаблон документа, например, такой:

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

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

Печать беру из поиска и замазываю данные: в фотошопе выделяю нужный участок, затем нажимаю Фильтр — Галерея размытия — Размытие поля — ОК. Получается вот так:

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

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

Документы с выносками. Иногда нужно сделать подпись к элементу внутри документа или скриншота. Для этого подойдут выноски.

Открываю документ в фотошопе, кадрирую, чтобы было место для подписи:

Беру инструмент Фигура — Линия и провожу линию в нужном месте

Добавляю текст выноски сбоку. Идеально использовать фирменный шрифт издания, его можно попросить у главреда, арт-директора или дизайнеров. Если фирменного шрифта нет, беру Ариал.

Готово. Нажимаю Файл — Быстрый экспорт в пэ-эн-гэ.

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

Иногда для иллюстрации больше подходит гифка, например, если нужно показать что-то в процессе. Гифки я делаю в джимпе — это бесплатная программа.

Сначала делаю скриншоты и называю их по порядку 1, 2, 3 и далее. Потом открываю джимп, нажимаю Файл — Открыть как слои — выбираю нужные скриншоты, нажимаю Файл — Экспортировать как и выбираю формат гиф

Открывается окошко с настройкой гифки. Выбираю: сохранить как анимацию; задержка 1200 миллисекунд; расположение кадров: один кадр на слой (замена); бесконечный цикл. И нажимаю «Экспорт».

Если нужно показать что-то на телефоне, сначала делаю мокапы, а уже потом — гифку.

Важно, чтобы картинки для гифки были одинакового размера, иначе будет криво.

Автор Светлана Дучак: сайт, вконтакте, фейсбук, инстаграм, канал в телеграме.