0
• Colocar un fondo de color acorde a la imagen o logotipo• Que se puedan leer bien los textos. Los fondos están para hacer...
• Tener cuidado con las distintas definiciones de pantalla. Esimportante saber que un visitante puede acceder a una página...
• Elemento gráfico que identifica a unapersona, empresa, institución o producto. Unlogo exitoso debe ser:• LEGIBLE en todo...
LOGOTIPOS• No utiliza unaimagen figurativa sebasa en su tipografía.Su ventaja: lacapacidad decomprensión.ISOTIPOS• Sólo ut...
• Imagen o animación situado en una página webque contiene, en la mayoría de los casos,publicidad. Se crean a partir de im...
• Capturar la atención rápidamente utilizando adecuadamente texto, colores y gráficas• Enfatizar en el tema del sitio web•...
• Se define con las dimensiones en píxeles de la matriz ocuadrícula. Si una imagen está formada por una matrizde 800 colum...
Esta imagen tiene unas dimensiones de 400x261 píxeles, un total de104.400 píxeles y 0,104 Megapíxeles.
• El tamaño es la cantidad de información quecontiene, medida en bits, Bytes, Mega, Giga, Tera.• Es conveniente aclarar qu...
Tabla de tamañosNombre Abreviatura Tamaño Tamaño en Bytesbit b 1 bit (0 o 1)Byte B 8 bits 1KiloByte KB 1.024 Bytes 1.024Me...
FORMATO JPEGDIMENSIÓN 259 X 194TAMAÑO O PESO 25 KBFORMATO GIFDIMENSIÓN 267 X 300TAMAÑO O PESO 17.4 KB
Estas imágenes tiene las siguientesdimensiones:Fantasma preocupado: 1152 x 864Corazones 1024 x 768Estrellas 1140 x 1080Cal...
WEBGRAFIA• http://es.wikipedia.org/wiki/Logotipo• http://es.wix.com/blog/2012/05/tips-html5-como-crear-encabezados-grandes...
Logos, banners y fondos para sitios web
Logos, banners y fondos para sitios web
Logos, banners y fondos para sitios web
Logos, banners y fondos para sitios web
Logos, banners y fondos para sitios web
Logos, banners y fondos para sitios web
Logos, banners y fondos para sitios web
Logos, banners y fondos para sitios web
Logos, banners y fondos para sitios web
Logos, banners y fondos para sitios web
Upcoming SlideShare
Loading in...5
×

Logos, banners y fondos para sitios web

1,194

Published on

