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

Screen Shot 2018-04-12 at 12.53.54 PM

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.

Screen Shot 2018-04-12 at 1.13.34 PM

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?

Screen Shot 2018-04-12 at 1.24.45 PM

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.

Screen Shot 2018-04-12 at 2.31.04 PM

¡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“.

Screen Shot 2018-04-12 at 3.04.28 PMEste 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.

Screen Shot 2018-04-12 at 3.04.07 PM

Screen Shot 2018-04-12 at 3.04.42 PM

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

Screen Shot 2018-04-12 at 3.05.27 PM

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.

Screen Shot 2018-04-12 at 3.03.46 PM

Imágenes enumeradas.

Screen Shot 2018-04-12 at 3.29.43 PM

¡Nítido!

Screen Shot 2018-04-12 at 3.29.37 PM

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.

Screen Shot 2018-04-12 at 3.39.36 PM

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…

Screen Shot 2018-04-12 at 3.56.23 PM

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

Screen Shot 2018-04-12 at 3.59.26 PM

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

Screen Shot 2018-04-12 at 4.08.44 PM

¡Hasta el próximo post!

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 Screen Shot 2018-04-06 at 10.33.22 AM

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.

Screen Shot 2018-04-06 at 1.37.53 PM

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.

Screen Shot 2018-04-06 at 1.45.17 PM

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.

Screen Shot 2018-04-06 at 1.48.07 PM

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

Screen Shot 2018-04-06 at 1.52.05 PM

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.

Screen Shot 2018-04-06 at 1.54.18 PM

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

Screen Shot 2018-04-06 at 1.59.35 PM

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.

Screen Shot 2018-04-06 at 2.05.02 PM

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!

Screen Shot 2018-04-06 at 2.11.56 PM

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.

Screen Shot 2018-04-06 at 2.14.20 PM

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).
    Screen Shot 2018-04-06 at 2.26.11 PM
  5. Selecciona la foto nueva y con el botón derecho del mouse selecciona en el sub-menú “Update all symbols“.
    Screen Shot 2018-04-06 at 2.32.22 PM
  6. Observa el resultado.
    Screen Shot 2018-04-06 at 2.33.45 PM

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!

 

Con sus días contado Adobe MUSE

Que cosa más increíble! Cuando pensabas que ya tenías el sartén cogido por el mango, te dicen que ahora debes de buscar otra alternativa para cocinar! Jejejejejeje…. Me parezco al Chapulín Colorado en sus refranes!

Durante el weekend pasado del 26 de marzo Adobe anunció que ya no va a estar dandole “support” al programa de diseño de páginas web, “code-less”, Adobe Muse. En marzo 26 lanzaron el último “update” para el programa. Adobe estará brindando ayuda a toda pregunta sobre el programa hasta mayo 20 del 2019; y la muerte definitiva al programa está programada para marzo 26 del 2020. Osea tenemos dos años para buscar otras alternativas y/o aprender a usar al 100% el original en este campo de la web, Adobe Dreamweaver CC. Qué pasó ahí? No se sabe!

Si deseas leer los avisos tanto de Adobe como de Business Catalyst, puedes tocar individualmente las siguientes imágenes.

Screen Shot 2018-03-28 at 2.00.46 PMScreen Shot 2018-03-28 at 2.00.57 PM

Seamos realistas!, hoy día con el boom de las redes sociales y los sites como WIX.com, o Squarespace.com, y hasta WordPress.com; con el cual me estas leyendo; en donde usando plantillas puedes montar tu propio sitio en la web, ya no hay taller para nosotros los que nos gusta crear páginas web desde cero! No es lo mismo, pero es la realidad que buscan hoy día los que necesitan un sitio en la web. Yo pudiera estar escribiéndoles esta nota desde un web site creado por mi en Adobe Muse o Dreamweaver; pero me es más fácil abrir Safari, entrar a WordPress, escribir unas notas, colocar unas fotos, colocar Hashtags, colocar links y programar la publicación para tal día; que preocuparme por el reflow o el responsive de mi website, si WordPress se encarga de que mi página se vea bien en cualquier dispositivo. Siempre que diseño una página usando Muse, tengo que asegurarme de que se vea bien en los distintos tamaños de pantallas de los celulares, desktop y tabletas; y creanme es un dolor ese proceso.

Adobe, lo que tuvo que haber echo desde un principio, cuando compró a Dreamweaver, fue darle más cariño y re-escribir su programación para que fuese igual de “user friendly” como lo era Adobe Muse. Que no se puede evitar escribir códigos?, claro que no se puede! Yo usaba Dreamweaver para diseñar páginas web desde el 2004, pero aveces lo encontraba tan trabajoso que cuando llegó Muse, me enamoré de lo fácil que era diseñar y olvidarse del código. Eso es lo que debe hacer Adobe; enamorarnos con un nuevo Dreamweaver. En cierta forma, yo como que lo predecía, por que, el próximo libro que tengo en mi poder es exactamente ese: Adobe Dreamweaver CC, hay que saber de todo un poco para poder ser competente hoy día! Así que pendientes también a esos próximos post relacionados a Dreamweaver.

