Создание изображений в едином стиле для статей блога
Задача: создать изображения в едином стиле для некоторых или всех статей блога. Изображения будут иметь относительно небольшой размер и размещаться рядом с названием статьи.
В решении задачи нам будут помогать отечественные нейросети. Думаю, можно выполнить работу с помощью любых другий нейросетей (лишь бы они для этого годились), а не только тех, что фигурируют в примере.
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
-
Последняя правка20 марта 2024