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.

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.

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

¡’Dición!

Anuncio publicitario

Art boards y Vectores

 Art boards

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.

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.

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.

 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.

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.

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

«Pathfinder»

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.

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.

¡Hasta otro rato!

 

XD – ¡BUG ALERT!

Ningún programa o compañía es perfecta!  Hoy descubrí que Adobe XD tiene un «BUG« o una falla en su programación. Al tratar de abrir el programa y querer crear un documento nuevo me percataba de que no abría, no hacía nada. Hum! que raro. Acto seguido, lo que uno hace es lo que le llamo un «Técnico 101«; comencé a buscar el por qué? Intenté abrir otros documentos y nada. Utilizaba el atajo «Command + Open» desde el teclado y nada! Buscaba directo el archivo en la computadora y haciendo un «doble click» trataba de abrirlo y nada! Hasta que fui a la barra de menú superior y me percato de que el comando «File + Open» estaba opaco, en otras palabras no estaba activado. En ese momento me di cuenta de que había algo malo en la aplicación.

Acto seguido voy a los Foros de Adobe, en especial el de XD y me percato de que ya varías personas estaban teniendo el mismo problema. Leyendo las recomendaciones, encontré una la cual arregló mi problema. Existe un «Bug» el cual no te permite abrir documentos nuevos ni crearlos, solamente puedes abrir documentos que ya has trabajado. La solución sencilla al problema, por el momento, es hacerle un «Log Out» a la aplicación base, la cual es el «Creative Cloud«; luego debes de darle un «Restart» a tu computadora y una vez todo el sistema suba, vuelves y abres el «Creative Cloud» y acto seguido abres nuevamente la aplicación de Adobe XD. Este proceso al parecer limpia el «cache» del programa, mata la cucaracha!, jejejejejeje y te permite nuevamente abrir documentos nuevos y crear documentos también. Si experimentas este tipo de problema al usar Adobe XD o cualquier otro programa en tu computadora, recuerda hacer siempre una búsqueda de qué está causando el problema, hasta tratar de encontrar el mismo. También es recomendable visitar los Foros correspondientes, en este caso el de de Adobe, para ver si otras personas tienen la misma situación y juntos encontrar una solución; esperando que Adobe pueda resolver la situación en un próximo update!

«Bonito día»

Edición de video

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!»

XD App – «Live Preview»

Adobe XD en el App Store.

Antes de continuar con el próximo tema quisiera comentarles que para poder ver en vivo y a todo color todas las maqueta que creas en Adobe XD, necesitas bajar, gratis, desde el App Store de Apple, la Aplicación Adobe XD. Tan pronto bajes la aplicación a tu celular y la abres por primera vez, verás la primera página de la aplicación, o lo que se le conoce como el «Splash Screen«. Luego una página de bienvenida en donde decides cómo entrar a la aplicación. En este caso te recomiendo usar tu información de acceso de tu licencia del Adobe Creative Cloud presionando el botón de «Sign In«. Todos estos pasos los vas hacer también para tu iPad, debido a que probablemente vas a diseñar también para esa plataforma.

Adobe XD para iPad o iPhone te ayuda ver tus diseños al momento.

Debido a que eres propietario de una licencia del Adobe Creative Cloud, quiero que recuerdes que Adobe te regala 100GB de espacio en la nube para guardar tus trabajos> No importa el programa o la aplicación que utilices; sea de tu computadora, tu iPad o celular, puedes guardar, sincronizar y hasta compartir tus trabajos y librerias utilizando este espacio en la nube. En lo personal llevo inscrito a la licencia de Adobe más de 5 años y en la nube del Creative Cloud solo llevo utilizado un 9% del espacio.

Regresando aca a lo que nos interesa; si observas la aplicación puedes notar tres íconos en la parte inferior del celular. Uno es para ver las maquetas que tienes guardadas en la nube de Adobe (XD Documents); el otro es para ver la maqueta que estes trabajando en tu computadora (Live Preview) y el tercero es información del usuario y preferencias (Settings).

Adobe XD conectado a la computadora.

Al conectar tu iPad o iPhone a tu computadora, usando el cable USB, la sección de «Live Preview» te solicita que abras un documento de XD que estes trabajando. Si haces una primera prueba y creas un nuevo documento para iPad y le colocas una foto en el «artboard«; notarás que rápidamente en tu iPad puedes ver la imagen colocada.

«Live Preview» en iPad.

De esta forma es que puedes apreciar en vivo las maquetas que trabajas en Adobe XD y cuando trabajes en el área del «prototipo», puedes interactuar con tu maqueta para ver cómo se siente la interface de usuario que estás diseñando. Si ya tienes Adobe XD instalado en tu computadora y en tus dispositivos moviles, podemos comenzar a trabajar con nuestros diseños.

Bonito día!

¡Tesoros escondidos!

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.

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

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!

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.

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.

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!

«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»!

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.

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.

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

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!»

Nicole Ridgwell de Pixar en el AUC

Nicole Ridgwell hablando de sus experiencias.

¡Me encanta el internet!, sabes por qué? por que aunque estes en un lugar físicamente, puedes estar en otro lugar mentalmente o auditivamente. Mi hijo, estudia en el Atlantic College, y hoy me envió el link para ver una presentación en vivo, utilizando el canal de You-Tube (AUC Live Events) para ver una presentación o charla de una animadora de Pixar conocida como: Nicole Ridgwell; Nicolle trabajó en la más reciente película de Disney «Coco», y compartió con los estudiantes sus experiencias vividas como animadora y sus consejos de cómo hacer lo que te gusta hacer.

Nicole Ridgwell dando consejos de animación.

Mientras trabajaba montando una página web del trabajo; y escuchando la exposición de Nicolle a los estudiantes, puedo resumir y reafirmar lo que he dicho siempre: «Trabaja siempre en lo que más te gusta hacer y serás feliz»; no importa como esté el mundo afuera, sigue tu corazón y has lo que te gusta hacer. By the way!… me encantó su forma de ser y es una persona que emana ese amor y se nota que le encanta lo que hace!

Si deseas ver la presentación, toca aquí o la siguiente imagen para ver el video:

Espero lo disfrutes como lo hice yo!

¡’Dición!

Brainstorming | Maqueta | Prototipo | Programador

Te gustaría aprender a crear prototipos de aplicaciones móviles o de páginas web, antes de que tu diseño caiga en manos de un «developer«? Entonces Adobe XD CC es el primer paso a seguir. Voy a estar escribiendo en este blog lo aprendido en el tema y me gustaría ir paso a paso contigo para que aprendas también a usar Adobe XD CC y quizás compartamos ideas y prototipos.

Cuando te encomiendan la creación de una aplicación o una página web; antes de tirar cualquier línea; antes de darle color a lo que sea, debes de hacer un «brainstorming» con el cliente o tu grupo de diseño. Esto consiste en tirar ideas en papel, colocar ideas en pizarras, colocar cuadritos o símbolos usando «stickynotes«, en fin una primera reunión en donde se discuta la idea, el propósito y la meta deseada al final del camino. Durante el proceso de creación vas a ir y venir, ir y venir, ir y venir muchas veces de la maqueta al prototipo y no pasarás de un punto del camino hasta que estés listo para entregar el trabajo a un programador. En la siguiente gráfica te muestro el camino a recorrer. También durante el proceso vas a regresar a la mesa de reunión para seguir rompiéndote la cabeza con tus clientes y con tu grupo de diseño.

Brainstorming | Maqueta | Prototipo | Programador

Voy a  tratar de ser corto en esta serie de «posts«. Por eso vamos a dejarlo por ahora hasta aquí y en el próximo «post» comenzaremos hablar directamente sobre la aplicación de Adobe XD CC la cual es la aplicación a ser utilizada en este tipo de encomienda. Seas un diseñador en general, o un «web designer«, o un diseñador de experiencia de usuario – UX (User Experience Designer), o un diseñador de interface – (UI); Adobe XD te ofrece las herramientas que necesitas para obtener el resultado que deseas.

¡Nos veremos en el próximo post!

 

SketchUp Viewer y Hololens

Microsoft se une a Trimble para incluir una extensión dentro SketchUp Viewer para sus gafas de realidad aumentada, o mejor conocido como AR,  los «Hololens«. Usando las «Hololens» puedes ver el modelo 3D que creaste usando SketchUp y luego navegar en el modelo, sea de modo tipo maqueta virtual, y hasta caminar dentro del modelo a una escala de 1:1. Con otros compañeros de trabajo o cliente, pueden afinar detalles del modelo a construir, antes y durante del proceso de creación.

Microsoft «Hololens».

Que cosa más brutal! Mi cuñado, el Arquitecto Edgar Morell Rivera, debe de estar salivando ahora mismo!, jejejejeje Me lo imagino navegando dentro de sus modelos.

Puedes ver tus modelos a escala real.

Aunque les aclaro, luego de ver el video y por la condición de solo ser seres humanos, nuestro cuerpo está en constante movimiento y aunque no lo vemos ni lo sentimos; les adelanto que se van a sentir medio mareados después de ver el siguiente video. Así que preparen sus sistema vestibular para la siguiente demostración. Está brutal!

En el video anterior vemos la verdadera demostración, y en el siguiente vemos la promoción. Se puede ver la diferencia de lo que se siente en realidad.

Y para finalizar les dejo otro video de promoción para que todo Arquitecto se enamore!

Me encanta!