1
00:00:00,300 --> 00:00:04,839
Hola, vamos a ver cómo solucionar un problema que nos estamos encontrando

2
00:00:04,839 --> 00:00:08,880
cuando diseñamos nuestra cabecera para la clase de prácticas.

3
00:00:09,820 --> 00:00:12,599
Fijaos en este caso, tal cual se pide en la tarea,

4
00:00:13,339 --> 00:00:19,059
yo aquí he seleccionado un logo, que es la imagen de unas flores que me han parecido así bonitas,

5
00:00:20,100 --> 00:00:25,379
y luego he diseñado una cabecera con el tamaño que me ha parecido adecuado,

6
00:00:25,379 --> 00:00:28,760
he incorporado un texto con una sombra

7
00:00:28,760 --> 00:00:31,059
y este es el resultado

8
00:00:31,059 --> 00:00:35,840
entonces a la hora de colocar esta cabecera

9
00:00:35,840 --> 00:00:38,500
en mi clase de prácticas

10
00:00:38,500 --> 00:00:41,479
veo que me queda de esta manera

11
00:00:41,479 --> 00:00:42,679
¿qué es lo que sucede?

12
00:00:43,659 --> 00:00:46,679
la cabecera por esta zona es transparente

13
00:00:46,679 --> 00:00:49,359
por aquí toda esta zona es una zona transparente

14
00:00:49,359 --> 00:00:52,159
sin embargo el logo que yo he escogido

15
00:00:52,159 --> 00:00:54,840
es un logo que no tiene fondo transparente

16
00:00:54,840 --> 00:01:06,840
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.

17
00:01:08,260 --> 00:01:15,379
Sin embargo, esta zona siempre se va a ver blanca. ¿Por qué? Porque este color blanco viene incorporado en la imagen de cabecera.

18
00:01:15,379 --> 00:01:36,239
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.

19
00:01:36,239 --> 00:02:01,060
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.

20
00:02:01,060 --> 00:02:05,659
Vamos a ampliar un poquito para que se vea un poquito mejor la imagen

21
00:02:05,659 --> 00:02:12,819
En imágenes como esta que tienen un fondo lisito

22
00:02:12,819 --> 00:02:18,840
con un único color, que no tienen sombra, dibujos ni decoraciones extrañas

23
00:02:18,840 --> 00:02:24,180
pues es bastante fácil eliminar esta zona blanca, eliminar este fondo

24
00:02:24,180 --> 00:02:27,439
y dejarlo con un fondo transparente, es muy sencillo

25
00:02:27,439 --> 00:02:30,939
Vamos a ver cómo se puede hacer

26
00:02:31,060 --> 00:02:45,719
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.

27
00:02:46,020 --> 00:02:57,080
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.

28
00:02:57,080 --> 00:03:01,879
vamos a hacer un truco

29
00:03:01,879 --> 00:03:05,680
aplicar un truquillo que es ampliar un poquito la selección

30
00:03:05,680 --> 00:03:07,680
vamos a venirnos aquí a agrandar

31
00:03:07,680 --> 00:03:10,599
y vamos a agrandar la selección un píxel

32
00:03:10,599 --> 00:03:16,719
para que no me seleccione justo el píxel del bordecillo

33
00:03:16,719 --> 00:03:19,419
que puede tener algún tono blanquecino todavía

34
00:03:19,419 --> 00:03:23,439
mezcla un poco del color de la flor y el color del fondo

35
00:03:23,439 --> 00:03:26,840
ahora ya lo que tengo que hacer es eliminar esto

36
00:03:26,840 --> 00:03:30,280
puedo pulsar la tecla suprimir o por ejemplo

37
00:03:30,280 --> 00:03:33,520
en editar cortar, acabo de quitar

38
00:03:33,520 --> 00:03:38,520
todo el fondo de golpe, todo ese fondo blanco

39
00:03:38,520 --> 00:03:42,860
lo acabo de quitar, yo ahora a la hora de guardar

40
00:03:42,860 --> 00:03:46,460
puedo, si tengo instalado el plugin save for web, pues lo uso

41
00:03:46,460 --> 00:03:49,180
y si no, pues puedo usar la opción de exportar

42
00:03:49,180 --> 00:03:54,400
¿cómo tengo que exportar? pues claro, no puedo exportar como

43
00:03:54,400 --> 00:04:01,419
jpg cuidado porque ya sabéis que el jpg no tiene no soporta transparencias ese

44
00:04:01,419 --> 00:04:07,300
formato tengo que usar formato png aquí ya al seleccionar png ya veis que me está

45
00:04:07,300 --> 00:04:12,680
poniendo el fondo transparente y yo ahora ya lo guardaría

46
00:04:12,680 --> 00:04:19,240
una vez que lo una vez que lo tengo guardado ya puedo venirme a mi clase de

47
00:04:19,240 --> 00:04:29,680
prácticas y colocar la nueva cabecera. Aquí, diseñador web y voy a subir la nueva cabecera

48
00:04:29,680 --> 00:04:36,519
que acabo de crear. Me vengo aquí a cabecera, me vengo aquí para seleccionar la imagen.

49
00:04:37,959 --> 00:04:43,100
Lo primero que tengo que hacer es añadir la imagen nueva que acabo de crear y que ya

50
00:04:43,100 --> 00:04:53,079
la tenía yo previamente guardado como mi logo transparente, la selecciono, pulso en

51
00:04:53,079 --> 00:05:00,279
subir quichero, aquí está cargando, voy a listado y ahora ya tengo las dos, la de antes

52
00:05:00,279 --> 00:05:05,420
y la nueva. Selecciono la nueva, la que me pone transparente porque la he llamado así,

53
00:05:05,420 --> 00:05:09,040
la selecciono y guardo los cambios

54
00:05:09,040 --> 00:05:11,379
y ahora ya

55
00:05:11,379 --> 00:05:17,199
voy a poder comprobar que el resultado es mucho más profesional

56
00:05:17,199 --> 00:05:20,980
ya no aparece ese fondo blanco

57
00:05:20,980 --> 00:05:25,560
y el aspecto es más chulo

58
00:05:25,560 --> 00:05:27,800
espero que os sirva