CSS3Ps
Interesante plugin gratuito para Photoshop con el que mejorar nuestro trabajo como diseñadores web.
CSS3Ps es un recurso para implementar en la popular herramienta de diseño, Photoshop y que nos permitirá ahorrarnos un interesante tiempo a la hora de llevar a cabo nuestros proyectos web.
Con soporte para versiones superiores a Photoshop CS3 y solo disponible para usuarios Windows y Mac OSX, CSS3Ps es un recurso capaz de pasar a código CSS y de forma totalmente automática cualquier forma que diseñemos respetando sus propiedades y características.
En constante mejora en cuanto a las característica que soporta CSS3Ps plugin es un recurso gratuito que resultará de especial interés aquellos con menos tiempo o con menos experiencia.
Descargar aquí
Interesante plugin gratuito para Photoshop con el que mejorar nuestro trabajo como diseñadores web.
CSS3Ps es un recurso para implementar en la popular herramienta de diseño, Photoshop y que nos permitirá ahorrarnos un interesante tiempo a la hora de llevar a cabo nuestros proyectos web.
Con soporte para versiones superiores a Photoshop CS3 y solo disponible para usuarios Windows y Mac OSX, CSS3Ps es un recurso capaz de pasar a código CSS y de forma totalmente automática cualquier forma que diseñemos respetando sus propiedades y características.
En constante mejora en cuanto a las característica que soporta CSS3Ps plugin es un recurso gratuito que resultará de especial interés aquellos con menos tiempo o con menos experiencia.
Descargar aquí
Proceso de instalación de Photoshop CS5 y CS6
1- Si Adobe Photoshop se está ejecutando, ciérrelo.
2- Abrir el archivo descargado "CSS3Ps.zpx".
3- En "Adobe Extension Manager" haga clic en el botón "Aceptar".
4. Cuando el proceso de instalación llegue a su fin verás la pantalla de abajo. Ahora
se puede ejecutar Adobe Photoshop.
5- En Adobe Photoshop seleccione "Ventana -> Extensiones -> CSS3Ps" del menú.
6- ¡Felicitaciones! Ahora podemos seleccionar las capas y convertirlas a CSS.
1- Si Adobe Photoshop se está ejecutando, ciérrelo.
2- Abrir el archivo descargado "CSS3Ps.zpx".
3- En "Adobe Extension Manager" haga clic en el botón "Aceptar".
4. Cuando el proceso de instalación llegue a su fin verás la pantalla de abajo. Ahora
se puede ejecutar Adobe Photoshop.
5- En Adobe Photoshop seleccione "Ventana -> Extensiones -> CSS3Ps" del menú.
6- ¡Felicitaciones! Ahora podemos seleccionar las capas y convertirlas a CSS.
Mediante secuencias de comandos en Photoshop CS3 y CS4
1. Seleccione las capas que desees convertir
2. Seleccione "Archivo -> Secuencias de comandos -> Explorar ..."
3- Seleccione el archivo "CSS3Ps.jsx" de la ubicación donde lo hayas guardado
4- La secuencia de comandos se ejecutará y se abrirá una ventana en nuestro
navegador con el resultado de la conversión
Pegar el código resultante dentro de la etiqueta <head> de un documento HTML,
haciendo esto todavía no veremos nada. Deberemos crear una etiqueta dentro
de <body> para ver el resultado, por ejemplo:
Espero que os haya gustado, comentar lo que queráis.
1. Seleccione las capas que desees convertir
2. Seleccione "Archivo -> Secuencias de comandos -> Explorar ..."
3- Seleccione el archivo "CSS3Ps.jsx" de la ubicación donde lo hayas guardado
4- La secuencia de comandos se ejecutará y se abrirá una ventana en nuestro
navegador con el resultado de la conversión
Pegar el código resultante dentro de la etiqueta <head> de un documento HTML,
haciendo esto todavía no veremos nada. Deberemos crear una etiqueta dentro
de <body> para ver el resultado, por ejemplo:
<head>
<style type="text/css">
.forma_1
{
width: 236px;
height: 236px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #6cf;
background-image: -webkit-linear-gradient(top, #6cf 23%, #cff);
background-image: -moz-linear-gradient(top, #6cf 23%, #cff);
background-image: -o-linear-gradient(top, #6cf 23%, #cff);
background-image: -ms-linear-gradient(top, #6cf 23%, #cff);
background-image: linear-gradient(to to top, #6cf 23%, #cff);
}
</style>
</head>
<body>
<div class="forma_1"></div>
</body>
<style type="text/css">
.forma_1
{
width: 236px;
height: 236px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #6cf;
background-image: -webkit-linear-gradient(top, #6cf 23%, #cff);
background-image: -moz-linear-gradient(top, #6cf 23%, #cff);
background-image: -o-linear-gradient(top, #6cf 23%, #cff);
background-image: -ms-linear-gradient(top, #6cf 23%, #cff);
background-image: linear-gradient(to to top, #6cf 23%, #cff);
}
</style>
</head>
<body>
<div class="forma_1"></div>
</body>
Espero que os haya gustado, comentar lo que queráis.
