Как создать векторную графику, а затем сгенерировать значки из них? - PullRequest
4 голосов
/ 04 января 2009

Для веб-сайта, который я разрабатываю, мне нужно будет создать графику. Я еще не заблокировал размеры, поэтому я не хотел создавать файлы изображений (PNG, GIF, JPG) напрямую на тот случай, если я передумаю после того, как продвинулась дальше с макетом и пользовательским интерфейсом, чтобы посмотреть, что работает, а что нет. .

Это заставило меня задуматься: возможно, я должен сгенерировать их как векторную графику (например, SVG), а затем сгенерировать набор файлов изображений для использования на моем сайте. Раньше я никогда не играл с векторной графикой, поэтому я ищу:

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

Какие инструменты и рабочие процессы подходят для этой ситуации?

Ответы [ 3 ]

4 голосов
/ 04 января 2009

Существуют разные подходы, поскольку существует несколько коммерческих пакетов векторной графики. Я использую 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 для выполнения большей части работы.

0 голосов
/ 23 марта 2009

Если вам нужен надежный бесплатный инструмент для создания SVG, а затем выгрузки его в растровые изображения при выборе нужного размера, Inkscape будет хорошим вариантом. Пользовательский интерфейс выглядит немного менее отточенным, чем Illustrator, но он отлично работает на Windows, Mac и Linux. Ограничения заключаются в том, что управление цветом гораздо менее мощное, чем в Illustrator, а поддержка чувствительных к давлению графических планшетов менее эффективна, если вы не используете Linux.

0 голосов
/ 04 января 2009

Взгляните на Каир и его различные привязки. На самом деле, есть даже рецепт для превращения SVG в каирские команды.

...