«

»

Oct
07

Tech Tips | Screencaps and Image Hosting

The idea of giving some tips about recapping has been running through my head for a few days. One of my reader’s mentioned that she was going to start recapping and wasn’t really sure how to screen cap. So in order to relieve her of the headache of figuring everything out from the very bottom, I thought I would give some tips on what I’ve found after 40 recaps.

As a techie and a web developer I may have a bit more knowledge about the software out there and be more willing to play around with it till I get the perfect system. I believe that anything I have to repeat time and time again can be done more easily by a computer, especially if it follows a pattern.

All the software I use is for a PC, but I’ll try to provide links for Mac alternatives.

Screen Capture Software

ZScreen

Similar Programs: Article

To download make sure you use choose the “stable” Zscreen.exe file. I use this specifically for capturing screen shots.  This software is not what I’d call user friendly. So I’ll explain some of the settings I changed. First I set the Outputs: to File. This will write your image to your computer instead of the clipboard.

The most useful feature is the Hotkeys feature. You can set shortcut for taking a screenshot and as long as Zscreen is open it will take the picture. I like using the Capture Rectangular Region and Capture Last Rectangular Region.  You use the first to set up your first region, typically covering the whole area of the drama. Use the second as you watch and if you don’t move your window or resize it the same region will be screen captured again. This means you can type as you are screencapping and it only takes a few seconds to get out the image. (I always type notes as I recap)

Next I set up the file path. This way you can keep your pictures organized. Click the Relocate button to change where your files are saved. I save by drama name and keep a separate folder for each episode.

You can also change what type of images you output. You may want to disable the feature that changes your file type after the file reaches a certain size. It’s easier to stay with a consistent file extension for reasons I’ll explain later. You can also set your image size here. You can restrict the width. This is nice if you plan to do screen caps side by side. All pictures will be a consistent width. I use 315px but most blogs do better with 300px. You’ll want to test and see. I don’t actually have this feature turned on because I like using another software to resize and rename them at the same time. I also like to keep a higher resolution photo to be used as my featured image. I also find that this resize function leaves funny borders around my image.

There is also the option to use a watermark. This will mark your images as yours. It might dissuade someone from nabbing your pictures though. You might feel protective of them now because of all the work you put into them, but I find that outside of actually watching the video to grab the images and narrowing down which images to use I only spend 10 or so minutes organizing, resizing, renaming, uploading, and inserting them into my post.

I give each of my dramas a unique name. While they won’t mix around while they are on my computer if I were using WordPress.com to host my blog the organization scheme is a bit different and I wouldn’t want them to mix. I start with the drama name and then episode. I then add an increment count. This will increase the number at the end of your file name by one each time. Ex: ring_ring_bell_ep01_i% At the start of each new recap I reset the increment number back to 0000.

Watching the video:

Before I start any recap there are a few things I do.

  1. Change the file path. Includes making a new folder for the episode. Make a new folder can be done in ZScreen.
  2. Change the file naming convention.
  3. Load all parts of the video. Hint: If you Ctrl + click or click with your middle mouse/scrollwheel the link will automatically pop up in a new tab. Also doing that to a tab will close it. (May not apply to Safari) You never know when they might be deleted :P Remember that each video needs to be in the same place on the screen. If you used one scroll wheel click to be able to see the whole video you need to do exactly one scroll click for the next video. Note: Viki has a very wide video. I find that if I have it the normal size window that the balloon that pops up when ever I capture an image will overlap and end up in screenshots. If this happens use Ctrl + ‘+’ or ‘-’ to change the zoom on your browser. To return your the default zoom use Ctrl + 0. Do this before you load your page or the video will still be the same size inside the Viki player.
  4. Set the first rectangular region. I use the hotkey  Ctrl + Shift + G.
  5. Watch the video. Use the hotkey Ctrl + Shift + X when ever you feel like taking a screencap. I like this short cut because it is easy to do with one hand. Even with my mammoth hands I find Ctrl + Shift + G to be a bit of a stretch, but I don’t want there to be any conflicts with hotkeys for other programs.

Narrowing Down Images:

When I recap I end up with 100 to 200 images. I then pick which ones to include. Using Windows 7 I change how the photos are listed. With the bigger size I can see enough of the picture to know if I want it or not. See arrow below. This takes up a lot of screen space so I double click the title bar to make the window full screen. Remember Shift will allow you to select adjacent photos and Ctrl will allow you to select non-adjacent multiple picture. If hover over the picture you can get the dimensions of this photo. This will be useful later when putting the picture into your recap. Delete all the pictures you don’t want to use.

Batch Image Processor:

BIMP Lite

Similar Software: Article

I thought I was doing quite well with my screencaps with my method and a few changes. Until I found this software. This will resize and rename all your files for you. Resizing will decrease the load time. 40 pictures per post can take a while if they are twice the size they need to be. There are two setting I use for this program. One for normal recaps and one for Loose Screw Recaps.

Normal Recaps:

For normal recaps I now have a bunch of photos, but the increment numbers are off because I deleted more than half of them. I’ll have picture 0004 and 00013. Don’t zone off and think I’m a perfectionist yet. Having them in order saves you time later. Navigate to the file the screenshots are in. Restrict the width to 300px. Change the prefix. I use the prefix “maddino_drama_name_ep01_” I add “maddino_” at this point to help differentiate between the resized images and the high quality images. I keep both copies because I’m a pessimist, but you can delete the originals if it saves space. I also use one high quality image as the featured image. I then change check the Sequential Number box. After the prefix it will start another increment. I’ve changed the Start Width value to 1 so the increment doesn’t start with zero. The Zero Fill will add in how many digits the number should be. 3 gives you 001 while 4 gives you 0001. I stick with 3 because while I probably won’t have 100 images in any post it is reassuring to have the option.
For Loose Screw Recaps:

With only two images per post I don’t mind naming them myself and it leads to more accurate image names. For these images I already have them named how I like so I just resize them and prefixmaddino_” to the front. BIMP lite will keep your names as-is if you uncheck Sequential Number

Recap Templates:

Software: Notepad++

Similar Software: Article

Honestly, all I really use is the search and replace so it may be better to go with something that has spell check at this point. Any decent word processor should have search and replace. Just do NOT use notepad. It only holds one undo at a time. I make a lot of mistakes so being able to undo more than one thing is nice.

Each of my dramas has a basic template. Which actually more often than not consists of a saved copy of the last recap.

My recap templates look something like this. Don’t be freaked out by the HTML now. I’ll give snippets you can copy and paste and the rest will all be search and replace. The “<!–more–>” is your read more button. Note some of my naming conventions are in place. The name of the drama and episode are in every URL. The numbers of the images increment with for each photo. The height is width is always the same. All the screen caps for this episode should have the same height. But you’ll have to change that for each new recap.

Now how do you change this code for your site and for each new episode. Search and replace. Use Ctrl + F  to open. Make sure to switch to the Replace tab. Search and replace possibilities are endless, but I’ll go over some of the ones I use.

Search: _full_drama_name (_in_time_with_you)
Replace: _drama_abbreviation (_itwy)
Reason: sometimes by the end of the week I forget if I have abbreviated the file name of the images. This can fix that (include the underscore before and after to delineate between a folder name and an image name.

Search: _old_drama_name (_in_time_with_you)
Replace: _new_drama_name (_ring_ring_bell)
Reason: If I’m starting a brand new recap I’ll base it off an old recap

Search: /one_folder_name/ (/yellow_ribbon_love/ or /2011/)
Replace:/other_folder_name/ (/yrl/ or /2012/)
Reason: If I decide to move the folder the image is on my server. For WordPress.com if you batch upload your images they are sorted by year and month not by drama and episode. This is why it is important to have unique names for each of your photos.

Search: last_episode_number (ep01)
Replace: new_episode_number (ep02)
Reason: New week new episode. I don’t use underscore or backslash so it will change both folder and picture names.

Search: old_height_px (190px)
Replace: new_height_px (235px)
Reason: Some dramas are wide screen and some are full screen. Each time you change your rectangular region the height may change. Remember: You can find out the dimensions of the photo by hovering over the image.

Note: You’ll probably make a few mistakes at once. I still do. If you make a mistake in Notepad++ a simple undo will undo all of the search and replaces. Or you can just do another search and replace.

Codesnippets

This will all be based on how you want to host your images. I’ll give instructions for all in this order

  • WordPress.com
  • Photobucket.com
  • Own Domain and Hosting
WordPress.com
For WordPress.com you’ll use the regular tool to upload all the photos. They are then organized by year and month. If you want to see what the URL for any photo is you can go to Media > Media Library.  Click on edit.
You’ll see the URL listed.

You can also see this when you upload the image by clicking the Edit link.

Here is the base code for Wordress.com images.

<img src="http://maddinoasylum.files.wordpress.com/2011/10/maddino_itwy_ep03_001.png" alt="" width="315px" height="180px" /><img src="http://maddinoasylum.files.wordpress.com/2011/10/maddino_itwy_ep03_002.png" alt="" width="315px" height="180px" />

Photobucket.com

You can use Photobucket for your image hosting. I find it frustrating, but with a pro account it might be nice. If it didn’t run you $3.95 a month. For a small blog this might work well. One advantage is if you plan to move to a new domain you don’t have to change all your image links. Unless you are pro you can’t choose your image size though I think. You can still upload a larger file and if the image code snipped says that is 300px wide, it will only be 300px wide. First you would create a new public album.

After you upload images that way the code snippet you will use is like this. It will probably vary and I don’t know how to find out the exact URL:

<img src="http://photobucket.com/albums/l544/maddinoasylum/ring_ring_bell_ep01/maddino_ring_ring_bell_ep03_001.png" alt="" width="315px" height="180px" /><img src="http://photobucket.com/albums/l544/maddinoasylum/ring_ring_bell_ep01/maddino_ring_ring_bell_ep03_002.png" alt="" width="315px" height="180px" />

Own Domain and Hosting:

If you are awesome like me. You have both your own hosting and domain name. To get your files up you can use the same method as WordPress.com. Or you can use an FTP client. I use Filezilla and Cyberduck is decent for a Mac. If you want more tips on this just comment below and I can explain.

Code snippet is something like this (you’ll have to create your own file structure):

<img src="http://www.maddinoasylum.com/wp-content/uploads/itwy/ep03/maddino_itwy_ep03_001.png" alt="" width="315px" height="181px" /><img src="http://www.maddinoasylum.com/wp-content/uploads/itwy/ep03/maddino_itwy_ep03_002.png" alt="" width="315px" height="181px" />

Creating Your Own Template

Now that you have your code snippet what do you do? First copy that snippet 20 times or how ever many times you need to in order to get how many screen shots you have. Adjust the increment number at the end of file name. This is a one time process (well it depends on if there is difference in how many screen caps one episode has versus the previous. Enter your writing in between the pictures.

<img src="http://www.maddinoasylum.com/wp-content/uploads/itwy/ep03/maddino_itwy_ep03_001.png" alt="" width="315px" height="181px" /><img src="http://www.maddinoasylum.com/wp-content/uploads/itwy/ep03/maddino_itwy_ep03_002.png" alt="" width="315px" height="181px" />

Oh, I'm writing a recap. Look at me go!

<img src="http://www.maddinoasylum.com/wp-content/uploads/itwy/ep03/maddino_itwy_ep03_003.png" alt="" width="315px" height="181px" /><img src="http://www.maddinoasylum.com/wp-content/uploads/itwy/ep03/maddino_itwy_ep03_004.png" alt="" width="315px" height="181px" />

This is so much easier. I hope.

<img src="http://www.maddinoasylum.com/wp-content/uploads/itwy/ep03/maddino_itwy_ep03_005.png" alt="" width="315px" height="181px" /><img src="http://www.maddinoasylum.com/wp-content/uploads/itwy/ep03/maddino_itwy_ep03_006.png" alt="" width="315px" height="181px" />

To put this in your blog post. Paste the whole recap into the HTML portion of your blog post.

Make sure you preview before you post to catch any mistakes.  For the next week you can start from your old recap and just change the episode number, the image height, and the words. Hint: If you want to select a whole paragraph triple click and it will be selected. Double Click  will select a word or in a file name would select the “maddino_yrl_ep23_001″ of “maddino_yrl_ep23_001.png” Makes it easier to delete last weeks recap. If you have something selected like “maddino_yrl_ep23_001″ and hit Ctl + F it will automatically fill the search box with that word.

Conclusion:

That was long and extensive, but I hope it will help a little. If you have any questions, you can comment below. If you want instant help, try my IM (found in About). Oh, someone asked about including other media. If you click on the music symbol right next to the Upload/Insert you should be able to add a song to your post. There are only a few file types allowed. I don’t know about hosting music anywhere else.

Please share this article with other recappers you know or anyone who might be interested. I’d really like for this to be used.  That being said no regular recap for tonight.

Update:

It’s been a while since I’ve updated this so I should I should add in a few things I’ve learned. The first thing I learned is to write first, then add screencaps later. I still use a basic template, but now I just upload all my images to the screencap gallery. I don’t want to have duplicate copies on my server so I just link to the screencap gallery.

<a href="http://maddinoasylum.com/wp-content/screencap_gallery/wild_romance/ep01/wild_romance_ep01_0227.png"><img src="http://maddinoasylum.com/wp-content/screencap_gallery/wild_romance/ep01/wild_romance_ep01_0227.png" alt="wild_romance_ep01_0227" width="315px" /></a><a href="http://maddinoasylum.com/wp-content/screencap_gallery/wild_romance/ep01/wild_romance_ep01_0223.png"><img src="http://maddinoasylum.com/wp-content/screencap_gallery/wild_romance/ep01/wild_romance_ep01_0223.png" alt="wild_romance_ep01_0223" width="315px" /></a>

Instead of using Ctrl + Shift + X as a hot key for Zscreen I use PrintScreen. It’s easier on my hands. It was useful when I used to take notes while I watched, but since I no longer do that I prefer using one button instead of three. I also don’t bother resizing my images. I probably should, but I’m becoming less perfectionistic about it.

Zscreen also has a nice auto capture function. It’s really nice if you don’t have to worry about subs. You can let it take a capture every 5 seconds or so and you’ll have a decent selection to pick through at the end. Your hands are also made free. Great for knitting.

If you download and watch with soft subs, you might want to try KMPlayer, sadly only for PC as well. It will take the frame behind the soft subs and also has an auto capture funtion. If you can’t figure it out, comment and I’ll include a tutorial on how to use that.

13 comments

2 pings

  1. Raine says:

    Mad dino is a goddess!!!!! Thank you SOOOOOOOOOO much. I’m playing two 7 hour gigs today and tomorrow but SUNDAY I will study this like I am still in grad school and thing sing your praises everywhere my internet feet go!

    1. MadDino says:

      You’re welcome. I try my best to please.

      1. Raine says:

        And please you have. My PC is unfortunately dead so I’m borrowing a Mac from my dad. I haven’t been able to DL HD versions of my K-drama so the screencaps aren’t the best quality, but I totally got it down now! (With Jing…as soon as I get my laptop fixed I’ll have to start over again…) Anyway, thanks a lot. I’m now almost done with the recap. w00t!

        1. MadDino says:

          Let me know when you complete it. Pasta was one of the first dramas I watched from start to finish. Marathon-style. I’ll be happy to recollect the fun times.

          1. Raine says:

            I’m done! I might do some minor edits, but I put it up just now. Thanks again!

  2. Raine says:

    My pc is sort of functioning so I downloaded the top two programs but wp does a lot of that bottom stuff for me. I DO havea photobucket that I use. I’m glad I had that already!

  3. alua says:

    You must have spent a lot of time on this post! I’m a Mac user, so I only skimmed it (but clicked through to the “similar software” links, which I totally appreciate) – but even so I want to say thank you for writing this post!

    1. Raine says:

      Alua – I’m a mac and PC user and I use Jing for the mac. It works decently well. I used it for 2 of my recaps I like the zscreen for the PC. But ya, this post really really helped me.

  4. Mystisith says:

    Woaw ! I’m seriously pondering about having my own blog, and i am collecting tips all over the web. THIS is just what i need ! I saw your post on DB and landed here. I couldn’t believe my eyes ! Another proof than the Kdrama community is priceless. I suppose i will have to learn a bit of HTML now… Anyway, bookmarked page for sure.
    Thanks a lot !

    1. MadDino says:

      You’re welcome. I don’t want anyone to muddle around and get frustrated with technology and end up quitting. If you have a decent tutorial everything will be made easier. If you have any questions or want any more tips feel free to ask away. I’ll give my opinion as a web developer, which may or may not work for you.

  5. misscupcakees says:

    Hello, I was just curious to how you do your recaps. Do you watch an episode twice to do a recap or do you just take notes as you go?

    Also, how long does it take you to approximately write a full recap?

    1. MadDino says:

      It’s going to vary from person to person. Personally I just watch it once. I used to take note, but lately I just go through the screen caps and write down what I remember. If I have soft subs sometimes I’ll consult those.

      The recap time varies. Sometimes it can take an hour and sometimes 5 hours. If I just go by memory then it takes a lot less time, but if I start consulting notes or soft subs it takes longer. It depends on how you want to write.

      At times I will recap something I have watched weeks ago. Those only take an hour as I note everything I can remember. A show that is fresh in my mind that I’m trying to get out as soon as possible and with as many details as I can recollect will take 3-4 hours.

      I hope that helps. It all depends on how you want to write. If you want to be extremely detailed watch once for pleasure and take notes the second time. If you want to get to the gist of what happened with lots of opinions and ramblings than it’s not really necessary.

      I know that some people watch a third time just for screencaps.

      I know it’s vague, but decide what you want to accomplish with your recap first then decide based on that. If watching a second time makes you want to pull your hair out, then don’t. If you love the show and want to share every slight detail then watching another time can help.

      I probably take longer to write than most people especially for how little I write. I have a hard time concentrating and words don’t flow out of me very well. I love running a website and all the software, but writing is difficult.

      I asked a few other recappers. One watches twice and uses autocapture for screencaps.

      One watches once unless she goes back to screencap, but takes extensive notes. She takes screencaps manually. It takes her an hour to put it all together.

      Another writer spends an hour writing outside of watching and watches twice. Once specifically for the recap.

      Don’t feel pressured to recap a certain way. I used and it made writing a chore I put off for hours. Whatever you enjoy is what you should do. Hope this helps.

      1. misscupcakees says:

        Cool, thanks for your advice. I just wanted to know a bit more because I am new at this.

        I always watch a video twice – first in fullscreen taking screenshots and then a second time to take notes.

  1. Pasta: Episode 14 Recap « Raine's Dichotomy says:

    [...] like to thank MadDino for that. She suggested screen-capping software for me to use and even has a post explaining how to use it for techie idiots like me. I kow-tow to her knowledge. Deeno-yah, you [...]

  2. Screencap Gallery « Raine's Dichotomy says:

    [...] recently taught me how to screencap. She was kind enough to post a “how-to” for idiots up on her site. I thought I’d share all my screencaps on Photobucket with [...]

Leave a Reply

Your email address will not be published.