Как сделать фотошоп конвейером контента / Хабр

Здравствуй Хабр! На этот раз я хотел бы поделиться с вами интересным способом создания большого количества шаблонных картинок с разными данными за очень короткий промежуток времени с помощью небольшого количества программирования. Начнем с того, что у некоторых людей иногда встает задача сделать много однотипных картинок, схожих по структуре, но с разной наполненностью и на это уходит порядочно времени. При чем часто данные для этих картинок лежат в экселе или могут быть экспортированы в него. Собственно с помощью него мы и будем создавать магию по созданию контента. Сразу оговорюсь, все примеры шуточные и на настоящий контент ну никак не тянут. Я не дизайнер и эта статья про принцип работы, а не про то как сделать классный контент. Уверен, что комбинируя разные элементы, красивый текст, удачные картинки можно добиться легкого создания картинок, выполненных в одном стиле со вкусом. Существуют приложения с похожим функционалом, но может, кому-то данный тутор будет полезен, тем более что здесь все можно настроить под себя)

Настройка «датасета»

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

Далее сохраняем сие деяние в формате CSV — разделитель запятая. На самом деле подойдет любой CSV, главное глянуть какой там разделитель. Фотошоп принимает только разделитель запятую и, по моим наблюдениям, только txt формат, но об этом позже.

Стоит обратить отдельное внимание на пустые строки после таблицы. Их быть не должно. Проверить их наличие и удалить можно открыв сохраненный файл через блокнот(там будет что-то вроде ‘;;;;;;;;’)

Немного кода

Так как настроить все с первого раза, еще и грамотно вряд ли получится, плюс эксель не лучший способ генерировать рандомные данные и обрабатывать их, воспользуемся скриптом на питоне для обработки получившегося файла. В конкретном случае я имитировал проблему того, что некоторые имена написаны в неполном виде (не Дмитрий а Дима), а некоторые в полоном. Прочитаем файл, разобьем каждую строку по разделителю «;». Тут если честно наверное моя частная проблема, потому что при сохранении в формате CSV — разделитель запятая через эксель, разделитель как был так и остается точкой с запятой. Поэтому я разбиваю строки таблицы по нему и дальше обрабатываю имена. Вам стоит открыть CSV через блокнот и посмотреть какой у вас разделитель. В силу того, что строки подобны друг другу, можно без опасений обращаться через индексы к конкретному слову. Я создал словарь имен и если имя написано не полно, то заменяю его на полную версию. Дальше записываю получившиеся строки уже через запятую обратно в файл. Тут можно не открывать старый файл, как сделал я, а сразу сохранять в новый текстовик, так будет даже проще. На этапе изменения данных вы можете преобразовывать их как угодно. Важно: не трогать первую строку, она должна остаться такой какая есть, разве что поменяются разделители и сохранить количество отделяемых разделителем слов в строке. Стоит пару раз данные вывести в консоль, что бы глянуть все ли в порядке.

Код обработки входного файла

Итоговый CSV файл должен быть такой (тут пример пустых строк, такие стоит удалить заранее, мой скрипт такое предусматривает и не ломается)

По факту это уже просто строки, но нам это уже не важно

Экспорт данных в фотошоп

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

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

Теперь нам нужно определить переменные — то есть слои, которые будут меняться

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

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

Нажимаем окей, данные добавлены

Запускаем цех по производству контента

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

Собственно останется немного поправить расположение слоев, или еще чего-то, но это уже мелочи. Потратив один раз время на настройку такого способа создания контента вы сэкономите тонну времени и нервов. Удачного копипаста!

Как обрезать фото в Photoshop

24 июня 2020 Ликбез Технологии

Удалите лишнее, чтобы подчеркнуть главное или выровнять баланс снимка.

Как обрезать фото в Photoshop без дополнительных настроек

1. Выберите на панели инструментов «Рамка» (Crop Tool) или воспользуйтесь горячей клавишей C.

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

3. Нажмите Enter (Windows) или Return (Mac OS) либо кликните по галке на панели сверху. В результате инструмент обрежет все фрагменты изображения за пределами выделенной области.

Сейчас читают 🔥

  • Как скачать видео с YouTube на любое устройство

Как настроить параметры обрезки в Photoshop

Вы можете управлять особенностями обрезки на горизонтальной панели, которая отображается в верхней части окна после выбора инструмента «Рамка».

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

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

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

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

5. Будучи активной, опция «Удалить отсеч. пикс.» уничтожит фрагменты, не попавшие в область выделения, сразу после обрезки. Если же убрать галочку, эти участки скроются, но сохранятся. Вы сможете в любой момент вернуть их, увеличив холст или переместив относительно него изображение.

6. Параметр «С учётом содержимого» может пригодиться, если вам понадобится обрезать область, в которую входят участки за краями изображения. В таком случае система заполнит пустые зоны содержимым, которое максимально похоже на окружающие фрагменты. Например, если рядом будет небо, в пробелах появятся сгенерированные облака и синева.

Читайте также 🖥📸💻

  • 6 обязательных книг о Photoshop на русском для новичков и профессионалов
  • 15 лучших графических редакторов, которые не стоят ни копейки
  • Как объединить слои в Photoshop: 10 способов
  • Как открыть PSD-файл без Photoshop: 11 программ и сервисов
  • 15 лучших фоторедакторов для разных платформ

