Listado de Efectos
Efectos Gráficos para mejorar nuestras Imágenes
- 3ToDo: Velocidad de Analytics, Imagenes a Efecto Dibujo y Cachear con PHP
3ToDo: Velocidad de Analytics, Imagenes a Efecto Dibujo y Cachear con PHP
3 Cosas a tener en cuenta para Analizar, Diseñar y Desarrollar en nuestros proyectos webs. Medir la velocidad de carga de las páginas en segundos desde Analytics es un dato realmente interesante, para darse cuenta que tipo de páginas son las que más tardan en cargar. En cuanto al diseño, en ocasiones vienen bien imágenes con un Efecto Dibujo (efecto pintado a mano). La idea es poder crear este efecto sin necesidadd de tener conocimientos de PhotoShop. Por último, saber como crear páginas estáticas para la cache a partir de páginas dinámicas PHP.... - Estilos de Sombras con CSS sin Imagenes
Estilos de Sombras con CSS sin Imagenes
Sorprendente utilización de las sombras con CSS sin utilizar imagenes. Diferentes efectos de Sombras con CSS sin imagenes que consiguen efectos asombrosos como levantar esquinas, curvar esquinas, perpectiva, levantar conjunto, rotar, personalizar sombras en vertical o horizontal. Podemos usar el efecto que mejor nos convenga, veamos por ejemplo como rotar y aplicarle sombra.... - Round-Corners y Gradient CSS para Todos los Navegadores
Round-Corners y Gradient CSS para Todos los Navegadores
Bordes Redondos y fondo degradado en todos los navegadores. Con CSS3 aparecen nuevas propiedades como border-radius, text-shadow o box-shadow. El problema es que todos los navegadores No cumplen con CSS3, por eso el poder utilizar un estilo CSS de bordes redondos o fondos degradados que funcione en todos los navegadores es un poco más difícil.Bordes Redondos Con CSS
Poniendo las siguientes líneas funciona en todos los navegadores. Como siempre tenemos la Excepción del Internet Explorer, pero para eso los chicos de google nos proporcionan un código Javascript que redondea el "Elemento" en función de lo indicado en la propiedad "border-radius". Este código es un fichero llamado "border-radius.htc" que hay que copiar en la raiz de nuestra página web (o Theme de Wordpress). .box-rounded{ background-color:#CEE3F6; color:#0101DF; width: 300px; margin: auto; padding-left: 30px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; behavior: url(border-radius.htc); } .box-gradient{ background:#CEE3F6; color:#0101DF; border: 1px solid navy; margin: auto; padding-left: 30px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CEE3F6', endColorstr='#ffffff'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#CEE3F6), to(#fff)); /* for webkit browsers */ background: -moz-linear-gradient(top, #CEE3F6, #fff); /* for firefox 3.6+ */ } .box-shadow-down{ -moz-box-shadow: 5px 5px 5px #888; -webkit-box-shadow: 5px 5px 5px #888; box-shadow: 5px 5px 5px #888; } .box-rounded{ background-color:#CEE3F6; width: 300px; margin: auto; padding-left: 30px; /*Para Redondear Bordes*/ -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; behavior: url(border-radius.htc); } El código podemos descargarlo de code.google - curved-cornerFondo Degradado Con CSS
El Degradado también requiere de 3 líneas en el Estilo CSS, de esta forma se verá el fondo degradado en todos los Navegadores. Con Internet Explorer también se ve el degradado, aunque tenemos menos opciones de configuración. .box-gradient{ background:#CEE3F6; border: 1px solid navy; margin: auto; padding-left: 30px; /*Para Fondo degradado*/ /* for IE */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CEE3F6', endColorstr='#ffffff'); /* for webkit browsers */ background: -webkit-gradient(linear, left top, left bottom, from(#CEE3F6), to(#fff)); /* for firefox 3.6+ */ background: -moz-linear-gradient(top, #CEE3F6, #fff); }Bordes Redondos y Fondo Degradado Con CSS
Si juntamos dentro de un estilo CSS las propiedades del Borde Redondo y lo del Fondo Degradado, podemos tener un "elemento" con Bordes Redondos y Fondos Degradados. Como siempre Internet Explorer es una Excepción y los dos estilos no conseguimos hacer que funcione. Aplicando las clases CSS box-gradient y box-rounded al mismo elemento tenemos Bordes Redondos y DegradadoDegradado Redondo Sombra y CSS
Ejemplo Anterior + Propiedad sombra del CSS3 ¡combinando estilos!Referencias
Más información sobre Redondear Bordes en Border Round Corner With CSS Más información sobre Degradados en CSS en Gradient CSS Cross Browsers Más información sobre Las Sombras del CSS3 en box-shadow, features CSS3... - Como Configurar La Presion del Lapiz (Pen Pressure) en Photoshop
Como Configurar La Presion del Lapiz (Pen Pressure) en Photoshop
Pen Pressure es la presión que se ejerce al lápiz de una tabla digitalizadora, y poder ver sus efectos en el Dibujo de Photoshop. Como principiante que soy, no siempre estoy utilizando esta opción, por eso cuando algún día me decido que quiero utilizarla para hacer un dibujo propio, no me acuerdo de la configuración exacta que tengo que poner. Este es el objetivo del Artículo, tener claro los conceptos de configuración para no tener que buscar entre los problemas con el Pen Pressure en Photoshop. Utilizar la Presión del Lápiz para dibujar en Photoshop, nos permite utilizar los siguientes efectos Líneas mas o menos gruesas en función de la presión que ejercemos Líneas mas o menos transparentes en función de la presión del lápiz Degradados de color entre los 2 escogidos en función de la presión... - Photoshop e ImageReader para crear Gif Animados
Photoshop e ImageReader para crear Gif Animados
Como Crear Gif Animados con Photoshop y ImageReader paso a paso, la herramientas de Adobe para imágenes. Hace tiempo que quería aprender a realizar un Gif Animado utilizando Photoshop, lo que no sabía era para que servía la herramienta ImageReader. Los Gifs animados pueden ser muy útiles, en el ejemplo que pondremos a continuación nos centraremos en crear un Banner de Pulbicidad. En algunas ocasiones es mejor utilizar imágenes animadas en lugar del problemático Flash.... - Lista de Shorcuts, Hot Keys o Teclas Rapidas de Photoshop
Lista de Shorcuts, Hot Keys o Teclas Rapidas de Photoshop
Si queréis saber los accesos rápidos de teclado o claves rápidas del "keyboard" para Photoshop sólo tenéis que echar un vistazo a la lista de Shortcuts que mostramos a continuación. Este "miniapunte" nos ayudará para ir más rápido en nuestros diseños y retoques. Ctrl. + T. Para cualquier transformación libre. Ctrl. + Shift. + V. Pegar dentro de la selección. Alt. + Click "Eye(ojo)" de una capa. Oculta el Resto de las Capas. Ctrl. + Alt. + Arrastrar un objeto. Duplica y desplaza ese elemento. Alt. + Supr. Rellena la capa con el color de primer plano. Supr. Rellena la capa o la selección con el color de fondo. Ctrl. + F . Aplicael último filtro utilizado. Doble Click "Lupa". Devuelve la vista al 100%. Pero podéis ver el listado completo de Shortcuts para vuestra versión de Photoshop CS, CS2, CS3, CS4 en morris-photoshop.... - Como crear una Imagen con Efecto Grunge
Como crear una Imagen con Efecto Grunge
Recorriendo mis feeds para volver a reorganizarlos, me he encontrado con una entrada de Blog & Webs que explican en un mini tutorial, como hacer un banner con efecto Grunge con Photoshop. No sólo eso, sino que proporcionan alguna que otra utilidad que podría serme útil en el futuro, por eso me lo apunto. RePost: Post Original Blog & Webs, La imagen es del Artículo original... - Efecto Llamas con Photoshop
Efecto Llamas con Photoshop
Sabía que había hecho anteriormente el Efecto Llamas con Photoshop, demostrado en mi blog de música, pero no me acordaba que lo escribí en mi blog personal Komoloves y por eso le hago referencia, para tenerlo recopilado aquí, que es su lugar.Efecto llamas con PhotoShop
... - Como hacer un Efecto Post-It con PhotoShop
Como hacer un Efecto Post-It con PhotoShop
Un claro ejemplo de lo que comentaba con ¿Esto ya lo he hecho antes?, una pregunta que he tenido que emplear para conseguir este efecto y que no me acordaba de como hacerlo. Así que se va convertir en el primer Apunte de Photoshop para este Blog Técnico. El resultado sería algo así Para conseguir tan esperado efecto Post-It podemos seguir el Tutorial de Kaoz, que te lo explica bien clarito aunque esté en Ingles. Imagen extraída del artículo original...