PRIMER CURSO PREIMPRESIÓN DIGITAL : 2019

jueves, 30 de mayo de 2019

CSS

¿QUÉ ES UN CSS?

- El css es la parte del html separada a él, que nos ayuda a crear las características de estilo , programación y lenguaje.

En el html"llamamos" css para darle órdenes.

-Si queremos crear un archivo css en la aplicación de Dreamweaver , simplemente le damos a File - new - css

A continuación os voy a mostrar la comparación de la pantalla con el archivo css y el archivo html.

Como podéis ver el fondo tiene color y las letras del titulo igual. Esto es gracias al css.

Aquí estáis viendo ya la pantalla con el archivo css abierto. También tiene una pantalla de previsualización arriba y abajo están escritas en forma de código las indicaciones de estilo que tiene que hacer en el archivo html.

Hay que tener en cuenta que las etiquetas del css , son diferentes a las del html.

ETIQUETAS CSS :

-background:para añadir algo de fondo

-color: para añadir color al texto u imagen o fondo.

jueves, 23 de mayo de 2019

HTML

- Hola !!!!!! en esta entrada de hoy os voy a mostrar qué es el html y después os voy a enseñar cómo llevarlo a acabo con la aplicación de Adobe Dreamweaver CC.

¿QUÉ ES EL HTML?

Es el lenguaje de marcado de hipertexto que se utiliza para dividir un documento , especificar sus contenidos y su estructura , y definir el significado de cada parte ( es lo que incluye todo el texto ,etc.., que se ve en las páginas web)

El html5 es la versión mejorada del html . Por lo cual , sus dos mayores ventajas respecto al html son , que ocupa muchísimo menos espacio , y , que se puede ver en distintos dispositivos.

Lo que vemos en esta imagen es el lenguaje html , como podéis ver tenemos el texto dentro de la etiqueta 'body' que es el cuerpo , y delante de cada texto tenemos una ETIQUETA , la etiqueta es lo que nos va a indicar si lo que viene ahora es un texto , una tabla , un video , un enlace a una web o simplemente el tamaño de la imagen que aparece por otro lado reproducido en web.

La ESTRUCTURA BASE DEL HTML está compuesta por :

<html

<head>

<head/> titulo de lo que se va a hablar o visualizar

<body> texto, imagen , video , enlace.. (CUERPO)

</body>

</html> cierre del documento html

Ahora os voy a explicar un poquito la imagen de arriba para que entendáis un poquito mejor de que va.

En el cuadrado rosa que he dibujado , muestra lo que se está viendo en web.

Y lo que se ve en el cuadrado verde , es donde nosotros escribimos el lenguaje html.Como estaréis observando y como he dicho antes , delante de cada texto , video , enlacde , distorsionamiento de imagen aparece en forma de código , que es la etiqueta .

Hay distintas etiquetas para , cada una única para realizar una acción en concreto.

ESPERO QUE OS RESULTE ÚTIL Y FÁCIL DE ENTENDER!!!!!!

BANNER EN HTML

BANNER EN HTML5

Hola a tod@s , a continuación os voy a mostrar una forma muy sencilla de hacer banner dinámicos a través de html5.

La app que he utilizado se llama ONLYOMEGA

En esta captura os muestro la app , podéis probar a crearlo desde cero o , escoger una plantila.

A demás te deja seleccionar el tamaño de banner.

ESTE ES MI BANNER :

banner html5

lunes, 20 de mayo de 2019

CINEMAGRAPH

¿QUÉ ES EL CINEMAGRAPH?

-Seguramente os suene mucho esta palabra de haberla visto en redes sociales , televisión , etc...

Pero en sí el cinemagraph es una imagen estática y otra en movimiento.

Su intención es transmitir sensaciones y sorprender al espectador.

AQUÍ TENEÍS VARIOS EJEMPLOS :

En este cinemagraph la noria esta en movimiento y el tráfico de los coches y la gente está estático.

Este es otro ejemplo de cinemagraph , que como podéis ver , hay una parte en movimiento y otra estática.

Este es mi cinemagraph libre.

jueves, 11 de abril de 2019

BANNER BLACK MIRROR

BLACK MIRROR

En esta práctica hay 6 banners , los cuales se han ido creando en photoshop utilizando la línea del tiempo.

Para mí , el que más me ha costado ha sido el de la cuenta atrás , ya que le tuve que repetir unas 5 veces porque no se me terminaba de quedar bien el texto. Es decir al cambiar de capa y poner el texto nuevo se notaba parte del anterior debajo.

Este es el primer banner que he hecho. Consiste en ir creando una línea que haga la apariencia de que se va cargando una barra. A la vez pones el texto ERROR de forma intermitente. En mi opinión lo que más me costó fue la perspectiva de la barra , que como podéis ver en la barra de abajo está por una parte más alejada de la de arriba de lo normal.

Aquí como podéis ver la línea de referencia por donde se mueve la línea rosa esta desastrosa ya que de las selecciones y a la hora de cambiar de capa me costó mucho hacerlo limpio.Los números tampoco son de la misma tipografía de la que parte la imágen , que es el numero 5 , pero en sí la actividad que debe hacer , la hace correctamente , que es la de que la línea rosa gire y a su vez se cambien los números y las letras.

En este banner , el objetivo es hacer que dé la impresión de que cuando llega una llamada el móvil vibré. A la vez que aparece poco a poco el nombre de la persona que llama , con sus símbolos de colgar y descolgar. Mi opinión respecto a este banner es que ha sido el que más me ha gustado ya que pienso que me ha salido bastante realista , menos porque al hacer que se mueva el móvil en sí , se mueve la pantalla a destiempo. Los símbolos los he copiado en photoshop y me he quedado con las siluetas , las cuales , luego he rellenado de su color característico cada una de ellas.

Este banner es un calendario dinámico. Sinceramente es fácil ya que a las X están echas pintadas poco a poco y a la vez creando capas nuevas . Se debería de notar la diferencia del color de las X respecto a la intensidad del color , pero se ve directamente como un cambio radical de gris a un gris muy oscuro si lo queréis hacer bien prestar mucha atención al color del original.

Este es el banner más fácil de todos los que os muestro aquí , ya que solo tienes que hacer capas en las que se vayan alternando los símbolos y bajas la opacidad.

Recomiendo empezar por uno sencillo si queréis empezar a hacerlos para que aprendáis la mecánica de como funcionan.

Y este es el último banner que hice de esta práctica q, que la verdad que también es muy sencillo , por si queréis empezar por hacer algo del tipo así. Simplemente consiste en crear capas y en cada una de ellas poner una letra y el punto que las acompaña.

ESPERO QUE OS HAYA GUSTADO Y PARECIDO ÚTIL !!!!!!!

miércoles, 10 de abril de 2019

BANNERS EN PHOTOSHOP POP UNDER Y LARGE RECTAGLE

BANNER DINÁMICOS Y ESTÁTICOS

En esta práctica hemos tenido que crear dos banner de diferentes tamaños y con diferente diseño.

Los dos han sido diseñados en photoshop. A continuación os voy a mostrar como me han quedado y debajo de cada uno os indicaré el tamaño de ese banner :

POP UNDER

LARGE RECTAGLE

jueves, 28 de marzo de 2019

BANNER EN PHOTOSHOP

LOS BANNER EN PHOTOSHOP

- Los banner en photoshop son secuencias de imágenes estáticas en movimiento rápido.

Cada elemento o imagen editibale del fotograma en la línea de tiempo de photoshop aparecerá como si fuese una capa , por lo cual no es muy difícil de entender.

El tiempo aproximado de duración que he utilizado ha sido de 0,1-0,2 segundos.

Y a la hora de guardarlo en photoshop sería a través de ARCHIVO - EXPORTAR- GUARDAR PARA LA WEB HEREDADO

CONSEJO : utilizar la opción de infinito para que se repita todo el rato y se pueda ver el efecto deseado.

AQUÍ OS DEJO MIS DOS BANNERS 👇👀

300 x 600

REPETICIÓN INFINITA , 72ppp

Este banner está hecho desde cero es decir , he cogido la silueta de la bailarina y he cambiado el fondo a un color rojo llamativo. El truco está en ir creando una capa nueva a la vez que la vas haciendo más pequeña y le vas cambiando la perspectiva para dar la sensación de movimiento.

300 x 100

REPETICIÓN INFINITA , 72ppp

BANNER INSTITUCIONAL DEL IES PUERTA BONITA

En el baner institucional he cogido el gif de la entrada anterior y en photoshop en vez de crearlo desde cero , he añadido capas intermedias para hacerlo más largo y que se vean diferentes transformaciones de las imágenes.

lunes, 25 de marzo de 2019

GIFMAKER

¿QUÉ ES GIFMAKER ?

GIFMAKER es una aplicación web que se encarga de crear archivos en formatos gif. Puedes crear tanto un gif como utilizarlo para crear un banner.

Solamente tienes que coger las imágenes que vas a utilizar y arrastrarlas a un panel que hay.

Como toda aplicación tiene sus herramientas , en ellas puedes elegir la velocidad del gif , e ritmo con el que quieres que pasen las imágenes seleccionadas y hasta puedes añadirle música.

En mi caso he utilizado esta app para crear un banner institucional de mi instituto , os voy a enseñar las 5 imágenes que he utilizado. Entre ellas está la portada diseñada por mi . También están los 4 ciclos de mi instituto dedicados al diseño gráfico.

ESTE ÚLTIMO ES MI BANNER CREADO EN GIFMAKER 👈

jueves, 21 de marzo de 2019

CLASES DE BANNERS

BANNERS

- ¿QUÉ ES UN BANNER ?

Es una pieza publicitaria dentro de una página web. Su objetivo es atraer tráfico hacia el sitio web del anunciante que paga por su inclusión.

Su contenido puede incluir imágenes , textos , animaciones , vídeos , audio , formularios...

Las medidas se establecen en pixeles y el peso en KB , suelen rondar los 30-50 Kb

TIPOS:

- ESTÁTICOS : no tienen ningún tipo de animación, tienen un breve texto de información con enlace a la web, y pueden tener un logo.

-DINÁMICOS : tienen algún tipo de animación , ya sea corta o larga, efectos de texto e imágenes que lo hacen más interesantes , enlace a la web , y estos pueden tener:logo , texto simple , slogan, idea de venta, texto publicitario e imagen.

-ROTATIVOS : son un tipo de banners que dependiendo de la importancia que quieras darle , se puede ajustar para aparecer cada periodo de tiempo.

A continuación os muestro 6 ejemplos de cada uno ( estáticos y dinámicos )

ESTÁTICOS :

BANNER ESTÁTICO ENCONTRADO EN AMAZON

BANNERS TAMBIÉN ENCONTRADO EN AMAZON

BANNERS PUBLICIARIO DE RENAULT DE FONDO, EN LA PÁGIAN DE EL PAIS

BANNERS ESTÁTICO ENCONTTRADO EN VOLKSWAGEN

BANNERS PUBLICATORIO EN UNA PÁGINA DE COMIDA

BANNERS PUBLICIATRIO ENCONTRADO EN UNA PAGINA SIN MAS LLAMADA :

DINÁMICOS :

CORTE INGLÉS , BANNER DEL NIÑO

BANNER DE LA PÁGIAN WEB DEL CORTE INGLÉS

BANNER DE COMPAÑÍAS MÓVILES

PÁGINA WEB DE CINESA DONDE SE ENCONTRABA EL BANNER DINÁMICO

BANNER DE COCHES ENCONTRADO EN LA PÁGINA YASS

PÁGINA YASS

BANERS PUBLICITARIO DE MEDIASET EN LA PÁGINA YASS

BANNER PUBLICITARIO DE CUATRO

PÁGINA WEB DONDE SE ENCUENTRA EL BANNER PUBLICITARIO DE CUATRO

BANNER PUBLICITARIO DE YVES ROCHER

PÁGINA WEB TELECINCO DONDE HE ENCONTRADO EL BANNER PUBLICITARIO DE YVES ROCHER

ABAJO OS VOY A DEJAR EL PESO DE CADA BANER , EL FORMATO Y LAS DIMENSIONES. EN CASO DE UN BANNER DINÁMICO , OS PONDRÉ TAMBIEN EL NÚMERO DE FOTOGRAMAS DE LOS QUE SE COMPONEN.

