Micaela 29 de octubre de 2009 a las 11.28
   Imprimir artículo
elWebmaster.com

Crea un ícono de Twitter para tu sitio en pocos pasos con Photoshop


twitter128x128No necesitas ser un profesional del Photoshop o un iconista para crear un simple ícono. Sólo necesitas tener una idea de lo que deseas y comenzar desde ahí.

En esta nota, te vamos a enseñar cómo crear un simple icono Twitter, para que puedas utilizar en tu blog o sitio web, en sólo 6 simples pasos.

Primero veamos lo que vamos a crear:

115

Asumimos que saben cómo instalar patrones en Photoshop. También hay un PSD disponible para descargar al final del post.

Aquí están los recursos que necesitarán descargar.

* Techie Patterns for Photoshop

* Vector Twitter Icon

* Twitter Font ( via Bitrebels Thanks Richard)

Vamos a crear un icono de 128x 128 pixeles. Si deseas que el icono sea redimensionable, será buena idea crearlo en llustrator.

Paso 1:

Abre un Nuevo documento en Photoshop  de 128×128, con fondo transparente.

215

Paso 2:

Selecciona la herramienta rectángulo redondeado del menú de formas.

35

Paso 3:

Dibuja un rectángulo como se muestra en la imagen. Utiliza la regla si lo necesitas.

46

Paso 4:

Ahora utiliza la herramienta de selección de camino (Atajo de teclado “A”) para seleccionar la forma. Haz clic derecho con el mouse para obtener el menú desplegable. Deberías ver la opción “Hacer selección”. Cuando seleccionas/ haces clic en esa opción la forma del rectángulo debería seleccionarse.

56

Paso 5:

Ahora la parte excitante. Vamos a rellenar la selección del rectángulo. El color depende de ti. Puedes seleccionar diferentes colores para que combinen con el esquema de colores de tu sitio web. Aquí utilizamos el foreground #63d2f4 y el background #10b8ec

64

Selecciona la herramienta Gradiente. Rellena el rectángulo con gradiente. Mantén presionada la tecla Shift si deseas que la gradiente sea derecha.

74

En Estilo de Capa, vamos a utilizar la Superposición de Motivo. Puedes acceder a esto haciendo doble clic en el diseño o yendo a Capa>Estilo de Capa. Abajo está el diseño que hemos seleccionado.

84

Mantén la opacidad baja para que el fondo no sea demasiado oscuro. Aquí está nuestro resultado, con un zoom del 200%.

94

Paso 6

Ahora vamos a elegir Pico (T1) Font Black Al, con color de fuente blanco y centrada, o de la forma que prefieras. Y ya tienes un icono Twitter simple creado. Aquí está el resultado:

102

Hagamos una versión diferente. Selecciona el color de fuente #2cb7e2 . Esto hace que la “t” sea casi del color del fondo.

116

En Estilo de Capa, selecciona Trazo y Sombra Interior.

Trazo: Le da a la “t” una línea blanca de borde. 4px

123

Sombra interior: para el efecto del recuadro.

132

Este es el resultado:

142

Ahí lo tienen. Un icono twitter simple y bonito. También pueden crear uno con un pájaro en lugar de texto. Para el pájaro simplemente peguen el ave vector y cambien el color y estilo como deseen.

151

Experimenta con los estilos de diseño y obtén tus propios y creativos estilos.

Puedes descargar el PSD aquí o aquí.

Fuente: Desizn Tech


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder