Publi Electronicas: 2019

miércoles, 5 de junio de 2019

CSS III

Hola amijos y bienvenidos a una entrada más.

Y continuamos con CSS y etiquetas.

Como siempre, primero creamos un HTML.

Y seguidamente un CSS.

Vamos a repasar las etiquetas anterioeres:

Front-family: Cambia el estilo en el texto.

Front-size: Modifica el tamaño de la letra.

Front-Height: Espacio entre lineas.

Background: Permite elegir el fondo. Si usamos no-repeat solo saldrá una vez

Background-size: Cambiar el tamaño de las imágenes de fondo.

Padding: Tamaño del margen.

Margin: se utiliza para establecer de forma abreviada el valor de una o más propiedades individuales.

Text-decoration: Para subrayar (underline), suprarayar (overline), tachar (line-through) o parpadeo (blink).

Y ahora vamos a ver etiquetas nuevas.

Border-radius: Da mas o menos redondez a las esquinas.

Float: Pone una caja a la izquierda de la pagina.

Text-transform: Cambia las mayusculas y minusculas en un elemento concreto.

:hover: Crea un elemento con el que el usuario puede interactuar a través de el cursor.

Y este es el resultado final :3

Y bueno hasta aqui la entrada de hoy. Espero que os haya gustado.

Hola amijos y bienvenidos a una entrada más.

Esta vez vamos a seguir con las etiquetas de CCS.

En primer lugar, hacemos el HTML.

Si recordais las etiquetas de HTML, vereis que he creado una tabla.

Esto es el codigó CCS

Bueno, etiquetas nuevas:

Front-family: Cambia el estilo en el texto.

Front-size: Modifica el tamaño de la letra.

Front-Height: Espacio entre lineas.

Background: Permite elegir el fondo. Si usamos no-repeat solo saldrá una vez

Background-size: Cambiar el tamaño de las imágenes de fondo.

Padding: Tamaño del margen.

Margin: se utiliza para establecer de forma abreviada el valor de una o más propiedades individuales.

Text-decoration: Para subrayar (underline), suprarayar (overline), tachar (line-through) o parpadeo (blink).

Y el resultado final seria el siguiente.

Y hasta aqui la entrada de hoy. espero que os haya gustado y hasta la próxima.

jueves, 30 de mayo de 2019

CSS

Hola amijos y bienvenidos a una entrada más

Esta vez os traigo un pequeño resumen de lo que es el CSS y algunas etiquetas de el mismo.

El CSS (hojas de estilo en cascada) es un código web, enlazado con el código HTML, que permite darle a una pagina un estilo personalizado.

Mientras que el HTML es para crear los documentos web, el CSS cambia el color de fondo y letra y la fuente de la misma.

Para aplicarlo al HTML abrimos un documento con extensión .css y lo unimos con la extensión <link> en HTML

En el CSS se pondra lo necesario para personalizar, a traves de etiquetas, el HTML.

Para cambiar el fondo se utiliza la etiqueta {background=color}. El color de las letras con la etiqueta {color=color}.

y asi es como quedaría.

Y hasta aqui la entrada de hoy. Espero que os guste y hasta la próxima.

lunes, 27 de mayo de 2019

HTML5

Hola amijos y bienvenidos a una entrada mas.

Hoy voy a explicas como crear un archibo HTML con Dreamweaver, de adobe.

Pero que es HTML?

Es un lenguaje web de etiquetas que permiten contruir las paginas web para que los navegadores puedan entender el contenido y mostrarlo al usuario. En internet es le estandar en el que la inmensa mayoría de páginas están creadas.

Para poder crear un documento se deben saber cosas como loas etiquetas y su función.

Se debe escribir siempre entre las etiquetas <body></body>.

Las etiquetas básicas de HTML son las siguientes:

- <h1></h1>: Cabecero o titulo.

- <p></p>: Definir parrafo.

- <br></br>: Salto de linea. hace función de enter.

