Freeing Your Online Graduation Pictures

Jesse Chen • May 24, 2012 10 min read


This is a tutorial created by Jesse Chen and guest contributor Jonathan Tien.  Jonathan is a Product Manager at and a recent Cal grad, where he got his degree in Computer Science.

Hi everyone,

If you have found this 2-year old article (as of today), it is because you are either 1) looking for a way to get your graduation pictures without the watermarks or 2) found this from various blogs that've linked to this article.  This is a public apology to all the photographers out there who are outraged at the tutorial that taught non-tech savvy people how to remove watermarks from photos.  My friend and I wrote this article when we were still in school because we wanted an easy way to get the digital photo for free without shelling money out.  Yes, we were young and naive back then.  Yes, we did not feel like the photos were worth paying for back then.

Let me explain the reasoning of why we wrote this article in the beginning.  We were both Computer Science majors and we have learned about web development, so when I saw the animated watermarks on top of the previews, I was frustrated about it, and I thought of ways to get around it.  I thought it was clever that GradImages used javascript to disable right clicking among other efforts to circumvent people from trying to get to the raw photo.  I took it as a challenge to see if I can find a way to get to it, and found that it was trivial to get to the raw image.  Once I had the image, I approached Jon to teach me how one would be able to remove the giant yellow proof text overlayed on it.  He knew photoshop and he said it was easy to do (as you guys probably know).  Within minutes, he was able to show me the photo without any of the watermarks or proofs.  At this point, we were like hey, that's pretty cool!  Let's write a tutorial about it to show others how to do it as well!  And that's how it came to be.  Looking back, I regret the tone of the article and the lame sarcasm ("taking back what's yours") which is probably the main source of anger that you guys are having.

If you are for some reason still interested in seeing the original content, you can still see it here

Free pictures?  What?#

Congrats new grad.  Now that graduation is over, photo proofs have been sent to you online for you to view.  The only problem is, you can't seem to save those pictures!  Right clicking on the website seems to be disabled and you really want to see and share the images without that ugly copyright overlay or the proof watermark right in the middle of the picture.  Don't worry.  In this article, my buddy Jonathan Tien and I partnered up to teach you how to grab the image off the website, and use Photoshop to remove the proof watermark from the image.

Getting the image#

For UC Berkeley graduates, find your photos here.  Find your name on the list, and you should arrive on a page that looks like this:

grad images jesse chen

Now, lets choose an image that we want to grab.  I really like the picture with the creepy bear standing in the background, so lets get that one.  Click on that image, and you should be directed to this page.  Click the "View Larger" link on the left sidebar to see a bigger image.  Good, now it should look like this:

jesse chen creepy bear

Now, the hardest part.  What browser are you using?  Depending on your browser, we'll have to do different things.  Chrome, Firefox, Internet Explorer?  Pick your poison.


Press CTRL + SHIFT + i to launch the WebKit Developer Tools.  If that doesn't work, go to the wrench icon on the top right, then Tools > Developer Tools.  If you see something like this, you're doing it right.

jesse chen creepy bear with webkit developer tools

Make sure you're on the "Resources" tab.  Expand the folder under "Frames".  In the picture above, that'd be the "(26814975)" folder.  Find the "ZoomHandler.ashx" file and double click it to open the image in a new tab.  Or right click the image to open it in a new tab.

jesse chen zoomhandler.ashx

From here, right click and "Save image as..." onto your computer.


Cool.  Press CTRL + SHIFT + i or go to the menu and Web Developer > Inspect.  Move your mouse so that its over the large image in the middle.  The little bubble should say "div.OverlayZoom".  Now click on the second-to-the-right button so that the popup says div.Zoom.Vertical.  Click the "Style" button on the bottom right and click the background-image property.  Copy and paste the URL, make sure to get the whole thing!  It should start with "www2" and should not have any quotes or apostrophes at the end of the URL.

jesse chen creepy bear firefox developer tools

Open the URL in a new tab, and "Save image as..." onto your computer.

Internet Explorer#

Oh dear.  This is for Internet Explorer 8, instructions might vary for other versions of IE.  Press F12, or go to Tools > Developer Tools.  A new window should pop up.  Type "zoomhandler" into the search bar, and grab the URL under the background-image property.

internet explorer good god

Open the URL in a new tab, and "Save image as..." onto your computer.

