Qué es el extracto de activos
El nuevo Extraer activos La característica de Photoshop CC 2014 ofrece un sistema de poscombustión en el flujo de trabajo, por lo demás tedioso, de creación de imágenes para Diseño Web Responsivo (RWD). Echemos un vistazo a cómo el comando Extraer activos puede reducir rápidamente la composición de una página web a activos listos para ensamblar en un par de minutos.
Comencemos con una pregunta obvia: ¿Qué es extraer activos?
En términos simples, Extraer activos es una nueva función en Photoshop que proporciona la función Generador de Photoshop con una interfaz para ayudar a automatizar la creación de recursos de imagen para la web y el diseño de pantalla desde sus archivos de Photoshop. El comando Extraer activos le permite definir para qué capa o capas desea crear activos, su tamaño físico, el formato de archivo y la ubicación guardada en el disco. Esta función no está diseñada para texto a menos que la intención sea convertir el texto en un mapa de bits, lo que realmente no es una buena idea.
Vamos a empezar.
02 de 08Abra un archivo .psd de Photoshop
El ejemplo que estoy usando contiene un objeto inteligente de Illustrator, algo de texto, una unidad de héroe que contiene texto, una imagen y un botón y una serie de imágenes de exteriores que refuerzan el tema del sitio. La clave aquí es organizar las capas en grupos. Esto es necesario porque la tarea es sacar todos estos elementos de la composición para que se puedan agregar rápidamente a los diseños web que se adapten a diferentes resoluciones y tamaños de pantalla.
Dos formas de extraer activos
A diferencia de Generar, que también extrae objetos mediante la adición de una extensión gráfica al nombre de la capa, Extraer activos utiliza una interfaz que puede ser alcanzada por clic derecho una capa o seleccionando una capa y eligiendoArchivo> Extraer Activos.
04 de 08La interfaz de extracto de activos
El cuadro de diálogo Extraer activos es bastante intuitivo. Se le muestra la capa o selección a extraer. Por encima de él, se muestra el tamaño de los archivos y, debajo, el control que le permite acercar y alejar el objeto. El lado derecho del cuadro de diálogo es donde ocurre la magia. Los cuatro botones en la parte superior le permiten seleccionar la resolución / tamaño del objeto. La siguiente tira le muestra la capa seleccionada y haciendo clic en + El signo le permite generar la capa seleccionada en otro formato también. los Basura ca n elimina la capa de la cola. En el siguiente menú desplegable, puede elegir el tipo de archivo y puede ajustar el ancho y el alto de la imagen de salida.
05 de 08Extraer una imagen SVG
Photoshop no maneja imágenes svg tan bien y los navegadores y dispositivos no pueden mostrar una imagen de Illustrator. Esto ha provocado el aumento de los archivos svg que se utilizan para ilustraciones vectoriales, como el logotipo de Illustrator que se muestra aquí. Al ser vectores, su resolución es independiente del dispositivo, lo que significa que se pueden escalar sin pérdida de detalle o imagen. Para convertir el objeto inteligente de Illustrator a svg, seleccione svg desde el pop hacia abajo y haga clic Extraer.
06 de 08El proceso de extracción de activos
Al hacer clic en el botón Extraer sucederán un par de cosas. Primero se le advertirá que el nombre del archivo puede cambiar. Esto no es un gran problema. Luego se le informará que se está creando una nueva carpeta para guardar el activo. Una vez que finaliza el proceso, la carpeta, ubicada en la misma ubicación que el archivo .psd original, se abre y muestra el nuevo activo.
07 de 08El botón de configuración es tu nuevo mejor amigo
Haciendo clic en el Ajustes botón abre un Cuadro de diálogo de configuración Eso es muy útil. Los ajustes de la izquierda son los factores de escala. Lo que hacen es crear las diversas copias de la imagen que un desarrollador utilizará en las consultas de los medios para identificar la resolución de pantalla de un dispositivo específico. Por ejemplo, la versión 3x estaría dirigida a una pantalla Retina de iPhone o iPad, mientras que un factor de 1.25 se apuntaría a un dispositivo Android. El sufijo se agrega al final del nombre del archivo para que su desarrollador pueda identificar fácilmente la imagen que se usará en una consulta de medios. Una vez que haya terminado, haga clic en el DE ACUERDO y sus selecciones se iluminarán en el área Extraer activos en el cuadro de diálogo. También puede acceder a la configuración haciendo clic en el icono de engranaje en el área Extraer activos en el lado derecho de la interfaz
08 de 08Terminando
Cuando haga clic en el botón Extraer, todos los activos se crearán y agregarán a la carpeta. En este punto, todo lo que debe hacer es enviar a su desarrollador una copia de la carpeta y pasar a su próximo proyecto.
