descargas de mapas

descargas de logos

descargas de escudos

descargas de banderas

descargas de botones

descargas de pautas de diseño

Photoshop-free-brushes.com es el sitio web donde se puede encontrar más de 600 pinceles gratis para que los utilices en photoshop de manera gratuita(obvio por el nombre de la página), están todos ordenados por categorías, por lo que es bastante fácil encontrar lo que andes buscando.

En un  proximo post explicare en un tutorial como sacar partido estos pinceles.

En estos enlaces tienes la descarga directa a grupos de iconos, que seguro serán de gran ayuda para tus diseños, la mayoría tan solo es necesario un registro en la página del enlace.

01  Sellos de garantía

02 Iconos Open Source

03 Iconos para tienda electrónica

04 Tarjetas de Crédito

05 Iconos para Iphone

06 Con temática de viajes

07 Con temática Espacial

08 Iconos de Google Talk

09 Mobiliario moderno

10 Iconos Genéricos

Antes de utilizar estos archivos en tus diseños asegúrate de leer las condiciones, ya que el propietario de los archivos puede cambiar después de la fecha de publicación de este post las condiciones de utilización de los mismos.

Descargate gratis estas texturas “vintage”.  Le podras sacar partido para usarlas en tus diseños.

El archivo pesa un poco (46 mb) pero merece la pena: 8 texturas en zip

Si estas interesado en más texturas puedes visitar:

Rust Textures

Cracks Textures

Tea-Stained Paper

Clean Grunge Textures

Winter Textures

A lo largo de la historia(en lo referente a diseño visual para interfaces de usuario) hemos tenido un cambio gradual hacia el realismo, evolucionando de la mano con los avances en los ordenadores( cada vez más realista, color, efectos 3D, sombras, transparencias). Ciertos de estos cambios han mejorado la experiencia de usabilidad, las sombras detrás de las ventanas nos ayudan a ver la ventana que está activa, las pestañas tipo “amazon” simulan categorías como en un dossier físico…

En otras áreas las mejoras son cuestionables, en la mayoría de interfaces gráficas normalmente tenemos muchos iconos que representan una idea o concepto( una casa no es una casa si no “inicio”, un ojo es “mirar”).

El nivel de realismo de estos iconos pueden ayudar o distraer(y perder la utilidad de los mismos) según el nivel de realismo ( recomiendo la lectura de Uderstanding Comics).

A mayor realismo menos abstracción y mas confuso puede ser el mensaje, ya que vemos la imagen y no el concepto, ya que cuanto más real es el icono, más especifico e individual se convierte, con lo que cuesta ponerse en situación al usuario general. (en el ejemplo vemos un concepto de rostro, el primero solo puede ser el individuo de la foto, al ir degradando el realismo, ese individuo puede ser cualquiera)

Pero a mayor simplicidad puede ser irreconocible la idea que queremos transmitir. (el primer icono es claramente una cara, el último no se puede reconocer como tal).

Veamos que ocurre con un concepto que aparece en casi todos los interfaces: Inicio.
Normalmente se usa para este concepto el icono de una Casa

El de la izquierda es una casa “concreta”, al ir degradando el realismo se acerca más al concepto.

Pero al ir eliminando elementos, el concepto es practicamente irreconocible( ¿que es el icono de la derecha? ¿una casa? ¿una flecha?).

Para explicar lo que ocurre veamos la siguiente tabla:

La gente no reconoce los conceptos en los extremos de la tabla, para ser útiles se tienen que quedar en un punto medio. Para ello es necesario añadir detalles que sean fáciles de identificar (como una puerta en la casa).

Veamos más ejemplos:

En estos botones e interruptores las fotos de la izquierda no nos dicen nada, al igual que los iconos de la derecha… pero al simplificar y añadir volumen con ciertas sombras, el icono toma todo su significado y utilidad.

Como todo, tenemos excepciones, cuando queremos que ese concepto sea “único”, como un icono de marca(véase el “cono de obras” para VLAN, no es un cono, es el cono de VideoLan).

En definitiva, para poder hacer un interfaz con iconos que no confundan, es necesario reducir la parte gráfica a su esencia, para no sobrecargar la información, ya que el objetivo no es hacer una interfaz realista, si no entendible por el usuario

En mi primer contenido “real” intentare contar  como realizar una fuente con terminado de “boceto”(como en la  ilustración superior). Normalmente podemos encontrar muchas y variadas fuentes con una terminación tipo “dibujado a mano” o “boceto”. Lo que veremos hoy es no depender de fuentes ya creadas, y convertir cualquiera que nos guste en este tipo de estilo.

Crearemos con 8 pasos básicos un estilo aplicable a cualquier forma vectorial desde illustrator(este tutorial ha sido creado con Illustrator CS3, pero se puede aplicar a cualquier versión de CS).

PASO 1

Creamos un documento nuevo y con la herramienta de texto (T), escribimos algo de texto con la fuente que queramos. Yo en el ejemplo usare una Adobe Garamont como fuente elegida. Para sacar mas partido a esta técnica, vamos a crear un “estilo gráfico” para poder aplicarlo sin problema a cualquier fuente o forma vectorial. Primero seleccionamos la fuente, seleccionamos en el panel de Estilos Gráficos la opción “nuevo estilo gráfico” y listo.

PASO 2

Con el texto seleccionado, quitamos el relleno y el trazo. Añadiremos un nuevo  relleno y trazo desde el “panel de Apariencia” en los próximos 2 pasos.

PASO 3

Con el texto sin relleno ni trazo, abrimos el menu pop-up (pestaña derecha) en el Panel de Apariencia y elegimos Añadir un nuevo relleno. Mantenemos el color negro por defecto para el relleno.

PASO 4

Seleccionamos el nuevo relleno en el panel Apaciencia y vamos en el menu superior a Effecto> Estilizar> Garabatear.  Saldra una ventana de diálogo donde metemos las siguientes opciones:  ángulo a 45º,  Trazo superpuesto a 0 px, Variación en trazo superpuesto a 2 px, Anchura de trazo a 1px,  Curvatura a 0px,  Variación de Curvatura a 50%, Espaciado a 2px y la Variación del Espaciado a 1.5px.

PASO 5

Seleccionamos la opción de contorno en el panel de Apariencia, y le damos un contorno al texto de 2 pt.

PASO 6

Con el contorno seleccionado en el panel Apariencia, vamos otra vez al menu superior Effecto, ahora seleccionaos Distorsionar y Transformar > Emborronar. En la ventana de diálogo metemos las siguientes opciones:  Tamaño 0.5,  Seleccionamos Relativo, Detalle a 30, y por ultimo Suavizado. Esto dara al contorno un poco de irregularidad.

PASO 7

Ahora ya tenemos la fuente personalizada con nuestro propio estilo “boceto”(teniendo en cuenta que la fuente continua siendo editable en todo momento). Para sacar más partido a esta tecnica, vamos a crear un estilo gráfico con el que podremos aplicar rapidamente a cualquier fuente o forma vectorial el estilo “boceto”.  Primero seleccionamos la fuente, y abrimos el panel “estilo gráfico”. Veras que tienes varios estilos ya creados, seleccionamos en el panel derecho “nuevo estilo gráfico”.

PASO 8

Ahora escribimos un poco de texto y cambiamos de fuente para comprobar los resultados. Con el texto seleccionado, pulsa en la miniatura de el nuevo estilo gráfico…  listo.

Hola a todos, soy Juan Pablo Martín, en este primer post  inauguro el blog. La intención es poder compartir conocimientos en diseño, web, ilustración…

Ahora mismo no tiene contenido, pero intentare hacerlo lo mas interesante posible.