- <hr></hr>: Salto de linea con una linea negra.

- <strong></strong>: Texto en negrita.

- <em></em>: Texto en Cursiva

Para insertar enlaces o imágenes:

- <a href=" "> </a>: Para enlaces externos. la url se pone entre las comillas

-<img src=" "/>: Insertar imágenes. Para que la imagen se vea, debe estar guardada en una carpeta y no pedemos moverla porque si no el programa no las encuentran.

Os pondré un ejemplo. :3

Aquí esta el archivo como se vería en la web.

Y esto seria el HTML.

Y esto es todo por hoy. Espero que os haya gustado y hasta la próxima.

sábado, 25 de mayo de 2019

Cinemagraph

Hola y bienvenidos amijos a una nueva entrada.

En esta ocasión voy a enseñaros a hacer un cinemagraph.

Que es un cineamgraph???

Es una imagen animada. una combinación entre fotografía y video. Son estáticas casi en su totalidad a excepción de una pequeña porción de la imagen que esta en movimiento. su intención es sorprender al espectador.

Después de esta breve introducción y explicación, vamos a ver como se hace. Tranquilo todo el mundo, es más fácil de lo que parece. :3

En primer lugar os teneís que descargar un video. Claro, sin video no hay cinemagrap.

Yo escogí este:

https://www.youtube.com/watch?v=vrdk3IGcau8

Una vez hecho esto, lo abriremos en photoshop.

Seguidamente hacemos una copia y la rasterizamos. Hay dos formas de rasterizar una capa: En menu capa-> rasterizar-> video. y tambien, te vas a la capa -> clic derecho -> rasterizar.

Tenemos que vigilar que estén a la misma altura, por lo que hay que abrir la linea de tiempo.

En la capa rasterizada creamos una mascara de capa. Las zona en negro serán las que estén en movimiento y las blancas estáticas.

Cuidado con las capas visibles. vigilar eso porque puede confundiros y parecer que lo habeis hecho mal.

Cuando tengais el cinemagraph a vuestro gusto, os vais a la linea de tiempo, a las tres rayitas de la esquina superioir derecha. le damos clic y a la opción " Interpretar video", elegimos las opciones que que queramos y le damos a interpretar.

Y YA LO TENEMOS.

Un ultimo consejo, al principio probar con videos de un solo ángulo y que no se crucen los objetos o personas entre si, tendreís que ir fotograma por fotograma y es bastante engorroso.

Os dejo un par de ejemplos de como queda :3

Y hasta aquí la entrada de hoy. espero que os haya gustad y hasta la próxima.

jueves, 23 de mayo de 2019

Traslaciones en photoshop

Buenas amijos y bienvenidos a otra entrada mas.

Esta vez vamos a aprender ha hacer traslaciones en photoshop como dice en el titulo.

Para esto se necesitan como mínimo dos imagenes para poder hacer esto.

En la linea de tiempo, te aparece un simbolo como el que ves a continuación

Al darle clic te aparecen varias opciones, cuando te decidas por una la arrastras entre laos dos fotogramas y ya esta, ya lo tienes,

Asi es como quedaria.

Tambien le puedes poner efecos a las imagenes dando le a una pestaña en la esquina superior derecha en el fotograma.

A continuación os dejo un ejemplo

Y bueno hasta aqui la entrada de hoy espero que os haya gustado y hasta la proxima.

Photoshop Linea de tiempo

Hola amijos y bienvenidos un día más.

Esa vez vamos a aprender a utilizar la linea de tiempo de photoshop.

Es bastante fácil, pero aun así os explicare como funciona y os pondré un par de ejemplos.

En primer lugar tenemos que abrir, en el caso de que no este, en Menú -> vista -> Linea de tiempo.

Primero tenemos que escoger la o las imagenes. Hecho esto, en la linea de tienpo abres una pestaña que hay debajo y aqui te encontraras tres opciones:

