¿Cómo crear gráficos vectoriales y luego generar iconos a partir de ellos?

Question

Para un sitio web que estoy desarrollando, necesitaré crear algunos gráficos. Todavía no he bloqueado los tamaños, así que no quería generar archivos de imagen (PNG, GIF, JPG) directamente en caso de que cambie de opinión después de continuar con el diseño y la interfaz de usuario para ver qué funciona y qué no. .

Esto me hizo pensar: quizás debería generarlos como gráficos vectoriales (por ejemplo, SVG) y luego generar un conjunto de archivos de imagen para usar en mi sitio. Nunca antes he jugado con gráficos vectoriales, así que lo que busco es:

• Algunas herramientas para crear (preferiblemente gráficamente) algunos gráficos vectoriales en algún formato aceptable;
• Una forma programática de crear gráficos vectoriales. Por ejemplo, digamos que tenía una cuadrícula, no necesariamente querría dibujar eso a mano. " Ajustar a la cuadrícula " y características similares cubrirían este caso pero no otros; y
• De alguna manera puedo programar (p. ej., como una tarea de compilación) tomar un conjunto de gráficos vectoriales y generar un conjunto de imágenes y, preferiblemente, tener cierto control (p. ej., desde la línea de comandos) sobre cosas como las convenciones de nombres, el formato de salida, el tamaño, etc. No quiero entrar en un programa e individualmente hacer " Guardar como ... " en más de 100 archivos para generar mis íconos.

¿Qué tipo de herramientas y flujo de trabajo se adaptarían a esta situación?

Answer 1

Existen diferentes enfoques, ya que existen varios paquetes de gráficos vectoriales comerciales diferentes. Los que uso son Adobe Illustrator, Adobe Fireworks, Adobe Photoshop. Es cierto que Fireworks y Photoshop son paquetes de gráficos de mapa de bits que son compatibles con vectores.

Me parece que Fireworks tiene un tiempo más fácil para tratar los vectores porque son " primera clase " objetos, mientras que en Photoshop son en realidad una combinación de una máscara vectorial y un relleno de color. La ventaja de diseñar un paquete de mapa de bits con vectores es que es mucho más fácil obtener una vista previa del resultado rasterizado al hacer zoom en el documento para que pueda ver los píxeles individuales. Illustrator ha agregado una " vista previa de píxeles " modo para lograr esto también.

Los tres paquetes tienen capacidades de secuencias de comandos que le permiten automatizar tareas repetitivas, como la exportación múltiple, nombres, etc. Photoshop, sin embargo, también tiene Acciones; un sistema de macros simplificado que le permite grabar y reproducir actividades de lotes simples.

La forma en que tiendo a construir mis paquetes de iconos es mediante el diseño de todos los iconos dentro de un solo documento. Yo uso "grupos" (en Illustrator) o " carpetas " (Fireworks o Photoshop) para aislar cada icono entre sí, pero me permite mantener todas las capas individuales que conforman el icono sin resaltar.

Cuando voy a exportar, ejecuto un script que recorre los grupos / carpetas de nivel superior, ocultando todos menos uno a la vez y exportando los resultados a mapas de bits para todas las resoluciones principales; 16x16, 24x24, 32x32, 48x48, 128x128 y 256x256.

Aquí hay una excelente guía de estilo que Microsoft tiene sobre cómo Diseñar iconos para Vista y XP. Se enfoca en usar Photoshop para hacer la mayor parte del trabajo.

Answer 2

Eche un vistazo a Cairo y sus diversos enlaces. De hecho, incluso hay una receta disponible para convertir un SVG en comandos de El Cairo.

Answer 3

Si necesita una herramienta sólida y gratuita para crear SVG y luego descargarla en imágenes de mapa de bits cuando haya decidido el tamaño que necesita, Inkscape sería una buena opción. La interfaz de usuario se ve un poco menos pulida que Illustrator, pero funciona bien en Windows, Mac y Linux. Las limitaciones son que la administración del color es mucho menos poderosa que Illustrator y el soporte para tabletas gráficas sensibles a la presión es menos bueno si no está en una caja de Linux.