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