Apuntes de informática

Algo que toda página web necesita en un buen logo, y últimamente en las páginas web se están poniendo de moda los logos con letras redonditas, reflejos y pocos colores, así que voy a intentar explicar como hacer un logo tipo Sinpastaenelbolsillo para tu web

Primer paso – Eligiendo la fuente.

Puede que este sea el primer obstáculo con el que te encuentres al diseñar tu logo, puesto que hay cientos de fuentes, y muchas se parecen sospechosamente, pero si te sirve de ayuda, he encontrado en Zonamasters una recopilación de fuentes 2.0, un poco pasada (2007) pero que sirve perfectamente.

Para instalarte las fuentes, descárgate el archivo y extrae las fuentes dentro de la carpeta fonts del gimp, en mi caso, al usar Ubuntu y tener la versión 2.6, la ruta es “/home/javier/.gimp-2.6/fonts“.

Ahora abre el Gimp y ya tienes instaladas las fuentes, “simplemente” tienes que escoger una para tu logo.

Segundo paso – Crear la imagen.

Antes de seguir voy a puntualizar que no voy a poner ninguna imagen en el logo, simplemente texto, pero he de reconocer que una imagen en un logo puede quedar bastante bien.
Ahora vamos a crear una imagen nueva con el Gimp, como el texto que voy a poner es bastante ancho, la voy a hacer de 700×70 px, pero tampoco se trata de que te sobre espacio por todos lados, y por supuesto, ponle fondo transparente.

Una vez tenemos la imagen sobre la que vamos a trabajar cogemos la herramienta de texto, y, en blanco, escribimos el texto que queramos, poniéndolo lo más grande que podamos.

Una vez tengamos el texto bien puesto y centrado, creamos una capa nueva, también transparente y la arrastramos en el diálogo de capas hasta ponerla por debajo por las que hayas puesto de texto, pinchamos sobre las capas de texto y las Combinamos hacia abajo.

Una vez combinadas procederemos a añadirle unos cuantos efectos.

Tercer paso – Añadiendo borde a las letras.

Este paso es muy sencillo si lo haces correctamente, sino te puedes volver loco intentando cuadrar letras.
Vamos a crear una capa nueva, también transparente y la vamos a poner por debajo de la capa en la que tenemos el texto, una vez hecho esto, sobre la capa en la que tenemos el texto, cogemos la herramienta de selección por color y seleccionamos las letras.

Ahora, sobre la capa nueva, hacemos click en Seleccionar -> Agrandar y seleccionamos 5px, verás como la selección se ha agrandado, ya sólo queda coger la herramienta de relleno y rellenar toda la selección, en la capa que está vacía, de negro, y así conseguimos unas letras blancas, con un borde negro.

Cuarto paso – Agregar relieve a las letras.

Una vez tenemos las letras con el borde, vamos a crear un poco de relieve, así que necesitamos una nueva capa, también transparente.
Ahora con la herramienta de selección rectangular cogemos un rectángulo que contenga todas las letras, cogidas desde la mitad hasta abajo y seleccionamos la capa en la que tenemos las letras en blanco y con la herramienta de selección por color, vamos a seleccionar la intersección entre la selección que ya tenemos realizada y el blanco de las letras, así que presionamos Ctrl + Shift y sin soltar hacemos click sobre el blanco de las letras.

Toca hacer un degradado sobre la capa nueva, con la selección que tenemos hecha, así que, hacemos click sobre la capa nueva y con la herramienta de mezcla, seleccionando el degradado frente a transparencia, hacemos el degradado vertialmente y haciendo que quede el negro debajo.

Quinto paso – Rallado.

He de decir que hay mucha gente a la que este paso no le convence demasiado, puesto que hace que las letras se lean algo peor, pero si te interesa puedes aplicarlo, a mi al menos me gusta mucho.

Vamos, cómo no, a crear una capa nueva, y a desactivar la vista de la capa que tiene el degradado haciendo click en el ojo que tiene la capa (en el diálogo de capas).

Ahora, sobre la capa de las letras en blanco, con la herramienta de selección por color, volvemos a seleccionar las letras, y sobre la capa nueva vamos a rellenar toda la selección con el patrón que tiene lineas negras y amarillas a 45º.
Una vez tengamos la capa nueva con las letras a base del relleno, seleccionamos, otra vez con la herramienta de selección por color, el amarillo y lo suprimimos (botón Del o Supr).

Ahora vamos a seleccionar el negro, y también lo borramos, pero no tocamos la selección que se nos quedará, puesto que ahí vamos a aplicar otra vez un degradado, en mi caso verde, también de color a transparencia.

Volvemos a mostrar la capa con el degradado negro, y si te queda demasiado oscuro juega con la opacidad de la capa.

Sexto paso – Reflejo.

Para el reflejo, he seguido este tutorial sobre reflejos en Gimp, en el cual puedes aprender a hacer mas tipos de reflejos.

Bueno, lo primero que he necesitado es agrandar el tamaño del lienzo, así que vamos a Imagen -> Tamaño del lienzo y lo he agrandado verticalmente otros 70px (me he pasado un poco, pero no pasa nada).

Ahora vamos a mostrar todas las capas y seleccionar un rectángulo en el que se vean las letras, y utilizamos Editar -> Copiar visible, y ajustamos todas las capas al tamaño del lienzo haciendo click en cada capa y dándole a Capa -> Capa a tamaño de imagen.

Crea una capa nueva, y pega lo que has copiado antes sobre ella, pero no la ancles, antes de eso dale a Capa -> Transformar -> Voltear verticalmente, y sitúa la capa como si fuera el reflejo de las letras y ánclala sobre la capa nueva.

Ahora, trabajando sobre el reflejo, vamos a Capa -> Máscaras -> Añadir máscara de capa e iniciamos la máscara a Blanco (opacidad total).
Simplemente tenemos que hacer ahora un degradado, de Negro a Blanco, como hemos hecho antes, de abajo a arriba y verticalmente y verás cómo se transparenta a modo de reflejo.

Si quieres puedes añadirle un efecto de desenfoque, pero eso ya te dejo que lo veas en el tutorial de reflejos.

Espero que te haya gustado el tutorial y que te sirva para algo, recuerda guardar la imagen como *.xcf para poder volver a editarla y como *.png para que al mostrarlo en internet se guarden las transparencias.

Puedes descargar mi *.xcf desde aquí y si realizas algún logo con esto, Coméntalo!!

Por cierto, si usas Photoshop, tal vez te interese esta entrada sobre tutoriales de logos con estilo Web 2.0, que, aunque ya no está el tutorial en Zona PhotoShop, tienes otros enlaces muy interesantes. O este otro en inglés, también sobre crear Logos 2.0