In programming repetition is evil. No one should do the same task more than once so I was not to excited about doing screenshots for FitTimer.

Taking the screenshots is not a big deal.

  1. On your device Hold the sleep/wake button and click the “home” button.
  2. Connect the device to your mac and import your images to iPhoto
  3. Select the imported images in iPhoto and drag them to a desired folder.

Unfortunately you can’t use these raw images. Apple requires you convert them to JPEG format and recommends you crop out the iPhone status bar. This task for many people mean opening each screenshot in Photoshop, cropping the image to “320 x 460″ and saving it as a JPG.

One may say: “It’s only a few images” but if you often update to your applications UI updating screenshots becomes one more thing you have to do. Additionally, if your website requires screenshots of different size or thumbnails, your screenshot updating task will take more and more time.

There is a better way of dealing with screenshots. You can automate the whole process with a few simple lines of ruby code using rmagick gem.

To use rmagick you will need to install the gem. You can find a link to installation instructions at the end of the post in the references section.

After you have rmagick successfully installed you can start processing your images.

I keep all my marketing material in <project_root>/marketing folder to keep it together in a single source code repository (git), however you are welcome to keep it anywhere you like.

To use my script you will need to prepare a few things:

  1. Create your working folder (in my project – “marketing”)
  2. In the working folder create three folders “raw_images”, “itunesconnect” and “web_images”
  3. Copy the script to the working folder
  4. Copy your raw ‘png’ screenshots to raw_images
  5. If you are copying the files from iPhoto you may want to rename them to something human readable like “main_view.png”
  6. Open your favorite terminal app and run the script

The script does 4 things.

  1. Crops the status bar and saves screenshots for itunesconnect in the itunesconnect folder
  2. Saves the cropped screenshots in the web_images folder
  3. Reduces the image by 50% and saves it in web_images folder with new name <filename>_50.jpg
  4. Creates a thumbnail by reducing the original image to 25% of it’s original size and saves it in web_images folder with new name following schema <filename>_thumb.jpg
View Code RUBY
require 'rubygems'
require 'rmagick'
 
Dir.glob('raw_images/*').each do |original|
  path = original.split('/')
  name = path[1].split('.').first
 
  itunes_img_path = "itunesconnect/#{name}.jpg"
 
  web_img_path = "web_images/#{name}.jpg"
  web_img_scaled_path = "web_images/#{name}_50.jpg"
  web_img_thumb_path = "web_images/#{name}_thumb.jpg"
 
  original = Magick::ImageList.new(original)
  cropped = original.crop(0,20, 320, 460)
  cropped.write(itunes_img_path)
  cropped.write(web_img_path)
 
  scaled = cropped.scale(0.5)
  scaled.write(web_img_scaled_path)
 
  thumb = cropped.scale(0.25)
  scaled.write(web_img_thumb_path)
end

References

Rmagick installation instructions
iTunes Connect Developer Guide can be found on the itunesconnect website in Manage Your Applications Section.