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

Зробили різні картинки по одному технічному завданню з допомогою семи найпопулярніших сервісів для створення візуального контенту і розповідаємо про плюси і мінуси кожного з них.

З-за великої кількості сервісів для створення і обробки зображень, починає здаватися, що 2016 році вже не обов'язково бути професійним дизайнером, щоб зробити картинку для соцмереж, статті або навіть інфографіку. Достатньо сформулювати ідею і володіти смаком (або, знову ж, скористатися додатковими сайтами підбору поєднуваних кольорів і шрифтів, фотостоками)   і вперед! До  ж є перевірені часом формати, які практично в будь-якій ситуації будуть у тему: атмосферні картинки з написами-цитатами, наприклад.
 щоб визначитися, куди конкретно «вперед» (яку посилання вбивати в адресний рядок), ми тестуємо 7 найпопулярніших сервісів для створення візуального контенту.
image

Дано:
  • Пак якісних картинок,
  • Добірка авторських цитат,
  • 7 посилань,
  • Короткий ТЗ: зробити 7 картинок «перевіреного» формату.
Варто обмовитися, що людина, якому доручили цю задачу, ніякого відношення до професійного дизайну не має, але Photoshop відкривав. А оцінки в резюме по кожного сервісу носять чисто суб'єктивний характер. Тому, якщо ви незгодні або вам є, що додати, пишіть в коментарях!
1. Canva
Мабуть, самий популярний конструктор картинок. У Canva є величезна кількість шаблонів для різних типів зображень   листівки, постери, картинки для соцмереж, слайди для презентацій, обкладинки. Кожен шаблон можна «розібрати» по шматочках і змінити до невпізнання. Правити можна все   фон, іконки, лінії, шрифти, кольори. Canva створює для авторизованого користувача особистий профіль, де можна публікувати створені у конструкторі картинки і ділитися профілем у соціальних мережах.

image

image
Плюси:
  • Багато різноманітних красивих шаблонів   платних і безкоштовних.
  • Кожен шаблон можна детально переробити і змінити.
  • Можна змінювати розрядку букв і настроювати міжрядкова відстань.
  •  картинку можна не тільки накласти фільтр, вибравши його з запропонованих, але і гнучко налаштувати   інтенсивність, яскравість, контрастність, насиченість і інші опції представлені в вигляді плосок з бігунками.
  • Готова картинка доступна для скачування в jpg, png і в psd верствам — для друку або подальшої обробки.
  • Картинки зберігаються в персональному кабінеті, в будь-який момент можна повернутися до редагування або завантажити зображення заново.
  • Поки створюється картинка, можна прочитати будь-чию цитату.
Мінуси:
  • Англомовні шрифти, тому складно підібрати підходящий для тексту на російською. Відразу вибирайте Roboto або Open Sans. Але, завантаживши psd, шрифти можна налаштувати у Photoshop.
  • Щоб знайти потрібну іконку/стрілочку, іноді доводиться досить довго гортати стрічку з елементами, які представлені в Canva в вільному доступі. Якщо скористатися при цьому пошуком, то практично всі картинки в видачу будуть платними.
  • За дабл-клік картинка сама підлаштовується під вибраний шаблон і обрізається, але якщо вам хотілося кадрувати її інакше, то доведеться нелегко. Змінити розміри картинки можна, затиснувши клавішу ctrl, не звичний shift. Або можна придбати платну підписку :) і бонусом до цьому отримати можливість завантажувати і зберігати брендбук (брендові кольору), автоматичний ресайз картинки під різні види шаблонів і інші функції.
image

2. Desygner
Конструктор зображень з елементами соцмережі: після авторизації ви можете підписуватися на інших користувачів, ділитися картинками в профілі і працювати над одним проектом спільно з іншими. У конструктора є свій додаток для iOS і Android з подібним браузерному функціоналом. Після авторизації Desygner пропонує вибрати стандартний шаблон або ввести розміри зображення вручну.
image

image

Плюси:
  • При переміщенні елементів у макеті з'являються напрямні, з допомогою яких можна зробити ідеально рівно.
  • Легке масштабування картинки з затиснутим Shift.
  • Налаштовувані фільтри для обробки фонового зображення.
  • При налаштуванні тексту, можна змінювати не тільки розрядка між буквами і міжрядкова відстань, але і відстань між словами.
  • Можливості кастомізації зображення розбиті на категорії і підкатегорії. Наприклад, на картинку можна приліпити стікер, всі стікери в меню рознесені по підкатегоріями — «Тварини», «Їжа», «Ікони», «Карти» або навіть «Меми».
  • Кожен стікер легко змінити за кольором, розміром, прозорості та іншими параметрами.
  • Робоче поле розбито посторінково (кожен новий проект   на новій сторінці) і з двох сторін обрамлена лінійками.
  • Є функціонал для верстки макетів веб-сторінок.
Мінуси:
  • Зберегти картинку можна тільки в png або jpg, інші формати (svg, psd,pdf) доступні за платній підписці.
  • Для обробки фонового зображення пропонується невелика кількість фільтрів, і вони схожі на старі фільтри Инстаграма.
  • Шрифти тільки англомовні, з доступних на російською   Open Sans, PT Sans, Roboto. Решта автоматично перетворюються у щось схоже на Times New Roman (шрифт зарубками). Але! Desygner попереджає про те, що не може застосувати вибраний шрифт, в відміну від Canva.
  • Складно працювати з текстом з-за деяких особливостей (наприклад, виділення необхідної кількості букв можливе лише з курсором початку рядка в кінець, в іншу сторону   не працює).
image

3. Quotescover
Сервіс спеціалізується на картинках з цитатами. І пропонує вибрати відповідне висловлювання з існуючих (знайти ключовими словами підходяще) на англійською мовою або в спеціальне поле додати свій текст. Однак Quotescover одразу підвів тим, що не тільки не має російськомовних шрифтів, то і не відображає їх. Тому в терміновому порядку довелося переводити пропозицію на англійська.
image

image

Плюси:
  • Простота: всього два поля для введення тексту і мінімум налаштувань.
  • Є функціонал Paint: кисть, заливка, лінії, ластик — якщо раптом захочеться помалювати.
Мінуси:
  • Відсутні російськомовні шрифти.
  • Шрифт можна вибрати з допомогою выпадащего списку або іншим чином, тільки гортати, щоразу чекаючи зміни зображення, як і колірні поєднання.
  • Налаштувань для обробки зображення практично немає, зображення масштабується і обрізається сервісом автоматично, заблюрить її можна тільки з допомогою однієї галочки, тобто не можна визначити інтенсивність розмиття.
  • Фільтри можна вибрати тільки тим ж способом, що шрифти, причому вони схожі на старі яскраві фільтри Инстаграма.
image

4. Adobe Spark
Офіційний онлайн-сервіс Adobe. З його допомогою можна створювати зображення для соціальних мереж або статей, верстати веб-сторінки (упаковувати свої історії в веб) і створювати відео   листівки, презентації, уроки.
 сервісу трохи інша логіка (послідовність дій) в відміну від попередніх: спочатку додаємо текст, а потім вибираємо шаблон. Але на так навіть краще, тому що відразу бачиш, як твій текст (а не красивий, який був у шаблоні) трансформується в вибраної композиції.
image

image
Плюси:
  • Зручна навігація (за сайту   лівому розгортається меню, функціоналу   правом, фіксований), просторе робоче поле.
  • Цукерочка для очей   навігація стилів вигляді круглого трекера з кулькою, тобто стилі можна налаштувати і вручну, вибравши певні значення, а можна просто крутити кульку і дивитися, як застосовуються автоматичні настройки.
  • Є направляючі (не сіткою, але виразною лінією позначається центр зображення при переміщенні елементів).
  • Є гнучкі налаштування шрифтів (правда, не настільки гнучкі, як у Desygner, наприклад, виставити межбуквенное або міжрядкова відстань вручну не можна, але з кількох запропонованих варіантів).
  • не Можна тільки завантажити фонове зображення, але і знайти його за пошуку або автоматично вивантажити з LightRoom, Dropbox, Google Photos або Creative Clouds.
  • Приємні оку фільтри для обробки фонових зображень.
  • Красиві палетки від Adobe! Можна не думати кольори, які варто поєднувати і яким чином, а просто вибрати один із запропонованих варіантів. При натисканні на іконку змішування кольору міняються місцями елементів зображення (шрифт, заливка, доп. елементи).
  • Сервіс спілкується з користувачем на кожному екрані завантаження (Наприклад, повідомляє: «Якщо ти можеш мріяти про цьому, Spark зможе зробити це»).
  • Готову картинку можна завантажити, зберегти у відповідну категорію ресурсі або поділитися нею в соцмережі (додаткова галочка   публікувати на сайті Adobe Spark).
Мінуси:
  •  колекції представлено багато красивих шрифтів, але знову немає російськомовних, а бо російськомовний шрифт виглядає погано.
  • Неможливо завантажити зображення в великому розмірі в png або форматах для роботи з верствам (psd, pdf). Тільки jpg.
  •  готове фото автоматично кріпиться ватермарка #AdobeSpark, яку можна прибрати.
  • Більшість сторінок сайту завантажуються вкрай повільно.
image

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

image

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

6. Visme
Сервіс називає себе простим і потужним інструментом для перекладу ідей в контент який втягує в вигляді презентацій, графіків, веб-сторінок і прототипів. На сайті представлено багато докладних інструкцій, хоча і без них легко розібратися, як і що працює.
image

image
Плюси:
  • Є можливість вибрати «Custom Dimensions»   визначити необхідні розміри зображення вручну.
  • При переміщенні елементів з'являються напрямні, тому легко можна вирівняти їх  центру або відносно один одного.
  • Багато налаштувань для тексту: тінь, прозорість, колір, вирівнювання.
  • Активний елемент можна рухати з допомогою стрілок на клавіатурі.
  • Є внутрішня галерея зображень з пошуком. Правда, картинки з ватермарками.
  •  елементу (зображення) можна додати відображення.
  • При копіюванні елемента зберігаються застосовані до нього раніше налаштування (кут повороту, прозорість, колір, місце розташування на картинці).
Мінуси:
  •  шрифтами та ж картина, що і в попередніх сервісах. Arial, Georgia і Helvetica   єдині доступні на російською.
  • Завантажити готове зображення безкоштовно можна тільки в форматі jpg, після придбання преміум-аккаунта з'являється можливість завантажити свою творчість у png, pdf і html 5.
  • На зображення автоматично ставиться ватермарка Visme.
  • Завантажити готову картинку прийнятної якості вдалося тільки… з шостого рази! Спочатку була ідея використовувати підкладку під текст, але вгадати з розташуванням елементів не вийшло: текст відповзав (швидше, тому що він російськомовний) і картинка генерувалася криво.
  •  допомогою Visme складно робити максимально прості картинки, які замислювалися нашому ТЗ. Але, судячи з функціоналу, зверстати сторінку або зібрати презентацію в цьому сервісі набагато простіше, ніж в попередніх, т. к. Visme заточений під це.
  • При роботі над проектом, кожному незакрепленному шару присвоюється як мінімум 2 тулбара, з допомогою яких можна даний елемент змінювати. Через це виникає ряд труднощів, наприклад, коли несподівано новий тулбар повністю закриває інший елемент.
image

7. Мемгенератор
 що? Якщо саме таке зображення як не можна краще проілюструє думка, укладену в вашому пості/тексті, то цей сервіс прийде до на допомога.
image

Плюси:
  • Простота. Вибираємо персонажа (якщо це важко, то можна подивитися зображення, які створювалися з кожним з них), вводимо верхній рядок тексту, вводимо нижню рядок тексту, генеруємо готове зображення.
  • Підтримується російська! Хоч і в одному шрифті.
Мінуси:
  • Даний сервіс немає сенсу аналізувати гнучким налаштуванням, т.що вони повністю відсутні.
  • Якщо ви  не в темі», то велика ймовірність вибрати зовсім недоречну до підписи картинку.
  • На зображення автоматично ставиться ватермарка.
image

Можливо, створюючи більш складні зображення з допомогою цих сервісів кожен день, ви знайдете набагато більше плюсів і мінусів будь-якого з них, але при дизайні нашому тех. завдання оцінювалася простота і гнучкість роботи з текстом і одним фоновим зображенням. Природно, для кожних потреб зручніше буде застосовувати окремий сервіс. Або все-таки розібратися з Photoshop :)
PS: картинки з резюме по кожного сервісу створювалися в Canva.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.