Tengo un pequeño secreto sucio, odio cortar archivos de Photoshop. Con eso no quiero decir que odio convertir las composiciones de PSD en sitios web, quiero decir que odio las herramientas de corte de Photoshop. Todo el proceso hace que mi PSD parezca ocupada, desordenada y demasiado complicada, por lo que generalmente la omito por completo y en su lugar opto por recortar y guardar manualmente las imágenes individualmente según sea necesario.
Para luchar contra esta tendencia y tratar de ver la verdadera utilidad de las herramientas de corte de Photoshop, me embarcé en una misión para conocer todas las complejidades de cómo funciona el corte en rodajas. A continuación hay una colección de consejos y trucos que resultaron de este viaje. ¡Con suerte, aprenderás una o dos cosas que nunca supiste!
Hay tres tipos de rebanadas en Photoshop
Tres tipos de rebanadas? Esta fue una de las cosas más interesantes y sorprendentes que aprendí. Al no haber experimentado demasiado con las funciones de rebanado, pensé que solo había una forma de hacerlo. Estaba equivocado.
Los tres tipos diferentes de segmentos son: segmentos de usuario, segmentos automáticos y sectores basados en capas. Para comenzar, hablemos de los dos con los que probablemente esté familiarizado: User Slices y Auto Slices. Estos están muy estrechamente relacionados, de hecho, uno crea al otro.
Como sabe, para dividir una PSD, empiece por agarrar la Herramienta de corte (C) y dibuje un cuadro alrededor del área que desea exportar como una imagen independiente. Al agregar segmentos a todas las áreas de la composición a las que desea hacer esto, puede optimizar y exportar rápida y fácilmente varias imágenes a la vez.
Cuando realiza una división, debe obtener algo como el resultado que se ve a continuación.
Lo que he hecho aquí es dibujar un cuadro alrededor del logotipo en la parte superior de la página. Esta única acción creó tanto un segmento de usuario como varios segmentos automáticos. Cuando crea una división, Photoshop asume que su objetivo final es convertir toda la PSD en una serie de divisiones. Personalmente, creo que esta suposición es bastante molesta, y más adelante analizaremos cómo solucionarlo. Por ahora, simplemente sepa que debido a esta suposición, Photoshop extiende los bordes de su sector a lo largo de todo el PSD, creando así muchas otras secciones automáticamente. Esto se ilustra en la imagen de arriba.
Trucos para Trabajar con Usuario y Auto Rebanadas
Mientras estamos en el tema de User and Auto Slices, repasemos algunas de las características obvias y no tan obvias para que puedas sentir realmente qué herramientas y opciones tienes a tu disposición.
Mover y editar segmentos
Una vez que haya creado una división, debería ver controles similares a los de una transformación libre que le permitirá moverla y editarla. También puede usar la herramienta de selección de sectores para asegurarse de que solo está editando los segmentos actuales y no creando nuevos. Esta herramienta se encuentra debajo de la Herramienta de corte en el menú desplegable.
Conversión de divisiones automáticas en divisiones de usuario
A lo largo de todo el proceso de corte, los cortes automáticos se crean y actualizan continuamente y se mantienen distintos de los cortes del usuario. Más adelante, veremos cómo exportarlos como archivos o ignorarlos al exportar, pero por ahora veamos cómo convertir un Auto Slice en un User Slice.
El proceso es extremadamente simple. Primero, debe seleccionar el corte automático utilizando la herramienta Selección de corte. A continuación, seleccione la división automática que desea convertir y pulse el botón ¿Promocionar? botón cerca de la parte superior.
¡Eso es! Ahora la división automática debe cambiar de color, lo que indica que ahora es una división de usuario. Ahora tendrás un mayor control sobre su tamaño y cómo se exporta.
Rebanadas de división automática
Cuando tiene una serie de objetos que se distribuyen horizontalmente, verticalmente o incluso en una cuadrícula, no tiene que tomarse el tiempo para recorrer y hacer una división alrededor de cada unidad individual. En su lugar, puede hacer una porción que cubra todos los objetos y decirle a Photoshop que haga el resto.
Para hacer esto, primero haga su gran porción dibujando un cuadro alrededor de todos los objetos. Luego, con la herramienta Slice Select Tool habilitada, haga clic en 'Divide'. Botón en la parte superior de la página.
Esto debería mostrar el? Divide Slice? cuadro de diálogo que se muestra arriba. Usando esta ventana puedes insertar rápidamente cortes verticales y horizontales adicionales. Si no se alinean correctamente, puede ajustarlos manualmente después de presionar el botón "Aceptar".
Rebanadas de Guías
Es probable que muchos de ustedes estén mucho más cómodos trabajando con guías que con secciones dentro de Photoshop. La realidad es que ambos funcionan de manera muy similar, pero el sistema de guías se siente un poco más suave.
Si esta es la forma en que rueda, esto encaja perfectamente en un flujo de trabajo fácil para crear segmentos. Simplemente arrastre las guías para dividir su PSD e ignore por completo las herramientas de corte. Luego, una vez que hayas terminado, selecciona la Herramienta de corte y pulsa en? Slices from Guides? botón en la parte superior.
Naming Slices
Una de las cosas molestas que le molestarán la primera vez que trabaje con los segmentos es que cuando los exporta, todos los archivos resultantes tienen nombres grandes y feos que no tienen ningún significado. Para solucionar este problema, debe asegurarse de haber ingresado y nombrado cada segmento de manera adecuada. Cualquier nombre que asigne se transferirá como el nombre del archivo al exportarlo.
Para nombrar una división, simplemente haga doble clic en su contenido con la Herramienta de división seleccionada. Esto abrirá el diálogo a continuación.
Tenga en cuenta que tiene varias opciones aquí, incluida la configuración del color para el sector, la introducción manual de las dimensiones y la asignación de un nombre. También hay un montón de elementos HTML como URL, Target, etc. Resulta que Photoshop puede tomar su PSD cortado y mostrarlo como una página web. Algunos utilizan esta funcionalidad porque la configuración predeterminada crea un diseño basado en tablas, sin embargo, puede cambiarlos para utilizar CSS.
Ahora, no te emociones demasiado. Incluso con las opciones de CSS seleccionadas, Photoshop sigue siendo bastante malo en la creación de un sitio web para usted.Es mucho mejor hacerlo a mano o al menos llevárselo a Dreamweaver, lo que significa que debe ignorar todas estas otras opciones por completo.
Las capas basadas en capas y por qué son mejores
Una de las características principales que hizo que el corte sea mucho menos para mí son las capas basadas en capas. Estas son una marca particular de User Slices que son superiores en varios aspectos.
Como su nombre lo indica, estos segmentos no se basan en un cuadro que se dibuja manualmente, sino que se adhieren automáticamente a los límites de una capa. Para crear una división basada en capas, seleccione una capa en la paleta de capas, luego vaya al menú y seleccione Capa> Nueva división basada en capas. Tenga en cuenta que esto funciona incluso si tiene varias capas seleccionadas, ¡cada capa simplemente se convertirá en su propia división!
Obviamente, para que esto funcione correctamente, debes ser realmente bueno con respecto a cómo estructuras tus capas. Debería estar construyendo sus maquetas como archivos organizados y totalmente en capas de todos modos, así que esto no debería ser un problema.
La ventaja
Una de las razones principales por las que las rebanadas normales son tan poco convincentes es que genera mucho trabajo adicional si desea volver y ajustar sus diseños. Después de barajar la ilustración, debe regresar y mover todas las secciones para alinearse con el nuevo diseño. Esta molestia es la razón por la que siempre simplemente guardo manualmente las piezas individuales a través del recorte.
Sin embargo, las capas basadas en capas son en realidad bastante inteligentes. Cuando te mueves alrededor de tus capas, tus cortes siguen automáticamente. Si agrega un efecto que cambia los límites, como un resplandor externo, la división se expande para incluirlo. Si transforma la capa al 30% de su tamaño original, ¡otra vez la división se actualiza automáticamente!
Obviamente, aquí hay un argumento claro para usar los segmentos basados en capas siempre que sea posible, ya que le ahorra una cantidad de tiempo increíble en la inevitable etapa de rediseño.
Matando el desorden
Otra de mis mayores molestias con el corte en rodajas es que puede crear una PSD con aspecto muy desordenado. Esto se debe principalmente a los efectos secundarios de Auto Slicing.
A modo de ejemplo, eche un vistazo a la imagen de abajo (aquí está un poco simplificado, pero se entiende el punto). Aquí solo quería crear tres segmentos, pero Photoshop entró y lo convirtió automáticamente doce rebanadas!
No sé sobre ti, pero no creo páginas web como una gran colección de imágenes agrupadas. ¡Así que simplemente no quiero todas estas rebanadas extra! No voy a exportar estas áreas a imágenes, así que todo lo que están haciendo es agregar ruido a mi interfaz. Cuando veo un documento como este, los cortes dejan de ser una herramienta significativa para mí.
Para solucionar este problema, podemos agarrar la herramienta de selección de rebanadas y pulsar "Ocultar cortes automáticos". Botón en la parte superior de la pantalla. Esto hace exactamente lo que su nombre indica, elimina todos esos repuestos automáticos desagradables de la vista.
¡Mira cuánto más simple se vuelve nuestro documento! Los pocos cortes que utilizamos son claramente identificables y, por lo tanto, conservan su utilidad. En mi opinión, este método de ver tus cortes es muy preferido. Este es uno de esos casos en los que Photoshop simplemente trata demasiado de predecir mi flujo de trabajo preferido y termina exagerando las características.
Exportar rebanadas
Aquí es donde la utilidad del corte realmente entra en juego. Sin cortar, debe guardar cada porción de su composición una por una. El flujo de trabajo sería algo como lo siguiente: haga una selección, recorte, optimice en Guardar para Web, guarde, deshaga el recorte y repita. ¡Son muchos pasos innecesarios! Vamos a ver cómo funciona el corte en rodajas.
Después de que finalmente haya descubierto todos los entresijos de la división y tenga su PSD listo para funcionar, es hora de ir al menú Archivo y seleccionar "Guardar para Web y dispositivos". Probablemente ya esté familiarizado con este cuadro de diálogo, pero es un poco diferente cuando tiene secciones en su documento.
Si tiene rebanadas, la vista previa de su documento en esta ventana las muestra todas (desafortunadamente, esto incluye esas molestas rebanadas automáticas). Desde aquí, simplemente puede hacer clic para seleccionar cada sector y optimizar la configuración de cada uno individualmente. Esto incluye el tipo de archivo, la calidad, etc. Entonces, en una sesión, puede configurar una exportación de tres archivos JPG y PNG, cada uno con la calidad que considere apropiada.
Una vez que hayas ajustado todo a tu gusto, pulsa "Guardar". botón. Aparecerá un cuadro de diálogo que le permitirá elegir una carpeta para colocar todas las imágenes. Recuerde que ya hemos configurado la convención de nomenclatura, así que deje eso como está. La clave aquí es asegurarse de que solo está exportando, ¿Todos los segmentos de usuario? o? Slices seleccionados ?.
Dependiendo de su flujo de trabajo deseado, cualquiera de estas opciones funciona muy bien. La opción predeterminada es simplemente "Todas las divisiones", que incluirá no solo las divisiones basadas en el usuario y las capas, sino también las divisiones automáticas completamente inútiles que tendrá que tirar de todos modos. Ahórrese el problema y deshágase de ellos aquí antes de que tenga lugar la salvación real.
Conclusión
Hoy repasamos muchas cosas bastante técnicas de Photoshop, así que intentaré resumirlas muy bien. En primer lugar, cortar una PSD puede realmente sentirse como un proceso torpe si no sabes lo que estás haciendo. Asegúrese de mirar realmente a su alrededor en Photoshop y experimente con los consejos anteriores para asegurarse de aprovechar al máximo las herramientas disponibles.
En segundo lugar, recuerde que hay tres tipos de segmentos: segmentos automáticos, segmentos de usuario y sectores basados en capas. Las rodajas automáticas son bastante aburridas y son más un desafortunado efecto secundario que una característica útil. No tienes que estar de acuerdo conmigo en esto, pero si lo haces, escóndelos para que no distraigan tanto. Los segmentos de usuario son simplemente aquellos que crea intencionalmente. Puede ajustarlos con la Herramienta de selección de sectores y nombrarlos haciendo doble clic en el contenido.Las porciones basadas en capas son como las divisiones de usuario, solo que son mucho más inteligentes porque se adhieren automáticamente a los límites de una capa determinada. Puede mover, redimensionar y agregar efectos a una capa y la división se actualizará continuamente por sí misma.
Finalmente, al exportar un documento con secciones, elija el comando Guardar para Web y optimice cada sección como su propio archivo. También asegúrese de exportar solo los segmentos de usuario o segmentos seleccionados, de lo contrario, todos los segmentos automáticos creados por Photoshop llenarán su carpeta de imágenes.
Probablemente sea mucho más de lo que siempre quiso saber sobre el corte en Photoshop, pero esperamos que esto le haya ayudado a detectar las ineficiencias en el sistema para que pueda ajustar y aprovechar este útil conjunto de herramientas sin que se vea obstaculizado por su incomodidad.
Deje un comentario a continuación y díganos cómo corta una PSD. El flujo de trabajo que he configurado aquí es solo una de las muchas soluciones posibles y estoy ansioso por escuchar y aprender de la suya.