SlideShare uma empresa Scribd logo
1 de 23
• 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.
• 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
• 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.
• 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ú.
• 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.
• 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.
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:
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 JPEG
DIMENSIÓN 259 X 194
TAMAÑO O PESO 25 KB
FORMATO GIF
DIMENSIÓN 267 X 300
TAMAÑO O PESO 17.4 KB
Estas imágenes tiene las siguientes
dimensiones:
Fantasma preocupado: 1152 x 864
Corazones 1024 x 768
Estrellas 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-como-crear-
encabezados-grandes/
• http://www.google.com.co/search?tbm=isch&hl=es&sourc
e=hp&biw=1366&bih=667&q=fondos+para+web&gbv=2&o
q=fondos+para+we&aq=0&aqi=g10&aql=&gs_l=img.1.0.0l1
0.832.2899.0.5341.14.10.0.4.4.1.270.1269.4j4j2.10.0...0.0.F
EiYk-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

Mais conteúdo relacionado

Destaque

SEM - Search Engine Marketing / Mercadeo en búscadores
SEM - Search Engine Marketing / Mercadeo en búscadoresSEM - Search Engine Marketing / Mercadeo en búscadores
SEM - Search Engine Marketing / Mercadeo en búscadores
Francisco Berrizbeitia
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5
Gonzalo C.
 
Diagramas de Flujo
Diagramas de FlujoDiagramas de Flujo
Diagramas de Flujo
astaroth97
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño Web
Lorena Guerrero
 

Destaque (20)

Html 5 Guia Didactica
Html 5 Guia DidacticaHtml 5 Guia Didactica
Html 5 Guia Didactica
 
SEM - Search Engine Marketing / Mercadeo en búscadores
SEM - Search Engine Marketing / Mercadeo en búscadoresSEM - Search Engine Marketing / Mercadeo en búscadores
SEM - Search Engine Marketing / Mercadeo en búscadores
 
Crear banners en linea
Crear banners en lineaCrear banners en linea
Crear banners en linea
 
Webmaster
WebmasterWebmaster
Webmaster
 
Problemas de mep
Problemas de mepProblemas de mep
Problemas de mep
 
Tips Desarrollar y Gestionar Banners HTML5
Tips Desarrollar y Gestionar Banners HTML5Tips Desarrollar y Gestionar Banners HTML5
Tips Desarrollar y Gestionar Banners HTML5
 
Html5 para móviles, las reglas no escritas
Html5 para móviles, las reglas no escritasHtml5 para móviles, las reglas no escritas
Html5 para móviles, las reglas no escritas
 
(VAN) Valor Actual Neto (El Salvador)
(VAN) Valor Actual Neto (El Salvador)(VAN) Valor Actual Neto (El Salvador)
(VAN) Valor Actual Neto (El Salvador)
 
Curso de HTML5
Curso de HTML5Curso de HTML5
Curso de HTML5
 
Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1
 
Manual de dreamweaver listo
Manual de dreamweaver listoManual de dreamweaver listo
Manual de dreamweaver listo
 
Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft
Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoftCreación y estilizado de una página en HTML5 - 70-480 certificacion microsoft
Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft
 
Manual paginas web
Manual paginas webManual paginas web
Manual paginas web
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5
 
Todo sobre HTML5
Todo sobre HTML5Todo sobre HTML5
Todo sobre HTML5
 
Maquetación web con html5
Maquetación web con html5Maquetación web con html5
Maquetación web con html5
 
Algoritmos y diagramas de flujo
Algoritmos y diagramas de flujoAlgoritmos y diagramas de flujo
Algoritmos y diagramas de flujo
 
HTML5: empieza hoy
HTML5: empieza hoyHTML5: empieza hoy
HTML5: empieza hoy
 
Diagramas de Flujo
Diagramas de FlujoDiagramas de Flujo
Diagramas de Flujo
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño Web
 

Semelhante a Logos, banners y fondos para sitios web

Consejos Para La Optimizacion De Imagenes En Web
Consejos Para La Optimizacion De Imagenes En WebConsejos Para La Optimizacion De Imagenes En Web
Consejos Para La Optimizacion De Imagenes En Web
grupo90
 
Consejos Para La Optimizacion De Imagenes En Web
Consejos Para La Optimizacion De Imagenes En WebConsejos Para La Optimizacion De Imagenes En Web
Consejos Para La Optimizacion De Imagenes En Web
grupo90
 
Capítulo 5. creación de documentos de promoción de los
Capítulo 5. creación de documentos de promoción de losCapítulo 5. creación de documentos de promoción de los
Capítulo 5. creación de documentos de promoción de los
marangelystorres12
 
Contenido web manejo tipografico
Contenido web   manejo tipograficoContenido web   manejo tipografico
Contenido web manejo tipografico
dorianpatricia
 
Clase 5 imágenes
Clase 5   imágenesClase 5   imágenes
Clase 5 imágenes
ICE
 
Presentación de imagen digital
Presentación de imagen digitalPresentación de imagen digital
Presentación de imagen digital
felolopez99
 

Semelhante a Logos, banners y fondos para sitios web (20)

Curso Diseñando para la Web, parte 2
Curso Diseñando para la Web, parte 2Curso Diseñando para la Web, parte 2
Curso Diseñando para la Web, parte 2
 
G.1.1 arias.arevalo.mariuxi.multimedia
G.1.1 arias.arevalo.mariuxi.multimedia G.1.1 arias.arevalo.mariuxi.multimedia
G.1.1 arias.arevalo.mariuxi.multimedia
 
Formatos de Imagen
Formatos de ImagenFormatos de Imagen
Formatos de Imagen
 
Consejos Para La Optimizacion De Imagenes En Web
Consejos Para La Optimizacion De Imagenes En WebConsejos Para La Optimizacion De Imagenes En Web
Consejos Para La Optimizacion De Imagenes En Web
 
Consejos Para La Optimizacion De Imagenes En Web
Consejos Para La Optimizacion De Imagenes En WebConsejos Para La Optimizacion De Imagenes En Web
Consejos Para La Optimizacion De Imagenes En Web
 
Cómo crear imágenes para el perfil de Twitter
Cómo crear imágenes para el perfil de TwitterCómo crear imágenes para el perfil de Twitter
Cómo crear imágenes para el perfil de Twitter
 
Capítulo 5. creación de documentos de promoción de los
Capítulo 5. creación de documentos de promoción de losCapítulo 5. creación de documentos de promoción de los
Capítulo 5. creación de documentos de promoción de los
 
Introduccion a Photoshop CS4
Introduccion a Photoshop CS4Introduccion a Photoshop CS4
Introduccion a Photoshop CS4
 
Tips de diseño
Tips de diseñoTips de diseño
Tips de diseño
 
Libro diseno
Libro disenoLibro diseno
Libro diseno
 
Curso Básico de Photoshop
Curso Básico de PhotoshopCurso Básico de Photoshop
Curso Básico de Photoshop
 
La Casa De Elena Y Sus Fotolienzos
La Casa De Elena Y Sus Fotolienzos
La Casa De Elena Y Sus Fotolienzos
La Casa De Elena Y Sus Fotolienzos
 
Formatos gráficos
Formatos gráficosFormatos gráficos
Formatos gráficos
 
Contenido web manejo tipografico
Contenido web   manejo tipograficoContenido web   manejo tipografico
Contenido web manejo tipografico
 
Manual curso Edicion. Ikaslan Bizkaia
Manual curso Edicion. Ikaslan BizkaiaManual curso Edicion. Ikaslan Bizkaia
Manual curso Edicion. Ikaslan Bizkaia
 
Clase 5 imágenes
Clase 5   imágenesClase 5   imágenes
Clase 5 imágenes
 
Tema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en htmlTema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en html
 
Presentación de imagen digital
Presentación de imagen digitalPresentación de imagen digital
Presentación de imagen digital
 
Cuestionario
Cuestionario Cuestionario
Cuestionario
 
Actividad 1 Ps
Actividad 1 PsActividad 1 Ps
Actividad 1 Ps
 

Mais de mireyacabreram

Guía nº 4 sistema integral de gestión educativa
Guía nº 4 sistema integral de gestión educativaGuía nº 4 sistema integral de gestión educativa
Guía nº 4 sistema integral de gestión educativa
mireyacabreram
 

Mais de mireyacabreram (20)

Publicidad y productividad
Publicidad y productividadPublicidad y productividad
Publicidad y productividad
 
Ejercicios
EjerciciosEjercicios
Ejercicios
 
Aplicaciones
AplicacionesAplicaciones
Aplicaciones
 
Los logotipos final (1)
Los logotipos final (1)Los logotipos final (1)
Los logotipos final (1)
 
Medios publicitarios novenos
Medios publicitarios novenosMedios publicitarios novenos
Medios publicitarios novenos
 
Taller 2 decimos
Taller 2 decimosTaller 2 decimos
Taller 2 decimos
 
Trabajos estudiantes grados novenos
Trabajos estudiantes grados novenosTrabajos estudiantes grados novenos
Trabajos estudiantes grados novenos
 
Taller 6 diseño publicitario
Taller 6 diseño publicitarioTaller 6 diseño publicitario
Taller 6 diseño publicitario
 
Logotipos
LogotiposLogotipos
Logotipos
 
Medios publicitarios
Medios publicitariosMedios publicitarios
Medios publicitarios
 
Prae
PraePrae
Prae
 
Taller de Google docs
Taller de Google docsTaller de Google docs
Taller de Google docs
 
Mi presentación
Mi presentaciónMi presentación
Mi presentación
 
Guía nº 4 sistema integral de gestión educativa
Guía nº 4 sistema integral de gestión educativaGuía nº 4 sistema integral de gestión educativa
Guía nº 4 sistema integral de gestión educativa
 
Preescolar María Goretti Pasto
Preescolar María Goretti PastoPreescolar María Goretti Pasto
Preescolar María Goretti Pasto
 
Preescolar maría goretti (1)
Preescolar maría goretti (1)Preescolar maría goretti (1)
Preescolar maría goretti (1)
 
The fairy and_shadow
The fairy and_shadowThe fairy and_shadow
The fairy and_shadow
 
Vocabulario de la_vida
Vocabulario de la_vidaVocabulario de la_vida
Vocabulario de la_vida
 
Trabajos estudiantes Grados Décimos
Trabajos estudiantes Grados DécimosTrabajos estudiantes Grados Décimos
Trabajos estudiantes Grados Décimos
 
Padre GUILLERMO DE CASTELLANA
Padre GUILLERMO DE CASTELLANAPadre GUILLERMO DE CASTELLANA
Padre GUILLERMO DE CASTELLANA
 

Último

La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
JonathanCovena1
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Francisco158360
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
El Fortí
 

Último (20)

Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática4    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática4    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
plande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfplande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdf
 
Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptx
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 

Logos, banners y fondos para sitios web

  • 1.
  • 2. • 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.
  • 3. • 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.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8. • 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.
  • 9. 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.
  • 10.
  • 11. • 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ú.
  • 12.
  • 13.
  • 14.
  • 15. • 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.
  • 16.
  • 17. • 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.
  • 18. Esta imagen tiene unas dimensiones de 400x261 píxeles, un total de 104.400 píxeles y 0,104 Megapíxeles.
  • 19. • 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:
  • 20. 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
  • 21. FORMATO JPEG DIMENSIÓN 259 X 194 TAMAÑO O PESO 25 KB FORMATO GIF DIMENSIÓN 267 X 300 TAMAÑO O PESO 17.4 KB
  • 22. Estas imágenes tiene las siguientes dimensiones: Fantasma preocupado: 1152 x 864 Corazones 1024 x 768 Estrellas 1140 x 1080 Calcula el total de píxeles y megapixeles que contiene cada una
  • 23. 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&sourc e=hp&biw=1366&bih=667&q=fondos+para+web&gbv=2&o q=fondos+para+we&aq=0&aqi=g10&aql=&gs_l=img.1.0.0l1 0.832.2899.0.5341.14.10.0.4.4.1.270.1269.4j4j2.10.0...0.0.F EiYk-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