Главное Свежее Вакансии Образование
9 177 11 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Сам себе дизайнер. Тестируем 7 онлайн-сервисов для создания визуального контента

Сделали разные картинки по одному техническому заданию с помощью семи самых популярных сервисов для создания визуального контента и рассказываем о плюсах и минусах каждого из них

Из-за обилия сервисов для создания и обработки изображений, начинает казаться, что в 2016 году уже не обязательно быть профессиональным дизайнером, чтобы сделать картинку для соцсетей, статьи или даже инфографику. Достаточно сформулировать идею и обладать вкусом (или, опять же, воспользоваться дополнительными сайтами по подбору сочетаемых цветов и шрифтов, фотостоками) — и вперёд! К тому же есть проверенные временем форматы, которые практически в любой ситуации будут в тему: атмосферные картинки с надписями-цитатами, например.

А чтобы определиться, куда конкретно «вперёд» (какую ссылку вбивать в адресную строку), мы тестируем 7 самых популярных сервисов для создания визуального контента.

Дано:

  • Пак качественных картинок,
  • Подборка авторских цитат,
  • 7 ссылок,
  • Краткое ТЗ: сделать 7 картинок «проверенного» формата.

Стоит оговориться, что человек, которому поручили эту задачу, никакого отношения к профессиональному дизайну не имеет, но Photoshop открывал. А оценки в резюме по каждому сервису носят чисто субъективный характер. Поэтому, если вы несогласны или вам есть, что добавить, пишите в комментариях!

1. Canva

Пожалуй, самый популярный конструктор картинок. В Canva есть огромное количество шаблонов для разных типов изображений — открытки, постеры, картинки для соцсетей, слайды для презентаций, обложки. Каждый шаблон можно «разобрать» по кусочкам и изменить до неузнаваемости. Править можно всё — фон, иконки, линии, шрифты, цвета. Canva создаёт для авторизованного пользователя личный профиль, где можно публиковать созданные в конструкторе картинки и делиться профилем в социальных сетях.

b_57b6f43520cfb.jpg

b_57b534264182c.jpg

Плюсы:

  • Много разнообразных красивых шаблонов — платных и бесплатных.
  • Каждый шаблон можно детально переработать и изменить.
  • Можно менять разрядку букв и настраивать межстрочное расстояние.
  • На картинку можно не только наложить фильтр, выбрав его из предложенных, но и гибко настроить — интенсивность, яркость, контрастность, насыщенность и другие опции представлены в виде плосок с бегунками.
  • Готовая картинка доступна для скачивания в jpg, png и даже в psd по слоям — для печати или дальнейшей обработки.
  • Картинки хранятся в личном кабинете, в любой момент можно вернуться к редактированию или скачать изображение заново.
  • Пока создаётся картинка, можно прочитать чью-нибудь цитату.

Минусы:

  • Англоязычные шрифты, поэтому сложно подобрать подходящий для текста на русском. Сразу выбирайте Roboto или Open Sans. Но, скачав psd, шрифты можно настроить в Photoshop.
  • Чтобы найти нужную иконку/стрелочку, иногда приходится довольно долго листать ленту с элементами, которые представлены в Canva в свободном доступе. Если воспользоваться при этом поиском, то практически все картинки в выдаче будут платными.
  • При дабл-клике картинка сама подстраивается под выбранный шаблон и обрезается, но если вам хотелось кадрировать её иначе, то придётся нелегко. Изменить размеры картинки можно, зажав ctrl, а не привычный shift. Либо можно купить платную подписку :) и бонусом к этому получить возможность загружать и сохранять брендбук (брендовые цвета), автоматический ресайз картинки под разные виды шаблонов и другие функции.

b_57b534370be84.jpg

2. Desygner

Конструктор изображений с элементами соцсети: после авторизации вы можете подписываться на других пользователей, делиться картинками в профиле и работать над одним проектом совместно с другими. У конструктора есть своё приложение для iOS и Android с подобным браузерному функционалом. После авторизации Desygner предлагает выбрать стандартный шаблон или ввести размеры изображения вручную.b_57b6f44307795.jpg

