Как сделать расширенное редактирование фотографий в админке WordPress

Доброго времени суток!

Каждый блогер, ведущий свой блог и пишуший в него статьи, разбавляет их какими-нибудь картинками. Это очень хорошо сказывается на продвижении блога (про визуальный контент прочтите в предидущей статье).

Но все залитые картинки приходится редактировать, потому что без редактирования они или не того разрешения или не того разширения. В общем — не минутное это дело.

Вот и решил я сегодня рассказать и показать вам что есть интересный плагин, который расширяет редактирование изображений в самом WordPress, да еще и может запоминать историю (можно сказать мини-фотошоп).

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

Заинтриговал?

Тогда читаем дальше!

Как сделать расширенное редактирование фотографий в админке WordPress

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

Хотя WordPress и редактирование фотографий обычно не идут рука об руку, плагин DigiWidgets позволяет вам преобразовать вашу панель управления WordPress в редактор изображений. Более того, он также хорошо работает с премиум-темами — давайте выясним, насколько он эффективен для сложных задач редактирования фотографий!

Знакомство с плагином DigiWidgets

Знакомство с плагином DigiWidgets

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

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

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

Ключевые особенности плагина:

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

Цена: бесплатно и $15,99 в год лицензия | Больше информации

Как установить и активировать плагин DigiWidgets

Прежде чем перейти к использованию плагина DigiWidgets, давайте займем минутку, чтобы я объяснил, а вы поняли, как его настроить. Для бесплатной версии вы просто устанавливаете и активируете ее, как и любой другой плагин, а новая вкладка появится на панели инструментов WordPress:

Как установить и активировать плагин DigiWidgets

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

лицензионный ключ API

После того как вы загрузили и установили плагин на сайте WordPress, зайдите в «Настройки — Диспетчер API DigiWidgets», где вы найдете два поля. Вставьте ключ API в первое поле, а адрес электронной почты, связанный с учетной записью DigiWidgets, во второе:

связанный с учетной записью DigiWidgets

Сохраните изменения и вы готовы к работе! Теперь пришло время поговорить о процессе редактирования фотографий.

Как сделать расширенное редактирование фотографий в админке WordPress

Для доступа к редактору DigiWidgets вам сначала необходимо создать проект. Перейдите в «DigiWidgets — Проекты» на панели управления WordPress и нажмите «Добавить новый»:

Для доступа к редактору DigiWidgets

Выберите название для своего проекта, затем выберите «Добавить новый размер» в раскрывающемся списке ниже:

Выберите название для своего проекта

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

Редактор и инструменты DigiWidgets

Теперь пришло время начать редактирование!

В новом проекте выберите изображение из медиа-библиотеки или загрузите новый для работы — вы увидите следующий экран:

В новом проекте выберите изображение

Чтобы работать с вашим изображением, щелкните по нему — вы включите инструменты в правой части редактора. Вот краткий список инструментов, включенных сверху вниз:

  • Функции масштабирования.
  • Возможность переворачивать изображение по вертикали или по горизонтали.
  • Управление фильтрами.
  • Инструмент обрезки.
  • Функция «вставить текст».

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

Система слоев в DigiWidgets

Современное редактирование фотографий использует систему слоев для размещения графики или текста поверх друг друга. Вот пример — обратите внимание на отличие от предыдущего скриншота редактора:

Система слоев в DigiWidgets

Я добавил логотип премиум-темы «Divi» прямо в середину нашего тестового проекта, и вы можете видеть его как на основном изображении, так и в разделе слоев, позволяя выбрать точный элемент, который вы хотите изменить:

добавили текстовый слой рядом с ним

Вы можете нажать кнопку «Добавить изображения» выше или значок «Синий плюс» в левой части селектора слоев, чтобы добавить новые изображения. Чтобы лучше показать, что вы можете достичь с помощью DigiWidgets, я использовал функцию масштабирования, чтобы сфокусироваться на части изображения, переместил логотип, а затем добавили текстовый слой рядом с ним:

сфокусироваться на части изображения

Особенность DigiWidgets: «History»

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

History

После того, как вы нажмете кнопку «История», вы найдете список, в котором подробно описывается каждое сделанное изменение, с самого момента создания проекта. Он даже отслеживает даты и время — и они сохраняются после закрытия проекта.

Функции «Filter» и «Border»

DigiWidgets не включает в себя обширную коллекцию фильтров, но они являются подходящими для легкого редактирования фотографий. Чтобы применить фильтр к любому изображению, выберите нужный слой в редакторе и нажмите на инструмент «Filter» :

Функции "Filter" и "Border"

Вы можете использовать несколько фильтров одновременно, а некоторые из них предлагают возможность изменения их интенсивности (как видно ниже с помощью «Noise»):

возможность изменения их интенсивности

Перемещение по инструменту «Border» позволяет применять границы к холсту или вашему изображению. Вы можете указать ширину каждой границы и выбрать ее цвет из палитры:

выбрать ее цвет из палитры

Как использовать шаблоны DigiWidgets

Плагин DigiWidgets отлично работает вместе с премиум-темами, например: «Divi». Фактически, вы можете увидеть, как его разработчики используют эту тему во время некоторых из своих видеоуроков DigiWidgets. Насколько мне известно, нет ограничений на то, что вы можете делать в тандеме с Divi и DigiWidgets, но экспериментировать с шаблонами — это хорошо с самого начала. Возьмем модуль «Divi Blurb», например:

Divi Blurb

«Blurbs» обычно бывают кратными и используют изображения с одинаковыми размерами. С помощью DigiWidgets вы можете создать уникальный шаблон для этих модулей:

Divi Blurb

Вы также можете добавить любое изображение в новый проект «Blurbs» и выполнить те же изменения, что и с другими изображениями:

Divi Blurb

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

проект для внесения изменений

Подведем итог

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

Давайте повторим шаги, которые вам нужно предпринять для редактирования ваших фотографий:

  • Установите и активируйте плагин DigiWidgets.
  • Познакомьтесь с фоторедактором и его инструментами.
  • Познакомьтесь с системой слоев.
  • Узнайте, как использовать функцию «History» для исправления ошибок.
  • Проверьте инструменты «Filter» и «Border».
  • Ознакомьтесь с функцией шаблона и узнайте, как использовать его вместе на примере «Divi».

У вас есть вопросы по использованию DigiWidgets? Подпишитесь и делитесь своей мудростью с нами в разделе комментариев ниже!

На этом все. До скорых встреч!


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Заказать сайт