Román Cortés

CSS 3D Meninas

14 de Diciembre del 2009

(versión en castellano abajo)

I’ve took the classic paint The Maids of Honour (Las Meninas) and made this CSS pseudo-3D/parallax effect. It is pure CSS, so no javascript or flash involved: only CSS and HTML code.

It has been tested and it is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates.

UPDATE: 3D Meninas Explained

Castellano

He tomado el cuadro Las Meninas y he creado este efecto pseudo-3D con CSS. Es CSS puro, sin javascript ni flash; sólo código CSS y HTML.

Para la realización he usado tres imágenes: dos se corresponden al fondo (paredes) y otra de sprites (3 sprites: uno con el lienzo, niño y perro, otro con las meninas, y el último con la monja y acompañante). El posicionamiento de los sprites se realiza mediante hover en un total de 80 anchors. El lateral derecho de la habitación se ensancha y contrae para mejorar el efecto 3D.

Hay algunos truquitos para que el hover funcione correctamente, podéis verlos en el código fuente. Para que no interfieran las imáges en el hover, he usado distintos z-indexs y nbsps con tamaño de fuente de 455 píxeles: el mismo alto que el experimento en sí.

Funciona en las últimas versiones de los navegadores más usados y valida.

UPDATE: Explicación del efecto

Logotipos en andaluz

23 de Noviembre del 2009

¿Cómo serían las cosas si todo el mundo hablase andaluz? La verdad es que no tengo respuesta para esta intrigante pregunta, pero sí que os puedo mostrar cómo quedarían los logos de las páginas más visitadas de España:

Logotipos en andaluz

Introducing Slashedit.com

4 de Noviembre del 2009

Slashedit logo 

What’s the big deal? Wikipedia have years with editable content!

Instead of Wikipedia and other websites with editable content, in Slashedit you’re not just available to edit the content; i mean, you can edit the source code! Totally edition freedom.

Welcome to the Web 3.0 guys!

First of all, you need know a few html tags, you can type in your browser http://slashedit.com/anything/edit and you will be creating your http://slashedit.com/anything page. Wow, are you serious? Yeap, that’s it. No login, no email and password, no username, just slashedit.

So, Who owns this page?!

Me! And You! And anyone that see or edit this website.

Spread the word!

Press: Let’s make something that rulz everyone together:

Slashedit logo    Slashedit banner 1    Slashedit banner 2 

Feel free to use the logo or banners in your website

A web project by Roman Cortes with a hand from Elias Sierra

Exposición colectiva ‘Entrelíneas’

28 de Mayo del 2009

El pasado viernes 22 de mayo se inauguró la exposición colectiva Entrelíneas en la Galería de Arte María Soto, en la que colaboro con un par de cuadritos.

Además de mis obras, podréis ver el interesante trabajo de Paula Castelruiz, Alberto Tarsicio, Francisco Villalobos, Javier Rueda y María Corbalán.

La exposición permanecerá abierta hasta el 16 de junio en c/ Los Padros 6, Torre del Mar, Málaga, España, con horario de lunes a viernes de 11:30 a 13:30 y de 19:30 a 21:30, y sábados de 11:30 a 13:30.

Si os interesa realizar una visita a la exposición, no dudéis en contactarme e intentaré hacer un hueco en mi agenda para mostraros mis cuadros personalmente.

Crucigrama friki

13 de Mayo del 2009

Hoy he diseñado el siguiente crucigrama:

Crucigrama Friki

Ofrezco de premio un arenque o una almáciga (a elegir) a la primera persona que lo resuelva correctamente y publique la solución (preferiblemente a bolígrafo).

Dynamic Auto-Painter

4 de Mayo del 2009

(versión en castellano abajo)

Dynamic auto-painter example

Based on my painter software Arcimbolder, the company MediaChance have released Dynamic Auto-Painter.

MediaChance took my original algorithms and have developed with them an amazing tool that turn any image or photo into different styles of paint. There are already other image-to-paint filters, but Dynamic Auto-Painter is currently the only one to give the sensation of a real painting, even from distance - just take a look of the example above, it really looks painted.

 You can download a trial version from its site here.

One of the software users, Lyle J. Kroll said: “I accidently found Arcimbolder and enjoyed playing with it, but DAP is 100 times better.”.

Some more examples with different painting styles:

 

Versión en castellano

Basándose en mi software Arcimbolder, la empresa MediaChance ha lanzado el software Dynamic Auto-Painter.

MediaChance ha usado los algoritmos de Arcimbolder para crear un programa capaz de pintar cualquier imagen o foto en diferentes estilos. A diferencia de otros filtros de pintura ya existentes, Dynamic Auto-Painter es el único programa de dar una sensación de pintura real, incluso cuando se observa el resultado desde lejos (ver la primera imagen de ejemplo del post).

 Podéis descargar una versión de prueba totalmente funcional (trial) desde su web.

Si ya conocíais Arcimbolder, os dejo traducido un comentario de uno de los usuarios de este nuevo software, Lyle J. Kroll: “Encontré casualmente Arcimbolder y disfruté jugando con él, pero DAP es 100 veces mejor”.

Tutorial: mejora el aspecto de tu web

1 de Abril del 2009

En este tutorial he recopilado los mejores trucos, consejos y secretos para darle un aspecto profesional y visualmente atractivo a vuestras páginas web.

Titulos vibrantes

