Creating and editing screencasts as animated GIFs using Recordit and Ezgif

Screen Shot 2015-03-12 at 5.52.34 PM

Yesterday, I created a comprehensive guide to GroupZap and I used a number of animated GIFs to demonstrate certain functions. Today, Marisa asked me what tool I used to create them and I thought it might be helpful to do up a post showing all of the steps I used.

There are a number of ways to create a screencast for free, but not many of them export as an animated GIF. I have started using a tool called Recordit, a free app for Windows and Mac that makes a simple screencast that is cloud stored as both a video and a GIF. Here is how it works:

Recordit Mac install:

  • Go to Recordit.co and click on ‘Download for Mac’ button near the bottom of the page.

Screen Shot 2015-03-12 at 5.30.37 PM

  • It is a ZIP file and depending on your browser, may need to be opened by double-clicking on the ZIP file.
  • Once it is unzipped, move the file to your Applications folder.
  • Double-click on the app and you will likely get a security warning and won’t allow you to run it. This is a new security feature Apple added a couple of updates ago, stopping third-party apps from running unless they are downloaded from the Mac App Store. This app can be trusted. To run this app (this only needs to be done once), follow the instructions from this website under the “Trusting Apps on a Case-by-Case Basis” title. This works for all third-party apps.
  • Go to the Applications folder and double-click on ‘Recordit’ to start the program.
  • You will know it is running once you see the Record button in your menu bar (it looks like a rectangle with a dot in the middle of it).

Screen Shot 2015-03-12 at 5.37.43 PM

Recordit Windows install:

  • Go to Recordit.co and click on ‘Download for Windows’ button near the bottom of the page.

recordit1

  • Once the installer has downloaded, double-click on it to run it.

recordit2

  • You may be prompted by Windows about running the app. Give permission to run it and then click on ‘Next >’ to start the install.

recordit3

  • Select whether you would like to create a desktop icon or not and then click on ‘Next>’.

recordit4

  • Click on ‘Install’ to start the installation.

recordit5

  • Once it is finished, click on ‘Finish’.

recordit6

  • Find the Recordit program and double-click it to start.

recordit7

  • You will know the program is running when you see the rectangular icon with a dot in the middle in your notifications bar in the bottom-right corner of the screen.

recordit8

Recording screencasts with Recordit:

  • Once you are ready to record, click on the Recordit icon in either your menu bar (Mac) or the notifications area of the task bar (Windows).
  • Click and drag over the area you want to record and it will start recording immediately.
  • Once you are done, click on the ‘Stop’ in the menu or notifications area (same area as starting the screencast) and Recordit will start processing and sending the recording to the cloud. None of the screencasts are saved on your computer. Instead, you will be notified of a link once it is done. Click on the ‘All Done’ button to go to the video or click on the ‘GIF’ link to go to a GIF instead. Neither option uses audio (GIFs never have audio).

Screen Shot 2015-03-12 at 5.48.24 PM

  • If you miss the notification, or you want to go back later, click on the record icon in the menu or notification bar, and click on the recording you would like to visit.

Screen Shot 2015-03-12 at 5.48.48 PM

  • If you visit the video recording and would like to see the GIF, click on the ‘GIF’ button in the bottom-right section of the video.

Screen Shot 2015-03-12 at 5.57.55 PM

  • Once you are at the GIF, right-click (or also, Command+click on a Mac) on the GIF and choose to save or download the GIF (depends on the browser as to what option you will be given). You can also just copy the URL if you don’t need to download it.

Resizing a GIF using Ezgif:

  • Go to Ezgif and click on ‘GIF Resize’.

Screen Shot 2015-03-12 at 6.01.48 PM

  • To upload a file, click on ‘Choose File’ and upload the file. If you have the URL, paste the address into the box.
  • Click on ‘Upload!’ and wait for the GIF to appear on the screen.

Screen Shot 2015-03-12 at 6.04.09 PM

  • Under the GIF, type in your desired width OR height (not both) in the appropriate boxes and click on ‘Resize It!’ [Note: For my blog post, the larger GIFs were a width of 700 to fit across the post]

Screen Shot 2015-03-12 at 9.16.07 PM

  • The newly resized GIF will appear below the big GIF. Right-click (or Command+click on a Mac) on the smaller GIF and download it to your computer.

Speeding up the GIF:

  • If you have just resized a GIF, simply click on the ‘Speed’ button just below the new GIF.

Screen Shot 2015-03-12 at 9.21.12 PM

  • If you are uploading a new GIF, go to this page and upload a GIF or input a URL and click on ‘Upload!’
  • Once your GIF is showing at the top of the page, type in a delay speed in the ‘Delay Time’ box just below the GIF. A number like 5-10 will be quite fast, with a 15-20 being just a bit faster. [Note: I used 15 for the GIFs on my previous post].

Screen Shot 2015-03-12 at 9.24.11 PM

  • Your new GIF will appear just below the original GIF. Right-click (or Command+click on a Mac) on the smaller GIF and download it to your computer.
Advertisements

Why I blog

29235_440585716048_639782_n

Back in January, I made a resolution that I would try to connect with teaching professionals through Twitter and my blog. I have used Facebook for a few years now for my personal connections, but I felt I needed a professional outlet where I could share and learn along with other teachers on a variety of topics. I doubted that I had anything valuable to share since there are so many great people out in cyberland who are better and more knowledgeable than me.

I took some time to ‘lurk’ on Twitter before deciding to dip my toe in the water in January. Since then, I have been able to participate in Twitter chats, discussions, and even shared a picture or two. I can’t believe that I have shared over 3500 Tweets in that time and written 93 blog posts. My blog has been a work in progress as I felt out what I wanted to share in more detail. My blog has turned into more of an education technology site where I share webtools and ideas on how to use them in the classroom. This is not unusual since there are so many other great sites out there that do a better job than I do. My focus is on giving new users the assistance they need to use the tools in their classroom by giving step-by-step instructions, called tech recipes, that they can even print out and give to their students or post in the staff room. I don’t pretend to be an expert in anything, but I do want to share what I do know with those that are more proficient in other areas.

There are two things that I am trying to communicate here. I am not in competition with other bloggers who are so much better at sharing what they know, and I do not pretend to be a ‘digital guru’ or ‘tech expert’. I am just a normal guy who hopes that he can give back a little to those who are able to give so much. I appreciate my online colleagues and the valuable information and support each one of you give to me each day. You have no idea how encouraging it is to me to get a Tweet or comment from you. I just hope I can return the favour.

Thank you.

ImageSplitter: An online image slicer, cropper, resizer, and converter

Screen_shot_2012-08-05_at_10

One of the things I often have to do when blogging is to work with images. Having come from a photography background, I know a number of different ways to format and resize images so that they load quickly and don’t take up too much space on the page. I have started using an online tool for resizing my images so that they fit well on the page and are a small enough file size so that they load quickly. Let me introduce you to ImageSplitter:

  1. Go to ImageSplitter. You can either load an image from your computer or you can grab a file from a URL. Please keep in mind copyright issues when dealing with images online. Make sure you have the right to publish this image and give credit where credit is due, even if it isn’t needed.
    1. If you choose an image from your computer, simply click in the box labeled ‘Click here to select your image’. You will be given a file browser to select your image. Once you select your image, click on ‘Upload image’ and you will be taken to the next screen.
    2. If you choose to put in a URL (an image online), click on ‘Upload by URL’ and then paste in your URL in the box labeled ‘Specify URL to an image to upload’ and then ‘Upload image’ to go to the next screen.
  2. Once you have uploaded an image, you will be taken to a screen that has three tabs along the top: ‘Convert and resize’, ‘Split image’, and ‘Crop image’. The default is to convert and resize.
  3. In the ‘Convert to resize’:
    1. If you want to just convert the image to another file type (ex. PNG to JPEG), simply click on the ‘jpeg’ dropdown menu and select the file type. Click on ‘Resize image’ and the file will begin downloading.
    2. If you want to resize your image, select your dimensions in the ‘Width’ or ‘Height’ boxes. I would suggest keeping the checkbox ‘Keep proportions’ checked to make sure you don’t end up with a “squished” image. Select your file type by clicking on the ‘jpeg’ dropdown menu and selecting the file type. Click on ‘Resize image’ and the file will begin downloading.
  4. If you want to split the image for webpage usage (sometimes called image mapping), select ‘Split image’ along the top and the lower part of the page will change. You can choose how many sections you want by changing the ‘Rows’ and ‘Columns’ numbers. Select your file type by clicking on the ‘jpeg’ dropdown menu and selecting the file type. Click on ‘Split image’ and the file will begin downloading.
  5. If you want to crop images, select ‘Crop image’ along the top part of the screen and the lower part of the page will change. The image will go grey and a box with side and corner selectors will appear in the top-right corner of the image. Select the area you want by moving the box by clicking and dragging from the middle of the image. Change the size and shape of the box by clicking and dragging one of the selectors on the side of the box or on the corner of the box. You can also choose to do this by the numbers as by typing in numbers in the ‘Left’. ‘Top’, ‘Width’, and ‘Height’ boxes. This is useful when cropping a number of images for the same purpose (ex. a series of screenshots) and you want to make use you are cropping the same area of the image. To the right of the numbers is a sample of what the cropped image will look like. Select your file type by clicking on the ‘jpeg’ dropdown menu and selecting the file type. Click on ‘Crop image’ and the file will begin downloading.
  6. Once you have finished working on your image, you can click on ‘Home page’ in the top-right corner of the screen to start working on a new image.
I know there are a lot of ways to do this and a number of them work well, but this tool seems to be one of the simplest I have used. I like that fact that I can use it on any computer as well. Lastly, I appreciate the fact that it is registration free and I can feel comfortable recommending it to students to use.

Do you have any other suggestions? Do have a favourite tool you use for resizing or converting photos? Let me know by leaving a comment below, send me a Tweet at @nathanghall, or send me an email using the contact form on this webpage. Thanks!