Entradas etiquetadas ‘Diseño Web’

COLOR

10 de Julio de 2012

PARTE 1: INTRODUCCIÓN
El color puede ser un tema delicado. A veces los artistas utilizan colores que evocan ciertas emociones. Otras veces los artistas utilizan los colores, simplemente porque les gusta su aspecto. Mientras que cualquier profesor de diseño te dirá que la última razón está completamente equivocada. En mi opinión personal, el color siempre tiene un sentido. Este significado puede ser, como he mencionado, de tipo emocional o puede ser una preferencia personal por parte del propio artista, pero siempre tiene un propósito detrás de él.

No hay nada malo con la elección de un color porque te guste, sin embargo, al elegir un color hay que asegurarse de que su uso no está en contradicción con lo que estamos tratando de decir. El uso adecuado de la teoría básica del color puede ayudar a decidir qué colores coinciden, así como lo que cada color hace que la gente se siente.

PARTE 2: LA RUEDA
La construcción de la rueda es en realidad bastante simple. Tú tienes tus 6 colores básicos: rojo, naranja, amarillo, verde, azul y morado. Después, dependiendo de que rueda estés mirando, tienes extras, entre los colores que son mezclas de los colores básicos.

Hay nombres de todos estos colores, que son importantes saber. La siguiente es una lista de todos los nombres de los colores y lo que es bueno para ellos.

Los colores primarios: rojo, amarillo, azul. Estos 3 colores son los colores base para cada color en la rueda. Es por eso los llaman “primarios”. Cuando se mezclan dos colores primarios, se obtiene un color secundario. También hemos de tener en cuenta la posición triangular de los colores primarios en la rueda de color, y cómo los colores secundarios están junto a ellos.
Los colores primarios son útiles para el diseño o el arte, son los colores más vivos cuando se colocan uno junto al otro, por lo que notaremos que la mayoría de los restaurantes de comida rápida utilizan colores primarios en sus logos, ya que evoca la velocidad.

Colores secundarios:
Naranja, verde, morado. Estos 3 colores son los que se obtienen cuando se mezclan los colores primarios. Observemos cómo el verde se encuentra entre el amarillo y el azul. Los colores secundarios son generalmente más interesantes que los colores primarios, pero no evocan rapidez y urgencia.

Los colores terciarios: Estos son los colores como el amarillo-verde y rojo-violeta. Están hechos mediante la mezcla de un color primario y un color secundario.

Los colores complementarios: rojo y verde, azul y naranja, púrpura y amarillo. No nos dejemos engañar por el nombre porque, rara vez se ven bien cuando se usan juntos. Se llaman “complementarios”, porque, se vuelven muy vibrantes y con un contraste fuerte. Los colores complementarios son útiles cuando se quiere hacer que algo destaque.

Colores análogos:
rojo y naranja, azul y verde, etc. Por lo general, coinciden muy bien, pero no crean grandes cambios. Son buenos para emitir sentimientos de serenidad en diseños y obras de arte en la que deseamos que los espectadores se sientan cómodos.

PARTE 3: OTROS TÉRMINOS
Hay un montón de nombres que se refieren a diferentes aspectos del color, pero aquí es donde empieza a ser complejo. Si deseáis saber más acerca del color, seguir leyendo.

Los colores cálidos: Son colores como el rojo, amarillo y naranja. Estos colores evocan calidez, ya que nos recuerdan cosas como el sol o el fuego.

Cool Colores: Colores como el violeta, azul, verde y púrpura. Estos colores evocan una sensación de frescura, ya que nos recuerdan cosas como el agua o la hierba.

Los colores neutros: gris, marrón. Estos no aparecen en la mayoría de las ruedas de color, son considerados neutrales, ya que no contrastan mucho con nada. Son demasiado tranquilos.

Valor: Generalmente se refiere a la cantidad de negro en un color. Cuanto más negro tiene un color, más oscuro es su valor.

Brillo: Se refiere a la cantidad de blanco en un color. Cuanto más tiene un color blanco, más brillante es.

Saturación:
Se refiere a la cantidad de un color usado. Cuando un color está en la saturación completa, es muy vibrante. Cuando un color es “no saturado”, una gran cantidad de color se ha eliminado. El desaturado de los colores tiende a hacerlos más neutrales, porque hay mucho gris en ellos.

PARTE 4: TIPOS DE COLOR
Como cabe suponer, hay diferentes tipos de color. Ahora es cuando se puede lanzar la rueda de colores por la ventana.

Color RGB: El nombre de RGB significa rojo, verde y azul, que son los 3 colores primarios. Este un modelo de color basado en lo q se conoce como síntesis aditiva, con lo que es posible representar a un color por la mezcla por adición de los tres colores luz primarios.

Color CMYK: Este es el método de color basado en pigmentos. CMYK significa Cyan, Magenta, Amarillo y Key-plate (la key-Plate corresponde a la plancha negra, y se llamaba así porque dicha plancha conteniene la mayor parte de la información de la imagen.). Lamentablemente, CMYK no puede reproducir la misma cantidad de colores que RGB. Este es el método utilizado por las impresoras de todo el mundo, y es también una forma inteligente de mezcla de pinturas.

