Что такое генератор в фотошопе
You can generate JPEG, PNG, or GIF image assets from the contents of a layer or layer group in a PSD file. Assets are automatically generated when you append a supported image format extension to a layer name or a layer group name. Optionally, you can also specify quality and size parameters for the generated image assets.
Generating image assets from a PSD file is particularly useful for multidevice web design.
To understand the image asset generator better, consider a simple PSD file (download from this link) with the following layer hierarchy:
The layer hierarchy for this file has two layer groups—Rounded_rectangles and Ellipses. Each of these layer groups contains five layers.
Follow these steps to generate image assets from this PSD file:
- With the PSD file open, select File > Generate > Image Assets .
- Append appropriate file format extensions ( .jpg , .jpg , or .jpg ) to the names of the layers or layer groups from which you want to generate image assets. For example, rename the layer groups, Rounded_rectangles and Ellipses, as Rounded_rectangles.jpg and Ellipses.jpg ; and the layer, Ellipse_4 as Ellipse_4.jpg .
The special characters : and * are not supported in layer names.
Photoshop generates the image assets and saves them in a subfolder alongside the source PSD file. If the source PSD file is not saved yet, Photoshop saves the generated assets in a new folder on your Desktop.
Image asset generation is enabled for the current document. Once enabled, the feature remains available whenever the document is opened next. In order to disable image asset generation for the current document, deselect File > Generate > Image Assets .
Generate multiple assets from a layer or layer group
To generate multiple assets from a layer/layer group, separate the asset names with commas. For example, the following layer name generates three assets:
Ellipse_4.jpg, Ellipse_4b.jpg, Ellipse_4c.jpg
Save assets to a subfolder
You can choose to save image assets generated from particular layers/layer groups in a subfolder directly under the document's asset folder. Include the subfolder name in the layer/layer group name; for example:
Let's extract the icon on top and the top row of the Global Hotspots image grid as image assets:
Можно создавать графические ресурсы JPEG, PNG или GIF из содержимого слоя или группы слоев в PSD-файле. Ресурсы автоматически формируются при добавлении поддерживаемого расширения формата изображения к имени слоя или группы слоев. При желании можно также указать качество и размер для формируемых графических ресурсов.
Формирование графических ресурсов из PSD-файла особенно полезно в сфере веб-дизайна для нескольких устройств.
Инструкции по созданию и экспорту веб-графики см. в документе Экспорт файлов Photoshop в различных форматах.
Чтобы лучше понять принцип работы генератора графических ресурсов, рассмотрим простой PSD-файл (загрузите его по этой ссылке) со следующей иерархией слоев:
Иерархия слоев для этого файла имеет две группы слоев: Rounded_rectangles (Прямоугольники со скругленными углами) и Ellipses (Эллипсы). Каждая из этих групп слоев содержит пять слоев.
Выполните следующие действия, чтобы сформировать графические ресурсы из этого PSD-файла.
- Откройте PSD-файл и выберите Файл > Сформировать > Графические ресурсы .
- Добавьте соответствующие расширения форматов файлов ( .jpg , .jpg или .jpg ) к названиям слоев или групп слоев, из которых требуется сформировать графические объекты. Например, переименуйте группы слоев, Rounded_rectangles и Ellipses в Rounded_rectangles.jpg и Ellipses.jpg ; а слой Ellipse_4 в Ellipse_4.jpg .
В именах слоев нельзя использовать специальные символы : и * .
Photoshop формирует графические ресурсы и сохраняет их в подпапке вместе с исходным PSD-файлом. Если исходный PSD-файл еще не сохранен, Photoshop сохраняет сформированные ресурсы в новую папку на рабочем столе.
Формирование графических ресурсов включено для текущего документа. После включения эта функция остается доступной при каждом последующем открытии документа. Чтобы отключить формирование графических ресурсов для текущего документа, снимите флажок Файл > Сформировать > Графические ресурсы .
Формирование нескольких ресурсов из слоя или группы слоев
Чтобы сформировать несколько ресурсов из слоя или группы слоев, разделяйте имена ресурсов запятыми. Например, следующее имя слоя формирует три ресурса:
Ellipse_4.jpg, Ellipse_4b.jpg, Ellipse_4c.jpg
Сохранение ресурсов в подпапке
Можно сохранить графические ресурсы, созданные из определенных слоев или групп слоев, во вложенную папку непосредственно в папке ресурсов документа. Включите имя вложенной папки в имя слоя/группы слоев, например:
Формирование графических ресурсов из PSD-файла особенно полезно в сфере веб-дизайна для нескольких устройств. Рассмотрим следующий пример веб-дизайна и его структуру слоев:
Давайте извлечем значок сверху и верхнюю строку таблицы изображений Global Hotspots (Глобальные точки доступа) в качестве графических ресурсов изображения:
You can generate JPEG, PNG, GIF, or SVG image assets from the contents of a layer or layer group in a PSD file. Assets are automatically generated when you append a supported image format extension to a layer name or a layer group name. Optionally, you can also specify quality and size parameters for the generated image assets.
Generating image assets from a PSD file is particularly useful for multidevice web design.
To understand the image asset generator better, consider a simple PSD file (download from this link) with the following layer hierarchy:
The layer hierarchy for this file has two layer groups—Rounded_rectangles and Ellipses. Each of these layer groups contains five layers.
Follow these steps to generate image assets from this PSD file:
- With the PSD file open, select File > Generate > Image Assets .
- Append appropriate file format extensions ( .jpg , .jpg , .jpg, or .svg ) to the names of the layers or layer groups from which you want to generate image assets. For example, rename the layer groups, Rounded_rectangles and Ellipses, as Rounded_rectangles.jpg and Ellipses.jpg ; and the layer, Ellipse_4 as Ellipse_4.jpg .
The special characters : and * are not supported in layer names.
Photoshop generates the image assets and saves them in a subfolder alongside the source PSD file. If the source PSD file is not saved yet, Photoshop saves the generated assets in a new folder on your Desktop.
Image asset generation is enabled for the current document. Once enabled, the feature remains available whenever the document is opened next. In order to disable image asset generation for the current document, deselect File > Generate > Image Assets .
Generate multiple assets from a layer or layer group
To generate multiple assets from a layer/layer group, separate the asset names with commas. For example, the following layer name generates three assets:
Ellipse_4.jpg, Ellipse_4b.jpg, Ellipse_4c.jpg
Save assets to a subfolder
You can choose to save image assets generated from particular layers/layer groups in a subfolder directly under the document's asset folder. Include the subfolder name in the layer/layer group name; for example:
Let's extract the icon on top and the top row of the Global Hotspots image grid as image assets:
В Adobe Photoshop CC появилась замечательная опция, значительно облегчающая жизнь и ускоряющая работу веб-дизайнерам — это автоматическое сохранение слоёв и/или групп в файлы в режиме реального времени после любого изменения или переименования слоя/группы!
Иными словами, если раньше, чтобы сохранить какой-либо фрагмент документа, например, логотип сайта, веб-дизайнеру приходилось нарезать, а затем дублировать фрагмент в отдельный документ и только после сохранять для веб, то теперь Photoshop сохраняет нужный фрагмент в режиме реального времени после любого его изменения, будь то добавление стилей слоя, фильтра, изменение непрозрачности или мазок кистью.
Плагин, выполняющий эту функцию, называется Adobe Generator и входит в пакет обновления Photoshop версии 14.1.
Adobe Generator позволяет сохранять слои в реальном времени в файлы изображений в виде видимых пикселей слоя. Плагин обрезает документ по видимым пикселям слоя, пример:
На примере показано, как плагин Adobe Generator сохраняет слои в виде документов. Документ sample.psd состоит из четырёх слоёв — фонового и слоёв круг.jpg, прямоугольник.jpg, треугольник.jpg. Плагин сохранил три слоя, имеющие суффиксы в виде расширений графических файлов, как отдельные файлы. На миниатюрах видно, что Photoshop сохранил только видимые пиксели слоёв. Затем файл «круг.jpg» был открыт в Photoshop, на рисунке видно, что сохранёны пиксели круга на прозрачном слое.
Для сохранения слоёв нужно включить опцию Файл —> Сформировать —> Графические ресурсы (File —> Generate —> Image Assets и поставить в конце имени слоя суффикс в виде точки и расширения файла (.jpg, .jpg, .jpg).
Примечание. Кроме того, должна быть включена команда «Включить генератор» в Редактирование —> Установки —> Внешние модули (Edit —> Preferences —> Plu-Ins, галка у Enable Generator). Эта команда включена по умолчанию.
Подробности смотрите в видео о работе Adobe Generator:
Файлы сохраняются в папке sample-assets, которую Photoshop генерирует в той директории, где находится рабочий файл PSD.
Если файл ещё PSD не сохранён, то Photoshop создаёт папку sample-assets на рабочем столе.
Синтаксис Photoshop Generator`а
В именах слоёв можно использовать латинские и кириллические буквы, цифры, знак пробел и подчеркивания, но нельзя использовать спецсимволы /, : и *
Префикс перед именем слоя означает размер слоя, суффикс после имени — качество.
Сохранение нескольких файлов из одного слоя
Плагин предоставляет нам возможность сохранить несколько файловы из одного слоя, для этого в строке названия слоя следует вписать несколько имён с расширениями через запятую или знак «плюс».
Вписываем в название слоя выражение image.jpg,thumb.jpg — Photoshop создаёт два файла image.jpg и thumb.jpg
Примеры:
80% image.jpg24 + 60×60 thumb.jpg.jpg90%
80% image.jpg24, 60×60 thumb.jpg.jpg90%
Размеры
При указании размера возможно смешивать разные единицы измерения. Поддерживаемые единицы — пиксели, сантиметры, миллиметры, и дюймы. Если параметр размера не указан, Photoshop считает, что это пиксели. Между значениями размеров и знаком x допускается ставить пробелы для улучшения читабельности.
Примеры:
Если единицы измерения не указаны, Photoshop берёт за единицы измерения пиксели.
Примеры:
120×90 image.jpg или 120 x 90 image.jpg — размер файла 120 пикселей ширина и 90 высота
400 x 60cm image.jpg — 400 пикселей ширина и 60 см высота
300mm x 20cm image.jpg — 300 мм ширина и 20 см высота
200% image.jpg — размер файла в пикселях будет составлять 200% от размера слоя по ширине и высоте
Внимание! Между префиксом размера и именем файла пробел обязателен!
НЕЛЬЗЯ добавлять пробел между числовым значением размера и его единицами, например:
120 x 90 px image.jpg
40 px x 60 image.jpg
400 mm x 20 cm image.jpg
НЕЛЬЗЯ ставить вместе абсолютный и относительный размер, напр.:
180% x 100px image.jpg
Качество сохранения
Вы можете добавить дефис (минус) перед параметром качества (суффиксом) для улучшения читабельности.
Примеры:
image.jpg8 или image.jpg-8 32-х битный PNG
image.jpg-100% — JPG с качеством 100%
image.jpg-1 — JPG с качеством 10%
image.jpg-32 — 32-х битный PNG
Изменение размеров с сохранением пропорций
В Photoshop Generator предусмотрена и такая возможность. К примеру, Вы хотите получить картинку с шириной 250 пикселей, но так, чтобы высота картинки была подогнана к ширине с сохранением пропорций. Для этого вместо высоты или ширины в префиксе Вам надо поставить знак вопроса.
Примеры:
250x? image.jpg
?x60in image.jpg
Владелец данного сайта. Графический дизайнер, специалист по Фотошопу с опытом 10+ лет. Также веду канал о графическом дизайне на Ютуб и развиваю тематическое сообщество во ВКонтакте. Связаться со мной можно через комментарии, форму обратной связи или по электронной почте [email protected]
Основная сфера, в которой используется векторная графика, – это визуальный дизайн. Если нужное вам изображение имеет низкое качество и при его увеличении появляются пиксели, тогда его можно преобразовать в векторное. После его можно будет увеличивать до необходимых вам размеров без потери качества.
Такие инструменты, как плоттер, станок и программное управление, используют векторные изображения в роли «карты». Эти изображения идеально подходят для создания подарочных кружек, футболок с принтами и при изготовлении материалов из пластика.
Как из растра сделать вектор в Фотошопе
Есть ситуации, в которых можно не использовать Иллюстратор для создания векторного изображения, можно использовать программу Photoshop. В тех случаях, когда нет времени на создание качественной трассировки, а результат нужен скоро, используют этот вариант. Этот способ имеет спрос у типографии. Этот вариант также подойдет при создании маленьких логотипов без потери качества.
Для преобразования растрового объекта в векторный вам необходимо в Фотошопе открыть нужный файл, в меню File выбрать Save As (или же комбинацией Ctrl + Shift + S ). В открывшемся списке возможных методов сохранения подходящими будут: pdf, svg или tiff. Вы можете сохранить во всех вариантах, а затем выбрать лучший для себя.
Видеоурок от моего коллеги:
Подготавливаем изображение в Фотошопе
Если вы уже имеете исходник, разделенный на слои, то вам надо будет подготовить их. Но если же вам надо обычную картинку перевести в вектор, то этот этап можно пропустить. Как уже было сказано, я буду использовать простой логотип, созданный в Photoshop, и со слоями.
После открытия файла нужно подготовить слои к работе, для этого мы разделяем изображение на части. Для этого я разделю надпись «BEaMM», изображение девушки, сердца и надписи «всё для мамочек». Все эти слои, кроме слов «всё для мамочек», вам надо перенести на белый фон как отдельную картинку в черном цвете обязательно.
Первым делом надо открыть тот слой со словом «BEaMM», после этого надо нажать на «Изображение» в верхней части программы, в этом параметре выбираем «Коррекция», затем «Уровни». Для быстрого включения этой функции воспользуйтесь комбинацией Ctrl + L . После этого в открывшемся окне ползунок перетаскиваем в левую сторону.
После перемещения ползунка изображение станет черным, после этого просто сохраните эту картинку, выбираем «файл», затем «экспортировать» и выбираем «сохранить для web». Эти же действия надо сделать и с другими картинками, кроме слов «всё для мамочек».
Перемещать элементы этих изображений не нужно, так как в будущем нам надо будет совместить все элементы воедино, создав такое же изображение, как в исходнике. Чуть-чуть попозже поймете, о чем я говорю.
Переводим изображения в вектор и собираем логотип
После этого нам нужно открыть Иллюстратор, создать в нем холст с тем размером, которым получились наши изображения.
Теперь вставляем логотип «BEaMM» ровно по центру, чтобы все края изображения встали на свои места.
Выделяем слой этого изображения и в верхнем меню выбираем «Объект» и «Растрировать».
После этого в верхнем меню выбираем «Объект», «Трассировка изображения» и «Создать», затем нажимаем на значок настройки трассировки в верхней части. Выбираем необходимые параметры, линии делаем ровные и плавные. Окно закрываем.
В верхнем меню снова выбираем «Объект» и «Разобрать», в появившемся окне ставим две галочки и «OK».
Мы получили разобранные слои данного изображения, их можно будет увидеть в панели слоев. Те слои, в которых ничего нет, удаляем, а слои с буквами надо оставить.
В результате мы перевели каждую букву логотипа «BEaMM» в векторный формат на отдельный слой, чего мы и добивались. Точно так же делаем и со всеми оставшимися изображениями. Финальным этапом будет придание цвета каждой букве или окрас ее в градиент. Это уже ваш выбор. Что касается надписи «всё для мамочек», то это изображение так преобразовать не получится, потому что оно является слишком маленьким. Трассировка только ухудшит ситуацию, и после трассировки они деформируются, поэтому вам придется самому подобрать подходящий шрифт и сделать это. В идеале надпись «BEaMM» тоже следовало бы сделать таким образом: сначала подобрать подходящий шрифт, а затем сделать буквы кривыми. Но найти хороший шрифт не всегда удается, поэтому оставим так.
Переводим обычную картинку в вектор
В данной ситуации нашей задачей будет перевести простую картинку в векторный вид. Открываем нужный объект через «Иллюстратор», выбираем «Объект» и «Растрировать».
Затем аналогично первому варианту выбираем «Трассировка изображения» и «Создать». В новом окне можно будет открыть настройки и сделать их по своему усмотрению.
После всех действий нам нужно разобрать изображение – как и в первом случае, выбираем «Объект» и «Разобрать», ставим две галочки. По итогу мы получим изображение в векторном формате, состоящее из множества слоев.
По изображению можно увидеть направляющие линии, по которым и наложены слои. Таким методом вы можете быстро преобразовать файл в векторный формат.
Но нужно понимать: чем тяжелее изображение, тем из большего количества слоев оно будет состоять, а соответственно, будет иметь больший вес. «Фотошоп» в данной ситуации может потребоваться только в том случае, если нужна предварительная работа с изображением, например, убрать задний фон.
Как перевести растр в вектор в Иллюстраторе
Для этого открываем изображение с помощью Adobe Illustrator (нажать правой кнопкой мыши на изображение и выбрать «Открыть с помощью»).
В Иллюстраторе, на панели инструментов выбираем «Выделение», им нажимаем на загруженную картинку, после чего она должна выделиться в рамку. Для того чтобы проверить, произошло ли выделение, попробуйте сдвинуть изображение, зажав его левой кнопкой мыши.
Находим параметр под названием «Быстрая трассировка» и нажимаем на стрелочку, которая покажет вам все возможные функции к этому объекту. Среди них выбираем «Параметры трассировки», после нажатия откроется окно с настройками.
Справа выбираем функцию «Просмотр». Эта опция поможет вам понять, какой параметр за что отвечает, а итоговый результат будет лучше.
На следующем этапе у нас появится выбор:
- Следовать подсказкам, вам будет сказано, на что влияет то или иное значение, выбираете оптимальный вариант для себя.
- Не читать всплывающие подсказки, а изменять параметры под себя и смотреть на итоговый результат.
Оба варианта неплохие, но второй подойдет для лучшей адаптации с программой, таким образом вы лучше и быстрее запомните какие значения вам подходят. Вы можете постоянно вносить корректировки и изменять значения, пока не достигнете идеального результата.
Когда результат вас устраивает и он схож с исходным вариантом, то выбираете параметр «Трассировка» и затем «Разобрать». Итогом мы получим преобразованный в векторный формат аналог исходного изображения.
В том случае, если работа вам не понравилась, тогда вы можете переделать изображение, выбрав инструмент «Выделение». После выбора этого инструмента удерживайте левую кнопку мыши и выделите всё изображение. После выделения нажимаем на «Объект», «Трансформирование» и «Масштабирование». В этом разделе надо изменить размер объекта до той степени, когда он станет комфортным для редактирования. После этого выбираем инструмент «Прямое выделение». Им необходимо нажимать на каждый элемент, который вас не устраивает. При нажатии на элемент у вас появится возможность изменить его положение.
Чтобы у вас получилось хорошее векторное изображение, рекомендую брать в качестве исходника файл большого размера и высокого качества, так как при работе с маленькими изображениями будет требоваться больше времени на работу с узлами сплайнов, а результат будет не такого высокого качества.
Видеоурок по векторным изображениям от канала design school:
Трассировка растрового изображения в векторное в CorelDraw
Этот способ имеет свой недостаток: векторное изображение состоит только из белых и черных цветов.
Для понимания белые объекты я закрасил серым цветом, а удалить их нельзя, иначе будет то, что на варианте посередине, – всё черное. Нужно выделить все белые элементы и «Объединить», такое же действие и с черными элементами. Потом выбрать и черные, и белые, нажать «Задние минус передние». Результатом выйдет вектор с одним цветом.
Качество преобразования растрового изображения в векторное у CoralDraw не лучшее, но для обычной работы вполне сойдет. Если нет возможности использовать варианты получше, тогда можете здесь улучшить результат: включите редактирование точек и поудаляйте лишние, а если их нельзя удалить – уберите в другое место. Сверху вы можете видеть работу трассировщика, на нижнем изображении я немного подкорректировал точки, но руками делать это достаточно долго и муторно, можно ошибиться.
Перевести растровое изображение в векторное с помощью программы Vector Magic
Если вы часто работаете с векторной графикой, то программа Вектор Мэджик должна быть у вас в наличии обязательно. Да, она платная, но вы можете найти и ее бесплатные варианты всем известным способом. Теперь давайте же откроем исходный файл в ней и посмотрим. Он лучше, но не очень сильно, работы по исправлению точек уменьшилось примерно вдвое. Помимо прочего, достоинством программы является то, что она автоматически дает файлу черный и белый цвет, в связи с чем его можно будет спокойно удалить.
Как и во всех прошлых вариантах, важен размер и качество исходного варианта – чем он больше, тем лучше будет итоговая картинка.
Ручная перерисовка
Часто бывает, что отсутствует хороший исходный материал с большим размером и высоким качеством. Порой выходит так, что в качестве исходной картинки служит какое-то изображение 250 × 250 пикселей. Единственным выходом из такой ситуации будет перерисовка изображения своими руками. Это далеко не всегда так тяжело и страшно, как многие думают. Тем более, подобные навыки в данной сфере вам уж явно не помешают.
В нашем случае стоило подобрать просто похожий шрифт, так как я привожу это всё в пример. Я поставил его выше исходного варианта, выделив голубым цветом, а буквы просто поставил рядом друг с другом. Для создания треугольника я сначала сделал квадрат, потом удалил у него одну точку, в итоге получился треугольник, а маленький вариант просто скопировал и уменьшил. Все элементы подогнал максимально близко к исходному варианту. На всё про всё ушло не больше 4 минут.
А вот пример того, как я перерисовал машину для создания логотипа Mercedes. Изображение машины у меня не сохранилось, к сожалению, но весь процесс происходил именно так, как я и объяснял: сначала нарисовали фон, потом все элементы машины (стекла, фары и т. д).
Онлайн-сервисы
VectorMagic
Еще раз упомянем этот платный сервис. Для пробы вам дается 2 бесплатных изображения.
Программа на английском языке, но интерфейс у нее понятный. Использовать можно как в браузере, так и в приложении. Стоимость браузерной бесконечной версии – 8 долларов, а программы – 295 долларов. Можно сказать, ручную трассировку. На каких-нибудь тематических форумах, думаю, можно найти и более дешевый вариант.
Среди достоинств ярко выделяется:
- Точность программы
Вот сравнительное изображение работ с помощью трех разных программ – VectorMagic, Live Trace и Corel. Обратите внимание на качество и детализацию векторной обработки.
- Простота
Вам достаточно будет просто скачать и установить программу, дальше вы сможете легко разобраться, интерфейс и функции очень понятные.
Исходные файлы можно загружать в следующих форматах: JPG, GIF, PNG, BMP и TIFF. После завершения работы результат можно будет сделать в другом качестве, отредактировать его. А выход изображений осуществляется в форматах EPS, SVG и PNG.
Online Raster-to-Vector Conversion System
Бесплатная программа на английском языке, но можно воспользоваться сервисами перевода, всё станет понятно. Количество настроек и ручной работы здесь больше, но и результат, соответственно, будет лучше. Рекомендуемыми форматами будут TIFF, PNG или JPEG, но система поддерживает и множество других.
Форматы исходных файлов:
Форматы файлов на выходе:
Онлайн-конвертер
Это бесплатная программа, которая позволяет преобразовать изображения в формат SVG (Scalable Vector Graphics). Можно загружать файл не только напрямую, но и загрузить ссылку на него. Есть возможность наложить цифровые эффекты.
Когда вы будете преобразовывать растровые изображения из формата PNG или JPEG в формат SVG, будет происходить преобразование всех объектов в чёрно-белую векторную графику. А уже из этого черно-белого варианта вы можете сделать свой собственный, раскрасив данные изображения в любых бесплатных программах, которые предназначены для работы с векторными изображениями, например, Inkscape. Важно учитывать, что фотографы не смогут добиться желаемого результата, если будут преобразовывать свои фотографии в формат SVG.
В том случае, если вы будете конвертировать через эту программу векторное изображение, тогда она будет пытаться максимально сильно сохранить исходное качество и будет обеспечивать максимальную схожесть этих двух картинок.
Данный конвертер имеет возможность преобразовывать файлы около 125 различных форматов, а конкретнее: 3FR в SVG, AFF в SVG, AI в SVG, ANI в SVG, ART в SVG и многие другие.
Бесплатный онлайн-конвертер
Доступные функции – это трассировка и переход в цветной вектор.
Основан и разработан на основе Autotrace и ImageMagik, а также различных linux-компонентах.
Форматы для преобразования в вектор, которые поддерживает эта программа:
Есть также и другие варианты, доступные к работе: P2E, FIG, EMF, MIF, ER, DXF, EPD, CGM, oDR2D.
Владелец данного сайта. Графический дизайнер, специалист по Фотошопу с опытом 10+ лет. Также веду канал о графическом дизайне на Ютуб и развиваю тематическое сообщество во ВКонтакте. Связаться со мной можно через комментарии, форму обратной связи или по электронной почте [email protected]
Читайте также: