Alternativas

Muchos queremos cortar el cordón umbilical que tenemos con Adobe CC y mucho más cuando los precios de la subscripción han subido tanto. Por eso en el siguiente listado encontrarás alternativas que te pueden ayudar a cortar el cordón. Sinceramente muchos de ellos no los he usado, uno que otro si, como por ejemplo Affinity Photo, Affinity Designer y Luma Fusion. Lean la lista y traten de ver si pueden o no cortar el cordón umbilical de Adobe.

Alternativas para Adobe PhotoShop
– Affinity Photo – Windows, Mac, iPad $49.99
– Acorn – Mac $29.99
– Sketch – Mac $99/yr or FREE
– Pixelmator Pro – Mac $49.99
– Corel PHOTO-PAINT – Windows $599.99
– Corel Paint Shop Pro – Windows $79.99
– SumoPaint – Web Based FREE or $4.00/mo Pro
– Gimp – Windows, Mac, Linux FREE
– Krita – Windows, Mac, Linux FREE
– Paint.net – Windows FREE
– Pixlr – Web Based, iOS, Android FREE

Alternativas para Adobe Lightroom
– Affinity Photo Windows, Mac, iPad $49.99
– ON1 Photo RAW 2019 – Windows, Mac $99.99
– Luminar – Windows, Mac $64.00
– Capture One Pro – Windows, Mac $299/$150
– DxO PhotoLab – Windows, Mac $99.00 Essential / $159.00 Elite
– Alien Skin Exposure X4 – Windows, Mac $119
– Corel Aftershot Pro – Windows, Mac, Linux $54.99/$39.99
– ACDSEE PhotoStudio 2019 – Windows $99.99
– PhotoDirector 10 – Windows – $55.99
– DarkTable – Windows, Mac, Linux FREE
– RawTherapee – Windows, Mac, Linux FREE

Alternativas para Adobe Illustrator
– Affinity Designer – Windows, Mac, iOS $50.00
– Inkscape – Windows, Mac, Linux FREE
– CorelDRAW Graphics Suite – Windows $200
– Sketch 52 – Mac $99.00
– Autodesk Graphic – Mac $29.99
– Vectr – Web Based, Mac, Windows, Linux, Chromebook FREE

Alternativas para Adobe Premiere
– Davinci Resolve – Windows, Mac, Linux FREE or $299 Studio
– Luma Fusion – iOS $20
– Vegas Pro – Windows $199 and $799 for the Suite
– Avid Media Composer – Windows, PC $199/year
– Final Cut Pro – Mac $299
– PowerDirector – Windows $99.99 Ultra $129.99 Ultimate
– Lightworks – Windows, Mac, Linux FREE or $19.90 Pro
– HitFilm Express – Windows, Mac FREE / $351.00 Pro
– Apple Final Cut Pro X – MAC $300
– VideoPad – Win, Mac, And/iOS FREE, $39.95/$69.95
– Windows Movie Maker – Windows FREE
– Apple iMovie – Mac, iOS FREE
– OpenShot – Windows, Mac, Linux FREE
– KdenLive – Windows, Mac, Linux FREE

Alternativas para Adobe After Effects
– Apple Motion – Mac $299.00
– Fusion – Windows, Mac, Linux $299.00
– Filmora – Windows, Mac $59.99
– Blender – Windows, Mac, Linux FREE

Alternativas para Adobe Audition
– Audacity Windows, Mac, Linux FREE
– Cakewalk – Windows – FREE
– Logic Pro X – Mac $79.99
– Reaper.fm – Windows, Mac, Linux $60.00
– GarageBand – Mac FREE
– Ableton Live – Win, Mac $99.00/$499.00/$799.00
– Pro Tools – Windows, Mac $599.00
– Reason – Windows, Mac $399.00
– FL Studio Producer – Windows, Mac $199.00
– Shortcut – Windows, Mac, Linux FREE
-CuBase Pro – Window, Mac $ 290.00

Dición!

Data Merge en InDesign

