Crear un logo con estilo 2.0
Feb 17, 2009 Diseño web Web 2.0 1 comentario
Muchas veces vemos por la blogosfera algunos logos muy llamativos con efectos de iluminación, reflejo y transparencias… eso es lo que llamaremos logo 2.0, simplemente por tener un nuevo estilo, como la Web 2.0.
Si siempre te haz preguntado como se crean creé un pequeño tutorial sobre como crear tu propio logo 2.0 utilizando photoshop. Sin más vamos a empezar ya… el logo, una vez terminado quedará algo así:

Primero abrimos el photoshop y creamos un nuevo proyecto, para esto vamos a File/New (Archivo/Nuevo)
1- Así crearemos un nuevo proyecto llamado logo de 400 x 120 px como en la siguiente captura:

2- Ahora hacemos doble clic en la ventana nueva para maximizarla y trabajar mucho más cómodos. Seleccionamos la herramienta texto, hacemos clic en el área de trabajo donde queramos escribir y tecleamos el nombre que queremos para el logo, dándole el siguiente estilo:
Tipo de letra: Century Gothic (o cualquier otra que prefieras)
Tamaño: 40 ptos (pero se puede reducir o aumentar)
Color: #0399cc (o cualquier otro color moderno)
Igual podemos alternar este color con otros colores como este naranja (#ff751a) o este verde (#98cb00)
De modo que al aplicar estos estilos, quedaría algo así:

Ahora vamos a los efectos del texto
1- Seleccionamos la capa de texto
Para hacer la selección hay que ir a la ventana de capas. Si no aparece por defecto, pulsa F7. Una vez en la ventana de capas, con el botón Ctrl presionado haz clic en la parte izquierda de la capa de texto llamada MILOGO 2.0 como se muestra abajo.

2 – Creamos una nueva capa.
Para eso vamos a la ventana de capas y hacemos click sobre el icono
que aparece en la siguiente captura.

En la nueva capa (layer 2) hacemos una selección con la herramienta
, marcamos el icono Restar a la selección en la barra de opciones, y arrastramos el Mouse en el espacio de trabajo de modo que la selección pase por la mitad inferior del texto, quedando así:

3 – Ahora vamos a darle un fondo blanco a esta capa así:
a- Seleccionamos la herramienta Relleno (presiona g)
b- En la paleta de colores y buscamos el color blanco
c- hacemos clic sobre la nueva capa creada (layer 2) de manera que la parte superior del texto se vea en blanco. Hasta ahora se vería así:
d- Una vez logrado esto, presionamos Ctrl + d para quitar la selección.

e- Ahora para lograr el efecto que buscamos debemos darle algo de transparencia a la capa de la selección (layer 2). O sea a la parte blanca del texto. Para esto, seleccionamos la capa que creamos y justamente arriba, donde dice relleno (fill) cambiamos el valor que está al 100% hasta un 25%.
Quedando algo así:

Por último, le daremos el efecto de reflejo
1- Duplicamos la capa.
a- Seleccionamos la capa de texto
b- Hacemos clic derecho sobre su texto
c- Entre las opciones, seleccionamos duplicar capa (duplicate layer)
d- Verás una ventana donde pide que pongas el nombre de la nueva capa… en nuestro caso le pondremos reflejo y le damos OK.
2- La ponemos al revés, simulando un efecto de reflejo.
a- Con la nueva capa seleccionada presionamos Ctrl + t para transformar la capa. Verás como se selecciona.
3- Ahora hacemos clic derecho sobre el recuadro y seleccionamos Voltear vertical (flip Vertical). Verás como se pone al revés.
4- La movemos verticalmente, para esto debemos mantener el Shift presionado y arrastrar la imagen hacia abajo hasta que quede en una posición como la de la figura.

3- Le damos algo de transparencia con degradado
a- Seleccionamos la capa reflejo y creamos una nueva máscara como se muestra en la figura
b – Seleccionamos la herramienta Degradado haciendo clic derecho en la herramienta de Relleno
c- Si ya tenemos seleccionada la máscara que creamos podemos hacer clic y arrastrar el Mouse dentro del espacio de trabajo de arriba abajo para que vayas viendo el efecto buscado.

d- Repites el proceso hasta que te quede lo que buscas.
En fin… logramos algo como esto:

Luego exportamos en el formato que deseemos, preferiblemente png, y ya está, hemos creado nuestro propio logo 2.0. De todos modos aquí dejo el enlace para descargar el logo en PSD y algunas fonts muy buenas para estos tipos de logos.
Si tienen alguna duda dejen un comentario y lo resolvemos.
Compartir:
Relacionados
algunos artículos que te pueden interesarEmpiezas en esto de crear webs?
Abr 6, 2009 | Diseño web | 0 comentarios
1 comentario
Forma parte de nuestra discusión y síguela de cerca[...] Crear un logo 2.0www.puntopeek.com/web-20/crear-un-logo-con-estilo-20/ por puntopeek hace pocos segundos [...]
Autor: Crear un logo 2.0 | Fecha: Feb 17, 2009.