Especiales / Diseño de Plantillas para Internet 6

TUTORIALES
DISEÑO DE PLANTILLAS PARA INTERNET 6 (IMAGE READY)

Una vez hechos los cortes, optimizaremos las imágenes que lo requieran, pues las de un solo color regularmente se sustituyen por una celda con fondo del mismo color de la imagen, a estas no las trates si no lo deseas, pues las eliminaremos.
Image Ready nombra automáticamente las imágenes de tu diseño una vez cortadas, sin embargo es preferible que seas tu quien las nombre para poder identificarlas fácilmente en el Editor HTML.  En este caso Ejemplificaremos con la imagen de nuestro Logo "Web Muestra" Toma Slice Select para, como su nombre lo dice, seleccionar este Corte, el #03 de la imagen. Nos indica también que tiene un peso de 5.767K en formato Gif. Selecciona Tipo Imagen y  hemos escogido el Nombre logo.

En el caso de que gustes agregar un Hipervínculo a la imagen hazlo desde URL:  y el tipo de ventana desde Target, en este caso _blank para una Nueva Ventana. Finalmente BG se usa para conjugar tu imagen con algún color de fondo.
En este tutorial sólo usaremos el menú Slice para nombrar nuestras imágenes, el resto lo dejaremos en blanco o como este. 
Mucho facilita el trabajo reconocer las imágenes por el nombre que les diste, por eso recomendamos dar nombres muy claros e identificables.

Una vez que hayas nombrado las imágenes colócate sobre las pestañas Optimize, tanto de Pantalla como Paleta. Utiliza estos valores en todas las imágenes importantes; tan solo 32 colores debido a que nuestro diseño, que tal vez no te diste cuenta, fue preparado con una paleta de colores lista para la Web, lo que nos facilita una alta calidad con pocos colores, podrías usar incluso 16 colores y no sería tan notorio, sin embargo a mi juicio 32 es exacto. Manejamos el formato Gíf por ser un diseño creado con computadora y con poca coloración, sin embargo con un Lossy de 0 para mantener la calidad visual.

Un método Selectivo de color y con Diffusion como método de distribución. El Dither de 100%, que usualmente no es muy usado, a nosotros nos agrada pues preferimos unos cuantos Bytes de sobrepeso que una imagen con marcadas bandas de color y más con esta que es la imagen principal de nuestro diseño.

Presionando en la Barra de Herramientas puedes previsualizar tu Página en el explorador.

Quieres verla a Mayor Tamaño.

Y además de la previsualización nos proporciona los siguientes datos.

Formato de Imágenes: GIF
Dimensiones: 780w x 750h
Tamaño: 20.85K
Imagenes: 35
Valores: Selective, 100% Diffusion Dither, Non-Interlaced, 0% Web Snap
Codigo Fuente: (HTML)

Finalmente hay que guardar la plantilla, pero ahora como HTML e imágenes.
File > Save Optimzed As

Hasta aquí llega "Image Ready" ahora son los editores HTML Front Page 2000 y/o Dreamweaver 4 los encargados de la finalización del tutorial.

 

 Especiales / Diseño de Plantillas para Internet 6 I.R.