I was browsing around the questions and noticed the cool looking "coda" screenshots doctype uses when you post a question and a link. I was wondering how they do that and or implement that? Any ideas? I would love to use that in a small project I have coming up.


2 answers


I'm one of the people who built Doctype. As Olly said, our main product is Litmus, which generates screenshots of your websites across different browsers.

To generate the initial screenshot of the page we use the same technology we built for Litmus. It renders the URL in a browser and captures a screenshot. This takes just a few seconds.

The resulting image is then passed through an ImageMagick to create the 3D effect. We use a command line Ruby script to control ImageMagick. Here's the script in its entirety:

require 'rubygems'
gem 'rmagick'
require 'rmagick'

if !ARGV[0]
    puts "Usage: doctype.rb path-to-image"

# Load screen capture, and shadow and gradient overlays
image = Magick::Image.read(ARGV[0]).first
shadow = Magick::Image.read("shadow.png").first
gradient = Magick::Image.read("gradient.png").first

# Resize large screen capture to a more workable size. Speeds things up.
image.resize!(500, 488)
image.background_color = "none"

# Bend the image
amplitude = image.columns * 0.03
wavelength = image.rows  * 2
image = image.wave(amplitude, wavelength)

# Add some space around the outside to work with for shadows etc.
image.border!(80, 80, "none")

# Perspetive distortion transformation
points = [96,81, 107,81, 594,80, 592,80, 95,567, 90,549, 594,567, 563,575]
image.virtual_pixel_method = Magick::TransparentVirtualPixelMethod
image = image.distort(Magick::PerspectiveDistortion, points)

# Composite the three images together in the correct order
image = shadow.composite(image, 0, 0, Magick::OverCompositeOp)
image = image.composite(gradient, 0, 0, Magick::OverCompositeOp)

image.background_color = "none"

# Resize to the size we'll use on the site (doing previous stuff at higher res gives better output)
image.resize!(300, 282)


# Add -print to image basename, write to file.
out = ARGV[0].sub(/\./, "-print.")
puts "Writing #{out}"

Notice we use three images in the process, which are composited on top of one another. The first is the screenshot of the page, the second is the shadow effect, and the third is the shadow gradient along with the paperclip.

Here's how the output looks:

I'd like to write up the process in more depth in a blog post sometime soon, so keep an eye on the Doctype blog. If you have any further questions in the meantime, feel free to post them here and I'll do my best to answer them!

Answered almost 10 years ago by Paul Farnell
  • Thanks Paul, that would be awesome if you do a post on that. I think it would be a great idea to make a comment on this post to guide people to the blog post you do if they come to this question with an answer. Thank you a ton! Matt Anderson almost 10 years ago

The people who make Doctype also make Litmus which does that very thing across loads of browsers for a living, so I guess they use some code from that.

For you to do it, you'd want to load the page, render it, capture that as an image and work with that. Whether you script a browser on a machine somewhere or embed webkit (or something similar) into your project is entirely up to you.

Answered almost 10 years ago by Olly Hodgson