InDesign tiene muchas habilidades, y una de ellas es la habilidad de unir data o mejor conocido como el “Data Merge”. Para ver cómo le sacamos partido a esta habilidad usaremos una pregunta que me hizo un colega; la pregunta fue: “¿Como podemos crear unos boletos los cuales van a contener el nombre, apellidos, dirección física o postal, teléfono y hasta el e-mail de la persona?” Le dije a mi compañero pues fácil “copiando la información”…jejejejejejejejejeje…… acto seguido me dijo: “¿si pero… y si son treinta y cinco mil personas????

Aaaaa bueno ya esos son otros veinte pesos!….. jejejejejeje En ese caso se usa el “Data Merge”. En lo personal esta habilidad yo no había tenido la oportunidad de usarla y hoy se dió el caso. Para poder usar esta herramienta primero debes de usar una aplicación que pueda hacer “spreadsheets” como por ejemplo Excell de Microsoft o Numbers de Apple; pero cualquiera que tenga la habilidad puede ser usada; hasta texto sencillo; pero en texto sencillo debes de separar las celdas y columnas con comas; luego haremos este ejemplo por el momento nos concentraremos en el “spreadsheet”. En mi caso usaremos la aplicación Numbers de Apple.

Lo primero que debes de tener en cuanta que la tabla creada debe de tener una primera línea donde escribirás: Nombre / Apellidos / Dirección 1 / Dirección 2 / E-mail / Teléfono. Te preguntarás ¿Qué significa Dirección 1 y Dirección 2? Estos son los campos o líneas de la dirección donde vives. En la Dirección 1 escribirás por ejemplo: el nombre de la urbanización donde vives. En el campo de Dirección 2 escribiras el nombre de la calle y número de casa en que vives. Esto también lo traduces a los apartamentos o P.O. Box. Luego en esa misma fila escribirás un campo para el pueblo, otro para el pais y otro para el código postal. Luego escribirás el campo para el email, otro para el teléfono y así según la información que necesites. Mira el siguiente ejemplo.

Luego en la siguiente fila comienzas a llenar la información necesaria. Cuando tengas un ejemplo de como unos 35 mil personas me avisas!…. jejejejejejejejeje…… embuste solo haz un ejemplo de por lo menos cinco líneas para este ejemplo o las que desees. El truco ahora está en exportar la tabla al formato CSV y que su texto esté codificado en el formato UTF-16 para que acepte los caracteres del español como la tílde, la letra ñ que se destacan en nuestra lengua. Si utilizas el formato UTF-8 obtendrás un archivo con errores gramaticales.

Ahora viene la segunda parte del proceso. Vamos a crear un diseño sencillo en InDesign para propósito de este tutorial en donde podamos usar la data dentro del archivo CSV.

En InDesign una vez tengas listo tu diseño vas a buscar en el Menú de Windows / Utilities / DataMerge.

Una vez accedes este menú, se haber una ventana del Data Merge la cual te va a mostrar unas pequeñas direcciones de como usar el comando del Data Merge.

La misma dice que como primer paso debes de seleccionar la Data, luego seleccionar la data deseada del panel y luego crear el documento final. Dejame llevarte paso a paso en mi ejemplo. Voy a utilizar en mi ejemplo una tabla o “spreadsheet” creado ficticiamente en la aplicación de Apple “Numbers”.

Si se fijan bien la tabla tiene todas las celdas llenas y la primera fila está dividida en Nombre / Apellidos / Dirección 1 / Dirección 2 / Pueblo / ZipCode / Teléfono / Email. Esto es muy importante por que el Data Merge funciona con esta columna principalmente. Ahora bien, en InDesign luego de crear un diseño, recuerden bien los campos que desean usar de la tabla convertida a CSV.

Ahora en la ventada del Data Merge van a seleccionar “Select Data Source”.

Van a buscar el archivo que exportaron desde Numbers en formato CSV. ¡Recuerden que al exportar el archivo a CSV deben de seleccionar el “Unicode – (UTF16)” para que reconozca los acentos!

Ya dentro de InDesign la data, se verá de esta forma en la ventana del Data Merge. Como verán los primeros campos de la primera fila de celdas son los únicos que aparecen en la ventana. El próximo paso a seguir es seleccionar en el texto el campo deseado y luego asignarle un código de la ventana del Data Merge.

Recuerda; sombrea el texto y luego haces click en el código deseado. Cuando seleccionas el código lo seleccionado en la caja de texto se convierte al nombre de la celda con los símbolos dobles de menor que y mayor que (<< FirstName>>). Repite este proceso en todas las palabras deseadas a programar.

Al final obtendrás una imágen parecida a la siguiente. Cada palabra contiene ahora la información de el campo creado en la tabla de Numbers exportada a CSV. Suena complicado pero verás que no lo es. Recuerda separar con un espacio cada sección. De lo contrario tendrás por ejemplo el Nombre pegado al apellido.

Ahora vas a seleccionar el botón de crear el nuevo documento o utiliza el pequeño menú que dice “Create Merged Document”.

Cuando selecciones este botón se abrirá otra ventana de más opciones. Por el momento deje todo como está y presione el botón de OK. InDesign comenzará a crear el documento y dependiendo de cuan grande es la lista o cuan corta sea, es el tiempo que se tardará creando en documento final.

Como podrás ver, InDesign creó, en mi caso, las tres páginas en un documento aparte, nuevo, con la información de cada celda y mantuvo el formato diseñado en InDesign. Al tener el formato UTF-16 verás que respetó los acentos y las letras (ñ).

Esta es una de las formas en las que puedes utilizar un “Data Merge” en InDesign. Espero les guste el tutorial; que pasen un bonito día!

Dición!

Preguntas y respuestas

Screen Shot 2018-05-17 at 8.48.01 AM

En mi canal de YouTube JRVstudio hay un “playlist“; donde para junio de 2017 coloqué una clase completa de varios videos en donde les explicaba como crear maquetas usando Adobe XD.

Screen Shot 2018-05-17 at 9.15.52 AM

Playlist de 21 capítulos.

A veces uno se pregunta: ¿habrá gente que vea mis videos y les agrade?… al parecer si! Una visita no solo vio los videos si no que me hizo una pregunta la cual deseo compartir con ustedes. El usuario Jose Angel Herrera hizo la siguiente pregunta:

Screen Shot 2018-05-17 at 8.51.42 AM

Para empezar, Gracias por ver los videos Jose y e aqui tu respuesta. Adobe XD es una plataforma que constantemente Adobe está evolucionando y creando actualizaciones constantemente. Si visitas la página web de Adobe: https://www.adobe.com/products/xd/features.html verás que Adobe coloca una descripción de los updates realizados a Adobe XD. He aquí los más recientes.

Screen Shot 2018-05-17 at 8.30.51 AM

Actualizaciones recientes.

Pues bien, para cuando realice el video que viste; Adobe incluía dentro del programa de Adobe XD, los UI kits de Apple y de otros como Android y Windows. Pero ya para el 2018 cuando el programa está más robusto mejor actualizado, Adobe también le elimina cosas que ya no necesitan que se encuentren en el. Por eso antes para utilizar los UI Kits de Apple, solo acudías al menú de File/Open UI Kits/Apple iOS. Ahora para el 2018, esos paquetes o “kits” los tienes que bajar desde la página de los creadores originales.

Screen Shot 2018-05-17 at 8.37.55 AM

En este caso ahora el menú es: File/Get UI Kits/Apple iOS y así según lo que desees bajar. Una ves selecciones ese comando se abre una página web de Apple donde te muestra los vínculos para descargar los paquetes UI.

Screen Shot 2018-05-17 at 8.38.16 AM

Una vez descargados verás unos archivos como los siguientes:

Screen Shot 2018-05-17 at 8.40.29 AM

Estos archivos debes de guardarlos en algún lugar de tu computadora para poder accesarlos cuando los necesites. Si yo abro el primero verás lo siguiente:

Screen Shot 2018-05-17 at 8.40.55 AM

Toda una gama de letras, botones, símbolos, estilos los cuales puedes usar en tus maquetas. Así que no es que tienes dañado tu programa, ni nada parecido; simplemente es que Adobe actualiza constantemente sus programas y con cada actualización puede que te cambien o te muevan algo de sitio; solo debes de visitar regularmente la página de Adobe para ver que cosas han cambiado o utiliza el vínculo que se encuentra al comienzo del programa: What’s new?; el mismo te lleva directo a lo nuevo.

Screen Shot 2018-05-17 at 9.11.44 AM

Espero haberte contestado tu pregunta!

Bonito día!

 

“mailto:”

Screen Shot 2018-05-02 at 6.50.15 PM

Digamos que estas diseñando un formulario o una promo en la cual debes de añadirle un vínculo para que las personas que lo reciban, te puedan contactar con solo hacer un “click” en el vínculo. Como artista gráfico; si diseñas usando Adobe InDesign esto es un “mikeo“; crear un vínculo dentro de InDesign y luego exportar un Pdf interactivo y resuelta la encomienda; peeerrrooooooo… digamos que eres el cliente y cuando el artista te entrega el arte y se le olvidó colocar el “link“; lo llamas y lo llamas y no te coje el celular por que está en el cine viendo “Infinity War“; ¿Qué haces? Solo tienes el PDF y necesitas lanzar el “email blast” ahora! ¿Qué haces?

Bueno calma, calma… ¿Tienes Adobe Acrobat Pro? Perfecto! no es el fin del mundo.

Screen Shot 2018-05-02 at 7.04.28 PM

Con Adobe Acrobat puedes abrir el PDF que te envió tu diseñador favorito y crear el código o programación necesaria para que el vínculo haga su función deseada. Primero debes de abrir el PDF. Accede en la parte superior la pestaña de los “Tools“.

Screen Shot 2018-05-02 at 7.08.51 PM

 

Luego navega hasta encontrar la sección de “Create & Edit“; en ella vas a seleccionar la herramienta “Edit PDF“.

Screen Shot 2018-05-02 at 7.32.03 PM

 

Luego de presionar el botón; Acrobat analiza todo el documento y notarás que selecciona el texto diseñado en la parte inferior y lo hace editable. Notarás en la parte superior una pequeña barra de heramientas para editar el PDF y entre ellas hay una llamada “Link“,

Screen Shot 2018-05-02 at 7.33.57 PM

Al presionar el icono; selecciona la primera opción: “Add/Edit Web or Document link“.

Screen Shot 2018-05-02 at 7.43.36 PM

Notarás que el cursor de tu ratón se convierte en una pequeña cruz con la cual puedes hacer un click, arrastras y seleccionas creando un área alrededor del correo electrónico que se encuentra en el arte. Luego aparece una ventana en donde vas a programar ese lugar caliente o mejor conocido como “Hot Spot“. En esta ventana vas a seleccionar los siguientes parámetros:

  1. En Link Type; selecciona “Invisible Rectangle”.
  2. En Highlight Style; “None”. (Cuando selecciones esta opción, otras opciones se desactivan).
  3. En Link Action; “Custom Link”.

screen-shot-2018-05-02-at-7-49-48-pm1.png

Cuando seleccionamos “Custom Link” se simplifica la ventana y se abre una nueva tableta llamada “Actions“.

Screen Shot 2018-05-02 at 7.52.23 PM

En la sección “Select Actions” vas a buscar en el listado la última opción: “Submit a Form“.

Screen Shot 2018-05-02 at 7.52.51 PM

Luego de seleccionar la última opción en el menú; se abre una nueva ventana en donde ocurre la magia.

screen-shot-2018-05-02-at-7-53-03-pm.png

Vas a escribir el código universal: “mailto: + el correo electrónico deseado

mailto:jrvstudiopr@me.com

En la sección del formato a exportar puedes seleccionar el botón de radio “PDF The Complete Document“. Recuerda que si este arte fuese un formulario para ser entregado por coreo electrónico con esta opción el pdf se adjunta alcoreo electrónico el mismo.

screen-shot-2018-05-02-at-7-53-42-pm.png

Luego finalizas la programación seleccionando el botón “OK“. Ahora el PDF tiene alrededor del correo electrónico, un rectángulo invisible y programado para enviar un formulario o un mensaje al estudio JRV .

Screen Shot 2018-05-02 at 8.28.30 PM

Cuando el vínculo es seleccionado, se abre tu aplicación de correo electrónico, con el arte o formulario incluido y listo para escribir .

screen-shot-2018-05-02-at-7-59-11-pm.png

Recuerda esta programación básica la puedes utilizar en toda aplicación que te permita crear vínculos. Para enviar correos electrónicos la programación es: “mailto: + el correo electrónico deseado“.

¡Buenas noches!

 

 

 

¡Estoy perdido!

¡No estoy perdido; es que estoy estudiando!

Code

Creo que mi último post fue hace como unas dos semanas atrás y quería decirles que sigo vivo, simplemente me estoy tomando el tiempo para repasar y estudiar a un viejo programa amigo que usaba como para el 2007; Adobe Dreamweaver!

Screen Shot 2018-05-01 at 6.59.24 PM

Adobe Dreamweaver CC

Una vez terminé de compartir con todos ustedes lo aprendido con Adobe XD; rápidamente tomé el libro de este clásico pero robusto software del diseño web. Cuando Adobe nos dió la mala noticia que le dará muerte a Adobe Muse; como que me sentí “‘ernú” y pensaba; Wao! “hay que moverse rápido; para mantenerme en la pelea”. Sé que es fácil usar los servicios de Wix.com o Squarespace.com y hasta WordPress.com para crear tu página web, pero nunca nada será mejor que diseñar tu mismo tu propio sitio en la red cibernética.

Screen Shot 2018-05-01 at 7.09.15 PM

Este es el libro que estoy leyendo; ya voy por el capítulo 4 de 15; y hasta ahora es sumamente interesante de la manera en que se diseña codificando HTML5 y creando estilos con el CSS (Cascading Style Sheets). No es tan fácil como lo era Adobe Muse; pero se que lo voy a dominar con el tiempo.

Por ende; si ven que no escribo tan corrido como en el pasado mes es por que estoy ocupado llenando mi cerebro de información actualizada.

¡Hasta luego!

Entrega de archivos

Ayer te explique por qué tienes que exportar cada página bien ordenada e identificada; debido a lo que estas viendo en la imagen inferior. Imagina buscar dentro de este directorio; que contiene 253 documentos; la gráfica del “Username” a 3x!; y no deseas tener a un programador enfogonado contigo; jejejejej.

Screen Shot 2018-04-20 at 12.59.37 PM

Ahora vamos a exportar cada página.

Dentro de Adobe XD seleccionas la primera página y seleccionas File/Export/Selected… o “Command + e“. En este primer ejemplo verás que ya exporté a cada página el formato .PNG. Cada página la identifiqué en Folders enumerados desde 00- hasta 11- + el nombre de la página. Observa la siguiente imagen. Cada página; dependiendo de lo que contenga en su interior; graba archivos desde 1x a 3x de cada uno. Por eso es bueno tener un PDF impreso de cada página para visualizar cada imagen exportada.

Screen Shot 2018-04-20 at 1.08.05 PM

Cuando deseas exportar a PNG te recomiendo usar estos parámetros…

Screen Shot 2018-04-20 at 1.11.11 PM

Cuando desees exportar a JPG te recomiendo usar estos parámetros… y

Screen Shot 2018-04-20 at 1.10.38 PM

Cuando desees exportar a SVG te recomiendo usar estos parámetros… (Recuerda que los archivos SVG los puedes abrir también en Adobe Illustrator.)

Screen Shot 2018-04-20 at 1.10.09 PM

Ahora te preguntarás: ¿Para qué es el Export Batch; el cual está desactivado?

Screen Shot 2018-04-20 at 1.23.22 PM

¿Recuerdas el panel de Layers? ¿Recuerdas el icono que aparece cada vez que el “mouse” hace un “roll over” sobre cada layer? Ese icono de “share” sirve para cuando un día recibes la llamada del programador y te dice: —Vale, perdí o dañé la imagen del botón de la página de Home; el botón de solicitar servicio y el botón de Regresar de la página de Gracias”; ¿Me los puedes enviar otra vez?

Screen Shot 2018-04-20 at 1.25.24 PM

¡No problem!

Rápidamente abres el panel de “layers“; buscas en tu maqueta los objetos que te solicitó el programador; y cada vez que seleccionas uno; en los “layers” se va a sombrear el objeto seleccionado. Ahora con el “mouse” de tu computadora activas ese botón de “Batch Export” para cada objeto, y si deseas cambiarle el nombre el objeto o “Layer” lo puedes hacer también en estos momentos.

Una vez estes listo para exportar los botones solicitados, solo debes de presionar “Export Batch” o “Shift + Command + e“; creas un folder nuevo y luego el formato adecuado o solicitado: PNG; SVG o JPG.

Screen Shot 2018-04-20 at 1.52.00 PM

En este caso cree un folder con el nombre de “solicitados” y dentro del mismo guardé la exportación.

Screen Shot 2018-04-20 at 1.55.00 PM

Como podrás ver cada botón fue exportado en sus distintos tamaños.

Al final del camino comprimes todos los archivos en un archivo .ZIP; buscas un disco externo y entregas tu maqueta al programador.

Screen Shot 2018-04-20 at 1.59.44 PM

Screen Shot 2018-04-20 at 2.02.57 PM

Archivo .ZIP; tamaño 139 MB.

Ahora bien ¿cuál es el próximo paso? I have no idea! jejejejejejej eso deseo saber yo! Me gustaría que algún programador me dijera o me ayude a ver la luz al final del camino. A mi entender un programador usa el programa que mejor le sirva para programar y crear aplicaciones para iOS o Android OS. Los que programan para iOS suelen usar el programa llamado “Xcode 9“; con el lenguaje “Swift 4“. En este link encontrarás más información de ese mundo: https://developer.apple.com. Para ser un “Developer” debes de tener una licencia a mi entender, en fin ese mundo es todo un tema distinto. Así que si eres Programador y deseas mostrarnos cómo llevas un prototipo a una aplicación final para aprobación y distribución estoy a tu disposición para compartir ese conocimiento y requisitos.

Espero te haya gustado esta serie de escritos relacionados a la creación de una maqueta y prototipo usando Adobe XD. Juega con XD; tiene muchas probabilidades de diseño con herramientas sencillas y deja tu comentario en los escritos para ayudarte con cualquier pregunta que tengas al respecto.

Eso fue todo por el momento; visita nuevamente el link del prototipo y compártelo con un programador que conozcas para ver si logramos pasar juntos a la siguiente faceta.

https://xd.adobe.com/view/7f784932-20f1-4fed-a748-15c7a4b86882

Embed Code:

https://xd.adobe.com/embed/7f784932-20f1-4fed-a748-15c7a4b86882

¡Buen fin de semana!

PD: a ver que nos inventamos ahora!…

Tipos de exportación

Screen Shot 2018-04-19 at 4.07.18 PM

La pregunta ahora es; ¿cómo le entrego la maqueta a un “Developer“?; y quizás; ¿qué usa el Programador y qué necesita que yo como Diseñador le entregue?

Como Diseñador debes de entregarle varios formatos al Programador para que le dé vida a tu maqueta pero más aún debes de darle un cariño enorme a los detalles de tu maqueta para que el Programador no se pierda y debes de trabajar junto a el para hacerle la vida más fácil; a no ser que el mismo te diga: “Lo siento, trabajo solo; no me llames; yo te llamo“… jejejejejejejej…

Anyway; vamos a separar esta sección en pequeñas secciones para hacer la entrega más llevadera. Primero vamos a mencionar que a un programador se le debe de entregar todos o algunos formatos que voy a mencionar a continuación, al momento de hacer tu exportación del trabajo.

Vas a exportar tu maqueta en los formatos:

  1. PDF (Portable Document Graphic) — Compartir el documento completo.
  2. SVG (Scalable Vector Graphic) — Compartir elementos gráficos, logos e iconos.
  3. PNG (Portable Network Graphic) — Compartir imágenes con transparencias.
  4. JPEG (Joint Photographic Expert Groups) — Compartir imágenes fotográficas.

Exportemos primero el PDF de la maqueta; seleccionaremos File / Export / All Artboards.

Screen Shot 2018-04-19 at 4.26.15 PM

Adobe XD nos preguntará en dónde deseamos guardar el PDF?; vamos a crear un nuevo Folder en nuestra computadora, preferiblemente adjunto a nuestro proyecto; seleccionamos el formato; escogemos todas las páginas como un solo PDF o separadas las páginas; y presionamos el botón de Export All Artboards.

Screen Shot 2018-04-19 at 4.35.24 PM

Como resultado obtenemos un PDF con todas las paginas de nuestra maqueta. Este documento lo podemos hasta imprimir para comentar con el programador.

Screen Shot 2018-04-19 at 4.37.53 PM

Mi documento pesó unos 238 MB; así que pueden imaginar los tamaños que podemos obtener de maquetas que sus diseños son enormes! OK esa fue la parte más fácil; pero ahora viene lo interesante. La maqueta que diseñamos tiene unas doce páginas y cada página contiene fotos, iconos, textos, vectores agrupados, etc, etc. Mi consejo en este momento es que si durante el proceso de diseño no te has detenido a nombrar adecuadamente tus layers; te aconsejo que te tomes un tiempo para nombrarlos adecuadamente.

¡Ready! OK…

Vas a empezar a exportar cualquier formato de tu preferencia; sea el PNG, sea el JPG o sea el SVG. Lo que necesitamos es que exportes página por página, y que cada vez que exportes página por página; que nombres los folder de cada página que van a contener los elementos de cada una. Comencemos por la primera página!

IMG_6204

Esta página se llama “Splash” y la misma contiene un rectángulo (vector), color azul turquesa; el texto o palabra “studio” con la fuente San Francisco; y el logo JRV es una imágen blanca en formato PNG. Asi que tenemos: vectores (el cuadrado), una fuente, y una imágen en pixeles en PNG. Si seleccionas solo el nombre “Splash” al tope de la página y lo exportas digamos como un PNG; vas a obtener un folder con el diseño de la página “Splash” en su totalidad pero en 3 archivos (.png) de tamaños distintos. ¿Por qué? por que Adobe XD siempre exporta la maqueta en esos tres tamaños debido a los distintos tamaños de pantallas que existen hoy día. 1x es para pantallas Non-Retina o Non-HIDPI; 2x y 3x son para las pantallas Retina Display en adelante. Hoy día existen pantallas que tienen una densidad exagerada de unos 400% (xxxhidpi).

Voy a tomar otro ejemplo; escojamos la página de “Password“… selecciona con el ratón de tu computadora haciendo un click y arrastrando desde arriba hasta abajo. Verás que todo se marca; todo queda al descubierto. La foto de fondo, la imagen del teclado iOS, los textos de username y password con sus respectivas líneas.

Screen Shot 2018-04-19 at 7.34.59 PM

Seleccionas File/Export/Selected o “Command +e“; luego crear un folder con el nombre de password y seleccionas el formato PNG; para iOS y que guarde todos los diseños empezando desde el 1x como se muestra en la siguiente imagen.

Screen Shot 2018-04-19 at 7.24.08 PM

Luego seleccionas el botón de Export; buscas el folder donde guardaste el archivo y notarás todo lo que guardó. Aquí es que notamos la ausencia de nombrar adecuadamente los layers y las imágenes durante el proceso de diseño. Por ejemplo vemos la foto de fondo con su nombre de compra de iStockphoto.com. Observa que tiene la original como 1x; aunque no lo dice; luego @2x; y finalmente @3x. Observa los tamaños que van desde 1.8MB la de 1x; 7MB la de 2x; y 14.5MB ;a de 3x.

Screen Shot 2018-04-19 at 7.46.45 PM

Quizas no tengas aún el ojo para ver los detalles pero la imágen 1x se ve media borrosa; la 2x se vé más sharp en los detalles y la 3x es más grande. Aquí te dejo las tres fotos, tocalas para que se abran y trata de ver la diferencia. Orejita, notarás la diferencia en el brillo de las hojas de los árboles.

Siguiendo este patrón se guarda el rectángulo opaco del centro el cual difumina la foto; y lo mismo sucede con las palabras Username y Password con la línea y la imagen del teclado iOS; todo en 1x; 2x; y 3x. De haber nombrado el grupo del Username y el Password debidamente no hubieramos obtenido esos nombres alocados de “Symbol 1 – @ 2x“. Recuerden nombrar correctamente y adecuadamente todo lo que utilicen en sus maquetas. Esta página solamente pesa 24.7MB.

screen-shot-2018-04-19-at-8-09-50-pm.png

Terminemos por hoy hasta aquí y mañana continuaremos realizando lo mismo exportando las demás páginas usando los formatos restantes, pero esta es la temática a realizar con todas las páginas. Salvar cada una en su propio Folder para tener todo bien organizado.

¡Buenas Noches!

Detalles del Diseño

Screen Shot 2018-04-19 at 10.00.18 AM

Antes de enviarle al programador tu prototipo, tienes la opción de enviarle un “link” en el cual el programador puede ver con exactitud las medidas y espacios que hay entre cada imagen u objeto colocado en tu maqueta; tanto colores como estilos. Toda esta información el programador la usa para programar, digamos en Xcode de Apple, la maqueta diseñada.

Screen Shot 2018-04-19 at 10.00.36 AM

Luego de enviarle el “link“, el programador lo abre, digamos en Chrome o Safari, y comienza a ver página por página el diseño. Cuando selecciona cada elemento puede notar que se marcándoselo unas líneas guías rosadas las cuales le muestran el espacio sea en px; dp; o pt.

NOTA: La unidad de medición para iOS es en pt; la unidad de medición para Web es en px; y la unidad de medición para Android es en dp. Para los “artboards” creados costomizables es tambien px.

Estas siglas significan:

  • pt = Puntos (1/72 de una pulgada, basado en el tamaño físico de la pantalla).
  • px = Pixeles actuales en la pantalla.
  • dp = Densidad de un pixel independiente (Unidad abstracta que está basada en la densidad física de la pantalla).

Screen Shot 2018-04-19 at 11.37.00 AM ¡Usen las medidas de pixeles!; es más fácil.

Regresando a los parámetros del diseño…

Screen Shot 2018-04-19 at 10.02.41 AM

Puedes notar que la columna derecha te muestra información de lo que selecciones a tu izquierda; por ejemplo; seleccioné la palabra Ver del botón para la sección de Diseño Web; notarás unas líneas guías rosas marcando la distancia hasta los márgenes de la pantalla y el tamaño del recuadro que compone la palabra Ver. El recuadro mide 36 px X 29 px; la distancia o ubicación en la pantalla es 294 px en el cuadrante X; y 464 px en el cuadrante Y. Puedes notar el estilo de la fuente; tamaño; alineamiento; color; opacidad; hacia qué apunta al tocar; transición; velocidad y duración. En fin toda una gama de detalles que solamente necesita saber un programador para poder poner a correr tu prototipo. Todo objeto tiene un parámetro distinto y el programador puede copiar esta información para usar en su trabajo como “developer”.

Screen Shot 2018-04-19 at 10.02.03 AM

En el próximo “post” hablaremos de cómo entregarle al programador toda esta información.

¡Buen provecho!