Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

WebCentro: Diseñar una Cabecera para la web. Paso 2

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 24 de febrero de 2019 por tic.ismie

252 visualizaciones

Más información Transcripción

Descargar la transcripción

muy bien pues vamos a diseñar esta imagen esta imagen si nos fijamos se 00:00:00
compone de tres partes la parte de la izquierda tengo una imagen de puntos que 00:00:12
puede ser perfectamente el logo de de mi centro tiene una zona central donde 00:00:17
tengo un texto donde recoge el nombre de mi centro y una imagen aquí a la 00:00:22
derecha. Entonces para configurar esta imagen de cabecera lo que vamos a ir 00:00:27
consiguiendo son estas dos imágenes que forman parte de ella y para ello voy a usar un banco 00:00:33
de recursos libres que es Pixabay, un banco de imágenes. Voy a buscar esta imagen de 00:00:44
aquí, entonces voy a buscar por ejemplo árbol. Como hemos dicho que me interesa el fondo 00:01:00
transparente para mi cabecera, pues yo aquí en Pixabay tengo opciones como por ejemplo 00:01:08
esta de color, elegir que tenga un fondo transparente y entonces lo que me ofrece ya son imágenes 00:01:13
que puedo incorporar perfectamente en mi cabecera. También puedo incluso elegir categorías, 00:01:18
por ejemplo educación y bueno pues aquí veo la imagen que estoy buscando, esta imagen me gusta, es interesante, me parece que puede quedar bien 00:01:24
y así que me aseguro de la licencia que tiene esta imagen, que ya veo que es una licencia Pixabay, si entro aquí a ver el detalle veo que puedo usarla perfectamente 00:01:35
sin ningún tipo de restricción, entonces bueno pues la voy a descargar, voy a descargar el tamaño más pequeño que me ofrece. 00:01:45
Bien, ya tengo mi imagen descargada, la tengo aquí en descargas, tengo mi imagen descargada 00:01:54
y ahora lo que voy a hacer va a ser ajustarla al tamaño de altura, es una imagen muy grande, 00:02:03
ya hemos visto que tiene un tamaño, pues la que he descargado tiene un tamaño de 640 x 436 píxeles, 00:02:09
pero yo realmente mi cabecera no va a tener más allá de 200 píxeles de altura. 00:02:19
entonces lo que tengo que hacer es redimensionar esta imagen 00:02:23
para ello voy a usar el programa de manipulación de imágenes GIMP 00:02:28
con el que voy a diseñar realmente toda la cabecera 00:02:33
simplemente arrastro aquí la imagen que acabo de descargar de Pixabay 00:02:37
y ya estoy viendo aquí la imagen que he descargado 00:02:45
Entonces hemos dicho que vamos a ajustarla a una altura máxima de 200 píxeles, entonces simplemente me voy a imagen, escalar imagen y de altura le voy a poner 200 píxeles, el ancho ya se me ajusta automáticamente y le voy a decir escalar. 00:02:50
escalar. Como he elegido en Pixabay las imágenes con fondo transparente, pues estos cuadraditos 00:03:09
de aquí lo que me están diciendo es justamente eso, que el fondo es transparente de esta 00:03:14
imagen. Simplemente ahora yo ya tendría que exportar o sobreescribir como yo quiera la 00:03:19
imagen y ya la tendría lista para usar en mi cabecera. Bueno, vamos ahora a por la otra 00:03:28
imagen es un logo que me han pasado del centro y resulta que 00:03:37
me lo han pasado pero resulta que tiene el fondo blanco, que no 00:03:45
tiene fondo transparente y hemos dicho que me interesa que tenga el fondo 00:03:48
transparente. Pues en estas imágenes que tienen así el fondo tan 00:03:53
claramente definido es muy fácil realmente eliminarlo con GIMP. Yo tengo 00:03:57
ya mi imagen abierta con GIMP y puedo usar por ejemplo esta herramienta de aquí que es selección 00:04:02
difusa, seleccionar una región contigua basándose en el color, pues lo que hago es que pulso aquí en 00:04:08
una de las zonas blancas y veo que me ha seleccionado, realmente si yo esto lo hago más 00:04:14
grande se aprecia mejor, veo que me ha seleccionado toda la zona blanca, si simplemente aquí pulso el 00:04:20
botón de suprimir 00:04:28
realmente estaré quitando 00:04:30
todo 00:04:33
voy a seleccionar nada 00:04:35
estaré quitando todo ese fondo 00:04:37
blanco que tiene 00:04:39
mi imagen y por lo tanto ya 00:04:41
pues puedo usarla 00:04:43
lo que hago aquí es de nuevo 00:04:44
sobrescribir por ejemplo 00:04:47
o exportar como 00:04:51
y cambiarle el nombre 00:04:53
y ya tendría mi logo 00:04:54
preparado 00:04:57
¡Gracias! 00:04:58
Subido por:
tic.ismie
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
252
Fecha:
24 de febrero de 2019 - 21:07
Visibilidad:
URL
Centro:
Sin centro asignado
Duración:
05′ 09″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
182.34 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid