Share
La última versión de Photoshop tiene algunas funciones nuevas que seguramente llamarán la atención de los diseñadores web. Ahora puede convertir la forma y el estilo de una capa a CSS con un solo clic. En este artículo, explicaremos cómo funciona esto. Vamos a ver!
Esta nueva función de Photoshop que veremos es una que me entusiasma. La capacidad de convertir los estilos de capas de Photoshop a CSS ha existido por un tiempo a través de herramientas de terceros, pero nunca de forma nativa. Los desarrolladores web tienen la tarea constante de convertir las ilustraciones de Photoshop en diseños con CSS3 en vivo. Dependiendo de la complejidad del objeto, esto puede tomar un tiempo serio.
¿No sería bueno si Photoshop pudiera hacer la conversión por ti? Buenas noticias: ahora puede. Vamos a ver cómo funciona.
Para empezar, intentemos convertir un botón básico en Photoshop. Como puede ver, comencé con un rectángulo simple con esquinas redondeadas, luego agregué algunos estilos de capas. Primero, utilicé superposición de gradiente. A continuación, usaré un conjunto de sombras internas para superponer para resaltar bien en la parte superior. Finalmente, creé una sutil sombra paralela..
Ahora que tenemos una idea decente de cómo se construye el botón en Photoshop, vamos a convertirlo a CSS. Hay dos maneras de hacer esto. El primero, es seleccionar la capa e ir a Capa> Copiar CSS en la barra de menú La otra forma es hacer clic derecho en la capa y seleccionar la opción "Copiar CSS" del menú que aparece. Esto copiará el código CSS a nuestro portapapeles para que podamos insertarlo en nuestro editor de código favorito.
Antes de ir a comprobarlo, tenga en cuenta que he llamado a mi capa "botón" en minúsculas. Esto es importante porque se convertirá a un nombre de clase en nuestro código final.
Si saltamos a un editor de código, podemos probar nuestro código de botón para ver si funcionó. Primero, crearé un div en mi html y le daré una clase de "botón". Ahora saltaré al CSS y simplemente pegaré el código que Photoshop colocó en mi portapapeles.
.botón
radio del borde: 10px;
imagen de fondo: -moz-lineal-gradiente (90deg, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
imagen de fondo: -webkit-linear-gradient (90deg, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
cuadro de sombra: 0px 5px 4px 0px rgb (0, 0, 0);
posición: absoluta;
izquierda: 249px;
superior: 245px;
ancho: 300px;
altura: 100px;
índice z: 2;
Como puede ver, una gran parte del código ha sido escrito para nosotros. Parece que la forma y el color son perfectos con nuestra versión de Photoshop, pero no todo se copió correctamente.
Para empezar, la sombra paralela está en total opacidad a pesar de la opacidad reducida en nuestra versión de Photoshop. Hubiera esperado que Photoshop usara RGBa para lograr este efecto. Además de los problemas de caída de sombra, nuestra sombra interior simplemente se ignoró, por lo que no hay resaltado en la parte superior.
En resumen, hemos tenido un buen comienzo. Photoshop nos ahorró un poco de codificación e incluso hizo un esfuerzo adicional para incluir algunos prefijos del navegador para garantizar la máxima compatibilidad.
Solo por comparación, comparemos la nueva función Copiar CSS incorporada de Photoshop con un complemento gratuito de Photoshop llamado CSS3Ps, que esencialmente promete la misma funcionalidad.
Una vez más, seleccionaré mi capa, solo que esta vez golpearé el complemento CSS3Ps. Esto lanza una página web donde tengo que esperar una friolera de 20 para ver mis resultados. Esto es realmente muy molesto, pero una vez que aparecen los resultados, son mejores que la función incorporada de Photoshop..
Como puede ver, tanto el resaltado superior como la opacidad reducida de la sombra de cuadro están presentes en esta versión. Para llevar las cosas aún más lejos, puede obtener sus resultados en Sass, una opción increíble que me gustaría ver en Photoshop en el futuro..
Para obtener esta actualización, los clientes pueden seguir las siguientes instrucciones.
¿No estás utilizando la nube creativa? Puede suscribirse a Creative Cloud y obtener acceso a todas estas actualizaciones, así como al resto de Creative Suite por solo $ 49.99 / mes..
Accentsconagua