Concepto Pixel » Video Tutoriales

Crea screencasts en HD usando una aplicación web

Luis Lopez Garay — Thu, 12 Aug 2010 19:40:00 +0000

Buenas amig@s, esta vez tengo una idea genial, es la creación de videotutoriales o screencasts (en ingles, grabaciones de pantalla). Me dio la de querer crear unas cuantas video series y tutoriales individuales en un nuevo servicio que descubrí mientras navegaba por internet, se trata de screenr, un servicio web basado en Java que nos permite grabar toda o parte de nuestra pantalla, sea la resolución que sea, mientras que a la par también nos permite usar cualquiera de nuestros micrófonos integrados (laptop) o conectados (recomiendo los conectados, sobre todo de auricular VoIP).

Lo que necesitamos para grabar un buen screencast es lo siguiente:

Conectar un micrófono si no es integrado como los de las notebooks, esto solo en caso de que quieras que la grabación sea narrada, créanme aunque su voz sea mas grave o un poco distinta le añade un gran valor humano.

Necesitas también Java, preferentemente Java 6, puedes obtenerlo buscando en google pero la mayoría de las computadoras Apple, PC tienen soporte para Java ya integrado.

Preparar lo que vas a decir, practicar tu velocidad en cuanto a la apertura de programas, ventanas, y realización de procesos sean cuales sean, eso permite que a la hora de la grabación no te pongas nervioso o no pierdas tiempo tratando de recordar lo que estabas por hacer, también es bueno entonar tu voz y calentar para que no suenes torpe hablando.

Abrir una cuenta en twitter en caso de que no tengas ya que esto es lo que se toma como cuenta para entrar y almacenar tus videos (no, twitter no tiene disco duro virtual, pero screenr si y usa tu twitter porque el sitio esta creado para que puedas twittear de inmediato tu screencast y la gente te replique tus videos por medio de twitter).

Bien ahora debes entrar a screenr.com y presionar el botón de “signing in with twitter”.

Una vez que haz hecho el proceso (permitir aplicación en twitter) estas listo para grabar tu primer screencast, lo siguiente es presionar el botón amarillo grande o el que dice RECORD con un símbolo rojiblanco.

Ahora que estas en la siguiente pantalla solo tienes que mover el recuadro punteado en caso de que quieras solo una porción o en el panel negro de la esquina inferior izquierda puedes cambiar de resolución estándar o elegir pantalla completa.

Ahora un gran pero gran consejo… recuerda ALT+D porque lo vas a necesitar para iniciar la grabación, pausar y reanudar la grabación una vez iniciada, y por ultimo, cuando termines de grabar (ojo, la grabación tiene un limite de 5 minutos) presiona el botón verde DONE que se localiza cuando pausas la grabación o termina el tiempo limite, justo sustituyendo al botón CANCEL de la imagen. También mientras grabas o pausas hay un icono al lado de las resoluciones que indica el eliminar esa grabación para continuar con otra (muy útil si tu primer intento falla o se te olvido algo).

Como puedes ver, una vez finalizado salen varias cosas, primero la vista previa en definición baja (360p) para que sepas y veas que es lo que acabas de hacer (sea bueno o no), luego tienes la descripción, desafortunadamente en la descripción solo puedes poner lo mismo que en un tweet (palabras) por lo que tendrás que ser breve, otra cosa es el checkbox que permite no twittear que acabas de crear un screencast (ese tweet incluye la dirección) y por ultimo esta el botón de Publish, que una vez pausado sale lo de la imagen, una barra de progreso la cual indica cuando falta para que tu screencast este en la red y ya en alta definición, disponible para la vista de todos aquellos que deseen verlo.

Una cosa mencionaré y es que el tiempo que tarda en subir no es tanto ya que de alguna forma el método de compresión en MP4 es bastante efectivo y el video pesa lo justo, según el cuadro de la imagen dice que el tiempo que tarda en subir es el tiempo que dura el video multiplicado por uno (1x), entonces según ahí si mi video duró 4 segundos, en 4 segundos se publica, pero esto es algo engañoso y depende mucho de tu velocidad de subida, la verdad yo experimente con el video de la imagen exactamente 5 segundos de tardanza al subir con una conexión que me da unos 30kbps de subida.

Y cuando finalmente hemos subido un video tenemos disponible ese video en la galería de screencasts de usuario, el cual se localiza en el menú principal, elemento 2, al lado del enlace para grabar (el que dice MY SCREENCASTS).¨

Para demostrar mejor como queda el video, este servicio integra el video en su propia dirección (muy corta por cierto, es útil que sea corta) pero también permite hacer cosas como:

Si el usuario quiere ver el screencast en HD tendrá que verlo en pantalla completa

Descargar el video en .mp4 original, que para 5 minutos no es mucho, publicar directo en tu cuenta de youtube y borrarlo, también puedes copiar la URI y embeberlo en alguna pagina web, justo como estoy apunto de hacer:

Justo como les decía, mi voz suena mas grave, hay ruido de fondo porque mi micrófono no es de lo mejor que hay (de hecho es integrado) y aparte me sentía algo nervioso al hablar, pero como es mi primer screencast con voz tengo la esperanza de mejorarla en los siguientes, ahora ya lo tienen, si tienen cualquier duda no duden en dejar un comentario.

Mamá! salí en un episodio de un videocast dirigido a los amantes del diseño y la publi!

Luis Lopez Garay — Mon, 15 Mar 2010 20:50:00 +0000

Bueno en realidad no salí yo como persona, salió mi blog, en concreto el articulo que creé hace ya varios meses sobre como crear una revista en Indesign, por si no lo recuerdan búsquenlo. El programa D-News (videocast) me menciono en el minuto 3:24-3:40 si no mal recuerdo, la dirección del episodio 31 es:

http://pixeltelevision.com/design/qhdn/index.php?id=31

En resumen la hermosa Daniela (lo esta o no? ) dice lo siguiente:

Se trata de una estupenda guía que no entra en muchos detalles pero te permitirá entender el proceso y seguro que te ayuda.

Me da un poco de vergüenza la abrumadora cantidad de publicidad que se muestra en mi blog y por lo consecuente en el video (no mas que la que hay actualmente), pero bueno todo sea por pagar el hosting.

¿Y eso a mi que eh!, apúntele bien…?

Nada, pero aprovecho públicamente este articulo no solo para destacar mi jubilo ante esta mención que significa mucho para mi y me anima a seguir a delante, si no para recomendarles ampliamente el programa Pixel Televisión / D-News, cuyo lema es “El programa de noticias, para diseñadores”. He visto al rededor de 12 capítulos de los 46 que hay actualmente y ninguno me ha defraudado, la presentadora es colombiana y el videocast también, los temas son de alto interés para los amantes de la publicidad, el diseño y la tecnología, y sobre todo mirarlo a todas horas y gratis (bajo licencia Creative Commons) no tiene precio, para todo lo demás, esta Mastercard.

Visitar: D-News

Ejemplar de un episodio en Youtube:

No related posts.

Videotutoriales para editar color de ojos y agregarles efectos bonitos apantallamujeres

Luis Lopez Garay — Tue, 23 Feb 2010 02:56:00 +0000

Te propongo 10 tutoriales en video para photoshop con los que aprenderás a cambiar el color de ojos y añadir efectos a ellos para que impresiones a las chicas (novia asegurada ) con tus poderes en el Photoshop. Hay de Vimeo y 2 o 3 de Youtube, ya hacia falta un articulo nuevo en esta sección que no actualizaba hace meses, casi siempre pongo tutoriales textuales pero me pareció interesante ponerles mas videos, aclaro que no son míos, yo busque la palabra clave (o palabras) y puse el enlace del autor, el enlace del video y el mismo video incrustado con la descripción (mas su traducción).

Navegando por la red… olvida la red recordé que hay muchísimos tutoriales en el aire y después de que vi en la escuela un compañero modificando un ojo en Photoshop (no era la gran cosa pero me dio una idea) me dije a mi mismo: “Porque no hacer un post de videotutoriales para editar ojos?”, y así salió este articulo, lo que les propongo son los siguientes tutoriales en ingles (y uno en español ) que te enseñan a editar el color de ojos, hacerlos mas brillosos y algunos a ponerle efectos extraños, no son muchos pero van al punto por lo que saldrás de aquí sabiendo cosas básicas sobre foto manipulación ocular. Los tutoriales están alojados en el servidor Vimeo por lo cual no podrás adelantar mientras carga, pero ese no es gran problema si tienes una buena conexión, así no te desesperas, o deja cargando unos.

Effective Eyes in Photoshop [Howard]

Creating stunning eyes using various tools in Photoshop

Creando impresionantes ojos usando varias herramientas en Photoshop

Brightening Eyes using Photoshop [Nicole Young]

Nicole Young shows how to brighten a person’s eyes using layer masking in Photoshop.

Nicole Young nos enseña como hacer mas brillosos los ojos de las personas usando mascaras de capa en Photoshop.

Eye of Time Photoshop Tutorial [Sean Vosler]

Quick write up on how to make an image like the one found here: seanvosler.com/2010/01/eye-of-time-2005/

Tutorial rápido de como hacer una imagen como la que encontré aquí: [Link]

Change Eye Color Tutorial [Alecu Grigore]

Sin muchos comentarios

Photoshop Video Tutorial – Changing Eye Color [Yanik Chauvin]

Photoshop Video Tutorial – Changing Eye Color by Yanik Chauvin, Yanik’s Photo School

Video Tutorial de Photoshop – Cambiando el color de ojos por Yanik Chauvin de la escuela de fotográfica Yanik’s

Making eyes pop [Krissy Haveman]

How to make the eyes in your photographs pop.

Como hacer que los ojos en tus fotografías exploten (no literalmente).

Adobe Beginner Class Episode #22 – The Big Eye or “Fun With Photoshop” [Dennis Radeke]

Join the retro Adobe movement! With this episode, Dennis will show you how to quickly and easily create a colored eye with Adobe Photoshop. You’ll be creating alternate Photoshop icons in no time.

Únete al movimiento retro de Adobe! Con este episodio, Dennis te mostrará como crear rápida y fácilmente un ojo de colores con Adobe Photoshop. Estarás creando iconos sustitutos de Photoshop en poco tiempo.

Tutorial Color de Ojos [Barcecruz] [Español]

Aquí les dejo un tutorial que hice explicando unos sencillos pasos para cambiar el color de ojos en Photoshop sin modificar la imagen original. Espero que les sirva.Saludos!

Here I have this tutorial that I did explaining very simple steps to change the eye color using Photoshop without modifying the source image. I hope this is useful, cheers!

Demon eyes Photoshop tutorial HD [Marcio Sousa]

Quicky tut I did because my eyes were bleeding i was so bored. And there i got the idea. do a tutorial on eye effects.

Rápido tutorial que hice porque mis ojos estaban sangrando y estaba aburrido. Y ahí tuve la idea, hacer un tutorial de efecto ocular demoniaco.

Photoshop Tutorial – Mangekyo Sharingan eyeNaruto [SoundofPainCompany]

This is my tut. about how to do the sharingan eye in photoshop.
—————————————- ———————————
Eglish Instructions.
1.-Get the image of the sharingan you want.
2.-Get the eye you want to add the sharingan.
3.-Copy the Sharingan and paste it in the image you want to add the sharingan.
4.-Press: “ctrl+t” and resize the Sharingan
5.-Low the opacity.
6.-Erase the parts that we dont want.

Bueno esos son todos, si conoces alguno no dudes en dejar comentario con la dirección del video para añadirlo si es relevante, no olvides comentar para lo que sea, pronto podre mas videos pero de otras cosas para llenar esta desatendida categoría del blog, saludos y pásenla bien.

PD: Sabían que me intentaron “hackear” el blog pero no pudieron?