Deprecated: str_replace(): Passing null to parameter #1 ($search) of type array|string is deprecated in /var/www/jsd/data/www/jsd.ru/plugins/system/admintools/src/Feature/CustomAdminFolder.php on line 83
Создание изображений в едином стиле для статей блога
Skip to main content

Создание изображений в едином стиле для статей блога

Задача: создать изображения в едином стиле для некоторых или всех статей блога. Изображения будут иметь относительно небольшой размер и размещаться рядом с названием статьи.

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

1. О чём этот фильм? Да ни о чём.

Немного лирики (вместо вступления).

Чтобы нейросеть могла сгенерировать нужное пользователю изображение, сначала нужно составить текстовое описание того, что мы хотим увидеть – промт (англ. Promt – подсказка), как это модно нынче называть.

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

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

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

З.Ы.: Можно "работу мозга" проигнорировать и использовать в качестве промта заголовок статьи, но конкретно для этой задачи результат получается не подходящий.

2. Задание на создание промта для изображения

В примере будем использовать браузерную версию GigaChat.

Иллюстрацию будем создавать для статьи Программа "Подготовка к Школе": готовим первоклассников к успешному старту.

Чтобы получить желанный промт для иллюстрации статьи блога, пишем в чате:

Создай короткое текстовое описание иллюстрации к статье, текс которой приведен ниже:

После этой фразы нужно вставить полный текст статьи.

Для перевода строки, но не отправки сообщения, нажимаем Shift + Enter.

Дополнительная информация:

3. Оцениваем полученный промт

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

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

В нашем примере будем пробовать использовать промт "как есть".

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

4. Отдаём промт Кандинскому

Для генерации изображения будем использовать браузерную версию нейросети Kandinsky.

Помещаем промт целиком, но без каких-либо дополнений в специально созданный для него отсек.

Дополнительная информация:

5. Выбор стиля

Теперь нужно перейти на вкладку "Стиль" и выбрать "Рисунок карандашом" из богатого списка доступных стилей.

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

Теперь можно нажимать на желто-зелёную кнопку с какой-то мигающей фигнёй для запуска генерации.

6. Первый результат

Первый результат оказался вполне приличным, по крайней мере, соответствующий описанию.

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

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

Вывод очевидный - нужно корректировать промт.

7. Годный результат

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

Особое внимание при выборе окончательного варианта картинки, если в кадре есть люди (а они у нас точно есть), стоит обратить на конечности, особенно на руки, особенно на пальцы. Да, "ржать" частенько предстоит в голос, но выкладывать на публику такую смехоту точно не стоит. Добивайтесь годного результата.

Измененный промт выглядит так:

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

Основные изменения:

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

Ну и не забывайте: Кандинскому порой глубоко вдоль относительно нюансов и деталей, что Вы пишите в своём промте.

8. Немного Фотошопа

Оригинальный png файл сгенерированного изображения перемещен в папку постоянного хранения изображений для данного сайта на локальном компьютере. Имя файла изменено на алиас статьи: school-preparation-program.png

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

PhotoShop -> Изображение -> Тримминг...

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

После применения изменений достаточно просто сохранить полученный результат без применения дополнительных опций.

9. Оптимизация изображения

Теперь нужно оптимизировать изображение для сайта. В принципе, можно и оригинальную PNGшку загрузить, но у неё слишком большой объём и излишне большое разрешение для наших целей, поэтому так делать не хорошо.

Для штучной оптимизации отлично подойдёт всё тот же Фотошоп.

PhotoShop -> Файл -> Экспортировать -> Сохранить для Web

В окне оптимизации важно следующее (такие настройки важны только для данной инструкции):

  • Формат оптимизированного файла - JPEG
  • Качество сжатия - Среднее (30)
  • Размер изображения 480 x 480 пикс.

Сохранить файл, задав ему имя в соответствии с нашим внутренним стандартом:

school-preparation-program_sq_m_q30.jpg

Дополнительная информация:

10. Изображение в статье блога

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

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

В оформлении статьи изображение "позеленело", так настроен шаблон вывода статьи блога на сайте: иллюстрация выводится в качестве фона пустой ячейки конструктора, под фон подложен один из основных цветов сайта (#5FAAA5), а к самому фону применён режим наложения "жесткий свет". Такие возможности даёт визуальный конструктор YOOtheme Pro, работающий внутри Joomla или WordPress

Дополнительная информация:
  • Создано
    19 марта 2024
  • Последняя правка
    19 марта 2024