Para todos aquellos que trabajan con Firworks a la hora de diseñar sus webs, hoy os ofrecemos una recopilación de 131 estilos de capa al más puro estilo web 2.0.
Un recurso estupendo, que nos ahorrará bastante tiempo intentando dar a nuestras capas ese degradado que buscamos.
Podeis descargar el archivo .stl desde la página del creador: 131 web 2.0 layer styles for fireworks
Hoy estamos con espíritu didacta. Para terminar la ronda de tutoriales que hemos empezado con la entrada Tutoriales de Photoshop para diseñadores web y con el videotutorial Crear iconos para web 2.0 con Photoshop, ahora os ofrecemos una recopilación de 20 tutoriales para Illustrator. Desde crear un coche hasta una persona, en esta entrada encontrareis todo lo que necesitais para crear esas estupendas imágenes vectoriales.
La recopilación de 30 tutoriales para Illustrator la podéis encontrar aquí: 30 vector tutorials that will make graphic design easier
Via: frogx3.com
Desde tutcast.com os traemos un videotutorial que explica paso a paso como crear en Photoshop CS3 unos estupendos iconos con un estilo muy web 2.0.
El video lo encontrais después del salto.
De la mano de designreviver.com, web que ya os presentamos en la entrada Recursos grunge y vintage, hoy os ofrecemos una lista con 20 tutoriales de Photoshop para diseñadores web.
A lo largo de todos los tutoriales, nos explican como diseñar botones y barras de navegación, cabeceras y fondos para nuestra web, interfaces, etc…
20 tutoriales que nos ayudarán a la hora de diseñar nuestras páginas web, y que podeis encontrar aquí: 20 excellent photoshop tutorials for web designers
Hoy os traemos una estupenda colección con nada menos que 422 iconos en formato PNG, con un tamaño de 16×16 pixeles, para vuestros proyectos web.
Favoritos, directorios, calendario, registro, notas, etc.. Son tan solo algunos ejemplos del tipo de iconos que podéis encontrar en esta recopilación.
Los iconos tienen una licencia Creative Commons 3 de reconocimiento, pudiéndose usar tanto en proyectos personales como comerciales. Para quitar esta licencia, podéis comprar el set completo de iconos por tan solo 50$.
Para descargar el pack de iconos, tan solo teneis que entrar en la web de su creador: www.pinvoke.com
Fue en el boom de la web 2.0 cuando se empezaron a ver capas con bordes redondeados.
Por aquel entonces se usaban técnicas enrevesadas para conseguir un efecto que llamaba mucho la atención, después de estar acostumbrados a los típicos rectángulos que se conseguían al asignar un color de fondo a las celdas de las tablas, o incluso a las capas.
Imágenes que se asignaban como fondo a capas antes y después del elemento e incluso complicados javascripts para conseguir el efecto eran casi el pan nuestro de cada día.
Con la llegada de las primeras versiones de CSS 3, se creo una nueva propiedad para facilitar la vida a los diseñadores web: border-radius. Tan sencillo como asignar el radio de la curva y conseguimos el efecto deseado, sin tener que cargar con imágenes innecesarias o pesados scripts.
Desgraciadamente, esta propiedad aún no está soportada por ningún navegador. Para solventar esto, los equipos de desarrollo han creado su propio border-radius, para que funcione solamente, en los navegadores que usen su motor.
Así, nos encontramos con -moz-border-radius para Firefox, -webkit-border-radius para navegadores basados en webkit (safari, tanto para Windows como para mac os x), y la no tan conocida -khtml-border-radius para navegadores basados en el motor khtml (Konqueror de Linux).
El funcionamiento es el mismo para las tres opciones:
No tengo ninguna duda de que en el momento en el que se establezca la versión definitiva de CSS 3, los navegadores de calidad la soportarán tal cual es, sin ningún añadido “propio”, por lo que no está de más agregar la propiedad original border-radius en nuestra hoja de estilos, para futuros cambios o para navegadores que aún no la soportan (entre ellos, sorprendentemente, está Opera 9.5).
Personalmente, ya no utilizo nunca en mis diseños ni imágenes ni técnicas “inusuales” para conseguir los bordes redondeados en las capas. Si el usuario utiliza un navegador que no soporta esta propiedad… mala suerte.
Podeis obtener más información sobre la propiedad border-radius, y como la interpretan los navegadores que la soportan en este artículo: border-radius. Apple vs Mozilla.
Acompañando la anterior tira cómica aquí teneis algunos chistes de informatica para haceros mas amena la mañana.
////////////////////////////////
////////////////////////////////
Visto en: Ateneupopular.com
Url: http://www.ateneupopular.com/diseno/dialogos-de-besugos-vol-1/
- ¿Así que al final has dejado ese horrible puesto de programador?
- Si.
- “La gente era horrible, el horario ridículo, y lo peor de todo, tenia unos snacks malísimos. Ese trabajo era una pesadilla.”
- ¿Qué es ese ruido?
- Venganza.
- He robado las barras espaciadoras de todos los teclados del edificio.
Tal vez no por los snacks, pero más de un (ex)jefe, se merece eso, y mucho más…. no estaria mal pincharle las 5 ruedas del coche, incluida la de repuesto.
Via: freelanceswitch.com
En cssaddict.com me encuentro con un estupendo artículo sobre los formularios de contacto de las páginas web. Estos formularios, que según el autor son una parte importantísima de nuestra web (ya que es casi el único medio de contacto entre el usuario y nosotros), están muy olvidados y no se les presta la atención que merecen, tanto en el diseño web como en la programación (ya sea AJAX, PHP, o cualquier otra tecnología).
Por eso, el autor nos ofrece una recopilación de formularios de contacto que han llamado su atención para inspirarnos, además de una extensa lista generadores de formularios de contacto, y de los documentos CSS para darles ese toque especial.
Una entrada para echarle un vistazo, y de paso reflexionar si, como yo, dejas siempre el formulario de contacto de la web para el final, cuando estás deseando terminar ya el proyecto, y no le prestas la atención que deberias.
El artículo lo puedes encontrar aquí: generating inspirational css web forms
Subscribete ahora
O, subscribete via email: 