1) Desde Photoshop, escribe el título que desees publicar con una fuente bonita (Comic Sans suele ofrecer buenos resultados).

2) Rasteriza la capa de texto y aplícale un bonito degradado multicolor con la herramienta de degradado.

3) Por último, aplica una sombra al texto. Las sombras siempre mejoran el resultado. Procura que la sombra sea los suficientemente intensa para que no pase desapercibida. Aquí el resultado final:

Bordes tridimensionales en imágenes

1) Toma una bonita imagen de tu mascota (preferiblemente un gato)

2) HTML y CSS soportan bonitos bordes con efecto tridimensional mediante el siguiente código: <img src=”gato.jpg” mce_src=”gato1.jpg” style=”border-style: outset; border-width: 30px”>

Iconos animados

Hay multitud de iconos gif animados disponibles en Internet. Úsalos para destacar las secciones más importantes de tu web, como en tu dirección de correo. De esta forma, al mismo tiempo que decoras tu web, ¡nadie se olvidará de escribirte!

Mejores imágenes mediante filtros de Photoshop

Existen multitud de filtros para imágenes en Photoshop. Os recomiendo: Invert, Embeed y Lens-flare.

###

Por hoy eso es todo y espero que os haya sido de gran ayuda.  Próximamente publicaré la segunda parte de este tutorial con más consejos y trucos.

¡Feliz Año Nuevo!

31 de Diciembre del 2008

Últimamente he estado bastante ocupado con diversos trabajos y apenas he podido postear. Quería felicitaros el nuevo año, recordaros que sigo aún por aquí, y que espero volver en este nuevo año a la carga con el blog en cuanto tenga algo de tiempo.

 ¡Mucha suerte y prosperidad para todos!

Tux Untooned

28 de Noviembre del 2008

Tux Untooned

Today I’ve been bored enough to untoon Tux - Linux mascot.  I hope you like the result.

Arcimbolder

9 de Noviembre del 2008

(texto en castellano)

WHAT IS ARCIMBOLDER?

Arcimbolder is my latest creation, an image filter software that recreates an image as a collage of objects from an object pack. It is inspired by the artworks of Giuseppe Arcimboldo, a 16th century painter known for creating portait heads made of fruits and vegetables.

DOWNLOAD AND USAGE

You can download Arcimbolder 0.2 alpha here. It doesn’t require installation to run, you just have to unpack all the files and directories inside the downloaded zip file and then run arcimbolder.exe. Remember that it is an experimental -alpha- version, use it at your own risk.

Main menu

In the main menu, click on “Open image” to select the image you want to filter. Then, select a Quality option, a Background color option and an Object pack option. After that, press on “Generate” to start the rendering process.

Rendering process

During the rendering process, if you can click on the rendered image, the process will temporaly stop and a “Save image” button and a original image thumbnail will appear.

By clicking on the thumbnail, you will switch view from the rendered image to the original image, so you can compare the result.

By clicking on “Save image” you can save the current result as a jpeg image.

Clicking again on the rendered image, the rendering process will continue.

The rendering process never stops by itself -you decide when the results are good enough for you.

OBJECT PACKS

There are 2 object packs included with Arcimbolder 0.2, and more will be released soon. Note that packs that are currently provided are just tests and are not yet attuned. I’m also preparing an object pack developer kit, so you can create your own packs.

Arcimboldo’s fruits & vegetables v.1

It includes 57 fruit and vegetable objects directly cropped from Arcimboldo’s paints.

Van Gogh’s brush strokes v.1

It includes 85 Van Gogh brush strokes cropped from some of his paints. The results with this object pack are
similar to oil paints.

Update on 11/10/08: AOP File Format details

QUALITY

The output quality varies depending of the Quality option selected, the object pack selected, the input image and the time you give to the rendering process.

Low: it is thought to be for a fast preview, having low precision. It should render several objects per second in an average computer.
Medium: a good average between speed and precision. It should render about one object per second in an average computer.
High: it renders with a very high precision, but it is very slow -about 1 object every 10 seconds in an average computer-. It is thought to be used only when medium quality is not enough.

BACKGROUND COLOR

It is an useful option when your input image has a flat background color. Matching the input image background color with the background color option, you will have a object-free background in your output, perfect for illustration purposes (e.g. Arcimbolder’s logo was done this way).

REQUIREMENTS

Arcimbolder requires a minimum of 512 Mb of RAM and Windows XP or Vista.
I have also tested it under Kubuntu with Wine, and it seems to work by right clicking on arcimbolder.exe - Open With - Wine.

THE TECHNOLOGY BEHIND ARCIMBOLDER

Arcimbolder uses a computer vision technique called template matching to search for the best positions of objects. Template matching is a computationally expensive task (i.e. very slow), so there are aproximation algorithms that aim to get good enough -but not the theoretically best- results in a reasonable time.

In the case of Arcimbolder, due to the avant-garde use of template matching, none of the common and already developed aproximation algorithms was useful, so I had to develop custom algorithms from scratch, ranging from adaptative Monte Carlo searchs to what I call fuzzy color histogram analysis.

Even if the current code is highly optimized, there is yet room for improvements in future versions.

TO DO LIST

- Release new object packs
- Release the object pack developer kit
- Support for different image formats and resolutions
- Use MMX for a faster memory access (I expect about 20% of speed improvement)
- SMT/Multicore version (70% of speed increase expected on dual core machines)
- Cleaning, restructuring and commenting the source code to release it as open source
- Mac OS and Linux ports