Saltar navegación

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

Crea tu propio banner en Blogger 1/2 - Contenido educativo

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 7 de junio de 2022 por Jose F.

39 visualizaciones

Aprende a crear tu propio banner

Más información Transcripción

Descargar la transcripción

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. 00:00:00
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. 00:00:16
Bueno, pues porque es lo primero que ve la gente, no es el título de la página, el título del blog. 00:00:28
Y ya sabéis que la primera impresión es la que más cuenta, ¿no? 00:00:34
La primera impresión de tu casa, la primera impresión de cómo vistes, la primera impresión de cuando conoces a alguien. 00:00:37
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? 00:00:44
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. 00:00:50
Bien, lo primero que hay que ver es el tamaño de la imagen que tenemos que subir, ¿vale? 00:01:03
Aunque alguno dirá que lo puede encontrar en la parte de diseño y demás, no me voy a perder ahí el tiempo, 00:01:08
porque cuando estamos trabajando con cualquier programa web o una página web 00:01:13
la manera mejor de obtener el tamaño de las imágenes que van en la página web 00:01:18
si no aparecerá todo descolocado, es haciendo un pantallazo selectivo. 00:01:22
Haremos un pantallazo selectivo pulsando control, mayúsculas y la tecla de pantallazos 00:01:27
y vamos a elegir lo que sería el título, la cabecera, donde vamos a colocar nuestro banner. 00:01:32
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. 00:01:40
Entonces observo que tiene 823 por 104, esto lo voy a apuntar, puedo redondear, no pasa nada, 820, 830, pero lo apuntamos. 00:01:58
me voy a abrir ahora una vez que lo tengo escrito me voy a abrir ahora un editor de 00:02:09
imágenes online se llama pixel x es un editor de imágenes que se puede abrir desde cualquier 00:02:15
navegador es decir pues funciona en cualquier ordenador y voy a crearme desde aquí mi banner 00:02:23
hay una versión light gratuita y otra versión más pro pero para algo que nosotros necesitamos saber 00:02:28
esta versión gratuita light nos vale daremos en crear nuevo vamos a darle aquí un nombre de 00:02:34
acuerdo no dejemos las cosas con sin título por favor banner jose frutos ejemplo o blog 00:02:42
de acuerdo y aquí en el ancho vamos a apuntar las medidas que hemos apuntado antes es decir 00:02:52
830 le voy a dar por 100, ¿de acuerdo? 100. No le voy a poner fondo, le doy a crear. 00:02:57
Bien, nos va a salir, como veis, este cuadrado a cuadros tipo ajedrez que lo vamos a rellenar 00:03:07
con imágenes. Lo siguiente que voy a hacer va a ser un poco el fondo que le voy a dar 00:03:12
a mi blog, ¿no? Entonces voy a buscar fondos de escritorio, no sé, como tengo, como veis 00:03:17
mi blog es un poco así color salmón no pues voy a buscar fondos de pantalla color salmón o naranjas 00:03:23
no lo sé naranjas o quizás azules que sería el complementario al naranja eso ya depende un poco 00:03:34
no lo veis que me salen mogollón quizás pues para darle un poquito y utilizar el complementario al 00:03:41
salmón que sería el azul de publicar un azul pastel porque es un azul pastel veis vivir imágenes 00:03:47
de acuerdo como tengo unos 800 píxeles no hace falta que sea enorme bueno me están saliendo 00:03:57
fondos de pantalla para móviles voy a bueno este no está mal vale si no podría poner fondo 00:04:06
de escritorio también para que me salgan más apaisados porque tengo que recortar algo bueno 00:04:13
pues como veis tengo pues bastantes fondos no vale bueno pues voy a este de las nubes por 00:04:20
ejemplo bueno esto ya va a gusto del consumidor importantísimo como voy a publicar herramientas 00:04:27
derechos de uso licencias gratis como fundamental bueno pues ya se ha reducido un poco la cosa 00:04:33
Voy a elegir una imagen, bueno, pues la que, por ejemplo, está de aquí, 00:04:43
aunque tiene licencias Creative Commons. 00:04:47
Voy a abrir la imagen en una pestaña nueva. 00:04:49
Aquí la tengo, ¿de acuerdo? 00:04:53
Me la copio, esta URL, me vuelvo al editor de fotos y la voy a agregar por URL. 00:04:55
Si me hubiese descargado, pues navega, ¿de acuerdo? 00:05:02
Y la pego. 00:05:07
A ver si me carga, a veces falla, ¿vale? 00:05:09
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. 00:05:11
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? 00:05:28
Ah, pues mira, este azul yo creo que me va a quedar bien, ¿no? 00:05:49
Perfecto. 00:05:52
En este caso, ahora la voy a descargar, ¿vale? 00:05:54
La voy a guardar imagen. 00:05:58
Aquí veis otra manera de subir imágenes a Pixel. 00:06:00
La guardo aquí en descargas, aunque también podría subirme a mi Google Drive, 00:06:04
pero la voy a guardar en descargas. 00:06:07
Me quedo con el nombre. 00:06:09
Si es un nombre raro lo podría cambiar, pero yo me quedo Boticon. 00:06:11
Lo guardo. 00:06:14
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. 00:06:15
vamos a escalar esta imagen con el control y la rueda del ratón voy a redimensionar la vale 00:06:36
perdonad esta no 00:06:47
el tamaño del 10 redimensionar la imagen vamos a ver vamos a moverlo un poquito 00:06:50
recuerdo este icono, es que es enorme esta imagen 00:06:59
vamos a ver como redimensionarla 00:07:04
la podríamos recortar, propiedades 00:07:08
el tamaño del lienzo lo ponemos igual 00:07:12
la imagen, vamos a ver si podemos 00:07:20
control z 00:07:24
quizás es que es un icono muy grande 00:07:28
pero entiendo que esta capa 00:07:33
de acuerdo a esto lo vamos a 00:07:37
dejar, no sé si 00:07:40
este es el zoom 00:07:42
propiedades 00:07:44
redimensionar 00:07:47
pero solo quiero esta imagen 00:07:50
todas las capas, no quiero escalar todas las capas 00:07:52
voy a tener que buscar un icono más pequeñito 00:07:57
¿vale? 00:07:59
entonces aquí en tamaño 00:08:01
lo busco, iconos 00:08:02
Y no me sacan mucho 00:08:04
Voy a buscar robot 00:08:13
A ver si encuentro algo que me guste 00:08:15
No hay mucho, ¿no? 00:08:25
En iconos, medianas 00:08:27
Quizás este 00:08:30
Vamos a ver, o sea que sigue siendo bastante grande 00:08:37
Lo único bueno es que en la Wikipedia 00:08:42
Sí que podemos buscarnos imágenes más pequeñas 00:08:43
¿Veis? Por ejemplo, podría bajarme 00:08:47
una de 200 píxeles, lo que pasa es que va a seguir siendo 00:08:48
grande, ¿de acuerdo? Bueno, ¿cómo 00:08:53
hacerlo, no? Dice, bueno, José, ¿qué pasa aquí, no? 00:08:57
¿Qué hacemos? Bueno, lo que voy a hacer va a ser eliminar la imagen, esta imagen 00:09:01
de aquí, esta capa, selecciona aquí 00:09:05
y a ver si puedo aplanarla 00:09:09
capa duplicada, fusión, fusiones hacia abajo 00:09:13
no, no me deja 00:09:17
la voy a eliminar, elimino esta capa 00:09:19
¿de acuerdo? porque me lo estaba tapando 00:09:22
entonces 00:09:24
¿cómo hacer esto? 00:09:25
luego me abro otro pixel 00:09:30
abro una imagen 00:09:31
voy a tener que primero 00:09:33
redimensionarla para incluirla 00:09:37
adentro, ¿vale? como veis 00:09:40
hacer un banner lleva su tiempo 00:09:41
me cojo la del bot 00:09:43
¿vale? 00:09:45
y ahora la voy a redimensionar 00:09:47
a 100 píxeles, bueno, mejor 80, ¿de acuerdo? 00:09:53
Que mantenga las proporciones, ¿vale? Lo aplico. 00:09:58
Y ahora me la voy a descargar, se ha hecho más pequeñita, ¿vale? 00:10:02
La voy a guardar. La guardo como png, 00:10:05
la pongo boticón escalado, 00:10:10
png es importante para que me guarde las transparencias, la descargo. 00:10:15
Y habéis acertado. Ahora desde aquí, 00:10:20
¿Vale? Añado la imagen 00:10:23
Mi icono escalado 00:10:26
¿De acuerdo? Aquí está 00:10:32
Como veis ocupa muchísimo menos 00:10:37
Añado la actual y veis, ¿no? 00:10:39
Que ya no me ocupa todo, ¿no? Porque lo he tenido que escalar 00:10:42
Esto es algo fundamental cuando trabajamos con imágenes 00:10:46
Bueno, tiene ya bastante buena pinta 00:10:48
Voy a escribir el texto, voy a añadir un texto nuevo 00:10:50
¿Vale? En este caso, voy a poner ya el título de mi blog 00:10:53
Porfolio, no, porfolio de aprendizaje o porfolio de José Frutos, ¿vale? 00:10:57
¿De acuerdo? 00:11:07
Importantísimo, pues como siempre, esto hay que ajustarlo, ¿vale? 00:11:10
Como veis, no me cabía todo, he tenido que... sigue estando muy grande. 00:11:16
Vamos a bajar un poquito el tamaño. 00:11:23
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, 00:11:25
bueno, que te gusta más azul oscuro, pues puedes tirar al azul, ¿de acuerdo? Esto ya para gustos los colores, ¿de acuerdo? 00:11:56
¿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, 00:12:06
puedo hacerlo una sombra 00:12:15
en este caso voy a hacer una sombra 00:12:17
y le tengo que dar menos opacidad 00:12:22
para que se vea, no sé si la observáis 00:12:26
que me ha salido un poquito de sombra 00:12:28
incluso podría dar color de sombra 00:12:30
voy a hacerlo un color, ya que estamos en azul 00:12:32
no sé si lo veis como queda 00:12:36
siempre podemos recolocarlo 00:12:39
tiene muchas posibilidades 00:12:41
ya tengo el texto 00:12:44
y bueno pues la verdad es que ya lo tendría muy listo pero siempre en el diseño es importante no 00:12:46
dejar las esquinas y creo recordar que por aquí bueno luego tendríamos bastantes filtros 00:12:51
dice solo las capas de imagen pueden tener filtros bien como ya más o menos las tendría 00:13:03
todas las voy a vale las voy fusionando a plano la imagen y he puesto todas las capas en una 00:13:08
imagen eso ya me permite luego trabajar desde darle más claridad menos claridad veis que me 00:13:19
cambia vale bueno me permiten mogollón de temas me gustaría ver por aquí había un defecto 00:13:27
bueno tiene efectos con filtros tipo instagram 00:13:40
dentro ya es bueno las posibilidades son infinitas y a volver me gustaría creo que 00:13:46
hay un efecto por ahí que tenía bordes redondeados, shades, sombras, urban, no sé si era aquí, 00:13:54
licuar, no, filtro, viñeta, pixelado, insta-tuning, portrait, food, retoque, dibujo, texto, añade 00:14:01
aquí, borde, está aquí abajo, perdonad, no me lo sé de memoria, borde, entonces bueno 00:14:17
pues podríamos poner un borde arriba abajo le podemos dar un efecto all dentro de como veis 00:14:23
sin muchas más a volver a ver si encuentro algo 00:14:34
elegante no me convence ninguno vuelvo vamos a ver art deco 00:14:38
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Autor/es:
Jose Frutos
Subido por:
Jose F.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
39
Fecha:
7 de junio de 2022 - 17:26
Visibilidad:
Público
Centro:
IES ALPAJÉS
Duración:
14′ 50″
Relación de aspecto:
1.78:1
Resolución:
1366x768 píxeles
Tamaño:
87.98 MBytes

Del mismo autor…

Ver más del mismo autor

Comentarios

Para publicar comentarios debes entrar con tu nombre de usuario de EducaMadrid.

Comentarios

Este vídeo todavía no tiene comentarios. Sé el primero en comentar.


EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid