domingo, 13 de julio de 2008

Gifs animados en Firewoks

Lo primero en es tener la base para nuestra animación, en este caso para hacerlo bien sencillo vamos a hacer una estrella que crece.
Ahora vamos al panel de "fotogramas" que nos permite hacer la animación. Para poder verlo, si no aparece en el área de trabajo, vamos a el menú "Ventana " y ahí "Fotogramas" si no podemos hacer shift+ F2.


Para ir agregando fotogramas, hacemos click en el iconito abajo en el panel de fotogramas...


... y vamos pegando y editando nuestra imagen en cada fotograma.

Si queremos cambiar la velocidad de nuestra animación, podemos controlarla definiendo cuanto tiempo demora cada fotograma. Para ello hacemos doble click sobre el número "7 " que vemos al lado de cada fotograma (siete es el tiempo por defecto que se va a demorar en pasar al siguiente fotograma). Hay que tener en cuenta que la cifra que ponemos ahí es una fracción de segundos, por defecto 7 centésimos de segundo. Si queremos que nuestro fotograma dure 1 segundo entero ponemos "100", medio segundo serian "50" ... bueno creo que quedo claro ¿no?



Otra cosa importante es cuantas veces queremos que nuestra animación se repita, y eso lo definimos desde la parte inferior del panel de fotogramas como pueden ver en la siguiente imagen.

Y esto es todo... con ustedes una animación hecha en fireworks en formato gif animado

lunes, 23 de junio de 2008

Matiz, saturación y luminosidad


Matiz: También llamado por algunos: "tono" o "croma", es el color en sí mismo, es el atributo que nos permite diferenciar a un color de otro, por lo cual podemos designar cuando un matiz es verde, violeta o anaranjado.

Luminosidad: "valor", es la intensidad lumínica de un color (claridad / oscuridad). Es la mayor o menor cercanía al blanco o al negro de un color determinado. A menudo damos el nombre de rojo claro a aquel matiz de rojo cercano al blanco, o de rojo oscuro cuando el rojo se acerca al negro.

Saturación: Es, básicamente, pureza de un color, la concentración de gris que contiene un color en un momento determinado. Cuanto más alto es el porcentaje de gris presente en un color, menor será la saturación o pureza de éste y por ende se verá como si el color estuviera sucio u opaco; en cambio, cuando un color se nos presenta lo más puro posible (con la menor cantidad de gris presente) mayor será su saturación.


Matiz, saturación y luminosidad eligiendo colores en Fireworks:


Fuente: wikipedia.org

sábado, 14 de junio de 2008

Guía básica para la combinación de colores

Saber elegir los colores que vamos utilizar en un proyecto puede ser una tarea complicada.
¿Qué colores combinan bien entre si?
¿Cuántos colores son demasiado y cuantos muy poco?
¿Qué color usar para un fondo? ¿y para un texto? ¿y para algo que queremos resaltar?

Les dejo aca un link a un artículo muy interesante que puede ayudarnos a entender un poco más sobre la como combinar colores.

http://www.cristalab.com/tips/53345/guia-basica-para-la-combinacion-de-colores

Existen además un montón de herramientas web que nos ayudan a elaborar combinaciones. Acá les dejo otro articulo que reune unas cuantas:

http://www.piglesias.com/blog/como-elegir-combinar-colores-5-herramientas-web-gratuitas

martes, 27 de mayo de 2008

Ideas asociadas a los colores

Rojo: pasión, peligro, el más caliente de los colores cálidos, fuego, sangre, vitalidad, acción, agresividad, atención.

Naranja: alegría, juventud, calor, verano, optimismo, seguridad, confianza, quilibrio, disminuye fatiga, genera calidez.

Amarillo: Simbolo de deidad, luminosidad, sol, calor, buen humor, alegría, estimula la vista y la actividad mental, creativo, calmante.

Azul: el cielo y del mar, estabilidad y la profundidad. la lealtad, la confianza, la sabiduría, la inteligencia, la fe, la verdad y el cielo eterno, ligado a la inteligencia y la conciencia, la seriedad y el poder.

Verde: esperanza, fecundiad, sedante, calmante, relajante, naturaleza, se utiliza para neutralizar colores calidos.

Purpura: misterio, intuición, espiritual, emocional, melancolico, color de la realeza.

Blanco :puereza, fe, paz, alegría, pulcritud, humiladad.

Negro: lo oscuro, el dolor, desesperación, solemnidad, formalidad, tristeza, lo oculto, lo escondido.

Gris: iguala todas las cosas, no influye sobre los otros colores, elegancia, respeto, aburrimiento, vejez.


Leer más: http://www.webtaller.com/maletin/articulos/significado_de_los_colores.php

y: http://luisalarcon.com/blog/?p=230

Modelo de color RGB

RGB (del inglés Red, Green, Blue; "rojo, verde, azul")
Es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores luz primarios. El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por la cual los mismos valores RGB pueden mostrar colores notablemente diferentes en distintos dispositivos.

Para indicar con qué proporción mezclamos cada color, se asigna un valor a cada uno de los colores primarios, de manera, por ejemplo, el valor 0 significa que no interviene en la mezcla, y a medida que ese valor aumenta, se entiende que aporta más intensidad a la mezcla. De una manera estandar, la intensidad de cada una de las componentes se mide según una escala que va del 0 al 255.

Por lo tanto, el rojo se obtiene con (255,0,0), el verde con (0,255,0) y el azul con (0,0,255), obteniendo un color resultante monocromático. La ausencia de color -lo que nosotros conocemos como color negro- se obtiene cuando las tres componentes son 0, (0,0,0). La combinación de dos colores a nivel 255 con un tercero en nivel 0 da lugar a tres colores intermedios: el amarillo (255,255,0), el cyan (0,255,255) y el magenta (255,0,255). Y el blanco se forma con los tres colores primarios a su máximo nivel (255,255,255).

La codificación hexadecimal del color permite expresar fácilmente un color concreto de la escala RGB. Este sistema utiliza la combinación de tres códigos de dos dígitos para expresar las diferentes intensidades de los colores primarios RGB para lo cual además de los números del 0 al 9 se utilizan seis letras con un valor numérico equivalente; a=10, b=11, c=12, d=13, e=14 y f=15.

Rojo #ff0000 El canal de rojo está al máximo y los otros dos al mínimo
Verde #00ff00 El canal del verde está al máximo y los otros dos al mínimo
Azul #0000ff El canal del azul está al máximo y los otros dos al mínimo

Conviene recordar que este modelo de síntesis aditiva de luz, cuanto más mezclamos más nos acercamos al blanco. Cuando imprimimos y mezclamos tintas, cuanto más mezclamos más nos acercamos al negro para ello tenemos el modelo CMYK que se basa en la mezcla de pigmentos de los siguientes colores para crear otros más: C = cian | M = magenta | Y = amarrillo | K = Key (negro).

Leer más Modelo de color RGB, Colores HTML, Modelo CMYK
Fuente: Wikipedia

domingo, 25 de mayo de 2008

A la hora de exportar...

Estos son los 3 formatos que más usamos en imágenes para ser publicadas en la web.

GIF
(Graphics Interchange Format) es un formato de gráfico Web muy extendido. Los archivos GIF tienen hasta 256 colores. Los archivos GIF pueden contener un área transparente y varios fotogramas animados. Las imágenes que contienen áreas de colores planos se comprimen mejor cuando se exportan con el formato GIF. Por lo general, los archivos GIF son idóneos para crear gráficos animados, logotipos, gráficos con áreas transparentes o animaciones.

JPEG es un formato desarrollado por el grupo Joint Photographic Experts Group específicamente para imágenes fotográficas. El formato JPEG admite millones de colores (24 bits). JPEG es el formato óptimo para fotografías digitalizadas, imágenes que utilizan texturas, imágenes con transiciones de color en degradado o cualquier imagen que precise más de 256 colores.

PNG (Portable Network Graphic) es un formato de gráfico Web bastante versátil. Sin embargo, no todos los navegadores Web pueden mostrar imágenes PNG. Los archivos PNG son compatibles con profundidades de color de hasta 32 bits, pueden contener transparencia o un canal alfa y ser progresivos. PNG es el formato de archivo nativo de Fireworks. Sin embargo, los archivos PNG de Fireworks contienen información adicional específica de la aplicación que no se almacena en un archivo PNG exportado o en los archivos creados en otras aplicaciones.


Fuente: Ayuda de Fireworks

lunes, 5 de mayo de 2008

Texto con reflejo

Los primero que necesitamos es tener una copia del texto del que queremos hacer el reflejo. Para eso podemos seleccionar el texto y en el menú Edición elegimos Copiar y luego Pegar o para hacerlo mas rápido podemos hacer Ctrl+C y luego Ctrl+V.
Movemos la copia para que quede abajo de el texto original.
Seleccionando la copia y vamos al menú Modificar > Transformar > Voltear verticalmente. Deberiamos conseguir algo como esto:
Ahora vamos a darle el toque de degradé en el reflejo para que quede más real.
Para eso seleccionamos la "copia" y en el panel de propiedades en el relleno modificamos "opciones de relleno" para cambiarlo de un color solido a un degradado lineal.

Le aplicamos un degradé de arriba hacia abajo jugando con el color del texto original arriba y el color de fondo abajo, también podemos experimentar lograr el degradé modificando la opacidad de los extremos.

Con ustedes.... un texto con reflejo hecho con Fireworks: