Gif con KMPlayer

Hola..

Continuare con los tutoriales para Gif con los cuales llevo mucho tiempo de retraso.. una disculpa

Si no mal recuerdo nos quedamos en como hacer un Gif con un Clip de Vídeo con KM Player, bueno entonces comencemos.

En KM Player

1° Primero debes tener un vídeo, puedes descargarlo de You Tube, Dailymotion o del lugar que ustedes prefieren.. no les dejo tutorial de como hacerlo porque creo que lo deben saber si no puedes dejarme un mensaje y haré un tutorial sobre como y que páginas uso yo.

El formato del vídeo no importa, yo siempre los descargo en formato .flv ya que son menos pesados y mantienen una calidad promedio por no decir buena.

Abrimos el vídeo en KM Player [ Open + Aceptar ]

2° Ahora das CTRL + G y te aparece el menú de Extracción de Imágenes seleccionando primero una carpeta donde se guardarán las imágenes que se crearán.

3° Seleccionas las opciones como las dejo, pueden variar pues depende de la cantidad o los segundos que le des. Le das en comenzar y dejas que corra el vídeo, el programa en si te dice cuando termina e igual el número de capturas que son.

En Photoshop

1° Abre Photoshop y te vas a Archivo > Secuencias de Comando > Cargar Archivos en Pila.

2° Seleccionas  todas las capturas o.. en la opción usar seleccionas CARPETA y das click en Explorar para buscar la carpeta donde las guardaste

Al seleccionar la carpeta te aseguras que las capas correspondan en número y le das en OK.

como ves las capas han quedado en orden y se han abierto todas de una vez.

3° En la ventana de Animación das click en la pestañita y luego en Crear cuadros a partir de capas esto hará completamente la animación o Gif ya que como dice el nombre te crea tantos cuadros de animación como capas tengas.. Importante: asegurate de no haber aplicado ajustes antes ya que esto te creará cuadros innecesarios que después tendrás que borrar.

4° Como opción puedes meter las capas en una carpeta para mayor orden.  Y ahora si aplicas un PSD, una action o los ajustes para editar el Gif yo por ejemplo use 2 correcciones Selectivas, 1 Mapa de Degradado, 2 Filtros de Fotografía y 1 Brillo y contraste.

5° Recuerda que puedes cambiar el tiempo y las veces que se repetirá el Gif. Seleccionas todas las capas dando click en la misma pestaña donde creamos las capas y le das en seleccionar todos los cuadros.

Extra: Si quieres cambiarle el tamaño das Ctrl + Q o (menú Imagen + Tamaño de Imagen)

Mi Resultado:

Tablilla de propiedades Css

Como les prometí en el pasado tutorial aquí las principales propiedades y valores que se les puede dar...
No puedes llevarte la tabla a otro lado sin pedirla antes y dar créditos

═❖═ Enlaces ═❖═

✰

✰ NO VISITADOS
● a: link

✰

✰ VISITADOS
 ● a:visited

✰

✰ ENLACES ACTIVOS
 ● a: active

✰

✰ CUANDO EL RATÓN ESTA ENCIMA DEL ENLACE
 ● a: hover

═❖═ Propiedades de Fuentes ═❖═

✰

✰ FONT (Fuentes)
● font-style
● font-variant
● font-weight
● font-size
● font-family Ejemplo: p { font: italic bold 12pt Times, serif }

✰

✰ FONT-FAMILY (Familias)
● nombre de familia
● familia genérica (serif, sans-serif, cursive, fantasy, monospace)
Ejemplo: p { font: font-family: "New Century Schoolbook", Times, serif; }

✰

✰ FONT-STYLE (Estilo)
● normal
● italic
● oblique Ejemplo: p { font-style: oblique; }

✰

✰ FONT-VARIANT (Variante)
● normal
● small-caps Ejemplo: h1 { font-variant: small-caps; }

✰

✰ FONT-WEIGHT (peso)
● normal
● bold
● bolder
● lighter
● oblique Ejemplo: p { font-weight: normal; }

✰

✰ FONT-SIZE (tamaño)
● tamaño absoluto (px, pt)

(xx-small, x-small, small, medium, large, x-large, xx-large)

● tamaño relativo (larger,smaller)
● longitud
● porcentaje (%, em) .... Ejemplo: h1 { font-size: 12pt; }

═❖═ Color y Fondo ═❖═

✰

