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

8

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

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

Giannis
fuente
¿Cuál será tu contenido?
SaturnsEye
Esa es de hecho una pregunta basada en la opinión. Hay mucho software para diseñar un sitio web. Ai, Ps, Dreamweaver, directamente en el navegador. Cada uno tiene sus fanáticos y detractores.
Vincent
1
Además, tenga en cuenta que hay muchas otras opciones además de Illustrator y Photoshop
espiral
@SaturnsEye Estoy aprendiendo y estoy tratando de elegir una herramienta.
Giannis
1
@SaturnsEye La estructura, diseño
Giannis

Respuestas:

7

No estoy de acuerdo con la respuesta de Anaksunaman con respecto a Photoshop. El otro día tuvimos una pregunta similar que respondí ( Organizar 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 sirve para nada en el diseño web como Un medio eficaz de desarrollo. Sigue siendo una gran herramienta para la manipulación de fotos, pero usarla para implementar el diseño de un sitio web no tiene sentido, para mí.

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

Sobre el tema de la codificación, creo que Dreamweaver no tiene sentido y desperdicia 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 un nuevo codificador confíe. No recordará cómo codificar correctamente si siempre usa la finalización de código al comenzar. 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?": Tanto, la manipulación de imágenes usa Photoshop e Illustrator para el logotipo, la maqueta, el enmarcado de alambre, los iconos y cualquier cosa que se pueda ejecutar como SVG. Una vez completada su maqueta, trabajaría en un editor de código y desarrollaría el resto de su sitio.

DᴀʀᴛʜVᴀᴅᴇʀ
fuente
1
¿Le complacería si le dijera que hice una gran parte de mi trabajo en GIMP, Inkscape y Notepad ++? :-P
Anaksunaman
Ya ni siquiera uso Gimp o Photoshop. He descubierto que si tengo que editar imágenes, solo uso ImageMagick y trabajo pagado por Adobe =)
DᴀʀᴛʜVᴀᴅᴇʀ
4

Photoshop o ilustrador?

Si. Y también probable

  • papel
  • lapices
  • herramientas de alambre
  • javascript
  • html
  • css

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

DA01
fuente
1
El resultado final de su respuesta es correcto, pero realmente no aprendí nada al leerlo. Algunos ejemplos concretos (como en la respuesta de Darth_Vader) serían útiles.
Stijn
3

Desafortunadamente, diría que esta no es una pregunta binaria ya que cualquier programa de gráficos puede generar contenido para ser utilizado 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 exportando elementos para usar, etc.) Photoshop es, con mucho, el producto más utilizado. Los clientes pueden desear o esperar que use este producto y, de manera similar, los terceros que lo envían (como si externaliza el trabajo del logotipo) pueden entregarle sus productos terminados en formato .psd. Por lo tanto, tener una copia de Photoshop es muy recomendable, independientemente de lo que elija hacer 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 fuera de la caja 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 un puñado de buenos editores de código gratuito como MS Visual Studio Express, Komodo y Notepad ++ (e incluso puedes usar MarkdownPad para algunos trabajos de contenido básico). Lo que pierdes al no usar Dreamweaver es WYSIWYG, principalmente, ya que otros productos tienen finalización del código, etc. Pero si realmente desea WYSIWYG sin Dreamweaver, también hay otros productos.

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

Cualquier buena herramienta que use debería (probablemente) tener algún tipo de opción de "corte" para exportar elementos finales de su maqueta (suponiendo que estos no estén ya 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ía hacer todo su diseño web con MS Paint y Notepad si estuviera lo suficientemente versado ...

Anaksunaman
fuente
2

Puede usar ambos para el diseño web depende de 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.

Creanyx
fuente
1

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

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

Para mí, Illustrator es obvio, pero puedes hacer casi todo lo que quieras con Photoshop y si no puedes permitirte el paquete creativo completo de la nube, te recomiendo que intentes encontrar suficiente dinero para Photoshop CC.

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

  1. Adobe Muse CC para enmarcado de alambre y diseño de diseño
  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 sucede toda la magia. Fue construido por algunas de las personas que construyeron 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 puedes crear un diseño receptivo que el cliente realmente pueda tener una idea de cómo funciona en el mundo real. Pero si todavía desea crear presentaciones en pdf también, le sugiero que descargue la extensión de Chrome Awesome screenshot porque no puede exportar archivos pdf de png desde muse; bueno, no que yo sepa de todos modos?

También le 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.

Samuel
fuente