ESTÁTICOS :

BANNER 1 : DIMENSIÓN - 1500 x 600. MODO DE COLOR - RGB . TAMAÑO - 98 KB.

BANNER 2 : DIMENSIÓN - 1940 x 500. MODO DE COLOR - RGB . TAMAÑO - 66 KB.

BANNER 3 : DIMESIÓN - 2048 x 1152. MODO DE COLLOR - RGB . TAMAÑO - 492 KB.

BANNER 4 : DIMESIÓN - 640 x 420. MODO DE COLOR - RGB . TAMAÑO - 131 KB.

BANNER 5 : DIMESIÓN - 980 x 220. MOD DE COLOR - RGB . TAMAÑO 33 KB.

BANNER 6 : SE HA ENCONTRADO EN LA PÁGINA DEL PAÍS COLOCADO DE FONDO. ASI QUE ES IMPOSIBLE DESCARGARLO Y SABER SUS DIMESIONES. PERO COMO PODÉIS VER EL MODO DE COLOR COINCIDE IGUAL EN TODOS LOS BANNER .

TODOS LOS FORMATOS DE ESTOS BANNERS SON JPEG.

DINÁMICOS :

BANNER 1 : 2 FOTOGRAMAS . DIMENSIÓN - 600 x 700 . MODO DE COLOR - RGB . FORMATO - GIF . TAMAÑO - 336 KB.

BANNER 2 : AL SER UNA CAPTURA PORQ NO ME DEJABA DESCARGARLO NO OS PUEDO DECIR SUS CARACTERÍSTICAS.

BANNER 3 : 3 FOTOGRAMAS . DIMENSIÓN - 980 x 90 . MODO DE COLOR - RGB. FORMATO - GIF . TAMAÑO - 70 KB.

BANNER 4 : 125 FOTOGRAMAS . DIMESNIÓN - 300 x 600 . MODO DE COLOR - RGB . FORMATO - GIF . TAMAÑO - 823 KB ( SUPERA EL TAMAÑO GENÉRICO )

BANNER 5 : 3 FOTOGRAMAS . DIMESIÓN - 990 x 90 . MODO DE COLOR - RGB ( PERFIL SRGB IEC61966-2.1) . FORMATO - GIF . TAMAÑO - 152 KB .

BANNER 6 : 2 FOTOGRAMAS . DIMESIÓN - 300 x 600 . MODO DE COLOR - RGB. FORMATO - GIF . TAMAÑO - 143 KB.

lunes, 18 de marzo de 2019

SEMANA DE PRODUCCIÓN

LA SEMANA DE PRODUCCIÓN

- La semana de producción es una semana en la que se dedica todo el tiempo a exponer proyectos realizados por los alumnos del 2 año , tanto del grado medio , como del grado superior. Sinceramente hay grandes diseños muy chulos que por suerte os voy a enseñar.Hay diseños de camisetas , de tazas , catálogos , bolsas , diseños de campañas publicitarias e incluso de portadas de revistas.

Diseño de una página de la revista TOULUSSE.

Diseño del metro de la casa de papel

Diseño de una campaña publicitaria del exterior de un edificio de Callao.

Selección final del diseño de camiseta.

Selección final de diseño de bolsa.

A parte de estos proyectos que os he enseñado había muchos más , los cuales los diseñadores de estos nos han contado paso por paso su proceso y los errores que se han ido encontrando hasta llegar al resultado final.

Bajo mi punto de vista es una semana muy interesante en la que puedes aprender y sobre todo descubrir la creatividad de otras personas.

lunes, 11 de marzo de 2019

STOP MOTION

¿QUÉ ES STOP MOTION?

Es una técnica de rodaje basada en continuas tomas fotográficas , donde cada plano varia ligeramente del anterior , creando así la ilusión de una animación , como en los dibujos animados y en los cortos con muñecos de plastilina.

La animación se realiza cuadro a cuadro , variando ligeramente la posición de los muñecos o recortes de imágenes en función del movimiento que se quiera dar , adecuada al argumento o mensaje que se quiera dar.

En mi caso hemos utilizado recortables en papeles de colores y cartulinas para crear el Stop Motion , a continuación os muestro unas imágenes :