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.

En esta ocasión he creado un pequeño tutorial para realizar un banner con estilo grunge, la idea es repasar lo que hemos aprendido sobre contraste y legibilidad. Empecemos por descargar el archivo “texturas banerBW.zip” donde tendrás el archivo para poder trabajar este tutorial.

Para hacer este banner usaremos Adobe Photoshop y Adobe Illustrator CS4, pero las funciones que utilizaremos pueden usarse desde la versión CS de estos programas así que si no tienes las versiones actuales no hay problema.

Texturas de papel

En este paso usaremos tres texturas de papel , abre el archivo Texturas bannerBW.psd. Hay un sin fin de lugares donde puedes encontrar texturas de este tipo, pero si tienes al oportunidad de escanear o tomar fotos también es muy bueno, la idea es jugar con las texturas, con las posibilidades que el modo de capa nos da, como lo es ” multiply”, “hard ligth” y demás tipos, las opacidades también pueden servir.

En este caso use 4 texturas, como lo puedes ver en el archivo y veras como jugué con los tipos de capa y sus opacidad para lograr la textura que busco .No hay limite de posibilidades, pero lo ideal es no excederse con el numero de layers que al final eso hará que tu RAM se sobrecargue).

Una vez concluida tu experimentación con las texturas te recomiendo unir las capas, da click en el de la parte izquierda de la ventana de Layer→Merge Visble.

Poniendo tipografía

Ahora ponemos tipografía, damos doble click en la ventana de color y agregamos nuestro texto elige el color #4b2617; en este caso use la Defused que pues descargar de dafont.com con un estilo muy destroy, luego en el Menú Layer→ Layer Style.

Ponemos los siguientes valores en la las opciones Drop Shadow.

Ahora toca poner el subtitulo o descripción del sitio, para esta tipografía puedes usar alguna que sea serif y haga un buen contraste,usando el color #4b2617 y ponemos los siguientes valores para Drop Shadow ( Menú Layer→Layer Style).

Haciendo una cinta de pegote de la nada

Oprimimos las teclas cmd(Mac) o control (PC) + shft + N y creamos en automático otro layer, ahi haremos una selcción con la herramienta de selección cudadrada. Ahora la rellenamos con el color #ffc705 (shift + f5) o menú edit→Fill

Ya que está esto usaremos uno de los pinceles, de forma irregular.

Con el color #ad7010 al 13% en modo multiply hacemos unos pequeños click para hacer que el amarillo se vuelva un color moteado y así hacer un poco de textura,

Después con ese mismo pincel pero con el color #ffdf71 y en modo Hard Color comenzamos a pintar para ahora dar la sensación de luces (se paciente y no te excedas con los clicks del mouse).

Ahora con el menu select→deselect , hemos terminado, nuestra cinta de pegote. ahora seleccionemos el layer del texto (bloggin/desarrollo web) y manteniendo shift apretado seleccionamos el layer de nuestra cinta, con esto hemos seleccionado los dos layers.

Ahora presionemos Ctrl(PC) o Cmd (Mac) + T y así podremos girar un poco nuestro cinta con todo y el texto.

Agreguemosle al layer de la cinta un poco de sombra con los siguientes valores

Tintas

es tiempo de ponernos más audaces y para ellos usaremos unos vectores de manchas de tinta que descargamos gratuitamente del sitio Vecteezy, lo abrimos en adobe Illustrator y copiamos un par de ellos para pegarlos en el archivo de Photoshop.

A la hora de pegarlo en Photoshop (le decimos que lo haga como pixel) luego en el menú Image→ Adjusment→Hue/saturation ponemos los siguientes valores. ponemos el Layer en modo Multiply.

Hacemos lo mismo con otro de los vectores pero ahora ponemos el siguiente valor. Es muy importante tener seleccionada la opción de colorized.

¡Listo! podemos duplicar capas y moverlos como se nos antoje e incluso poner en algunos con cambios de opacidad.

El grunge es irregular

Nuestro banner ya casi queda listo ahora es cosa de darle a nuestro banner un terminado como de hora rasgada,usaremos las lineas guías del archivo de apoyo (sino la ves ve al Menú View→Show→Guide) y basando en ellas empieza a borrar sobre el layer de la textura de papel( por ellos unimos layers de texturas previamente). y a borrar, recuerda la idea es hacer que el banner tenga una forma irregular, usa los pinceles de forma regular te serán muy útiles.

Terminado esto solo añadimos sombra con los siguientes valores.

listo hemos terminado

Conclusión

Usa esto como una guía al fina tu mismo puede encontrar tu propio estilo y hacer un banner mas personalizado y único. juega con texturas de otros materiales, y vectores tu gusto. Internet es una gran librería de recursos gratuitos, pero también los hay de pago (unos cuantos dólares) solo analiza bien que es lo que buscas si prefieres las opciones de pago.

Espero te sea útil este tutorial dejame cualquier comentario sobre que te pareció y si lo prefieres puede agregarme a twitter @ulizes

Sin embargo vía Kabytes > My Open Studio > VectorTuts llego hasta My Stock Logo, un sitio donde se ofrecen logos gratuitos para ser usados en proyectos comerciales y no comerciales.

Las imágenes que se ofrecen están clasificadas en diferentes packs que pueden descargarse en conjunto. Cada pack está en formato Adobe Illustrator 10 (.AI); es decir, en formato vectorial, de manera que podrás modificar las imágenes de acuerdo a tus necesidades y gustos. Las descargas se realizan desde Deposit Files.

Seguro que para diseñadores profesionales esto no pasa de ser pequeñas imágenes prediseñadas, sin ningún atractivo o identidad. Sin embargo, para aquellos cuya habilidad creativa para este tipo de elementos es más bien reducida, puede ser un buen punto de partida para crear el logo de su blog, modificando y mezclando las imágenes.

He de señalar que en el sitio web, lo único que indica el permiso para usar las imágenes es una frase abajo que dice:

Y justo debajo dice “All rights reserved”, con lo que la cosa no queda demasiado clara. Creo que el autor o autores del sitio deberían utilizar una licencia Creative Commons o similar para dejar más claro los usos que se le pueden dar a los logos que sean sacados de allí.

Con todo, un recurso interesante aunque sea para avanzar en la búsqueda de la imagen con la que identificar nuestro sitio en la web, similar a otros que ya han pasado por aquí, como LogoTemplater.

Enlace: My Stock Logo

30 Free Vector WordPress Icons – Descargar iconos (30 icons)

WordPress Icons version 1.0 – Descargar iconos (8 icons)

WordPress Logo – Descargar iconos (6 icons)

WordPress Stamp – Descargar iconos (6 icons)

WordPress Logos and Button – Descargar iconos (12 icons)

I love WP – Descargar iconos (3 icons)

WordPress Logos FAQs – Descargar iconos (21 icons)

3D WordPress Logo Icons : Yo-Yo toys – Descargar iconos (1 icons)

WordPress Icon – Descargar iconos (1 icons)

WPcamp cena – Descargar iconos (1, 2 – 2 icons)

Social Bookmark Iconset – Descargar iconos (1 icons)

Free Hand Drawn Doodle Icon Set for Bloggers – Descargar iconos (1 icons)

webtoolkit4.me icon set – Descargar iconos (1 icons)

Aquaticus Social – Descargar iconos (1 icons)

Social me – Descargar iconos (1 icons)

Web service Lemoned – Descargar iconos (1 icons)

Boxpress Icons – Descargar iconos (1 icons)

Les agradezco si conocen otro paquete que incluya iconos para WordPress y entiquesen la lista en los comentarios.

Free Twitter Bottom – Follow me on Twitter – Descargar Iconos (42+ icons)

31 Logos et boutons pour Twitter – Descargar iconos (31+ icons)

Free Twitter Graphics – Descargar iconos (18 icons)

The Cutest Freebies: Twitter Bird Icons & Illustration – Descargar iconos (3 icons)

FREE Twitter Icons For Your Website/Blog - Descargar iconos (2 icons)

Practika: A Free Icon Set – Descargar iconos (1)

Icone Blog – Set #3 – Descargar iconos (2)

The Leaves Fall: A Social Icon Set For Bloggers – Descargar iconos (3)

It’s Twitter Time! Free vector icon set – Descargar iconos (4)

6 Free New Social Icons – Descargar iconos (1)

Twitter 1-5 – Descargar iconos (1, 2, 3, 4, 5)

Favicon Dock Style – Descargar iconos (1)

PhireDesign Twitter Icon – Descargar iconos (1)

Twitter icon v2 – Descargar iconos (1)

Twitt Chick – Descargar iconos (1)

Heart: A Free Social Icon Set – Descargar iconos (1)

Social Bookmark Iconset – Descargar iconos (1)

Web 2 Icons – Descargar iconos (1)

Web 2.0rigami – Descargar iconos (1)

34 (ou plus) boutons gratuits pour votre site – Descargar iconos (1)

Socialize Icon Set – Descargar iconos (1)

Free Vector Social Bookmark Icons – Descargar iconos (3)

free vector twitter icon – Descargar iconos (1)

Icontexto webdev social bookmark – Descargar iconos (2)

Free Hand Drawn Doodle Icon Set for Bloggers – Descargar iconos (1)

Twitter Icon – Descargar iconos (1)

Feed & Twitter Monster Icons – Descargar iconos (1)

webtoolkit4.me icon set – Descargar iconos (1)

2experts Icons Set – Descargar iconos (3)

Handycons - Descargar iconos (1)

Esta recopilación se auxilio en deviantart, noupe y google. Si conocen un paquete de iconos para Twitter que no se encuentra en la lista, dejalo en los comentarios. No hay pretexto para lucir un icono acorde a tu diseño. Solo queda decir: ¡Sigueme en Twitter!

Gracias al blog de Neri me entero de que WordPress ha sacado material para los usuarios de su plataforma o bien para diseñadores, se trata del logo de wordpress en distintas resoluciones para imprimir, editar o publicar en la web, botones publicitarios, wallpapers y la paleta de colores de sus productos. Nada extraordinario pero que te ahorrará andar buscando en varios sitios si los ocupas.

Por cierto, desde el foro oficial de WordPress encontré la fuente que usa el logo que es bastante agradable.

Sitio: wordpress.org