Exportar assets de Sketch a Invision

Lo primero que tienes que hacer es instalar el plugin Craft en Sketch, para poder sincronizar tus diseños con Invision.

Cuando estos diseños ya están sincronizados y los tenemos dentro de un proyecto de Invision, se habilitará una función llamada Inspect Mode.

Con esta herramienta, la persona que maquetará el diseño, podrá ver tamaños de elementos, espacios, colores, tipografía, etc. e implementar los diseños de manera más rápida y eficaz. ¡Y no solo eso! También podrá descargar todos los assets que hayamos exportado en Sketch previamente.

¿Cómo exportar los assets correctamente?

Para que la iconografía esté bien exportada y no de problemas a la hora de maquetar, debemos seguir estos pasos:

  • Selecciona todas las capas del icono que quieres exportar y pulsa “Layer” > “Convert to outlines”. Esta función hará que tu icono este compuesto por formas rellenas y no por trazos.

  • Une todos los elementos con el buscatrazos (“Union”)

  • ¿Se te ha roto el icono? No te preocupes! Es normal. Abre el icono y cambia todas aquellas capas que tengan el símbolo de “Union” a “None”.

Cuando veas correctamente el icono, debemos exportarlo al formato necesario. Para eso, selecciona el icono y dale a “Make Exportable” (esquina inferior derecha). Establece el formato (lo normal es SVG).

Acto seguido, en tu carpeta aparecerá un icono de una cuchilla, que indica que ya está exportado, y cuando sincronices con Craft, ya se habrá añadido como asset al proyecto de Invision.

Acuérdate de nombrar el icono con su nombre correspondiente para no crear varios con el mismo nombre, si no Invision no los reconocerá.

 

¿Y si el icono lo tengo como símbolo?

No pasa nada, puedes exportarlo igualmente siempre y cuando el símbolo esté bien ejecutado tal y como hemos explicado anteriormente.

 

Te recomendamos que sigas estos pasos desde que creas el primer icono del documento, así no se hará tan pesado después.

 

 

Crear un proyecto con IONIC

¿Qué es ionic?

  • Framework open source basado en HTML5, CSS y JS para el desarrollo de aplicaciones híbridas.
  • Está construida con Sass y optimizado con AngularJS.
  • Trabaja bajo Apache Cordova.

¿Por qué usar ionic?

  •  Es sencillo, limpio y funcional.
  •  Está construido para ser rápido gracias a las aceleraciones de transiciones por hardware, la no utilización de jQuery y la mínima manipulación del DOM, además de su arquitectura sólida gracias a AngularJS.
  •  Está basado en los kit de desarrollo de software nativos más populares, por lo que si ya se ha trabajado con aplicaciones nativas, será fácil de entender.
  •  Cuenta con un potente CLI con el que se puede crear, probar, construir o compilar fácilmente las aplicaciones desarrolladas.

Instalar Ionic:

Para poder instalar Ionic necesitamos NPM (node package manager), gestor de paquetes de nodeJS que permite instalar librerías y enlazarlas o descargar programas de js.

INSTALACIÓN DE NODEJS:

  1.  Ir al sitio oficial : https://nodejs.org/en/
  2.  Descargar la versión estable: en este caso V.4.4.4 LTS
  3.  Seguir los pasos del instalador. En el caso de windows, se descarga el instalador, una archivo con extensión msi.

Guía de instalción en iOS:
https://changelog.com/install-node-js-with-homebrew-on-os-x/

Una vez instalado, ejecutaremos en la consola:

Windows:

$ npm i -g cordova ionic

iOs:

$ sudo npm install -g cordova

Con este comando instalaremos Ionic y Apache Cordova, componentes necesarios para comenzar.

Para empezar con la app, ionic ofrece tres esqueletos básicos sobre los que trabajar:

– Blank page: $ionic start myApp blank
– Menú inferior de navegación por tabs: $ionic start myApp tabs
– Página con sidebar menu: $ionic start myApp sidemenu

(myApp -> nombre que tendrá la aplicación. )

 

initialPages

Cuando vamos a ejecutar cualquier comando, tenemos que ir siempre a la carpeta directorio donde queremos que se realice la acción, en este caso nuestra App. Para ir a cualquier carpeta hay que ejecutar en la consola cd + ‘ruta’, por lo que en este caso, para crear la aplicación ejecutaremos dos comandos:

 cd 'ruta carpeta directorio'
 ionic start BBC tabs

Tras finalizar la instalación de nuestra app, podremos ejecutarla para ver el resultado desde la terminal ejecutando:

 cd 'directorio de mi App'

(hay que tener en cuenta que tras la instalación estaremos en la carpeta contenedora del proyecto, por lo tanto, tendremos que entrar dentro de la carpeta myApp, en este caso BBC)

 $ionic serve --lab

(se levantará el navegador con simulación iOS y android) / $ionic serve (levanta el navegador con la aplicación, sin simulación)

firstUp

Para comprobar que todo está correcto, en el directorio de la App, encontraremos una nueva estructura de carpetas:

estructura de carpetas

Tutorial – Tipografía de iconos

En este tutorial me gustaría explicar un poco por encima cómo crear una tipografía con iconos para usar en nuestros proyectos web.

En este caso te enseñaré a añadir nuevos iconos a la tipografía Glyphicons que incluye Bootstrap, también nos vale para FontAwesome o para hacer una propia desde 0 :).

Qué necesitamos

– Un programa de diseño de tipografías, existen muchos (FontLab, Glyphs…), pero BirdFont es gratis, y aunque no es muy intuitivo, nos puede servir.

– Conversor de tipos como FontSquirrel, necesitaremos convertir el archivo resultante .ttf en formatos de fuente web: .eot, .woff y .svg.

– Los iconos que quieras meter en la tipografía en formato SVG: sin agrupar, sin trazados compuestos, todas las formas expandidas y fusionadas.

– Mucha paciencia! No desesperes, BirdFont tiene una interfaz un poco rara y poco intuitiva, así que intentaré simplificar y guiar al máximo los pasos.

Continue reading

Cinemagraph – Fotografiando el movimiento

Las imágenes son potentes recursos gráficos que nos permiten marcar la distinción en nuestros diseños. Pero a veces no es suficiente. Un vídeo también ayuda pero pueden llegar a pesar mucho y ralentizar la carga.

¿Qué podemos hacer entonces? Pues un híbrido. Un vídeo que se al mismo tiempo sea una foto. Esta técnica se llama: Cinemagraph.

¿En qué consiste Cinemagraph?

Usaremos un vídeo, del que sacaremos una imagen fija y a la que luego dotaremos a uno de sus elementos de movimiento.
Por ejemplo, una foto de una modelo a la que solo se le mueve el pelo.

¿Qué necesitamos para hacerlo?

Básicamente: un vídeo. Pero no sirve cualquiera. Dependerá de qué es lo que queramos que conserve el movimiento.

Bueno, os explico el proceso y así entenderéis mejor las limitaciones.

Utilizando Photoshop:

– Abrimos el vídeo que hemos elegido (Abrir > Archivo)

– Se nos abre como si fuera una imagen normal. Pero si nos fijamos en la capa, vemos que aparece un icono de película.

pantallazo1

– Vamos al menú Ventana > Animación, para abrir la línea de tiempo y poner trabajar con el vídeo.

– Nos ponemos sobre el vídeo hasta que encontremos un frame que nos guste para ser nuestra imagen fija.

– Duplicamos capa y la rasterizamos.

pantallazo3

– Ahora ya podemos manejar esta capa cómo una capa de imagen normal.

– Hacemos una máscara de capa de lo que queremos que se mueva. Por ejemplo, en nuestro vídeo queremos que se vea movimiento sólo en el ojo del perro.

pantallazo4

– Y ya sólo queda guardarlo como GIF, con la opción de Animación > INFINITO (quitar la opción: SOLO UNA VEZ). Y ya tenemos nuestro Cinemagraph creado.
perro-ojo