Diseñar un sitio web desde cero: ¿Illustrator o Photoshop?

Si estoy diseñando un sitio web desde cero y tengo la intención de dividirlo y codificarlo en Adobe Dreamweaver más tarde, ¿debo crear el diseño del sitio web en Illustrator o Photoshop? ¿Por qué?

Recomendaría Photoshop por su uso más amplio y más tutoriales.
Para empezar, no debe diseñar sitios web utilizando la antigua metodología de 'cortar una imagen'. Idealmente, comenzaría en HTML/CSS y usaría sus aplicaciones de imágenes a medida que avanza.
@Jichao: Su comentario debe convertirse en una respuesta.
@ DA01 "no debería" podría ser demasiado imperativo para un asunto tan subjetivo. No hay mejores prácticas para todos.
@koiyu muy cierto. Dicho esto, cortar en dados es con menos frecuencia la mejor práctica en estos días. Voy a elaborar en una respuesta.
@Phillip Regan: es demasiado breve para ser una respuesta, y no puedo expandirlo a una respuesta completa por mi falta de experiencia en Illustrator.
Probablemente también debería considerar InDesign, especialmente si está trabajando en un sitio web con mucho texto. Vea el caso del sitio web receptivo del Boston Globe .
Para los diseños de sitios web modernos, omitiría el corte de imágenes e iría directamente a HTML/CSS. Estamos en la era de la interfaz de usuario plana/móvil... no se permiten texturizados sofisticados :)

Respuestas (8)

Respuesta literal rápida: entre Illustrator y Photoshop, PhotoShop, como es raster, como es el sitio web.

Respuesta un poco más detallada: estarías usando ambos.

Respuesta alternativa: Considere usar Adobe Fireworks. Fireworks es mucho más fácil de usar una vez que aprendes a producir gráficos web.

Respuesta larga y aburrida de la conferencia:

El método "Slice-n-Dice" está un poco anticuado. Fue popular hace una década, pero en estos días realmente no es el enfoque recomendado. Yo sugeriría:

  • Use cualquier aplicación (AI/PSD) para 'dibujar' el sitio. Siéntete libre de usar alta fidelidad, pero trátalo simplemente como una maqueta.

  • una vez que haya establecido eso, comience a construir el sitio. Sumérgete en HTML/CSS/JS.

  • según sea necesario, ingrese a PhotoShop para crear los elementos gráficos individuales que necesita.

¿Por qué? Bueno, diseñar en Photoshop no tiene en cuenta el medio en el que estás trabajando. Es un lienzo fijo y la web no es un lienzo fijo, ni siquiera es un lienzo estándar. Conduce al equipo hacia una idea de píxeles perfectos y la web simplemente no es perfecta.

Tal vez, podríamos arreglar el ancho del lienzo, ya que hay muchos sitios web famosos de ancho fijo. Para obtener más información, consulte 960.gs.
eso te llevará a la mitad del camino. para algunas pantallas.
Eso debería ser un problema. Sin embargo, no tengo grandes pantallas LCD, por lo que no tengo la oportunidad de probarlo.
lo siento si estaba siendo obtuso. Lo que quise decir es que hay mucho más en no ser un lienzo fijo que si es o no un sitio de ancho fijo... contenido, dispositivos móviles, tecnologías de asistencia, SEO, discrepancias del navegador, etc.
+1 por recomendar Fireworks en tu respuesta. Una aplicación de diseño web muy subestimada, pero poderosa.
@Jichao re "Sin embargo, no tengo grandes pantallas LCD, por lo que no tengo la oportunidad de probarlo" - ctrl-(alejar) es su amigo cuando simula pantallas grandes. No siendo obtuso, es realmente muy útil, especialmente si está probando un diseño receptivo , designmodo.com/responsive-design-examples . Simplemente no olvide que las barras de desplazamiento no se reducen cuando se aleja.
No creo que su sitio web sea una cosa rasterizada. Las fuentes son vectores, las cajas son vectores...
@joojaa sí, podrías argumentar eso. Los SVG también lo son. Las cosas han cambiado en 4 años... :)

Utilice Fireworks o Illustrator para la creación de logotipos e iconos. Para la edición de fotos use Photoshop. Por todo lo demás importa muy poco. Sé que ha habido debates sobre qué software gráfico usar, pero en realidad es una preferencia personal.

Sin embargo, tenga en cuenta:

  • Sin embargo, Fireworks es mejor para la compresión PNG. Los tamaños de archivo tienden a ser entre un 20 % y un 30 % más pequeños que los de Photoshop.

  • Si sabe que en el futuro diseñará otro contenido no web para el sitio (camisetas, carteles, volantes, etc.), es mejor si comienza con un programa basado en vectores.

+1 para "Si sabe más adelante...", de hecho, creo que es mejor trabajar asumiendo que se necesitarán elementos visuales clave en otros formatos. Los clientes casi nunca saben para qué van a querer usar algo hasta que lo ven y nunca entenderán que hacer que una imagen web RGB funcione para impresión no es tan fácil como esperan... Es bueno tener algo en el bolsillo trasero para el ocasional "Eso se ve muy bien, ¿puedes tomar ese estilo y aplicarlo a estos carteles de pared A0 que imprimiremos para nuestra gran conferencia el próximo martes? Eso es fácil de hacer, ¿verdad?"
En cuanto al tema de la compresión de imágenes eficiente, no confío en ninguna de las aplicaciones de Adobe. Pruebe algo como ImageOptim , una aplicación para Mac. Hay otras soluciones locales y basadas en la web. Obtendrá gráficos mucho más pequeños, en algunos casos.

Tengo que estar en desacuerdo con DA01.

El hecho de que un documento web no sea una imagen estática es irrelevante para la utilidad de un editor de gráficos para maquetar y diseñar un sitio web. Su maqueta de diseño no necesita (y no debería) ser un prototipo funcional de su sitio web. La maqueta de diseño es un documento que lo ayuda a visualizar y esculpir el diseño estético de su sitio.

El hecho de que una hoja de papel o una pizarra no tenga todas las cualidades mínimas de un documento web no significa que no se pueda usar para estructurar un sitio web. Del mismo modo, el hecho de que la ventana del navegador se pueda estirar y cambiar de tamaño no influye en el valor de las maquetas de diseño. Cualquier diseñador web experimentado sabrá planificar ciertas partes del diseño como elásticas y tener en cuenta las limitaciones de las tecnologías web. Todos los elementos visuales de un diseño aún se pueden representar dentro de una imagen plana (después de todo, así es como se representa en la pantalla).

En segundo lugar, un enfoque fragmentario del diseño no conduce a resultados de calidad. Está diseñando un diseño web, no cien widgets aislados. Sin una maqueta del diseño completo, básicamente solo está colocando cosas sin tener idea de cómo debería ser el resultado final. Agregar elementos gráficos individuales pieza por pieza sobre la marcha sin una visión general de la composición completa va en contra de las buenas prácticas de diseño. Un diseño está completo cuando te quedas sin cosas que eliminar, no cuando te quedas sin cosas que agregar.

Por último, lleva mucho más tiempo realizar cambios de diseño en el código que modificar una imagen de maqueta. Es por eso que siempre debe planificar su diseño en maquetas antes de comprometerse con el código. Depende de usted si utiliza un programa de gráficos vectoriales como Fireworks o Illustrator o un programa raster como Photoshop. Pero siempre debe elaborar su diseño en un editor de gráficos antes de comenzar a codificarlo.

No creo que estemos en desacuerdo. Estoy completamente de acuerdo con usted en base a la variable 'diseñador web experimentado'. El problema es que las personas a cargo de las maquetas de PSD a menudo no son diseñadores web experimentados y eso causa todo tipo de dolores de cabeza a medida que avanza el proyecto. En cuanto a una 'maqueta del diseño completo' también estoy de acuerdo. Sin embargo, no diría que siempre debe ser o siempre debe ser un archivo PSD de alta fidelidad. Los wireframes suelen ser suficientes.
Sin embargo, no estoy de acuerdo con tu último párrafo. Necesita ingresar al código para diseñar completamente la experiencia del usuario. Y, la mayoría de las veces, esa es una pieza clave del proceso de diseño y, de hecho, es bastante fácil hacer cambios en ese punto en el entorno adecuado (la agilidad es un buen lugar para comenzar).
Me quedaría con sus dos opiniones, y probablemente también dependa de los proyectos. Puedo entender ambos puntos, aunque tengo que decir que no soy lo suficientemente paciente a menudo o me siento perdido en los detalles si primero diseño toda la página en PS. Además, los diseños en CSS se ven diferentes a los de PS. Además, descubrí que si te acostumbras a la codificación, al menos para mí, soy más rápido que cambiarlo en PS. Y por último, pero no menos importante, las cosas pueden cambiar (incluso después de planificar cuidadosamente cada detalle), y cuando codifico a menudo encuentro desafíos en el diseño (desde CSS, etc.) y tendría que cambiar; en PS, rara vez es el caso. .

Aquí hay una buena publicación que explica esto de una manera divertida :) http://www.gomediazina.com/tutorials/photoshop-vs-illustrator-part-1/

aquí hay una mejor explicación de una fuente muy confiable "http://99designs.com/help/whats-the-difference- between-photoshop-and-illustrator"

En última instancia, la decisión de qué herramienta usar debe ser prescrita por el ganador del concurso, pero en general, Illustrator debe usarse para logotipos y trabajos de impresión, mientras que Photoshop debe usarse para diseño web y cualquier diseño que solo se vea en una computadora. pantalla."

99designs no es una fuente confiable de nada.
¿Hay alguna razón en particular por la que dirías eso? Solo para aclarar, no trabajo con ellos ni estoy vinculado a ellos de ninguna manera; sin embargo, en el pasado he encontrado que sus artículos y blogs son muy útiles. También han sido reconocidos por muchos nombres importantes de los medios como msnbc, new york times, etc... ¿Me estoy perdiendo algo aquí? Por favor comparte.
Y solo para probar mi punto Stack over flow Logo fue diseñado en 99 Designs 99designs.com/users/245023
Bueno, para empezar, la cita es una generalización excesiva y no muy precisa. Como empresa de diseño, son similares a Kinkos. Está bien para soluciones suaves y baratas. Pero eso es todo.
@ DA01: explique siempre por qué algo no es confiable; de ​​lo contrario, no hay nada constructivo en su comentario.
Los concursos de diseño a través de crowdsourcing nunca son buenos para mí y no deberían ser promovidos por diseñadores profesionales. (Además, es ligeramente ilegal en mi país :D)
Las empresas de @Littlemad como 99designs se consideran talleres clandestinos de la industria. Hay un mercado para lo que hacen, pero nadie lo llamaría trabajo de calidad.
@Ved Sí, el logotipo de stackoverflow se realizó en 99 diseños... 99designs.com/logo-design/contests/logo-stackoverflow-6774 /... ... te hace preguntarte por qué a la gente le gusta el crowdsourcing. Todo lo que termina haciendo una empresa es elegir lo mejor de lo peor.

Si necesita "rebanar", puede usar Photoshop directamente sin ir a Dreamweaver.

Hay 2 formas de cortar en Photoshop, automática y manualmente seleccionando la parte del gráfico que necesita y guardándola para la web, una pieza a la vez.

Cada vez que "corta automáticamente" con la generación de HTML, decide perder el control sobre el código. Al comienzo de tu carrera está bien, estás aprendiendo, pero llegará un punto en el que tendrás que conocer el código, porque para la optimización es mejor código manual en un editor de texto avanzado (por ejemplo, el software Ultraedit) haciendo tu propio html y css.

El único momento en que encuentro más útil el corte automático es cuando tengo que generar código de tabla al diseñar para correos electrónicos.

Photoshop a imagen listo. es decir, se trata del contenido del sitio. El cliente no está pagando por la mejora de su cartera. KL

Bienvenido a GD. Creo que entiendo a lo que te refieres, pero ¿puedes ampliarlo un poco, por favor?

Es bastante obvio que debe usar Photoshop para maquetas completas de diseño web.

Los diseños de Illustrator aún tienden a procesarse más lentamente en comparación con los diseños de Photoshop.

Si está diseñando íconos y elementos web, le sugiero que diseñe en Illustrator y luego coloque esos elementos en Photoshop.

Si crea maquetas en Photoshop, puede transferir fácilmente esos documentos a Fireworks para crear prototipos rápidamente.

Photoshop será mejor. Ayudará a los usuarios a cortar.

Esta respuesta es un poco corta. ¿Puedes explicar lo que quieres decir?
¿Quién corta más?
Diseñar un sitio web desde cero: ¿Illustrator o Photoshop?
RespuestasAquíPolítica de privacidad1y, 0v