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: 




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.