Pulsa F5 » diseño

El velocímetro de la vida

masual — Sun, 25 Jul 2010 20:32:31 +0000

Acabo de encontrarme con este curioso velocímetro. Hasta los 120 Km/h muestra las cifras, y a partir de ahí nos ilustra en como puede acabar el viaje.

Visto en Deviant Art

Convierte una web al estilo Geocities

masual — Wed, 28 Apr 2010 15:43:51 +0000

Seguro que vosotros recordáis alguna de esas webs orteras de Geocities cargadas de gifts mareantes, fondos que taladran la retina, todo escrito con Comic Sans, colores fluorescentes y el mítico contador en el footer. Poco a poco los diseños web ha ido avanzando y ya no se ve nada por el estilo (de vez en cuando se ven burradas mas grandes pero ese es otro cantar). Gracias a Microsiervos acabo de remontarme a aquellos tiempos con la web Geocities-izer, que transforma cualquier web actual al estilo Geocities. Así es como queda Pulsa F5 tras el cambio:

Si quieres probar con otras web, basta con entrar en el Geocities-izer y meter la URL.

Como diseñaron el logo de Google Chrome.

masual — Sun, 14 Feb 2010 20:34:05 +0000

En la siguiente imagen se explica el proceso creativo usado para diseñar el logo de Google Chrome.

Tutorial: Diseña tus propias “userbars” con Photoshop.

masual — Sun, 07 Feb 2010 23:16:33 +0000

Las fanbars, aka userbars, fueron un éxito hace unos cuatro años, cuando todo forero poseía en su firma una o varias de estas pequeñas barras.

Consiste en una imagen de 350 x 19 píxeles (este es el tamaño estandar) en la que de forma minimalista se expresa un gusto o afinidad por personas, webs o productos. Se distinguen dos grandes tipos, las userbars propiamente dichas, es decir barras de usuario, (Windows XP User, Linux User, Mac User, Intel Core2Duo User…) y las fanbars, o barras de fan (RHCP Fan, masual Fan… ).

En su día todo el mundo las usaba pero hoy son pocos los que la usan y menos los que se acuerdan de ellas. Haciendo limpieza en mi disco duro encontré una plantilla de Photoshop que había hecho, y me decidí a crear un pequeño tutorial para que todo el mundo pueda crearse la suya. Así mismo en este mismo post, podéis pedirlas, proponiendo un tema o proporcionando una imágen, y estaré encantado de haceros una. Explicaré como hacer tres modelos, uno sencillo y dos un poco más adornados que parten del mismo. Mis conocimientos de Photoshop son reducidos, no esperéis una obra de arte.

User Bar simple

Empezamos abriendo Photoshop y creando un nuevo documento, con fondo transparente de 300 x 19 píxeles:

Lo primero que vamos a hacer es una máscara para generar el brillo característico de las userbars. Para ello, seleccionamos la máscara elíptica y hacemos una selección como muestro a continuación:

Creamos una nueva capa a la que llamamos “brillo” (para tenerla localizada) y la rellenamos de blanco:

Ahora solo tenemos que ir al menú de capas, seleccionamos la que está de fondo y la rellenamos del color que deseemos; luego seleccionamos la que hemos rellenado de blanco y le bajamos la opacidad a un 25%. El porcentaje variará dependiendo del color de fondo, 25% es un buen valor para empezar.

Como podéis ver estamos usando Photoshop de una forma muy básica, es un tutorial muy sencillo que cualquiera puede realizar.Solo nos falta añadir el logo y el texto. Buscamos una imagen que tenga una buena calidad, la recortamos y la pegamos en la barra. Pulsando “Ctrl+T” la adaptamos al tamaño. Ahora hacemos click en el cuadro de texto. A mi me gusta usar una fuente que se llama “Zelda” para las userbars, ya que tiene un aspecto pixelizado que le da un toque curioso. Si alguien la quiere que la pida y la subo sin problema.

Una vez tenemos el texto puesto, nuestra user bar simple está terminada:

Queda un poco sosa pero nos servirá de plantilla para las otras versiones, que espero poder tener listas mañana, así como una pequeña recopilación de varias userbars y fanbars para descargar.