Иллюстрации для статей: скрины, гифки, мокапы
Инструкция, которая поможет делать приличные иллюстрации без дизайнеров.
Вместо введения — кусочек переписки об иллюстрациях из редакторского чата Дела:
Пойдемте учиться плохому!
Скриншоты с компа
Скриншот браузера с тенью всегда выглядит аккуратнее, чем скрин выделенной области.
Чтобы сделать такой скрин на макбуке, нужно закрыть все остальные вкладки и оставить только ту, что хотите снять. Или скопировать ссылку на нужную страницу и открыть ее в чистеньком браузере.
Затем нажать cmd + shift + 4 + пробел, на экране появится значок фотоаппарата, его нужно навести на браузер и кликнуть мышкой или по тачпаду. Готово.
Скриншоты с телефона: делаем мокап
Если нужно показать что-то с телефона, показываем вместе с телефоном — это называется мокапом. Выглядит так:
Обычно меня никто не спрашивает, как делать красивые мокапы, но я хожу и всем рассказываю: делаете скриншот на своем телефоне, картинку пересылаете себе в телегу, сохраняете на компе. Потом открываете сайт для мокапов:
Выбираете айфон восемь, открывается меню с выбором модели и цвета телефона, выбираете, какой больше нравится или поближе к вашей модели:
Загружаете скрин, который сохранили на комп через черную кнопку, можно загружать пачкой:
Нажимаете на синюю кнопку, чтобы сгенерировать мокап, ждете. Через минуту-две картинка будет готова:
Можно нажать на кнопку «Скачать мой мокап», тогда картинка придет на почту архивом, а можно кликнуть правой кнопкой по картинке, выбрать «Сохранить изображение как» и сохранить на рабочий стол.
Обычно мокапы получаются огромными: 2000х2000px, и я меняю размер в стандартной программе просмотра. Нажимаю в верхнем меню: инструменты — настроить размер.
Графики и диаграммы
Графики нужны к статьям о статистике, расходах, распределении и всяких таких штуках. Я не знаю, как делать графики в фотошопе — пыталась смотреть уроки, но что-то сложно, поэтому делаю в гугл-таблицах. Мне кажется, получается прилично:
Мне нравится, когда в цвет в графиках повторяет цвета обложек и постоянных элементов издания. Раньше я делала так: создавала график с любыми цветами в гугл-таблицах, а потом перекрашивала в фотошопе. Не повторяйте в домашних условиях! А потом узнала, что в гугл-таблице можно сразу менять цвет на свой, и жить стало проще.
Впереди десяток скриншотов, но делается всё это минут за пять — рассказывать дольше.
Итак, создаю новую гугл-таблицу и ввожу данные:
Затем выделяю столбцы и нажимаю Вставка — Диаграмма
Гугл-таблица создает стандартный график. Она сама выбирает тип графика, ориентируясь на данные:
Сразу же откроется окошко настройки диаграммы. Выбираю столбчатую диаграмму вместо линейной и редактирую название:
Было
Стало
Уже выглядит нормально, но чтобы сделать хорошо, я еще настраиваю цвет и убираю линии на заднем фоне. Цвет можно поменять, если кликнуть на столбец диаграммы — откроется окошко настройки элемента с палитрой. В палитре кликаю на кнопку «Другой цвет».
Чтобы покрасить диаграмму в цвет издания, нужно узнать его номер в формате #000000, это можно сделать в фотошопе. Я сохраняю картинку, из которой буду брать цвет на компе, открываю ее в фотошопе, пипеткой кликаю на нужный участок. Выбранный цвет появляется в левой панели, вон тот розовый квадратик.
Кликаю на квадратик, открывается палитра цветов, и внизу — номер цвета в нужном формате. Копирую его:
Возвращаюсь в гугл-таблицу и вставляю скопированный цвет, нажимаю ОК, и диаграмма красится!
Теперь нужно убрать полоски с заднего плана. Во вкладке «Дополнительно» листаю до конца, нахожу пункт «Основные линии сетки» и убираю галку.
После меняю шрифт, кликаю на текст и открывается окошко настроек текста, выбираю:
Всё, осталось только сохранить. Кликаю на три точки, выбираю «Скачать в пэ-эн-гэ»
Если нужен график на прозрачном фоне, открываю фотошоп и убираю белый фон: инструментом «Волшебная палочка» выбираю белое и нажимаю cmd + x.
Иногда еще добавляю эмоджи, чтобы было нагляднее:
Эмоджи беру в Эмоджипедии, добавляю в график в фотошопе: открываю график, открываю эмоджу, выделяю эмоджу и копирую в график. Нажимаю cmd + t и настраиваю размер и расположение эмоджи.
Если оставить просто тест, будет тоже нормально, но статистика в виде таблиц и цифр нравится только лишь некоторым, а картинки с эмоджами — всем, но можно схитрить: поставить и список с буквами и цифрами, и картиночку.
Документы
Самые кайфовые документы — сканы и фотки настоящих с потертостями, сгибами, печатями. Такие можно попросить у эксперта, найти у друзей или в папке со своими, если пишите статью на личном опыте.
Но иногда есть только шаблон документа, например, такой:
Пустые шаблоны выглядят не очень. На них в статье нужно давать ссылку, но вставлять в качестве иллюстрации лучше заполненный вариант.
Я делаю так: заполняю шаблон выдуманными данными, замазываю их в фотошопе, как сделала бы с настоящими, добавляю подпись и печать. Как добавлять подпись, рассказывала в телеграме.
Печать беру из поиска и замазываю данные: в фотошопе выделяю нужный участок, затем нажимаю Фильтр — Галерея размытия — Размытие поля — ОК. Получается вот так:
Если у вас есть печать ИП, можно распечатать документ, поставить свою подпись и печать, отсканировать и замазать данные. Всё займет минут десять.
Двухстраничные документы соединяю в фотошопе. Чтобы получить картинки, сначала экспортирую каждую страницу из пдф в пэ-эн-гэ в стандартной программе просмотра. Потом открываю их в фотошопе и соединяю. В телеграме у меня есть мини-вебинар: как соединить две картинки в одну.
Документы с выносками. Иногда нужно сделать подпись к элементу внутри документа или скриншота. Для этого подойдут выноски.
Открываю документ в фотошопе, кадрирую, чтобы было место для подписи:
Беру инструмент Фигура — Линия и провожу линию в нужном месте
Добавляю текст выноски сбоку. Идеально использовать фирменный шрифт издания, его можно попросить у главреда, арт-директора или дизайнеров. Если фирменного шрифта нет, беру Ариал.
Готово. Нажимаю Файл — Быстрый экспорт в пэ-эн-гэ.
Фотографии
Фотографии можно взять у эксперта или героя стать, сделать самим с натуры или подделать! С первыми двумя пунктами всё должно быть понятно, а третий не такой мошеннический, как звучит. Например, если в статье я пишу, что нужно взять письменное согласие у соседей, то беру листок, ручку и пишу такое согласие с выдуманными данными. Фотографирую и добавляю в статью.
Гифки
Иногда для иллюстрации больше подходит гифка, например, если нужно показать что-то в процессе. Гифки я делаю в джимпе — это бесплатная программа.
Сначала делаю скриншоты и называю их по порядку 1, 2, 3 и далее. Потом открываю джимп, нажимаю Файл — Открыть как слои — выбираю нужные скриншоты, нажимаю Файл — Экспортировать как и выбираю формат гиф
Открывается окошко с настройкой гифки. Выбираю: сохранить как анимацию; задержка 1200 миллисекунд; расположение кадров: один кадр на слой (замена); бесконечный цикл. И нажимаю «Экспорт».
Если нужно показать что-то на телефоне, сначала делаю мокапы, а уже потом — гифку.
Важно, чтобы картинки для гифки были одинакового размера, иначе будет криво.
Автор Светлана Дучак: сайт, вконтакте, фейсбук, инстаграм, канал в телеграме.
Вывод: чтобы делать приличные иллюстрации без дизайнера - нужно самому стать дизайнером ))
Не без этого. =)
На самом деле задумайтесь только: вы листаете такую статью с Айфона 8 (или любого другого) и видите вместо чистого скрина ещё один телефон, внутри которого скрин. Телефон со скрином на экране вашего телефона только мне кажется бредом и лишней рамкой?
Ещё дико смеюсь с людей, кто все ещё презентует сайты в мокапах с аймаком. То есть листаешь ты такой на мониторе кейс и видишь монитор в мониторе лол.«А вот как наш сайт выглядит на десктопе.» Серьезно? Спасибо, буду знать)
Или скопировать ссылку на нужную страницу и открыть ее в чистеньком браузере.
Проще и лучше открепить вкладку в новое окно.
Если нужен график на прозрачном фоне, открываю фотошоп и убираю белый фон: инструментом «Волшебная палочка» выбираю белое и нажимаю cmd + x.
Если нужен график на прозрачном фоне, то в той же Гуглотаблице в настройках стиля диаграммы ставим Цвет фона — Нет, а не извращаемся в Фотошопе :)
Понравилось, очень простым языком, но при этом толково. Со всеми советами согласен
Отличный гайд, Света, спасибо!