Photoshop Magic Time#

Once the image has been saved onto your computer, its time to use Photoshop to remove the watermark from the image.  Also, did you know all UC Berkeley students get Photoshop for free?  Jon will take it from here.

Now we have our picture. The only problem is the giant yellow text splayed across it. To get rid of it, we’ll have to use some Photoshop tricks, namely content-aware fill. (Note: this tutorial heavily relies on the use of content-aware fill, which is only available in Photoshop CS5. If you have an older version you’ll have to use an alternate method to remove the yellow text).

jesse chen creepy bear starting point

(fig. 1: starting point)

The first thing we want to do is select the area the text covers. You could potentially do this using the magic wand tool, maybe the quick select tool, or even the lasso tool. But its actually easiest to just overlay identically formatted text and use that as a mask. We’ve gone ahead and done the troublesome part for you and figured out the formatting for you.

The font is Helvetica, but Arial works fine too (the two are nearly identical). “PROOF” is ~100pt and “GradImages” is ~65pt, bolded. Both lines are rotated exactly -30 degrees (to do the rotation, access the text layer’s transform tools, and then type in the value manually. If this is all Greek to you, Google is your friend - there are a lot of very helpful Photoshop tutorials out there).

jesse chen creepy bear photoshop

(fig. 2: rotate both layers -30 degrees -- see highlighted field in the toolbar)

After aligning the text layers, you should eventually end up with something like this:

jesse chen creepy bear photoshop remove watermark

(fig. 3: not perfect, but overlaps well enough for our purposes)

Now we want to rasterize these two layers and select them (so that we can select the yellow text underneath). Select the two layers (hold SHIFT and click both of them) and then hit CTRL+E to merge and rasterize them (alternately, you can go to the Layer menu and select the “Merge Down”). You should end up with something like this:

jesse chen creepy bear rasterize

(fig. 5: in the layers panel, there is now only one, rasterized layer)

Now we can easily use the magic wand tool to select this text, then hide that layer and apply the selection to the original image’s yellow text. (to make your life easier, de-select “contiguous” in your magic wand’s options to select all the black text at once).

jesse chen creepy bear almost done

(fig. 6: selecting our rasterized text using a non-contiguous magic wand)

jesse chen creepy bear photoshop almost done

(fig. 7: hiding or moving our black text allows us to apply the selection shape to the original image!)

Now we want to use the “Refine Edge” tool to adjust our selection shape a bit (remember, we didnt exactly get a perfect fit on the text overlay). At this point, you’ll just have to experiment a bit to get the results you want. You can also use the “Grow...” command from the “Select” menu. Either way, your goal is to surround the entire yellow text so that you don’t end up with any yellow edges.

proof gradimages

(fig. 8: tweak your selection using “refine edge” or “grow.” As you can see, you want to select a little outside the yellow text, so there’s a dark border around the yellow)

Once you’re comfortable with your selection, go to Edit > Fill... (or hit SHIFT+F5) to use content aware fill on your selection. We ended up with something like this:

jesse chen post processing

(fig. 10: not perfect, but not bad for free and 5 minutes of work!)

From this point on, its all manual clean up - and its up to you how much you want to do. I still had some yellow edges left over, so I just quickly cleaned them up using the spot healing brush tool.

jesse chen photoshop cleanup

You can also use the regular healing brush to clean up trickier areas, such as Jesse’s collar here.

jesse chen collar cleanup

(fig. 12: I used a combination of the Dodge tool and the Healing brush to redraw Jesse’s collar)

Here’s the finished image:

jesse chen finished

Of course, it’ll never stand up to close scrutiny, but it’ll pass if you need something quick and dirty. And of course, you can always make things less obvious by applying filters (Instagram, anyone?) or blurring the a duplicate layer and performing an overlay, adjusting brightness/contrast, etc.:

jesse chen filtered


We went from a picture that was covered in an ugly copyright overlay and a disgusting yellow proof watermark, to a beautiful and majestic picture that is clean and polished.  No need to "print screen" or take a picture of the monitor in order to share with your family.  We hope that this tutorial helps you by freeing your graduation pictures so that you can take back what's yours to begin with. Now if you'll excuse me, its time to slide back into the comfy warmth of the creepy bear's embrace.

Let us know if this tutorial was useful and any comments or questions below!

© 2021, Jesse Chen • 95e966e