Как оформлять статьи на сайт или в блог без дизайнера?

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

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

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

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

Тренды графического дизайна 2019 года, которые может использовать каждый

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

Смелые сочетания цветов

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

рис1

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

Техника дуплекс

Эта техника подразумевает выполнение дизайна в двух цветах и их полутонах. Ее используют ведущие дизайнеры в оформлении популярных fashion-блогов. Здесь важно определить, целесообразно ли применение тренда к тематике вашего ресурса.

рис2

При оформлении изображений такую технику часто называют “pop-colors”. Можно сочетать несколько схем с двумя цветами и полутонами, чтобы сделать оформление ярче. Но не переусердствуйте с количеством комбинаций. Несмотря на то, что цвета всего два, несколько таких пар уже могут смотреться несбалансированно.

Мягкие многотонные градиенты

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

рис3

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

Текстуры

Популярным приемом для создания трендового дизайна является применение текстурированных деталей. Например, текстуры дерева, камня, металла и их сочетание.

рис4

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

Минимализм

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

рис5

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

Отборные фотоматериалы

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

рис6

Примеры трендовых иллюстраций и материалов:

  • неординарные фотографии, необычные обстановки;
  • фото с рисованными элементами;
  • снимки настоящих текстовых блоков, например, биллбордов, табличек, плакатов;
  • фото, сделанные спонтанно в непринужденной обстановке, без постановки и наигранных эмоций;
  • снимки, сделанные в неоновом свете.

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

От теории перейдем непосредственно к практике работы с онлайн редакторами и создадим изображение для статьи блога.

Мастер -класс по самостоятельному созданию изображения

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

рис7

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

Затем следуйте простому алгоритму:

  • подберите шаблон на рабочей странице – с ним работать будет легче и быстрее;
  • добавьте или загрузите изображение;
  • напишите текст при необходимости;
  • добавьте графические элементы: схемы, блоки, стрелки и т.д.;
  • измените размер картинки, чтобы она смотрелась в вашей статье органично.

Вы можете использовать заранее подготовленные рисунки или находить нужные в коллекциях сервиса бесплатно.

Подбор шаблона и работа с изображениями

На рабочей странице в области просмотра слева от пустого макета сразу предлагаются варианты шаблонов. Выберите подходящий вариант и кликните по нему – он появится на макете.

рис8

Чтобы добавить к шаблону собственное изображение, перейдите в раздел Загрузки на панели инструментов слева. Выбрать готовые профессиональные фото можно в разделе Фото или Фон. Для поиска используйте строку в области просмотра – просто впишите нужные ключевые слова для подбора.

рис9

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

Совет. Оформляйте изображения в одном стиле, чтобы они не отвлекали внимание пользователя и смотрелись подобно.

Графические элементы

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

рис10

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

Текст

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

рис11

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

Загрузка

Для скачивания готовой работы кликните на кнопку в правом верхнем углу и выберите подходящий формат. Если нужно изменить размеры, кликните на кнопку на верхней синей панели.

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

Разработка сайта
Мы не используем платные CMS и за счет этого мы привлекаем низкой ценой клиентов. Не используем шаблоны у нас только уникальный дизайн. В подарок мы делаем SEO оптимизацию сайта и настройку контекстной рекламы.
Заказать
Продвижение сайта
Частный оптимизатор выходит гораздо дешевле web-студии. Я помогу вам вывести cайт в ТОП-3 и настроить автоматические продажи. В стоимость услуг входит аудит, техническая и seo оптимизация сайта.
Заказать
БЛОГ под КЛЮЧ
Сэкономьте годы возни на созданием и продвижением своего блога. Отдайте это дело блоггеру с пятилетним стажем. В услугу уже входит SEO оптимизация блога. В подарок вы получаете видео-курс «Мой авторитетный блог»
Заказать




4 комментария
  1. все-таки чувство прекрасного должно быть развито-) [good]

    Ответить на комментарий →
  2. Очень полезная статья. Самое главное это научиться делать красивые и яркие картинки. Уверен, что посетители их оценят. :)

    Ответить на комментарий →
  3. Услуги дизайнеров порой стоят не мало. Можно например освоить фотошоп. А можно и этот сервис. Красиво оформленную статью, да еще и с хорошим контентом интересно читать. Это как стиль сайта, своя изюминка. Бывает такое, что хочешь оформить статью, а картинок надцать штук и все нужные, тогда можно, например, объединить несколько фото в одно целое. А вот о цвете оформления, это уже другая история. Все это можно назвать одним словом – SEO в комплексе. [good]

    Ответить на комментарий →
  4. Отличные советы. Я тоже считаю, что от оформления статей много чего зависит. Если его сделать не правильно, то нет ни каких гарантий, что читатель дочитает её до конца. :)

    Ответить на комментарий →
Оставь свой первый комментарий и получи:
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]