{"id":13643,"url":"\/distributions\/13643\/click?bit=1&hash=a8215ceddd252b2083ce5ad9aec744ff1eefa9bc3de1c4cbfdb18016cc439e99","title":"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435\u0441\u044c \u0438\u0437 \u043b\u043e\u0432\u0443\u0448\u043a\u0438 \u00ab\u043c\u043d\u043e\u0433\u043e\u0440\u0443\u043a\u043e\u0433\u043e \u0428\u0438\u0432\u044b\u00bb","buttonText":"\u041a\u0430\u043a?","imageUuid":"6f999284-e19c-51a5-b74d-c3d432185ecb","isPaidAndBannersEnabled":false}
Дизайн
Svetlana Duchak

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

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

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

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

Скриншоты с компа

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

Скриншот браузера с тенью в статье «Что делать, чтобы ребенок не потерялся» в Своих

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

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

Скриншоты с телефона: делаем мокап

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

Мокап в статье «Как делить семейный бюджет» в Своих

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

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

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

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

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

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

Графики и диаграммы

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

График для статьи «Сколько семьи тратят на еду» в Своих

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

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

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

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

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

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

Было

Стало

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

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

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

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

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

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

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

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

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

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

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

Документы

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

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

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

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

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

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

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

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

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

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

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

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

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

Фотографии

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

Согласие из статьи «Перевод жилого помещения в нежилое» в Деле

Гифки

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

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

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

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

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

0
39 комментариев
Написать комментарий...
Vyacheslav Rubanyuk

Вывод: чтобы делать приличные иллюстрации без дизайнера - нужно самому стать дизайнером )) 

Ответить
Развернуть ветку
Andrey Dolg

Не без этого. =)

Ответить
Развернуть ветку
Nikita Loginov

На самом деле задумайтесь только: вы листаете такую статью с Айфона 8 (или любого другого) и видите вместо чистого скрина ещё один телефон, внутри которого скрин. Телефон со скрином на экране вашего телефона только мне кажется бредом и лишней рамкой? 

Ответить
Развернуть ветку
Nikita Loginov

Ещё дико смеюсь с людей, кто все ещё презентует сайты в мокапах с аймаком. То есть листаешь ты такой на мониторе кейс и видишь монитор в мониторе лол.«А вот как наш сайт выглядит на десктопе.» Серьезно? Спасибо, буду знать) 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Nikita Loginov

Как думаешь, что это?) 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Artem Petrenkov
Или скопировать ссылку на нужную страницу и открыть ее в чистеньком браузере.

Проще и лучше открепить вкладку в новое окно.

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

Если нужен график на прозрачном фоне, то в той же Гуглотаблице в настройках стиля диаграммы ставим Цвет фона — Нет, а не извращаемся в Фотошопе :)

Ответить
Развернуть ветку
Oleksii Sidorov

Понравилось, очень простым языком, но при этом толково. Со всеми советами согласен  

Ответить
Развернуть ветку
Павел Молянов

Отличный гайд, Света, спасибо!

Ответить
Развернуть ветку
Michael Sivolobov

Слишком много инструментария используете, какие-то вещи вообще взаимозаменяемые.
1. Если есть Photoshop и привыкли с ним работать, зачем GIMP? В Photoshop тоже можно сделать гифку без всяких плагинов.
2. Если вас устраивает GIMP, зачем вам Photoshop? Можно сэкономить 500₽/месяц.
3. Прозрачный фон на графиках можно сделать и в гугл-таблицах, цвета фона надо выставить в "Нет" вместо белого.
4. Чтобы сделать коллаж из фотографии с выноской текстовой, можно воспользоваться и стандартным Просмотром.
5. У вас ведь мак. В маке есть цифровой колориметр, это суперпродвинутая пипетка, бесплатная, которая у вас уже установлена. Photoshop — вообще очень долгое решение для определения цвета.
6. Emoji можно вставлять и в Просмотре, опять же не нужен ни Photoshop, ни GIMP.
7. Самое сложное для Просмотра — GIF-анимации. Сложность заключается в том, что в GIF-анимациях, создаваемых через Просмотр нельзя редактировать скорость смены кадров, а также нельзя сделать зацикленность. Но это легко правится командой `convert -delay 50 -loop 0 animation_from_preview_app.gif looped_animation_with_delay.gif`, когда установлен ImageMagick. Да, здесь придется либо научиться терминал открывать, там что-то писать и Enter нажимать, либо создать (попросить знакомого) AppleScript-приложение. В крайнем случае воспользоваться каким-нибудь генератором гифок из картинок.
Вывод: удалив Photoshop и GIMP, можно сэкономить минимум 500₽/месяц и пару-тройку гигабайт на жестком диске. При этом не теряя в скорости в выполнении задач, описанных в статье, а где-то даже сэкономив время.

Ответить
Развернуть ветку
Владимир Бугаев

Чертовски приятно осознавать, что не одинок в своих начинаниях!
У меня как-то тоже был цикл постов «Как создавать иллюстрации не умея рисовать»

Как создавать иллюстрации не умея рисовать

Интернет — это просто кладезь генераторов чего угодно. Замес в том, чтобы использовать генераторы не по назначению. Когда мне нужно что-то сделать, а я это не умею, я гуглю “<тут что мне нужно> online generator” и почти всегда такой ге...
Как создавать иллюстрации не умея рисовать

Интернет — это просто кладезь генераторов чего угодно. Замес в том, чтобы использовать генераторы не по назначению. Когда мне нужно что-то сделать, а я это не умею, я гуглю “<тут что мне нужно> online generator” и почти всегда такой генератор находится. Для затравки нск моих любимых:

1. Генерируем облако тэгов на основе текста

2. Генерируем бесшовные фоны из готовых иконок или эмоджи

3. Генерируем джойстики разных цветов

4. Генерируем свои эмоджи (сервис умер)

Продолжение по тегу #генераторы

#ресурсы #иллюстрации
Ответить
Развернуть ветку
Дмитрий Александрович

Статья годная, но вот эта вот бирманоильяховщина с транслитерацией названий и аббревиатур всякий раз дико режет глаза :(

Ответить
Развернуть ветку
Alexey Yusov

Скриншоты на макбуке лучше всего делать в полноэкранном режиме приложения

Ответить
Развернуть ветку
Павел Молянов

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

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

Такие скриншоты более информативные и их легче «прочитать».

Ответить
Развернуть ветку
Alexey Yusov

Да, согласен. Но зависит от самого скриншота и задачи

Ответить
Развернуть ветку
Artem Petrenkov

Тогда получится окно без рамки и тени.

Ответить
Развернуть ветку
Pavel Levitskiy

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

в гугл хром установите расширение eye dropper.  Эта та же пипетка из фотошопа, только в браузере 

Ответить
Развернуть ветку
AIR PLAY

Скриншоты можно делать хоть на маке хоть на винде с помощью Яндекс диска) горячими клавишами ctrl+shift+1
Появляется плюсик и выбираем область. Согласен, что с тенью окно браузера выглядит привлекательнее, но разве на винде так сделать без костылей? По-моему только в фотошопе, но это танцы с бубнами.

Ответить
Развернуть ветку
Artem Petrenkov

И в винде, и на маке есть штатные скриншотилки. Зачем для этого Яндекс.Диск?

Ответить
Развернуть ветку
AIR PLAY

Хотя, каждому свое

Ответить
Развернуть ветку
Natalia Romanova

там можно сразу обрезать, обвести что-то, сделать надпись и т.д. Отличный инструмент - скриншоты через ЯД

Ответить
Развернуть ветку
Artem Petrenkov

В стандартной виндовой скриншотилке можно сделать то же самое.

Ответить
Развернуть ветку
AIR PLAY

Он удобнее, попробуй)

Ответить
Развернуть ветку
Бесполезный файл

Комментарий недоступен

Ответить
Развернуть ветку
Svetlana Duchak
Автор

Запилите =)

Ответить
Развернуть ветку
Олег Барминов

Я подпишусь на обновления ваши, если запилите.
Вы запилите?

Ответить
Развернуть ветку
Бесполезный файл

Комментарий недоступен

Ответить
Развернуть ветку
Reverent Evzheniy

Есть еще Miro - когда нужно идею представить наглядной схемой

https://i.imgur.com/yuXK997.jpg

Ответить
Развернуть ветку
Nickolai Vasiliev

Такую идею надо сразу в Автокад )))

Ответить
Развернуть ветку
Андрей Солозобов

Спасибо, но вот нормально же общались до этого момента:

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

То есть у каждого недизайнера по умолчанию должен быть фотошоп?

Ответить
Развернуть ветку
Дмитрий Александрович

На винде для простой редактуры изображений отлично подходит MS Paint, без шуток. Откадрировать, сделать коллаж, добавить подписи, подтереть что-то ластиком, изменить размеры холста растягиванием - отличная штука. На маке мне так и не удалось найти ничего похожего по простоте и удобству.

Ответить
Развернуть ветку
Michael Sivolobov

В стандартном Просмотре можно сделать почти все тоже самое.
Если рассматривать пример из статьи про кадрирование и подпись — то все делается в Просмотре. Вообще, учитывая инструментарий, который есть у автора, Photoshop можно смело исключить и сэкономить 500₽/месяц.

Ответить
Развернуть ветку
S A

Спасибо за информацию, некоторые советы мне точно пригодятся! Я виду свой канал и сам иногда пользуюсь телеграм-ботом для создания обложек или картинок к постам.  Правда, результат сильно проще, но если надо сделать быстро, то это подходящий вариант. Называется Gopublishbot - https://t.me/gopublishbot?start=nu_vcc Еще там прикольно можно делать "скриншоты" твитов. Вызываете бота командой @gopublishbot и кидаете линк на твит. Скриншот готов за секунду )

Ответить
Развернуть ветку
НечеловеческаяЛогика

Я точно не на Demiart?

Ответить
Развернуть ветку
Ilya Volkov

Анимированный график можно сделать с помощью https://livingcharts.com

Ответить
Развернуть ветку
Дмитрий Степанов

Для скриншотов в браузере с тенью не проще ли использовать https://browserframe.com чем покупать Mac?

Ответить
Развернуть ветку
Tony Urban

Графики, честно говоря, не очень

Ответить
Развернуть ветку
Начинатель

подскажите пожалуйста как скачивать в хорошем качестве эмодзи с emojipedia? 

Ответить
Развернуть ветку
Читать все 39 комментариев
null