Posición, opacidad y estilo.

Funcionan exactamente igual, primero le das clic para que aparezca el primer"ancalage" de ahi simplemente tienes que ir moviendo la imagen y photoshop ara el resto, por el movimiento que hagas se crearan los fotogramas faltantes áutomaaticamente.

Aqui no es como en los gifs que tienes que hacerlo manual, este no es tan engorroso pero tiene una pega no puedes hacer todo tipo de movimientos.

Aqui os dejo un par de ejemplos

Y bueno hasta aqui esta entrada. Espero que os haya gustado y hasta la próxima.

viernes, 12 de abril de 2019

Black mirror Banner

Hola amijos bienvenidos un día mas a otra entrada.

Hoy os voy a enseñar unos gif muy chulis de black mirror. Espero que os gusten UwU 💕

Computer error

Cuenta atras

Mom movil

October

Password

Program

Y hasta aqui la entrada de hoy. Espero que os haya gustado. Un abraso mijos y hasta la proxima.

Gifs

Hola amijos y bienvenidos un día más.

¿ Quieres presumir delante de tu pandilla de ser el mas pro con photoshop, de hacer gif espectaculares y dejarlos con la boca abierta? No busques más.

Hoy os voy a explicar como hacer un gif en photoshop. Tranquilidad todo el mundo, es mas fácil de lo que parece.

En primer lugar tenemos que elegir la o las imágenes que queramos volver gif. Para hacer el gif tenemos que usar la linea de tiempo. En este caso yo use un fondo rojo con una bailarina que dará vueltas.

Para hacer el efecto de giro tenemos que hacer copias y deformar a la bailarina cada vez más en cada capa. Nunca en una misma capa. Repito. NUNCA. Como lo hagáis, voy a vuestra casa a pegaros.

Tras hacer esto, nos vamos a la linea de tiempo y comenzamos a crear fotogramas con cada capa. luego si eso le cambias la velocidad.

Truco del almedruco: para seleccionar todos los fotogramas para cambiarle la velocidad y no tener que ir de una en una, pulsa sift y haz click hasta la capa o fotograma que quieras seleccionar y en una de ellas le das en el numero que te aparece debajo de los fotogramas donde se cambia la velocidad.

Después de haber terminado de poner fotogramas podrás ver el resultado y ajustarlo a tu gusto.

Para guardarlo en formato .GIF nos vamos a Menú Archivo --> Exportar --> Exportar para web (heredado) y le pones en formato gif como se ve en la imagen. Importante* pon la opción de infinito porque así no se reproducirá una vez en la página.

Y ya lo tienes carajo. Tu gif único y especial. No me des la gracia.

Os voy a dejar por aqui un par de ello para que veas el resultado.

Bueno y hasta aquí la entrada de hoy. Espero que os haya gustado. Un abraso mijos y hasta la próxima entrada.

Banners en Photoshop

Hola amijos bienvenidos otro día más.

En esta ocasión vengo a explicaros y daros pequeñas instrucciones para crear un banner vuestro, único y especial en photoshop, usando la linea de tiempo. Si no sabeis dónde encontrarla, que no panda el cunico, menú----> ventana----> Linea de tiempo. ;)

Bueno lo primero es crear las imágenes para nuestro gif en photoshop.

Las mias son estas.

Una vez creadas nos vamos a ir a una pagina para crear el banner interactivo. La pagina que he usado yo es gifmaker.

En primer lugar subimos y selecionamos las imagenes creadas previamente en Photoshop.

Tras subirlas te dará la posibilidad de controlas la velocidad y el orden de las imagenes.

Tras tener el banner a nuestro gusto le daremos a "Create GIF Animation" y después a Download the GIF justo debajo.

Y ya tenemos nuestro banner personal creado ;)

Dejo por aquí el mío para que veáis más o menos el resultado.

Y bueno, Hasta aqui esta entrada. Espero que os haya gustado. Un abrazo.