Prototipo

¿Qué es un prototipo?

Si buscamos la definición de prototipo en el internet nos encontramos con esto:

Basado en esa definición entonces un prototipo en Adobe XD es cuando tomamos nuestra maqueta, le añadimos interactividad y la compartimos con amistades y hasta el cliente para que tenga una visualización de cómo va a funcionar o moverse su aplicación entre página y página. De este modo obtenemos comentarios y correcciones del trabajo realizado hasta el momento.

Modo de diseño.

Modo de prototipo.

Durante el proceso de aprendizaje con Adobe XD, notamos que debajo de la barra del menú principal, vemos que la aplicación tiene en su parte superior derecha, dos secciones: una de «Diseño» y otra de «Prototipo«. Usamos la sección de diseño para crear nuestra maqueta y tenemos disponible todas las herramientas de diseño de Adobe XD. Cuando comenzamos a crear interactividad en nuestra maqueta, para visualizar su funcionamiento; la sección de prototipo reduce sus herramientas a dos: la flecha de selección y la lupa. Un atajo en el teclado, entre ambas secciones, es presionando la tecla de «Control» + «Tab» cada vez que deseemos diseñar y probar, diseñar y probar.

Al momento de seleccionar la sección de prototipo en nuestra maqueta; Adobe XD nos muestra un primer mensaje en pantalla enseñándonos cómo vamos a darle interactividad a la maqueta. Este proceso se lleva acabo entrelazando «wires» o cables entre aquel objeto el cual deseemos que sea un activador y su destino.

Algo muy importante para recordar es que Adobe XD utiliza la posición de tus «artboards» para nombrar o seleccionar el «Home Screen» como la primera página o pantalla a mostrarse en tu maqueta. Recuerda que no es lo mismo que tu nombres tu propio «Home Screen» en tus «artboards«; a que Adobe XD nombre la pantalla que es el «Home Screen» de la aplicación. La formula que utiliza el programa es: «Top most» o «Left most» o sea la página más alta que acomodes en la parte superior de tu maqueta o la página más alta que acomodes a la izquierda del programa.

En el ejemplo de arriba notarás que el «Artboard – 4«; Adobe XD lo seleccionará como el «Home Screen» de la aplicación debido a su posición en la maqueta. La misma se encuentra más a la izquierda y más sobre el «Artboard – 1«; aunque el mismo se haya diseñado último en todo el proceso. El «Home Screen» se identifica con una pestaña gris y dentro de ella una casita blanca. Cuando seleccionas la casita, el recuadro cambia de color gris a color azul. Este color te indica que se sleccionó y se activó el «Home Screen«.

Digamos que deseas mostrarle a tu cliente en Japón una sección del prototipo pero no deseas mostrarle toda la maqueta. Esto lo puedes lograr seleccionando la página deseada a ser mostrada como primera y luego activando la casita de «Home Screen». Cuando el cliente abre la maqueta, la misma le abrirá en esa sección y podrá interactuar solo con esa seccción. Nota – «teniendo en cuenta de que no exista un botón que interactue con la página que no deseas que el cliente vea».

Página #1 es el «Home Screen» de la maqueta.

Página #3 es ahora el nuevo «Home Screen» de la maqueta.

En las dos imágenes superiores notarás unas líneas azules entre página y página; esto son los «wires» o cables que entrelazan a cada página y crean la interactividad. En el próximo post hablaremos sobre ellos.

«¡Hasta luego!».

Anuncio publicitario

í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.

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!

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.

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.

¡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«…

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

¡Buen fin de semana!

Cariño

Ayer les dejé una encomienda y era darle cariño a la página de servicios del estudio JRV. ¿Cómo les fue? A mi de maravilla! jejejejejejej. Aquí les dejo el diseño!

Como pueden ver le apliqué una sombra a las esferas de cada servicio. Este resultado lo puedes lograr con solo visitar el panel de propiedades y cuando selecciones la primera esfera puedes activar el checkmark para Shadow y ajustas los parámetros para x; y; b (blur o difuminado). Rápidamente notarás que las demás esferas adquieren la misma propiedad.

Nota que también le añadí un botón que dice Cotizar; ese botón se encuentra agrupado dentro del grupo principal y el mismo se repitió  en los demás elementos. ¿Cómo altero un grupo que ya es parte del «Repeat Grid«?

Sencillo…

1. Primero diseñas el botón con la herramienta de recuadro. Le cambias la apariencia a tu gusto; bordes redondeados; color y nada de bordes.
2. Con la herramienta de texto escribes la palabra que desees y la colocas sobre el recuadro. Recuerda que en el panel de estilos tienes guardados par de estilos de páginas anteriores los cuales puedes volver a usar y aplicadle un color.
3. Agrupa el recuadro y el texto. Selecciona el botón y dale «Copy» y luego «Cut«
4. Selecciona con un «click doble» la esfera de el primer grupo en el «Repeat Grid«. Notarás dos cosas: un recuadro verde en el exterior y uno azul; el azul indica el área que compone el primer grupo y el verde indica el área de todo el «Repeat Grid«
5. Ahora cuando selecciones «Paste» el botón se colocará dentro del área azul y como por arte de magia verás que se repite en las demás secciones.
6. Ahora puedes seleccionar cada elemento y acomodarlo a tu gusto. Recuerda que tienes un elemento seleccionado si al mismo le rodea un borde azul. Pero si lo que seleccionas es un grupo dentro de otro grupo lo que le va a rodear es un borde verde. Es un poco complicado, pero estas señales debes de tenerlas en mente para que sepas qué es lo que estas seleccionando.

Ahora busca en las maquetas de los iconos para iOS, elementos que necesites para adornar tu maqueta, como la barra de «Wifi» para la parte superior y la parte inferior de la pantalla.

Solamente seleccionas el grupo que compone la barra «Wifi, hora y porciento de batería«. Utilizas el comando «Copy» y luego «Paste» en tu diseño. Para mi gusto y diseño utilicé la de color blanco. Lo mismo hice con una barra inferior para crear un pequeño menú de navegación.

Me voy a entretener creando este menú de navegación y para el próximo post te mostraré mis resultados. Déjame un comentario de cómo te vá y te espero en la próxima.

¡C-Ya! 

 

Splash/Bienvenida/Repeat Grid

Cuando abrimos una aplicación en nuestro celulares, notamos que antes de comenzar a interactuar con ella vemos lo que se conoce como el «splash» o sea esa primera página que se carga y muestra el logo de la aplicación yo compañia. Si seleccionamos el nombre de la página «Password» y presionamos la tecla de «Option» y arrastramos hacia la izquierda la página o a tu preferencia; estamos duplicando todo el contenido y creando una copia. Esta copia cambiale el nombre de la misma forma que ya sabes hacer. Llamemosla «Splash«.

Vamos a eliminarle el teclado iOS, los símbolos y el recuadro difuminado y hasta la foto de fondo. Luego usa la herramienta de rectángulo y dibuja uno en toda la primera página. Dale el color de tu preferencia. Si tienes Adobe Illustrator o Adobe Photoshop y tienes tu logo en vectores; guárdalo en formato .svg o en .png y colócalo en el centro de la página. Listo!, diseñaste la página de «spalsh» de tu maqueta.

Acto seguido, usualmente luego de unos tres o cinco segundos, se muestra lo que sería el «Home» de la aplicación. ¿Estas listo? Ahora diseña, con lo que sabes hasta ahora, la primera página de tu aplicación. ¿Qué deseas que se vea en ella?

Muy bien! Vamos a ver si hiciste lo mismo que yo! Duplicaste la página «Splash» y borraste el cuadrado azul de fondo. Seleccionaste la foto de la página de «Password» la copiaste y la pegaste en la nueva página «Home«. Diseñaste un botón y lo agrupaste con la palabra «Welcome» y lo colocaste en la parte inferior de la página. Como resultado tienes hasta ahora tres páginas que corren de izquierda a derecha; primero el «Splash«; luego el «Home» y cuando se presione el botón de «Welcome» pasamos a la página de «Password«. ¡Hasta ahora to va de show! Recuerda que el tanto el estilo del texto como el logo y el botón de bienvenida, los puedes guardar en el panel de símbolos para poder usarlos en páginas adicionales y así tu diseño mantiene un mismo estilo a lo largo de toda la maqueta.

¡Ahora es que viene lo bueno! Vamos a crear una página la cual mostremos los servicios que tiene la compañía JRVstudio. Vamos a crear una página de «Servicios» y en ella vamos a usar la herramienta más poderosa de Adobe XD; el «Repeat Grid«.

Este botoncito es el que hace la magia de repetir patrones. El «Repeat Grid» se encuentra en el panel de propiedades; se mantiene inactivo hasta que tocas un objeto. La mejor manera de utilizarlo es una vez diseñas un grupo de objetos que vas a repetir más de dos veces en tu diseño. En este caso una vez está listo el grupo, solamente lo seleccionas y presionas el botón. Verás que se forma un rectángulo verde al rededor de tu objeto y el mismo contiene unos manipuladores, tanto a la derecha como a en la parte inferior del objeto. Estas pestañas te permiten tirar del objeto y como por arte de magia se repite la imagen cuantas veces desees.

«repeat Grid» activado.

Si arrastras hasta el final de la página obtendrás un patrón de cinco objetos con el diseño deseado. En mi caso diseñe un grupo con una esfera; un título grande y un subtítulo más pequeño.

Ahora; busca 5 imágenes que se relacionen con las secciones diseñadas en el «Repeat Grid«. Para que el truco funcione debes de enumerar del 1 al 5 para que mantengan un orden al momento de ser colocadas dentro del «Repeat Grid«. Mantén abierta ambas ventanas; la del «finder» y al lado la de Adobe XD; selecciona todas las imágenes y arrástralas hasta la primera esfera. Cuando la esfera se torne de color azul, puedes soltar las imágenes y notarás que todas las demás esferas se rellenan con cada foto seleccionada.

Imágenes enumeradas.

¡Nítido!

Cuando comencemos a cambiar el título de cada sección, nos vamos a encontrar con problemas debido a lo largo de los títulos. ¡No problem! Puedes cambiar lo que dice cada sección, pero al momento que cambias el estilo de letra; la fuente o familia; todos los demás cambian simultáneamente. Selecciona el título más largo y cambiarle el tamaño de la fuente.

Si recuerdas bien, teníamos guardadas cinco imágenes y arrastraste cinco, pero en la página hay 4; ¿Dónde está la quinta? Para finalizar selecciona la página en la palabra «Services» al tope de ella y cuando aparezcan los tiradores en sus cuatro esquinas y medio, arrastra para alargar la página. Notarás un nuevo elemento en tu página…

… este elemento  o pestaña azul indica el final de la página en tu celular y todo lo que se encuentre hacia de babajo de ella lo podrás acceder deslizando tu dedo en el celular para subir la página. Ahora desliza el restante del «Repeat Grid» y encontrarás la quinta foto.

¿Qué te pareció el taller de hoy? Si te agrada lo que lees a diario, déjamelo saber en un comentario y comparte lo aprendido con tus amistades y tus diseños. Por hoy dejemos hasta aquí lo aprendido. Continúa tu práctica en el Diseño de Interfaces de Usuarios «UI Design«. En el próximo post, le daremos cariño a esta página con elementos iOS.

¡Hasta el próximo post!

Primera página diseñada en XD

Cuando colocamos una foto en Adobe XD para comenzar a crear una maqueta de una aplicación; vemos que cuando el «artboard» está colocado de forma vertical, y la foto es horizontal o como dicen en España «apaizada«; notamos que la parte de la foto que se encuentra fuera del «artboard» queda enmascarada. Cuando tenemos una foto como esta podemos jugar libremente con su acomodo en el canvas utilizando el panel de propiedades y los parámetros que se activan al seleccionar la foto.

Antes de comenzar a tocar los botones del panel de propiedades, observemos por un momento cosas que podemos alterar en una foto con solo nuestro mouse. Si se fijan bien en la foto, la misma tiene una herramienta la cual fue introducida primero en Adobe Illustrator CC; y es la habilidad de redondear las esquinas. Solo debes de seleccionar y arrastrar el punto interno hacia adentro de la foto para comenzar a redondear las cuatro esquinas al mismo tiempo. Si seleccionas la tecla de «Option» en tu teclado mientras arrastras el «mouse» vas a redondear solamente la esquina seleccionada.

Este efecto también lo puedes lograr si en el panel de propiedades seleccionas en la sección de «Aprearance«; en la segunda sección; con los botones siguientes. El primero es para redondear las 4 esquinas al mismo tiempo; y el segundo botón es para activar los parámetros y escribirlos tu mismo.

Puedes notar que en esta sección también puedes activar y alterar los colores del polígono seleccionado; sus bordes; darle sombras al objeto y difuminar el objeto en dos formas distintas de efectos: «Background Blur» y «Object Blur«. Si seleccionas «Object Blur«, estarás difuminando solo la imagen u objeto seleccionado en porcientos de 0% a 100%.

Si deseas usar el filtro del «Background Blur» necesitas un elemento a adicional para que funcione el efecto. Necesitas un segundo polígono u objeto sobre la imagen. No importa si el nuevo objeto tiene color o borde. El secreto es que el objeto superior difumina al objeto inferior; veamos el ejemplo.

Primero colocamos un cuadrado sobre la foto y que cubra más de la mitad de la parte superior. Nos olvidamos por completo de su color y ajustamos solamente los parámetros en el panel de propiedades. En este caso utilice 19 para la difuminación; 19 para el brillo y 0% en la transparencia. En la imagen de abajo podemos ver el resultado obtenido.

Más o menos ya pueden ver hacia dónde nos dirigimos con este efecto. Usualmente cuando activamos una aplicación, tenemos que activarla colocándole un nombre de usuario y una clave de acceso para poder entrar y usar los servicios de la misma. Digamos que estamos diseñando una aplicación para un Banco; pues en la primera página de la maqueta necesitamos comunicarle al programador que necesitamos que programe una acceso. Utilizando los elementos del iOS de Apple; que de antemano descargamos a nuestras computadoras; podemos colocar en la parte inferior de nuestro arte, el teclado diseñado por Apple en su «UI Kits«. Usamos la herramienta de texto y escribimos lo propio para esta zona del diseño y le colocamos una línea para obtener un diseño minimalista. En el panel de propiedades podemos cambiar los parámetros tanto del texto como el de las líneas creadas. Recuerda todo lo que diseñes o toques en la página de diseño afecta o activa parámetros nuevos en el panel de propiedades constantemente.

Como esta página no es la primera en todo una gama de otras páginas a diseñar, podemos seleccionar el nombre del «artboard» que se encuentra en la parte superior, hacemos click dos veces en el mismo y le cambiamos el nombre a «Password«. Esta página puede ser la segunda o quizás la tercera en el diseño a crear. También veamos como en el panel de «layers» nuestra primera página actualiza su nombre.

Si hacemos «double click» en el «artboard» llamado ahora Password podemos notar todas las capas que componen esa primera página creada. Adobe XD le adjudica nombres cada elemento a su discreción; también notemos los símbolos que usa en cada capa. «Keyboard Alphabetic» para el teclado; «Symbol 1-1» que contiene una línea y el texto del Username; un «Rectangle 1» para el objeto borroso sobre la foto; y la foto de la cascada con su nombre de archivo de compra. Mientras más objetos, grupos y vectores contenga tu maqueta; más difícil se complican estos nombres. Por ende te aconsejo a que siempre regreses un momento a los «layers» para que los identifiques a cada uno y no te rompas la cabeza buscando algo en tu diseño y no lo puedes encontrar por falta de tiempo para nombrarlos adecuadamente.

Hasta aquí por hoy! En el próximo post hablaremos sobre la herramienta más poderosa que tiene Adobe XD; el «Repeat Grid«.

¡Hasta luego!

 

Panel de Propiedades en XD

Si observas el lado derecho de la aplicación Adobe XD verás un panel llamado el panel de propiedades. En otro programas de Adobe como Photoshop, Illustrator, InDesign, etc etc este panel se compone de muchas pestañas las cuales tienes que abrir y cerra cada vez que deseas alterar algun parámetro de algún objeto. En Adobe XD este panel (el cual marqué en azul) es más inteligente; debido a que el cambia su contenido dependiendo de lo que tienes seleccionado en los «art-boards» de la maqueta.

Si seleccionas solamente la primera página de tu maqueta, acto seguido verás que el panel de propiedades se activa y te muestra que la página tiene un tamaño de 375 x 667; te muestra que la altura del área visible es 667; te muestra un botón donde te dice que la página está en forma vertical y puedes cambiar a tu gusto de forma horizontal.

Si seleccionas la sección de apariencia puedes cambiarle el color a la página con solo seleccionar el cuadro de color. La ventana de color que a continuación se abre es sencilla pero bien poderosa.

Quizas por el momento no hable de ella en su totalidad, pero te puedo mencionar que dónde quiera que veas un recuadro de color, ella se abrirá y podrás hacer de todo como seleccionar colores sólidos, degradaciones lineal y radial; colores hexadecimales, RGB (Red-Green-Blue), HSB (Hue-Saturation-Brigthness) y Alpha. Puedes seleccionar el gotero para seleccionar un pixel de color de una foto. También puedes guardar colores para usar en otros momentos, en fin como dije antes, para ser un pequeño recuadro es bien poderoso sus funciones.

Otra sección que puedes encontrar en el panel de propiedades, con solo seleccionar el «art-board» es el «Grid» o líneas guía y sus diferentes aspectos para que puedas alinear tus objetos en tu diseño. Si seleccionas el menu «Layout» podrás ver que puedes alterar la cantidad de columnas guía; la separación entre cada una; el ancho de cada columna; seleccionar márgenes derecho/izquierdo o vuelta redonda. Usar el que viene de predefinido de fábrica por Adobe; alterarlo y predefinir el tuyo propio.

Si seleccionas el menu «Square» podrás ver una mantilla que te puede ayudar también a a comodar tus objetos pixel por pixel.

En el siguiente ejemplo puedes ver lo bueno que es tener a la mano esta presición, al momento de alinear objetos basados en el «pixel grid«. Si creamos tres objetos cuadrados con los bordes redondeados; luego los alineamos uno al lado del otro; activamos el «square grid» y nos acercamos a una pequeña áres observamos que los objetos no están exactamente alineados.

¡No problem!…

… seleccionas uno de los objetos y con el lado derecho del mouse seleccionas en el sub menu la opción de alinear al «pixel-grid«. Para que esto funcione debes de asegurarte de que cada cuadro tiene la medida de un pixel.

Acto seguido notarás que la imagen se alinea perfectamente.

Recuerda que para que el objeto se acomode en el la página, pixel por pixel, debes de cambiar la cantidad de cuadros en la sección de «Grid» como circulo en rojo en la siguiente imagen.

¿Mucha información por hoy? Jejeje… no te apures, dejemoslo ahí por ahora. Solo recuerda que el panel de propiedades también cambiará sus parámetros con cada objeto que selecciones.

Buenas noches!

 

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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!

Keyplan 3D para diseño de muebles de cocina

Antes de seguir con Adobe XD, quiero dejarles este video, desviándonos un poco del tema, en donde les muestro cómo yo en lo personal uso el iPad y la aplicación «Keyplan 3D» para diseñar un primer modelo a construir para una cocina en una casa. Espero les guste! También puedes visitar la página web de los creadores de la aplicación para más detalles. http://www.keyplan3d.com

¡Bonito día!

Panel de Símbolos en XD

Disculpen el desvio de tema cuando ayer les hablé de «Storyboarder«; les gustó la aplicación, verdad? Después seguimos jugando con ella! Hoy les quiero hablar un ratito de el panel de Símbolos. Mencionamos que accesamos a panel con el atajo en el teclado:

• «Shift + Command + y«;
•  o tocando el botón 

Digamos que tenemos los siguientes elementos en el «art-board» de la aplicación que deseo crear. Cuatro antenas «Wifi» que dibujé en Illustrator; texto en línea que escribí con la herramienta de texto y un rectángulo con un color gris obscuro.

El panel de símbolos o «Assets» se encuentra vacío y tres secciones me dicen que puedo añadir colores; estilos de texto y símbolos como fotos, vectores, en fin todo lo que voy a rehusar a lo largo de la aplicación. Primero vamos a colocar en el panel de «Assets» los colores que se van a repetir en la aplicación. Si seleccionas todo lo que tenemos ahora mismo en el board del arte y presionamos el botos de + (plus) que vemos al lado de la palabra color, vamos a guardar una librería de los colores usados en la aplicación.

Como puedes ver un total de 6 colores fueron añadidos en el panel; incluyendo el color negro de la palabra «Login«. Vamos a seleccionar la palabra «Login«; coloquémosla sobre el rectángulo gris; pintémos la palabra de blanco, usando el panel de propiedades que se encuentra a la derecha; y dejemos el tamaño a 22 puntos / Helvetica Neue / Bold; luego agrupemos la palabra y el rectángulo para crear un botón.

Una vez esté el botón agrupado podemos seleccionarlo con el mouse y tocando el botón derecho del mouse aparece un sub-menu y seleccionamos el comando «Make Symbol«.

Acto seguido en el panel de símbolos aparece el botón creado y si observas bien el «art-board» verás que ahora que el botón le rodea una línea verde. Esta línea verde nos indica que ese botón en ahora una instancia o «instance» del símbolo que está en el panel de símbolos. Lo mismo puedo hacer con los iconos que se van a repetir o que tengo en mente usar en mi aplicación.

Podemos usar el panel de símbolos como una gaveta donde guardamos cosas que vamos a usar luego. Podemos seleccionarlos todos a la vez o de uno en uno y utilizar el atajo del teclado «Command + k«. Rápidamente cada ícono aparece en la sección de símbolos. Ya hemos aprendido tres formas de añadir objetos al panel de símbolos. Presionando el botón de más; seleccionando el sub-menu con el botón derecho del mouse y utilizando el atajo «Command + k«.

Digamos que ahora escribimos la palabra símbolos; con estilo bold a 54 puntos y una fuente Helvetica Neue y de color rojo. Ese estilo de letra la deseas usar en tu aplicación en otras páginas. Con tan solo dejar el cursor intermitente al final de la palabra cuando terminas de escribir y presionas el botón de más en el panel de símbolos en la sección de «Character Styles» verás que todas esas propiedades serán guardadas y si tienes estilos distintos de palabras con la misma fuente pero distinto tamaño; ellas se agruparan de forma descendente en tamaño. Si colocamos una nueva a un tamaño de 30pt, esta será colocada debajo de la de 54pt.

Ahora te preguntas, y si deseo cambiarle el color rojo a uno más bonito, pero ya diseñé 30 paneles de arte?, Ea diantre, qué trabajito! No problem!

Solo seleccionas el símbolo, seleccionas el botón derecho del mouse y presionas «Edit«; seleccionas el nuevo color y como por arte de magia todos los paneles en donde se repetía el color y ese estilo de palabra cambia automáticamente. Si observas las opciones puedes cambiar muchas cosas como la fuente, el tamaño, color y estilo.

Práctica:

1. Añade una foto al board de arte.
2. Guardalo como un símbolo.
3. Repite la instancia en el «art-board» .
4. Reemplaza la imagen con otra que tengas en tu «Desktop«.
   (Te debo este detalle; si abres el «finder» y lo colocas al lado de Adobe XD y «dragueas» desde el desktop una imagen y la colocas sobre una existente en XD, la misma se torna anulosa y al soltar la nueva, la foto anterior es substituida por la foto nueva).
   
5. Selecciona la foto nueva y con el botón derecho del mouse selecciona en el sub-menú «Update all symbols«.
   
6. Observa el resultado.
   

Todas las instancias de la foto fueron actualizadas por la nueva foto y en el panel de símbolos ocurrió lo mismo. Sigue divirtiéndote con Adobe XD! Nos vemos en la próxima!

«¡’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!

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!

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!

«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