PhotoShop en español: Layouts para Tablas y Webs

 

Pincha la imagen de la izquierda para ver el resultado final:

Vamos a elaborar un  Layout o diseño  para tabla de foros o fondo de páginas Webs. La imagen es el trabajo final aplicado a una Web.

 

 

1. Abrir una imagen de 800x 1000 y rellenar con color blanco (ffffff) o algún otro color de tu gusto, la ventaja de ser unicolor, es que se adapta a cualquier tamaño de pantalla. Vamos a abrir la muñeca que elaboramos en el tutorial anterior y la arrastramos a la nueva imagen.

2.  Abrimos una nueva capa sobre el fondo blanco, con la Herramienta de Marco o fila única vamos a trazar dos líneas paralelas que formen dos líneas decorativas , vamos a Selección/Modificar/Expandir:

En mi caso rellené con el color 38285f, que luego voy a usar para la letra y otros elementos que quiera incorporar a una Web, si ese es el uso que le daré. Luego con la Herramienta de mover voy a pinchar el borde hasta que quede recto y aplicaré Deformar=Elevar al 20%:

3. Seleccionaremos unos pinceles para decorar el espacio superior e inferior; en mi caso en Brusheezy, uno de los lugares que recomendé en la lección anterior, conseguí este set que me gustó mucho y puedes ver  aquí. Fui agregando capas y usando pinceles a los que pinchaba varias veces hasta lograr un color bien fuerte, cada motivo lo hice en la parte superior e inferior, variando los tamaños, a todos le fui poniendo una sombra paralela, menos a la flor negra; mi resultado ha sido este:

4. Vamos a aplicar un texto con una letra sencilla, luego Deformar texto/Ojo de pez con curva al 50%, concluimos aplicando una Sombra paralela:

5. Cuando se cargan grandes imágenes en una  Web tarda más en abrir la página, una solución a este problema es dividir la imagen en varias partes, así al descargar cada una de las partes, tarda menos que una sola de gran tamaño. PhotoShop tiene una Herramienta que permite dividir con precisión que es Herramienta Sector. Vamos a activarla y pulsamos de arriba a abajo el sector que queremos dividir, hasta tener tres sectores como en la imagen y es muy importante que el centro quede libre de dibujos o letras:

6. Ahora vamos a guardar usando la opción Archivo/Guardar para Webs y dispositivos:

Seleccionamos Optimizada, Gif y pulsamos guardar:

Allí el Tipo= HTML e imágenes, Ajustes= Ajustes por defecto, Sectores= Todos los sectores

Puedes usar el layout tanto para tablas, como páginas Webs, ya de hecho si cuelgas en un alojamiento los dos archivos de la imagen, la carpeta completa y el .html; tienes la base de una Web, puedes ver la mía colgada aquí:

Como ejercicio vamos a hacer una tabla:

Pinchando aquí tienes la guía para hacerlo en Gabito Grupos .

Aquí tienes una guía para hacerlo en un foro:

A- Insertamos una tabla pulsando en el ícono que muestro en la imagen:

B. Vamos a poner en el general 1 Columna y 3 Filas, dejamos en 0 el tamaño del borde, Relleno de celda =0 y Espaciado de celda =0; porque necesitamos que no se vean divisiones en la tabla. Colocamos en imagen de fondo el enlace de la imagen del centro que colgamos en nuestro alojamiento, en nuestro caso usamos Photobucket :

Nos va a quedar todo así,   luego pulsamos en Insertar:

C- Van a quedar tres celdas pequeñitas...en la de arriba se pega la imagen superior, en la de abajo la inferior en el centro no pegamos nada; si pegamos en el centro algo no podemos escribir porque es una imagen, en cambio colocamos como fondo el color blanco y podremos escribir lo que queremos

D. Ahora vamos a colocar el texto en la tabla; puede ser en el cetro o la la izquierda, si lo colocas a la izquierda es bueno colocar un espaciado para que no quede pegado al borde, en Gabito se denomina Sangría y vamos a pinchar en el icono que te muestro con la flecha:

E. Recuerda poner título a tu mensaje y lo publicas pinchando en Enviar: Sí observas algún defecto puedes Eliminar el mensaje y lo corriges.

Este mensaje lo puedes copiar y pegar en un mail, puedes borrar el poema y escribir un mail.

Geisa 2008