Preimpresión Artes Gráficas: 2019

viernes, 31 de mayo de 2019

CSS

Hola a todos.
Esta semana hemos aprendido a realizar documentos CSS.
Espero que os guste.

¿Qué es CSS? CSS, es una tecnología que nos permite crear páginas web de una manera más exacta.
Esta tecnología nos permite cambiar los colores, las fuentes, las justificaciones... de nuestra página web.

Posibles etiquetas:
1. body{
background-color:#000000: Nos permite cambiar el color del fondo de nuestra página web
2. h1,h2,h3{
text-align: center: Nos permite poner los títulos o los párrafos centrados, a la derecha, a la izquierda...
3. font-size: Nos permite cambiar el tamaño de la letra.
4. font-family: Nos permite cambiar la familia tipográfica de nuestra página web.
5.img{
aling-content: Alinea la imagen

Pasos que he seguido para realizarlo:
1. Primero he realizado un documento HTML
2.Segundo he editado el documento HTML poniendo los títulos, párrafos y la foto.
3. De seguido al documento le he puesto la etiqueta de <link rel="stylesheet" href="el nombre de tu documento css".
4. A partir de ahí he empezado a ponerle más propiedades a mi documento mediante el css.
Os dejo una foto de mi documento css y del documento HTML ya terminado:

lunes, 20 de mayo de 2019

Lenguaje HTML

Hola a todos.
Esta semana hemos realizado una práctica que consiste en crear una página web a partir de lenguaje Html.
Os dejo los pasos que he seguido:

¿Qué es?El lenguaje de marcas de hipertexto, HTML o (HyperText Markup Language) se basa en el metalenguaje SGML (Standard Generalized Markup Language) y es el formato de los documentos de la World Wide Web. El World Wide Web Consortium (W3C) es la organización que desarrolla los estándares para normalizar el desarrollo y la expansión de la Web y la que publica las especificaciones relativas al lenguaje HTML.
Se utilizan varias "etiquetas" para poder crear tu página a partir de estas. Algunas son:

<head> y <head/>: Definen un espacio en el que incluiremos contenido que no se va a ver directamente en el documento

<body> y <body/>: En su interior se incluye la información que se mostrará en el navegador.

<p> y <p/>: Se emplean para definir un bloque de texto que se comporta como un párrafo.

Para definir un texto cómo título empleamos <h1>,<h2>,<h3>...

<hr> y <br> Para insertar saltos de línea

<strong>: Se emplea para poner el texto en negrita

<em>: Se emplea para poner el texto en cursiva

Enlaces externos: Para poder hacer que el usuario clikee en el link que queremos debemos poner esta etiqueta: <p>Texto que deseemos <a href="link que deseemos"> Texto que deseemos<a/><p/>

<img src="imagen"/> Para insertar imágenes

<video src="video"/> Para insertar vídeos

Dicho esto os dejo con la práctica que he realizado:

Final:

miércoles, 8 de mayo de 2019

Cinemagraph

Hola a todos.
Esta semana hemos aprendido a realizar Cinemagraph que esto es una imagen animada que resulta de la combinación de fotografía y vídeo. Se trata de una imagen que parte de esta es estática y la otra parte sobrante es animada.
Os dejo con los pasos que he realizado para poder crearlo.
Espero que os guste.

Tráfico y noria:
1. Primero he abierto la línea de tiempo y he duplicado la capa original que era un vídeo donde se movían los dos elementos: la noria y el tráfico.
2. Una vez he duplicado la capa original dos veces he rasterizado esta capa.
3. A continuación he enmascarado las dos capas duplicadas y he pintado de negro lo que no quería que se moviese.
4. Cuando ya tenía todo listo fui al botón de abajo a la derecha de la línea del tiempo y le di a interpretar vídeo-calidad baja.

Cinemagraph Libre:

1. En este caso he descargado el vídeo desde Youtube. He seleccionado un clip de la canción Carousel de Melanie Martinez.

2. He procedido a seguir los mismos pasos que en el ejemplo anterior.

Transiciones de vídeo con Photoshop.

Hola a todos.
Esta semana hemos aprendido a realizar transaciones desde Photoshop.
Las transiciones de vídeo:La transición es un efecto especial que se usa para indicar la aparición de una diapositiva durante una presentación con diapositivas
Os dejo los pasos que he realizado:
1. He agrupado todas las imágenes en un mismo grupo de vídeos

2. Una vez que aparecen en la línea de tiempo les he puesto a cada imagen un tipo de movimiento diferente:

Esta opción se encuentra dando a "click derecho" sobre la imagen cuando está en la línea de tiempo

3. Una vez les he puesto movimiento a todas las imágenes les he puesto una transición blanca a cada una de ellas:

La transición es el palo blanco que se encuentra abajo a la derecha en la imagen.
Esta herramienta se puede encontrar en la línea de tiempo, abajo a la izquierda.

5. He añadido una canción a través de la línea de tiempo dándole a Pista de audio-Añadir audio.

6. Finalmente he interpretado el vídeo en calidad baja.

Queda tal que así:

Del mismo modo he realizado un vídeo libre:

Linea de tiempo con Photoshop

Hola a todos.
Esta semana hemos aprendido a cómo crear animaciones a partir de una imagen y la línea de tiempo de Photoshop.
Os dejo los pasos que he seguido:
1. He abierto la imagen aportada por la profesora y he abierto la línea de tiempo.
Después le puse un "motivo" a la bailarina

2. Le he dado a la opción de "posición" para dar la impresión al usuario de que la bailarina se está moviendo. He ido cambiando a la bailarina de lugar y de seguido le he dado a "posición" para que se quede guardado el paso que he realizado.

3. Después, le bajé la opacidad a la bailarina según se movía para dar la impresión de que desaparece.

He podido realizar este paso a través de "Opacidad"

Finalmente ha quedado así:

Siguiendo los mismos pasos he realizado una diana donde un dardo se clava en el centro:

HTML5

Hola a todos.

Esta semana hemos aprendido a realizar Banners a partir de HTML5.

Os dejo los pasos que he seguido:

1. He buscado una página que me permita realizar banners a partir de HTML5 y finalmente encontré

https://app.onlymega.com/login?redirect=%2Fanima

2. Me he registrado y he añadido un fondo y unas dimensiones a mi banner

3. He puesto texto a partir de la herramienta "Text" y he elegido una fuente legible

4. Añadí un botón de blogger a partir de la herramienta "Botón" para que el usuario cuando clike sobre el pueda dirigirse a mi blog.

5. Finalmente añadí una imagen donde aparece una pantonera, guardé y copié el código embebido de el banner para después poder ponerlo en mi blog.

El resultado es este:

jueves, 11 de abril de 2019

Banners estáticos

Hola a todos.
Esta semana hemos creado dos banners a partir de una imagen que nos a dado la profesora.
Os dejo los pasos que he seguido:

1.He creado un documento con las dimensiones que la profesora nos a indicado para cada banner
en el caso del banner del tabaco es un Pop Under y en el caso del banner del banco triodos tiene unas dimensiones de 336x280
2.A continuación he creado todos los elementos que no venían en la imagen:

3. He guardado los banners con las dimensiones y los ppp adecuados
Este es el resultado:

Gifs black mirror

Hola a todos.
Esta semana hemos creado unos gifs a partir de una sola imagen que nos daba la profesora.
Os dejo los pasos que hemos seguido:

1. La profesora nos enseñó las secuencias de los gifs y lo apuntamos
2. Nos dió las imágenes iniciales de los gifs
3. Creamos los elementos que faltaban en la imagen para poder hacer los gifs

4. Por cada elemento y movimiento en el gif creamos una capa nueva y la añadimos a la línea de tiempo

5. Una vez montado, exportamos a formato GIF:

miércoles, 10 de abril de 2019

Gifs en Photoshop

Hola a todos.
Esta semana hemos realizado una práctica que consiste en realizar gifs a partir de "capas" y la línea de tiempo en Photoshop.
Os dejo con los pasos que he seguido.
Espero que os guste.

1. La profesora nos dió unas imágenes sin movimiento donde tendríamos que hacer que se muevan:

2. Agregé esta imagen a Photoshop y comencé a mover a la bailarina a partir de la herramienta "Transformar" y a crear capas para después ponerlas en la línea de tiempo:

3. Por cada capa que iba haciendo, hacía una capa en la línea de tiempo sólo visualizando la capa que quisiera para después darle movimiento a la bailarina:

4. Finalmente teniendo todas las capas en la línea de tiempo este es el resultado

Siguiendo el mismo proceso he realizado el banner institucional:

jueves, 28 de marzo de 2019

Banner Institucional

Hola a todos.
Esta semana hemos creado un banner que promociona a nuestro instituto en el ámbito de artes gráficas para que la gente se matricule.
Os dejo el banner y los pasos que he seguido.
Espero que os guste.

1. He creado un nuevo documento con las medidas que he deseado en Photoshop. Sus medidas son 720x300, por lo tanto es un Pop Under
2. He duplicado este documento 5 veces para poder realizar la portada mas cuatro ciclos.
3. Los he editado en Photoshop añadiendo imágenes y tipos de internet.
4. He ajustado resolución(72ppp) y he cambiado el modo de color a "color indexado" para poder realizar el gif.
5. Finalmente he añadido las imágenes a la app "GIF Maker" y he descargado el gif.

jueves, 21 de marzo de 2019

Banners

Hola a todos.
Esta semana hemos aprendido los tipos de banners que hay y los principales formatos de estos.
En esta práctica hemos buscado 6 banners de cada tipo y hemos tenido que definir qué tipo de banners es, sus dimensiones, formato y peso del archivo y su modo de color.
Espero que os guste.

¿Qué son los banners?pieza de publicidad de contenido gráficoque se introduce en cualquier portal online para dar visibilidad a una marca, negocio o campaña de cualquier tipo y puede ser tanto estática como dinámica

Banners Estáticos: Son aquellos banners que no tienen ningún tipo de animación y contienen un breve texto, con enlace a la web.

1.Banner RENAULT:

Banner estático
Sus dimensiones son 300x600 px por lo que es "Half-page ad" (Anuncio de media página) y tiene 72ppp
Está en formato PNG y pesa 196KB
Tiene modo de color RGB
Encontrado en https://www.elmundo.es/

2. Banner PEUGEOT