Почему иллюстратор экспортирует на 1 пиксель больше

Обновлено: 03.07.2024

Изначально я нарисовал картинку в Illustrator размером 700 x 1270 пикселей при 300 ppi. К сожалению, при конвертации. пиксели получились 2915 X 5289 из-за 300 ppi. Это слишком большой размер для проекта, над которым я работаю. Нам нужно, чтобы пиксели были ТОЧНО 700 X 1270.

У 72 ppi нет такой проблемы с преобразованием пикселей. Я хочу изменить размер моего документа illustrator при 72 ppi. Я знаю, что с этого момента мне нужно просто начинать ВСЕ свои документы с 72 ppi. Так пиксели будут точно соответствовать исходному размеру.

Единственная проблема заключается в том, что мой первый файл имеет размер 300 ppi. Когда я пытаюсь просто скопировать исходный файл illustrator (2915 X 5289) в другой документ illustrator с 72 ppi, он автоматически преобразует ppi в 300, делая изображение снова большим.

Как я могу просто изменить ppi в документе illustrator? Как изменить размер документа photoshop, чтобы он стал меньше? Возможно ли это?

Короткий ответ

Файл > Сохранить для Web > Размер изображения

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

Детали

Независимо от разрешения документа, которое вы выбрали при создании, экспорт в JPEG или PNG зависит от настроек экспорта.

При экспорте JPEG из illustrator открывается диалоговое окно, в котором предлагается экспортировать иллюстрацию в различных ppi. Если размер вашего артборда в пикселях такой же, как и размер изображения после экспорта. Используйте 72 ppi в качестве параметров экспорта.

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

Файл > Настройка документа > Единицы измерения > Пиксели.

Вы также можете открыть линейки в illustrator ( CTRL + R win / CMD + R mac) щелкните правой кнопкой мыши и выберите масштаб, а в качестве единиц измерения выберите пиксели.

Затем используйте инструмент Artboard tool или нажмите SHIFT + O и размер вашего артборда будет отображаться в пикселях в верхней панели.

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

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

Теперь клиенты запросили блок пикселей в Illustrator, но пиксели не имеют размера (как и прямоугольники пикселей). Таким образом, разработчикам * пришлось немного поиграть, так что эта единица была установлена на одну 72-ю часть дюйма.

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

Но если вы сохраните свою работу с Экспорт он предполагает, что ваша бумага имеет реальный физический размер, и теперь запрашивает значение PPI. Теперь он действительно экспортирован при этом PPI без учета размера одного пикселя 72 DPI.

Альтернативные решения:

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

* Трудно сказать, должен ли был это делать в Adobe. Даже начинать обсуждение с большинством дизайнеров бесполезно, поскольку они не понимают DPI / PPI. Кроме того, все это немного неактуально для языка описания страниц, поскольку в документе может быть несколько значений PPI. В любом случае есть 3 способа взглянуть на эту вещь.

Я очень ценю этот ответ @joojaa. Было сложно смириться с тем фактом, что мои дизайны в Illustrator никогда не будут выглядеть точно так, как они выглядят в программе. Ха-ха. Похоже, что сохранение копии в формате PDF в основном делает то же, что и я, но намного проще.
Что вы думаете о том, как я создаю монтажную область размером со стандартный лист бумаги, чтобы на нее поместились обе этикетки? Затем сохранить копию в формате PDF и использовать только эту монтажную область?
@dakotathemoose Я делаю это все время.
ты чертовски лучший! Спасибо за всю вашу информацию. Я чувствую себя намного лучше по этому поводу.

Итак, у вас есть конкретная цель для физического печатного размера. В моем примере это будет 3 дюйма на 2 дюйма. Типичное практическое правило печати - 300 пикселей на дюйм. Поэтому мне нужен артборд размером 900 на 600 пикселей.

Если у меня есть программное обеспечение, которое (по какой-то причине) не позволяет мне напрямую указывать пиксели и заставляет меня для вывода с конкретным разрешением 72 ppi, я должен отрегулировать размер монтажной области, чтобы получить те же размеры в пикселях: 900 пикселей / 72 = 12,5 дюйма; 600 пикселей / 72 = 8,3333 дюйма, обратите внимание, что 8,3333 * 72 прибывает в дробный пиксель, поэтому вы можете установить этот размер немного больше или меньше, чтобы у вас было целочисленное значение для размера пикселя.

Затем я бы взял полученное экспортированное изображение (12,5 x 8,333 @ 72 ppi) и поместил его в нужное место. физический (дюймы) размеры (3 дюйма x 2 дюйма) в программном обеспечении для композитинга, игнорируя ppi. Результат будет напечатан с размером 3 x 2 дюйма, а эффективное разрешение будет 300 пикселей на дюйм.

72 точек на дюйм для экранов, стандарт для печати - 300 точек на дюйм. DPI или PPI - это просто плотность, а не размер, поэтому, если вы выберете 300 точек на дюйм, ваше качество будет более чем в 4 раза лучше при том же размере.

В настоящее время я использую иллюстратор для создания иллюстраций для своих игр для Android. Мой размер рисунка довольно маленький, всего 32x32. В иллюстраторе это выглядит нормально, но при экспорте мои рисунки размыты и выглядят неаккуратно! Не могли бы вы дать совет? Как получить векторную графику? А что лучше для маленьких изображений, пиксельная графика или вектор?

Мое экспортное изображение большого размера:

Это мой экспортированный результат (пиксель такой плохой при масштабировании):

Прежде всего, ваше экспортированное изображение должно соответствовать размеру спрайта в android. Поэтому, если вы создаете изображения размером 32x32, ваши спрайты в идеале должны отображаться как 32x32 на экране вашего устройства. Не ожидайте, что изображение 32x32 будет хорошо выглядеть, когда ваш спрайт занимает на устройстве 100x100 пикселей!

Экспорт векторной графики из Illustrator в изображение (например, PNG) для использования в Android не должен сопровождаться какой-либо потерей качества. Конечно, вы теряете масштабируемость векторных изображений, но когда растровые и векторные изображения отображаются со 100% масштабированием, они должны выглядеть одинаково (если это не так, вероятно, в вашем рабочем процессе есть изъян).

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

Чтобы получить результат, близкий к тому, что вы видите в иллюстраторе, вам следует отключить mip-отображение и, возможно, также установить для фильтрации текстур значение GL_NEAREST . Вот отличный учебник по фильтрации текстур на Android.

[Transfer] Операция создания SVG с использованием Adobe Illustrator

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

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

Установить параметры конфигурации и артборд

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

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

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

Если оставшееся пустое пространство слишком велико, решение есть. Вот решение в конце статьи.

Изображения SVG обычно используются для отображения на экране, а CSS не поддерживает режим CMYK, поэтому выбирайте режим RGB при выборе цветового режима. Поскольку мы используем XML для обработки элементов, также имеет смысл идентифицировать идентификатор объекта.

Используйте соглашения об именах

Помните: когда вы создаете SVG, вы не только создаете изображения, но и создаете данные.Если в будущем вы захотите манипулировать этими данными с помощью CSS или javascript, вам потребуется какой-то способ идентификации созданных вами данных. Исключение - очень важно дать каждому связанному объекту имя. Имя должно быть в нижнем регистре без каких-либо пустых символов.Это имя станет идентификатором элемента при экспорте файла SVG. Если вы не называете объект сейчас, вы можете сделать это позже, но выбор имени при редактировании изображений - лучший и наименее подверженный ошибкам метод.

Упростить

Как правило, мы должны использовать наименьшее количество точек для создания векторного изображения, которое даст наилучшее векторное изображение. можешь использовать Smooth Или Simplify Инструменты (объекты / контуры / упрощения) для уменьшения точек векторной графики.

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

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

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

Создать фоновое изображение

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

Если изображение SVG используется в качестве изображения на странице, вы можете предоставить его в CSS background-color 。
Нарисуйте прямоугольник того же размера, что и артборд, и залейте его цветом. Затем поместите этот слой внизу документа Illustrator и используйте его в качестве фонового слоя.
Если реальная HTML-страница напрямую использует код SVG, вы можете указать <svg> Корневой элемент добавляет стиль. Например, следующий код:

Объединить изображения

Это также очень хорошая практика объединять изображения в один графический объект. Выберите изображение, которое необходимо объединить, затем выберите в меню: Объект / Расширение . параметры проверки заливки и обводки. Пока изображение все еще выделено, откройте селектор пути и выберите «Объединение». Эта операция объединяет повернутое изображение в одно изображение без обводки.

Обработка текста

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

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

буфер обмена

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

1. Выберите все элементы, которые нужно сохранить в файле SVG.
2. Выберите Объект / Артборд / Подогнать к границе графического объекта, чтобы завершить обработку артборда.

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

Благодаря этой статье вы сможете использовать Adobe Illustrator для создания лучшего оптимизированного файла SVG.

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