Diseño web ¿qué usar Photoshop o Illustrator?

¿Qué debo usar para diseñar sitios web, Photoshop o Illustrator?

¿Hay un software correcto o es más una elección personal?

¿Cuál va a ser tu contenido?
Esa es de hecho una pregunta basada en la opinión. Hay un montón de software para diseñar un sitio web. Ai, Ps, Dreamweaver, directamente en el navegador. Cada uno tiene sus fans y detractores.
Además, tenga en cuenta que hay muchas otras opciones además de Illustrator y Photoshop.
@SaturnsEye Estoy aprendiendo y estoy tratando de elegir una herramienta.
@spiral, ¿te refieres a CorelDraw, Expression Studio?
¿Está tratando de entender qué herramienta usar para crear la estructura de un sitio web o para crear contenido para un sitio web?
@SaturnsEye La estructura, diseño
Si eres nuevo en este tipo de cosas, te recomiendo algo como Dreamweaver.
Oooh, Gimp, Gimp, Gimp! :-)
Prefiero InDesign yo mismo
Fuegos artificiales, Sketch, Macaw, Gravit, Affinity...

Respuestas (6)

No estoy de acuerdo con la respuesta de Anaksunaman con respecto a Photoshop. El otro día tuvimos una pregunta similar que respondí ( Organización de PSD para desarrolladores ) donde mencioné que en esta era en evolución, nosotros, como diseñadores y codificadores, debemos evolucionar con el flujo de trabajo y usar Photoshop es arcaico y ya no tiene ningún propósito en diseño web como un medio EFECTIVO de desarrollo. Todavía es una gran herramienta para la manipulación de fotos, pero usarla para implementar un diseño de sitio web no tiene sentido para mí.

Recomendaré (referencia: ¿Cuáles son los pasos para diseñar un sitio web? ) que se puede lograr un mejor enfoque con Illustrator, especialmente con el uso de mesas de trabajo. Aunque no me refiero a diseñar todo el sitio en Illustrator, estoy hablando de la estructura alámbrica y la maqueta. Aún debe diseñar en el navegador, pero si diseña algún ícono, puede completarlo en Illustrator y exportarlo. Si va a desarrollar una marca o cualquier cosa relacionada con la impresión, seguramente espero que el logotipo que desarrolló esté en forma de vector y que esa forma de vector se pueda guardar como un SVG para una imagen escalable en un diseño web receptivo. Entonces, una maqueta simple o cualquier ícono relacionado puede exportarse como código SVG e incluirse en un documento XHTML (referencia: hice un mapa en AI, pero el tamaño del archivo es ENORME como svg?)

Sobre el tema de la codificación, creo que Dreamweaver no tiene sentido y es una pérdida de dinero, y si preguntas en algunas empresas de desarrollo web con las que he hablado, se ríen de Dreamweaver. Está bien para los nuevos usuarios, pero las personas con las que he trabajado que comenzaron a usar Dreamweaver se basaron en gran medida en el área de vista previa del diseño en lugar de trabajar en el código y la finalización del código es un mal hábito para que confíe un nuevo codificador. No recordará cómo codificar correctamente si siempre usa la finalización del código desde el principio. Hay algunos editores de código excelentes y potentes que son gratuitos, como Notepad ++, Text Wrangler (prefiero BBEDit, que es de pago) y Sublime Text.

Entonces, un resumen de su pregunta "¿Diseño web, qué usar Photoshop o Illustrator?": Ambos, la manipulación de imágenes, usan Photoshop e Illustrator para logotipos, maquetas, estructuras de alambre, íconos y cualquier cosa que se pueda ejecutar como SVG. Después de completar su maqueta, trabajaría en un editor de código y desarrollaría el resto de su sitio.

¿Te tranquilizaría si te dijera que hice gran parte de mi trabajo en GIMP, Inkscape y Notepad++? :-PAGS
Ya ni siquiera uso mucho Gimp o Photoshop. He descubierto que si tengo que editar imágenes, solo uso ImageMagick y trabajo pagado por Adobe =)

photoshop o ilustrador?

Sí. Y también probablemente

  • papel
  • lapices
  • herramientas de estructura alámbrica
  • javascript
  • html
  • CSS

En otras palabras, tiene una caja de herramientas y utilizará la herramienta adecuada para la tarea en particular.

La conclusión de su respuesta es correcta, pero realmente no aprendí nada al leerla. Algunos ejemplos concretos (como en la respuesta de Darth_Vader) serían útiles.

Desafortunadamente, diría que esta no es una pregunta binaria ya que cualquier programa de gráficos puede generar contenido para usar en un sitio web. Entonces, en ese sentido, es mucho más una elección personal.

Dicho esto, si no está haciendo ningún tipo de codificación inmediata (solo maquetas y elementos de exportación para usar, etc.), Photoshop es, con mucho, el producto más utilizado. Los clientes pueden querer o esperar que use este producto y, de manera similar, los terceros que se lo entregan (por ejemplo, si subcontrata el trabajo del logotipo) pueden entregarle sus productos terminados en formato .psd. Por lo tanto, es muy recomendable tener una copia de Photoshop, independientemente de lo que elija hacer en el día a día.

Para su propio trabajo, las características entre Illustrator y Photoshop son lo suficientemente similares, ciertamente puede adaptar Illustrator para producir diseños web front-end (las partes gráficas). Una simple búsqueda en Google arrojó este resultado para algunas configuraciones básicas para CS5 que ayudarían a los diseñadores web. Recuerde que Illustrator está dirigido más directamente a imágenes e impresiones basadas en vectores, por lo que puede requerir un poco de pensamiento innovador si se usa para diseño web.

Adobe Dreamweaver ocupa el segundo lugar detrás de Photoshop en la lista casi imprescindible, probablemente, al menos si va a codificar su diseño. Para el trabajo de nivel de entrada con código (y algunos problemas de propiedad), Adobe Muse es una especie de alternativa a Dreamweaver. Por supuesto, hay muchos otros productos excelentes que hacen cosas similares, pero nuevamente, la popularidad elige a Dreamweaver.

Alternativamente, hay muchos buenos editores de código gratuitos como MS Visual Studio Express, Komodo y Notepad++ (e incluso puede usar MarkdownPad para algunos trabajos básicos de contenido). Lo que pierde al no usar Dreamweaver es WYSIWYG, principalmente, ya que otros productos tienen finalización de código, etc. Pero si realmente desea WYSIWYG sin Dreamweaver, también hay otros productos.

Si desea una alternativa ráster no vectorial a Illustrator que no sea Photoshop, es probable que pueda usar los productos de Corel si lo desea o el Programa de manipulación de imágenes Gnu (GIMP) de código abierto. El GIMP tiene la ventaja (como los editores de código alternativos que mencioné) de ser gratuito.

Cualquier buena herramienta que use probablemente debería (tendrá) algún tipo de opción de "segmento" para exportar los elementos finales de su maqueta (suponiendo que estos no estén ordenados y guardados por separado). Aparte de eso, en mi opinión, hay muy pocas características "imprescindibles", excepto en nombre de la conveniencia.

Para ser honesto, literalmente podrías hacer todo tu diseño web con MS Paint y Notepad si estuvieras lo suficientemente versado...

Puede usar ambos para el diseño web según su elección, pero cuando se trata de entregar diseños web / marcos de alambre temprano, Illustrator es mucho más rápido y fácil de usar para esta tarea.

También me gustan los fuegos artificiales para el diseño de sitios web. Publicación interesante: http://boagworld.com/design/fireworks-vs-photoshop/

Fireworks ha sido descontinuado y ya no está disponible.
Y, sin embargo, es una herramienta que muchos de nosotros todavía usamos.

Para mí, Illustrator es incuestionable, pero puede hacer casi cualquier cosa que desee con Photoshop y, si no puede pagar el paquete completo de Creative Cloud, le recomiendo que intente encontrar suficiente dinero para Photoshop CC.

Si puede pagar la nube creativa, le recomiendo lo siguiente:

  1. Adobe Muse CC para enmarcado y diseño de maquetación
  2. Adobe Illustrator CC para iconos, logotipos y cualquier otra ilustración
  3. Adobe Photoshop CC para manipular y editar fotos

Adobe muse es donde ocurre toda la magia. Fue creado por algunas de las personas que crearon InDesign y ha sido diseñado para que los diseñadores de impresión puedan publicar sitios web en vivo en la web sin escribir una sola línea de código.

Las maquetas ya no tienen que estar en formato pdf, sino que puede crear un diseño receptivo que el cliente realmente pueda tener una idea de cómo funciona en el mundo real. Pero si aún desea crear presentaciones en PDF también, le sugiero que descargue la extensión de cromo Awesome screenshot porque no puede exportar archivos PDF de muse; bueno no que yo sepa de todos modos?

También recomiendo que eventualmente codifique el sitio web usted mismo y no lo deje todo solo para reflexionar, ya que creará un sitio mejor construido a largo plazo.

También quiero mencionar que muchos diseñadores web ni siquiera usan software de diseño, simplemente diseñan directamente en el navegador, desde el principio.