Cómo crear los efectos de transparencia para nuestra web.

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0

 

Las últimas tendencias que vemos en diseño web decantan al uso masivo de diferentes efectos de transparencia para menús y barras de herramientas. Actualmente los programas de diseño permiten el uso de ese recurso gráfico sin complicar demasiado al programador.

La última virguería que hemos visto en diseño de transparencias y efectos de luz  es en los menús de Windows 7 (fig. 1). Este abre un nuevo concepto de diseño interactivo.

 fig1 (fig. 1)

 

A continuación vamos a explicar cómo hacer una simulación de transparencia para que no nos complique su posterior programación.

Paso 1. Abrimos un documento nuevo. (fig.2)

paso_1    (fig.2)

 

Paso 2. Nos ubicamos encima el menú de capas y en la capa Fondo abrimos un efecto (fx) llamado: Superposición de degradado (fig.3).

pasow_2   (fig.3)

 

 

Paso 3. Hacemos un degradado dónde solo ponemos dos colores de la misma gama cromática, uno un poco más oscuro que el otro. Es mejor usar colores oscuros para que la transparencia sea más real (fig. 4).

pasow_3    (fig.4 )

 

 

Paso 4. Con la herramienta de rectángulo redondeado creamos una forma con las dimensiones que queramos. Podemos escoger el radio de las esquinas con el menú de información que aparece arriba (fig. 5).

pasow_4   (fig. 5)

 

Paso 5. Incorporamos color dentro de la figura. Pinchamos en el recuadro del color que aparece en la capa de la figura seleccionada i se abre un menú donde podemos escoger un color muy parecido al del fondo pero un poco más claro (fig. 6).

pasow_5   (fig. 6)

 

 

Paso 6. Abrimos el menú de efectos fx y ponemos un efecto de Trazo. Abrimos el rectángulo para seleccionar el color y cogemos un color del mismo tono pero un poco más claro.

 pasow_6 (fig. 7)

 

Paso 7. Finalmente añadimos otro efecto fx llamado Resplandor interior. Cogemos un color similar al que hemos puesto para el trazo y extendemos hasta que más o menos quede como la (fig. 8). 
pasow_7   (fig. 8)

 

 

Paso 8. Para acabar esta es una muestra del resultado final una vez trabajado. Este es un ejemplo para hacer una simulación de transparencia sin complicar la programación. (fig. 9)

 pasow_8 (fig. 9)

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0
<< Post Anterior
Post Siguiente >>

Leave A Response

* Denotes Required Field