Para empezar este lunes, nada mejor que algo suave y sin complicaciones

Via | nettuts.com

A la hora de diseñar una página web, siempre tenemos el mismo problema a la hora de seleccionar la paleta de colores a utilizar.

Para ayudarnos en esos momentos de crisis, ya conocemos varias herramientas como Kuler de Adobe, pero hoy he conocido, gracias a baluart.net he conocido Instant Color Schemes.

Instant Color Schemes nos ofrece una paleta de colores asociada a la palabra que introducimos. Pero, ¿como funciona?

Introducimos un término y el sistema se encarga de realizar una búsqueda en Yahoo Images. De 5 imágenes seleccionadas de estos resultados, se extraen los 6 colores prominentes de cada imágen para obtener una paleta de 30 colores, de los cuales se nos proporciona un recuadro con el color en sí, su valor hexadecimal preparado para utilizarlo en nuestras hojas de estilo CSS, o en programas de edición como Photoshop o Fireworks y el nombre del color.

Por ahora las búsquedas tan solo funcionan en inglés, cosa que no debería ser un problema hoy en día con la cantidad de traductores online que existen.

En definitiva, otro método para encontrar la inspiración a la hora de seleccionar la paleta de colores de nuestra web. Un sistema basado más en conceptos, ideal para representar cromáticamente es “espíritu” de nuestra página.

Generador paletas de colores | Instant Color Schemes

En el blog de diego mattei encuentro una colección de 50 packs de degradados disponibles en la web de Emma Alvarez. Sin embargo, hoy solo vamos a destacar uno: una colección de 30 degradados para Photoshop para usar en nuestros diseños 2.0.

 El enlace para descargarlo, lo podeis encontrar en deviantART. Y ya sabeis, si usais o por lo menos, descargais este recurso, un comentario para la autora tampoco viene mal

Como siempre que se trata de web 2.0, colores llamativos pero que no dañan la vista, que hacen nuestra web tenga ese aspecto cool que impera desde hace ya un tiempo.

Descarga aquí el pack.

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

Via webappers.com descubro una estupenda colección de 128 iconos para añadir a nuestros diseños web.

Como comentan los autores, se ha mantenido la estética “glossy” en todos los iconos, siendo el resultado bastante homogeneo además de práctico, al incorporar aparte de los iconos típicos de login, correo, bases de datos, favoritos, comentarios… unos cuantos iconos de servicios web como Digg, Delicious, Furl, Technorati, Flickr, Stumble Upon, Twitter, etc…

Resumiendo, una buena colección de iconos para dar un toque diferente y sin salirse de los normal a vuestros proyectos.

Podéis descargar la colección desde aquí: Function free icon set

Desde PSDTuts.com nos ofrecen dos magníficos tutoriales para diseñar una página web (al menos la portada), partiendo desde cero en PhotoShop.

Son diseños sencillos pero creativos, y aún estando los comentarios en inglés, la gran cantidad de capturas de los pasos a seguir facilitan la tarea a aquellos que no se defiendan muy bien con el ingles.

Los tutoriales, podeis encontrarlos aqui:

El primero de ellos: Create a Dark themed web design from scratch

El segundo: Create a Sleek high-end web design from scratch

Al finalizar la maquetación de una web, es frecuente que nos demos cuenta que se nos ha ido la mano con las hojas de estilo, y pesan más de lo que deberían.

Para rebajar el peso de estos documentos y hacer la carga de las páginas más ligera, podemos recurrir a los típicos compresores de hojas de estilos que encontramos en internet.

Algunos de ellos son CSS Drive, Robson CSS Compressor y CSS Clean.

Para decidir cual es el mejor, he realizado unas pruebas con un archivo css cualquiera. He seleccionado uno de la tienda virtual Magento, de 26,4 KB (concretamente, el archivo boxes.css).

Utilizando siempre el nivel de compresión máximo para cada uno, los resultados son esclarecedores:

Read More »