FONDOS, LOGOS Y BANNERS PARA SITIOS WEB

GRADOS DECIMOS

ROCIO PAREDES – MIREYA CABRERA Docentes I.E.M. María Goretti

• Colocar un fondo de color acorde a la imagen o logotipo• Que se puedan leer bien los textos. Los fondos están para hacer

más vistosa la página, no para molestar en la lectura de los textos por lo tanto es importante que las combinaciones de color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien, provocan unas combinaciones difíciles de leer.

• Los fondos de imagen de color homogéneo. Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una misma gama. Si el texto es claro no contrastará bien con las partes del fondo que también son claras. Igual pasará si colocamos el texto con un color oscuro, que no contrastará bien con las partes oscuras del fondo.

FONDOS

• Tener cuidado con las distintas definiciones de pantalla. Es importante saber que un visitante puede acceder a una página con un tamaño de ventana variable. A veces un fondo se comporta bien con una definición dada, pero no con otras mayores. Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de 800x600 ó 1024x768. Luego accede una persona con una definición de 1280x1024, o superior, y ve la página incorrectamente porque se realiza un mosaico con el fondo que no había tenido en cuenta el desarrollador. •Hacer un fondo suficientemente grande . Es importante que el tamaño del archivo que vamos a utilizar como fondo tenga un cierto tamaño. Si utilizamos como fondo una imagen de unos pocos pixeles, nuestro ordenador trabajará mucho para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco más grande, para realizar el mosaico hubiera trabajado mucho menos.

• Elemento gráfico que identifica a una persona, empresa, institución o producto. Un logo exitoso debe ser:

• LEGIBLE en todo tipo de tamaños• REPRODUCIBLE: sin importar las condiciones

materiales• ESCALABLE: al tamaño deseado• DISTINGUIBLE: no debe dar lugar a

confusiones• MEMORABLE que impacte y no se olvide.

LOGOTIPOS

LOGOTIPOS• No utiliza una

imagen figurativa se basa en su tipografía. Su ventaja: la capacidad de comprensión.

ISOTIPOS• Sólo utiliza una

imagen figurativa o ícono para transmitir su mensaje. La ventaja es muy fácil de recordar.

ISOLOGOTIPOS• Combina los dos

anteriores. La ventaja es que tiene un increíble poder de precisión ya que suma la capacidad expresiva de ambos elementos ícono y tipografía.

TIPOS DE LOGOS

LOGOTIPOS FAMOSOS

• Imagen o animación situado en una página web que contiene, en la mayoría de los casos, publicidad. Se crean a partir de imágenes en formato JPEG, GIF o FLASH y suelen ser muy llamativos, con colores y animaciones que llaman la atención del internauta.

• Un encabezado es la sección que está situada en la parte superior de tu página web. Algunos encabezados aparecen sobre el menú de navegación, pero también es común colocarlos directamente debajo del menú.

BANNERS - ENCABEZADOS

• Capturar la atención rápidamente utilizando adecuadamente texto, colores y gráficas• Enfatizar en el tema del sitio web• Preferir los banners GIF animados sobre los estáticos• El uso de frases que impliquen curiosidad, humor, miedo o preguntas. (Ejemplo:

Sabía usted que…)• Incluir algún logo, dirección web o identificación gráfica de nuestro sitio• En cuanto a tamaño en píxeles los banners estándares son de 468 x 60 pixeles,

existen también mini banners y banners de otras dimensiones, dependiendo del sitio que los exponga.

• En Kb no deben tener más de 10 kb de tamaño ya que un banner demasiado grande tardará mucho en cargarse y no será visualizado por el visitante.

• El uso de colore brillantes es más apropiado que colores oscuros. El negro ha demostrado ser menos efectivo. Entre los más recomendable está el azul, amarillo, naranja y verde.

• Se debe aplicar colores que contrasten para que pueda leerse los mensajes o títulos• Aplicar mucha creatividad.

CONSEJOS PARA DISEÑO DE BANNERS

SABÍAS QUE….

• Se define con las dimensiones en píxeles de la matriz o cuadrícula. Si una imagen está formada por una matriz de 800 columnas por 500 filas, tiene entonces un tamaño de 800 x 500 píxeles.

• Se suele utilizar el término “megapíxel” para simplificar las cifras: 1 megapíxel equivale a 1 millón de píxeles. Su problema es que es una medida que no da información acerca de sus dimensiones. Una imagen de 1000x400 tiene el mismo número de píxeles (400,000) que una de 800x500 pero, evidentemente, sus dimensiones son diferentes.

DIMENSIÓN DE LA IMAGEN

Esta imagen tiene unas dimensiones de 400x261 píxeles, un total de 104.400 píxeles y 0,104 Megapíxeles.

• El tamaño es la cantidad de información que contiene, medida en bits, Bytes, Mega, Giga, Tera.

• Es conveniente aclarar que es usual escribir "bit" con "b" minúscula y "Byte" con mayúscula.

• Si una imagen contiene 50 Bytes, éste es su tamaño de archivo: 50 Bytes. Si contuviera 50.000 Bytes, se suelen emplear múltiplos para afirmar su tamaño con más comodidad, que son el "KiloByte", el "MegaByte", el "GigaByte" o el "TeraByte". Con la siguiente tabla quedarán más claras las equivalencias entre ellos:

TAMAÑO O PESO DE LA IMAGEN

Tabla de tamaños

Nombre Abreviatura Tamaño Tamaño en Bytes

bit b 1 bit (0 o 1)

Byte B 8 bits 1

KiloByte KB 1.024 Bytes 1.024

MegaByte MB 1.024 KBytes 1.048.576

GigaByte GB 1.024 MBytes 1.073 millones

FORMATO JPEGDIMENSIÓN 259 X 194TAMAÑO O PESO 25 KB

FORMATO GIFDIMENSIÓN 267 X 300TAMAÑO O PESO 17.4 KB

Estas imágenes tiene las siguientes dimensiones:

Fantasma preocupado: 1152 x 864Corazones 1024 x 768Estrellas 1140 x 1080

Calcula el total de píxeles y megapixeles que contiene cada

una

WEBGRAFIA

• http://es.wikipedia.org/wiki/Logotipo• http://es.wix.com/blog/2012/05/tips-html5-c

omo-crear-encabezados-grandes/• http://www.google.com.co/search?tbm=isch

&hl=es&source=hp&biw=1366&bih=667&q=fondos+para+web&gbv=2&oq=fondos+para+we&aq=0&aqi=g10&aql=&gs_l=img.1.0.0l10.832.2899.0.5341.14.10.0.4.4.1.270.1269.4j4j2.10.0...0.0.FEiYk-AoTIw

• http://office.microsoft.com/es-hn/powerpoint-help/reducir-el-tamano-de-archivo-de-una-imagen-HA010192200.aspx (Reducir tamaño de imagen)

• http://www.logotipia.com.ar/tipos-de-logotipos-diferentes-tipos-de-logos.asp