DW

Por el momento disfrutemos de Adobe Muse CC hasta marzo del 2020 y comencemos a empaparnos de Adobe Dreamweaver CC desde hoy.

¡’Dición!

Edición de video

Screen Shot 2018-03-23 at 12.20.54 PM

A veces me preguntan; ¿Qué programa uso para editar videos? Y la respuesta es que uso varios, dependiendo de lo que edite y cómo lo edite. Recuerdo que comencé a aprender a editar videos como para el año 2004; Adobe tenía dos programas dedicados a este tema, uno es Premiere Pro y el otro es After Effects. En un principio yo veía a After Effects como un Photoshop con esteroides y lo veía medio complicado, así que lo dejé a un lado por el momento y miré hacia Premiere Pro, pero Premiere estaba creado solo para Windows y como lo que yo uso es Mac para mis trabajos digitales, pues lo deje a un lado también. Cuando Apple comienza a incursionar en el mundo del video con su iMovie, nace el famoso Final Cut Studio. En ese momento fue que comencé a estudiar el programa de Apple, al punto de que me convierto en un Apple Certified Pro en Final Cut Pro y comienzo a dedicarme a grabar Bodas y editarlas para clientes; luego a dar talleres de Final Cut en empresas como el Banco Popular; Universidad de Puerto Rico, Recinto de Mayagüez; Acueductos y Alcantarillados (AAA) y a dar talleres a todo aquel que deseaba aprender a editar video. Luego le metí mano a After Effects y Premiere Pro ya que Adobe había dado el brinco y convirtió su plataforma de video para Mac. Con el tiempo y con el conocimiento adquirido con todos los programas aprendidos es que comienzo a trabajar en la Agencia de Publicidad – Lopito, Illeana & Howie como editor de video de anuncios para TV. Fue toda una experiencia; muy buena! En Lopito fue que conocí a el gran maestro del Audio en Pro Tools, el maestro Ricky Cobian. Ricky me enseño cómo se graba y se edita Audio en un estudio, yo por mi parte también agarré los libros necesarios y por mi parte me empapé del tema de la edición de audio usando libros para Adobe Audition; Apple Soundtrack; Apple Motion; y hasta Garageband. Recuerden que si el video tiene un mal audio, nadie lo va a ver. Todo video debe de tener un buen audio. Durante mi estadía en la agencia solo se utilizaba Final Cut; pero una vez fuera de ella y cuando Adobe comenzó a licenciar mensualmente el Creative Cloud y en un solo paquete podrías tenerlo todo, como quien dice una agencia de publicidad entera dentro de tu computadora, dejé a Final Cut Pro atrás y me dediqué solo a usar Premiere, After Effects y Audition como las aplicaciones principales para editar video. Un ejemplo de una edición utilizando After Effects, es el siguiente video para la campaña de IRA del lugar donde laboro al presente. El audio es creado en el estudio de radio, usando Adobe Audition; una vez me entregan el audio, comienzo a usar After Effects moviendo objetos de lado a lado en un ambiente en 3D sincronizado con las gráficas visuales y al final el resultado es el siguiente. Espero les guste!

 

“¡Dición!”

“Atajos” en Adobe XD

Cuando te mencionan la palabra atajo o “shortcuts”, ¿en qué piensas? Piensas en atravesar con tu auto o tu Jeep 4×4 una vereda para llegar aun punto más rápido, en ves de correr por la avenida principal! Pues ese término de atajo también tiene sentido cuando utilizamos las computadoras. El teclado no está solo para escribir, no… también sirve para utilizarlo como atajos para poder trabajar más rápido de lo usual. Realiza la siguiente prueba utilizando el comando “save” en cualquier programa que uses. Trata de calcular en tiempo que te toma colocar tu mano sobre el ratón o “mouse” de tu computadora; luego lleva el cursor o flecha hasta la parte superior izquierda de tu monitor y busca el menú “File“; luego cuando se abre el sub-menú comienza a buscar la palabra “save“. Podemos decir que te pudo haber tomado unos 5 a 7 segundo y en otros casos puedes llegar hasta 10 segundos. Esos diez segundos los puedes resumir en un segundo con solo presionar en secuencia las teclas “command” + la tecla “s“. Ahora bien, imagina cuanto tiempo gastas mientras trabajas en tu computadora y debes de realizar este movimiento para buscar comandos o herramientas específicas en el programa o programas que usas a diario? Mucho verdad? Por eso existen los atajos o “shortcuts”!

Screen Shot 2018-03-20 at 10.10.59 AM

Todos los programas tienen atajos y todos los programas de Adobe tienen más o menos los mismos atajos. Adobe tiene un comando universal o atajo universal para utilizar la flecha de selección, la negra, o el “Select tool“; el atajo es la tecla “v” del teclado. Sea que uses Photoshop, InDesign, Illustrator, After Effects, Xd; no importa el programa, siempre vas a ver le fecha negra y esa flecha negra la accedes con el atajo “v“. De echo, si colocas el ratón sobre cualquier herramienta y esperas unos segundos, vas a ver un “tool-tip“; yo le digo “orejita“; la cual te dice no solo el nombre de la herramienta y entreparentesis el atajo a utilizar con el teclado.

