Activa JavaScript para disfrutar de los vídeos de la Mediateca.
WebCentro: Diseñar una Cabecera para la web. Paso 4
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Vamos a ver ahora cómo preparar las imágenes que después vamos a incorporar en nuestra
00:00:00
cabecera, pero en lugar de usar Gimp como herramienta de edición de imágenes, vamos
00:00:10
a usar otra herramienta que se llama Pixel Editor y que puede encontrar en internet porque
00:00:16
Es un editor libre en línea, entonces simplemente tengo que tener Flash activado en el navegador
00:00:23
y acceder a esta dirección pixel.com barra editor.
00:00:31
En primer lugar lo que vamos a hacer va a ser redimensionar la imagen del árbol que hemos descargado de Pixabay.
00:00:36
Para ello abro la imagen del árbol que tengo descargada de Pixabay
00:00:42
y en lugar de ajustarle la altura de tener los 460 píxeles me parece que tenía de alto
00:00:48
pues lo que quiero es ponerle una altura de 200 píxeles
00:00:56
para ello me voy a ir a imagen, tamaño de imagen y veo, bueno eran 436 de altura
00:00:59
pues le quiero poner 200 de altura
00:01:06
como he dicho restringir proporciones pues ya automáticamente me ajusta la anchura
00:01:10
De manera que al redimensionar no se me deforma la imagen, mantiene la relación ancho-alto.
00:01:16
Simplemente tengo que guardar, que lo que voy a hacer va a ser guardar como lo voy a poner un nombre que va a ser árbol, por ejemplo como png.
00:01:23
Dejo la carpeta aquí y ya estaría, ya tengo mi imagen redimensionada para ajustarla a mi cabecera.
00:01:37
Ahora vamos con la imagen de los puntos de colores que tiene un fondo blanco y lo que yo quiero hacer es quitarle ese fondo blanco y dejarla con fondo transparente.
00:01:46
Bueno, pues simplemente aquí tengo mi imagen, puntos de colores, bien, lo primero veo que la capa está bloqueada para no modificarla, le doy aquí doble clic, ya me lo está diciendo, para desbloquear esta capa porque lo que voy a hacer va a ser modificarla, quitarle este fondo blanco.
00:02:00
Bien, vamos a usar esta herramienta que es la varita mágica
00:02:21
La varita, simplemente si yo la pongo encima de mi imagen y selecciono cualquier punto del fondo blanco
00:02:25
Lo que hace la varita es seleccionarme todo ese fondo blanco de golpe
00:02:32
Y ahora ya puedo pulsar la tecla suprimir y veo que me ha eliminado ese fondo blanco
00:02:36
Y me lo ha transformado en un fondo transparente
00:02:43
Veo los cuadraditos de fondo transparente
00:02:46
De nuevo, simplemente tengo que guardar y puedo poner puntos de colores transparentes y asegurarme de que lo guardo como PNG para que conserve la transparencia.
00:02:49
Si mi imagen es un JPG, no, al guardarlo me meterá automáticamente el fondo blanco.
00:03:03
No voy a poder tener transparencia, por eso es importante elegir el formato PNG.
00:03:10
Muy bien, y ahora ya lo que me faltaría sería crear una nueva imagen que va a ser la imagen de cabecera. Voy a decirle que de ancho sean 1300, que es lo que venimos poniendo, de altura 200 píxeles y además que tenga fondo transparente.
00:03:15
Bien, ya tengo aquí el esquema de lo que será la cabecera, ahora tengo que abrir igual que tengo aquí, abrir estas dos imágenes y en este caso lo que voy a hacer es en el menú capa, abrir imagen como capa y lo que voy a hacer va a ser coger los puntos de colores transparentes y veo que me añade una capa 1 aquí,
00:03:35
que yo puedo perfectamente, si tengo aquí mi herramienta mover, pulso encima y puedo desplazarla hacia un lado o hacia otro.
00:04:01
Bien, veo que aquí tengo un 46%, yo puedo ponerme aquí un 100% y estaría viendo esto más grande.
00:04:11
De acuerdo, voy a hacer esta ventana más grande y así mejora la idea de cómo va a quedar.
00:04:21
entonces bueno, muevo la capa como yo quiera
00:04:28
ahora aquí en la zona de la derecha
00:04:32
pues de nuevo capa, abrir imagen como capa
00:04:34
y selecciono la del árbol
00:04:39
que ya he redimensionado a 200 píxeles de altura
00:04:41
bien, la sitúo aquí a la derecha
00:04:44
como más me interese
00:04:48
bien, aquí un poquito más para acá
00:04:53
y ahora voy a ajustar un poquito el tamaño porque el 100% es demasiado grande
00:04:56
vamos a ponerle un 50% para hacerme a la idea más o menos de cómo está quedando mi cabecera
00:05:02
ahora lo siguiente que me faltaría sería incluir este texto
00:05:08
centro público mi colegio
00:05:13
y para eso uso esta herramienta que es la de texto
00:05:15
la selecciono, pincho aquí
00:05:19
y aquí ya elijo
00:05:22
pues por ejemplo el tipo de letra
00:05:24
que quiero
00:05:26
que es por ejemplo
00:05:28
esta, la semi light
00:05:29
y voy a escribir
00:05:31
centro
00:05:36
público
00:05:36
¿vale? puedo ajustar
00:05:39
el color por ejemplo para que no sea
00:05:42
para que no sea
00:05:44
ese negro, puedo coger
00:05:46
un color así más grisáceo
00:05:48
¿vale? y entonces sería
00:05:50
tendría ese color y luego también puedo ajustar el tamaño, esto es demasiado grande, vamos
00:05:53
a ajustarle por ejemplo un tamaño de 70, pues puede quedar bien. Voy a ponerle un color
00:06:01
un poquito más claro de gris, porque así un poquito más clarito, para que quede así
00:06:08
mejor. Bien, ahora lo que tenemos que poner, bueno este texto yo lo puedo mover como quiera
00:06:18
y ahora voy a escribir el texto mi colegio
00:06:28
que es lo que me faltaría
00:06:31
pincho aquí, escribo mi colegio
00:06:33
es el estilo de fuente
00:06:38
le voy a poner negrita
00:06:42
un poquito de negrita
00:06:44
y le voy a poner un poquito más de tamaño
00:06:45
vamos a ponerle 90 por ejemplo
00:06:51
y de nuevo vamos a cambiarle el color
00:06:54
El color nos lo podríamos haber anotado para que fuera exactamente el mismo en los dos textos o bien haberlo seleccionado fuera. Aquí tenemos seis huecos para dejar colores preseleccionados y luego después usarlos en donde queramos.
00:06:57
Bueno, selecciono la capa centro público para desplazarla un poquito, selecciono la capa de mi colegio para desplazarla un poquito y ahora ya lo que me quedaría sería guardar.
00:07:16
Bien, el formato JPG no me vale porque si uso JPG veo que me pone un fondo blanco.
00:07:26
Voy a seleccionar como formato PNG transparente, veo que ya aquí me está representando el
00:07:36
fondo transparente, voy a llamarlo cabecera transparente y nada, lo guardo aquí en esta
00:07:42
carpeta, guardar y ya estaría, ya tengo mi imagen.
00:07:52
Pero ya solamente me quedaría entrar aquí al diseñador web y subir la imagen de cabecera que acabo de diseñar.
00:07:56
Y eso es todo.
00:08:06
- Subido por:
- tic.ismie
- Licencia:
- Reconocimiento - Compartir igual
- Visualizaciones:
- 182
- Fecha:
- 24 de febrero de 2019 - 21:10
- Visibilidad:
- URL
- Centro:
- Sin centro asignado
- Duración:
- 08′ 17″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 312.97 MBytes