b_57b534d3c1e2c.jpg

Плюсы:

  • При перемещении элементов в макете появляются направляющие, с помощью которых всё можно сделать идеально ровно.
  • Лёгкое масштабирование картинки с зажатым Shift.
  • Настраиваемые фильтры для обработки фонового изображения.
  • При настройке текста, можно изменять не только разрядку между буквами и межстрочное расстояние, но и расстояние между словами.
  • Возможности кастомизации изображения разбиты на категории и подкатегории. Например, на картинку можно прилепить стикер, все стикеры в меню разнесены по подкатегориям — «Животные», «Еда», «Иконки», «Карты» или даже «Мемы».
  • Каждый стикер легко изменить по цвету, размеру, прозрачности и другим параметрам.
  • Рабочее поле разбито постранично (каждый новый проект — на новой странице) и с двух сторон обрамлено линейками.
  • Есть функционал для вёрстки макетов веб-страниц.

Минусы:

  • Сохранить картинку можно только в png или jpg, другие форматы (svg, psd,pdf) доступны по платной подписке.
  • Для обработки фонового изображения предлагается небольшое количество фильтров, и они похожи на старые фильтры Инстаграма.
  • Шрифты только англоязычные, из доступных на русском — Open Sans, PT Sans, Roboto. Остальные автоматически преобразуются во что-то похожее на Times New Roman (шрифт с засечками). Но! Desygner предупреждает о том, что не может применить выбранный шрифт, в отличие от Canva.
  • Сложно работать с текстом из-за некоторых особенностей (например, выделение необходимого количества букв возможно только курсором с начала строки в конец, в другую сторону — не работает).

b_57b534e05f691.jpg

3. Quotescover

Сервис специализируется на картинках с цитатами. И предлагает выбрать подходящее высказывание из существующих (найти по ключевым словам подходящее) на английском языке или в специальное поле добавить свой текст. Однако Quotescover сразу подвёл тем, что не только не имеет русскоязычных шрифтов, то и не отображает их. Поэтому в срочном порядке пришлось переводить предложение на английский.

b_57b6f457eac34.jpg

b_57b538445e4e8.jpg

Плюсы:

  • Простота: всего два поля для ввода текста и минимум настроек.
  • Есть функционал Paint: кисть, заливка, линии, ластик — если вдруг захочется порисовать.

Минусы:

  • Отсутствуют русскоязычные шрифты.
  • Шрифт нельзя выбрать с помощью выпадащего списка или другим образом, только листать, каждый раз ожидая изменения изображения, как и цветовые сочетания.
  • Настроек для обработки изображения практически нет, картинка масштабируется и обрезается сервисом автоматически, заблюрить её можно только с помощью одной галочки, т.е. нельзя обозначить интенсивность размытия.
  • Фильтры можно выбрать только тем же способом, что шрифты, причём они похожи на старые яркие фильтры Инстаграма. Нельзя переместить текст на картинке или уменьшить размер шрифта, из-за этого при применении некоторых шрифтов строки накладываются друг на друга.

b_57b5385e520b4.jpg

4. Adobe Spark

Официальный онлайн-сервис Adobe. С его помощью можно создавать изображения для социальных сетей или статей, верстать веб-страницы (упаковывать свои истории в веб) и создавать видео — открытки, презентации, уроки.

У сервиса немного другая логика (последовательность действий) в отличие от предыдущих: сначала добавляем текст, а потом выбираем шаблон. Но на деле так даже лучше, потому что сразу видишь, как твой текст (а не красивый, который был в шаблоне) трансформируется в выбранной композиции.

b_57b6f462b78a7.jpg

b_57b538803ebaf.jpg

Плюсы:

  • Удобная навигация (по сайту — в левом разворачивающемся меню, по функционалу — в правом, фиксированном), просторное рабочее поле.
  • Конфетка для глаз — навигация стилей в виде круглого трекера с шариком, т.е. стили можно настроить и вручную, выбрав определенные значения, а можно просто крутить шарик и смотреть, как применяются автоматические настройки.
  • Есть направляющие (не сеткой, но отчетливой линией обозначается центр изображения при перемещении элементов).
  • Есть гибкие настройки шрифтов (правда, не настолько гибкие, как в Desygner, например, выставить межбуквенное или межстрочное расстояние вручную нельзя, но можно выбрать из нескольких предложенных вариантов).
  • Можно не только загрузить фоновое изображение, но и найти его по поиску или автоматически выгрузить из LightRoom, Dropbox, Google Photos или Creative Clouds.
  • Приятные глазу фильтры для обработки фоновых изображений.
  • Красивые палетки от Adobe! Можно не думать, какие цвета стоит сочетать и каким образом, а просто выбрать один из предложенных вариантов. При нажатии на иконку смешивания цвета меняются местами по элементам изображения (шрифт, заливка, доп.элементы).
  • Сервис общается с пользователем на каждом экране загрузки (Например, сообщает: «Если ты можешь мечтать об этом, Spark сможет сделать это»).
  • Готовую картинку можно скачать, сохранить в подходящую категорию на ресурсе или поделиться ей в соцсети (дополнительная галочка — публиковать на сайте Adobe Spark).

Минусы:

  • В коллекции представлено много красивых шрифтов, но вновь нет русскоязычных, а потому русскоязычный шрифт смотрится плохо.
  • Нельзя скачать изображение в большом размере в png или форматах для работы по слоям (psd, pdf). Только jpg.
  • На готовое фото автоматически крепится ватермарка #AdobeSpark, которую нельзя убрать.
  • Большинство страниц сайта загружаются крайне медленно.

b_57b538a71e4fc.jpg

5. Recite

Введи свою цитату, выбери стиль и нажми «Создать!», — говорит нам главная страница сервиса. После чего пользователю предлагается выгрузить получившееся изображение в соцсети — Facebook, Twitter, Pinterest, Tumblr, Stumbleupon или скачать на ПК.

b_57b6f4876cc16.jpg

b_57b538ccad39c.jpg

Плюсы:

  • Максимально простой функционал из 3 шагов: набери текст, выбери шаблон, скачай.
  • Можно выбрать цитату из нескольких десятков предложенных на сайте (разбиты по категориям — dreams, love и т.д.) Минусы:
  • Маленький выбор шаблонов.
  • На изображение автоматически ставится ватермарка.
  • Неудобная навигация: шаблоны не разбиты по категориям (форматам), приходится листать «паровозиком», чтобы выбрать подходящее.
  • Русскоязычный шрифт отображается хорошо далеко не на всех предложенных шаблонах.
  • Менять фоновое изображение или что-то в шрифте нельзя, обрабатывать готовую картинку нельзя.

b_57b538eac1243.jpg

6. Visme

Сервис называет себя простым и мощным инструментом для перевода идей в вовлекающий контент в виде презентаций, графиков, веб-страниц и прототипов. На сайте представлено много подробных инструкций, хотя и без них легко разобраться, как и что работает.

b_57b6f49208b32.jpg

b_57b53900877b6.jpg

Плюсы:

  • Есть возможность выбрать «Custom Dimensions» — задать необходимые размеры изображения вручную.
  • При перемещении элементов появляются направляющие, поэтому легко можно выровнять их по центру или относительно друг друга.
  • Много настроек для текста: тень, прозрачность, цвет, выравнивание.
  • Активный элемент можно двигать с помощью стрелочек на клавиатуре.
  • Есть внутренняя галерея изображений с поиском. Правда, картинки с ватермарками.
  • К элементу (изображению) можно добавить отражение.
  • При копировании элемента сохраняются применённые к нему ранее настройки (угол поворота, прозрачность, цвет, месторасположение на картинке).

