miércoles, 5 de junio de 2019

CSS Cisne

Seguimos con las etiquetas CSS.

Primero escribimos el código HTML:

Y ahora el código CSS:


Etiquetas:

Como veis aparecen etiquetas anteriormente vistas:
Font-family: sirve para especificar el estilo tipografico que usaremos.
Font-size: modifica el tamaño de letra.
Line-height: espacio que habrá entre lineas.
Background: permite modificar el fondo y  en este caso hemos puesto una imagen la cual  usando la etiqueta no-repeat hacemos que aparezca una sola vez.
Background-size:  redimensiona las imágenes de fondo.
Padding: espacio entre el contenido del elemento y su borde.
Margin: se utiliza para establecer de forma abreviada el valor de una o más propiedades individuales. 
Text-decoration: establece el formato de texto a subrayado ( underline ) y suprarrayado ( overline ), tachado ( line-through ) o parpadeo ( blink ).

Nuevas etiquetas:

Border-radius:especifica la redondez de las esquinas.
Float: posiciona una caja todo lo que puede a la izquierda de la página.
Text-transform: especifica un cambio de mayúsculas y minúsculas del texto en un elemento concreto.
:hover:sirve para que el usuario interactue con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor.

Este es el resultado:

CSS con link

En la anterior entrada se explicaron las CSS y algunas de sus etiquetas, hoy veremos unas etiquetas mas....complicadas, pero primero como ya sabéis debemos escribir nuestro código HTML:


Como podéis ves hemos creado una tabla usando diferentes links.

Código CSS:


Etiquetas:

Font-family: sirve para especificar el estilo tipografico que usaremos.
Font-size: modifica el tamaño de letra.
Line-height: espacio que habrá entre lineas.
Background: permite modificar el fondo y  en este caso hemos puesto una imagen la cual  usando la etiqueta no-repeat hacemos que aparezca una sola vez.
Background-size:  redimensiona las imágenes de fondo.
Padding: espacio entre el contenido del elemento y su borde.
Margin: se utiliza para establecer de forma abreviada el valor de una o más propiedades individuales. 
Text-decoration: establece el formato de texto a subrayado ( underline ) y suprarrayado ( overline ), tachado ( line-through ) o parpadeo ( blink ).

Y este seria nuestro resultado:




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.

  1. Necesitamos una idea, debemos saber que vídeo vamos a utilizar y que parte de el queremos que sea estático.
  2. 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.
  3. 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.





miércoles, 24 de abril de 2019

Linea de tiempo en Photoshop

Podemos crear videos desde photoshop mediante la linea de tiempo, para ello necesitamos las imágenes que vamos a usar.

Este es el menú principal que nos aparece, en el podemos modificar cuanto durará nuestro video y es donde crearemos la magia,



Si desplegamos el menú de "Capa" nos aparecen 3 opciones:


  1. Posición: con esta opción crearemos movimiento, primero posicionamos la barra roja en la linea de tiempo donde queremos que haya movimiento, después movemos nuestra imagen o elemento y le damos a "Posición".
  2. Opacidad: su forma de uso es igual que la anterior, solo que en este caso iremos modificando la opacidad de nuestra imagen o elemento.
  3. Estilo: nos permite modificar el color, textura, estilo....
Podemos usar estas opciones por separado o a la vez, depende del efecto que queramos darle a nuestro video.




Estos son unos ejemplos que he realizado, espero que os guste. 






miércoles, 10 de abril de 2019

HTML5 Maker

¿Qué es HTML5?

Es un lenguaje informático, usado para estructurar y presentar el contenido para la web.

¿Cómo crear banners con HTML5 Maker?

1º Debemos hacernos una cuenta, después elegiremos el tamaño del banner.
2º Podremos poner imágenes nuestras o usar las que nos viene en el banco de imágenes de la aplicación, también elegiremos el formato del texto y lo más importante, cuantos fotogramas tendrá nuestro banner.
3º Una vez creado, lo publicaremos y en empotrar copiaremos el código HTML5 para así poder incluirlo en nuestro blog.

He creado un banner para publicitar el blog de una compañera, espero que os guste.

También he creado uno usando Bannersnack, la cual me parece más sencilla de manejar y al igual que HTML5 Maker utiliza el lenguaje HTML5.




Banners Black Mirror

Buenas, en esta entrada voy a presentaros algunos banners que he realizado sobre la serie Black Mirror.











lunes, 1 de abril de 2019

Charles Ray "Cuatro Moldes"

¿Quién es Charles Ray?

Es un escultor estadounidense conocido por sus extrañas y enigmáticas esculturas que ponen en juicio las percepciones del espectador y considerado uno de los escultores más influyentes del panorama artístico actual. 

Su estilo y el tema de sus obras son muy variables, pero la naturaleza seductora y sorprendente de sus obras ha echo que tenga una gran audiencia.

Actualmente, el Museo Reina Sofía presenta en el Palacio de Cristal, del Parque del Retiro, la exposición "Cuatro Moldes" la cual reúne una selección de esculturas de gran tamaño. 

La exposición estará disponible hasta el 8 de septiembre de 2019. ¿Vais a perdérosla? 




