Cómo tomar y editar capturas de pantalla para tutoriales

Todos los sitios de la red Tuts + están constantemente en busca de colaboradores de alta calidad. Si estás interesado en escribir para nosotros, escríbenos. Sin embargo, antes de trabajar en algo, asegúrese de leer esta impresionante guía que lo guiará por el proceso completo de toma y preparación de sus capturas de pantalla..


Aprender de un profesional

Las capturas de pantalla son probablemente el elemento más importante de un tutorial escrito. Nuestros lectores los usarán como guía, ya que siguen sus instrucciones, por lo que es importante que las capturas de pantalla describan con precisión las acciones que se están realizando durante cada paso. Hay muchas maneras de producir capturas de pantalla para un tutorial, pero en este tutorial, el veterano autor de Psdtuts +, Ed Lopez explicará su método para producir capturas de pantalla descriptivas y de alta calidad utilizando el software de grabación y captura de pantalla para grabar videos y capturas de pantalla para sus tutoriales escritos. Empecemos!


Que necesitas

Este método de captura de capturas de pantalla para un tutorial implica el uso de varias aplicaciones. Tenga en cuenta que este método se realizó utilizando algunas aplicaciones solo para Mac, pero también puede adaptar este método para aplicaciones compatibles con PC..

  • Flujo de pantalla (Mac)
  • LittleSnapper (Mac)
  • Adobe Bridge (Opcional)

Resultado final

Por favor, eche un vistazo a un ejemplo de uno de los tutoriales de Ed aquí.


Paso 1: Grabación

Cuando escribo un tutorial, encuentro la idea de parar para tomar capturas de pantalla en el camino para distraerme mucho. Es por eso que ideé un método para tomar capturas de pantalla que me permite crear ilustraciones sin interferir en el proceso creativo..

El primer paso es abrir el flujo de pantalla y comenzar una nueva grabación. Ahora cree su obra de arte tal como lo haría si estuviera trabajando en un proyecto normal. Screenflow ahora registrará todas tus acciones en segundo plano mientras trabajas.


Paso 2: Finalizar la grabación

Los autores suelen dedicar muchas horas a un proyecto y, a menudo, pueden distribuir esas horas en varios días. Esto significa que ocasionalmente puede detenerse, tomar descansos o trabajar en otros proyectos. Cuando tome un descanso, siéntase libre de detener la grabación. Se mostrará en la barra lateral debajo de la pestaña de medios. Una vez que se haya grabado cada segmento, arrástrelo hacia abajo en su línea de tiempo para editarlo.


Paso 3: Agarra las capturas de pantalla

Ahora que ha terminado de grabar todo el proyecto, ahora puede comenzar a tomar capturas de pantalla. Para hacer esto, abra LittleSnapper y cree una nueva colección inteligente.

Establecer una regla de fecha como se muestra a continuación. Esto asegurará que todas las imágenes creadas después de esta fecha se ubicarán en la misma colección..


Paso 4: Definir teclas de acceso directo

Ahora defina una tecla de método abreviado para el Área Snap como se muestra a continuación. Siéntase libre de usar las teclas de acceso directo con las que se sienta más cómodo. Puse el mío en Comando + Opción / Alt + X.


Paso 5: Comience a ajustar

Ahora que LittleSnapper está listo, abra Screenflow, cargue su grabación y presione reproducir. Una de las cosas buenas de usar Screenflow para capturar todo el proceso es que ahora puede acercar y alejar la imagen, cuando sea necesario, para asegurarse de obtener la captura de pantalla exacta que necesita..

Cuando esté listo para tomar una captura de pantalla, asegúrese de pausar la grabación en el lugar correcto. Luego presione las teclas de método abreviado del teclado que definió anteriormente en este tutorial para tomar sus capturas de pantalla. Una vez que los presione, la pantalla se pondrá de color gris y le permitirá arrastrar rápidamente el área de la pantalla que desea guardar. Tome nota del indicador de píxeles para no arrastrar una captura de pantalla de más de 600 píxeles de ancho..


Paso 6: Hacer anotaciones

A veces necesitarás agregar anotaciones a tus capturas de pantalla. Las notaciones pueden ayudar al lector a comprender lo que están viendo. Por ejemplo, si desea dirigir la atención de sus lectores a una parte particular de la pantalla, puede dibujar una flecha para señalarla. También puede (y debe) dibujar líneas, formas y texto cuando sea necesario para ayudar a explicar el paso. Agregar texto a su captura de pantalla puede ser útil para insertar códigos de color, por ejemplo.

Una vez que haga clic en el botón de selección, podrá agregar las anotaciones que necesite para ese tutorial en particular..


Paso 7: Exporta tus imágenes

Cuando tomas capturas de pantalla con LittleSnapper, tus imágenes se ordenarán secuencialmente. Si desea cambiar el nombre de un archivo, puede hacerlo ahora. Una vez que esté satisfecho con el nombre de sus imágenes, puede exportar como se muestra a continuación.

Sus imágenes ahora serán exportadas a la carpeta seleccionada..


Paso 8: Renombrar archivos (opcional)

En este punto, es posible que desee cambiar el nombre de sus archivos. Bridge puede hacer esto bastante rápido. Simplemente abra el puente, vaya a su carpeta, seleccione todas las imágenes en esa carpeta, vaya a Herramientas> Cambiar nombre de lote.

Propina: Al nombrar archivos, hay algunas imágenes que necesitan nombres especiales. La imagen final de 600 píxeles de ancho debe ser nombrada. final.jpg, La versión grande de la imagen final debe ser nombrada. final_large.jpg, y la imagen de vista previa de 200x200 debe llamarse preview.jpg. Es posible que desee establecer esas imágenes a un lado para que no interfieran con el proceso de cambio de nombre por lotes.


Paso 9: Convertir a JPG y Optimizar (Opcional)

Ahora optimice sus imágenes para la web y conviértalas a archivos JPG. Le sugerimos que lo haga utilizando una aplicación que sea capaz de procesar por lotes. Adobe Bridge, Fireworks y Photoshop pueden hacer esto. Usaremos Bridge en el siguiente ejemplo..


Paso 10: Exportar video (opcional)

En este paso opcional, puede exportar el video que grabó y proporcionarlo con el resto de sus archivos. Puedes hacer esto de varias maneras. Puede eliminar el audio y proporcionar el material de archivo en tiempo real, o eliminar el audio, acelerar el material de archivo y grabar una nueva pista que incluya una narración que explique lo que está haciendo..

Propina: Asegúrese de dividir los archivos de video en partes manejables. Además, asegúrese de que la secuencia de video que proporciona esté bien editada y que el audio que proporcione sea de alta calidad. No incluir música con las imágenes..


Paso 11: Escribe el HTML

Ahora puedes comenzar a escribir tu texto y ensamblar tu HTML. Utilice esta plantilla para formatear su archivo HTML. Asegúrese de seguir las pautas apropiadas en el camino.


Enviar algo!

¡Eso es todo al respecto! Si crees que estás preparado para el desafío de enviar algo y unirte al equipo de Mactuts +, visita nuestra nueva página de autores para obtener más información sobre cómo comenzar. También asegúrese de visitar nuestros otros sitios para ver si puede conectarse en otro lugar.