Presentación para estudiantes

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,194
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Logos, banners y fondos para sitios web"

  1. 1. • Colocar un fondo de color acorde a la imagen o logotipo• Que se puedan leer bien los textos. Los fondos están para hacermás vistosa la página, no para molestar en la lectura de los textospor lo tanto es importante que las combinaciones de color deltexto y del fondo sean agradables, ya que hay ciertos colores que,aunque contrastan bien, provocan unas combinaciones difíciles deleer.• Los fondos de imagen de color homogéneo. Si utilizamos un fondode imagen, tenemos que procurar que en la imagen se utilicencolores de una misma gama. Si el texto es claro no contrastará biencon las partes del fondo que también son claras. Igual pasará sicolocamos el texto con un color oscuro, que no contrastará bien conlas partes oscuras del fondo.
  2. 2. • Tener cuidado con las distintas definiciones de pantalla. Esimportante saber que un visitante puede acceder a una página conun tamaño de ventana variable. A veces un fondo se comportabien con una definición dada, pero no con otras mayores. Ocurremuy a menudo que se utiliza un fondo y se ve el resultado en unaventana de 800x600 ó 1024x768. Luego accede una persona conuna definición de 1280x1024, o superior, y ve la páginaincorrectamente porque se realiza un mosaico con el fondo que nohabía tenido en cuenta el desarrollador.•Hacer un fondo suficientemente grande . Es importante que eltamaño del archivo que vamos a utilizar como fondo tenga uncierto tamaño. Si utilizamos como fondo una imagen de unospocos pixeles, nuestro ordenador trabajará mucho para crear elmosaico repitiendo cientos o miles de veces esa imagen. Sinembargo, si el fondo hubiese sido un poco más grande, pararealizar el mosaico hubiera trabajado mucho menos.
  3. 3. • Elemento gráfico que identifica a unapersona, empresa, institución o producto. Unlogo exitoso debe ser:• LEGIBLE en todo tipo de tamaños• REPRODUCIBLE: sin importar las condicionesmateriales• ESCALABLE: al tamaño deseado• DISTINGUIBLE: no debe dar lugar aconfusiones• MEMORABLE que impacte y no se olvide.
  4. 4. LOGOTIPOS• No utiliza unaimagen figurativa sebasa en su tipografía.Su ventaja: lacapacidad decomprensión.ISOTIPOS• Sólo utiliza unaimagen figurativa oícono para transmitirsu mensaje. Laventaja es muy fácilde recordar.ISOLOGOTIPOS• Combina los dosanteriores. Laventaja es que tieneun increíble poder deprecisión ya quesuma la capacidadexpresiva de amboselementos ícono ytipografía.
  5. 5. • Imagen o animación situado en una página webque contiene, en la mayoría de los casos,publicidad. Se crean a partir de imágenes enformato JPEG, GIF o FLASH y suelen ser muyllamativos, con colores y animaciones que llamanla atención del internauta.• Un encabezado es la sección que está situada enla parte superior de tu página web. Algunosencabezados aparecen sobre el menú denavegación, pero también es común colocarlosdirectamente debajo del menú.
  6. 6. • 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 sitioque los exponga.• En Kb no deben tener más de 10 kb de tamaño ya que un banner demasiado grandetardará mucho en cargarse y no será visualizado por el visitante.• El uso de colore brillantes es más apropiado que colores oscuros. El negro hademostrado 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.
  7. 7. • Se define con las dimensiones en píxeles de la matriz ocuadrícula. Si una imagen está formada por una matrizde 800 columnas por 500 filas, tiene entonces untamaño de 800 x 500 píxeles.• Se suele utilizar el término “megapíxel” para simplificarlas cifras: 1 megapíxel equivale a 1 millón de píxeles. Suproblema es que es una medida que no da informaciónacerca de sus dimensiones. Una imagen de 1000x400tiene el mismo número de píxeles (400,000) que unade 800x500 pero, evidentemente, sus dimensiones sondiferentes.
  8. 8. Esta imagen tiene unas dimensiones de 400x261 píxeles, un total de104.400 píxeles y 0,104 Megapíxeles.
  9. 9. • El tamaño es la cantidad de información quecontiene, 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 sutamaño de archivo: 50 Bytes. Si contuviera 50.000Bytes, se suelen emplear múltiplos para afirmarsu tamaño con más comodidad, que son el"KiloByte", el "MegaByte", el "GigaByte" o el"TeraByte". Con la siguiente tabla quedarán másclaras las equivalencias entre ellos:
  10. 10. Tabla de tamañosNombre Abreviatura Tamaño Tamaño en Bytesbit b 1 bit (0 o 1)Byte B 8 bits 1KiloByte KB 1.024 Bytes 1.024MegaByte MB 1.024 KBytes 1.048.576GigaByte GB 1.024 MBytes 1.073 millones
  11. 11. FORMATO JPEGDIMENSIÓN 259 X 194TAMAÑO O PESO 25 KBFORMATO GIFDIMENSIÓN 267 X 300TAMAÑO O PESO 17.4 KB
  12. 12. Estas imágenes tiene las siguientesdimensiones:Fantasma preocupado: 1152 x 864Corazones 1024 x 768Estrellas 1140 x 1080Calcula el total de píxeles ymegapixeles que contiene cadauna
  13. 13. WEBGRAFIA• http://es.wikipedia.org/wiki/Logotipo• http://es.wix.com/blog/2012/05/tips-html5-como-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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×