Иллюстрации для статей: скрины, гифки, мокапы
Инструкция, которая поможет делать приличные иллюстрации без дизайнеров.
Вместо введения — кусочек переписки об иллюстрациях из редакторского чата Дела:
Пойдемте учиться плохому!
Скриншоты с компа
Скриншот браузера с тенью всегда выглядит аккуратнее, чем скрин выделенной области.
Чтобы сделать такой скрин на макбуке, нужно закрыть все остальные вкладки и оставить только ту, что хотите снять. Или скопировать ссылку на нужную страницу и открыть ее в чистеньком браузере.
Затем нажать cmd + shift + 4 + пробел, на экране появится значок фотоаппарата, его нужно навести на браузер и кликнуть мышкой или по тачпаду. Готово.
Скриншоты с телефона: делаем мокап
Если нужно показать что-то с телефона, показываем вместе с телефоном — это называется мокапом. Выглядит так:
Обычно меня никто не спрашивает, как делать красивые мокапы, но я хожу и всем рассказываю: делаете скриншот на своем телефоне, картинку пересылаете себе в телегу, сохраняете на компе. Потом открываете сайт для мокапов:
Выбираете айфон восемь, открывается меню с выбором модели и цвета телефона, выбираете, какой больше нравится или поближе к вашей модели:
Загружаете скрин, который сохранили на комп через черную кнопку, можно загружать пачкой:
Нажимаете на синюю кнопку, чтобы сгенерировать мокап, ждете. Через минуту-две картинка будет готова:
Можно нажать на кнопку «Скачать мой мокап», тогда картинка придет на почту архивом, а можно кликнуть правой кнопкой по картинке, выбрать «Сохранить изображение как» и сохранить на рабочий стол.
Обычно мокапы получаются огромными: 2000х2000px, и я меняю размер в стандартной программе просмотра. Нажимаю в верхнем меню: инструменты — настроить размер.
Графики и диаграммы
Графики нужны к статьям о статистике, расходах, распределении и всяких таких штуках. Я не знаю, как делать графики в фотошопе — пыталась смотреть уроки, но что-то сложно, поэтому делаю в гугл-таблицах. Мне кажется, получается прилично:
Мне нравится, когда в цвет в графиках повторяет цвета обложек и постоянных элементов издания. Раньше я делала так: создавала график с любыми цветами в гугл-таблицах, а потом перекрашивала в фотошопе. Не повторяйте в домашних условиях! А потом узнала, что в гугл-таблице можно сразу менять цвет на свой, и жить стало проще.
Впереди десяток скриншотов, но делается всё это минут за пять — рассказывать дольше.
Итак, создаю новую гугл-таблицу и ввожу данные:
Затем выделяю столбцы и нажимаю Вставка — Диаграмма
Гугл-таблица создает стандартный график. Она сама выбирает тип графика, ориентируясь на данные:
Сразу же откроется окошко настройки диаграммы. Выбираю столбчатую диаграмму вместо линейной и редактирую название:
Было
Стало
Уже выглядит нормально, но чтобы сделать хорошо, я еще настраиваю цвет и убираю линии на заднем фоне. Цвет можно поменять, если кликнуть на столбец диаграммы — откроется окошко настройки элемента с палитрой. В палитре кликаю на кнопку «Другой цвет».
Чтобы покрасить диаграмму в цвет издания, нужно узнать его номер в формате #000000, это можно сделать в фотошопе. Я сохраняю картинку, из которой буду брать цвет на компе, открываю ее в фотошопе, пипеткой кликаю на нужный участок. Выбранный цвет появляется в левой панели, вон тот розовый квадратик.
Кликаю на квадратик, открывается палитра цветов, и внизу — номер цвета в нужном формате. Копирую его:
Возвращаюсь в гугл-таблицу и вставляю скопированный цвет, нажимаю ОК, и диаграмма красится!
Теперь нужно убрать полоски с заднего плана. Во вкладке «Дополнительно» листаю до конца, нахожу пункт «Основные линии сетки» и убираю галку.
После меняю шрифт, кликаю на текст и открывается окошко настроек текста, выбираю:
Всё, осталось только сохранить. Кликаю на три точки, выбираю «Скачать в пэ-эн-гэ»
Если нужен график на прозрачном фоне, открываю фотошоп и убираю белый фон: инструментом «Волшебная палочка» выбираю белое и нажимаю cmd + x.
Иногда еще добавляю эмоджи, чтобы было нагляднее:
Эмоджи беру в Эмоджипедии, добавляю в график в фотошопе: открываю график, открываю эмоджу, выделяю эмоджу и копирую в график. Нажимаю cmd + t и настраиваю размер и расположение эмоджи.
Если оставить просто тест, будет тоже нормально, но статистика в виде таблиц и цифр нравится только лишь некоторым, а картинки с эмоджами — всем, но можно схитрить: поставить и список с буквами и цифрами, и картиночку.
Документы
Самые кайфовые документы — сканы и фотки настоящих с потертостями, сгибами, печатями. Такие можно попросить у эксперта, найти у друзей или в папке со своими, если пишите статью на личном опыте.
Но иногда есть только шаблон документа, например, такой:
Пустые шаблоны выглядят не очень. На них в статье нужно давать ссылку, но вставлять в качестве иллюстрации лучше заполненный вариант.
Я делаю так: заполняю шаблон выдуманными данными, замазываю их в фотошопе, как сделала бы с настоящими, добавляю подпись и печать. Как добавлять подпись, рассказывала в телеграме.
Печать беру из поиска и замазываю данные: в фотошопе выделяю нужный участок, затем нажимаю Фильтр — Галерея размытия — Размытие поля — ОК. Получается вот так:
Если у вас есть печать ИП, можно распечатать документ, поставить свою подпись и печать, отсканировать и замазать данные. Всё займет минут десять.
Двухстраничные документы соединяю в фотошопе. Чтобы получить картинки, сначала экспортирую каждую страницу из пдф в пэ-эн-гэ в стандартной программе просмотра. Потом открываю их в фотошопе и соединяю. В телеграме у меня есть мини-вебинар: как соединить две картинки в одну.
Документы с выносками. Иногда нужно сделать подпись к элементу внутри документа или скриншота. Для этого подойдут выноски.
Открываю документ в фотошопе, кадрирую, чтобы было место для подписи:
Беру инструмент Фигура — Линия и провожу линию в нужном месте
Добавляю текст выноски сбоку. Идеально использовать фирменный шрифт издания, его можно попросить у главреда, арт-директора или дизайнеров. Если фирменного шрифта нет, беру Ариал.
Готово. Нажимаю Файл — Быстрый экспорт в пэ-эн-гэ.
Фотографии
Фотографии можно взять у эксперта или героя стать, сделать самим с натуры или подделать! С первыми двумя пунктами всё должно быть понятно, а третий не такой мошеннический, как звучит. Например, если в статье я пишу, что нужно взять письменное согласие у соседей, то беру листок, ручку и пишу такое согласие с выдуманными данными. Фотографирую и добавляю в статью.
Гифки
Иногда для иллюстрации больше подходит гифка, например, если нужно показать что-то в процессе. Гифки я делаю в джимпе — это бесплатная программа.
Сначала делаю скриншоты и называю их по порядку 1, 2, 3 и далее. Потом открываю джимп, нажимаю Файл — Открыть как слои — выбираю нужные скриншоты, нажимаю Файл — Экспортировать как и выбираю формат гиф
Открывается окошко с настройкой гифки. Выбираю: сохранить как анимацию; задержка 1200 миллисекунд; расположение кадров: один кадр на слой (замена); бесконечный цикл. И нажимаю «Экспорт».
Если нужно показать что-то на телефоне, сначала делаю мокапы, а уже потом — гифку.
Важно, чтобы картинки для гифки были одинакового размера, иначе будет криво.
Автор Светлана Дучак: сайт, вконтакте, фейсбук, инстаграм, канал в телеграме.
Вывод: чтобы делать приличные иллюстрации без дизайнера - нужно самому стать дизайнером ))
Не без этого. =)
На самом деле задумайтесь только: вы листаете такую статью с Айфона 8 (или любого другого) и видите вместо чистого скрина ещё один телефон, внутри которого скрин. Телефон со скрином на экране вашего телефона только мне кажется бредом и лишней рамкой?
Ещё дико смеюсь с людей, кто все ещё презентует сайты в мокапах с аймаком. То есть листаешь ты такой на мониторе кейс и видишь монитор в мониторе лол.«А вот как наш сайт выглядит на десктопе.» Серьезно? Спасибо, буду знать)
Комментарий недоступен
Как думаешь, что это?)
Комментарий недоступен
Проще и лучше открепить вкладку в новое окно.
Если нужен график на прозрачном фоне, открываю фотошоп и убираю белый фон: инструментом «Волшебная палочка» выбираю белое и нажимаю cmd + x.Если нужен график на прозрачном фоне, то в той же Гуглотаблице в настройках стиля диаграммы ставим Цвет фона — Нет, а не извращаемся в Фотошопе :)
Понравилось, очень простым языком, но при этом толково. Со всеми советами согласен
Отличный гайд, Света, спасибо!
Слишком много инструментария используете, какие-то вещи вообще взаимозаменяемые.
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. Генерируем свои эмоджи (сервис умер)
Продолжение по тегу #генераторы
#ресурсы #иллюстрации
Статья годная, но вот эта вот бирманоильяховщина с транслитерацией названий и аббревиатур всякий раз дико режет глаза :(
Скриншоты на макбуке лучше всего делать в полноэкранном режиме приложения
Если ты разворачиваешь приложение на весь экран, у тебя появляется куча свободного места, какие-то поля и так далее. В статье скриншот сжимается до каких-нибудь 800 точек по ширине — все становится мелкое и фиг что разберешь.
Лучше наоборот, выйти из полноэкранного режима и подогнать размер окна так, чтобы минимизировать количество пустого пространства и лишних элементов интерфейса, а сфокусироваться только на том, что надо показать. Можно даже увеличить все через ⌘+, чтобы текст был покрупнее.
Такие скриншоты более информативные и их легче «прочитать».
Да, согласен. Но зависит от самого скриншота и задачи
Тогда получится окно без рамки и тени.
"Чтобы покрасить диаграмму в цвет издания, нужно узнать его номер в формате #000000, это можно сделать в фотошопе."
в гугл хром установите расширение eye dropper. Эта та же пипетка из фотошопа, только в браузере
Скриншоты можно делать хоть на маке хоть на винде с помощью Яндекс диска) горячими клавишами ctrl+shift+1
Появляется плюсик и выбираем область. Согласен, что с тенью окно браузера выглядит привлекательнее, но разве на винде так сделать без костылей? По-моему только в фотошопе, но это танцы с бубнами.
И в винде, и на маке есть штатные скриншотилки. Зачем для этого Яндекс.Диск?
Хотя, каждому свое
там можно сразу обрезать, обвести что-то, сделать надпись и т.д. Отличный инструмент - скриншоты через ЯД
В стандартной виндовой скриншотилке можно сделать то же самое.
Он удобнее, попробуй)
Комментарий недоступен
Запилите =)
Я подпишусь на обновления ваши, если запилите.
Вы запилите?
Комментарий недоступен
Есть еще Miro - когда нужно идею представить наглядной схемой
https://i.imgur.com/yuXK997.jpg
Такую идею надо сразу в Автокад )))
Спасибо, но вот нормально же общались до этого момента:
Открываю документ в фотошопе, кадрирую, чтобы было место для подписи:То есть у каждого недизайнера по умолчанию должен быть фотошоп?
На винде для простой редактуры изображений отлично подходит MS Paint, без шуток. Откадрировать, сделать коллаж, добавить подписи, подтереть что-то ластиком, изменить размеры холста растягиванием - отличная штука. На маке мне так и не удалось найти ничего похожего по простоте и удобству.
В стандартном Просмотре можно сделать почти все тоже самое.
Если рассматривать пример из статьи про кадрирование и подпись — то все делается в Просмотре. Вообще, учитывая инструментарий, который есть у автора, Photoshop можно смело исключить и сэкономить 500₽/месяц.
Спасибо за информацию, некоторые советы мне точно пригодятся! Я виду свой канал и сам иногда пользуюсь телеграм-ботом для создания обложек или картинок к постам. Правда, результат сильно проще, но если надо сделать быстро, то это подходящий вариант. Называется Gopublishbot - https://t.me/gopublishbot?start=nu_vcc Еще там прикольно можно делать "скриншоты" твитов. Вызываете бота командой @gopublishbot и кидаете линк на твит. Скриншот готов за секунду )
Я точно не на Demiart?
Анимированный график можно сделать с помощью https://livingcharts.com
Для скриншотов в браузере с тенью не проще ли использовать https://browserframe.com чем покупать Mac?
Графики, честно говоря, не очень
подскажите пожалуйста как скачивать в хорошем качестве эмодзи с emojipedia?