Encontrar un color para el diseño

ByLuis

Al menos a mí me ocurre que cuando estoy empezando con un diseño, y tengo que basarme en una imagen, me paso bastante tiempo buscando los colores que vayan con la imagen. Normalmente uso un editor de imágenes, realizo la pixelación de la imagen y voy buscando que los colores sean representativos. Esto puede ser sencillo con esta rápida y cómoda aplicación on line, que nos permite enviar una imagen, seleccionar el tamaño de los cuadrados de la pixelación y ver qué códigos tienen los colores. También se podría usar la entrada que explicamos sobre fondo de pantalla calculado de una imagen, pero esta opción nos permite optar a varios colores.
color-pallete.png
Color Palette Generator
Vía / Maestros del Web

Similar Posts

Kuler: un esquema diario de colores por Adobe

ByLuis

adobe-labs.pngSi ya hace tiempo hacíamos referencia a Daily Color Scheme, un lugar donde nos daban esquemas de colores para poder usar en nuestros diseños (que por cierto, no se actualiza demasiado), ahora nos toca hablar de Kuler una aplicación similar creada por Adobe, la cual nos permite ver esquemas de colores, crearlos, bajárnoslos y modificarlos.
kuler.png
Me ha gustado mucho la forma en que mediante una rueda de colores podemos crear nuestro propio esquema, permitiéndonos elegir si queremos colores análogos, monocromáticos…
Kuler
Vía / Criterion

|

Paso a paso de un diseño web

ByLuis

La gente de SitePoint han publicado un gran artículo en el que explican cómo hacer un diseño (layout) mediante XHTML y CSS.
Hace tiempo alguien nos preguntaba por un comentario en un artículo cómo podía pasar de su forma de diseñar por tablas a diseñar sin tablas. Creo que con este artículo podrá aprender la transición de forma muy sencilla y rápida.
Empieza explicándonos los pasos que hay que llevar a cabo para la fase inicial de nuestro diseño. Dibujar los contenidos (cabecera, panel, contenido, pie de página) y cómo crear la estructura de capas y sus estilos.
Después nos indica como añadir fondos y contenidos a las distintas partes de nuestra página, como por ejemplo las imágenes con float. No solo se centra en lo estrictamente desarrollo, sino también un poco en diseño. Añade imágenes de fondo al pie y a la cabecera que realmente quedan bastante bien.
Y por último nos indica como dividir el contenido en rejillas para darle un aspecto más uniforme.
Breaking Out of the Box

| |

Elemento CANVAS en HTML

ByLuis

CANVAS es un elemento no estándar que permite dibujar gráficos directamente sobre el HTML. Inicialmente lo implementó Apple para Safari, pero ahora es WHATWG quien se encarga de su estandarización.

Al no ser un estándar, se han levantado voces en contra de ello, sobre todo existiendo el SVG que realizaría la misma función. La cuestión sobre cual es más correcto, si el SVG o CANVAS, es algo de lo que ya se ha tratado y aunque en ambos casos se puede hacer lo mismo, parece que el SVG gana por ser un estándar y sobre todo cuando se quiere que haya interacción con el usuario, aunque CANVAS sea más útil a la hora de dibujar.

Más información

Ejemplos

Tutoriales sobre ilustración y diseño

ByLuis

illustrationclass.pngEn Intenta siempre encuentro cosas realmente interesantes (aunque la información la han obtenido de DissenyArt). En este caso se trata de una página que nos enseña diseño y como crear ilustraciones, lo cual para quienes somos unos expertos en el copy/paste conceptual, nos va a venir muy bien para aprender y no necesitar tanto del CTRL+C/CTRL+V.
Los tutoriales está muy muy bien, te explican paso a paso cómo lo han ido realizando, con imágenes de cada paso. La única pega que le pongo es que te tienes que bajar un zip y luego descomprimirlo en tu ordenador para ver el tutorial.
illustrionclass.com
Vía / Intenta

| | | |

Laboratorio: Recorta imágenes dinámicamente con PHP y HTML

ByLuis

En muchos sitios web de almacenamiento de imágenes se nos permite retocar las imágenes. Hoy vamos a explicar como recortar una imagen directamente desde una página web.
crop.png
Para ello tenemos que crearnos una página web que nos permita seleccionar la zona de la imagen que queremos recortar y de un script PHP que usando la librería GD recortará la imagen y la devolverá en formato PNG.

Read More “Laboratorio: Recorta imágenes dinámicamente con PHP y HTML”

Novedades de Adobe Photoshop CS3

ByLuis

photoshopbox.gifParece que Adobe Photoshop CS3 viene cargada de novedades, entre una de las más importantes es la creación de dos versiones, una Standard y otra Premium, la cual incluirá más funcionalidades. Por ejemplo, la nueva versión de Camera Raw irá incluida en ambas versiones de Photoshop. Vanishing Point estará solo en la versión Premium.
A parte de mejoras en la edición de imágenes, también añadirá funcionalidades al uso de tabletas gráficas al estilo de Corel Painter y dará la posibilidad de exportar a CAD.
Vía / Bitelia