El otro día, un amigo mío dijo algo que me llamó la atención: "Estoy tratando de aprender cómo cortar un PSD". Es una declaración bastante simple. Tan pronto como lo dijo, supe exactamente de qué estaba hablando y, sin embargo, había algo allí que no estaba del todo bien.
Al ver mi vacilación, mi amigo respondió con una pregunta: "¿Seguimos cortando PSD?" Gran pregunta Para los principiantes, la jerga no es simplemente una jerga, implica un proceso y sugiere un método de acción. Por esta razón, a menudo es útil para los desarrolladores más avanzados definir sus términos de una manera que sea significativa para otros. Hoy profundizaremos en la teoría detrás del proceso de conversión de una PSD a una página web y terminaremos con una discusión sobre los altibajos del diseño en el navegador.
Nuestro archivo de muestra
Hoy no convertiremos una PSD a HTML / CSS, solo estamos discutiendo cómo y por qué para que pueda comprender completamente el enfoque típico adoptado por los diseñadores web de hoy.
Necesitaba una PSD para hacer referencia a lo largo del artículo, así que tomé la impresionante PSD mínima de Creative Studio de GraphicsFuel.com.
¿Qué es rebanar?
Lo primero de lo que deberíamos hablar es de lo que significa "cortar". un PSD. En términos generales, el término simplemente significa dividir su documento de Photoshop en partes, que luego se sirven en el servidor web, se ponen en orden por HTML y se colocan / se colocan en CSS.
En un nivel más específico, la división puede referirse a un conjunto específico de herramientas dentro de Photoshop. Usando la herramienta Slice, podemos dividir nuestro documento en pequeños pedazos. Básicamente, solo dibujamos un rectángulo alrededor de cada elemento que queremos separar en una imagen individual.
¿Por qué Slice?
Las herramientas de corte en Photoshop están simplemente ahí por conveniencia. Hay un montón de grandes diseñadores web que nunca los tocan y no hay nada de malo en eso.
El punto detrás de las herramientas de segmentación es hacer que el proceso de guardar un montón de imágenes sea más fácil, tanto a corto plazo para la construcción inicial como a largo plazo para hacer revisiones. Básicamente, lo que hace es ahorrarle la molestia de cortar cada porción manualmente y guardarla.
Aunque el proceso es un poco doloroso, debo admitir que una PSD bien cortada es algo hermoso. Aquí hay un claro ejemplo donde tengo varios elementos que necesitan ser guardados como imágenes. Sin rebanar, cada uno de estos representaría un proceso de recorte y guardado por el que debo pasar.
Sin embargo, cuando se cortan en rodajas, una sola acción Guardar para Web puede convertir todas estas rodajas en archivos de imagen independientes. Esto realmente reduce su tiempo en la tarea repetitiva de recortar y guardar si está trabajando con un solo archivo de Photoshop como su fuente.
Hacer rebanar chupa menos
Si aún no está seguro acerca de las herramientas de corte de Photoshop o piensa que todo es una gran pérdida de tiempo, debe consultar nuestra pieza titulada Cómo hacer el corte, chupe menos: consejos y trucos para cortar un PSD.
En ese artículo, explico a fondo el proceso de corte y cómo funcionan todas las herramientas de corte de Photoshop. Lo más importante es que puede ver algunos consejos excelentes sobre cómo hacer que el proceso de rebanado sea mucho mejor. Cosas como Layer Based Slices y el ocultamiento de Auto Slices realmente hacen que sea un proceso soportable.
¿Por qué cortar es vieja escuela?
Así que eso es rebanar. Ahora que sabe de qué se trata, es hora de explorar cómo ha cambiado este proceso a lo largo de los años hasta un punto en el que cortar es una actividad fundamentalmente diferente de lo que solía ser.
Érase una vez, nadie usaba CSS (lo sé, ¡el horror!). Incluso cuando llegó CSS, las herramientas que proporcionaron a los diseñadores web eran bastante limitadas en comparación con lo que sabemos hoy.
En consecuencia, los sitios web que intentaron superar los límites al no parecer una mierda solían usar una tonelada de imágenes. Cada vez que un diseño contenía una fuente personalizada, un degradado simple, una sombra paralela o una esquina redondeada, se tenía que usar una imagen para quitar el efecto en el navegador.
En consecuencia, rebanar era un gran problema. Cuando creó una maqueta de Photoshop de un sitio web, si decidió implementar cualquier tipo de formación de hielo estético, que era enorme antes de la mínima patada en la que estamos ahora, entonces tenía que cortar cada pequeña porción de su diseño en pequeñas piezas es probable que luego haya utilizado tablas HTML para reconstruir. Derecho brutal? Especialmente cuando consideras que todos estábamos en conexiones web increíblemente lentas en ese entonces, por lo que todas esas imágenes tardaron años en cargarse.
CSS mata la imagen
A medida que CSS evolucionó y creció, apareció una nueva tendencia en diseño web: diseño sin imágenes. Si miraste a tu alrededor en los blogs de diseño hace unos años, verías una tonelada de artículos titulados algo así como: "¡Crea un botón elegante sin imágenes!" Hasta el día de hoy, todavía ves títulos como este que nos muestran a medida que las personas realizan increíbles hazañas con CSS.
Esta tendencia no sería posible sin las increíbles funciones de CSS que ahora disfrutamos. De repente, puede redondear las esquinas, agregar sombras, implementar múltiples fondos, construir gradientes, usar fuentes personalizadas y mucho más usando código puro. El objetivo general de muchos diseñadores web ahora es aprovechar CSS y utilizar la menor cantidad de imágenes posible en nuestro marcado. ¿Sin imágenes? no es necesariamente algo que se logre (casi siempre necesitas algunas imágenes), sino que te esfuerzas por conseguirlo, lo que significa que generalmente desea acercarse lo más humanamente posible y mantener el soporte alto.
Pros y contras del diseño sin imagen
Esta tendencia viene con sus altibajos. El lado positivo es que, a pesar de lo que puedan pensar los no programadores, CSS es una manera muy fácil de mantener y ajustar un diseño a largo plazo. Si desea cambiar algo pequeño, como una fuente o un color de fondo, simplemente encuentre / reemplace algunas líneas de código y estará listo.También existe el beneficio de que incluso miles de líneas de CSS se pueden minimizar hasta el punto de que su efecto en los tiempos de carga es casi insignificante.
El gran inconveniente, que no debe ser subestimado es la compatibilidad. Con las imágenes, los PNG eran prácticamente lo único de lo que teníamos que preocuparnos (aparte de los tiempos de carga, por supuesto). Ahora con CSS tenemos problemas de soporte en todos los ámbitos. Los navegadores que admiten una nueva función lo hacen solo con un prefijo único, lo que hace que la codificación sea ridículamente repetitiva, muchas funciones solo están disponibles en un solo motor de navegador, otras son compatibles en todas partes excepto en IE (algunas cosas nunca cambian); Puede ser un verdadero desastre.
El objetivo final es tener en cuenta lo mejor para el usuario. Si usar una imagen para algo resulta en la mayor cantidad de beneficios para la mayoría de las personas, anímate.
Menos imágenes, menos cortes
Sobre la base de esta base de información, finalmente podemos abordar la cuestión de si los diseñadores web siguen dividiendo las PSD.
En su mayor parte, cuando observamos un documento de Photoshop destinado a convertirse en un sitio web, intentamos ver el código siempre que sea posible. Es como ese momento en Matrix donde Neo mira a su alrededor lo que una vez vio como el mundo normal y de repente ve el código detrás de él. Los diseñadores web no ven capas y efectos de capas, vemos divs y propiedades CSS.
Dado que este es el caso, la mayoría del trabajo involucrado en llevar un diseño estático en vivo es más en el ámbito de la reconstrucción que el corte en rodajas. En lugar de cortar ese botón brillante y servirlo como una imagen, usaré CSS para reconstruirlo desde cero. Este proceso se repite en todo el sitio, a menudo con imágenes utilizadas principalmente para contenido real en lugar de diseño (aunque todavía hay muchas cosas que no puede hacer con CSS puro).
Diseñar en el navegador
La pregunta que sin duda le viene a la mente a muchos novatos en diseño web cuando leen sobre este proceso es, por supuesto, "¿No es todo esto un poco repetitivo? Primero diseñas y construyes un sitio en Photoshop, Illustrator, Fireworks (sí, recuerdo que Fireworks es excelente para el contenido web, así que no me grites en los comentarios) o cualquier otra herramienta de diseño de tu elección, luego básicamente empiezas de nuevo en el navegador y reconstruir lo que acaba de crear utilizando código en lugar de imágenes siempre que sea posible.
La respuesta es un sí rotundo.? El resultado es un movimiento de personas que fomentan mover el proceso de diseño directamente al navegador. Comience con el código, termine con el código, use Photoshop solo cuando necesite crear una imagen y virtualmente elimine todas estas tonterías repetitivas.
Estoy a favor de este proceso. Es super magra y realmente optimiza su flujo de trabajo. Desafortunadamente, no siempre es fácil lograr que el lado creativo de su cerebro produzca su mejor trabajo utilizando este método. Sarah Parmenter recientemente abordó este problema en su publicación: "No puedo diseñar en el navegador". ¿En qué revela el? secreto culpable? aunque Photoshop no es una buena manera de mostrar el tipo de contenido web dinámico y sensible que los clientes necesitan hoy en día, fomenta más creatividad que ir directamente a HTML y CSS.
¿Cómo diseñar sitios web?
Esta publicación representa una respuesta larga a lo que parecía ser una pregunta simple. Sin embargo, bajo esa pregunta es algo con lo que todos estamos luchando últimamente, desde principiantes hasta profesionales: ¿Cuál es el mejor proceso para diseñar un sitio web? ¿Debe el proceso de diseño creativo ser distinto del proceso de codificación o debe ser el mismo? ¿Deberíamos crear maquetas en una aplicación de diseño y luego dividirlas para el navegador o hay una mejor manera? ¿Es Fireworks realmente la respuesta o aún falta una solución?
Quiero escuchar tus pensamientos sobre esto. ¿Qué aspecto tiene su flujo de trabajo actual, de principio a fin? ¿Dónde comienza el proceso de diseño y cómo fluye a través de un sitio web en vivo? ¿Qué herramientas encuentras invaluables en el camino? ¿Cómo sería tu herramienta de diseño web ideal?