miércoles, 27 de marzo de 2019

Creación de Banners con Photoshop

1º Crearemos varias capas, cada una de ella con una imagen de nuestro banner. Como queremos darle movimiento, tendremos que ir modificando la posición y la forma poco a poco. Ej:



2º Pulsamos la pestaña Ventana>Linea de tiempo y se nos abrirá un nuevo menú. Le damos a "Crear animación de cuadros" y vamos creando un cuadro por cada capa.



3º Abajo, nos permite modificar cuanto queremos que darte nuestro cuadro en pasar al siguiente, si queremos que se mueva una única vez o de manera infinita y los botones de play, pausa, para pasar de una cuadro a otro, intercalar cuadros, crear un cuadro nuevo y borrar.




4º Una vez terminado, vamos a Archivo>Exportar> Guardar para web (heredado). Ponemos que se guarde en GIF y aceptamos.



En este caso he realizado dos Banners diferentes, espero que os gusten.

 








lunes, 25 de marzo de 2019

Creación de Banners con GIF Maker

¿Qué es?

Es una herramienta la cual nos permite crear gifs a partir de varias imágenes, en este caso vamos a utilizarlo para crear un banner dinámico.

Pasos a seguir:

1. Subimos las imágenes.



2.Ponemos las imágenes en orden, es tan sencillo como hacer clic y arrastrar a la posición deseada.



3. En el Panel de Control modificamos el tamaño y la velocidad a la que queremos que vaya y le damos a Crear gif.



4. Una vez realizado, nos da la posibilidad de descargarlo, modificarlo, crear uno nuevo....



Y este seria el resultado:





miércoles, 20 de marzo de 2019

Banners

¿Qué son?

Son piezas publicitarias dentro de una página web, tienen como objetivo atraer tráfico hacia el sitio web del anunciante el cual paga por su inclusión, aumentar la presencia de una marca, dar a conocer un nuevo producto o servicio...  Pueden incluir imágenes, texto, animaciones, vídeos, audio.....

Pueden ser:

  1. Dinámicos: son aquellos que tienen incluidos sonido, video, animaciones especiales.....Son más atrayentes y proporcionan una mayor visibilidad.
  2. Estáticos: son los más básicos ya que no tienen ningún tipo de animación, suelen llevar un breve texto junto con el enlace a la web y un logo.

Ejemplos de Banners.

Dinámicos:

1. 
Tipo: 3:1 rectangle.
Dimensiones: 300x100 Resolución: 72 rpp
Formato: GIF Peso: 27 Kb
Modo de color: RGB
Fotogramas: 9  


2. 

Tipo: half-page ad
Dimensiones: 300x600 Resolución: 72 rpp
Formato: GIF Peso: 101 Kb
Modo de color: RGB
Fotogramas: 15  


3.
Tipo: medium rectangle 
Dimensiones: 300x250 Resolución: 72 rpp
Formato:GIF  Peso: 62 Kb
Modo de color: RGB
Fotogramas: 14  


4.
Tipo: skyscraper
Dimensiones: 120x600  Resolución: 72rpp
Formato: GIF Peso: 21 Kb
Modo de color: RGB
Fotogramas: 2 


5.
Tipo: 3:1 rectangle 
Dimensiones: 300x100  Resolución: 72 rpp
Formato: GIF Peso: 7 Kb
Modo de color: RGB
Fotogramas: 3 


6.
Tipo: leaderboard
Dimensiones: 728x90 Resolución: 72rpp
Formato: GIF Peso: 37 Kb
Modo de color: RGB
Fotogramas: 3 


Estáticos:

1.
Tipo: Half-page ad
Dimensiones: 300x600 Resolución: 72 rpp
Formato: PNG Peso: 196 Kb
Modo de color: RGB



2.
Tipo: half-page ad
Dimensiones: 300x600  Resolución: 72 rpp
Formato: PNG Peso: 205 Kb
Modo de color: RGB


3.
Tipo: medium rectangle
Dimensiones: 300x250  Resolución: 72 rpp
Formato: PNG Peso: 67 Kb
Modo de color: RGB


4.
Tipo: medium rectangle
Dimensiones: 300x250  Resolución: 72 rpp
Formato: JPEG Peso: 43 Kb
Modo de color: RGB


5.
Tipo: billboard
Dimensiones: 970x250  Resolución: 72 rpp
Formato: JPEG Peso: 103 Kb
Modo de color: RGB

6.
Tipo: Half-page ad
Dimensiones: 300x600  Resolución: 72 rpp
Formato: JPEG Peso: 40 Kb
Modo de color: RGB


Ejemplos en web:



Exposición Semana de la Producción 2018-2019

La Semana de la Producción es un proyecto destinado a los alumnos de los C.F de Artes Gráficas e Imagen y Sonido los cuales fusionan sus conocimientos adquiridos, creando su última actividad académica antes de su incorporación a la FCT.

Tiene una duración de 5 días para los C.F de Artes Gráficas y de 8 días para Imagen y Sonido.

Los alumnos dieron una charla explicando el proceso de diseño, los métodos de impresión y las técnicas usadas para conseguir el producto final.

Los productos fueron camisetas, tazas, bolsas, póster, packaging....