Están en PNG24 con transparencia en dos tamaños distintos, 100 y 250 pixeles.

Licencia de uso:

• Se liberan bajo licencia Creative Commons Atribución 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).
• Para distribuirlos, por favor, enlaza este artículo y no al archivo de descarga directo o otro post o servidor.

Descargar

PaperCut Icons

Nuevo paquete de iconos del equipo del blog de diseño Maquiladora de Sueños para Blog and Web. Son ocho iconos de servicios sociales con efecto 3D y un toque glossy en forma de una “manzana famosa”.

Los servicios incluidos son Facebook, Twitter, Feed RSS, YouTube, Vimeo, Flickr, MSN, y Skype.

Están en tres tamaños distintos: 64×64, 100×100 y 200×200 en PNG a buena calidad para escalarlos fácilmente. Tienen fondo transparente para adaptarse a cualquier diseño.

Licencia

• Se liberan bajo licencia Creative Commons Atribución 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).
• Para distribuirlos, por favor, enlaza este artículo y no al archivo de descarga directo o otro post o servidor.

Descargar

Descargar Apple Icon Pack.

Ulises Arvizu de Maquiladora de sueños y también autor en Blog and Web, nos regala un nuevo paquete de iconos sociales: Macbook social. Seguro a más de un maquero le gustará para su blog .

Son 13 iconos distintos en 3 tamaños: 100×60, 150×90 y 250×150.

Licencia

• Se liberan bajo licencia Creative Commons Atribución 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).
• Para distribuirlos enlaza este artículo y no al archivo de descarga directo o otro post o servidor.

Descargar

Descargar Macbook Social Icons.

Ulises Arvizu de Maquiladora de sueños nos sorprende con nuevo paquete de iconos exclusivos para Blog and Web, esta vez, son 3 geniales iconos para suscripción por Feed RSS, Twitter y Facebook en forma de cubos de rubik. Disponibles en tres tamaños distintos 32×39, 64×77 y 100×120 pixeles en calidad PNG-24.

Adicionalmente se incluye el archivo vectorial (fuente) para que puedas crear tu propios cubos rubik con otros servicios sociales o lo que se te ocurra.

Licencia

• Se liberan bajo licencia Creative Commons Atribución 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).
• Para distribuirlos enlaza este artículo y no al archivo de descarga directo o otro post o servidor.

Descargar

Descargar Rubik Social Icons.

Descargar: Default Icon

Descargar

Descargar Converse Social Icons

Licencia

• Se liberan bajo licencia Creative Commons Atribución 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).
• Para distribuirlos enlaza este artículo y no al archivo de descarga directo o otro post o servidor.

Espero les guste este segundo Pack en esxclusiva Para Blog and Web, desarrollado por el core de Maquiladora de Sueños

Descargar

descarga aquí el archivo que contienen las imagenes ZIP

Formatos

Las imágenes vienen PNG-24, con una ancho maximo de 200 pixeles

Licencia

• Se liberan bajo licencia Creative Commons 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (No se permite la venta directa del pack).
• Para distribuirlos por favor enlaza este artículo y no al archivo de descarga directo o en otro servidor.

Úsenlos y espero sus comentarios

Siempre he creído interesante el darle cierta animación a nuestros botones le den un plus gráfico, y hay, desde el enviar de manera automática un mail a alguien que se nos ha añadido en nuestra lista de lectores de nuestro RSS, y quizás un botón animado de agradecimiento puede ser también buena opción.

En esta ocasión haremos un ejercicio para crear un pequeño personaje desde el papel, pasando por Adobe illustrator, hasta llegar a la implementación en HTML y CSS. Al final, te dejamos las imágenes y el código en un archivo para que lo implementes en tu web si así deseas (Ver demo).

Vectores y la ilustración

Los vectores tienen grandes ventajas y las ultimas versiones de illustrator son sorprendentes, nuestro acabados serán muchos más que simples plastas de color.

No voy a negar que tener nociones de básicas de dibujo ayuda a poder hacer ilustraciones, pero definitivamente la web es un compendio muy amplio de imágenes para tomar ideas, para ver diferentes técnicas, para poder empezar nuestros proyectos, el dibujar ayuda, pero las buenas ideas siempre son mejores.

Bocetando y de ahí a illustrator

Empecemos por bocetar nuestro personaje, esto nos ayudara a tener una idea un poco más clara de como empezar. Como comento, puedes tomar ideas de ilustraciones que hayas visto y se te hagan interesantes.

Puedo mencionarles que prefiero hacer esto, bocetar aunque al final muchas veces trazo directo en illustrator pero al menos para mi me da una idea más clara y sé que haré, antes podía pasar horas en la computadora sin tener claro que dibujar y con ello perdía tiempo, unos momentos de boceto terminaron con eso.

Empezaremos con las formas básicas para la cabeza y las orejas, trazaremos tres círculos, juntos para luego aplicar el pathfinder (menu window-pathfinder) y aplicamos el efecto de sumar.

Trazaremos los ojos, dos círculos pequeños de color negro bastarán para hacerlo, colocamos y centramos, y después haremos el cabello.

Ahora solo ponerle color y unir las partes.

Esto solo es una guía, así que ustedes podrán hacer el personaje que quieran yo les muestro dos variantes de niño y niña.

Ahora viene la parte interesante, la sonrisa, la cual será una de las cosas que cambian. Para comenzar haremos la sonrisa con la boca cerrada, un medio circulo será suficiente, para después hacer la sonrisa de la boca abierta. duplicamos nuestro layer o capa con nuestro personaje con sonrisa cerrada y hacemos lo siguiente en el layer duplicado.

Feed rss y strokes de etiqueta.

Haremos nuestro feed RSS que es el pretexto para hacer esta ilustración, lo colocaremos detrás del niño y en la imagen el botón se verá más, y crearemos un efecto de movimiento.

Ahora hagamos el terminado de etiqueta, seleccionemos el personaje, le damos Unite con el pathfider lo rellenamos del color y le damos un stroke o borde para que se rebase la figura, aplicamos lo mismo al botón feed RSS.

Vamos a hacer un pequeño destello en la parte de atrás de nuestro personaje. Creamos un rectángulo vertical y aplicamos el efecto de transform o transformar, (menu effects/Distor & Transform).

Expandimos la forma creada (menu object- eExpand Appearance) le damos Unite con el pathfinder, ajustamos algunas puntas de nuestra figura y añadimos una degradado.

Solo agreguemos un pequeño texto para hacer más obvio nuestro cambio y listo tendríamos por separado en cada layer un archivo así:

Implementación del botón

Desde illustrator de exportan las imágenes, el resultado, dos imágenes un formato de imagen web, por ejemplo PNG8. Para poderlas usar en un hover, ambas deben tener el mismo alto y ancho y estar alineadas vertical y horizontalmente. En otras palabras, que si pones una sobre otra, la silueta de cara coincide.

Hemos unidos después estas dos imágenes en una sola, una sobre otra, para usarlas como sprite CSS:

Para el HTML basta con el siguiente código:

<a href='http://blogandweb.com/feed' class='botonrss'>Feed RSS</a>

El CSS será el encargado de hacer el efecto “hover“, es decir, que al pasar el puntero del mouse por encima se mostrará la segunda figura, dando la sensación de animación.

a.botonrss {
    width:166px;
    height:180px; /* Dimensiones de la imagen */
    text-indent:-9999px;
    overflow:hidden; /* Oculatando el texto del enlace */
    display:block;
    background:url(images/rss-boton.png) no-repeat 0 0; /* Poniendo la imagen como fondo */
}
a.botonrss:hover {
    background: url(images/rss-boton.png) no-repeat 0 -180px; /* Al hacer hover, ponemos la segunda imagen de fondo */
}

Ahora, solo resta ver el botón en funcionamiento.

Implementarlo en Blogger y WordPress

Implementarlo en Blogger y WordPress es bastante sencillo. El código HTML se puede agregar en un widget de HTML en el sidebar y el CSS, en WordPress va en el archivo style.css y en Blogger justo antes del código:

]]></b:skin>

