[Ai] Pautas de activos

Guía de activos

1. Descripción general

Introducción

• Los recursos de los tutoriales aparecen en el espacio de trabajo de la aplicación para usarlos en las instrucciones paso a paso. y demuestran cómo, por qué y cuándo usar las herramientas y flujos de trabajo de la aplicación. 
• Mediante la exploración guiada, los usuarios aplican una serie de modificaciones sencillas a un recurso de inicio. El estado final debe ser claramente diferente de original y ofrecer una sensación de logro. 
• Nuestros objetivos en materia de activos de tutoriales son dos: En primer lugar, estos activos deben favorecer el objetivo educativo y especificar cómo usar la aplicación y, en segundo lugar, deben ser gratificantes para el usuario y animarle a poner en práctica lo aprendido.  
• Considera tu tutorial como una oportunidad para ayudar a las personas a expandir sus conocimientos. Sigue y transmite las prácticas recomendadas (por ejemplo, el hecho de configurar un archivo web en RGB en lugar de CMYK) y demostrar el uso de los principios del diseño.

Público

• A no ser que se especifique lo contrario, los tutoriales van dirigidos a los nuevos usuarios de Illustrator.
• Nuestros tutoriales deben apelar a un amplio abanico de usuarios y cubrir un gran número de cuestiones de estilo y materias.

Seguimiento de recursos

• Esta colección recopila activos de espacio de trabajo y Adobe Stock utilizados en tutoriales de Ai. Consulta la guía del usuario para descubrir los tipos de tutoriales existentes e identificar lo que puedes aportar a los activos ya creados. Asegúrate de que los activos de Adobe Stock que te interesen no se hayan utilizado ya de forma identificable.
• +Ai tutorial builder asset tracker

2. Imágenes y plantillas de Stock 

Debes utilizar los activos que hayas creado. Si no, debes poseer los derechos de uso de las imágenes de tu archivo de inicio. Todos los activos que incluyan personas a las que se les reconozca deben estar autorizados por los modelos.  

• Si no utilizas tus propios activos, utiliza imágenes "estándar" o "gratuitas " de Adobe Stock. 
• Existen dos procesos diferentes de concesión de licencias de Adobe Stock para los Autores de la comunidad y los Autores de Adobe.
• No utilices ningún otro servicio de archivo. Los usuarios finales podrán utilizar, editar y descargar la imagen a través del archivo de inicio, y este caso de uso puede no estar cubierto por las condiciones de uso de otros servicios de archivo. 

Imágenes y plantillas gratuitas de Adobe Stock

Si tienes previsto utilizar imágenes o plantillas de stock, da prioridad a los activos gratuitos de Adobe Stock. El uso del archivo gratuito nos permite evitar tener que ponernos en contacto con el equipo de archivo para volver a comprobar los permisos de uso dentro de la aplicación y evaluar las relaciones con los colaboradores. Los activos, especialmente las plantillas, pueden usarse como punto de partida y personalizarse infinitamente.

•  Busca activos gratuitos directamente en el sitio de Stock: https://stock.adobe.com/free
• Puedes buscar algo en concreto o simplemente pulsar Intro en la barra de búsqueda para que aparezcan todos los resultados de activos gratuitos. A partir de ahí, puedes utilizar la barra de filtros de la izquierda para seleccionar:
  • Tipo de activo: Imágenes > Subcategoría: Vectores
  • Tipo de activo: Imágenes > Subcategoría: Ilustraciones (ten en cuenta que son .jpg, no .eps).
  • Tipo de activo: Plantillas > Aplicación: Illustrator

Licencias de imágenes de Stock 

• Autores de la comunidad: Licencias de Adobe Stock
  • Usa solo imágenes estándar de Adobe Stock (no Premium). 
  • Es responsabilidad tuya comprar las licencias. Elige el tipo de licencia ampliada/mejorada. 
  • En el campo "Derechos de la imagen" de Tutorial Builder, enumere los colaboradores de archivo de la siguiente manera: "Adobe Stock: colaborador 1, colaborador 2, colaborador 3".
  • Envía las imágenes de archivo que compres a esta carpeta de Dropbox para tenerlas a mano en caso de que se necesite modificarlos en el futuro. 
  • Añade tu nombre al nombre del archivo y ponlo en el nivel superior.
• Autores de Adobe: Licencias de Adobe Stock
  • Usa solo imágenes estándar de Adobe Stock (no Premium).
  • Indicar las imágenes de Stock de las que deseas obtener las licencias en el documento en papel del Autor
  • Etiqueta al diseñador asignado a tu tutorial y al gestor del programa de diseño en un comentario
  • Compraremos una licencia ampliada en tu nombre y realizaremos un seguimiento del activo.
  • Nota: Si no tienes el Author Brief, envía un correo electrónico al diseñador asignado y al director del programa de diseño para solicitar la imagen con licencia.

Acreditación de los colaboradores de Stock 

• En el campo Derechos de la imagen de Tutorial Builder, los autores se incluyen automáticamente. 
• Para incluir a los colaboradores de Stock, desactiva la casilla y añádelos de la siguiente manera: “Adobe Stock: colaborador 1, colaborador 2, colaborador 3”.

3. Localización

Ni los activos del espacio de trabajo ni las imágenes de las secciones se localizarán a otros idiomas, por lo que es necesario utilizar palabras y frases neutras en los activos del espacio de trabajo, y omitir o abstraer el texto de la interfaz de usuario en las imágenes de las secciones. 

• Buenos lugares para buscar textos previamente revisados y para generar ideas: 
  • Paquete de fuentes de arte de cabecera de Adobe Fonts
  • Adobe Spark (buscar por tipo de proyecto)

• No incluyas ningún texto en las imágenes de la sección de movimiento. Esto significa que los paneles de la UI no pueden formar parte de las capturas de pantalla para el movimiento, solo las acciones dentro de la mesa de trabajo.
• Si tus imágenes estáticas muestran paneles de la interfaz de usuario, el texto debe abstraerse con barras grises, o texto simulado, en lugar de texto real. Esto se hace en Photoshop, como capas vectoriales sobre la captura de pantalla de la interfaz de usuario.

Ejemplos:

+ Ejemplo de PSD para los estilos de levantamiento

4. Activos del espacio de trabajo

• Los activos deben ser dinámicos y visualmente interesantes, pero accesibles
• Deben ser actuales, realistas y frescos, y no demasiado especializados en cuanto a su temática o enfoque estético.
• Consulta nuestra guía Illustrator Product Expression Guide (Guía de expresión de productos de Illustrator) para obtener inspiración sobre el estilo, el proyecto y el color. Ten en cuenta que esto es solo un punto de partida:  + Ai Product Expression Guide (Guía de expresión de productos de Illustrator, abril de 2021)
• Resulta útil situar los elementos visuales en el contexto de una aplicación de proyecto relacionada 
  • Logotipos, iconos, gráficos de la marca, material colateral de la marca 
  • Gráficos de correo electrónico, banners, anuncios en redes sociales
  • Publicaciones en redes sociales
  • Folletos, tarjetas de visita, pósters
  • Elementos identificativos
• Los tutoriales más libres, basados en el arte o en la ilustración, también están bien siempre que el valor instructivo del activo se manifieste claramente.

Mesas de trabajo

• Dependiendo del flujo de trabajo de tu tutorial, puede ser útil proporcionar una mesa de trabajo adicional -o un espacio de juego- junto al contexto donde el usuario aplica su resultado final. Limita el número de mesas de trabajo en tu archivo a 2.

Uso de las capas

• Los usuarios solo deberían tener que interactuar con dos capas como máximo
• Dada la necesidad de mostrar los elementos que se pueden trabajar en el contexto de los resultados del proyecto, asegúrate de que haya suficiente espacio en los diseños para que el usuario pueda seleccionar y trabajar con los elementos que se le indiquen. Bloquea estratégicamente las capas de fondo y los elementos adicionales, según sea necesario.
• Las capas deben tener uno de los siguientes colores de forma predeterminada: azul claro, rojo, verde
• Utiliza el azul claro para la capa principal de la ilustración siempre que sea posible. Si necesitas una segunda capa, utiliza el rojo.

Texto

• Bloquea o aplica contorno al texto en los activos del espacio de trabajo, a menos que el tutorial sea sobre el trabajo con el tipo
• Usar solo Adobe Fonts
• Planea para que los usuarios elijan sus propias fuentes y las estilicen como quieran. Si realmente es importante para el resultado final de un diseño, da una orientación clara y flexible. El tipo de fuentes que hay que probar, y las descripciones generales como "negrita", hacen que sea fácil de entender sin conocimientos previos del tema

