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!
Hace unas semanas contamos con un modelo muy especial que colaboró con nuestro fotógrafo Lluis Gerard. Queremos agradecerle su paciencia y colaboración. A día de hoy no las podrá disfrutar, pero esperemos que dentro de unos años le guste verlas tanto como a nosotros nos ha gustado hacerlas.
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.
Cómo descargar las siluetas
¿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.
Hace unas semanas os enseñamos como hacer siluetas a partir de fotografías con Photoshop e Illustrator.
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.
Seleccionar y borrar toda aquella información no necesaria para el proceso de vectorización
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.
Modificar el lienzo
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).
Vectorizar la imagen
En este caso he dejado los parámetros por defecto, eso sí activando el apartado de “eliminar color de fondo”.
Ventana con los parámetros para vectorizar la imagen
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.
Simplificar nodos
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.
Herramienta de selección de nodos y eliminación de nodos
Unir los objetos vectoriales
Ahora queremos juntar estos dos objetos vectoriales. Para ello los seleccionamos y vamos a trayecto/unión.
Boleana de 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.
Hace unos meses hicimos una animación para Oh my pug, es una sastrería online de ropa para carlinos. La tienda hace chubasqeros, albornoces, jerseys, disfraces… y en general todo lo que se les ocurra, siempre que sea para carlinos. Todas sus prendas están hechas a mano, con materiales de calidad y a medida para cada uno de los perros.
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.
Aquí os ofrecemos 3 nuevos patterns creados por nosotros. Podéis variar su tamaño y así ajustarlos a vuestras necesidades. Para descargarlos, simplemente guardad la imagen y ya podréis trabajar con ellos.
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.
Imagen antes de eliminar el fondo
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…
Imagen con el fondo recortado
Una vez recortado todo aquello que sobra de la imagen seleccionamos todo (Control + A o Cmd + A), lo copiamos y lo pegamos en Illustrator.
Imagen colocada 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.
Clicar Live Trace, seleccionar el preset y los parámetros, y expandir la imagen
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.
Silueta antes de hacer Compound Path
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”.
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.
Siluetas de todas las imágenes
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.
Pathfinder Unir
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.
Pathfinder excluir
¡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á.
Document SetupArtboards
Ahora solo queda grabarlo o exportarlo en el formato que desees.
