Diseño

Pictos

Con cada vez más encima el tema de CSS3 y sus aplicaciones la gente se está poninedo las pilas para que se usen todas sus características y así tengamos una web más ágil y ligera.

Es el caso de Drew Wilson y su typeface Pictos, ideada para empezar a prescindir de imágenes en los proyectos web donde es necesaria una buena interfaz. Usando @font-face podemos cargar el typeface y usar las letras como si fueran imágenes, con lo que el resultado es una web muy chula en interfaz y muy ligera en cuanto a código.

Un par de ejemplos en su web (No contiene imágenes, es todo texto, aunque no lo parezca)

http://pictos.drewwilson.com/

Processing

Ayer por la noche, a eso de la una de la mañana, después de salir un poco a cenar, me dio por hacer un wallpaper. Pensé que sería una buena idea hacerlo con Processing, así aprendería un poco y empezaría a crear un par de imágenes.

Quería hacer un wallpaper con circulos de varios tamaños, con diferente opacidad y que uniera una línea a cada centro. En 10 minutillos tenía hecho el script principal y en otros 10 hice un poco de retoque de colores, tamaños y demás. Hice también que se regenerara la imagen al presionar el botón izquierdo del ratón y que se guardara al presionar el derecho.

Aún tengo que retocar un poco el script y además es algo bastante simple (y seguramente no muy original), pero por algo se empieza.

/**
* Ellipses desktop wallpaper maker.
*
* First script for processing
* Carlos Faria | 2010 | http://creativecommons.org/licenses/by-sa/3.0/
*
* http://carlosfaria.info
*/
//Variable declaration
int maxNumEllipse = 20;
int maxSizeEllipse = 200;
int nEllipse = maxNumEllipse;
int nSizes = 5;
int[] sizeEllipse = new int[nSizes];
int prev_x = 0,prev_y = 0;
//Setup
void setup()
{
size(1280, 800);
smooth();
noStroke();
for (int i = 0; i < nSizes; i++) {
sizeEllipse[i] =int(random(maxSizeEllipse));
}
}
//Draw
void draw()
{
background(int(random(51)));
for (int i=0; i< nEllipse; i++)
{
int x=int(random(width));
int y=int(random(height));
int sizeSingle = sizeEllipse[int(random(nSizes))];
fill( random(255), random(255), random(255), 150);
ellipse(x,y,sizeSingle,sizeSingle);
if(i!=0)
{
stroke(57,50);
line(prev_x, prev_y, x, y);
noStroke();
}
prev_x = x;
prev_y = y;
}
noLoop();
}
/* Redraw when left mouse button pressed. Every click a new desktop wallpaper.
*  Right Mouse Click saves image.
*/
void mousePressed()
{
if (mouseButton == RIGHT)
{
save(“ellipseDesktop.png”);
}
else
{
nEllipse = (int)random(maxNumEllipse);
if(nEllipse==0) nEllipse=maxNumEllipse;
redraw();
}
}

download script: processing.pde (zip)

Unas muestras de lo que puede conseguir el script y un par de modificaciones con Photoshop descargables desde Picasa. Los wallpapers están hechos para mi maquina, un MacBook, con lo que la resolución que utilicé es la que mejor me va (1280×800). Con un simple cambio en el size se pueden hacer wallpapers para la resolución deseada, además de poder cambiar el número de circulos, la opacidad, el tamaño máximo de los circulos, etc…

stick with me, baby!

Los chicos de Barcelona herraizsoto&co han creado una serie de pegatinas para MacBook que simplemente me tienen enamorado. Stick with me, baby! es una colección de stickers para personalizar tu MacBook. La parte trasera de todos los MacBook llevan el logo de Mac iluminado por led blanco. Simplemente se tiene que poner la pegatina en cuestión encima del logo y arreglado.

Pero esto no es todo de lo que quería hablar. La web me parece algo sensacional. Un diseño realmente muy cuidado y desde luego una fuente de inspiración como la copa de un pino.

Yo tengo en mi MacBook los stickers plásticos (se pegan con un poco de agua y se pueden despegar fácilmente de superficies como la del MacBook) de las gafas Spy que me voy comprando, pero me molaría más tener una de estas. Si fueran del material que digo ya serían un must buy sin precedentes.

Via WE ARE!

Remodelación de La Mora

Hace poco hice una remodelación de la página web del Restaurante La Mora de Caudete que me llevó algo de tiempo debido a la mudanza a mi nueva casa.

Pero por fin está terminada y online.

Si alguien quiere echarle un vistazo: http://www.restaurantelamora.es

Alex Varenese

Impresionante como utiliza las texturas y los elementos gráficos este hombre. Epectacular sobre todo la serie Pavement Loop. Al menos a mi es la que más me ha gustado.

¿De donde sacará las carreteras? Parece que las renderice con alguna herramienta 3D y luego saque diferentes vistas para pasarlas definitivamente a Photoshop pero vamos, es impresionante lo que puede llegar a hacer.

Y ese toque retro en todas sus creaciones… simplemente genial!!

The art of Alex Varenese

Lost and Taken

Siempre he sido un apasionado de las texturas, y de hecho las uso a menudo en mis proyectos personales cuando uso photoshop y demás. Creo que son un elemento imprescindible para crear el estilo de cualquier diseño y no solo eso, simplemente cambiando la textura de fondo podemos darle a una página un estilo u otro, si lo que estamos diseñando es un layout web por ejemplo…

Cuando quiero busca buenas texturas para mis diseños siempre suelo ir a flickr. Hasta ahora.

Lost and Taken es la página de Caleb Kimbrough, un blog dedicado exclusivamente a texturas en alta resolución.

Sencillamente genial…

http://lostandtaken.com/

TypeTester


Hace mucho tiempo que llevo usando esta mini aplicación web que permite comparar diferentes fuentes para ver como quedará en la web. A la vez que pruebas la fuente puedes probar el color, tamaño, colo de fondo, etc… con lo que se puede ajustar el formato que necesites al milímetro.

Una vez decidido el formato adecuado es posible descargar un fichero .css que contiene el estilo creado.

Muy útil, os lo digo en serio…

app: TypeTester

Fuentes 2009

Por estas fechas se suelen llevar a cabo en la esfera bloguera recopilaciones de cualquier cosa, algo así como juntar todo lo bueno que ha tenido un año en un aspecto. En los blogs de diseño se suele hacer recopilación de las fuentes más significativas a lo largo del año. Así es que yo no voy a ser menos y voy a poner las 5 que más he utilizado a la hora de crear mis pequeños proyectos (todas ellas gratuitas). Aquí están:

FontForge

Aunque tenga una interfaz fea fea, y que casca unas veces sí y otras también (al menos para OSX, no se para Linux como será de estable) este pedazo de software me acaba de salvar unos cuantos euros.

Resulta que esta tarde me he instalado una fuente desde DaFont.com con la que estuve trabajando el otro dia en un logo en un ordenador con Windows  XP. La fuente en cuestión es Go Long por Matthew Welch (guapísima por cierto). Cual es mi sorpresa al arrancar Illustrator y no encontrar la fuente recien instalada en la lista de fuentes disponibles. Me bajara de donde me bajara la fuente al instalarla no me la listaba ni en Illustrator ni en Photoshop. Pensé que debía ser un problema con la fuente porque era la primera vez que me pasaba. Así es que arranqué el Catálogo tipográfico y haciendo click con el botón derecho en la fuente (aquí si que me la listaba), seleccioné la opción “Validar tipo de letra”. Me daban dos problemas leves uno en la tabla ‘name’ y otro en la tabla ‘hhea’.

Creo que el principal problema radicaba en la tabla ‘hhea’ ya que el problema que daba en la tabla ‘name’ era debido a que tenia diferente nombre para MAC que para Windows (Go Long y GoLong respectivamente) pero el problema de ‘hhea’ era más gordo por lo visto.

Me puse a buscar qué información se almacenaba en dicha tabla y me encontré con esta página de Apple Developer donde explican claramente la información ‘hhea’:

The 'hhea' table contains information needed to layout fonts whose characters are written horizontally, that is, either left to right or right to left. This table contains information that is general to the font as a whole.

Telita, pensé, según lo visto si hay problemas con esta tabla mal vamos. Así es que me puse a investigar e intentar encontrar algún programa que me dejara convertir la fuente a algún formato nativo de Mac. Solo encontraba software de pago y, la verdad, pagar por un software que de momento solo me iba a servir para arreglar una fuente pues como que no.

Gracias a la zona de utilidades varias que tienen en MyFonts.com descubrí FontForge una completa aplicación que me vendría a las mil maravillas para realizar mis cambios y ver si podía salvar la fuente.

Instalé, arranqué, cargué la fuente y guardé como .dfont (Data fork resource Font), la cual ya pude instalar y utilizar en mi trabajo.

Si alguien quiere la fuente para OSX que me la pida, la tengo por aquí a buen recaudo ya que supongo que le pasará lo mismo a cualquiera que instale la fuente directamente desde DaFont.com.

Cacoo

Para el proyecto que tengo entre manos en estos momentos hemos decidido, mi compañero y yo, hacerlo muy bien desde el principio, y para eso hace falta documentar, documentar mucho y con calidad.

En toda documentación que se precie tiene que haber imágenes, porque una imágen vale más que mil palabras y en el caso de recurrir a la documentación cuanto antes te aclare lo que estás buscando mejor que mejor. Para crear estas imágenes hay mil y una formas, a pelo con illustrator, photoshop, diagramas con openoffice, mil historias, pero esta herramienta gratuita me ha gustado mucho.

Con Cacoo puedes hacer imágenes con dibujos precreados o hacer los tuyos propios para despues exportarlo a .png. Todos los dibujos y diagramas serán guardados en tu cuenta

Cacoo