Escrito por Gallego el 15 Diciembre 2006

Photoshop logoAnte la aceptación que pareció tener el primer tutorial que escribí, destinado a explicar la creación de chapas informativas en Photoshop, he decidido lanzarme de nuevo a la acción, y preparar un nuevo artículo con el que iros enseñando algunos truquillos para poder manejar un poco mejor cada día este interesante pero laborioso programa de edición de imagen.

Atendiendo a la petición que desde los comentarios del anterior tutorial me hacía MjWoman, voy a daros las orientaciones básicas para crear un banner mínimamente atractivo, el cual podréis luego emplear para poner en vuestra página web, documentos cuya presentación queráis mejorar, etc. Vamos, para lo que se os pueda ocurrir.

Ya de paso os digo que si alguno de vosotros también quiere que escriba algún tutorial en concreto, no tiene más que pedirlo, bien comentando aquí mismo o enviándome un email, y si veo que el asunto resulta viable e interesante, me pondré sobre ello. Naturalmente, estos pasos que aquí os doy podéis alterarlos en cualquier punto, para así conseguir un resultado más personalizado a vuestros gustos. Así pues, arrancamos el Photoshop y empezamos a trabajar:

  • 1 - Lo primero será crear un nuevo documento, pulsando en Archivo > Nuevo..., y determinando en la ventana que se abrirá unas dimensiones acordes a nuestras necesidades. Para este ejemplo he usado 350 x 150 pixeles:

Diseño de un banner web en Photoshop

  • 2 - Seleccionamos la Herramienta rectángulo redondeado, y el color que queramos que tenga el banner. Como podéis ver, yo he optado por el verde oscuro:

Diseño de un banner web en Photoshop

  • 3 - Tras dibujar un rectángulo del tamaño que deseemos, toca ponerle algunos efectos para hacerlo más atractivo. Para ello, vamos a Capa > Estilo de capa > Opciones de fusión.... Primero aplicaremos Sombra paralela con 70% de opacidad, distancia 5 px, extensión 0% y tamaño 5 px. También seleccionamos Bisel y relieve, con Estilo bisel interior, profundidad 30%, tamaño 3 px y profundidad 0 px. Deberíamos tener algo así:

Diseño de un banner web en Photoshop

  • 4 - Ahora, mediante la Herramienta de texto, escribimos el texto que queremos que aparezca en el banner. Para el ejemplo yo he empleado la fuente Elegance, la cual podéis descargar aquí, con tamaño 14 pt. y color blanco:

Diseño de un banner web en Photoshop

  • 5 - Una vez escrito, y asegurándonos de que esté la capa del texto seleccionada (lo estará si no pincháis en ningún otro sitio), volvemos al menú Capa > Estilo de capa > Opciones de fusión..., donde esta vez seleccionaremos Trazo, de tamaño 4 px, posición Fuera y con un color verde pastel. Para el ejemplo yo he usado el #72B562. Aceptando tendremos algo así:

Diseño de un banner web en Photoshop

  • 6 -Como se han quedado unos huecos muy feos en los espacios entre letras como la C y la O, vamos a rellenarlos, ¿no os parece? Para ello primero hemos de unir todas las capas (después de esto, no será posible editar el texto), lo cual se hace pulsando Capa > Combinar visibles. Una vez hecho esto, seleccionamos la Herramienta cuentagotas, y la utilizamos sobre el verde pastel que aplicamos como Trazo al texto:

    Diseño de un banner web en Photoshop

    Con esto, habremos seleccionado dicho verde como color para trabajar. Ahora, activando el Bote de pintura, iremos aplicándolo en cada uno de los espacios que hayan podido quedar en los interiores de las letras:

    Diseño de un banner web en Photoshop

    Vemos como ahora el resultado es ligeramente más atractivo, sin esos espacios en verde oscuro entre las letras:

Diseño de un banner web en Photoshop

  • 7 - ¿Me seguís aún? Espero que sí, porque ya estamos terminando. Para darle el toque definitivo de glamour, lo primero será emplear la Herramienta Varita Mágica y pinchar en la zona de color verde oscuro, para seleccionar sólo la base del banner:

    Diseño de un banner web en Photoshop

    Ahora seleccionamos la Herramienta pincel, y desplegando el menú de selección de Pincel como se muestra en la imagen, nos vamos hasta el que tiene forma de estrellas:

    Diseño de un banner web en Photoshop

    Manteniendo como color de trabajo el verde pastel que antes seleccionamos haciendo uso del Cuentagotas en el paso 6, empezamos a dibujar estrellas de diferente diámetro (éste se selecciona en el menú desplegable de antes), y por fin tendremos un banner tan majo como éste que paso a mostraros:

Diseño de un banner web en Photoshop


Artículos relacionados: