1
00:00:00,180 --> 00:00:16,620
Bueno, en este video tutorial no puedo salir por mi cámara, ocurre de que como vamos a trabajar con mis imágenes, es la cuarta vez que intento grabar el vídeo y me peta el crombo, entonces vamos, he tenido que hacer más light, entonces no me vais a poder ver, pero me vais a escuchar.

2
00:00:16,620 --> 00:00:28,379
Bien, este video tutorial es muy importante, es muy importante porque vamos a aprender a hacer el banner, esta parte de aquí arriba, yo la denomino banner, es la cabecera de nuestro blog, ¿y por qué digo? Porque es muy importante.

3
00:00:28,899 --> 00:00:33,880
Bueno, pues porque es lo primero que ve la gente, no es el título de la página, el título del blog.

4
00:00:34,380 --> 00:00:37,619
Y ya sabéis que la primera impresión es la que más cuenta, ¿no?

5
00:00:37,840 --> 00:00:43,560
La primera impresión de tu casa, la primera impresión de cómo vistes, la primera impresión de cuando conoces a alguien.

6
00:00:44,119 --> 00:00:50,719
Bueno, pues en el caso de una página web, la primera impresión es el título, con lo cual es muy importante que lo cuidemos, ¿vale?

7
00:00:50,719 --> 00:01:03,100
Bien, vamos a generar una imagen propia, personal, única, porque la vamos a hacer nosotros, no la vamos a descargar de internet, para nuestro blog, porque para acá es nuestro porfolio personal.

8
00:01:03,500 --> 00:01:08,379
Bien, lo primero que hay que ver es el tamaño de la imagen que tenemos que subir, ¿vale?

9
00:01:08,939 --> 00:01:13,980
Aunque alguno dirá que lo puede encontrar en la parte de diseño y demás, no me voy a perder ahí el tiempo,

10
00:01:13,980 --> 00:01:18,040
porque cuando estamos trabajando con cualquier programa web o una página web

11
00:01:18,040 --> 00:01:22,959
la manera mejor de obtener el tamaño de las imágenes que van en la página web

12
00:01:22,959 --> 00:01:26,980
si no aparecerá todo descolocado, es haciendo un pantallazo selectivo.

13
00:01:27,739 --> 00:01:32,480
Haremos un pantallazo selectivo pulsando control, mayúsculas y la tecla de pantallazos

14
00:01:32,480 --> 00:01:40,659
y vamos a elegir lo que sería el título, la cabecera, donde vamos a colocar nuestro banner.

15
00:01:40,659 --> 00:01:57,760
De acuerdo, como veis he hecho una captura de pantalla, miro en mi carpeta la captura y con el botón derecho voy a ver las propiedades, en este caso obtener información, también podría hacerlo con el espacio.

16
00:01:58,680 --> 00:02:09,020
Entonces observo que tiene 823 por 104, esto lo voy a apuntar, puedo redondear, no pasa nada, 820, 830, pero lo apuntamos.

17
00:02:09,020 --> 00:02:15,919
me voy a abrir ahora una vez que lo tengo escrito me voy a abrir ahora un editor de

18
00:02:15,919 --> 00:02:23,099
imágenes online se llama pixel x es un editor de imágenes que se puede abrir desde cualquier

19
00:02:23,099 --> 00:02:28,219
navegador es decir pues funciona en cualquier ordenador y voy a crearme desde aquí mi banner

20
00:02:28,219 --> 00:02:34,259
hay una versión light gratuita y otra versión más pro pero para algo que nosotros necesitamos saber

21
00:02:34,259 --> 00:02:42,520
esta versión gratuita light nos vale daremos en crear nuevo vamos a darle aquí un nombre de

22
00:02:42,520 --> 00:02:50,960
acuerdo no dejemos las cosas con sin título por favor banner jose frutos ejemplo o blog

23
00:02:52,259 --> 00:02:57,460
de acuerdo y aquí en el ancho vamos a apuntar las medidas que hemos apuntado antes es decir

24
00:02:57,460 --> 00:03:06,719
830 le voy a dar por 100, ¿de acuerdo? 100. No le voy a poner fondo, le doy a crear.

25
00:03:07,580 --> 00:03:12,439
Bien, nos va a salir, como veis, este cuadrado a cuadros tipo ajedrez que lo vamos a rellenar

26
00:03:12,439 --> 00:03:17,699
con imágenes. Lo siguiente que voy a hacer va a ser un poco el fondo que le voy a dar

27
00:03:17,699 --> 00:03:23,479
a mi blog, ¿no? Entonces voy a buscar fondos de escritorio, no sé, como tengo, como veis

28
00:03:23,479 --> 00:03:34,460
mi blog es un poco así color salmón no pues voy a buscar fondos de pantalla color salmón o naranjas

29
00:03:34,460 --> 00:03:41,419
no lo sé naranjas o quizás azules que sería el complementario al naranja eso ya depende un poco

30
00:03:41,419 --> 00:03:47,099
no lo veis que me salen mogollón quizás pues para darle un poquito y utilizar el complementario al

31
00:03:47,099 --> 00:03:56,080
salmón que sería el azul de publicar un azul pastel porque es un azul pastel veis vivir imágenes

32
00:03:57,340 --> 00:04:06,580
de acuerdo como tengo unos 800 píxeles no hace falta que sea enorme bueno me están saliendo

33
00:04:06,580 --> 00:04:13,419
fondos de pantalla para móviles voy a bueno este no está mal vale si no podría poner fondo

34
00:04:13,419 --> 00:04:20,560
de escritorio también para que me salgan más apaisados porque tengo que recortar algo bueno

35
00:04:20,560 --> 00:04:27,480
pues como veis tengo pues bastantes fondos no vale bueno pues voy a este de las nubes por

36
00:04:27,480 --> 00:04:33,879
ejemplo bueno esto ya va a gusto del consumidor importantísimo como voy a publicar herramientas

37
00:04:33,879 --> 00:04:42,339
derechos de uso licencias gratis como fundamental bueno pues ya se ha reducido un poco la cosa

38
00:04:43,300 --> 00:04:47,240
Voy a elegir una imagen, bueno, pues la que, por ejemplo, está de aquí,

39
00:04:47,319 --> 00:04:48,879
aunque tiene licencias Creative Commons.

40
00:04:49,920 --> 00:04:52,300
Voy a abrir la imagen en una pestaña nueva.

41
00:04:53,199 --> 00:04:54,180
Aquí la tengo, ¿de acuerdo?

42
00:04:55,379 --> 00:05:02,139
Me la copio, esta URL, me vuelvo al editor de fotos y la voy a agregar por URL.

43
00:05:02,139 --> 00:05:06,139
Si me hubiese descargado, pues navega, ¿de acuerdo?

44
00:05:07,279 --> 00:05:08,620
Y la pego.

45
00:05:09,660 --> 00:05:11,339
A ver si me carga, a veces falla, ¿vale?

46
00:05:11,339 --> 00:05:28,560
Esto es importante, la voy a abrir, no voy a crear nueva, la voy a abrir a la actual, voy a abrir la capa. Entonces, ¿esto qué me va a hacer? El fondo, la imagen, ¿veis? Es más grande, no sé si lo veis, ¿veis? Entonces, ahora me permite colocar y quedarme con la parte que más me guste, ¿de acuerdo? Ya tengo un fondo para mi bar.

47
00:05:28,560 --> 00:05:48,420
Vale, la siguiente parte podríamos subir un icono, podríamos, no sé, imaginaos que queréis subir un, como es de tecnología, volver a buscar icono de robot. Un icono es una imagen pequeñita. Igual, siempre en herramientas, licencias gratis como, ¿no?

48
00:05:49,060 --> 00:05:52,259
Ah, pues mira, este azul yo creo que me va a quedar bien, ¿no?

49
00:05:52,939 --> 00:05:53,339
Perfecto.

50
00:05:54,180 --> 00:05:57,860
En este caso, ahora la voy a descargar, ¿vale?

51
00:05:58,019 --> 00:05:59,420
La voy a guardar imagen.

52
00:06:00,800 --> 00:06:03,120
Aquí veis otra manera de subir imágenes a Pixel.

53
00:06:04,220 --> 00:06:07,120
La guardo aquí en descargas, aunque también podría subirme a mi Google Drive,

54
00:06:07,240 --> 00:06:09,240
pero la voy a guardar en descargas.

55
00:06:09,240 --> 00:06:10,379
Me quedo con el nombre.

56
00:06:11,220 --> 00:06:14,160
Si es un nombre raro lo podría cambiar, pero yo me quedo Boticon.

57
00:06:14,480 --> 00:06:15,199
Lo guardo.

58
00:06:15,199 --> 00:06:36,019
Y ahora en editor de fotos voy a darle a navegar, se me va a abrir mi archivo y aquí en descargas, boticón, le voy a dar a abrir, me va a salir muy grande, le voy a añadir al actual y me lo va a poner encima, es enorme, pero para ello tenemos aquí una opción que es cambiar.

59
00:06:36,019 --> 00:06:45,500
vamos a escalar esta imagen con el control y la rueda del ratón voy a redimensionar la vale

60
00:06:47,180 --> 00:06:48,899
perdonad esta no

61
00:06:50,899 --> 00:06:59,800
el tamaño del 10 redimensionar la imagen vamos a ver vamos a moverlo un poquito

62
00:06:59,800 --> 00:07:04,620
recuerdo este icono, es que es enorme esta imagen

63
00:07:04,620 --> 00:07:08,819
vamos a ver como redimensionarla

64
00:07:08,819 --> 00:07:12,740
la podríamos recortar, propiedades

65
00:07:12,740 --> 00:07:20,250
el tamaño del lienzo lo ponemos igual

66
00:07:20,250 --> 00:07:24,209
la imagen, vamos a ver si podemos

67
00:07:24,209 --> 00:07:28,459
control z

68
00:07:28,459 --> 00:07:33,980
quizás es que es un icono muy grande

69
00:07:33,980 --> 00:07:37,920
pero entiendo que esta capa

70
00:07:37,920 --> 00:07:40,220
de acuerdo a esto lo vamos a

71
00:07:40,220 --> 00:07:42,519
dejar, no sé si

72
00:07:42,519 --> 00:07:44,279
este es el zoom

73
00:07:44,279 --> 00:07:47,060
propiedades

74
00:07:47,060 --> 00:07:50,379
redimensionar

75
00:07:50,379 --> 00:07:52,459
pero solo quiero esta imagen

76
00:07:52,459 --> 00:07:57,480
todas las capas, no quiero escalar todas las capas

77
00:07:57,480 --> 00:07:59,500
voy a tener que buscar un icono más pequeñito

78
00:07:59,500 --> 00:08:00,800
¿vale?

79
00:08:01,600 --> 00:08:02,959
entonces aquí en tamaño

80
00:08:02,959 --> 00:08:04,959
lo busco, iconos

81
00:08:04,959 --> 00:08:13,939
Y no me sacan mucho

82
00:08:13,939 --> 00:08:15,459
Voy a buscar robot

83
00:08:15,459 --> 00:08:25,040
A ver si encuentro algo que me guste

84
00:08:25,040 --> 00:08:27,759
No hay mucho, ¿no?

85
00:08:27,759 --> 00:08:30,420
En iconos, medianas

86
00:08:30,420 --> 00:08:37,460
Quizás este

87
00:08:37,460 --> 00:08:42,139
Vamos a ver, o sea que sigue siendo bastante grande

88
00:08:42,139 --> 00:08:43,480
Lo único bueno es que en la Wikipedia

89
00:08:43,480 --> 00:08:47,279
Sí que podemos buscarnos imágenes más pequeñas

90
00:08:47,279 --> 00:08:48,940
¿Veis? Por ejemplo, podría bajarme

91
00:08:48,940 --> 00:08:53,840
una de 200 píxeles, lo que pasa es que va a seguir siendo

92
00:08:53,840 --> 00:08:57,720
grande, ¿de acuerdo? Bueno, ¿cómo

93
00:08:57,720 --> 00:09:01,240
hacerlo, no? Dice, bueno, José, ¿qué pasa aquí, no?

94
00:09:01,500 --> 00:09:05,779
¿Qué hacemos? Bueno, lo que voy a hacer va a ser eliminar la imagen, esta imagen

95
00:09:05,779 --> 00:09:09,120
de aquí, esta capa, selecciona aquí

96
00:09:09,120 --> 00:09:13,620
y a ver si puedo aplanarla

97
00:09:13,620 --> 00:09:17,539
capa duplicada, fusión, fusiones hacia abajo

98
00:09:17,539 --> 00:09:19,860
no, no me deja

99
00:09:19,860 --> 00:09:22,460
la voy a eliminar, elimino esta capa

100
00:09:22,460 --> 00:09:24,639
¿de acuerdo? porque me lo estaba tapando

101
00:09:24,639 --> 00:09:25,899
entonces

102
00:09:25,899 --> 00:09:28,419
¿cómo hacer esto?

103
00:09:30,539 --> 00:09:31,919
luego me abro otro pixel

104
00:09:31,919 --> 00:09:33,659
abro una imagen

105
00:09:33,659 --> 00:09:37,899
voy a tener que primero

106
00:09:37,899 --> 00:09:40,440
redimensionarla para incluirla

107
00:09:40,440 --> 00:09:41,559
adentro, ¿vale? como veis

108
00:09:41,559 --> 00:09:43,600
hacer un banner lleva su tiempo

109
00:09:43,600 --> 00:09:45,799
me cojo la del bot

110
00:09:45,799 --> 00:09:47,159
¿vale?

111
00:09:47,740 --> 00:09:53,289
y ahora la voy a redimensionar

112
00:09:53,289 --> 00:09:57,710
a 100 píxeles, bueno, mejor 80, ¿de acuerdo?

113
00:09:58,710 --> 00:10:00,970
Que mantenga las proporciones, ¿vale? Lo aplico.

114
00:10:02,590 --> 00:10:05,529
Y ahora me la voy a descargar, se ha hecho más pequeñita, ¿vale?

115
00:10:05,529 --> 00:10:09,029
La voy a guardar. La guardo como png,

116
00:10:10,149 --> 00:10:12,629
la pongo boticón escalado,

117
00:10:15,440 --> 00:10:19,519
png es importante para que me guarde las transparencias, la descargo.

118
00:10:20,799 --> 00:10:23,139
Y habéis acertado. Ahora desde aquí,

119
00:10:23,139 --> 00:10:26,740
¿Vale? Añado la imagen

120
00:10:26,740 --> 00:10:32,320
Mi icono escalado

121
00:10:32,320 --> 00:10:37,200
¿De acuerdo? Aquí está

122
00:10:37,200 --> 00:10:39,899
Como veis ocupa muchísimo menos

123
00:10:39,899 --> 00:10:42,860
Añado la actual y veis, ¿no?

124
00:10:42,899 --> 00:10:46,100
Que ya no me ocupa todo, ¿no? Porque lo he tenido que escalar

125
00:10:46,100 --> 00:10:48,559
Esto es algo fundamental cuando trabajamos con imágenes

126
00:10:48,559 --> 00:10:50,840
Bueno, tiene ya bastante buena pinta

127
00:10:50,840 --> 00:10:53,559
Voy a escribir el texto, voy a añadir un texto nuevo

128
00:10:53,559 --> 00:10:57,399
¿Vale? En este caso, voy a poner ya el título de mi blog

129
00:10:57,399 --> 00:11:06,480
Porfolio, no, porfolio de aprendizaje o porfolio de José Frutos, ¿vale?

130
00:11:07,919 --> 00:11:08,580
¿De acuerdo?

131
00:11:10,159 --> 00:11:15,019
Importantísimo, pues como siempre, esto hay que ajustarlo, ¿vale?

132
00:11:16,360 --> 00:11:22,000
Como veis, no me cabía todo, he tenido que... sigue estando muy grande.

133
00:11:23,460 --> 00:11:25,440
Vamos a bajar un poquito el tamaño.

134
00:11:25,440 --> 00:11:56,840
A lo mejor hay que ponerlo así, a ver, perfecto, vale, he cogido blanco porque tiene blanco el logo, tenemos también más opciones, le voy a poner negrita, que se vea bien, además me voy a dar un contorno que siempre va a permitir la visión y el contorno le voy a dar un color negro, vale, negro oscuro, veis que se lee mucho mejor,

135
00:11:56,940 --> 00:12:05,100
bueno, que te gusta más azul oscuro, pues puedes tirar al azul, ¿de acuerdo? Esto ya para gustos los colores, ¿de acuerdo?

136
00:12:06,100 --> 00:12:15,759
¿Vale? Entonces me permite tener esto del punch out, ah, bueno, es el relleno de dentro, lo voy a dejar en blanco, que me gusta,

137
00:12:15,759 --> 00:12:17,559
puedo hacerlo una sombra

138
00:12:17,559 --> 00:12:22,740
en este caso voy a hacer una sombra

139
00:12:22,740 --> 00:12:26,240
y le tengo que dar menos opacidad

140
00:12:26,240 --> 00:12:28,539
para que se vea, no sé si la observáis

141
00:12:28,539 --> 00:12:30,100
que me ha salido un poquito de sombra

142
00:12:30,100 --> 00:12:32,860
incluso podría dar color de sombra

143
00:12:32,860 --> 00:12:36,340
voy a hacerlo un color, ya que estamos en azul

144
00:12:36,340 --> 00:12:39,139
no sé si lo veis como queda

145
00:12:39,139 --> 00:12:41,200
siempre podemos recolocarlo

146
00:12:41,200 --> 00:12:44,279
tiene muchas posibilidades

147
00:12:44,279 --> 00:12:46,440
ya tengo el texto

148
00:12:46,440 --> 00:12:51,720
y bueno pues la verdad es que ya lo tendría muy listo pero siempre en el diseño es importante no

149
00:12:51,720 --> 00:13:00,480
dejar las esquinas y creo recordar que por aquí bueno luego tendríamos bastantes filtros

150
00:13:03,159 --> 00:13:08,240
dice solo las capas de imagen pueden tener filtros bien como ya más o menos las tendría

151
00:13:08,240 --> 00:13:19,940
todas las voy a vale las voy fusionando a plano la imagen y he puesto todas las capas en una

152
00:13:19,940 --> 00:13:27,559
imagen eso ya me permite luego trabajar desde darle más claridad menos claridad veis que me

153
00:13:27,559 --> 00:13:38,620
cambia vale bueno me permiten mogollón de temas me gustaría ver por aquí había un defecto

154
00:13:40,559 --> 00:13:44,159
bueno tiene efectos con filtros tipo instagram

155
00:13:46,240 --> 00:13:54,340
dentro ya es bueno las posibilidades son infinitas y a volver me gustaría creo que

156
00:13:54,340 --> 00:14:01,620
hay un efecto por ahí que tenía bordes redondeados, shades, sombras, urban, no sé si era aquí,

157
00:14:01,980 --> 00:14:17,360
licuar, no, filtro, viñeta, pixelado, insta-tuning, portrait, food, retoque, dibujo, texto, añade

158
00:14:17,360 --> 00:14:23,360
aquí, borde, está aquí abajo, perdonad, no me lo sé de memoria, borde, entonces bueno

159
00:14:23,360 --> 00:14:32,139
pues podríamos poner un borde arriba abajo le podemos dar un efecto all dentro de como veis

160
00:14:34,419 --> 00:14:38,980
sin muchas más a volver a ver si encuentro algo

161
00:14:38,980 --> 00:14:49,279
elegante no me convence ninguno vuelvo vamos a ver art deco