Как обрезать спрайты в фотошопе

Обновлено: 21.11.2024

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

Примечание. Убедитесь, что для графического объекта, который вы хотите отредактировать, тип текстуры установлен на Sprite (2D и UI). Информацию об импорте и настройке спрайтов см. в разделе Спрайты. 2D-графические объекты. Если вы привыкли работать в 3D, спрайты — это, по сути, просто стандартные текстуры, но есть специальные приемы комбинирования текстур спрайтов и управления ими для повышения эффективности и удобства во время разработки. Подробнее
см. в глоссарии.

Текстуры спрайтов с несколькими элементами требуют, чтобы режим спрайта был установлен на «Несколько» в Инспекторе Окно Unity, в котором отображается информация о выбранном в данный момент игровом объекте, активе или настройках проекта, что позволяет просматривать и редактировать значения. Подробнее
см. в глоссарии. (Изображение инспектора импорта текстур ниже.)

Открытие редактора спрайтов

Чтобы открыть редактор спрайтов:

Выберите 2D-изображение, которое хотите отредактировать, в представлении проекта (Рис. 1: представление проекта).

Обратите внимание, что вы не можете редактировать спрайт, выбрав его в представлении «Сцена». Интерактивное представление мира, который вы создаете. Вы используете Scene View для выбора и размещения пейзажей, персонажей, камер, источников света и всех других типов игровых объектов. Подробнее
см. в глоссарии.

Нажмите кнопку «Редактор спрайтов» в инспекторе импорта текстур. Инспектор, который позволяет вам определить, как ваши изображения импортируются из папки «Активы» вашего проекта в редактор Unity. Дополнительную информацию
см. в глоссарии (Рис. 2: Инспектор импорта текстур), а в редакторе спрайтов отображается (Рис. 3: Редактор спрайтов).

Примечание. Кнопка "Редактор спрайтов" отображается только в том случае, если тип текстуры на выбранном изображении установлен на "Спрайт" (2D и пользовательский интерфейс).

Инспектор импорта текстур представления проекта с кнопкой редактора спрайтов

Примечание. Установите для параметра Sprite Mode значение Multiple в инспекторе импорта текстур, если ваше изображение состоит из нескольких элементов.

Редактор спрайтов

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

Использование редактора

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

Элементы управления на панели позволяют выбрать имя для изображения спрайта и задать положение и размер прямоугольника по его координатам. Ширина границы слева, сверху, справа и снизу может быть указана в пикселях. Наименьшая единица измерения компьютерного изображения. Размер пикселя зависит от разрешения вашего экрана. Пиксельное освещение рассчитывается для каждого пикселя экрана. Подробнее
см. в глоссарии. Границы полезны при 9-Slicing Sprites. Также есть настройки для оси Sprite, которую Unity использует в качестве начала координат и основной «точки привязки» графики. Вы можете выбрать одну из позиций относительно прямоугольника по умолчанию (например, по центру, вверху справа и т. д.) или использовать собственные координаты.

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

Примечание. Границы поддерживаются только для пользовательского интерфейса (пользовательского интерфейса). Позволяет пользователю взаимодействовать с вашим приложением. Дополнительная информация
См. в системе глоссария, а не для 2D SpriteRenderer.

Автоматическая нарезка

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

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

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

Значения размера пикселя определяют высоту и ширину фрагментов в пикселях. Если вы выбрали сетку по количеству ячеек, столбцы и строки определяют количество столбцов и строк, используемых для нарезки. Вы также можете использовать значения Offset, чтобы сместить положение сетки от верхнего левого угла изображения, и значения Padding, чтобы немного отодвинуть прямоугольники Sprite от сетки. Для Pivot можно задать одно из девяти предустановленных положений или можно задать пользовательское положение Pivot.

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

Изменение размера многоугольника

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

Форма многоугольника

Редактор спрайтов: изменение размера многоугольника — форма

Введите количество сторон, которое должно быть у многоугольника, в поле «Стороны» и нажмите «Изменить».

Размер многоугольника и поворот

Редактор спрайтов: изменение размера многоугольника — размер и точка поворота — нажмите на многоугольник, чтобы отобразить эти параметры

Размер полигона

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

Поворот многоугольника

Чтобы изменить точку вращения многоугольника (то есть точку оси, вокруг которой движется многоугольник), щелкните изображение, чтобы отобразить информационное окно спрайта. Щелкните раскрывающееся меню Pivot и выберите параметр. Это отобразит синий круг вращения на многоугольнике; его расположение зависит от выбранного вами параметра поворота. Если вы хотите изменить его дальше, выберите «Пользовательский поворот», а затем нажмите и перетащите синий круг поворота, чтобы расположить его.

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

Главная
Экосистема Photoshop
Обсуждения
Разделить лист спрайтов на отдельные слои?

/t5/photoshop-ecosystem-discussions/нарезка-спрайта-листа на свои собственные слои/td-p/9844298 3 мая 2018 г. 3 мая 2018 г.

Скопировать ссылку в буфер обмена

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

Мне интересно, знает ли кто-нибудь самый простой способ нарезать кадры и поместить их на отдельный соответствующий слой?

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

Очень ценю любые советы, спасибо

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

Скопировать ссылку в буфер обмена

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

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

Зная это, обрезку и выпрямление можно с таким же успехом использовать на листе спрайтов, так как это тот же принцип.

Скопировать ссылку в буфер обмена

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

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

Скопировать ссылку в буфер обмена

Я не уверен, что After Effects может импортировать листы спрайтов, но это должно позволить вам экспортировать gif.
Тем не менее, если это для Интернета, то лист спрайтов может быть подходящим способом. Поскольку CSS может манипулировать листом спрайтов. Прошло много времени, поэтому я, возможно, не лучший человек, чтобы спросить, как это сделать. Но форум Flash Animate, форум After Effects или форум Dreamweaver могут знать решение. Я упоминаю flash, поскольку считаю, что он также может импортировать лист спрайтов.

Нарезка изображений позволяет загружать большое изображение на веб-страницу по частям. Вот как.

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

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

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

Как это работает

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

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

Основы нарезки

Для простоты мы будем работать с инструментом «Срез» только на одном слое. В этом примере я работаю с изображением размером 960x722px. Некоторые вещи, которые вам нужно знать, прежде чем мы начнем:

При создании фрагментов вы можете использовать инструмент «Фрагмент» или создавать их с помощью слоев.
Фрагменты можно выбирать с помощью инструмента "Выбор фрагмента".
Вы можете перемещать, изменять размер или выравнивать фрагмент с другими фрагментами. Кроме того, вы можете указать имя фрагмента, тип и URL-адрес.
Каждый фрагмент можно оптимизировать с помощью настроек в диалоговом окне "Сохранить для Интернета".

Чтобы начать, нажмите C на клавиатуре и выберите инструмент "Разрез".

При создании фрагментов вы можете выбрать один из трех параметров: Обычный, Фиксированное соотношение сторон и Фиксированный размер.

Обычный: это станет фрагментом в зависимости от того, где вы начинаете и заканчиваете прямоугольник, который рисуете на изображении.
Фиксированное соотношение сторон: здесь вы устанавливаете высоту и ширину, используя целые числа. Чтобы уточнить, если вы хотите создать фрагмент с соотношением три к одному, введите 3 для высоты и 1 для ширины.
Фиксированный размер. Здесь вы устанавливаете высоту и ширину фрагмента в пикселях.

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

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

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

Срезы рисуются автоматически. Затем вы можете изменить положение фрагментов с помощью инструмента «Выделение фрагмента».

Редактирование информации о фрагменте

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

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

Еще один вариант — щелкнуть правой кнопкой мыши фрагмент и во всплывающем меню выбрать «Изменить параметры фрагмента».

Оба варианта отобразят диалоговое окно "Параметры фрагмента".

Как видите, настроек много. Вы можете изменить имя фрагмента, вы можете назначить ему URL-адрес, чтобы при нажатии на него в браузере вы попадали в другое место, вы можете установить цель (_blank, _self, _parent, _top), сообщение Текст, тег Alt, размеры фрагмента и многое другое.

Сохранить для Интернета

Как только вы будете удовлетворены своим макетом, выберите «Файл»> «Сохранить для Интернета».

Здесь вы можете установить тип файла и сжатие для каждого фрагмента или использовать значение по умолчанию, указанное в диалоговом окне «Сохранить для Интернета». Когда вы будете удовлетворены своими настройками, нажмите кнопку Сохранить.

Откроется диалоговое окно «Сохранено оптимизировано как». Внизу окна есть несколько важных настроек.

Формат. У вас есть три варианта: HTML и изображения, Только изображения и Только HTML.
Настройки. Возможные варианты: «Пользовательский», «Фоновое изображение», «Настройки по умолчанию», «XHTML» и «Другое».
Фрагменты. Возможные варианты: "Все фрагменты", "Все пользовательские фрагменты" и "Выбранные фрагменты".

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

Вот разделенный экран HTML-файла в Adobe Dreamweaver. Как видите, код прост и удобен в использовании.

Заключение

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

Для получения дополнительной информации ознакомьтесь со следующими статьями:

Слова: Натан Сигал

Команда Creative Bloq состоит из группы поклонников дизайна и изменилась и развилась с тех пор, как Creative Bloq появился более десяти лет назад. Текущая команда веб-сайта состоит из пяти человек: редактор Керри Хьюз, заместитель редактора Рози Хилдер, редактор сделок Берен Нил, старший редактор новостей Дэниел Пайпер, редактор по цифровым искусствам и дизайну Ян Дин и штатный писатель Амелия Бэмси. Команды журналов 3D World и ImagineFX также вносят свой вклад, следя за тем, чтобы контент из 3D World и ImagineFX был представлен на Creative Bloq.

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

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

Спрайты доступны на Envato Market

Вы также можете найти некоторых дизайнеров в Envato Studio, которые разработают для вас спрайты, например Хендрикота, который создаст для вас любого персонажа в пиксельной графике всего за 45 долл. США.

1. Подготовьте холст и инструменты

Шаг 1

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

Шаг 2

Настройте режим карандаша для инструмента "Ластик" и используйте те же настройки кисти, что и ниже.

Шаг 3

Включите пиксельную сетку (Просмотр > Показать > Пиксельная сетка). Если вы не видите этот пункт в меню, перейдите в «Настройки» > «Производительность» и включите графическое ускорение.

Примечание. Сетка будет видна только на вновь созданном холсте с уровнем масштабирования 600 % и выше.

Шаг 4

Перейдите в меню «Установки» > «Основные» (Control-K) и настройте интерполяцию изображения на ближайший сосед. Это гарантирует, что края объектов, с которыми вы работаете, всегда останутся четкими.

Откройте «Настройки» > «Единицы и линейки» и выберите «Пиксели» в раскрывающемся меню рядом с «Линейки», чтобы просмотреть все измерения в пикселях.

2. Создайте спрайт

Шаг 1

Теперь, когда все настроено, мы можем приступить к созданию спрайта.

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

Шаг 2

Нажмите Control-T или используйте Edit > Free Transform, чтобы уменьшить размер персонажа до 60 пикселей в высоту.

Размер объекта отображается на панели «Информация».Обратите внимание на параметр «Интерполяция», он должен быть таким же, как мы установили в шаге 4. В данном случае это не так важно, так как мы всего лишь превращаем эскиз в пиксель-арт, но обратите внимание на эту функцию в будущем, когда будете работать с пиксельным изображением. объекты.

Шаг 3

Увеличьте изображение на 300–400 %, чтобы его было легче визуализировать. Уменьшите непрозрачность эскиза.

Создайте новый слой («Слой» > «Создать» > «Слой») и нарисуйте контур своего персонажа с помощью инструмента «Карандаш».

Если ваш персонаж симметричен, как мой, просто создайте одну половину, продублируйте ее и отразите по горизонтали (Правка > Трансформировать > Отразить по горизонтали).

Правило ритма. Попробуйте разбить сложные формы на простые элементы. Когда пиксели в линии образуют «ритм», например 1-2-3 и 1-1-2-2-3-3, контур выглядит для человеческого глаза намного лучше, чем случайно нарисованная линия. Однако это правило можно нарушить, если этого требует фигура.

Две ритмичные и одна произвольно нарисованная линия.

Шаг 4

Когда контур готов, выберите основные цвета и нарисуйте крупные фигуры. Сделайте это на отдельном слое под слоем с контуром.

Шаг 5

Сгладьте внутреннюю сторону контура, добавив оттенки цвета.

Продолжайте добавлять оттенки. Как видите, по ходу дела я исправил некоторые формы и детали.

Шаг 6

Создайте новый слой, чтобы добавить блик.

Выберите «Наложение» в раскрывающемся меню на панели «Слой». Закрасьте светлым цветом области, которые хотите выделить. Сгладьте форму выделенной области, выбрав «Фильтр» > «Размытие» > «Размытие».

Я отразил окрашенную половину по горизонтали, добавил окончательные цветовые штрихи здесь и там и объединил слои.

Шаг 7

Персонажу теперь не хватает контраста. Сначала используйте уровни («Изображение» > «Коррекция» > «Уровни»), а затем измените тон или полутон с помощью «Цветового баланса» («Изображение» > «Коррекция» > «Цветовой баланс»), чтобы сделать версии более теплыми или холодными.

Я решил использовать третью версию. Теперь давайте перейдем к процессу анимации.

Конечный символ с увеличением 400%.

3. Анимируйте свой спрайт

Шаг 1

Создайте копию слоя (Слой > Новый > Слой через копирование) и переместите ее на 1 пиксель вверх и на 2 пикселя вправо, выбрав инструмент "Перемещение" (V) и используя клавиши со стрелками. Это ключевой этап анимации бегущего персонажа.

Измените непрозрачность исходного слоя до 50 %, чтобы увидеть предыдущий кадр анимации. Это называется «снятие луковой шелухи».

Шаг 2

Теперь согните ноги и руки персонажа, как будто он бежит.

Шаг 3

Теперь вам нужно перерисовать новое положение ног и рук, как я объяснял в Разделе 2 этого руководства. Это связано с тем, что трансформация ног и рук исказит пиксели, и форма перестанет быть чистой.

Шаг 4

Сделайте копию второго слоя и отразите ее по горизонтали. И теперь у вас есть одно холостое положение и две рабочие фазы. Выберите каждый слой и восстановите его непрозрачность до 100%.

Шаг 5

Выберите «Окно» > «Временная шкала», чтобы отобразить панель «Временная шкала», и нажмите «Создать анимацию кадра».

На панели «Таймлайн» выполните следующие действия:

Шаг 6

Чтобы выбрать правильный слой для каждого кадра анимации, щелкните значок глаза рядом с именем слоя на панели «Слой».

Нажмите кнопку пробела, чтобы воспроизвести анимацию.

Окончательная анимация со 100% увеличением.

Шаг 7

Теперь сохраните результат. Перейдите в меню «Файл» > «Сохранить для Интернета» и выберите формат GIF. Увеличьте размер изображения до 300 % для лучшего представления и нажмите "Сохранить".

Поздравляем! Готово.

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

Читайте также: