Efecto gráfico para texto

Esta es una pequeña tontería para resaltar un texto. Simula un papel rasgado y el texto quedaría como escrito en otro papel que hubiera debajo.

Primero hay que buscar o diseñar una imagen que parezca un papel rasgado. Si no la encontramos, en estos enlaces teneis ambas formas de conseguirla:

• Galería de imágenes. Es de pago, pero para sacar sólo el trozo que nos hace falta, nos vale.
• Hazlo con Photoshop
• Otro con Photoshop
• Y otro más con Photoshop (en inglés)
• Hacer con Photofiltre

Dicen que la realidad suele superar a la ficción, así que si tienes escaner, también puedes rasgar un papel y luego escanearlo. Ponle algún fondo oscuro para poder recortarlo después fácilmente con cualquier programa de dibujo.

Para perezosos, ofrecemos esta imagen, válida para fondos negros


Vale. Tenemos la imagen y la partimos en dos, una para arriba y otra para abajo. Ahora recortamos cada parte para dejar justo lo que nos sirve. Tendremos algo así:

En este ejemplo, la parte que quedará en el centro se ha coloreado de gris. Los bordes tienen que tener el mismo color que luego le pondremos al fondo del texto. Como el fondo será un color plano, los bordes no podrán terner degradados ni similar, para que no se note el "empalme".

Una vez que tenemos las imágenes, el resto es fácil. Este es el código:

<div align="center"><table width="336" cellpadding="20" bgcolor="#000000"><tbody><tr><td><table cellpadding="10" cellspacing="0" width="336"><tbody><tr><td background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrg3QjdvpDWc167iiYgyA5UxFY-u5MiaFmrNoW-iQgEr0k0M5LrqTb6X56Iuhdotc6-UdjdgGQmTTzwCV_YFN7zzmjYhVrH8ub4TvSmtqoPVMghuFhEAYayNN6_9ZpAnMaU_HUxZWwjs0/s400/rasgado+arriba+336x40.jpg" height="40" width="336"></td></tr><tr><td align="center" bgcolor="#b9b99f">AQUI VA LA FRASE</td></tr><tr><td background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijEurDA3L9TAYN9QQSHHObTG9pTZyrzFiGV5QT7CfVqOVs1ebj8tsr7NpkvoIgNQbhiVnjAhbUWkJNy7HtjwJm1WmkVeSglBVpm1wF7ggq0MhRh39rNSdRbfjCLAoLLzsKu13HOH7pLSU/s400/rasgado+abajo+336x40.jpg" height="40" width="336"></td></tr></tbody></table></td></tr></tbody></table></div>

Se sustituye el AQUI VA EL TEXTO por lo que queramos poner y las dos imágenes por las correspondientes vuestras (primera=ARRIBA - segunda=ABAJO). El número 336 hay que sustituirlo por el del ancho de vuestras imágenes, teniendo en cuenta que habrá que reducirlo si el espacio disponible es menor (por ejemplo en una barra lateral) y el 40 hay que cambiarlo por el alto (este siempre será fijo). El primer BGCOLOR es el del margen (en este caso negro=#000000. Si no lo quereis, basta con poner el valor de ese CELLPADDING a 0. El segundo BGCOLOR es el que tiene que coincidir con los bordes de las imágenes que antes citábamos. Los que están en contacto con el centro del conjunto.

El resultado:

AQUI VA LA FRASE, QUE POR MUY LARGA QUE SEA SIEMPRE VA A QUEDAR BIEN. PODEMOS UTILIZAR ESTE EFECTO PARA COLOCAR UNA CITA ALEATORIA. TAMBIEN PODEMOS COLOCAR ENLACES, IMAGENES, ETC.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter