Codificando el diseño de un sitio web, ¿cuál es mejor de PSD (Adobe Photoshop) o EPS (Adobe Illustrator)? [duplicar]

Cuál es la diferencia entre EPS y PSD al hacer una maqueta en: 1. Calidad 2. Tamaño en la página de carga 3. Más fácil de usar 4. Similitud entre ambos

Gracias de antemano....

Respuestas (4)

No importa. Ni .psd ni .eps son formatos apropiados para permanecer en la web.

Usa cualquier cosa con la que te sientas cómodo en la creación. Luego, corta su diseño en partes y crea el código (HTML/CSS) y usa partes de su documento de Photoshop o Illustrator para las imágenes de apoyo necesarias.

En ningún caso un archivo .psd o .eps se pone simplemente en la web como página web.

Actualización después de la edición de la pregunta:

En términos de una maqueta, su pregunta es demasiado amplia.

Por ejemplo, eps es un formato bastante muerto para la mayoría de las cosas, ciertamente para cualquier maqueta de diseño web. Usaría .ai o incluso .pdf antes de recurrir a eps.

En términos de calidad, puede haber algunas ligeras diferencias. Por ejemplo, Photoshop le permitirá agregar tramado y ruido a un degradado para suavizar las bandas. Illustrator no puede hacer eso. O el hecho de que Illustrator puede permitir fácilmente la edición y reedición de esquinas redondeadas donde Photoshop no puede hacerlo.

En cuanto a cargar "tamaño", eso tampoco hace ninguna diferencia. Dado que estaría extrayendo elementos individuales y guardándolos, los tamaños de archivo de estos elementos pueden hacerse fácilmente idénticos o casi idénticos.

Más fácil de usar... realmente depende de su conocimiento.

Similitud entre AI y PS... consulte Adobe.com.

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. 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. Pero, necesito saber cuando hago zoom en mi archivo psd, se pixela cuando hago zoom @ 182.21% cuando hago zoom en cualquier página web, no encuentro que se pixele, ¿puedes explicarlo?
En realidad lo es, pero no de la misma forma que en los años 90. Todavía rebana diseños pero no utiliza herramientas de rebanado. Puede extraer un degradado o una imagen para usar como fondo para CSS. Mi uso de "segmento" se refería a extraer imágenes según fuera necesario, no cortar diseños completos para una forma de codificación obsoleta. En cualquier caso, psd y eps son formatos inapropiados para la web.
necesito saber cuando hago zoom en mi archivo psd se pixela cuando hago zoom @ 182.21% cuando hago zoom en cualquier página web no encuentro que se pixele independientemente de cuánto haga zoom, cuál es el secreto en esto, el diseñador lo hizo como vector eps o el software CSS preservará los píxeles de diseño, solo me confunde, ¿puede explicarme, por favor?
Las aplicaciones como Photoshop o Illustrator mantienen el PPI de una imagen independientemente del porcentaje de zoom para permitir una edición detallada. Es por eso que las cosas se vuelven borrosas. Está haciendo zoom en píxeles. Los navegadores web simplemente aumentan el tamaño de la imagen e interpolan la imagen a la resolución del monitor.
En otras palabras... la aplicación muestra píxeles reales independientemente del zoom. Los navegadores simplemente estiran los píxeles al hacer zoom.
Yo no iría tan lejos, pero de nada ;)
Solo para aclarar, incluso para los degradados, no necesitaría usar el método 'segmento', ya que es compatible con CSS en los navegadores modernos. De todos modos, creo que Fireworks sería la mejor aplicación para maquetas de diseño web. Hace más o menos lo que pueden hacer Illustrator y Photoshop, pero en un solo producto.
Gracias por agregar esa información, Chris, me gustaría saber cuál es el ancho de la página web en píxeles cuando estoy diseñando mi sitio web, ¡ya tengo 1321 píxeles de ancho!
Sí. Los degradados se pueden crear en CSS3 siempre que no necesite admitir versiones anteriores de IE. Pero hay mejores métodos (svg) para versiones antiguas de IE. @ahmedamro no hay un "tamaño establecido" para el ancho de una página web, pero en términos generales trato de restringir cualquier diseño para que sea funcional a 960px o 1000px de ancho. Si supera eso, es posible que a los usuarios les falten elementos debido a la resolución de su pantalla. Por supuesto, con el diseño receptivo hay consultas de medios que se pueden usar para controlar la apariencia en diferentes anchos.
Algo fuera de tema, pero generalmente uso esto para degradados: colorzilla.com/gradient-editor
¡De acuerdo con Chris sobre los fuegos artificiales!
@ahmed, diseñar para un ancho de píxel fijo es cosa del pasado. Los dispositivos pueden tener desde 300 px de ancho (o menos) hasta varios miles.
@ahmedamro, ese primer comentario suyo es una cita directa mía de aquí: graphicdesign.stackexchange.com/questions/538/… . ¿Por qué lo publica aquí como su propio comentario a su propia pregunta?

Prefiero AI a PSD para composiciones, a pesar de sus deficiencias, por varias razones.

  1. La vinculación de archivos (en lugar de incrustar como Photoshop) reduce el tamaño del archivo y facilita las actualizaciones remotas y el uso compartido de elementos de componentes.
  2. La edición de vectores es más fácil en Illustrator, dado un buen conocimiento de ambas aplicaciones, y trabajar con vectores es cada vez más importante para la funcionalidad entre dispositivos.
  3. Es más fácil trabajar con el tipo .
  4. Facilidad para cruzar medios , lo cual es importante en un ecosistema de marca más grande donde lo impreso y lo digital cooperan.

Por supuesto, la maqueta es solo una parte de la ecuación. Comunicar lo que debería hacer en acción es igual de importante, independientemente de su aplicación de arte. Ofrecí una breve descripción general de mi enfoque sobre UX SE en esta respuesta .

Fireworks ofrece edición nativa de vectores y edición no destructiva de mapas de bits de origen (si sabe lo que está haciendo). Los archivos exportados (png, css, etc.) serán livianos de todos modos, pero los png de Fireworks generalmente no son tan grandes siempre que no trabaje con una imagen que sea mucho más grande de lo que necesita. En ese caso, recomendaría una reducción de resolución destructiva. No es como si estuvieras sobrescribiendo el original.
Fireworks es excelente, pero no parece tener mucho futuro en Adobe. Realmente desearía que hubieran pasado más tiempo desarrollándolo que esa cosa tonta de Dreamweaver. Oh bien. Lo compraron para matarlo, si me preguntas.

Fuegos artificiales.

  • Creación rápida de prototipos de IU
  • Amplias plantillas de interfaz de usuario disponibles en Fireworks y en línea para interfaces móviles y web que puede diseñar
  • La integración con jQuery Mobile Theme Roller significa que puede pasar del diseño de UI a CSS dentro de la misma herramienta
  • Híbrido entre Photoshop e Illustrator para necesidades de diseño web
    • Photoshop es genial para una edición de imágenes de 4000x2000 sin perder calidad, pero para la web... no necesita ese tipo de poder de edición de imágenes, quizás el 5% del tiempo. De la misma manera, Illustrator es muy poderoso para material vectorial, pero no necesita ese poder todo el tiempo
    • Fireworks es el híbrido entre los dos que está mucho más centrado en el flujo de trabajo de desarrollo web/móvil
  • ¡Pero no menos poderoso que los otros dos! ¿Necesita un gradiente de 6 etapas? También puede hacerlo fácilmente en Fireworks.
  • Genera CSS a partir de tu diseño; Puede hacer un buen botón de degradado, ir al inspector de propiedades de CSS y copiar el CSS allí, enviarlo a su desarrollador (esto todavía es genial para mí: p)

Lo único molesto de FW para mí es que los atajos de teclado a veces son diferentes a los de Photoshop.

Gracias por esta buena respuesta y motivación sobre Fireworks, ya diseñé el 50% de mi sitio web en Photoshop, ¿debería usar Fireworks? Solo tengo experiencia en Photoshop y cero en CSS, ¿algún consejo, por favor?
sí, la experiencia en photoshop debería ser suficiente para que puedas captar los fuegos artificiales rápidamente. Fue la misma situación para mí. Un diseñador colega me recomendó los fuegos artificiales, y los tomé después de ver algunos videos y entender las páginas frente a las capas.

Como desarrollador front-end, siempre estoy del lado de Photoshop en este caso. Muchos diseñadores se olvidan de configurar su composición de IA para ajustarse a píxeles. Esto deja casos en los que los cuadros que se dibujan con vectores cuelgan entre las líneas de píxeles y generan líneas borrosas en lugar de líneas nítidas. Cuando está diseñando un sitio que usa un diseño de columna, estos pequeños detalles a veces obligarán a un administrador de frontend a sentir una furia vertiginosa, ya que tendrán que entrar y ajustar las cosas. Esto puede agregar frustración entre los equipos de diseño y desarrollo y, en última instancia, afectará los plazos si una interfaz ahora tiene que saltar a Photoshop y corregir las cosas.

Codificando el diseño de un sitio web, ¿cuál es mejor de PSD (Adobe Photoshop) o EPS (Adobe Illustrator)? [duplicar]
RespuestasAquíPolítica de privacidad1y, 0v