¿Este GIF animado que muestra dibujos paso a paso de Illustrator es fácil de entender?

Estoy tratando de hacer algunos gifs animados cortos sobre Illustrator, con pequeños ejercicios de dibujos paso a paso.

Podría poner algún texto explicativo en algunos marcos pero preferiría no hacerlo. Tal vez más adelante, depende de dónde termine, puedo agregar una línea de texto con las herramientas utilizadas.

Es por eso que me gustaría saber si algo como la animación a continuación es lo suficientemente comprensible para alguien que tiene un conocimiento básico de IA.

silla

Gracias por todos los comentarios. A veces cuando estás inmerso en un proyecto, por pequeño que sea, te quedas un poco ciego. Por eso pongo la pregunta. Cada comentario es muy útil y tendré todo en cuenta.

¿Quiere vincularnos a su sitio web cuando esté listo?
@LateralTerminal lo haré, pero todos ustedes me pusieron mucha tarea para hacer :-) No estoy seguro de cuánto tiempo tomará.
¿Su objetivo es enseñar a una audiencia en vivo o en línea sincrónica/asincrónica?
El objetivo no es enseñar, simplemente captar por un minuto a un público: • Para aquellos que tengan una idea sobre el dibujo vectorial, intentarán interpretar cómo se hace. • Para los que no saben de dibujo vectorial, solo será una animación, aunque les pongo el paso a paso con atajos y herramientas. Por eso acepté la respuesta de @Webster, porque me aclaró la duda que tenía, no solo por la animación, sino por el objetivo: — es solo un gráfico animado sobre un proceso de ilustración —

Respuestas (7)

Creo que sin saber qué herramientas hicieron qué, qué atajos hicieron qué y cómo hacer cosas simples como invertir el relleno/trazo, el gif puede carecer de detalles para los usuarios sin experiencia. Simplemente hay demasiado "desconocido" si no está familiarizado con la funcionalidad de las herramientas/accesos directos en Illustrator.

ingrese la descripción de la imagen aquí

Por el contrario, para mí, es muy fácil, claro y simple si comprende las herramientas, funciones y accesos directos. Entonces, ¿tal vez con tan poca explicación ese gif en particular podría ser un gif de "usuario intermedio"?

Sí, sé sobre la explicación... Tiene que ser en inglés y español, por eso estoy tratando de evitar eso. Me gustaría hacerlo universal, encontrando una manera de explicarlo sin texto. Agradezco tu comentario.
Algo adicional menor: también muestre dónde está haciendo clic. Muchos grabadores de pantalla grabarán pequeñas "burbujas" que se expanden desde donde haces clic, y estoy seguro de que puedes encontrar software para que eso suceda en la pantalla para que lo recoja un grabador de pantalla. (Además, los modificadores generalmente tienen símbolos independientes del idioma: el símbolo de Comando de Mac es el mismo en cualquier diseño de teclado, AFAIK, incluso si la ubicación cambia)
nota: mover toda la cadena al agregar un carácter al final para mantenerla siempre centrada hace que sea muy difícil de leer porque el texto siempre se aleja de donde está tratando de mirar
@ user1306322 el gif anterior es simplemente una muestra , es poco probable que presione modificadores al azar uno tras otro como en el gif de muestra. En la mayoría de los casos, todos los modificadores estarían presionados al mismo tiempo.
¿Qué herramienta agrega los clics del teclado?
@WELZ hay varios de ellos. Depende del sistema operativo que esté utilizando. En una Mac: iShowU, ScreenFlow, Iris, creo que Camtasia

Hay algunas cosas que podrías hacer para mejorar esta buena idea y no hacerla horrible.

  1. Definitivamente necesita agregar teclas de pantalla.
  2. Debe dividirlo en pasos y usar varios gifs para mostrar lo que ha hecho en lugar de un solo gif largo. Esto elimina el problema que Scott planteó de que los gifs son demasiado largos.
  3. Complemente el gif con una descripción de lo que ha hecho.
  4. Proporcione un archivo de descarga con el proyecto completo.

EDITAR: Pensé en esto un poco más.

La tecnología Gif es horrible si no está alojando clips cortos divertidos.

Gif es, con mucho, la peor compresión de video jamás inventada. Google e imgur básicamente intentaron irradiar gif completamente con webm pero fallaron masivamente.

