Escrito por Gallego el 30 Noviembre 2006

Adobe Photoshop CS logoDurante los últimos días he estado dándole muchas vueltas al Photoshop, ese programa que todos conocemos, pero que pocos saben manejar realmente bien. Entre tutoriales e investigación por cuenta propia, he conseguido hacer alguna que otra cosa medianamente decente, como esa “chapa informativa” (no sé cómo llamarla) de color verde que aparece en la parte superior derecha de este blog.

Hacer un distintivo como ése es bastante sencillo en realidad, así que se me ha ocurrido iniciar una nueva sección para ChochitoPelao, la cual he tenido a bien llamar Tutoriales (no, no me calentado mucho la cabeza con el nombre). Así pues, en este primer tutorial intentaré explicar de la mejor manera posible cómo crear dichas chapas con Photoshop, las cuales hacen mucho bonito en una web, si se saben utilizar. Así pues, si estamos todos listos, empezamos:

  • 1 - Empezamos por seleccionar la Herramienta Polígono. Si en la zona de la barra de herramientas correspondiente os aparece otro icono, no os preocupéis, pues simplemente habréis de hacer click derecho y se os desplegará un menú como éste:

Tutorial de diseño en Photoshop CS

  • 2 - En la barra superior, seleccionamos los siguiente criterios antes de dibujar el objeto, aunque éstos pueden variarse al gusto de cada uno:

Tutorial de diseño en Photoshop CS

  • 3 - En cualquier momento podemos modificar el color del objeto desde la pestaña de Capas, en la parte inferior derecha de la ventana. Cuanto más llamativo sea el color, mejor resultado dará:

Tutorial de diseño en Photoshop CS

  • 4 - Ahora toca darle un poco de profundidad al dibujo. Para ello hacemos click en Capa > Estilo de capa > Opciones de fusión. Aquí aplicaremos primero una Sombra paralela con opacidad de 75%, distancia 5 px, extensión 0% y tamaño 10 px. A continuación, seleccionamos Trazo con color blanco y tamaño 3 px. Deberíamos tener algo así:

Tutorial de diseño en Photoshop CS

  • 5 - El siguiente paso será hacer click sobre la capa del objeto (en el mismo sitio donde le cambiábamos el color) manteniendo la tecla Control pulsada, de forma que veremos como la parte interior de la estrella pasará a estar seleccionada. Ahora hacemos Capa > Nueva > Capa, con lo que habremos creado una nueva capa en la que podremos trabajar. Lo siguiente será seleccionare la herramienta Degradado:

Tutorial de diseño en Photoshop CS

  • 6 - Teniendo la opción Degradado activada, seleccionamos el Degradado radial (el segundo botón que aparece), y desplegando el menú contextual que se muestra en la imagen, seleccionamos Color frontal/Transparente (también el segundo botón). Es importante que tengamos seleccionado el color de pincel blanco:

Tutorial de diseño en Photoshop CS

  • 7 - Ahora aplicamos el Degradado en la zona que nos interese. Para el ejemplo, yo lo he marcado en la parte superior derecha de la chapa, con una opacidad del 70 %:

Tutorial de diseño en Photoshop CS

  • 8 - Para terminar, escribimos el texto que deseemos y le aplicamos una Sombra paralela básica, seleccionándola en la pestaña estilos:

    Tutorial de diseño en Photoshop CS

    Con la fuente Arial Black, el resultado final será éste:

Tutorial de diseño en Photoshop CS

Por si todo esto se os hace muy pesado y queréis adelantar, aquí os dejo el archivo editable en formato PSD para que hagáis uso libre de él, aunque imagino que os interesará seguir todos los pasos y aprender cómo hacerlo vosotros mismos. Naturalmente, también podéis disponer de este tutorial para uso personal en cualquier momento.

A la hora de guardar el archivo en un formato de imagen normal, tenemos dos opciones: si lo creamos en PNG, los efectos de sombreado se verán perfectos, pero no será compatible con el terrorífico Internet Explorer. La alternativa será guardarlo como GIF, con la consiguiente pérdida de calidad y efectos, pero siendo así accesible a todos los visitantes de nuestra web. Personalmente yo me decanté por la segunda opción, pues un 70% de visitas por medio de este navegador son demasiadas como para ignorarlas.

Y ya para terminar, nos queda el código necesario para la inserción de la chapa en nuestra página web. Para que se vea de forma fija en la esquina superior derecha, como tengo yo puesta ahora mismo la mía, simplemente pegáis entre <body> y </body>:

<div style="position:absolute;top:0;right:0;float:right"><img src="dirección de la imagen" /></div>


Artículos relacionados: