Crear iconos de Adobe CS4 con Photoshop

Últimamente he visto en varios sitios iconos de Adobe CS4 rondando en alguno que otro header, sección o en logos de varias páginas web que hablan sobre el diseño gráfico.

Comunmente, estos íconos son personalizados, es decir, si en la web contaran con una sección llamada Archivos el ícono diría Ar, ó en el caso de Cristalab, el ícono diría Cl.

Si nos ponemos a visualizar el íicono, veremos claros rastros de que está hecho de forma muy sencilla, en síntesis usan un degrado radial, un sombra paralela, una interior y la tipografía "Trebuchet MS".

Ahora, en este tip veremos como hacer de forma fácil y rápida con Photoshop, un icono estilo Adobe CS4, el cual podremos personalizar cambiando los colores y las abreviatura; bueno pues...¡¡¡Al ataque!!!

El cuadrado base

Crearemos un documento del tamaño al gusto, de preferencia que sea cuadrado, en este caso yo usaré un fondo transaparente, pero esto no es obligatorio.

Si usas un fondo blanco vas a crear una nueva capa (Ctrl+Shift+N), si usas un fondo transparente no es necesario; ahora tomas la herramienta Marco rectangular (M) y manteniendo presionada la tecla Shift (para mantener las proporciones de la selección en forma cuadrada) creamos un cuadrado de este tamaño:



Podemos alinearlo en el centro o aun pequeño costado.
Hecho esto, tomamos la herramienta Degrado (G) y lo configuramos de estilo Radial, con los colores de nuestro ícono, que en mi caso será el de Adobe Flash CS4 por lo que usaré esos colores:



Vamos a proceder a rellenar la selección con el degrado de forma vertical de arriba hacia abajo, marcando la casilla Invertir en la configuración del degrado.
Hecho lo anterior tendremos algo así:

Efectos del cuadrado base

Nuestro cuadrado base solo llevará una sombra paralela, en caso de que hayamos colocado nuestro cuadrado base a un costado, la sombra irá hacia el lado derecho del lienzo, y si lo centramos, irá hacia abajo. Más o menos se pueden dar una ida de como irá su sombra, puesto que no existe medida alguna que pueda especificar el tamaño o distancia de esta.

Al hacerlo tendremos algo así:

La tipografía

Al igual que en el tip anterior sobre los iconos de Adobe CS3 estilo 2.0 en Flash, usaremos la tipografía Trebuchet MS, conesta escribiremos la abreviatura de Flash, que es Fl.

Esto lo haremos según laaplicación de la queramos hacer el icono ó la abreviatura de alguna otra cosa.

El tamaño de la tipografía es al gusto, solo hace falta tener buen ojo para ver que las letras no estén muy chicas ni muy grandes.
Más o menos de esta forma:

Efectos de la tipografía

Para las letras sólo usaremos 3 efectos: Sombra interior, Superposición de color y un Trazo

Abrimos las Opciones de fusión de la capa del texto y agregamos estos efectos:

Sombra interior


Superposición de color


Trazo


Por último, el producto final :



Espero les haya gustado este tip que es muy sencillo y práctico.

Usando el mismo tipo de técnica podríamos crear íconos de varias cosas. Aquí un ejemplo de Clab, algunos BOFH's y el mío.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.