Preimpresión Digital Muri

Entradas

Mostrando entradas de 2019

CSS con Link

- junio 05, 2019

El CSS con link es aquel que interviene con varios links, tantos de imágenes, como de páginas web. En esta práctica hemos creado un HTML y un CSS con edición de varios elementos, hemos modificado tanto la letra interna (siendo de otra página web) , imágenes incorporadas y color/formato de los enlaces El HTML creado se ve así: Únicamente en el HTML hemos vinculado con el CSS y hemos metido enlaces de Linkdin, como se vé en la imágen de arriba, en el CSS (abajo) hemos modificado varios códigos. Vinculado con HTML hemos importado un tipo de fuente de Googleapis y la hemos incorporado. Hemos configurado sus parámetros, el cuerpo (body) hemos puesto una imágen lateral la que tenemos en la carpeta (author_page.jpg) La lista de enlaces la hemos puesto centrada, y el título (h1 y h2) lo hemos centrado también. Por último hemos puesto color al texto y una línea para que nos señale el URL.

CSS

- mayo 30, 2019

Es un lenguaje de programación interna de HTML que configura su forma de lectura, orden o escritura. Describe como se va a mostrar un documento en pantalla por escrito o voz. Cuando tengamos un archivo de HTML y queramos editar sus detalles internos, crearemos un CSS en un programa como Dreamweaver de esta manera: Al elegirlo , se nos creará una ventana con el <charset> (que es el tipo de archivo que que nos permite enlazar) y body (cuerpo de página). Nos incluirá una etiqueta de CSS que nos define que archivo estamos utilizando. A partir del body, pondremos todo lo que queremos cambiar, en este caso, el fondo (background) con un color específico de la pantonera y editar el color de las cabezas de texto, también, de colores distintos. Para introducir estos datos en el HTML, crearemos la etiqueta <link> que nos permite enlazarlo con otro tipo de archivo, introducimos la forma de edición y estilo que queramos "stylesheet" y por último, el archivo que...

HTML

- mayo 20, 2019

El HTML (lenguaje de marcado de hipertexto) se utiliza para dividir un documento, especificar su contenido y su estructura, definir el significado de cada parte , utilizando los elementos de diferentes componentes de una página. Suele tener varios componentes tanto como archivos como texto, le explicaremos a continuación a partir de la imagen del proceso de una página: Aquí tenemos una captura de la aplicación que usamos, Dreamweaver CC , es un editor HTML del paquete de Adobe, a simple vista se ve poco y así de primeras apenas se entiende, pero con ayuda explicamos las partes. Lo primero y fundamental crear un título y un cuerpo (en este caso nos lo hace automáticamente el <title> y <body> ) el cual el títulos nos aportará el título del archivo o en este caso, de la página. El cuerpo es todo lo que va a contener y especificar nuestros etiquetas, pestañas o códigos, es la parte más importante porque a partir de ahí, se crea todo. Esto ya son etiquetas...

Cinemagraph

- mayo 08, 2019

Un Cinemagraph nos permite modificar varios elementos de un vídeo para que no se muevan, de esta forma parecerá que solo se mueve una parte de la imágen y la otra se quedará estática. La manera de hacerla se compone de 3 fases: 1- Tiene que crearse una capa con la imágen estática del vídeo y situarla encima del vídeo para que haga efecto. Con la imágen puesta en primer plano, procedemos a usar una máscara de capa como en la segunda imagen y tapar (con el negro) lo que queremos que se quede en movimiento. Lo blanco será lo que se quede estático, de esta forma, se verá el movimiento del vídeo. Después de crear el vídeo en buen estado, procederemos a guardar el vídeo con la opción "Interpretar Vídeo" e lo convertiremos en formato .mp4 En estas dos prácticas, en uno se mueve la noria, y en otro solo los coches. Aquí por ejemplo, se detalla como en uno

Transición de vídeo en Photoshop

- mayo 08, 2019

La transición de video consiste en hacer un vídeo con sus efectos dentro de Photoshop. Tal vez Photoshop no sea la mejor opción para hacer este tipo de vídeos, pero tiene funciones que ayudan a hacerlo. A continuación vemos las formas de edición de los tramos del vídeo, es decir, editar las imágenes para que hagas transiciones de rotación, para que sean transversales... También disponemos con la función de aumentar el zoom, disminuirlo, pero estos son los llamados efectos de movimiento, que consiste en editar el movimiento e desplazamiento de la imágen. Editándolo y poniendo efectos tanto de movimiento como de transición, nos quedaría algo así, un conjunto de imágenes con varios efectos que todos ellos se componen para hacer un vídeo. En este caso hemos utilizado para esta práctica imágenes y audio de la serie "Bola de Dragón".

Línea del tiempo con Photoshop

- mayo 08, 2019