Lo que Google hace ahora cuando busca gifs animados es que la vista previa se vuelve a codificar como VP9, ​​h264 o algo similar. Ahorra MUCHO espacio y se carga mucho más rápido. Cuando hace clic en la vista previa, carga el archivo gif real.

Usar un formato de compresión de video real tendrá muchas desventajas. Por un lado, la licencia involucrada para usar h264 es costosa . Tendría que depender de otro servicio como YouTube para alojarlo, de modo que no tenga que preocuparse por ser demandado. Los visitantes de su sitio no pueden descargar los videos de YouTube fácilmente como lo harían con un gif.

Si no desea depender de YouTube como host, puede codificarlo en un formato de video de código abierto.

https://en.wikipedia.org/wiki/List_of_open-source_codecs

Honestamente, ni siquiera estoy seguro de la legalidad de algunos de los códecs de código abierto. Es por eso que Google ha estado trabajando en AV1, que todavía apesta.


solo usa youtube

Independientemente de los clips cortos que guarde como gif, debe alojarlos en YouTube e incrustarlos en su sitio web. No tienes que hacer un largo tutorial de YouTube como todos los demás. Simplemente divídalo en pedazos como lo haría con un gif e incruste los videos en los mismos lugares junto a las explicaciones de texto complementarias como dije que debería hacer con los gifs. Todo se cargará mucho más rápido en su sitio.


EDITAR 2:

Para aclarar algo de ruido en los comentarios.

No hay una diferencia real entre un video de YouTube y un Gif. Ambos son formatos de video. La diferencia es que un video de YouTube se cargaría más rápido, tendría mejor color y también tendría la capacidad de hacer una pausa (es muy importante hacer una pausa).

.Gif le dará muchos artefactos y mostrará colores incorrectamente porque así es como funciona gif.

Entonces, en cualquier parte de su sitio web, colocaría ese gif de 4 segundos, en lugar de eso, sería un video de 4 segundos. ¿Por qué querrías usar gif en este momento? Si usa videos de YouTube, puede ocultar los videos del público para que solo se vean en su sitio web.

Al final, si lo haces de la manera que sugiero, te ahorrarás mucho estrés, brindará una mayor calidad en un tamaño más pequeño y permitirá que las personas lo vean fácilmente en teléfonos móviles que no tienen datos de alta velocidad.

Bien, voy a echar un vistazo.
Honestamente, deberíamos usar videos incrustados aquí en lugar de gifs, pero stackexchange no admite videos incrustados en las respuestas, por eso usamos gifs. La única razón por la que usamos gifs aquí.
Tenga en cuenta que, debido a los Términos de servicio, el uso de servicios como YouTube puede renunciar a los derechos sobre el contenido original. Esa no es siempre una opción deseada. Diablos... incluso aquí, una vez que publicas una imagen, es gratis para todos bajo una licencia Creative Commons . La única forma de evitar tales licencias es alojar el contenido usted mismo donde tiene el control final. También hay servicios como giphy.com que usa video y puede ofrecer una mejor alternativa a YouTube.
@Scott Eso no es cierto. Si subes algo a YouTube, puedes elegir una casilla de verificación para eso. Puede conservar los derechos de autor si elige las opciones correctas. YouTube siempre puede eliminar tu video si alguien más reclama los derechos de autor, pero eso es otro asunto.
En realidad, YouTube asigna una licencia CC-By muy similar al contenido subido: support.google.com/youtube/answer/… Te equivocas si crees que otros no pueden usar tu contenido de YouTube. Siempre que se adhieran a la licencia CC, pueden hacerlo. Es lo mismo que publicar imágenes aquí. No está "renunciando" a sus derechos de autor, está permitiendo el uso gratuito de cualquier cosa que cargue.
@Scott Correcto, lo sé, pero esa licencia es una opción. He subido contenido a YouTube antes sin CC. Aunque voy a comprobar dos veces.
Vale, tal vez me equivoque. Yo muy bien podría ser. Simplemente creo que si tiene la capacidad de alojar su propio contenido, hágalo... y luego cree materiales de marketing que cargue en otro lugar. Entonces, si se comparten sin darse cuenta, todos le envían a los usuarios. En otras palabras... no alquiles espacio si tienes la capacidad de ser dueño de tu espacio.:)
@LateralTerminal De todos modos, sobre el personal de Youtube, ya hay muy buenos sitios con tutoriales de AI Youtube como jasonsecrest.com . Todavía me interesan los gifs cortos, tal vez en pedazos como todos ustedes dijeron, pero simples, fáciles de entender y cortos.
@Scott Estás equivocado, acabo de comprobarlo. Puede cargar y elegir la licencia estándar de YouTube en lugar de la licencia CC. Subí un video para comprobar. Empecé a dudar de mí mismo.
@Danielillo, digo que gif es solo un mal formato de video. En lugar de usar .gif corto, usaría .mp4. Los videos de YouTube se pueden ocultar en el canal para que nadie pueda buscarlos. De esa manera es totalmente diferente a un canal de YouTube que tiene tutoriales. Lo que quiero decir es que todo sería igual, solo que el formato sería diferente en lugar de gif.
Todavía otorgas a YouTube los derechos para usar el video con la licencia "estándar". :)Así que básicamente... le dices a Google que pueden usarlo. En la era de la agricultura de datos, es un gran activo para renunciar.:)
@Scott Técnicamente, solo les está dando el derecho de eliminar su video cuando lo deseen o si hay una razón (si es un depredador sexual o algo así). Pero de ninguna manera está renunciando a sus derechos de autor. Eres el dueño de ese video. YouTube no posee de ninguna manera su video. No pueden monetizarlo ni venderlo.
@Scott Apesta que estés cediendo algunos derechos. Pero si pones algo en el público, eso es lo que sucede. No importaría si se lo das a google o vimeo o fox news. El punto es que no tiene que preocuparse por ser demandado por los titulares de patentes h264 :)
Uhm... lo están monetizando en el momento en que lo subes. ¿Cómo crees que YouTube adquiere tráfico para vender anuncios? Contenido proporcionado por el usuario que obtienen de forma gratuita. Mi punto es. puede monetizarlo usted mismo sin regalar contenido gratuito a otros servicios de alojamiento. Lo siento, me desvié tanto :), realmente no era mi intención. Y uhm, hay una gran diferencia entre un video de YouTube y un gif. Esa última edición es realmente incorrecta en mi opinión.
En realidad, no hay anuncios a menos que monetices el video tú mismo. @Scott Si ve anuncios, están ganando dinero y YouTube está ganando dinero. YouTube solo gana dinero con los anuncios que les permites monetizar. Es por eso que todavía hay muchos videos sin anuncios en YouTube. No me importa que te desvíes del tema. Me gusta hablar de YouTube. Es algo que he estudiado durante un tiempo.
Existe una diferencia (a veces importante) entre un GIF y un video de YouTube: no siempre puedes incrustar un video de YT donde te gustaría. Por ejemplo, en los sitios de StackExchange, donde GIF funciona perfectamente. IIRC, algunos de los sitios SE los admiten (Movies.SE, SciFi.SE), pero no todos.
@Ruslan Ya dije eso. Eso es obvio. No tiene nada que ver con el intercambio de pila que está haciendo en un sitio web. Es un tipo de archivo diferente, pero sigue siendo solo un video comprimido, por lo que es lo mismo en este escenario.

Uso esporádicamente Illustrator pero tengo conocimientos completos de Photoshop.

Podría adivinar vagamente qué herramientas estás usando, pero no tengo idea de qué códigos abreviados estás presionando... No sabría cómo seleccionar parte de esa ruta y luego darle la vuelta mágicamente como lo hiciste.

Entonces, supongo que alguien con un conocimiento más extenso que 'esporádicamente' lo entendería, pero luego me pregunto si ya no sabría cómo crear un dibujo como este.

Otra cosa que me preocupa personalmente es la falta de un botón de pausa, si alguna vez pierdo la pista, creo que será difícil volver a entrar.

