Share
Project Parfait es una nueva herramienta de Adobe, actualmente en versión beta, que le permite abrir cualquier PSD directamente en el navegador para extraer de ella elementos de CSS, texto e imagen. En este momento solo funciona en Chrome, pero Adobe planea desplegarlo en todos los navegadores a medida que el desarrollo avanza.
Abrir un PSD en Project Parfait es súper fácil. Simplemente vaya a https://projectparfait.adobe.com/ y haga clic en el gran azul Sube tu propio PSD botón en la esquina superior derecha:
Luego, después de iniciar sesión con su ID de Adobe, arrastre y suelte su PSD en el área del panel vacío y se cargará por usted:
Cuando se complete la carga, puede hacer clic en la miniatura de su PSD y se abrirá en Project Parfait para usted:
Para generar CSS para cualquier elemento en su diseño, simplemente haga clic para seleccionarlo, luego se mostrará el código relevante en la barra lateral derecha Inspector de CSS campo. Desde aquí puede resaltar y copiar los elementos del código que desea, o hacer clic en el Cópialo todo botón:
Alternativamente, con el elemento seleccionado, aparecerá una llamada azul, en la que puede hacer clic en el botón Copiar CSS Enlace para agarrar todo el código directamente:
La llamada azul que aparece cuando se selecciona un elemento también se puede usar para copiar fácilmente el contenido de texto de un PSD haciendo clic en Copiar texto enlazar:
Exportar imágenes a través de Project Parfait también es sencillo. Comience seleccionando la imagen que desea exportar. Si comprende múltiples capas mantén presionada. Cambio y haga clic en cada uno para multi-seleccionar. Luego haga clic en la flecha que apunta hacia abajo en la llamada azul y obtendrá un Guardar como cuadro donde puede ingresar el nombre de su imagen, el formato y la configuración de calidad preferidos:
Una vez guardada la imagen aparecerá en el Bienes pestaña de la barra lateral derecha, desde donde puede hacer clic en la imagen para descargarla:
El proyecto Parfait beta está recién llegado y apenas tiene un mes, por lo que hay algunos aspectos de la generación de CSS que actualmente no están soportados. Sin embargo, la tasa de actualizaciones ya ha sido muy rápida según los miembros del foro Project Parfait, así que supongo que el equipo de Adobe ya está trabajando en estas áreas y podemos asumir que hay muchas mejoras en camino..
Accentsconagua
color de fondo la propiedad está configurada para proporcionar un respaldo para los navegadores que no admiten el gradiente de CSS. Project Parfait ya hace un gran trabajo en la generación de CSS para elementos de texto.
Genera configuraciones numéricas de peso de fuente tales como 100, 300, 900 perfectamente, lo que significa que si establece un peso de fuente como "Delgado", "Ligero", "Negro", etc. en Photoshop, el valor correcto se mostrará en CSS para reflejar ese peso.
También hace un muy buen trabajo al estimar la altura de la línea, calculada como un valor relativo al tamaño de fuente del elemento de texto seleccionado.
Además, si existen varios tipos de estilos en una línea de texto, los detectará a ambos y le dará dos lotes de resultados CSS, uno de ellos precedido por el comentario / * Estilo en línea * /.
A veces, las capas se apilan unas sobre otras, o se colocan a una pequeña distancia, lo que dificulta su selección a través de la interfaz visual. Por lo tanto, Project Parfait también brinda la posibilidad de seleccionar capas directamente a través de la pestaña "Capas" en la barra lateral:
Tan pronto como importe su PSD, Project Parfait identificará todos los colores utilizados en el diseño y los imprimirá en el Colores Sección de la barra lateral derecha. Además, siempre que tenga un elemento seleccionado que use uno de estos colores, el color se resaltará en la barra lateral:
Esto es potencialmente muy útil para las personas que usan preprocesadores, ya que los valores de color pueden definirse fácilmente como variables al inicio del proceso de codificación y luego aplicarse según sea necesario en todo el diseño..
De la misma forma que Project Parfait detecta colores planos, también detectará los gradientes que se han aplicado en el diseño y los pondrá a disposición para copiarlos y pegarlos fácilmente desde la barra lateral derecha. Al igual que con los colores planos, cualquier elemento seleccionado que use un degradado verá el degradado correspondiente resaltado en la barra lateral:
Para los usuarios de preprocesadores, esto proporciona una forma práctica de capturar todos los gradientes utilizados en el diseño para que puedan definirse como mixins para una fácil reutilización en el diseño..
Además de información de color y degradado, Project Parfait también le proporcionará un resumen "de un vistazo" de todas las fuentes utilizadas en el diseño, así como los pesos y tamaños utilizados..
Esto significa que en el momento en que abra la PSD, sabrá qué fuentes y qué variantes de peso de fuente necesita tomar en un formato compatible con la web para la integración. También tiene la opción de guardar los tamaños de fuente como variables del preprocesador si elige.
Cuando trabajas directamente en Photoshop, obtener información sobre el ancho, la altura, la posición y la distancia entre los elementos puede ser una experiencia dolorosa. No es así con el Proyecto Parfait.
Para obtener el ancho, la altura y las coordenadas X / Y de un elemento, simplemente haga clic en él y mire la llamada azul:
Para obtener la distancia entre dos elementos, mantenga presionada la tecla MAYÚS y haga clic en ambos. Aparecerá una pantalla que muestra la distancia horizontal y vertical en píxeles:
En este momento, Project Parfait es de uso completamente gratuito, solo inicie sesión con su ID de Adobe y estará listo para comenzar.
Si usted es un diseñador que está buscando mejoras en su flujo de trabajo de producción, o un desarrollador que desea una forma más fácil de pasar de la PSD al código, Project Parfait es algo que debe probar en el diseño web..
