¿Qué es Verycocinar.com?

Verycocinar es un canal de televisión gastronómico online. Navegando a través de la web podéis podéis encontrar un contenido variado que va desde recetas de cocina, trucos culinarios, venta de artículos de cocina y recomendació de restaurantes adecuados a todo tipo de necesidades.

¿Qué ha hecho Miraistudio para Verycocinar.com?

Miraistudio se ha encargado del diseño y la maquetación de la página web. La construcción de la web se ha hecho siguiendo una estructura “responsive” que facilite la visualización de la página en todo tipo de pantallas.

¡Os animamos a que disfrutéis de está página web y aprendáis muchos trucos de cocina!

Fotografías de Lluis Gerard.

City Silhouettes es un nuevo proyecto de Miraistudio. El origen de la creación de siluetas surgió con la decoración de un archivador que precisaba de siluetas de unas ciudades determinadas. A partir de ese momento le cogimos el gusto al hecho de crear siluetas vectoriales de ciudades a partir de fotografías.

¿En qué formato están las siluetas vectoriales?

Las siluetas están en formato pdf editable, de manera que al abrirlas en un programa de dibujo vectorial se pueda modificar el dibujo con total libertad.

¿Cómo se descargan las imágenes?

Para poder descargar el archivo pdf primero debes entrar en la silueta que deseas descargar y, una vez dentro del post, debes hacer clic al “like” de facebook, aparecerá un botón con el nombre de la ciudad desde el que podrás descargar el archivo.

¿Qué tipo de licencia tienen los archivos?

Las siluetas publicadas están bajo la licencia de Creative Commons. Se pueden utilizar con fines comerciales y se pueden crear obras derivadas de las mismas. En el caso de que las utilicéis agradeceríamos que citarais la web City Silhouettes.

¿Cómo hemos hecho la página?

Citysilhouettes.com es una web “responsive” que se adapta a todo tipo de pantallas respetando el contenido que queremos difundir. La web se ha elaborado mediante WordPress para mantener una estructura de blog y se ha usado bootstrap para el diseño. Esto hace mucho más sencilla la implementación de una página que puede ser usada en diferentes dispositivos, como pueden ser smartphones y tabletas.

 Descargar la silueta de Mataró

Aquí os ofrecemos una imagen vectorizada de monumentos, edificios y lugares emblemáticos de Mataró.

El documento es un pdf editable, de manera que se pueden modificar los vectores que componen la silueta.

Hoy queremos enseñaros como hacer lo mismo con programas libres, en concreto con Gimp y Inkscape.

Para tener los programas solo hay que ir a las páginas oficiales de Gimp y Inkscape y descargarse los programas para el sistema operativo que tenemos. En mi caso tengo Mac Lion y eso me causó problemas con Gimp, pero al final encontré la versión de Gimp para Lion en Gimp On OS X.

Las imágenes en mapa de bits que vamos a usar para hacer la demostración son éstas. Si queréis poder usar las mismas para hacer el tutorial.

Tratamiento de la imagen en Gimp

Primero abrimos en Gimp la imagen de la bombilla. Hay que eliminar parte del fondo verde para que no entorpezca el proceso de vectorización. Esto lo podemos hacer con la goma de borrar, con la herramienta de selección, en general con cualquier herramienta que sirva a nuestro propósito. No tiene porque ser un trabajo muy minuciosos porque luego vamos a vectorizar la imagen en blanco y negro y eliminaremos el color de fondo.

El paso siguiente consiste en recortar el lienzo (Imagen/tamaño del lienzo). Desactivamos la cadena entre “Altura” y “Anchura” y así podemos recortar el lienzo al tamaño adecuado.

También se puede cambiar el tamaño simplemente haciendo un cuadrado con la herramienta de selección, copiar (Control+c), cerrar la ventana del archivo y pegar (Control+v). De esta manera se crea un nuevo archivo con lo copiado.

Una vez tenemos la imagen acabada la guardamos en jpg.

Vectorizar la imagen

Ahora abrimos Inkspace. Importamos el archivo (en mi caso el jpg de una ilustración de boda). Seleccionamos la imagen y vamos a Trayecto/Vectorizar mapa de bits (Shift+Alt+B).

En este caso he dejado los parámetros por defecto, eso sí activando el apartado de “eliminar color de fondo”.

Si queréis investigar más sobre los parámetros y como funcionan podéis consultarlo en Inkscape Tutorial vectorizar.

Simplificar los nodos

Una vez vectorizado, lo selecciono y voy a Trayecto/Simplificar (Control+L). Así obtengo una objeto vectorial más simple, más fácil de manipular y más ligero a la hora de guardar el archivo.

Repetimos todo este proceso con la imagen de la bombilla. Y mediante la herramienta de “nodos de trayecto” eliminamos todos aquellos vectores que no deseamos. En mi caso he eliminado la chica y el reflejo de la bombilla.

Unir los objetos vectoriales

Ahora queremos juntar estos dos objetos vectoriales. Para ello los seleccionamos y vamos a trayecto/unión.

Si queréis investigar más sobre cómo funcionan las boleanas en Inkspace tan solo tenéis que ir a el tutorial Avanzado publicado en Inkspace.

Guardar el archivo

Hemos acabado la composición y queremos guardarla para que se puedan seguir editando los vectores. La podemos guardar en eps, pero la verdad es el formato svg de Inkspace también se abre en Illustrator.

Descarga la silueta de “Philadelphia”

Aquí os ofrecemos una imagen vectorizada de monumentos, edificios y lugares emblemáticos de “Philadelphia”.

El documento es un pdf editable, de manera que se pueden modificar los vectores que componen la silueta.

La animación se difundió a través de su página de facebook y se hizo a partir de imagenes de los modelos y del logotipo facilitados por la diseñadora.

¡Qué los disrutéis!

Este post tiene como objetivo mostrar cómo hacer las siluetas vectoriales que colgamos en este blog.

En este caso en concreto he escogido la ciudad de Filadelfia.

Lo primero que hay que hacer es seleccionar las fotografías que vamos a utilizar para hacer la silueta de la ciudad.

Una vez seleccionadas, abrimos Photoshop y procedemos a eliminar todas aquellas partes de la imagen que no queremos que aparezcan en la silueta. No es necesario ser muy meticuloso a la hora de recortar porque después vamos a vectorizar la imagen.

Cada uno debe utilizar la técnica que más domine para limpiar la imagen: goma de borrar, el lazo, el lazo poligonal, la varita mágica…

Una vez recortado todo aquello que sobra de la imagen seleccionamos todo (Control + A o Cmd + A), lo copiamos y lo pegamos en Illustrator.

Ya en Illustrator y con la imagen a vectorizar seleccionada clicamos “Live trace” y en la pestaña de presets escogemos la opción que queramos aplicarle. También podemos tocar los parámetros hasta que obtengamos exactamente la silueta que queramos. Una vez obtenido el resultado buscado clicamos sobre “Expand” y ya tenemos la silueta vectorizada.

Particularmente, me gusta obtener solo el trazado negro y eliminar los blancos. Para eliminar la parte vectorial blanca simplemente hay que escoger la herramienta de varita mágica y clicar con esta sobre la parte blanca. Automáticamente se seleccionan todos los trazados blancos y los puedes borrar.

Una vez hecha la silueta podemos ver que está formada por un grupo compuesto de varios trazados. Si queremos convertir la silueta en un único trazado debemos hacer un “Compound Path”.

Este proceso lo realizamos con todas las imágenes que queremos incorporar a la silueta. Ahora bien, a veces simplemente con recortar las imágenes no es suficiente para que queden bien al vectorizarlas.

Por ejemplo, en el caso de intentar vectorizar un edificio blanco podemos querer que esté contorneado por una línea negra para que se aprecien sus dimensiones. En este caso colocaríamos un contorno mediante el programa de edición de imágenes y así obtendríamos dicho contorno en Illustrator cuando procediéramos a vectorizar la imagen.

Una vez tenemos todas las siluetas pasamos a hacer la composición panorámica que queremos. Y procedemos a unir los trazados entre ellos para que toda la silueta sea una unidad.

¿Cómo unimos los componentes de la Silueta?

Para las siluetas que debían unirse he usado la opción de Unión de la ventana de Pathfinder. Acto seguido he seleccionado todo el objeto unificado y he hecho un “Compound Path”. De manera que he unido todos los trazados.

En el caso del robot que he colocado en la parte inferior izquierda. He seleccionado la silueta de la ciudad y la del robot. Acto seguido clicamos en la opción de Exclusión del Pathfinder.

¡Ahora ya tenemos toda la silueta unida!

Lo siguiente que he hecho es escalar toda la composición hasta el tamaño deseado y escalar el lienzo para que encaje con al composición. Para poder hacer esto no debes tener seleccionado ningún objeto del documento. Entonces clicasas sobre el botón de “Document Setup” y dentro de éste seleccionas “Edit Artboards”. Ajustas el lienzo a la composición y ya está.

Ahora solo queda grabarlo o exportarlo en el formato que desees.

Espero que os haya sido útil.