Preimpresión GRAPHIC ARTS: mayo 2019

jueves, 30 de mayo de 2019

CSS

¿Qué es?

La CSS (Hojas de estilo en cascada) es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado. Es muy usado para establecer el diseño visual de los documentos web como por ejemplo en el HTML.

¿Cómo aplicarlas al documento HTML?

Abriremos un archivo separado del HTML con la extensión .css y lo referenciamos desde HTML con un elemento <link>.

Y en el archivo CSS usaremos las etiquetas para crear el diseño de nuestro documento.

Si queremos hacer alguna modificación simplemente iremos al archivo CSS y lo cambiaremos desde allí.

En este caso he modificado el color de fondo con la etiqueta {background} y tono de los títulos con la etiqueta {color e indicando la referencia del tono}.

Este es el resultado:

lunes, 20 de mayo de 2019

HTML5

¿Qué es?

Es un lenguaje web de etiquetas que permite construir los documentos webs (páginas web) de forma que los navegadores puedan entender el contenido y mostrárselo al usuario. En internet es el estándar en el que la inmensa mayoría de páginas están realizadas.

En este caso hemos utilizado el programa Adobe Dreamweaver para hacer nuestro propio documento con HTML5.

¿Cómo utilizarlo?

Lo principal es saber que debemos escribir entre las etiquetas llamadas <body></body>.

Es muy sencillo una vez conocer las etiquetas necesarias.

Etiquetas básicas:

<h1></h1>: sirve para definir un texto como título o cabecera.
<p></p>: define un bloque de texto como párrafo.
<br></br>: inserta un salto de linea.
<hr></hr>: inserta el salto de linea con una linea visible.
<strong></strong>: permite poner el texto en negrita.
<em></em>: permite poner el texto en cursiva.

Etiquetas para insertar enlaces o imágenes:

<a href=""> </a>: permite insertar enlaces externos, pondremos la url de la pagina entre las "".
<img src=""/>: permite insertar imágenes, pondremos el nombre exacto de la imagen entre las "", es importante que la imagen esté guardada en una carpeta en la cual no la vayamos a mover para que el programa la encuentre.

Hay multitud de etiquetas para usar en la creación de nuestro documento web.

Ejemplo:

Como podéis ver, hay dos ventanas: la primera (parte superior) nos muestra como va quedando nuestro documento y la segunda (parte inferior) es donde escribimos el HTML5.

Una vez realizado y guardado quedaría de esta manera:

Espero que os sirva de ayuda.

miércoles, 8 de mayo de 2019

Cinemagraph

¿Qué es?

Es una imagen animada que resulta de la combinación de fotografía y vídeo. Se trata de imágenes fundamentalmente estáticas en las que se sustituye una porción de éstas por una pequeña animación que, normalmente, muestra pequeños movimientos en bucle infinito. Para montarlas, a menudo se usa el formato de imágenes .gif.

La intención de un cinemagraph es sorprender al usuario,además, este tipo de imágenes busca transmitir sensaciones que con las fotografías no se pueden transmitir.

¿Como hacerlo?

En este caso vamos a utilizar Photoshop.

Necesitamos una idea, debemos saber que vídeo vamos a utilizar y que parte de el queremos que sea estático.
Debemos hacer una copia del vídeo, rasterizarlo y sacarlo del grupo que Photoshop nos crea. De esta forma tendremos una imagen estática del video.
Creamos una mascara de capa y rellenamos aquello que no queremos que se mueva. Una vez realizamos comprobamos el video para así asegurarnos de que hemos tapado todo el espacio necesario.

Y listo, ya tendríamos nuestro cinemagraph. Os dejo algunos ejemplos que he realizado.

martes, 7 de mayo de 2019

Transiciones de video

Como comenté en la entrada anterior, podemos crear videos con Photoshop, en este caso además de imágenes he incluido texto y audio.

Es un pequeño video sobre el paso del tiempo del rock desde los 50´s hasta los 70´s.... espero que sea de vuestro agrado.