Минусы:

  • Со шрифтами та же картина, что и в предыдущих сервисах. Arial, Georgia и Helvetica — единственные доступные на русском.
  • Скачать готовое изображение бесплатно можно только в формате jpg, после приобретения премиум-аккаунта появляется возможность скачать своё творчество в png, pdf и html 5.
  • На изображение автоматически ставится ватермарка Visme.
  • Скачать готовую картинку приемлемого качества удалось только... с шестого раза! Изначально была идея использовать подложку под текст, но угадать с расположением элементов не вышло: текст уползал (скорее, потому что он русскоязычный) и картинка генерировалась криво.
  • С помощью Visme сложно делать максимально простые картинки, которые задумывались по нашему ТЗ. Но, судя по функционалу, сверстать страничку или собрать презентацию в этом сервисе гораздо проще, чем в предыдущих, т.к. Visme заточен под это.
  • При работе над проектом, каждому незакреплённому слою присваивается как минимум 2 тулбара, с помощью которых можно данный элемент изменять. Из-за этого возникает ряд сложностей, например, когда неожиданно всплывший тулбар полностью закрывает другой элемент.

b_57b5390b15286.jpg

7. Мемгенератор

А что? Если именно такое изображение как нельзя лучше проиллюстрирует мысль, заключённую в вашем посте/тексте, то этот сервис придёт к вам на помощь.

b_57b6f49bed616.jpg

Плюсы:

  • Простота. Выбираем персонажа (если это затруднительно, то можно посмотреть, какие изображения создавались с каждым из них), вводим верхнюю строчку текста, вводим нижнюю строчку текста, генерируем готовое изображение.
  • Поддерживается русский! Хоть и в одном шрифте.

Минусы:

  • Данный сервис нет смысла анализировать по гибким настройкам, т.к. они полностью отсутствуют.
  • Если вы «не в теме», то велика вероятность выбрать совсем неуместную к подписи картинку.
  • На изображение автоматически ставится ватермарка.

b_57b5391ed394f.jpg

Возможно, создавая более сложные изображения с помощью этих сервисов каждый день, вы найдёте гораздо больше плюсов и минусов любого из них, но при дизайне по нашему тех.заданию оценивалась простота и гибкость работы с текстом и одним фоновым изображением. Естественно, для каждых нужд удобней будет применять отдельный сервис. Либо всё-таки разобраться с Photoshop :)

PS: картинки с резюме по каждому сервису создавались в Canva.

+3
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Александр Бовыкин
Спасибо за подробный разбор и проверку "в бою"! Выбрал себе парочку - погляжу, как мне сгодятся.
Ответить
Евростудио
Веб-студия полного цикла из Новосибирского Академгородка
Евростудио 43245
Будем рады, если вы поделитесь потом своим мнением! :)
Ответить
Ilya Belov
А видео сделать, gif, есть подобные сервисы?
Ответить
Евростудио
Веб-студия полного цикла из Новосибирского Академгородка
Евростудио 43245
Конечно, есть. И в формате браузерных расширений, и онлайн-сервисы, и десктопные.
Ответить
MADCATS
Делаем контент-маркетинг и контент-проекты
editor 46827
Итого — Canva.
Уж если сами использовали для подписей.
Ответить
Евростудио
Веб-студия полного цикла из Новосибирского Академгородка
Евростудио 43245
Canva использовали потому, что в ней, как показалось, самый широкий выбор иконок (и можно подгрузить свои) и удобно работать именно с таким форматом изображений.
А если конкретно цитаты на картинки писать, то удобнее будет, пожалуй, Adobe Spark.
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Мы на днях запустили бета-версию нашего конструктора HTML баннеров — bannerboo.com. И да, у нас все шрифты русские )

Понятно, что пока многого не хватает, но картинки, как на примере, можно сделать легко
Ответить
Евростудио
Веб-студия полного цикла из Новосибирского Академгородка
Евростудио 43245
Мы обязательно потестим! Спасибо :)
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Будем признательны за обратную связь. Спасибо )
Ответить
Станислава 53342
просто супер! спасибо! многого не знала. эти сервисы могут жизнь облегчить значительно ) хочу еще немного более глобального материала добавить. то есть что вообще следует постить, что людям интересно: http://socialair.ru/articles/content_type/
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.