Traduce el Blog

Html 9


Content pest

08 marzo 2013

Hagamos un gif Anime

Este es el primer tutorial de Gif que haré trataré de ser lo más clara posible para que entiendan lo que trataré de explicarles

En esta ocasión haremos un Gif con imágenes Anime, por lo cual ocuparemos solo Photoshop, Photoscape y nuestro buscador de imágenes favorito (El mío es Chrome).

Primero buscamos imágenes de el Anime que vamos a hacer el gif, no necesariamente tienen que ser de una secuencia lo importante es que sean del mismo tamaño pues esto nos ayudará a que el gif sea de mayor calidad, sin imágenes deformadas ni borrosas (aunque esto se arregla con un enfoque)

Yo por ejemplo busco por tamaños


Ya habiendo escogido las imágenes vamos a hacer nuestro gif.

En Photoshop:

Abrimos un documento de 200x200 px y abrimos las imágenes cada una en una capa. Recuerda que debes tener tantas capas como imágenes.



Ahora nos vamos a Ventana > Animación en caso de no tener la abierta ya.


Le das click en la pestañita encima de la ventana de animación (cuadro amarillo) y le das en Crear cuadros a partir de capas y se te crearán en la ventana de Animación los Frames o capas y nuestro gif esta listo. Puedes ponerlo a reproducir...


Esto es un Gif sencillo, puedes cambiarle el tiempo y las veces que se va a reproducir... los efectos los veremos en un tutorial más adelante...



En Photoscape

Hacer un gif en este programa es fácilisimo pues solo debes copiar y pegar [Ctrl+V] las imágenes o abrirlas (cuadro turquesa), cambiar el tiempo (verde) y guardar (morado).


En el cuadro rojo están las opciones de cambiar efecto puedes deslizar hacia arriba, abajo, a la izquierda, la derecha o desvanecer al color de fondo, a negro o blanco. Aunque por ahora no nos interesan los efectos


Créditos a Lunnany Kawaii por los avatar que use para este tutorial

07 marzo 2013

5 estilos para mejorar tus entradas Css

Alguna vez haz sentido que tus entradas son sencillas y quieres ponerles algo más para que tengan mejor presentación. En esta entrada te mostraré 5 sencillos pero bonitos estilos en Css.

En la Plantilla:
Para usarlos ve a Plantilla - Editar HTML y antes de ]]></b:skin> pegas cualquiera de los códigos.

Titulo 01

Códigos

Cafe

Azul

Verde

Naranja

Para más colores solo busca "background" y cambia el valor después de los dos puntos sin quitar el punto y coma, para el borde busca "border-bottom: 5px solid cambia esto;"

El estilo se llama Título 01 aunque no solo es para títulos también sirve para resaltar textos y más.


Uso en la entrada:
Ve al botón HTML de arriba y colocas por ejemplo (el primero)
 .    <span class=".header01">Tu texto</span>    .

------------------------------------------------


Efecto encender una imagen



Código




Uso en la entrada:

Ve a HTML de arriba y colocas
 .    <img class=".opacity" src="URL de tu IMAGEN" />    . Reemplaza lo subrayado por tu imagen

------------------------------------------------

Texto en negrita con sombra

Código



Puedes modificar el color buscando "black" y cambiándolo por el color que quieras, la sombra del texto busca "white" y el tamaño buscando "12pt".


Uso en la entrada:

Ve al botón HTML de arriba y colocas
 .    <span class=".neg">Tu texto</span>    .

------------------------------------------------


Imagen redonda


Código


Uso en la entrada

En HTML pega <img class=".circle" src="URL DE TU IMAGEN" /> sustituyendo lo subrayado por la url de tu imagen

Este efecto funciona mejor en imágenes más cuadradas, entre más rectangulares sean quedan en óvalo como puedes ver en los ejemplos de arriba

------------------------------------------------


Cuadrito de texto


Codigo


Puedes cambiar el color del borde "olive" el fondo "#efeff0


Uso en la entrada:

Ve al botón HTML de arriba y colocas
 .    <span class=".textbox1">Tu texto</span>    .

------------------------------------------------

06 marzo 2013

Render Konanciel en Deviantart

Es miércoles de Recursos y el día de hoy les dejare 4 Render que tengo en Deviantart...


Los render están hechos por mi las imágenes no.. Recuerda que puedes tomarlos y distribuirlos sin quitar el crédito... si vas a usarlos en una edición no olvides darme créditos

01 marzo 2013

Aprende a Crear un gif

Tenía ganas de hacer este tutorial hace bastante tiempo pero no me animaba hasta hoy ya que he visto muchos tutoriales sobre este tema así que decidí extender un poco el tema, así que pensé en hacer de este una serie de tutoriales donde te enseñaré como hacer una imagen en formato gif.

Programas

- KM Player
- VCL Media Player
- Photoshop Cs3 en adelante
- Photoscape

Que aprenderás?

Como dije a hacer una imagen en formato gif pero serán los siguientes temas...

= Hagamos un gif de Anime
= Gif a partir de un Vídeo Clip
= Como hacer un emoticon simple
= Botón de Afiliación
= Banner de publicidad o de Fan
= Icon - avatar - avi
= Más usos y aplicaciones de gif


Como guardar un gif?

Para guardar una imagen gif en Photoshop debes ir al menú Archivo en Guardar para Web y dispositivos  (ALT + Mayús + CTRL + S) le das Aceptar, ahora solo le agregas el nombre y guardar



En Photoscape solo le das guardar, le pones nombre y listo



Aprovecho para decirles que solo por ahora los miércoles publicare recursos, los jueves tutoriales de diseño Web y los Viernes nuevos tutoriales de ediciones, los otros días tal vez solo publique recomendaciones, regalos o ver si hay actividad y no publique ninguna entrada