Color Pantone (PMS): Este es otro método de impresión a color. PMS significa “Pantone Matching System”, y tiene una gran lista de colores especialmente mixta realizada por la Corporación de Pantone. En lugar de utilizar CMYK para crear colores, los pigmentos se crean de forma individual para la pureza. Por ejemplo, si queremos utilizar un color rojo-violeta, me quedaría con el PMS 233M. El color se hace exclusivamente para mi proyecto y siempre se imprimirá tal y como yo quiero. El único inconveniente de utilizar colores PMS es que sólo son útiles para los proyectos con pocos colores. También son más caros.

Top Programas de gráficos Web para Macintosh

8 de Abril de 2011

Cuando se trata de seleccionar un programa de gráficos Web, hay tantas opciones que a menudo puede ser difícil determinar qué programa es el adecuado. Si bien la tendencia es querer ir siempre a buscar el más popular, no siempre es la opción más adecuada para las necesidades de cada persona.

1. Adobe Photoshop
Photoshop es uno de los programas disponibles más avanzados y versátiles, y los desarrolladores de webs siempre quieren tener Photoshop en su arsenal de herramientas. Photoshop ofrece herramientas y funciones para la creación de animaciones GIF, imágenes, optimización de corte, procesamiento por lotes y automatización. Se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Fireworks, Flash, y GoLive.

2. Adobe Fireworks
Fireworks se ha desarrollado desde cero específicamente para satisfacer las necesidades de los profesionales del diseño web. Fireworks tiene características de estrecha integración con otros productos de Macromedia como la herramienta de animación vectorial, Flash y Dreamweaver.  Fireworks sólo es capaz de trabajar en el entorno de color RGB, por lo que no es una opción apropiada para trabajar con imágenes destinadas a la impresión comercial. Fireworks se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Photoshop y Flash.

3. Stone Studio
Esta suite de diseño web para Mac OS X incluye Create, PhotoToWeb, PStill, GIFfun, Slice & Dice, Pack Up & Go, y TimeEqualsMoney. Create es el principal componente de diseño web y se puede comprar por separado. Ofrece herramientas de texto, dibujo, efectos, producción automatizada de la página web, desarrollo de contenidos, y las características de diseño de la página. PhotoToWeb te permite crear álbumes web de fotos y presentaciones de diapositivas. GIFfun crea banners animados. SliceAndDice crea mapas de imagen y barras de navegación.

4. Adobe Photoshop Elements
Photoshop Elements está construido alrededor de los elementos básicos de la interfaz de Adobe Photoshop sin las características de la gama alta. Elements es principalmente una herramienta para edición de fotos, procesamiento y mejora, pero también puede funcionar para la creación de gráficos Web, tales como botones, banners, animaciones y galerías web para su uso personal y empresarial. Está diseñado principalmente para los fotógrafos aficionados,

Reducir el tamaño de las fotos para su uso en la web

6 de Marzo de 2011

En primer lugar hay que recortar la imagen para eliminar partes innecesarias. Después, podemos cambiar las dimensiones en píxeles para generar una imagen más pequeña.

Cualquier software de edición de fotos tiene un comando para cambiar las dimensiones en píxeles de una imagen. Lo podemos buscar en “Tamaño de imagen”, “Cambiar el tamaño,” o “Volver a muestrear.” Cuando se utiliza este comando se presenta con un cuadro de diálogo para introducir los píxeles exactos que deseamos utilizar.

Nunca, cambiaremos el tamaño o sobrescribiremos en el archivo original.
Después de cambiar el tamaño de la imagen, nos aseguráremos de hacer un Guardar como para no sobrescribir el archivo original y lo guardaremos como un archivo JPEG.

Al elegir el nivel de compresión, mantendremos la calidad en la gama media alta.
Trataremos de no sobrepasar los 100 KB por página Web en total de imágenes.

Esto puede sonar como un proceso que consume tiempo, especialmente si tenemos un montón de fotos para compartir, pero afortunadamente la mayoría de softwares actuales permiten comprimir un lote de fotos rápidamente. Algunos programas  incluso pueden cambiar el tamaño, comprimir, y generar galerías completas de fotos para su publicación en la Web. Y hay herramientas especializadas para ambas tareas – muchos de ellos de software libre.

Fundamentos de Diseño Web

20 de Febrero de 2011

Al igual que los diseños en papel, los Diseños Web deben ser simples y claros

El espacio y los espacios en blanco

Intente aprovechar el máximo espacio, haga que se expanda o contraiga para adaptarse a la ventana del navegador.

Mantenga la resolución de pantalla en mente. Aunque la mayoría de los usuarios se han alejado de una resolución de 800×600, mantenga esto en mente cuando se esté diseñando. Que un usuario todo lo que vea pueda ser un logo en su monitor no es un buen servicio.

Utilice el color para definir los espacios. Si desea tener una página con un ancho específico, céntrese en la pantalla del navegador, haga que el color de fondo de la página sea un color diferente. Esto ayudará a la página para cambiar el tamaño de los diferentes navegadores.

Gráficos

Es fácil dejarse llevar por una gran cantidad de imágenes y animaciones, pero pueden hacer una página muy difícil de leer. Cuando esté pensando en el diseño, recuerde que las imágenes son una parte importante del diseño, no sólo ideas posteriores.

Ancho de texto

Piense en el ancho de texto. Esto es a menudo llamado el “análisis de longitud”, y se refiere a cómo las palabras que se muestran en una sola línea. La mayoría de las personas pueden leer cómodamente cerca de 7 a 11 palabras en una línea. Más líneas, y el texto sería difícil de leer, líneas más cortas provocarían desarticulación y distracción.

El centrado de texto no es aconsejable, suele ser difícil aplicarlo bien y generalmente difícil de leer.