Tienes razón sobre los atajos. El problema no es solo el atajo, sino que debe seguirse con la explicación de lo que hace: Presione "E" para hacer una escala libre :-(, demasiado larga. Todavía estoy pensando cómo manejar esto.
@Danielillo solo un rápido giro mental, ¿tal vez puedas arreglar el botón/combinación en una de las esquinas? Así que enumere 'comando + c' si necesita copiar o algo así. He visto juegos hacer esto a menudo.
sí, recuerda debe ser para Mac y Win: +A / Ctrl+A

Dejaría el gif, a menos que sea una animación muy corta, y usaría un video en su lugar. La capacidad de hacer una pausa y desplazarse hace que sea mucho más fácil mirar y probarlo usted mismo.

Agregaría un pequeño panel en una esquina que mostrará las teclas presionadas (V para seleccionar, etc.) y lo que significa (herramienta Seleccionar), las teclas que se presionan y mantienen presionadas (Alt para arrastrar la copia) e indicadores qué mouse los botones se hacen clic, se hace doble clic o se mantienen presionados.

Y en la primera lección, describe qué significan esas letras e iconos tuyos. Puede sacrificar un par de primeros fotogramas para mostrar títulos solo para recordar lo que significa el panel.

Yo sé lo que quieres decir. De hecho, el gif de la pregunta es un video, convertido a gif y reeditado. Por el momento me gusta el toque retro del gif, solo me falta pensar en el diseño con alguna explicación universal. Universal significa sin idioma y Mac-Win.
@Danielillo, puedo imaginarme a un grupo de personas mirando todo una y otra vez porque se perdieron algo. No es necesario que tenga sonido para justificar el uso de un formato de video... Si mantienes el video, tendrás más libertad para presentarlo. Al igual que con campanas y silbatos como reproducción y pausa y limpieza de línea de tiempo. Además, si se trata de un gif, tendrá una gran presión para mantener todo breve o, de lo contrario, es demasiado largo para que tenga sentido ser un gif. Como 2 minutos y te pierdes un paso "bueno, supongo que cargue la página de nuevo o algo así..."
@Joonas Es por eso que tengo que hacerlo más corto. De todos modos, esta frase "...un montón de gente mirando todo una y otra vez..." creo que es un poco exagerada ;-), ¡no es el último video de Gaga! De todos modos, como escribí en los comentarios de la pregunta, ahora me siento presionado para hacer un proyecto completo. Les avisaré a todos cuando esté hecho para recibir sus críticos.
@Danielillo, me gustaría ver a un usuario de IA principiante o incluso experimentado que se mantenga al día con eso, si el punto es seguir lo que se está haciendo en el gif. Según entendí, ¿son tutoriales de algún tipo?
@Joonas Supongo que recortaré cada pieza y pondré enlaces al paso a paso. Pero es algo que solo tengo en mente. Esta silla es un dibujo antiguo que tenía en la página de facebook de mi enseñanza: facebook.com/media/set/…
@Danielillo Hay una gran diferencia entre presionar V porque la animación lo dice y presionar V porque es un atajo para seleccionar la herramienta. No puedo ver ninguna manera, cómo hacer tal totorial sin ninguna palabra. Por otro lado, si usa solo nombres de herramientas, es más fácil traducirlo. Si tiene prisa, coloque las descripciones de las pruebas en subtítulos.
@Crowley Sí, estoy convencido de eso después de todos los comentarios. Pero todo el mundo piensa en un solo sistema operativo, debe ser Mac shorcut + Win shorcut + la clave + la herramienta + la explicación. Tengo una idea pero tengo que hacerla.
Las ventanas de @Danielillo tienen ctrl, alt y shift. Apple tiene diferentes botones para modificar los accesos directos. Si es posible, puede usar el símbolo de pera para Ctrl, melocotón para Alt y cereza para Shift. (Lo siento, nunca he usado una Mac). O muestre el acceso directo de Apple arriba y el acceso directo de Windows debajo.
@Danielillo si no esperas que la gente vea esto muchas veces, ¿para qué sirve? Recuerde que si alguien quiere hacer el ejemplo, necesita cambiar el contexto de su gif a AI y, por eso, perdió el contexto. Ahora tienen que esperar hasta que llegue de nuevo, hazlo esperar de nuevo. Es por eso que es mejor si se divide en varios gifs.
Tenga en cuenta que puede vincular a puntos específicos del video y reproducir una sección en un bucle. Mantendría el video como una descripción general de todo el proceso y agregaría una lista de los pasos en HTML, mostrando las herramientas y claves relevantes, con cada paso vinculado a la sección relevante del video.

Sorprendentemente, como scott, no tengo ningún problema en seguir lo que haces, pero si me mostraras la última imagen, sabría cómo hacerlo de todos modos.

Pero en mi experiencia enseñando id digo lo siguiente: El gif es demasiado rápido y demasiado largo. Vea que no puede rebobinar o detener el gif, por lo que debería ser más lento, pero también es demasiado largo para seguir si intenta hacer el ejemplo, por lo que dividiría el gif en gifs separados si es posible y pondría una explicación textual entre los separados pasos.