Archivos vinculados

• Para mantener el archivo dentro del límite de tamaño máximo, es posible que tengas que rasterizar las texturas y colocar los archivos rasterizados en AI.
• Cualquier archivo vinculado debe incrustarse en el archivo antes de guardar el archivo final como AIT.

5. Resumen de imágenes de la sección

La imagen de sección es una representación estática o en movimiento de las acciones clave de la sección de un tutorial.

Para cada sección, puedes elegir entre imágenes estáticas y en movimiento (Mp4):

• Las imágenes estáticas (JPG) se crean combinando y editando capturas de pantalla en Photoshop. 
• Utiliza imágenes estáticas para representar los paneles de la interfaz de usuario, ya que el texto puede abstraerse en Photoshop. O cuando una imagen estática es suficiente para ilustrar la tarea o el flujo de trabajo. 
• Las Representaciones en movimiento (Mp4s) se crean grabando capturas de pantalla. Esto se hace usando software como Screenflow (macOS) o Camtasia. 
  • Utiliza el movimiento solo si es esencial para mostrar el movimiento. 
  • Dada la limitación de omitir todo el texto de la interfaz de usuario, las capturas de pantalla de movimiento se limitan a las acciones dentro de la mesa de trabajo.

Captura y uso de capturas de pantalla del panel de la interfaz de usuario

• Es muy importante tener en cuenta la escala de los activos de sección. Las líneas, los cursores, los iconos, etc., pueden aparecer extremadamente pequeños o desaparecer por completo, debido al tamaño en que se muestran en la aplicación
• NOTA: Asegúrate de capturar utilizando el ajuste de brillo predeterminado de "más oscuro". Consulta la siguiente sección "Consejos para mejorar la escala".

Consejos para mejorar la escala

Para obtener la mejor claridad en tus capturas de pantalla, configura lo siguiente:

• Copia la configuración de macOS que se indica a continuación en las Preferencias del sistema > Pantallas:
• Copia la configuración de la interfaz de usuario en Illustrator > Preferencias:

Iconos y cursores

Biblioteca CC

Esta Biblioteca CC compartida contiene muestras de color, cursores e iconos de herramientas. Puedes acceder a ella a través del panel de Bibliotecas en Illustrator, en Photoshop o en CC Desktop. 

+ Ai-Desktop-Assets_TutorialBuilder 

• Puedes buscar en la información contextual el nombre de la herramienta para encontrar la información más rápidamente.

Colección de XD

• También tenemos iconos de herramientas y cursores recopilados en un único documento XD. Exporta archivos SVG desde él, o copiar/pegar en Ai, y luego copiar/pegar en Ps como objeto inteligente

Colores para las imágenes de la sección PSD (estática) y de movimiento (vídeo o AE)

6. Imágenes de la sección estática (JPG)

+ Ejemplo de imagen de la sección estática

Recrea la escena en Photoshop

Crear y trabajar con capturas de pantalla de la interfaz de usuario

Puedes utilizar la siguiente plantilla para crear tus propias imágenes de sección estática:

+ Plantilla de imagen de la sección estática (PSD)

Comprueba cómo se crean las imágenes en este PSD de ejemplo con capas

+ Ejemplo de imagen de sección estática por capas (PSD)

• Crea capturas de pantalla individuales para cada elemento/panel de la interfaz de usuario que utilices en tu ilustración. Esto permite la máxima flexibilidad a la hora de componer la imagen, y permite escalar y recortar un elemento sin afectar a los demás.
  • Antes de hacer capturas de pantalla de un panel, sácalo completamente del marco de la aplicación/ventana de la aplicación. 
  • Para hacer una captura de pantalla, utiliza el comando de teclado Cmd + Shift + 4, y luego pulsa la barra espaciadora una vez. Esto permite capturar un panel completo. También puedes pulsar la tecla Opción mientras haces la captura de pantalla para eliminar la sombra.
• Si las capturas de pantalla de tu panel tienen sombras, crea máscaras vectoriales alrededor de los paneles para eliminar la sombra.
• Coloca los paneles en Ps como objetos inteligentes para obtener la máxima resolución.
• Características:
  • Escala en Photoshop: 70 %
  • Sombra paralela: Multiplicar, #000000, 25 %, 90°, distancia 3 píxeles, rotación 11 %, tamaño 9 píxeles

Añadir activos del espacio de trabajo desde Illustrator

• Utilizar activos vectoriales siempre que sea posible. 
• Las ilustraciones pueden copiarse/pegarse directamente de Illustrator a Photoshop como objetos inteligentes vectoriales.
• Lo más fácil es recrear la interfaz de selección, los cuadros delimitadores, etc., en Ai y, luego, copiar/pegar la ilustración final en Ps.
• Si vas a importar un activo de mesa de trabajo completo y en el lienzo puedes ver algún borde de la mesa de trabajo, añade un trazo negro de 1 píxel alrededor de él para crear la apariencia de una mesa de trabajo.

Creación de la interfaz de selección y de los cuadros delimitadores

Dada la escala de las líneas en las capturas de pantalla, la interfaz de usuario de selección y los cuadros delimitadores a menudo deben reconstruirse como vectores en Photoshop. 

• Utiliza rojo (FF0000) para los cuadros delimitadores, los contornos de selección, etc. que pertenecen a ilustraciones sobre capas rojas 
• Utiliza colores azules (4F80FF) en la Biblioteca de CC, según el color de tu capa en Ai.
• Empieza con las siguientes especificaciones, y luego escala todo proporcionalmente según sea necesario para que coincida con la escala de tu ilustración:
  • Contorno de la selección: trazo de 1 pt
  • Cuadro delimitador: trazo de 1 pt
  • Controles de las esquinas: cuadrado de 3 píxeles

Creación de puntos destacados de la interfaz de usuario

• Crea puntos destacados de la interfaz de usuario como vectores en Photoshop
• Puede ser un círculo, un cuadrado o un rectángulo. Si destacas varios elementos de la interfaz de usuario, define una jerarquía para las formas: el rectángulo es primario, el círculo es secundario, etc.
• Características 
  • Utiliza Dorado F7B74C
  • Relleno: ninguno
  • Trazo: 3 píxeles
  • Sombra paralela: Multiplicar, #000000, 25 %, 90°, distancia 3 píxeles, rotación 11 %, tamaño 9 píxeles

Adición de cursores

• Utiliza los cursores de la Biblioteca de CC o la colección XD
• Escala: generalmente, 200 % 

Exportación desde Photoshop

• PS: Utiliza Archivo > Exportar > Exportar como… y después copia la configuración siguiente.

7. Imágenes de la sección de movimiento (MP4)

+ Ejemplo de imágenes de la sección de movimiento

Plantilla de Screenflow con el escalado correcto (es un archivo zip que tienes que descomprimir)

Plantilla de una animación de click para Screenflow. Puedes abrir este archivo de proyecto Screenflow, copiar la animación y pegarla en tu línea de tiempo Screenflow.

Ejemplo de animación

Directrices generales del registro:

• Consulta la sección “Consejos para mejorar la escala” anterior para definir la resolución de pantalla adecuada.
• No incluyas ningún texto en las grabaciones. Esto significa que los paneles de la interfaz de usuario no pueden formar parte de las capturas de pantalla para el movimiento, solo las acciones dentro de la ventana Documento.
• Desactiva las Guías inteligentes (Ventana > Guías inteligentes) ANTES de grabar. No queremos distracciones en los vídeos
• Sigue los consejos para mejorar la escala de la sección anterior para los tamaños de los cursores en Ai: los queremos un poco más grandes para que sea más fácil seguirlos
• Para los puntos destacados, sigue la sección "Creación de puntos destacados de la interfaz de usuario” anterior
• Elimina las pistas de audio que grabas. Estos vídeos NO tienen voz en off
• Intenta que el movimiento del cursor sea suave
• Al seleccionar una herramienta, es posible que tengas que cubrir el texto con un cuadro en tu software de edición si aparece la información contextual. A veces es inevitable que se muestre la información contextual sin mover el cursor demasiado rápido
• Evita grabar menús y paneles

Edición de la captura de pantalla

• La captura puede editarse en la aplicación que utilices para realizar las capturas; Screenflow o Camtasia son 2 ejemplos comunes
• NO hay fundidos al principio y al final del vídeo
• Muestra los clics en el vídeo mediante esta animación:

• Documento de Screenflow (copiar y pegar en Screenflow)

• Documento de Camtasia (copiar y pegar en Camtasia)

Especificaciones de las grabaciones de pantallas en movimiento  

• Formato MP4
• 560 x 280: límite de tamaño para CADA MP4: 4 MB
• La duración de estos vídeos debe ser de entre 5 y 10 segundos más o menos. No queremos que los vídeos sean demasiado largos, ya que se reproducen en bucle en el panel. Si tienes dudas al respecto, pide ayuda al experto

8. Héroe e imágenes en miniatura 

• La imagen del héroe es una imagen estática que sirve como vista previa del tutorial en Illustrator. Las imágenes del héroe son las del “después”: el estado final del tutorial.

+ Plantilla de héroe de PSD

• La miniatura es una imagen estática que se muestra en la previsualización del tutorial en el panel de búsqueda. Las miniaturas son las del “después”: el estado final del tutorial.

+ Plantilla en miniatura de PSD

Héroe e imágenes en miniatura para la serie de tutoriales

Si vas a diseñar una serie de tutoriales que aprovechen el mismo material gráfico, los héroes de la serie y las miniaturas de cada paso deben ser variaciones del mismo material gráfico. De esta manera, se unen como un conjunto, pero siguen siendo reconocibles por sí mismos como tutoriales individuales. Cada combinación de héroe y miniatura debe prever (aunque sea de forma abstracta) el tema de un tutorial individual dentro del conjunto.

Ideas de cómo hacerlo:

• Utilizar diferentes elementos, cultivos o puntos focales del mismo arte
• Utilizar temas de color ligeramente diferentes

Ejemplos:

9. Especificaciones de activos

Ve a Especificaciones de imagen para obtener información sobre la creación de activos de TB-Ai. 

ALTERNATIVA: imágenes de movimiento usando After Effects

NOTA: Esta sección es para aquellos autores que son eficientes en After Effects y quieren crear sus propios gráficos de movimiento de la sección en contraposición a la captura de pantalla o imágenes estáticas de la sección.

+ Ejemplos de imágenes de la sección de movimiento creadas con AE

Introducción de cursores desde la Biblioteca CC: 

Escala para Ae: 140 %

Adición de activos de imágenes desde Illustrator

• Utiliza activos vectoriales siempre que sea posible.
• Ae: Crea un nuevo archivo Ai que tenga cada activo de animación guardado en su propia capa. A continuación, puedes exportar las capas que necesites a Ae. 
  • Si vas a importar un activo de mesa de trabajo completo y en el lienzo puedes ver algún borde de la mesa de trabajo, añade un trazo negro de 1 píxel alrededor de él.
  • Asegúrate de que la columna Rasterizar de forma continua está seleccionada para cualquier contenido Ai importado en Ae. Esto hace que el contenido vectorial aparezca nítido en los MP4 finales. (Si no ves este ajuste, haz clic en el botón "Interruptores de palanca/Modos" en la parte inferior de la ventana).

Trabajar con capturas de pantalla en Ae

• Coloca los paneles como archivos vinculados en Ae para obtener la máxima resolución.
• Características: 
  • Escala: 35 %
  • Sombra paralela: Multiplicar, #000000, 25 %, 90°, distancia 3 píxeles, rotación 11 %, tamaño 9 píxeles

Creación de una interfaz de selección, cuadros delimitadores y aspectos destacados 

Crea la interfaz de selección y los cuadros delimitadores como vectores directamente en Ae (especialmente si estás mostrando cómo se escala un objeto).

• Para los aspectos destacados, utiliza el color dorado de la Biblioteca de CC, F7B74C
  • Relleno: ninguno
  • Trazo: 3 píxeles
  • Sombra paralela: Multiplicar, 000000, 25 %, 90°, distancia 3 píxeles, rotación 11 %, tamaño 9 píxeles]

Aceleración

Añade aceleración entre los fotogramas clave de movimiento para dar un movimiento más natural.

• Aplica Easy Ease a los fotogramas individuales cuando sea necesario

Exportación

• Usa Archivo > Exportar > Añadir a la cola de Adobe Media Encoder…, a continuación, usa el ajuste prestablecido “Adobe Learn: In-App Tutorial Assets”.

Adobe-Learn-In-App-Tutorial-Assets.epr

Puede descargarse del Dropbox de CDA