Saltar navegación

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

Logos con fondo transparente

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 21 de octubre de 2017 por Francisca G.

528 visualizaciones

Más información Transcripción

Descargar la transcripción

Hola, vamos a ver cómo solucionar un problema que nos estamos encontrando 00:00:00
cuando diseñamos nuestra cabecera para la clase de prácticas. 00:00:04
Fijaos en este caso, tal cual se pide en la tarea, 00:00:09
yo aquí he seleccionado un logo, que es la imagen de unas flores que me han parecido así bonitas, 00:00:13
y luego he diseñado una cabecera con el tamaño que me ha parecido adecuado, 00:00:20
he incorporado un texto con una sombra 00:00:25
y este es el resultado 00:00:28
entonces a la hora de colocar esta cabecera 00:00:31
en mi clase de prácticas 00:00:35
veo que me queda de esta manera 00:00:38
¿qué es lo que sucede? 00:00:41
la cabecera por esta zona es transparente 00:00:43
por aquí toda esta zona es una zona transparente 00:00:46
sin embargo el logo que yo he escogido 00:00:49
es un logo que no tiene fondo transparente 00:00:52
Tiene el fondo blanco. Entonces, al ubicar esta cabecera en mi clase de prácticas, veo que el color que yo he elegido como color de cabecera se ve por la zona transparente. 00:00:54
Sin embargo, esta zona siempre se va a ver blanca. ¿Por qué? Porque este color blanco viene incorporado en la imagen de cabecera. 00:01:08
Si yo vengo aquí al diseñador web y le cambio el color de fondo que quiero que tenga mi cabecera, yo lo puedo cambiar así muy rápidamente usando la opción previsualizar, puedo cambiar los colores y hacerme a la idea de cómo va a quedar. 00:01:15
Voy a coger por ejemplo este color verde. Veis automáticamente, veo el resultado. Esta zona cambia. ¿Por qué? Porque la imagen por aquí es transparente. Pero esta zona se sigue viendo blanca. Es blanco. Entonces quiero quitar eso. No me convence y bueno, pues voy a ver cómo solucionarlo. 00:01:36
Vamos a ampliar un poquito para que se vea un poquito mejor la imagen 00:02:01
En imágenes como esta que tienen un fondo lisito 00:02:05
con un único color, que no tienen sombra, dibujos ni decoraciones extrañas 00:02:12
pues es bastante fácil eliminar esta zona blanca, eliminar este fondo 00:02:18
y dejarlo con un fondo transparente, es muy sencillo 00:02:24
Vamos a ver cómo se puede hacer 00:02:27
Lo primero, vamos a usar esta herramienta de aquí que se llama herramienta para seleccionar por color o también puedo venirme aquí y seleccionar por color y marcamos, pulsamos encima del color blanco. 00:02:31
Ahora mismo acabamos de seleccionar todo el color blanco de la imagen, el de fuera y el de los huequillos, estos de por aquí, que no están unidos, los huequillos interiores. 00:02:46
vamos a hacer un truco 00:02:57
aplicar un truquillo que es ampliar un poquito la selección 00:03:01
vamos a venirnos aquí a agrandar 00:03:05
y vamos a agrandar la selección un píxel 00:03:07
para que no me seleccione justo el píxel del bordecillo 00:03:10
que puede tener algún tono blanquecino todavía 00:03:16
mezcla un poco del color de la flor y el color del fondo 00:03:19
ahora ya lo que tengo que hacer es eliminar esto 00:03:23
puedo pulsar la tecla suprimir o por ejemplo 00:03:26
en editar cortar, acabo de quitar 00:03:30
todo el fondo de golpe, todo ese fondo blanco 00:03:33
lo acabo de quitar, yo ahora a la hora de guardar 00:03:38
puedo, si tengo instalado el plugin save for web, pues lo uso 00:03:42
y si no, pues puedo usar la opción de exportar 00:03:46
¿cómo tengo que exportar? pues claro, no puedo exportar como 00:03:49
jpg cuidado porque ya sabéis que el jpg no tiene no soporta transparencias ese 00:03:54
formato tengo que usar formato png aquí ya al seleccionar png ya veis que me está 00:04:01
poniendo el fondo transparente y yo ahora ya lo guardaría 00:04:07
una vez que lo una vez que lo tengo guardado ya puedo venirme a mi clase de 00:04:12
prácticas y colocar la nueva cabecera. Aquí, diseñador web y voy a subir la nueva cabecera 00:04:19
que acabo de crear. Me vengo aquí a cabecera, me vengo aquí para seleccionar la imagen. 00:04:29
Lo primero que tengo que hacer es añadir la imagen nueva que acabo de crear y que ya 00:04:37
la tenía yo previamente guardado como mi logo transparente, la selecciono, pulso en 00:04:43
subir quichero, aquí está cargando, voy a listado y ahora ya tengo las dos, la de antes 00:04:53
y la nueva. Selecciono la nueva, la que me pone transparente porque la he llamado así, 00:05:00
la selecciono y guardo los cambios 00:05:05
y ahora ya 00:05:09
voy a poder comprobar que el resultado es mucho más profesional 00:05:11
ya no aparece ese fondo blanco 00:05:17
y el aspecto es más chulo 00:05:20
espero que os sirva 00:05:25
Idioma/s:
es
Autor/es:
Francisca García Bernal
Subido por:
Francisca G.
Licencia:
Reconocimiento - No comercial - Sin obra derivada
Visualizaciones:
528
Fecha:
21 de octubre de 2017 - 12:18
Visibilidad:
Público
Centro:
Sin centro asignado
Duración:
05′ 30″
Relación de aspecto:
1.31:1
Resolución:
984x750 píxeles
Tamaño:
13.12 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid