ícono

Al principio de esta serie de “post” sobre Adobe XD les mencioné que XD tiene una virtud poderosa, y es que trabaja con vectores como Adobe Illustrator. Este don es muy bueno debido a que no importa cuanto achiques o agrandes un vector, el mismo se verá bien debido a que los vectores son meramente cálculos matemáticos y no son pixeles; forma en la que trabaja por ejemplo Adobe Photoshop.

Screen Shot 2018-04-13 at 1.16.34 PM

Como recordarán nos quedamos diseñando la barra inferior de nuestra maqueta, e importamos de las maquetas para iOS una barra para colocar iconos. Eeeee… Mirándola bien, no la voy a usar!; vamos a usar y crear nuestros propios iconos. Hoy día usando servicios como: Adobe Stock, Getty Images, iStock, Pond5 y muchos otros servicios que existen en la internet, para comprar fotografías y contenido; podemos encontrar iconos ya creados para ahorrarnos muchos dolores de cabeza o adelantar camino. Ejemplo: digamos que estos iconos los quiero usar pero necesito simplificarlos para que sean propios de la maqueta creada. Si los iconos están creados en vectores, podemos usar dos programas para alterarlos: Adobe XD o Illustrator. Vamos a usar XD!

Screen Shot 2018-04-13 at 1.21.47 PM

Para la sección de Diseño gráfico voy a usar solamente la pluma. Utilizando nuestra herramienta de selección, la cual accedemos a ella presionando la tecla “v” y realizando un “double click” en el vector, podemos seleccionar los vectores que deseamos eliminar.

Screen Shot 2018-04-13 at 1.41.51 PM

Notarás que a casi todos los iconos les eliminé detalles en sus vectores para simplificarlos un poco más; pero el icono de la foto lo cambié por completo. El mismo lo eliminé y usando Adobe XD utilicé un rectángulo grande y muchos pequeños sobrepuestos. Luego los agrupé todos y utilizando las herramientas del “Pathfinder” que se encuentran al lado del botón del “Repeat Grid” pude crear un nuevo icono representativo de un negativo de video. Luego los colocamos juntos, los alineamos y el resultado lo vemos en la siguiente imagen.

Screen Shot 2018-04-13 at 1.46.32 PM

¡Eso es todo por hoy! Sigan diseñado sus páginas. Recuerden utilizar el esquema inicial de aquel “brainstorming” que crearon al principio de esta serie; o hagan como yo, que estoy creando las páginas según llega la musa y según les voy escribiendo estos “post“, jejejejejejejeje! ¡Salven sus trabajos! “Command + s“…

Screen Shot 2018-04-13 at 2.10.30 PM

La semana que viene comenzaremos a trabajar con el prototipo. No se lo pierdan!

¡Buen fin de semana!

CC Libraries en XD

Con la compra de tu licencia del Adobe Creative Cloud; no solo compras usar los programas de Adobe, si no que también tienes la alternativa de guardar en un espacio en la nube tus archivos y hasta salvar librerías de imágenes, estilos, colores, etc que estes usando en tus diseños. Las aplicaciones de Adobe como InDesign, Photoshop, Illustrator y aplicaciones móviles tienen la capacidad de crear en la nube librerías para tener a la mano elementos a usar entre las aplicaciones. Por el momento la versión más reciente de Adobe XD no tiene la capacidad de crear librerías, pero si tiene la capacidad de abrir y usar las librerías que creas en otros programas como por ejemplo en Photoshop.

Screen Shot 2018-04-09 at 12.28.09 PM

Digamos que en Photoshop edito una imagen a usar en una maqueta de XD. Pero digamos que el documento que estoy trabajando en XD se me quedó en mi casa y estoy en Ponce en casa de mis padres! No problem! Acto seguido desde Photoshop busco el menú de Windows/Libraries, y se abre a mano derecha un panel con el nombre de Libraries.

Screen Shot 2018-04-09 at 12.37.17 PM

Es en este panel en donde vamos a guardar nuestra foto o nuestros colores o nuestros estilos de letra o nuestros vectores a ser utilizados en nuestra maqueta en Adobe XD. Para poder colocar la siguiente imagen en una librería en la nube, podemos tan sencillamente como seleccionar la imagen abierta y arrastrarla hasta el panel de librerías. Otra forma y la que yo más recomiendo es crear un “folder” con el nombre de la librería a modo de reconocer los trabajos realizados y subir la imagen. Esto lo podemos hacer de la siguiente forma.

Screen Shot 2018-04-09 at 12.41.18 PM

En la parte superior, del panel de librerías, puedes ver un botón el cual dice: Crear nueva Librería. Al seleccionar este botón se abre un llena blancos, donde colocas un nombre descriptivo de la nueva librería.

Screen Shot 2018-04-09 at 12.48.32 PM

Luego procedes a arrastrar la imagen hasta la zona de carga en el panel. Una vez colocas la foto en el panel, la misma sube a la nube y se encuentra lista para ser usada en cualquier otra aplicación de Adobe que utilice librerías en el Creative Cloud. Luego de subir la foto puedes ir a Adobe XD para utilizarla.

Screen Shot 2018-04-09 at 12.50.55 PM

De regreso a XD, vas al menú principal de “File / Open CC Libraries…

Screen Shot 2018-04-09 at 12.55.52 PM

Una nueva ventana se abre indicando la existencia de una nueva librería  en la nube. De tener múltiples librerías, las mismas se pueden ver en el subenú principal de esa sección. Cuando seleccionas la librería seleccionada vas a ver todos los elementos guardados en ella. En este ejemplo se puede apreciar la foto que acabo de subir.

Screen Shot 2018-04-09 at 12.56.15 PM

Acto seguido puedes seleccionar la foto, arrastrarla  y colocarla en tu maqueta de XD. Puedes notar que la imagen colocada está rodeada de un marco verde y en la parte superior izquierda verás un nuevo icono verde con una cadena. Esto significa que la imagen no está “embebed” dentro del archivo, sino que la misma es ahora una imagen vinculada o “link“. Esto significa que si en un momento se decide cambiar o alterar la foto, esta misma la puedes editar en Photoshop y al momento de salvar la imagen; cuando regresas a Adobe XD encontraras que la imagen a cambiado también.

Screen Shot 2018-04-09 at 1.03.03 PM

Dentro de XD seleccionas la imagen en el panel de librerías de la nube y con el botón derecho del mouse seleccionas “edit“. Automáticamente Photoshop se abre; haces la edición necesaria; salvas la imagen y regresas a Adobe XD para ver el cambio.

Screen Shot 2018-04-09 at 1.09.31 PM

Screen Shot 2018-04-09 at 1.13.02 PM

De regreso a XD verás en el panel de las librerías un icono dando vueltas indicando que se está actualizando la imagen y como por arte de magia aparece la foto actualizada en el panel y en la maqueta.

Si deseas que la foto ya no se encuentre en la nube y que sea parte del archivo de Adobe XD “embebed“; solamente debes de tocar el icono verde de la cadenita y automáticamente la imagen cambia su recuadro verde a uno azul como indicativo de su nuevo estado dentro de XD.

Screen Shot 2018-04-09 at 1.20.01 PM

Vamos a dejarlo hasta aquí por hoy, recuerda practicar lo aprendido hasta ahora y déjame cualquier comentario. Nos veremos en el próximo post!

¡’Dición!

Storyboarder

Hoy descubrí un programa GRATIS por internet el cual literalmente es de GRATIS y si te gusta crear “Storyboards” esto es para ti! Los creadores son WONDERUNIT; estos chicos al parecer trabajaban para Sony Pictures y se cansaron de ellos y de todas las compañias que venden este tipo de software sumamente caro. Los creadores simplemente lo hicieron tan y tan sencillo que funciona increiblemente brutal. Visita el web site y sigue las instrucciones para bajar tu copia GRATIS! NO CASH!

Screen Shot 2018-04-05 at 8.08.48 PM

Yo bajé mi copia e hice una pequeña animación .gif. El software acepta la Wacom muy bien y corre en mi MacBook Pro del 2017 excelente!

Screen Shot 2018-04-05 at 8.06.46 PM

Puedes escribir el diálogo; puedes añadir audio a la animación; hasta puedes exportar no solo tu proyecto a Premiere o Final Cut, sino que también puedes exportar el trabajo a Photoshop; limpiar la animación, retocarla y regresar a la aplicación y todo se actualiza! WAO! Es increible! Para ser una aplicación Gratis! Visiten Wonderunit ; bajen su copia gratis y hagan las pruebas necesarias. Espero les guste como a mi!

Ejemplo 2018-04-05 08.04.42

Buenas noches

Posdata: “Cuando visiten el site de Wonderlist y lleguen a la parte en que los fundadores explican el por qué la aplicación es de GRATIS, van a entender el por qué yo digo que estos chicos se cansaron de su jefe”… jajajajajajaja

Screen Shot 2018-04-05 at 8.28.58 PM

Tratamiento de Imágenes en XD

En Adobe XD puedes importar cinco tipos de imágenes; puedes importar SVG, GIF, JPEG, PNG y TIFF. Cuando importas imágenes debes de asegurarte de que cada imagen tenga tres (3) veces su tamaño en resolución. Por ejemplo; si el “art-board” en XD es de tamaño 1,920 x 1,080 pixeles; entonces debes de utilizar Photoshop para preparar la imagen a un tamaño triplicado de 5,760 pixeles.

Screen Shot 2018-04-02 at 12.57.16 PM

Imagen a 3x.

Nota en la imagen anterior, el “art-board” tiene tamaño 1920 x 1080; y observa la parte exterior de la imagen lo grande que es en comparación con el “art-board” una vez ya tratada en Photoshop al tamaño 3x de 5760 px. Esto te deja sustancia en la imagen para poder jugar con la composición de la misma o cuando rotes el celular o la tableta; la imagen se acomoda respectivamente sin perder la calidad.

Screen Shot 2018-04-02 at 1.01.58 PM

Art-board horizontal.

Screen Shot 2018-04-02 at 1.02.29 PM

Art-board vertical.

Una vez la imagen está colocada en su sitio, te puedes despreocupar del sobrante de la foto, debido a que el “art-board” en XD funciona como una mascara. Lo único que se observará es lo que se encuentra dentro del “art-board“.

Screen Shot 2018-04-02 at 1.05.17 PM

Art-board 1920 x 1080 vertical.

Si eres usuario de Adobe InDesign, estarás acostumbrado a tratar las imágenes como vínculos o “links“. Este método hace que el archivo sea menos pesado y fácil de manejar; pero al momento que borras o mueves una imagen fuera del folder o directorio en donde se encuentra, Adobe InDesign no ve el vínculo y el mismo se rompe. Adobe XD no utiliza el método de InDesign; Adobe XD utiliza el método “embebed“; esto significa que toda imagen colocada dentro de XD queda impregnada en el archivo y el archivo lo puedes llevar contigo a donde sea y te despreocupas de tener vínculos perdidos. En cierta forma este método es bueno y también es malo debido a que el archivo de trabajo de XD, en cuanto más se agranda tu maqueta, más pesado en megabytes es el archivo y su acarreo o compartir se complica. Quizás en un principio puedas compartir el archivo por e-mail, pero al final del proyecto lo estarás compartiendo con un disco duro externo. El archivo de XD al final va a contener todo lo que usaste en tu diseño; imágenes, iconos, texto, etc.

Screen Shot 2018-04-02 at 1.12.44 PM

Archivo XD

Art boards y Vectores

Screen Shot 2018-03-27 at 2.11.47 PM Art boards

Screen Shot 2018-03-27 at 12.53.54 PM

Cuando mencionamos la palabra “Art boards“, estamos hablando de la página o lugar en donde hacemos el diseño de la aplicación que tenemos en mente. Si diseñamos para el iPhone y escogemos un modelo de plantilla, vemos en el sub menú que el iPhone X tiene por ejemplo una resolución de 375 pixeles x 812 pixeles a diferencia de las versiones Plus del iPhone 6/7/8; que tienen una resolución de 414 pixeles x 736 pixeles. Por defecto o “default” Adobe XD diseña a un tamaño básico de 1x – (No es HiDPI) o sea no es a 2x – o mejor conocido como el “Retina Display“. Para poder diseñar a un tamaño HiDPI debes de duplicar las plantillas. Si utilizamos el tamaño de un iPhone 6/7/8 y multiplicamos la resolución x 2, obtenemos un art board de 750 pixeles x 1,334 pixeles. Vean la diferencia de tamaño entre un art board 1x y otro art board 2x para el mismo celular.

Screen Shot 2018-03-27 at 1.17.50 PM

Si colocamos la misma imagen en ambas plantillas podemos ver la diferencia en tamaño. Quizás en este post no puedas ver la diferencia en la resolución; pero puedo apostar y estoy seguro de que la foto a 1x dentro de un art board a 2x, vas a ver la imagen borrosa.

Screen Shot 2018-03-27 at 1.33.47 PM

Si exportamos los art boards y los abrimos en Photoshop CC, puedes ver el tamaño de cada imagen. La imagen 1x (375 px X 667 px) tiene un tamaño de 732.8K; o sea no llega ni a 1 Mega, versus la imagen 2x (750 px X 1,334 px) que obtuvo un incremento en tamaño a 2.86M (Megas). Ambas a la resolución oficial para web de 72 pixeles por pulgada. Por mi experiencia, puedo ver la diferencia en el área de los dientes.

Screen Shot 2018-03-27 at 1.30.55 PMScreen Shot 2018-03-27 at 1.31.27 PM

Screen Shot 2018-03-27 at 1.55.43 PM Vectores

Si hacemos una comparación, podemos decir que Adobe XD es un mini Illustrator; debido a que Adobe XD contiene una herramienta llamada el “Pen Tool“. La cual ya sabes acceder con el atajo del teclado, usando la tecla “p“. Con la pluma puedes crear vectores rectos, curvos y cerrados. Pero si te gusta usar Illustrator, no hay problema! Entre Adobe XD e Illustrator puedes copiar y pegar cualquier vector trabajado. Digamos que diseñaste un icono de humano en Illustrator; para llevarlo a XD solo debes de darle un “Copy” en Illustrator y luego un “Paste” en XD.

Screen Shot 2018-03-27 at 2.14.41 PMScreen Shot 2018-03-27 at 2.15.24 PM

Adobe XD no solo entiende que estas pegando un vector de Illustrator; si no que también respeta la transparencia de la imagen y si le das un “double click” al vector que acabas de pegar en XD; también puedes alterar los vectores a gusto.

Screen Shot 2018-03-27 at 2.28.35 PM

Si conoces y has usado las herramientas del “Pathfinder” en Illustrator; también te será familiar trabajar con las mismas herramientas dentro de XD.

Screen Shot 2018-03-27 at 2.31.19 PM

“Pathfinder”

Screen Shot 2018-03-27 at 2.31.06 PM

Al colocar la imagen en vectores una encima de otra puedes combinarlas tanto para crear vectores nuevos o destruir o modificar para obtener nuevos resultados. Vean como tomé la imagen del humano; traslado su cabeza al lado izquierdo y con la herramienta del “Pathfinder – Exclude Overlap” pude eliminar el centro entre ambos vectores.

Screen Shot 2018-03-27 at 2.31.43 PM

Utiliza en tu práctica las herramientas de Adobe XD para crear todo tipo de icono dentro de tu nueva maqueta y tu aplicación será única. Recuerda usar los atajos del teclado para tener acceso más rápido a ellas. Verás que en poco tiempo estarás manejando el programa con la familiaridad con que usas Illustrator.

Screen Shot 2018-03-27 at 2.30.18 PM

¡Hasta otro rato!

 

¡Tesoros escondidos!

Screen Shot 2018-03-21 at 2.46.19 PM

Tan pronto inicias Adobe XD te encuentras con una ventana de bienvenida que te muestra, en la parte superior, plantillas o “Templates” de los tamaños más comunes hoy día si vas a diseñar para iPhone, iPad o página web. Adicional a eso puedes encontrar un ícono para crear tamaños libre o “custom“. Hoy día muchos programas de Adobe traen una pequeña sección la cual te enseña cómo usar la aplicación. Adobe XD contiene en su ventana de bienvenida, en la parte inferior izquierda, una sección en la cual cuando seleccionas, se abre un proyecto, con instrucciones detalladas básicas de cómo usar la aplicación.

Screen Shot 2018-03-21 at 2.53.55 PM

Una vez realizas lo que te pide hacer cada paso, al final tienes un entendimiento básico del programa. Es en este momento que haces el siguiente comentario: Ahhhhhhhhhh!, Ohhhhhhhh! que gufia’o!

Luego en la parte central inferior de la ventana de bienvenida o el “welcome screen“, encuentras vínculos o “links” que te llevan a una página web en Adobe.com donde puedes bajar, gratis!, a tu computadora, todos los elementos que se usan hoy día en las interfaces para el usuario o mejor conocido como UI (User interface).

Screen Shot 2018-03-21 at 3.01.10 PM

Si ves tu celular, sea Androide, sea Apple, sea lo que sea vas a notar iconos de wifi, señal, volumen, bocinas, botones, etc etc. Pues todos esos iconos los puedes usar en tus maquetas, pero mucho ojo, recuerda que puedes usar estos iconos de guía para tus maquetas pero siempre, siempre, siempre debes de crear tus propios iconos, no te quieras encontrar con una sorpresa al final del camino; que no te aprueben la aplicación y tengas que regresar a la mesa de dibujo. Siempre lee las letras chiquitas!

Screen Shot 2018-03-21 at 3.28.34 PM

Justo al lado de los “UI Kits” puedes encontrar una sección que te brinda más información de ayuda, como por ejemplo: ¿Qué hay de nuevo en la más reciente versión de Adobe XD?, Tutoriales directos desde Adobe.com, etc etc.

Screen Shot 2018-03-21 at 3.40.48 PM

Un ejemplo de algo nuevo que trae esta versión de Adobe XD es que si te gusta diseñar en Photoshop y tus modelos ya están creados como .PSD; con Adobe XD ahora puedes abrir tus documentos de Photoshop y continuar trabajando en XD.

Screen Shot 2018-03-21 at 3.42.21 PM

Abre documentos de Photoshop y Sketch directamente en Adobe XD.

Finalmente la ventana de bienvenida en la parte derecha te muestra un listado de los documentos más recientes con los que has trabajado. “Notaste todos los tesoros escondidos que trae una simple ventana al comienzo de una aplicación“. La próxima vez que abras una aplicación, detente y observa que cosas te ofrece, antes de comenzar a trabajar en ella. En el próximo “post” hablarmos de los “artboard“.

¡Pendientes!

Tirando líneas

La casa que me vió nacer! En esta casa nacimos y nos criamos mis tres hermanos y yo; en un principio era más pequeña de lo que ven en la foto inferior. Tenía marquesina, un pino en su patio frontal, en fin sencilla y humilde. Con el tiempo el viejo le fue dando cariño a lo que es hoy día, todo un palacio donde fueron criados cuatro “jiribillas“.

img_6014

Antes de la idea.

El viejo “Papi” desea hacerle otro “lavaito” de cara a la fachada y debido a su edad y a la falta de poca visión que ha perdido con los años, recurre al artistas de la casa para plasmar su idea visualmente y mostrarle a “Mami” como puede quedar la nueva fachada. Acto seguido y con orgullo tomé mi computadora y usé Photoshop para tirar par de líneas y elementos gráficos que plasmaran la idea que me dictó por teléfono, el ya retirado Ingeniero Instrumentista, “Don Vale”!

img_6016

Después de la idea.

Como siempre menciono en este tipo de trabajo fotográfico; lo que ven en la foto alterada, “es una representación artística de la idea solicitada”. Luego más adelante, en el camino, cuando ya vaya tomando fuerza la decisión final, para realizar la construcción, se van afinando los detalles reales de un verdadero estudio de carga, para luego comenzar con la construcción. En las fotos pueden apreciar un antes y un después de cómo puede quedar la nueva fachada del castillo de los Valenzuela Hernández.

¡’Dición!