Entre un diseñador web y un desarrollador frontend, ¿quién debería cortar el PSD?

La respuesta breve: el desarrollador front-end debería trabajar con el diseñador para separar adecuadamente los activos estáticos (es decir, las imágenes), ya que es la implementación la que impulsa este proceso en primer lugar. Lo más probable es que el diseñador esté más familiarizado con PS para hacer el corte, pero he conocido a muchos desarrolladores de FE que están perfectamente dispuestos a sumergirse en un PSD complejo, navegar por las capas y obtener los activos correctos.

–
La respuesta larga: Contrariamente a las respuestas populares aquí, creo que cortar PSD sigue siendo una habilidad muy útil y crítica en la producción de cualquier sitio intrincadamente diseñado. Como punto de referencia, sé que tanto Apple como Square tienen diseñadores que se burlan de composiciones muy detalladas en Photoshop, así como también emplean a un equipo de diseñadores de producción cuya responsabilidad principal es cortar y producir activos .

Eche un vistazo a páginas como Square Register ( https://squareup.com/register ) o el carrusel Apple iPhone 4S: ( http://www.apple.com/iphone/ ). Los disparos de héroes, los controles de la interfaz de usuario, los iconos y los divisores y las sombras y los biseles realmente no se pueden hacer con CSS3, y el diseño es lo suficientemente complejo como para que queramos entregar todo el sitio como se imaginó, lo que significa usar imágenes estratégicamente y sprites en la compresión y formato correctos.

Una vez más, los desarrolladores tienden a comprender un poco más acerca de las compensaciones y las técnicas para convertir una composición en una página web funcional, pero las habilidades necesarias son lo suficientemente especializadas como para que haya un mercado para las personas que tienen la atención a los detalles del diseño junto con la comprensión técnica de la web y cómo se crean las páginas. En nuestra ausencia, me inclino más por hacer que los implementadores dicten cómo se cortan las rebanadas, con generosas aportaciones y supervisión del diseño.

Si bien entiendo el punto de vista de Martin y Ren , estoy totalmente en desacuerdo con la afirmación de que “los PSD son, como, tan 2007”. Se debe mantener un punto de equilibrio entre usar Photoshop y dibujar elementos en CSS. Si bien es una gran idea dibujar todo dinámicamente en el código, no hay forma de exprimir ese amor y detalles adicionales del diseño confiando únicamente en CSS (¡por ahora!). Esta es una tendencia que tiende a cambiar en algún momento en el futuro, pero aún así, el gran diseño se realiza en Photoshop / Illustrator / Fireworks. Sin embargo, si buscas ese ambiente ‘minimalista’, seguro, diseña todo en código. El minimalismo es utilizado por muchos diseñadores de segunda categoría en estos días para “falsificar” la habilidad, además, aunque puede verse bien, no siempre es lo mejor para una gran cantidad de clientes. No olvide que las tendencias de diseño no son tan buenas para el oficio, ya que los clientes están condicionados a creer que esto es “moderno” y “elegante” y “moderno”, es solo cuando les muestra algo diferente y radical cuando dicen: “¡Oh hombre, eso es increíble! ¡Hagamos esto!”. ¡Se llena cuando los diseñadores comienzan a usar el mismo radio de esquina, sombra paralela, efectos de inserción, patrones de rayas y texturas de lino! ¡Odio esto! Por favor , no olvidemos que “gradientes, esquinas redondeadas, sombras” no son los únicos “trucos” en la caja de herramientas de los diseñadores. ¿Qué pasa con el juego de perspectiva sutil, resaltado, sombreado avanzado, variación de temperatura de color, relieve, contorno, varias técnicas para transmitir “material”, generación de activos escalables, “protección contra el futuro”, etc. Detrás de cada gran diseño se encuentra una gran metáfora de diseño, no puede ¡crea una experiencia inmersiva de “credibilidad de cuento de hadas” mientras confías solo en el código! Es así de simple. Una vez más, si estás solo en las esquinas redondeadas y los gradientes … eso es genial. Más trabajo para gente como yo 😀

Y con esa breve introducción, directamente a su pregunta.

Creo que el mejor escenario posible sería uno en el que el diseñador y el desarrollador mantengan una comunicación constante. Por lo general, mi desarrollador me dice que cuando está listo para implementar algo, luego corto los gráficos si todo se ve bien, si no, los cambios se repiten casi al instante. Como Ren Walker mencionó en su respuesta, “la creación rápida de prototipos y el desarrollo iterativo” son el UNO camino a seguir. No hay nada peor que un diseñador cortando más de 1000 gráficos y enviándolos al equipo de desarrollo para descubrir qué es qué. Esto ralentiza enormemente el proceso, sofoca las reiteraciones, introduce una desconexión diseñador-desarrollador severamente dañina y su general no profesional. Las convenciones de nomenclatura deben discutirse y establecerse incluso antes del inicio del diseño. (dado que supongo que todo buen diseñador tendría flujos de pantalla, bocetos, maquetas de alta fidelidad aprobadas y relativamente perfectas en píxeles. Uno debería saber cuáles deberían ser los elementos del diseño y la convención de nomenclatura adecuada aportaría grandes beneficios una vez que el proyecto aumenta la velocidad.)

En primer lugar, en nuestra agencia web hay muy pocos PSD. Estoy bastante convencido de que Fireworks es una herramienta mejor para la mayoría de las cosas de diseño web, por lo que Photoshop solo se usa para cosas en las que sobresale, como el procesamiento de texto.

A veces, el desarrollador front-end crea imágenes exportadas, pero la mayoría de las veces ni el desarrollador front-end ni el diseñador crean las exportaciones. La persona que hace la mayor parte de eso soy yo.

Lo considero un trabajo de producción y definitivamente hay un elemento de diseño. Debe ser muy preciso sobre la perfección de píxeles, conocer íntimamente las diferencias entre los diferentes formatos de archivo (jpg, gif, png, etc.) y sus diversas configuraciones, y se dedica una gran parte del tiempo a trabajar en sprites. Los sprites son excelentes para mejorar los tiempos de carga, optimizar los estados de desplazamiento, la organización de muchos elementos e íconos de la interfaz de usuario, la mantenibilidad de los elementos de diseño a lo largo del tiempo, un control de calidad final de los íconos y el diseño mientras se está armando el sprite, etc. Si no es un fondo o elemento de diseño que se puede hacer en CSS, probablemente sea en un sprite.

Si estás cortando un PSD, lo estás haciendo mal. Los PSD de corte provienen del diseño con tablas. Lo dejamos hace 10 años. Ahora, con el advenimiento de CSS3, ya no hay excusa para ello. No he cortado una PSD en más de 6 años; solo pensarlo me hace llorar por dentro.

Dicho esto, estoy de acuerdo con Chris Lukic: lo diseñas, lo cortas. No es responsabilidad del desarrollador tomar decisiones gráficas de dónde y cómo dividir un diseño. Muchos desarrolladores que conozco odian Photoshop y maldicen a los que solo dan PSD, especialmente cuando la organización de imágenes, texto y capas es una pesadilla.

En cuanto a los clientes que desean PSD. Lo único que hago en software gráfico es la estructura alámbrica, y lo hago en Illustrator. Luego realizo un prototipo y diseño en el navegador, tomo una captura de pantalla y se los envío. Los clientes no deben dictar sus procesos o flujo. Si quieren ver una imagen, deles una captura de pantalla de su sitio en vivo.

Creo que depende: si el PSD representa una página existente o con plantilla, ahorra tiempo si el diseñador corta y proporciona activos de imagen.

Para páginas nuevas, a menudo es mejor para el desarrollador front-end hacer el corte, ya que la implementación puede dictar la mejor manera de cortar la imagen. Los desarrolladores deberían estar acostumbrados a trabajar con PSD y poseer las habilidades para traducirlos a HTML / CSS de la manera más eficiente. Especialmente con el surgimiento de técnicas y características CSS más avanzadas, se pueden lograr muchos más elementos de diseño sin usar imágenes.

¡Sin duda! Es el diseñador web quien tiene que hacer este trabajo.
PSD se relaciona con el diseño de una parte del proyecto, ya que se encuentra en la sección de diseño gráfico.
Y, en mi opinión, todo diseño gráfico y diseño de páginas web debe ser realizado por el diseñador del sitio web.
Porque él / ella tiene el buen conocimiento para curar la apariencia creativa, que carece de Frontend Developer.

Gerente :
Markupbox.com

Martin tiene razón. Muerte al píxel!
Además, los PSD son, como, muuuy 2007. ¡Trae la creación rápida de prototipos y el desarrollo iterativo!

PERO … dicho eso, nuestra agencia todavía hace simulacros de PSD para la mayoría de los clientes porque los clientes insisten en “lo que parece”. Nuestro método es pensar siempre en la siguiente persona que toca el producto. Los diseñadores son responsables de seguir la estandarización de Photoshop y la administración de los activos (fuentes, patrones de fondo, fotografía). No hay tanto “corte y dado” como en los viejos tiempos. Usamos sprites para todos los iconos y el desarrollador front-end usa MUCHO CSS3 como sea posible (gradientes, esquinas redondeadas, sombras paralelas).

También se debe decir que el desarrollador front-end también es responsable de la estandarización en la estructura de nombres y archivos, tal como el diseñador fue responsable de la configuración de PSD.

Es mejor que el desarrollador frontend maneje el corte. Pueden entender mejor cómo se usarán las imágenes en CSS. Sin embargo, los diseñadores seguramente pueden proporcionar su aporte en esto, pero si los desarrolladores manejan la división, entonces libera completamente a los diseñadores para que solo se concentren en las partes creativas.

Tú lo haces. Lo cortaste. Cualquier diseñador web que valga la pena debe saber cómo el desarrollador frontend lo necesitará en rodajas.

Como creativo, prefiero darle el corte y dados al desarrollador para que pueda concentrarme en el contenido. Como persona de desarrollo, prefiero no tener que volver a hacer el corte y dados de la creatividad. La palabra es: la persona dev obtiene el ‘cuchillo’

Es bastante fácil