Как создать текстовое поле в Photoshop (Полное руководство)

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

Чтобы создать текстовое поле в Photoshop, выберите инструмент «Текст», а затем щелкните и перетащите его на холст. Будет создано текстовое поле, которое ограничивает ваш текст своими параметрами, создавая так называемый текст абзаца. По мере добавления текста его размер будет автоматически изменяться в зависимости от размеров текстового поля.

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

Итак, давайте рассмотрим все, что вам нужно знать о создании текстового поля (и работе с ним) в Photoshop.

Как создать текстовое поле в Photoshop

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

Чтобы создать текстовое поле, выберите инструмент «Текст» на панели инструментов или нажмите T . Если вы нажмете и удержите значок инструмента «Текст», вы можете выбрать между вертикальным или горизонтальным текстом. Убедитесь, что он установлен на инструмент горизонтального типа.

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

В Photoshop текстовый инструмент автоматически настраивается на добавление замещающего текста. Этот латинский текст (известный как Lorem Ipsum) не имеет никакого значения, но часто используется, чтобы показать, где в макете будет размещена основная копия до того, как фактическая копия станет доступной.

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

Выбрав правильное выравнивание, установите флажок на панели параметров, чтобы создать текстовое поле. Новый текстовый слой будет добавлен к 9Панель 0005 Слои .

Изменение размера текстового поля

После создания текстового поля его размер можно изменить по мере необходимости. Чтобы изменить размер текстового поля, выберите Edit > Free Transform или нажмите Control + T (Windows) или Command + T (Mac).

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

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

Чтобы переместить текстовое поле в другое место, выберите инструмент перемещения или нажмите V . Убедитесь, что выбран слой с текстовым полем, щелкните и перетащите текстовое поле в новое положение. Вы также можете использовать клавиши со стрелками для перемещения текстового поля, удерживая Shift при этом, чтобы перемещать текстовое поле с большими приращениями.

Как выровнять текстовое поле внутри фигуры

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

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

Убедитесь, что выбран текстовый слой, затем откройте инструмент перемещения, нажав V.

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

Если это произошло, переместите текстовый слой на передний план, переместив его в верхнюю часть панели «Слои». Чтобы переместить слой, щелкните текстовый слой и перетащите его над слоем формы. Теперь текст будет поверх фигуры.

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

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

Как использовать фигуру в качестве текстового поля

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

Добавив фигуру в свой проект, выберите текстовый инструмент, нажав T . Убедитесь, что на панели слоев выбран слой с фигурой, и щелкните внутри фигуры с помощью текстового инструмента.

Текст-заполнитель будет добавлен внутрь фигуры. Если вы заполните форму текстом, вы заметите, как текст повторяет форму слоя формы, которая в данном случае является эллипсом.

Как изменить цвет фона текстового поля

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

Например, создайте прямоугольную форму с помощью инструмента формы ( U ) и щелкните по фигуре с помощью инструмента текста ( T ) выбран. После добавления текста-заполнителя к фигуре вы можете настроить выравнивание текста на панели параметров.

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

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

Измените цвет обводки (или контура), выбрав цветовой блок рядом с Обводка . Вы также можете увеличить размер контура, увеличив пиксель обводки.

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

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

Если вы все еще немного не уверены в том, как работать с текстом в Photoshop, это руководство по работе с текстом поможет вам в этом!

Удачного редактирования!

Проволочная рамка Текстовый эффект в Photoshop Tutorial

2

SHARES

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

Шаг 1

Создайте какой-нибудь текст и примените стиль слоя, щелкнув маленькую букву «f» на панели слоев. Добавьте обводку, как показано здесь. Цвет обводки на данном этапе не важен.

Шаг 2

Измените тип заливки на градиент для штриха

Шаг 3

Добавьте скос и тиснение. Выберите «Тиснение обводки». Не забудьте отрегулировать размер, чтобы текст хорошо смотрелся. Вы увидите, когда это выглядит правильно, это уродливо, когда слишком велико. Измените контур блеска на показанный    

Шаг 4

Еще немного уточните форму, добавив контур к фаске            

Шаг 5

Если вы перейдете к параметрам наложения в верхней части панели стилей, вы увидите непрозрачность и непрозрачность заливки. Уменьшите Непрозрачность заливки до 0. Придайте ей тень. Вы видите здесь проблему с тенью? Он добавляет тень ко всему слову, а не только к контуру. Мы должны быть хитрыми и найти обходной путь.

Шаг 6

Пока скройте тень, и вот как должна выглядеть ваша панель текста и слоев. (не обращайте внимания на наложение градиента на снимке экрана)  

Шаг 7

Вот что многие люди не знают. Вы можете добавлять стили слоя в группы слоев, и они учитывают прозрачность всех вложенных слоев вместе взятых. Что? Это означает, что вы можете заставить его делать то, что вы хотите. Выберите слой типа и нажмите Ctrl/Cmd+G, чтобы добавить группу слоев

Шаг 8

Теперь примените тень к группе (Группа 1) и обратите внимание, что теперь у вас есть полный контроль над ней как над каркасом. . Очень круто.

Экстра Кредит

Если вы хотите немного оживить его, вы можете добавить луч света, используя эффекты освещения. Filter>Render>Lighting Effects (Примечание: эффекты освещения работают ТОЛЬКО в режиме RGB).

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *