¿Por qué los diseñadores suelen simular sitios web para desarrolladores en Photoshop en lugar de Illustrator?

Los desarrolladores están acostumbrados a obtener PSD en capas, por eso prefieren Photoshop, pero en esta generación, podría decir que tener un sitio web diseñado a través de Illustrator es más efectivo.

Creo que la razón por la que los desarrolladores prefieren un archivo PSD es que todavía no han intentado experimentar con Illustrator.

Otra razón que quiero compartir como diseñador es que, al entregar .AIs, debe comprender que también le está dando al codificador todo el control de las ilustraciones vectoriales. El codificador puede extraer los elementos vectoriales aquí y allá si así lo desea.

Lo que hago es simplemente diseñar la interfaz y las ilustraciones de Illustrator, exportarla a Photoshop, mejorar algunos elementos y aplicar estilos de fusión para que el desarrollador pueda codificarla fácilmente.

Si desea saber qué tan efectivo es usar Adobe Illustrator para diseño web, estudie este artículo: http://www.adobe.com/inspire/201…

¡Feliz diseño!

Photoshop es, de lejos, el estándar, y esa es la mayor parte de la razón allí mismo.

¿Pero cómo llegó a ser así?

Al principio de la evolución de Photoshop, el programa presentaba modos complejos de transparencia y mezcla, bastante antes de Adobe Illustrator. Del mismo modo, enmascarar en Photoshop siempre ha sido bastante fácil. Incluso hasta el día de hoy, cualquier cosa que no sea el enmascaramiento de bordes duros es relativamente torpe en Illustrator.

Photoshop también siempre ha sido bien optimizado para el rendimiento, y Adobe Illustrator solo recibió una revisión decente en los últimos años.

Y, obviamente, Photoshop tiene herramientas sofisticadas para imágenes fotográficas, pero también admite objetos de texto y arte vectorial livianos, maneja arte vectorial vinculado o incrustado con resultados representados de manera excelente y predecible al 100% de tamaño.

En resumen, Photoshop es una ventanilla única, que permite a un diseñador crear o ajustar cualquier cosa relativamente rápido, sin romper su concentración para trabajar en otra aplicación.

Las fortalezas de Illustrator siempre han estado en el ámbito de los gráficos vectoriales, sin embargo, el arte vectorial solo ahora es ampliamente compatible, unos 20 años después de los primeros sitios web (no se puede culpar a Adobe allí, Illustrator tenía soporte SVG completo desde el principio). Sin embargo, como herramienta de desarrollo web, nunca ofreció una amplia ventaja técnica.

Gran parte del campamento que de otro modo podría haberse inclinado hacia Illustrator ha jurado por los fuegos artificiales ahora descontinuados (y estoy seguro de que muchos todavía lo usan, o simplemente lo juran). Fuegos artificiales diseñados con el desarrollo web en mente, y tenían un buen soporte de vectores.

Otro posible factor que favorece la coronación de Photoshop sería ImageReady, que se suspendió hace mucho tiempo, que presentaba excelentes herramientas de corte, incluidos botones multiestado, y podía funcionar “ida y vuelta” con archivos de Photoshop.

Dicho esto, Photoshop es realmente un programa terrible para el diseño de diseño. No comprende la estructura de la página, y trabajar con elementos de texto en masa es muy lento. Es divertido diseñarlo al principio, pero un proyecto a menudo se detiene con rondas de cambios o refinamientos relativamente menores hasta que el cliente o el equipo lo aprueban.

Adobe Illustrator es mucho mejor en esta fase, particularmente con herramientas de texto más elaboradas, y agrupar y seleccionar grandes cantidades de elementos de diseño es más fácil.

Mi preferencia personal es InDesign, porque como programa de diseño, es más adecuado para sitios web. Y los sitios web son realmente, ya sabes, diseños. Los cambios y las alternativas son realmente rápidos, y los PDF son fáciles de exportar. Pero cuando tengo que entregar el trabajo, me toma solo un tiempo recrear un diseño finalizado en PSD.

La verdadera lástima es que Adobe nunca ha renovado seriamente el soporte de archivos entre aplicaciones para permitirle mover ilustraciones entre aplicaciones, bidireccionalmente, sin pérdida de estructura. El diseño no es una línea de ensamblaje donde la parte A está terminada, por lo que la Parte B viene a continuación. Cualquier parte de un diseño puede necesitar ser reelaborada o desechada en cualquier momento, y diferentes herramientas pueden ser adecuadas para la tarea. Cada aplicación tiene sus puntos fuertes, y debería haber algo más sofisticado que incrustar una parte de una en la otra.

Adobe ha tenido décadas para encontrar una solución mejor, pero nada visto hasta la fecha parece completo.

Adobe Muse se está confirmando como un buen elemento para el final del diseño, pero no parece que vaya a funcionar bien con ningún otro entorno de desarrollo, por lo que hay algunos sitios de Muse, y luego están el resto de ellos.

Dreamweaver también aparentemente se ha calcificado y, con razón, nunca se ha promocionado como una aplicación de diseño.

Por lo tanto, PSD debe seguir siendo el estándar durante al menos un tiempo más.

Muchos diseñadores / desarrolladores usan Photoshop para crear las composiciones de diseño, pero fue bastante tedioso convertir la composición de diseño en código. Adobe Creative Cloud ahora incluye un servicio llamado Creative Cloud Extract que lo hace mucho más fácil y rápido.

Hay pocos elementos de diseño que un desarrollador necesita para escribir el código que es fiel al diseño.

  • Activos e imágenes
  • Mediciones
  • Fuentes, estilos, etc.

Con Extract ahora puede trabajar en el entorno de su elección: Photoshop, navegador o incluso Dreamweaver, para extraer los elementos de diseño y convertirlos en código. Sin embargo, el extracto no es

  • Honestamente, hay muchas otras herramientas además de Photoshop e Illustrator, como Sketch y Affinity Designer, para crear excelentes diseños de maquetas.
  • Pero personalmente, prefiero Photoshop. ¿Por qué? Porque Photoshop es excelente para ajustar las imágenes utilizadas en las páginas web.
  • Entonces, en caso de que esté usando Illustrator, que es muy útil, especialmente para exportar activos como SVG, diseñar las páginas como Artboards, etc., tendré que saltar a Photoshop para retocar y luego volver a saltar, cada vez.
  • Pero la verdad sea dicha, creo que la elección pesa mucho en la preferencia personal. Así que adelante, trabaje con la plataforma con la que se sienta más cómodo.
  • Obtenga los mejores complementos de Photoshop para diseñadores web: los 30 mejores complementos gratuitos de Photoshop para diseñadores web

Creo que se reduce a 2 razones principales.

1) Los sitios web se miden en píxeles en lugar de unidades del mundo real, como pulgadas o centímetros. También es fácil configurar un documento de Photoshop en píxeles para que uno sepa que los archivos de diseño coinciden con las dimensiones del proyecto. (Incluso con un diseño receptivo, la mayoría de nosotros comenzamos con un ancho como 960px en mente)

2) Las imágenes que usamos en la web (jpg, png, gif) son mapas de bits en lugar de gráficos vectoriales. El uso de Photoshop facilita la exportación de imágenes en el formato y tamaño correctos y la aplicación de efectos de iluminación, sombras, etc. que se realizan fácilmente en este formato.

Dicho esto, a menudo es más fácil diseñar y maquetar un archivo en Illustrator o InDesign, y los logotipos u otras ilustraciones deben diseñarse en un programa vectorial. El método de Janine de diseñar en Illustrator y luego exportar a Photoshop para afinar los sonidos es un buen enfoque.

En el pasado, recibí archivos de InDesign e Illustrator que me han frustrado, no por el formato, sino porque tienen un tamaño incorrecto. (Se soluciona fácilmente si comienzan con puntos en lugar de pulgadas al configurar las dimensiones originales). Esto se vuelve frustrante porque tengo que medir, calcular y cambiar el tamaño para colocar las cosas correctamente.

Creo que la marea podría estar cambiando, personalmente. He trabajado en más de 3 equipos donde Illustrator es el sitio web para el diseño web y de productos. Todo depende del flujo de trabajo particular de su equipo. El espacio de la herramienta UX también se está llenando (Sketch, Affinity Designer, Macaw, etc.), y los costos de cambio están disminuyendo ya que todos se integran con Adobe de todos modos.

Por último, una parte justa de la industria se está moviendo hacia un tamaño relativo (a la Bootstrap, Android, etc.), que es ideal para diseños receptivos, y significa que la “perfección de píxeles” podría seguir el camino del dodo.

Photoshop es un anacronismo creado en los primeros días web. lo usamos porque siempre funcionó.

-no es necesariamente la mejor herramienta, pero es un estándar ampliamente exceptuado, para la manipulación de archivos basada en ráster.

A menudo elijo Photoshop cuando ya tengo algunas partes existentes hechas (cuando agrego una función a un flujo de trabajo existente) .Tengo a comenzar con un par de capturas de pantalla y muy rápidamente tengo una maqueta que ilustra la idea lo suficientemente bien. La velocidad y la idea es clave aquí. Pixel perfect puede venir más tarde.