Recuerde que hacer es un contexto diferente de ver. Entonces, el usuario debe cambiar a hacer, por lo que perdió mucho de lo que vio. Esto obliga al usuario a rebobinar, en este caso espera, haz, espera, haz. Pero diría que está bien como resumen, siempre y cuando se comunique claramente y ofrezca mejores instrucciones a seguir.

Supongo que haré gifs de diferentes niveles: principiante, nivel medio y "medio" avanzado.
@Danielillo si todo lo que tienes es un martillo, entonces tu opción es tratar todo como un clavo o ir a la ferretería.

Es fácil ver, seguir o entender (?) los pasos para crear la silla.

No se transmite nada sobre cómo hacerlo, qué herramientas se usan con qué atajos, excepto el cursor cambiante y los nodos resaltados.

Si esto será un tutorial de enseñanza, necesitará más explicación.

Si se trata de un gráfico sobre el proceso de ilustración, entonces funciona bien tal cual.

Le das al clavo, no es un tutorial y por supuesto no es un recurso didáctico, es solo un dibujo hecho con herramientas de IA. Estoy tratando de hacerlo lo más comprensible posible, pero simple, claro, sin demasiado ruido. Después de leer todos los comentarios, lo recortaré y agregaré algunas teclas y atajos en la animación, pero como algo secundario.

Para responder a su pregunta sin rodeos: no, no es fácil de entender.

De sus preguntas + comentarios repartidos entre las respuestas, parece que tiene los siguientes requisitos:

  • Animaciones cortas
  • sin idioma
  • Sin instrucciones específicas del sistema operativo

Otros usuarios ya proporcionaron excelentes sugerencias, sin embargo, creo que estos dos últimos requisitos no los cumplen por completo. @Crowley proporcionó una respuesta que creo que es muy útil, especialmente esta parte:

Agregaría un pequeño panel en una esquina que mostrará las teclas presionadas (V para seleccionar, etc.) y lo que significa (herramienta Seleccionar), las teclas que se presionan y mantienen presionadas (Alt para arrastrar la copia) e indicadores qué mouse los botones se hacen clic, se hace doble clic o se mantienen presionados.

Pero, ¿por qué agregar un panel en una esquina cuando Illustrator ya tiene este panel integrado con íconos independientes del idioma? El panel Herramientas se puede mostrar junto a la imagen, lo que permite al alumno ver en qué herramientas se hace clic:

ingrese la descripción de la imagen aquí

Esto cubre su No languagerequerimiento. Para simplificarlo, puede usar un panel de herramientas personalizado que solo muestre las herramientas relevantes para la instrucción mostrada:

ingrese la descripción de la imagen aquí

Sin embargo, no creo que pueda evitar el uso de atajos de teclado específicos del sistema operativo por completo. De lo contrario, no tiene ningún medio para indicar que se debe presionar Shiftal girar para ajustar a 45 o o Shift+ Altcuando se usa la herramienta de transformación libre.

Mi idea original es hacer ilustraciones animadas simples con Illustrator. Muchos comentarios apuntan a un tutorial de Illustrator, y eso es exactamente lo que estoy tratando de evitar. Mi interés es encontrar un punto medio entre una animación y un ejercicio, evitando el tutorial. Si le pongo la interfaz de IA, rompe totalmente la esencia del trabajo que estoy tratando de hacer.
@Danielillo Ok, pero eso no quedó claro en tu pregunta. Creo que sería bueno para la calidad de la respuesta (y para su satisfacción) si se sienta por un minuto y piensa qué quiere preguntar y qué condiciones límite tiene (es decir, no es un tutorial, no hay lenguaje, simple, etc. ..). Luego edite la pregunta en consecuencia. Ahora sus requisitos se distribuyen en múltiples comentarios, lo que hace que sea muy difícil encontrar una respuesta satisfactoria. Me complace pensar en su pregunta si está claramente definida y no hay un "objetivo móvil".
Está bien, lo pensaré. De momento estoy muy agradecido por lo que me han dado: un buen número de críticas honestas y varios comentarios (incluido el tuyo) con los que estoy muy satisfecho y que aprovecharé para mejorar mi proyecto. De hecho gracias a estos comentarios he llegado a las conclusiones que comentas y que antes no tenía en cuenta.