Как создать векторную графику, а затем сгенерировать из нее иконки?
https://stackoverflow.com/questions/410141
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Для веб-сайта, который я разрабатываю, мне нужно будет создать немного графики.Я еще не зафиксировал размеры, поэтому не хотел напрямую генерировать файлы изображений (PNG, GIF, JPG) на случай, если я передумаю после того, как разберусь с макетом и пользовательским интерфейсом, чтобы увидеть, что работает, а что нет.
Это заставило меня задуматься:возможно, мне следует сгенерировать их в виде векторной графики (например, SVG), а затем сгенерировать набор файлов изображений для использования на моем сайте.Однако я никогда раньше не играл с векторной графикой, так что мне нужно вот что:
- Некоторые инструменты для создания (желательно графически) векторной графики в некотором приемлемом формате;
- Программный способ создания векторной графики.Например, допустим, у меня есть сетка, я бы не обязательно хотел рисовать ее от руки."Привязка к сетке" и подобные функции будут относиться к этому случаю, но не к другим;и
- Каким-то образом я могу программно (например, в качестве задачи сборки) взять набор векторной графики и сгенерировать набор изображений и предпочтительно иметь некоторый контроль (например, из командной строки) над такими вещами, как соглашения об именовании, формат вывода, размер и т.д.Я не хочу заходить в программу и по отдельности выполнять "Сохранить как ..." для более чем 100 файлов, чтобы сгенерировать свои иконки.
Какие инструменты и рабочий процесс подошли бы для этой ситуации?
Решение
Существуют разные подходы, поскольку существует несколько различных коммерческих пакетов векторной графики.Я использую Adobe Illustrator, Adobe Fireworks, Adobe Photoshop.По общему признанию, Fireworks и Photoshop - это пакеты растровой графики, которые поддерживают вектор.
Я обнаружил, что Fireworks легче справляется с векторами, потому что это объекты "первого класса", в то время как в Photoshop они на самом деле представляют собой комбинацию векторной маски и цветовой заливки.Преимущество проектирования в растровом пакете с использованием векторов заключается в том, что гораздо проще просмотреть растрированный результат, увеличив масштаб документа, чтобы вы могли видеть отдельные пиксели.Для достижения этой цели Illustrator также добавил режим "предварительного просмотра в пикселях".
Все три пакета обладают возможностями создания сценариев, которые позволяют автоматизировать повторяющиеся задачи, такие как многократный экспорт, присвоение имен и т.д.В Photoshop, однако, тоже есть Действия;упрощенная система макросов, которая позволяет записывать и воспроизводить простые пакетные действия.
Я обычно создаю свои пакеты значков, создавая все значки внутри одного документа.Я использую "группы" (в Illustrator) или "папки" (Fireworks или Photoshop), чтобы изолировать каждую иконку друг от друга, но это позволяет мне сохранить все отдельные слои, составляющие иконку, незакрашенными.
Когда я перехожу к экспорту, я запускаю скрипт, который перебирает группы / папки верхнего уровня, скрывая все, кроме одной, за раз и экспортируя результаты в растровые изображения для всех основных разрешений;16x16, 24x24, 32x32, 48x48, 128x128 и 256x256.
Вот отличный руководство по стилю что есть у Microsoft о том, как создавать иконки для Vista и XP.Он фокусируется на использовании Photoshop для выполнения большей части работы.
Другие советы
Если вам нужен надежный бесплатный инструмент для создания SVG, а затем преобразования его в растровые изображения, когда вы определитесь с нужным вам размером, Чернильный пейзаж это был бы хороший вариант.Пользовательский интерфейс выглядит немного менее отточенным, чем в Illustrator, но он прекрасно работает в Windows, Mac и Linux.Ограничения заключаются в том, что управление цветом гораздо менее мощное, чем в Illustrator, а поддержка графических планшетов, чувствительных к нажатию, менее эффективна, если вы не используете Linux box.
