Недостаточно просто «присутствовать» в интернете. Важно быть заметными и выделяться визуально. Формировать доверие к бренду за счёт эффектных, стильных и узнаваемых иллюстраций и картинок для блога, сайта, соцсетей и других площадок. Если вы хотите научиться делать всё это своими руками, если хотите создать красивую картинку и не готовы пока тратиться на дизайнера, гид по сервису Canva для вас.
Мозг человека обрабатывает визуальную информацию в 60 000 раз быстрее , чем простой текст. Эффективность восприятия, конверсия (переходы) и социальная активность (репосты, лайки) повышаются при наличии яркого, выбивающегося из привычного, визуального ряда. Проще говоря, пост с фотографией или статью с картинкой заметят больше людей, чем просто текст.
Заполните форму и получите запись видеоурока по контент-плану
Вы можете создавать визуал сами в несколько кликов. Даже без специальных навыков и знания программ. Для этого достаточно будет освоить всего один сервис — Канву.
Принцип работы графических сервисов
Основной принцип работы многих графических сервисов — конструктор Drag
Canva Как Пользоваться | Дизайн социальных сетей
Интерфейс сервиса русифицирован. Это важно, потому что не все графические редакторы переведены на русский. Также Канва обладает бесплатными мобильными приложениями на базе IOS и Android. Её можно скачать в виде программы на ПК для Windows и Mac.
С чего начать работу в Канве
Для работы в сервисе необходимо пройти регистрацию при помощи почты или фейсбук-аккаунта.
Далее редактор попросит ответить на ряд типичных вопросов, чтобы выяснить ваши предпочтения в направлениях дизайна. Функционал сервиса не зависит от этих ответов, просто редактор будет выдавать на главной странице более релевантные направления для создания графики.
От редактора:
Если вы хотите, чтобы Канва была на русском, зайдите в настройки учётной записи и ниже поля с паролем выберите русский язык в выпадающем меню. Преимущество: в шаблонах с текстом все кириллические варианты будут сверху. Не нужно будет тратить время на то, чтобы менять шаблон с латиницей и разочаровываться от того, что у идеально подобранного дизайнерского шрифта нет кириллической версии.
Бесплатная и платная версии программы: в чём отличие
Канва обладает широким функционалом и постоянно обновляется. Однако не все компоненты редактора доступны бесплатно, потому в сервисе есть и платный премиум-доступ.
Бесплатный функционал хоть и ограничен, однако вполне достаточен для создания оригинального визуального контента. Платные авторские изображения, графические элементы вроде лейблов, векторных картинок можно заменить личными фото или загруженными из интернета. Кроме того можно приобрести понравившееся изображение или шаблон из коллекции редактора за 1$.
Платный доступ открывает более продвинутые возможности для пользователей. С ним можно:
- Создать красивую картинку для одной социальной сети, а потом изенить размер готового изображения под формат другой площадки. То есть вы сможете поменять высоту и ширину готового макета без необходимости подстраивать все элементы дизайна под новые параметры. А также можно удалить и/или заменить фон.
- Использовать расширенные возможности анимированного дизайна. В обычной версии редактора пользователям доступно всего 7 стилей.
- Создавать фирменный стиль. Этот функционал пригодится и крупной компании, и малому бизнесу. Он позволяет загружать собственные корпоративные цвета и шрифты для использования в редакторе.
- Запланировать публикацию на определённую дату и время. Серсив автопостинга доступен для 9 соцсетей.
Как узнать, нужен ли премиум-аккаунт Канвы
Платный аккаунт предоставляет расширенный авторский контент: фото, картинки и шрифты. Стоимость — 12,95$ в месяц. При покупке годовой подписки цена снижается до 9,95$.
Если вы не знаете, стоит ли сразу покупать платную версию, исходите из нужного вам функционала и активности постинга.
Конечно, удобно, чтобы весь возможный функционал и контент были в рамках одного сервиса. Однако не всегда у пользователя есть необходимость в платном доступе. А протестировать премиум-аккаунт может любой желающий — бесплатно в 30-дневный период.
Давайте посмотрим на примере, как создать красивую картинку, презентацию или обложку для бизнеса. Использовать мы будем интерфейс платного аккаунт, но постараемся ограничиться бесплатными возможностями.
Графика для социальных сетей: общие советы
Прежде чем приступить к оформлению публикации, нужно изучить свою потенциальную аудиторию, её визуальные предпочтения. Например, более возрастная аудитория позитивнее оценит формальный, сдержанный стиль оформления. Молодёжь, вероятно, откликнется на провокационно яркое оформление.
Канва даёт такие общие рекомендации:
- В оформлении лучше избегать слишком броских цветов, высоких контрастов, которые некомфортны для человеческого глаза.
- Постарайтесь оформить аккаунт однородно — выдержанная цветовая гамма и единый стиль оформления повысят узнаваемость бренда среди пользователей соцсети.
- Не размещайте на изображениях много текста. Картинка нужна для привлечения внимания и ключевой информации, а основной текст лучше оставить в описании.
- Соблюдайте баланс и интервалы в расположении элементов. Сервис подскажет, как отцентровать надпись и гармонично расположить одни графические объекты внутри других. Используйте эти подсказки.
Пример пошагового создания картинки в Канве
После авторизации на главной странице в поиске вписываем название нужного дизайна по ключевому слову.
Обратите внимание на кнопку настраиваемых размеров. Эта функция позволит создавать дизайн изображения для блога с нужными параметрами высоты и ширины.
Шаблоны картинок под разные соцсети представлены с уже установленными параметрами. Они соответствуют требованиям социальных сетей или общих рекомендаций.
Выбор шаблона
После клика открываются предложения по шаблонам.
Здесь можно выбрать макет и видоизменять его под свои цели. Некоторые шаблоны русифицированы, некоторые — нет. При выборе отдайте предпочтение в первую очередь нужным вам элементам, вроде рамок, окон или лейблов. Изображения, цветовая гамма или надписи не так важны, и изменить их намного проще.
Работа с макетом изображения
После выбора шаблона вы попадёте на рабочую страницу: макет, область просмотра фотографий/элементов, панель инструментов слева и дополнительная панель над макетом.
Кликните на фото, чтобы удалить, заменить или отредактировать его, или перейдите в раздел «Фото», «Фон» или «Загрузки» для добавления своих или стоковых изображений.
Предположим, вам нужно сделать пост с приглашением подписчиков на дегустацию вина в кафе. Для этого нужно создать красивую картинку, передающую атмосферу события. Во вкладке «Фото» ищем изображения напитков. Отфильтровать их можно по ключевому слову «вино».
Сервис также понимает сочетание ключевых слов, например, «вино дегустация». Это упрощает поиск тематических изображений. В премиум-аккаунте есть фильтр, который выдаст только бесплатные изображения.
Значок “Беспл” в окошке поиска
Обратите внимание: добавленные кадры можно редактировать непосредственно в дизайне. На панели над макетом доступны фильтры, настройки яркости, контрастности, цветокоррекция. Старайтесь обрабатывать фото для аккаунта или рубрик при помощи одинаковых настроек и фильтров, чтобы сохранить однородность дизайна.
Canva скачать бесплатно на русском языке
Canva – хороший аналог Фотошопа. Графический редактор используется для ретуши фото, создания постов в социальные сети и оформления плакатов, открыток, видеопрезентаций. Предлагает онлайн-версию, компьютерную и мобильную программу. Вы можете скачать Canva на ПК бесплатно для Виндовс 10, 11 по проверенной ссылке с нашего сайта.
Обратите внимание, что в настоящий момент Canva.com недоступен в России. Для доступа к площадке, загрузки последней версии и установки новых обновлений потребуется включить ВПН-сервис.
Программа предлагает обширную коллекцию шаблонов, которые можно использовать для быстрого оформления проектов. Можно выбрать готовый дизайн презентации, визитной карточки, рекламного поста на сайт, инфографики и т.д.
Все элементы можно будет изменять и адаптировать под себя. В редакторе есть возможность:
- менять размер, угол наклона и положение объектов;
- выводить слои на передний план или перекрывать их другими элементами;
- добавлять эффекты, например тень или обводку;
- снижать прозрачность стикеры, снимка, текста.
Итог можно скачать в различных форматах. Возможен экспорт в PDF, PPTX, MP4, GIF и других. Вы также сможете получить URL-адрес проекта и просматривать или комментировать работу по ссылке.
Вы можете скачать сервис Канва на ноутбук или компьютер. В бесплатном режиме отсутствует возможность использовать часть шаблонов, стоковых изображений, аудиозаписей, стикеров и т.д. Помимо этого ограничены опции замены фона на снимке и экспортирование отредактированного изображения в формате SVG.
Для доступа ко всем опциям и встроенному контенту потребуется оплачивать премиум-подписку. Также вы можете загрузить взломанную или старую версию с торрента или другого стороннего сайта. Однако файлы из непроверенных источников часто содержат вирусы, поэтому рекомендуем пользоваться официальными источниками.
Скриншоты Canva
Особенности Canva
- Поддержка анимации. Софт позволит устанавливать разнообразные анимированные эффекты к редактируемым изображениям: плавные переходы между страницами или добавление движения к объектам в дизайне. При создании материала с анимацией можно применять стили из каталога, а также регулировать скорость.
- Работа с текстом. Приложение предлагает инструмент для нанесения надписей с любым оформлением. Можно ввести свои данные, после чего выбрать подходящий шрифт и при необходимости увеличить размер символов. Есть возможность настроить цвет заливки, добавить тень и обводку. Также вы сможете сделать изогнутый текст.
- Добавление своих медиа. Вы сможете загружать на сервис свои фотографии, видеоролики, аудиозаписи. Их можно будет добавлять на слайды и встраивать в проект. Все файлы будут храниться в облачном хранилище разработчика, благодаря чему вам не потребуется импортировать их повторно при необходимости.
- Смена фонового изображения. В софте представлена коллекция картинок, текстур с узорами, градиентов для установки в качестве заднего плана слайда. Также фон можно залить любым цветом из палитры.
- Обработка фотографий. Во встроенном фоторедакторе можно кадрировать снимок, применить цветовой фильтр и настроить яркость, контрастность и насыщенность вручную, размыть картинку и многое другое.
- Интеграция с другими приложениями. Можно скачать Канву бесплатно на русском языке на компьютер и соединить платформу с Google Диском, YouTube, GIPHY, Pexels. Кроме этого предоставляется возможность работать с платформами для рисования, перевода текста в аудио, а также оформления QR-кодов.
- Редактор доступен для различных платформ. Вы сможете использовать инструменты ПО в любом браузере, например Google Chrome, Mozilla Firefox, Safari, или установить софт на устройства с Windows, macOS, Android или iOS.
Плюсы и минусы Канвы
Преимущества:
- предлагает инструмент для записи видео с веб-камеры;
- все проекты сохраняются в облако разработчика;
- позволит поменять цветовую палитру всего дизайна одним нажатием кнопки;
- дает открыть несколько файлов в разных вкладках;
- можно скачать Canva бесплатно на русском для компьютера или телефона.
Недостатки:
- платформу нельзя использовать без регистрации;
- для доступа к встроенным шаблонам, стикерам, фото без ограничений нужна ПРО-подписка;
- нельзя оплатить Premium с помощью карты российского банка;
- в бесплатной версии нет возможности изменить размер холста и выходное качество картинки.
Для чего используется Canva
Вы можете скачать бесплатно полную версию Canva Pro, где есть возможность:
- обрабатывать фотографии, ретушировать портреты;
- создавать открытки, плакаты, инфографику;
- оформлять презентации с эффектами и озвучкой;
- разрабатывать интерактивные доски;
- монтировать небольшие видеоролики.
Видеообзор Плюсы и минусы онлайн-редактора Canva.
Возможности графического редактора Канва
Технические характеристики Canva
- Категория:графический редактор
- Версия: 1.62.0.0
- Лицензия: условно-бесплатная
- ОС: Windows 11, 10, 8, 7 / macOS / Android / iOS
- Язык: RU, ENG
- Разрядность: 32 и 64 бит
- Официальный сайт:canva.com
- Процессор: от 1 ГГц
- Оперативная память: от 2 ГБ
- Жесткий диск: от 500 МБ
- Размер: 134 МБ
Canva не предлагает инструментов для автоматической ретуши портретов, изменения черт лица и т.д. Также сменить размер фото и настроить качество изображения можно только в платной версии. Для работы с портретными кадрами воспользуйтесь удобной программой ФотоМАСТЕР.
Источник: free-photo-editors.ru
Canvas F.A.Q
Несколько дней назад я предложил позадавать на Хабре интересующие вопросы по Canvas. Под Хабракатом — ответы на 27 вопросов.
1. Зачем нужен Canvas, что это вообще такое, какова поддержка браузерами, какова основная область применения, насколько развиты фреймворки, примеры?
Canvas — низкоуровневое API для отрисовки графики. Поддерживается всеми современными браузерами. Естественно, не поддерживается устаревшими версиями IE (8 и ниже)
Фреймворки развиваются, хотя им ещё нужно повзрослеть. Базовые примеры можно найти на MDC. Более мощные примеры можно поискать на сайтах а-ля Chrome Experiments или в примерах приложений на фреймворках, например LibCanvas
2. Когда нужно использовать Canvas, а когда Flash?
Flash быстрее, кроссбраузернее, с хорошими инструментами и фреймворками.
Canvas сейчас используется, в основном, энтузиастами и экспериментаторами.
Особой причины уходить с рынка флешерам нету.
Но Canvas’ом занимаются такие крупные игроки, как Google, Mozilla, Apple, Microsoft, все они оптимизируют и ускоряют отрисовку Canvas, постепенно отмирают старые браузеры и приходят новые. Посмотрите на Firefox 2.0 и Firefox 4.0. За три года скорость увеличилась на порядок и основной скачок сделан именно с выходом четвёртой версии. Аналогично — Опера.
Также, за это время успел появиться Хром и выпустить уже 12 мажорных версий своего браузера. В общем, у HTML5 и Canvas в частности — светлое будущее.
3. Когда использовать Canvas, а когда SVG?
Это холиварная тема. Есть разные взгляды на неё.
Почитайте это обсуждение: habrahabr.ru/blogs/javascript/114129/#comment_3678242
Посмотрите эту картинку:
Почитайте статью «Thoughts on when to use Canvas and SVG»
С одной стороны, при использовании Canvas необходимо будет реализовывать то, что уже реализовано в SVG. С другой стороны, в Canvas можно применить такие оптимизации, которые в SVG невозможны, например отрисовка из кеша.
На мобильных телефонах актуально использование CSS3 вместо SVG и Canvas, т.к. оно ускоряется аппаратно и очень плавно работает.
4. Какую литературу почитать?
Рекомендую начать с Mozilla Developers Network, там очень классно и с примерами описаны основы Canvas. После этого придумайте себе задание и постарайтесь его реализовать. API — очень простой, тут главное — опыт.
Есть свежая книжка «HTML5 Canvas» издательства O’Reilly Media. Я не читал, но O’Reilly обычно выпускают классные книжки.
5. Как сделать скриншот Canvas?
Есть небольшая библиотека canvas2image она позволяет сохранять Canvas что на сервер, что на клиент. На клиенте сохранение производится при помощи toDataURL. На сервере получается содержимое при помощи getImageData, транслируется в base64 код и отправляется POST-запросом. На сервере достаточно сделать что-то типа такого кода:
if (empty($_POST[‘data’])) exit; $data = $_POST[‘data’]; $name = md5($data); $file = «$path/$name.png»; if (!file_exists($file)) < $image = str_replace(» «, «+», $data); $image = substr($image, strpos($image, «,»)); file_put_contents($file, base64_decode($image)); >echo $file;
Если «Скриншот канваса === Сохранить канвас как картинку», то:
/* раз */ canvas.getAsFile(«test.jpg», «image/jpeg»); // File https://developer.mozilla.org/en/DOM/File /* два */ canvas.toDataURL(); // String формата data url /* пример */ function test()
Важно Вы должны задать фиксированные размеры канваса (через width/height или style), иначе получете плохие данные из toDataURL
6. Интересуют методы улучшения быстродействия (поднятие fps).
Есть разные методы оптимизации, которые зависят от приложения. Три из них я описывал в топике Пятнашки на LibCanvas. Это:
* Обновление холста исключительно при необходимости
* Вместо перерисовки всего холста перерисовывать только изменившиеся куски
* Отрисовка объектов в буфер (что позволяет рисовать объект каждый кадр как набор пикселей, а не применять все фильтры и кучу матана)
Вам очень поможет профайлер в вашем любимом браузере.
7. Работа с видеозахватом
Если вы про захват видео с камеры:
API есть только в черновике спецификации Media Capture API ближайший релиз спецификации возможен в PhoneGap — возможно есть в транке. Работать с ним будет очень просто. Вешается обработчик на «устройство», каждый кадр передается в виде картинки в формате data uri:
function success(data) < var container = document.createElement(«div»); for (var i in data) < var img = document.createElement(«img»); img.src = data[i].url; container.appendChild(img); >document.body.appendChild(container); > function error(err) < if (err.code === err.CAPTURE_INTERNAL_ERR) < alert(«The capture failed due to an internal error.»); >else < alert(«Other error occured.»); >> navigator.device.capture.captureImage(success, error, < limit: 1 >);
8. Каково самое эффективное решение на данный момент для попиксельного доступа при отрисовке произвольного изображения на Canvas (без WebGL)? Например, ручная прорисовка граней при построении 3D с использованием закраски по Гуро/Фонгу.
Для попиксельного доступа есть только одно решение — использовать getImageData
9. Есть ли пути эффективно и кросплатформенно смасштабировать канву со всеми внутренностями под размеры экрана?
Попробуйте использовать css. canvas < width: 100%; height: 100%; >. Как-то так. Но js-код должен учитывать этот кусок, т.к. сместятся координаты.
10. Поддержка и быстродействие на Android/iOS устройствах
Поддерживается полностью. Правда, я на iPhone2 заметил неподдержку fillText, но это единственное.
Проблема с производительностью, но кое-что можно запустить. Пока для мобильников лучше использовать CSS3. Возможно, в будущем, что-то поменяется.
11. Интересует самый быстрый способ нарисовать точку (например, для графика). Однопиксельную и четырёхпиксельную, произвольного цвета.
Самый быстрый с точки зрения производительности — использовать fillRect для одиночных отрисовок и getImageData+putImageData для массовых отрисовок.
12. В каком виде хранится, отображается и перерисовывается «мир» в играх с видом сбоку (как playbiolab.com), т.е. игрок побежал вправо камера подвинулась вместе с ним и мир «подвинулся»
Я точно не знаю, как оно делается в biolab. Есть несколько путей. Можно наложить несколько слоёв canvas друг на друга, отрисовать на нижнем мир и отображать нужную часть при помощи CSS.
13. 3d-canvas
14. Редакторы — в чём писать?
Подходит любой редактор JavaScript. Раньше я пользовался Netbeans 7, сейчас перешёл на Jetbrains WebIde
15. База данных
Для хранения данных на стороне клиента есть два современных стандарта — webStorage и IndexedDB.
IndexedDB — это крутой интерфейс с кучей возможностей, описывался на Хабре, а webStorage — простое key-value хранилище
16. Canvas и IE
В IE до девятой версии не поддерживается. Все попытки сделать его поддерживаемыми можно назвать подходящими только для очень узкого круга задач и не дают вменяемой скорости.
Имхо, единственный вариант — это Google Chrome Frame, плагин, который устанавливается на полубраузер как Flash или SilverLight и превращает говно в конфетку Internet Explorer в современный браузер.
17. Как посчитать расстояние между нарисованными объектами, есть ли готовые решения
Зависит от объектов. Некоторые вещи делаются очень просто. Например, расстояние между точками считается по теореме Пифагора. Между кругами — считаем расстояние между точками от отнимаем радиусы. У более сложных фигур есть свои законы.
Кое-что (по крайней мере пересечения ректанглов/кругов/полигонов) уже есть в LibCanvas. Если у вас какие-то особые требования — необходимо искать алгоритмы. Я могу посоветовать вот что:
Известные алгоритмы определения столкновений и реакции на них во флэше.
18. Как и какими средствами лучше делать анимации на Canvas?
19. Работа с текстом в Canvas (в т.ч. анимирование)
Текст отрисовывается при помощи fillText/strokeText. Свои шрифты можно подключать при помощи CSS3.
На него воздействуют все правила — такие как тени, трансформации, установка цветов и т.п. К примеру, с помощью светлой тени на тёмном фоне, можно легко сделать светящийся текст
20. Работа с изображениями.
21. Использование Бэк Буффера, как отрисовать один Canvas в другой.
Вы можете отрисовать какую-либо информацию в скрытый Canvas, который затем использовать точно так же как картинку (смотреть предыдущий пункт).
Буферизация позволяет ускорить отрисовку многократно. Например, отрисовать один градиент из буфера в 5 раз быстрее, чем отрисовать этот же градиент напрямую.
Использовать очень просто:
// Создаём буфер нужного размера: var buffer = document.createElement(‘canvas’); buffer.width = 64; buffer.height = 32; buffer.ctx = buffer.getContext(‘2d’); // или при помощи LibCanvas: var buffer = LibCanvas.Buffer(64, 32, true); // Отрисовываем в него всё необходимое buffer.ctx.fillRect(/* */) // отрисовываем его на наш холст: var ctx = canvas.getContext(‘2d’); ctx.drawImage( buffer, 0, 0 );
22. Анимация в канвасе происходит методом полной перерисовки.
Таким образом информация обо всех объектах хранится в объекте JS и каждый раз перерисовывается, или можно как то создавать спрайты и слои?
Да, есть различные приёмы. Можно использовать буфера для того, чтобы не отрисовывать десятки мелких объектов, можно перерисовывать холст только частично, но чаще всего дешевле просто всё перерисовать, чем понять, что перерисовывать надо, а что — нет.
23. Хотелось бы узнать как с помощью canvas нарисовать 3д объект(желательно с учетом перспективы) и вращать?
24. Отрисовка SVG в Canvas
Можно при помощи CanVG. Смысла практически нету)
25. Насколько различается поддержка в браузерах или все следуют стандарту?
Различия минимальны. Обнаруживались мелкие баги, легкие несоответствия. Например, Опера не могла отрисовать прямоугольник с отрицательными размерами сторон:
ctx.fillRect(50, 50, -20, -20);
По разному сжимаются и поворачиваются картинки. Например, в Хроме при повороте на углах заметны зубья (нету сглаживания) 
Зато он лучше, чем Fx и Opera растягивает картинки: 
Есть ещё мелкие различия в JavaScript. Например, в некоторых браузерах sort реализует неустойчивую сортировку, так что, если элементы сортировать по Z-индексу, то элементы с одинаковым Z-индексом будут менятся местами.
Это очень мелкие нюансы. Большинство — скрыто за дружелюбным API фреймворков. Лично я разрабатываю только под один браузер и в большинстве случаев всё работает совершенно корректно и в остальных.
26. putImageData vs drawImage
Буду краток — putImageData значительно медленнее. Более того, с увеличением размеров картинки — увеличивается медлительность.
27. Мне было бы очень интересно послушать про типовые реализации основного функционала canvas-библиотек, таких как: эмуляция слоев, определение активного элемента (на котором в данный момент находится курсор), создание системы управления событиями и т. д.
Этот вопрос задавали мне чаще всего, потому для него — отдельный топик)
Вопросы без ответов
Ребята, кто может дать ответы на эти вопросы — прошу в комменты
1. Как вывести текст на canvas в IE (IE8- + excanvas.js)? Пробовал text.canvas.js с гуглокода — выводит ошибку про отсутствие нечто glyphs.
Я не использую эмуляцию в IE
2. Существуют ли какие-то секретные библиотеки, умеющие рисовать линии переменной толщины. В случае с прямыми это относительно несложно реализовать «костыльным» способом, а вот всякие кривые Безье — видимо, только на низком пиксельном уровне.
3. Существуют ли какие-то секретные библиотеки, умеющие рисовать градиентную раскраску линий. Ну то есть чтобы цвет плавно менялся между узлами вдоль линии, не обязательно прямой. Такая функция есть, например, в OpenGL.
Вывод
Источник: habr.com