No olvides cambiar la URL por la de tu feed en el HTML y la ruta de la imagen en el CSS.

Descargar

Descargar HTML e imágenes.

Conclusión

En este tutorial vimos como crear un botón “animado” iniciando desde el panel, aunque resulta en algo de trabajo, el resultado generalmente vale la pena.

Igualmente, si te gusto este botón para tu sitio web, descárgalo e impleméntalo. Nosotros lo liberamos bajo licencia Creative Commons, y si nos quieres dar un link por los créditos, te lo agradecemos desde ahora

Por cierto, este es el primer tutorial que hacemos en conjunto, Ulises y Francisco (principalmente el primero), esperamos te haya gustado tanto como a nosotros al escribirlo.

Descargar CoolSidebar

En esta ocasión les mostraremos como se hace un botón con diseño de sticker, que últimamente se han puesto muy de moda en los packs de iconos sociales, al final del tutorial tendrás la base que podrás aplicar este diseño a cualquier tipo de botón, ya sea social o no.

Todo desde Illustrator CS4 (Ai)

Todo el botón será creado con vectores por lo que no tendrás problemas para los tamaños y calidad de tus imágenes. Usar vectores es una solución ideal para web, ya que a pesar de que uses tamaño relativamente pequeños, la exportación de tus png’s será con una fidelidad de contornos muy buena. Si a eso le añades que en Ai CS4 por fin puede hacer medidas en pixeles para web simplemente lo tienes todo.

Iniciamos en nuestro documento haciendo una figura de circulo (180px por 180px) con las siguiente características y le ponemos color de relleno #FDF8E3, sin stroke.

Ahora lo que haremos será hacer la parte del sticker que se esta despegando para esto ponemos una figura de rectangulo por encima del circulo seleccionamos ambas figuras , copiamos ( Cmd+C o Ctrl+ C) y pegamos (Cmd+V o Ctrl+V).

Abrimos nuestra ventana del Pathfinder (Menú Window→Pathfinder) seleccionamos un par de figuras (círculo y rectángulo) hacemos la opción  Intersect (es decir quedara solo laintersección entre las dos figuras) y en al segunda aplicacmos la oción Minus (que la figura de arriba sustraiga a la figura de abajo).

Ajustamos un poco la curva de la figura más pequeña,  haciéndola un poco más grande, le agregamos los siguiente valores de relleno y la giramos

Duplicamos esta misma figura. Ajustamos la curva para que la forma quede como sombra proyectada la rellenamos de negro y le damos una transparencia del 12%.

Ahora duplicamos el semicírculo que nos queda, lo mandamos al fondo,  lo desfazamos un poco , lo rellenamos de negro y le damos transparencia del 12%.

Ya esta nuestra etiqueta ahora a poner diseño

Creamos un nuevo círculo de 136 x 136 pixeles, con un stroke de 2 pt. de color y un gradiente circular como relleno de los siguientes colores #FBB03B y #F16123, lo que no deja una imagen así.

Pasamos adelante el pedazo de sticker despegado y su sombra.Ahora tomamos uno vectores que descargamos de Internet (ambos son totalmente gratis este y este otro de DeviantArt . Los agregamos con el color #FFD54E y una transparencia del 50%

Ahora solo falta agregar el símbolo de RSS, el cual tome del siguiente vector gratuito,  aunque si eres de esos que les gusta hacerlo todo desde cero en este tutorial viene explicado como se hace.

Ajustamos el logo y listo. Puedes exportarlo como png.

Para Terminar

Tenemos listo nuestro botón ahora puedes cambiar los colores y poner el símbolo de cualquier otra aplicación o red social ( facebook, twitter o friendfeed quedan con el color azul) y así puedes hacer las diferentes adaptaciones.

Un tip que te puedo dar es que puedes modificar este sticker exportándolo como .png y jugando con texturas y transparencias en Photoshop, para dar una sensación distinta.  Espero puedas dejarme tus comentarios dudas y si gustas puedes mandarme un reply vía twitter (@ulizes), me agradaría saber como te fue con el tutorial así como ver tus propias versiones.