✰ COLOR (color)
● hexadecimal (#000000)
● RGB [rgb(255,00)]
● nombre del color (red) Ejemplo: p { color: #FFFFFF; }

✰

✰ BACKGROUND (Fondo)
● background-color
● background-image
● background-repeat
● background-attachment
● background-position Ejemplo: body { background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; }

✰

✰ BACKGROUND-COLOR (color de fondo)
● color
● Transparent Ejemplo: body { background-color: #FFCC66; }

✰

✰ BACKGROUND-IMAGE (Imagen de fondo)
 ● url Ejemplo: body { background-image: url (http://www.image.com/bg.png); }

✰

✰ BACKGROUND-REPEAT (Repetir fondo)
● repeat
● repeat-x
● repeat-y
● no-repeat Ejemplo: body { background: white url (white.gif); background-repeat: repeat-x; }

✰

✰ BACKGROUND-ATTACHMENT (Fijación de fondo)
● scroll
● fixed Ejemplo: body { background: white url (white.gif); background-attachment: fixed; }

✰

✰ BACKGROUND-POSITION (Posición del fondo)
● unidades fijas (px-cm-etc)
● top
● bottom
● center
● left
● right
● porcentaje Ejemplo: body { background: white url (white.gif); background-position: right bottom; }

═❖═ Texto ═❖═

✰

✰ TEXT-INDENT (sangría del Texto) Ejemplo: p { text-indent: 30px; }

✰

✰ TEXT-ALIGN (Alineación del Texto)
● left
● right
● center
● justify Ejemplo: p { text-align: center; }

✰

✰ VERTICAL-ALIGN (Alineación Vertical del Texto)
● baseline (alinea líneas bases del elemento)
● middle (alinea el punto medio vertical del elemento)
● sub (subíndice)
● super (superíndice)
● text-top (alinea las partes superiores del elemento y la fuente)
● text-bottom (alinea las partes inferiores del elemento y la fuente)
● top (alinea la parte superior del elemento con el elemento más alto en la línea)
● bottom (alinea la parte inferior del elemento con el elemento más bajo en la línea) Ejemplo: img { vertical-align: middle }

✰

✰ TEXT-TRANSFORM (Transformación del texto)
 ● Capitalize
● UPPERCASE

UPPERCASE

● lowercase
● none Ejemplo: h1 { text-transform: uppercase; }

✰

✰ TEXT-DECORATION (Decoración o efectos del texto)
● Underline (subrayado)
● Overline (subrayado por encima)
● line-through (tachado)
● none Ejemplo: A:link, A:visited, A:active { text-decoration: none; }

✰

✰ LETTER-SPACING (Espaciamiento de letras)
● Normal
● longitud Ejemplo: p { letter-spacing: 0.1em; }

✰

✰ WORD-SPACING (Espaciamiento de palabras)
● Normal
● longitud Ejemplo: p { word-spacing: 0.4em; }

✰

✰ LINE HEIGHT (Altura de línea)
● Normal
● Número*
● longitud
● Porcentaje Ejemplo: p { line-height: 200%; }

*Nota: Si fuese un número esta se calcula multiplicando el tamaño de fuente del elemento por el número.

═❖═ De los cuadros ═❖═

✰

✰ MARGIN (Margen)
● Top (superior) (Valores: longitud, porcentaje, auto)
● Right (derecho) (Valores: longitud, porcentaje, auto)
● Left (izquierdo) (Valores: longitud, porcentaje, auto)
● Bottom (inferior) (Valores: longitud, porcentaje, auto) Ejemplos: p { margin: 5em; } p { margin: 5px 10px 5px 10px ; } p { margin-top: 5px; margin-right: 15px; margin-lef: 10px; margin-bottom: 1px; }

✰

✰ PADDING (Relleno)
● Top (superior) (Valores: longitud, porcentaje)
● Right (derecho) (Valores: longitud, porcentaje)
● Left (izquierdo) (Valores: longitud, porcentaje)
● Bottom (inferior) (Valores: longitud, porcentaje) Ejemplos: h1 { padding: 2em; } h1 { padding: 5px 10px 5px 10px ; } h1 { padding-top: 5px; padding-right: 10px; padding-lef: 15px; padding-bottom: 20px; }

✰

✰ BORDER (Borde)
● Border-width (Ancho de borde) Top (superior) (Valores: thin, medium, thick) Right (derecho) (Valores: thin, medium, thick) Left (izquierdo) (Valores: thin, medium, thick) Bottom (inferior) (Valores: thin, medium, thick)
● Border-style (Estilo de borde) (Valores: none, dotted, dashed, solid, double, groove, ridge, inset, outset)
● Border-color (Color de borde) (valor: #color, nombre del color)
Ejemplos: body { border-width: 5px; border-style: solid; border-color: green; }
 body { border: 5px solid green; }
 body {border-top: 5px solid #008000; padding-right: 10px dashed green; padding-lef: 15px dotted green; padding-bottom: 20px double #008000; }

✰

✰ WIDTH (Ancho)
● Longitud
● Porcentaje
● Auto Ejemplo: #ancho { width: 200px; }

✰

✰ HEIGHT (Altura)
● Longitud
● Auto Ejemplo: #altura { height: 40px; }

✰

✰ FLOAT (Flotar)
● left
● right
● none Ejemplo: #column { float: left; width: 50%; }

✰

✰ CLEAR (Despejar)
● left
● right
● none
● both Ejemplo: img { float: left; clear: both; }

✰

✰ POSITION (Posición)
● Static (posición por defecto)
● Absolute (no deja espacio vacío después de ser posicionado)
● Relative (se calcula desde la posición original del documento, osea ocupa espacio después de ser posicionado)
● Fixed (fija, situado con relación a la ventana del navegador)
● Inherit (posición heredada) Ejemplo: img { float: left; clear: both; }

═❖═ Clasificación ═❖═

✰

✰ DISPLAY (Visualización)
● Block (salto de línea antes y después del elemento)
● Inline (ningún salto de línea)
● List-ítem (es igual a block pero agrega un marcador de ítems de lista)
● None (sin visualización)

✰

✰ WHITE-SPACE (Espacio en blanco)
● Normal (contrae espacios en uno)
● Pre (no contrae múltiples espacios)
● nowrap (no permite el ajuste de línea sin una etiqueta <br>)

✰

✰ LIST-STYLE (Estilo de lista)
● list-style-type
● list-style-position
● list-style-image Ejemplo: li.cuadrado { list-style: square inside; }

✰

✰ LIST-STYLE-TYPE (Tipo de estilo de lista)
● disc
● circle
● square
● decimal
● lower-roman
● upper-roman
● lower-alpha
● upper-alpha
● none Ejemplo: ol { list-style-type: upper-alpha; } ◄ A B C D E...

✰

✰ LIST-STYLE-IMAGE (Imagen de estilo de lista)
● url
● none Ejemplo: ol { list-style-image: url(x.png); }

✰

✰ LIST-STYLE-POSITION (Posición de estilo de lista)
● inside (Posición interior) (las líneas se ajustan debajo del marcador en vez de tener sangría)
● outside (Posición exterior) (es el valor por defecto de la posición)

Los valores de LONGITUD pueden ser:

 

✰ ✰

Relativos

✰ ✰

● em (la altura de la fuente de los elementos)
● ex (x-height, altura de la letra "x")
● px (pixels, relativa a la resolución del lienzo)

✰ ✰

Absolutos

✰ ✰

● in (pulgadas; 1 pulgada=2.54 cm)
● cm (centímetros; 1 cm = 10 mm)
● mm (milímetros)
● pt (puntos; 1pt = 1/72 pulgada)
● pc (picas; 1 pc = 12 pt)

Estilo bloque dialogo

Hola!!

Hace mucho que no publicaba, la verdad es que es por falta de tiempo y cuestiones de salud, además que había dicho que no me podría pasar muy seguido por aquí pero que le haré al fin no hay mucha actividad...

En este tutorial les diré como hacer un sencillo pero particular estilo como dialogo muy curioso  que he visto recientemente en varias páginas y Blog de Internet.

Este es un ejemplo
Nota el pequeño rectángulo que da la impresión de que es un dialogo
Te gusta?
Sigue leyendo más abajo
y descubre como hacerlo

En general lo usan como cita o Blockquote aunque yo lo uso como un bloque cualquiera metido en una clase  es cuestión de que uso le quieras dar...

Antes de comenzar quiero aclarar que no copio tutoriales ni códigos de ninguna página (suelo usar algunos tutoriales para el blog pero siempre con créditos) y mucho menos hablo sin conocer de lo que estoy tratando.. vi un comentario anónimo que la verdad me molesto donde decía que copiaba de su Blog y cuando me fui a ver quien copio 2 de mis tutoriales fueron ellos, por fortuna no hago caso de estas cosas y no me dañan en absoluto pues no soy experta pero pueden preguntarme y siempre resolveré dudas que surjan sobre los temas de mis post en este mi querido Blog.

Bueno entonces comencemos

... . ... Tutorial ... . ...

-Debes saber las propiedades y valores básicas de Css: si bien puedes buscarlas en Internet es mucho más fácil saberlas (en estos días estaré subiendo una tablilla con algunas)
-Tener una tabla de colores: de preferencia códigos hexadecimales aunque puedes usar los nombres en inglés (Tablita de Wiki)...
-Saber donde aplicar los estilos en la hoja .css y como establecerlo en las entradas.

En la opción Plantilla = editar Html copia este código y pegalo antes de ]]></b:skin>

blockquote {background: #d5b4ae;  /*color de fondo*/
padding: 10px; /*es la distancia interior entre el borde y el contenido*/
position: relative;
border-radius: 5px; /*Define que tan redondo quedará*/
width: 400px; /*modifica el ancho del elemento*/
color: #eee; /*color de la letra*/
border-right: 1px solid #eee; /*borde derecho*/
border-bottom: 1px solid #eee; } /*borde izquierdo*/

blockquote {display: block;
margin: auto;
box-shadow: 2px 2px 2px #BD887F; /*sombra del cuadro (solo modifica el color)*/
}

blockquote:before {content: "";
border-top: 10px solid transparent;
border-right: 10px solid #d5b4ae; /*mismo color que el fondo de tu cuadro*/
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
left: -20px;
top: 20px;
margin: auto; }

Lo que esta de este color es la propiedad que indica que se aplicarán los valores dentro de los  { } a todas las citas a las cuales les des esta etiqueta <blockquote> </blockquote>.

Puedes modificar todo lo que tenga un comentario (lo que esta encerrado entre /*  y  */ ) y dejar lo que no tiene ninguno.

Si tienes alguna duda o no te quedo claro algo me puedes dejar un comentario, la verdad ni yo misma entendí muy bien mis vagas explicaciones pero como dije estoy disponible para dudas...