Creación de fondos web con Photoshop

11 de abril de 2004 |

por SantosVZ102203

Este tutorial trata sobre fondos. Hay mucho que decir y hacer sobre fondos o como dicen los gring…backgraund. En esta oportunidad solo trataremos dos aspectos sobre los fondos. Uno es el tipo de fondos para Web, utilizando el criterio de pixcelación que particularmente me agradan mucho junto con los fondos de tablas para Web y el otro como crear fondos Web partiendo de una imagen que nosotros hemos creado.

Bien…, lo primero que vamos hacer es abrir Photoshop y vamos al menú Archivo>Nuevo y abrimos uno de 4 x 4 px y transparente. Aumentamos la imagen el máximo posible (1600%) ya que vamos a trabajar de 1px a 1px, y necesitamos verlo bien.

Con la Herramienta de lápiz y el color de primer plano que indicamos creamos la imagen y después la guardamos con el nombre y con el formato jpeg, gif o el que nos convenga.

Imágenes ampliadas 1600%

Lógicamente tendrás que usarlo en un archivo html para visualizarlo. El resultado final al aplicar el fondo será:

Cambiando el último px de la parte inferior derecha, podemos obtener este otro fondo.

Pondremos varios fondos para que veas y te habitúes al efecto que producen y como se realizan.

Este fondo podría ser de 1 x 4 px.

Este podría ser uno transversal de 5 x 5 px.

De 5 x 5 px, aunque podría ser de 1 x 5 px.

Otro de 5 x 5 px. Para la creación de este tipo de fondos, bien puedes utilizar les Estilos que tengas en tu Photoshop, o bien la Herramienta de degradado. En este enlace podrás ver varios fondos:

ejemplos_fondos_web.html

Para realizar un fondo partiendo de una imagen que tengamos o que crearemos nueva, abrimos Photoshop y nos vamos la menú Archivo>Nuevo y abrimos uno de 200 x 150 px, con fondo blanco.

En este primer caso utilizaremos la Herramienta texto y realizamos un texto para nuestro fondo Web , al que aplicaremos un Estilo de la Paleta Estilos y le aplicaremos una transformación libre, además de modificar la opacidad de la capa, obteniendo la imagen siguiente:

Una vez determinada las características de la imagen nos vamos al menú Filtro >Otros >Desplazamiento y colocamos los valores de la imagen.

El resultado de la aplicación del filtro será la imagen siguiente:

Ahora guardamos la imagen con el nombre para identificarla, con su correspondiente formato para utilizar este fondo con tu Editor Web preferido, y obtendrás el siguiente resultado: santosvz.html

….hasta ahora hemos utilizado como fondo un texto, una imagen de nuestro archivo y nos queda la utilización de una forma personalizada. Así que utilizamos el mismo procedimiento que el punto (10) Archivo>Nuevo y abrimos uno de 200 x 150 px, con fondo blanco. Nos vamos a la Paleta de herramientas y seleccionamos Seleccionamos la forma que nos interese y la aplicamos en nuestro lienzo. Luego nos vamos a Capa >Rasterizar>Forma y le aplicamos un Estilo de la Paleta de Estilos.

Al igual que en el punto (12) aplicamos Filtro>Otros>Desplazamiento y colocamos los valores de la imagen.

El resultado de aplicar el filtro, seria la siguiente imagen:

Procedemos a nombrar la imagen y la guardamos con el formato que nos interese, para posteriormente utilizarla con nuestro Editor Web preferido. Siendo el resultado : hojas.html

Hasta este momento hemos visto dos formas de hacer fondos. Por supuesto que hay muchas mas, pero hay una que particularmente me agrada y es la combinación de un fondo como los que he realizado mediante el sistema de px por px y un degradado. Para ello solo debemos tomar una captura de un fondo , guardar la imagen para después abrirla con Photoshop.

Imaginemos que ya hemos diseñado un fondo, lo aplicamos en un archivo HTML y realizamos una captura mediante la tecla “ImpPaint” o cualquier aplicación para captura y seleccionamos una sección de la captura para utilizarla en nuestro proyecto como fondo con una medida que en este caso he escogido al azar, guardándola como “bg.gif”

Abrimos Photoshop y nos vamos al menú Archivo>Abrir y localizamos la imagen “bg.gif” que seria la siguiente imagen:

(clic sobre la imagen para ampliar)

Con la imagen en nuestra área de trabajo con fondo transparente, nos vamos a la Paleta de herramientas y seleccionamos el color azul como color frontal

El color de fondo no lo tomamos en cuenta, ya que el degradado solo actua con el color frontal y las propiedades del degradado. Debes tomar en cuenta la casilla de Transparencia y tenerla habilitada para que sea efectivo el degradado.

Seleccionamos la herramienta de degradado utilizando en propiedades las opciones siguientes y desplazando el cursor de derecha a izquierda conseguiremos la siguiente imagen:

(clic sobre la imagen para ampliar)

Si modificamos el color frontal a negro, obtendremos la imagen siguiente:

(clic sobre la imagen para ampliar)

Dependiendo de los degradados que utilices podrás conseguir diversos y variados efectos con tu fondo o imagen. Una vez tengas el degradado puedes guardarlo con su nombre de identificación, de forma que se incorpore a la Paleta de degradados y poderlo utilizar posteriormente en otro proyecto. Para guardar el degradado, editarlo o modificarlo solo tienes que hacer clic sobre el indicador de propiedades del degradado. apareciéndote el Editor de degradado, mediante el cual podrás hacer lo que quieras con el degradado, nombrarlo, guardarlo, modificarlo, etc.