Efectos



Efectos atractivos de texto HTML

Los efectos de texto pueden hacer que tu página web se vea más interesante, pero si los usas incorrectamente, pueden hacer que sea una pesadilla. Puedes resaltar el texto, dejarlo en segundo plano, hacer que se desplace por la pantalla o incluso hacer que caiga de la parte superior de la página web. Ten en cuenta que algunos códigos HTML no funcionan en todos los navegadores, en Netscape en particular. Todos estos códigos HTML se deben colocar dentro de las etiquetas <body></body>.

Realiza tu propia página web.

Desplazamiento de texto

La etiqueta "carpa" del código HTML hará que tu texto se desplace de derecha a izquierda, de izquierda a derecha y hacia arriba o hacia abajo. Esta es una de las etiquetas que no funciona en Netscape.

Un ejemplo de desplazamiento:

<div align="center"><font color="#FFFFFF" size="+1"><marquee bgcolor="#000000" direction="right" loop="20">Escribe tu texto aqui</marquee></font></div>


Fondos y texto resaltado

Los fondos colocan una caja de color debajo del texto que escribas.

Ejemplo de código: <p><font size="3"><span style="background: #000000; color: #FFFFFF; padding: 5px 5px 5px 5px;">Escribe tu texto aqui</span></font></p>

Un texto resaltado es aquel que se decora con un color semi-transparente, produciendo el mismo efecto que un resaltador en un texto escrito en el papel.

Código de ejemplo para un resaltado amarillo:

<span style="background-color: #FFFF00">Escribe tu texto aqui</span>


Efectos al pasar el ratón

Los efectos al pasar el ratón provocan una acción que se produce cuando el usuario detiene el cursor sobre la sección de texto que se modifica por el comando "<span título>". Al pasar el ratón, el texto aparecerá en una caja pequeña justo debajo y un poco por encima del texto normal.

Ejemplo de código:

<span title="Your mouseover text here"><b>Escribe tu texto aqui</b> </span>


Caída del texto

El efecto de caída del texto hace que los bloques de texto se desplacen hacia abajo en una página web. El código "<marquee direction>" se utiliza para este efecto y se puede aplicar a través de una página entera o sólo en una pequeña sección.

Por ejemplo:

<marquee direction="down" behavior="scroll" scrollamount="3" style="position:absolute; left:150px; top:150px"><font color="#000000" size="3" >Escribe tu texto aqui</font></marquee>


Efectos especiales de texto en HTML

Los efectos especiales de HTML hacen que el texto parezca y se mueva de manera inusual.

Letra capital

En el procesador de textos, una letra capital agranda la primera letra de un párrafo. Puedes reproducir este efecto en tus páginas web usando HTML y CSS. Utiliza la propiedad "float" para alinear la letra capital y "font-size" para aumentar el tamaño en relación al resto del texto del párrafo. Escribe el carácter en las etiquetas de "span".

Por ejemplo:

<p><span style="float:left; width:0.7em; line-height:80%; font-size:350%">T</span>

Este es el ejemplo de un efecto de letra capital empleando la propiedad "float".


Desplazamiento de texto

El efecto de marquesina en HTML hace hace que el texto se mueva de diferentes maneras. La "direction" en el código indica al navegador hacia donde se moverá el texto: arriba, abajo, izquierda o derecha. El atributo "behavior" describe cómo se moverá el texto: "Scroll" hace que el texto se mueva más allá del área visible de marquesina y luego vuelva a iniciar; "slide" hace que se detenga al final de la marquesina; "alternate" le dice al texto que se mueva de un lado al otro. Utiliza "scrollamount" para determinar la velocidad; entre mayor sea el número, mayor será la velocidad de desplazamiento.

Por ejemplo:

<div style="width:300px"><marquee behavior="alternate" direction="up" "scrollamount="3" bgcolor="yellow">Scrolling text up!</marquee></div>


Encabezado bajo el ratón

La etiqueta span en HTML hace que un texto aparezca en el área donde se inserta. Por ejemplo, si deseas agregar un resumen a un párrafo, inserta el texto utilizando la etiqueta span.

Por ejemplo:

<p span title="Resumen de capítulo 1">Paragraph text here.</p>


Photoshop: efectos de lavado y desgastado

Crear señales viejas y oxidadas es algo que puede lograrse en Photoshop usando varios efectos de filtrado de imagen.

Efectos de oxidado antiguo

Los efectos de oxidado antiguo se pueden crear usando los filtros por defecto de Photoshop. Los filtros más comunes aplicados para crear este efecto son "Mezzotint", "Polvo y arañazos" y "Grano". Ve a "Filtro < Pixelar < Mezzotint" y experimenta con Mezzotint hasta quedar satisfecho. Es útil aplicar otro filtro sobre Mezzotint, como "Polvo y arañazos", aunque este filtro se aplica al canal alfa en vez de a la capa actual. Aplica este filtro eligiendo primero el canal alfa en la paleta de canales y después yendo a "Filtro < Ruido < Polvo y arañazos". Probar cuántas veces puedes aplicar estos filtros te ayudará a conseguir efectos de oxidado y erosionado.


Exceso de afilado para un aspecto antiguo

Aplicar otro de los filtros por defecto de Photoshop, "Afilar", también te ayudará a crear un efecto erosionado y envejecido. Este filtro va mejor en fondos donde intentas añadir texturas. Aplica este filtro varias veces para obtener el efecto erosionado, deslizando el controlador a los números más altos cada vez. El filtro de afilado se localiza yendo a "Filtros < Afilar < Afilado hábil". Haz duplicados de la capa afilada, disminuye la opacidad al 70% (usando el ajuste de opacidad de la paleta de capas) y posiciona las capas adicionales aleatoriamente sobre la original para obtener un efecto aun más erosionado.


Efectos de desgastado creados a mano con herramientas de borrado, quemado y brocha

Puedes pintar literalmente tus efectos de desgastado en Photoshop usando tres herramientas disponibles: la brocha, el borrador y la herramienta de quemado. Usa la brocha para controlar el diámetro de los efectos que aplicas. Borra aleatoriamente los bordes de tu imagen. Usa la herramienta de quemado (localizada abajo en la herramienta de elusión y quemado) para quemar los bordes de las imágenes donde ya has borrado. Esto las hará parecer como si estuvieran quemadas o parcialmente destruidas en un incendio tiempo atrás. Funciona bien en pergamino, papel o para fondos de tipo madera.


Filtros de tercera parte

Usar filtros de tercera parte que deben pagarse por separado puede ser un atajo para conseguir unos efectos de erosionado y avejentado realistas. En vez de pasar tiempo aplicando filtros múltiples veces y dar brochazos en tus efectos a mano, simplifica este proceso presionando sólo un botón. Hay un número de filtros en el mercado para crear efectos de avejentado. Algunos de los filtros más comunes para esto son Mistro Retro (filtros de lavado a máquina), Filter Forge y AutoFX's Dreamsuite.