Screen Shot 2018-03-20 at 10.37.33 AM

Ahora bien… y las otras herramientas, qué? En Adobe XD y otras aplicaciones de Adobe, notarás que las demás herramientas que se encuentran debajo de la flecha puedes hacer lo mismo. Los atajos para dichas herramientas son los siguientes: “v”, “r”, “e”, “l”, “p”, “t”, “a”, y “z”. Una vez aprendes estos comandos o atajos, en tus programas, veras que trabajarás más rápido de lo que acostumbras a trabajar.

atajos

Si observas la parte inferior izquierda, encuentras dos herramientas de Adobe XD, llamadas “simbols” y “layers“. Las mismas las puedes acceder con un atajo que comparten en común, a diferencia de una tecla. Si presionas el atajo “command” + “y” accedes el panel de capas o “layers“. Si vuelves a presionar el mismo comando,  vas a cerrar el panel de capas. Ahora bien, si presionas el mismo comando pero añadiéndole la tecla “Shift”, accedes el panel de los símbolos. “Shift” + “Command” + “y” es el juego de teclas a utilizar en este caso.

Todo programa en su parte superior también contiene una barra conocida como el “menu bar” o barra del menú. En ella también encontrarás comandos adicionales a utilizar; dependiendo de lo que deseas realizar durante el uso de la aplicación. Si por ejemplo seleccionas un objeto en Adobe XD y seleccionas el menú “Object“, se despliega un sub-menú en donde puedes ver comandos y a la derecha de cada comando un atajo para el comando a seleccionar. Por ejemplo el comando “Group” tiene un atajo de “Command” + “g“; pero no te dejes engañar con la letra mayúscula “G“. En este caso no quiere decir que debes de usar la letra “G” en versión mayúscula. No, simplemente los creadores del programa quisieron ilustrar la letra en alta para que se grabe en tu mente!, jejejejejeje….

Screen Shot 2018-03-20 at 11.07.25 AM

De todas formas cada vez que desees utilizar un programa, y veas que repetitivamente utilizas ciertos comandos para realizar un trabajo, siempre observa si hay un “tool-tip” en la herramienta u observa si tiene algún comando ya establecido en el menú. Si te comprometes tu mismo a usar esos comandos u atajos, utilizando tu teclado, no solo notarás que serás más rápido en tu trabajo, si no que te sentirás en control en todo momento y confiado de que sabes hacer lo que haces y sabes utilizar tus herramientas favoritas!

“¡Hasta otro ratito!”

Adobe Stock, funciona para ese dinerito extra que necesitas!

¿Recuerdan la ilustración que sometí a Adobe Stock? La misma fué aprobada!, YES! ¿Qué significa eso? Ahora puedo ir creando ilustraciones similares, con el mismo estilo, crear un portafolio en Adobe Stock con ellas y comenzar a venderlas o esperar a que la cuenta haga cashiiiiiiiiing!

Screen Shot 2018-02-26 at 12.01.09 PM

De echo fui al web page de Adobe Stock e hice el search con los keywords seleccionados y la imagen aparece entre otras fotos. So, funciona! Así que si eres un ilustrador o fotógrafo y te gustaría vender tus imagenes al mundo, Adobe Stock es una muy buena alternativa para ese dinerito extra que necesitas.

Screen Shot 2018-02-26 at 12.01.53 PM

Screen Shot 2018-02-26 at 12.10.49 PM.png

¡’Dición!

Vende tu arte en Adobe Stock

Screen Shot 2018-02-20 at 11.26.50 AM

Adobedemandcenter

Adobe está enviando una promoción que suena muy interesante. Se trata de un webinar. ¿Qué es un webinar? Es un pequeño seminario o taller trasmitido por internet. Lo más interesante de este taller es que que te van a mostrar cómo vender tu arte gráfico en un servicio de Adobe, conocido como Adobe Stock. Si eres usuario de las licencias de Adobe Creative Cloud, y estas creando una campaña para un cliente, puedes usar Adobe Stock, para colocar fotos en tus diseños con un watermark; y luego al final, cuando el arte está aprobado por tu cliente, entonces pagas por la foto para ser usada en el arte. La misma luego la facturas en el invoice que le envías al cliente al final del trabajo, para cobrar por tus servicios. Ahora bien Si eres un ilustrador y te gustaría vender tus ilustraciones, entiendo que Adobe Stock us una muy buena solución para tener una pequeña entrada de dinero extra; de ser así, entonces este webinar es para ti! Solo entra al siguiente link: http://adobedemandcenter.com/uf/, regístrate y el 21 de febrero de 2018, desde tu computadora, Adobe te mostrará cómo! Me interesa mucho participar, luego les cuento que tal el mismo. Abajo puedes ver los horarios del webinar para que lo separes!

Ya me registré, y tu?

Screen Shot 2018-02-20 at 2.45.06 PM

Screen Shot 2018-02-20 at 2.57.26 PM