La línea del tiempo de un vídeo o un gif, es aquel tramo y sus características que recorren por el periodo de tiempo del vídeo o imagen animada. En Photoshop también la forma de hacerlo eligiendo línea de tiempo en la zona de ventanas, puedes elegir la forma de verlo tanto como de reproducirlo, de esta forma la más cómoda para nosotros. Nosotros elegiremos la forma de vídeo, asi podremos ponerlo en formato web y que lo podamos reproducir correctamente, de baja calidad pero que no de muchos problemas al usuario para reproducirlo. Tiene 3 opciones, Posición, Opacidad y Estilo . Estas 3 opciones son para poner detalles extras, crear a partir de una imagen, un video o gif. En el vídeo siguiente pondremos como la bailarina, cambia de posición, tamaño e estilo en el mismo tramo.

Banner HTML5

- abril 29, 2019

El banner HTML5 es aquel banner producido con un código insertado para ponerlo directamente en el código fuente base de la página web. Para esto, utilizaremos Bannersnack. Esta página es para crear tanto banners estáticos como dinámicos, sobre todo que facilite al usuario hacerlo, o con plantillas hechas para los novatos, nos permiten insertar imágenes , vídeos, texto... en el banner. Aquí tenemos las capas creadas con su estilo, color, párrafo y orden , para que cada uno esté correctamente puesto. Tiene opciones de coste, pero las más usadas son gratis y con gran amplitud de opciones. Esta vez pondremos un banner interactivo, de tamaño medio que nos llevará a la web de Preimpresión la cual estamos y otro el cual nos llevará al banner de un compañero nuestro.

Black Mirror

- abril 25, 2019

Hemos tenido que crear unos cuantos gifs de la famosa serie de Black Mirror, una serie producida por Netflix la cual cuenta unos posibles futuros en la vida si fuesemos por tal dirección, serie de 10. Todos estos gifs están hechos y editados por Adobe Photoshop, en cada gif explicaré un mini resumen de lo que significa: En este caso, nos lleva al capítulo de Bandersnatch, el primer capítulo interactivo de una serie de Netflix e innovadora, cuenta la historia de un programador que está formando su propio juego viviendo con su padre, conseguirá lograr un récord? TU DECIDES. En este caso, nos lleva al mundo del amor por Internet, que pasaría si nos ponemos un tiempo de relación... mejor dicho, que un programa nos lo ponga y debemos cumplirlo. Os parece de locos? Tiene un 99% de efectividad. Os imaginais vivir en un mundo recreativo, un mundo de realidad aumentada pero en directo? Tiene sus partes buenas y malas, sobre todo, cuanto te piden una cosa y no la cumpl...

Banners dinámicos

- abril 25, 2019

Actualmente, tenemos tanto banner dinámicos como estáticos, en este caso hablaremos de los banners dinámicos. De igual forma se crea que los estáticos pero aquí tenemos que jugar con la línea del tiempo. En la línea del tiempo tendremos que especificar el tiempo que queremos ponerlo, cada fotograma con sus capas, podremos meter transiciones, efectos... Sobre todo , gestionar a simple vista la velocidad de transporte de capas Después de terminar, antes de "Guardar como..." , le daremos a exportar, y "Guardar para Web (heredado)". Tendremos que guardarlo como GIF y en baja resolución, asi que no ocupa en web y su velocidad es buena. Los siguientes ejemplos son banners dinámicos:

Gifs con Photoshop (Línea del tiempo)

- abril 01, 2019

Línea del tiempo en Photoshop es una función para editar o crear gifs animados desde photoshop de forma sencilla e organizada. Como veremos en la imagen, tenemos en la línea del tiempo el gif creado en partes las cuales se irán reproduciendo por el tiempo que pongamos desde 0 hasta lo que queramos de segundos, podemos ponerlo como Infinito (Loop interminable) para que no pare nunca o lo podemos asignar de una o dos veces. Se pueden crear capas extras además de las que tenemos o eliminarlas, depende si queremos alargar o acortar el gif. Creamos estos momentos de tiempo a partir de las capas fijas que queramos poner, podemos ir poniendo cada uno en su momento para que quede bien el gif que queramos crear. Podemos establecer una capa fija desde el primer momento, lo importante es tenerlo en cuenta en las demás capas y añadir o removerle lo que queramos. Las líneas del tiempo no tienen limite en cuanto a las imágenes que queramos poner, pero eso nos hace que el gif ocupe mu...

GIFMaker

- marzo 21, 2019

GIFMaker es una página que te crea gifs a partir de una serie de imágenes sin complicación par ser utilizado como un banner o por gusto personal con una serie de características como la música, introduciones, movimiento... Es la forma más facil de hacerlo ya que nos permite modificar varias cosas del gif como por ejemplo el Canvas Size, que es el tamaño del banner, tanto su tamaño como su reproducción de % nos permite modificar, la velocidad en la que queremos que se mueva cada imagen, su loop, que es la secuencia de repeticiones de eso y también si queremos añadirle música a través de una URL con plataformas como Youtube. El resultado queda depende como lo configures, una vez terminado los ajustes, le das a "Create GIF animation", las otras opciones son para crear frames, videos o gifs combinados con otros. De esta manera se guarda de esta manera el banner animado. El siguiente banner está descrito como "Megabanner" , su tamaño es de 728x90 pixeles, s...