How to extract images from documents and find better versions

Finding images for graphic design can be daunting, if the source images you are given have not been maintained well—or you have to find your own.

This is a brief guide on extracting original quality images from common document formats: web page, PDF, Word, PowerPoint, and EPUB.

The last section is on how to find better versions using Google Image search.

You should consider screenshots to be your last resort, because that will a) reduce the image quality and b) destroy the image's resolution information.

In all instructions below, all images should be saved neatly in a folder. You will have to dig through and delete extraneous files.


Web Articles

  1. Open the website in Chrome, and scroll through the entire article so that the all images are loaded visible.

  2. File → Save Page As...

  3. Select Webpage, Complete, and save.

Scrolling is important because hidden images may not be saved. This will work for most websites but not all, depending on how the images are displayed.

Note: Some graphic elements may not be images. In this case, you need to make a screenshot.


PDFs

If you have Photoshop (preferred method)

  1. Open PDF in Photoshop 

  2. Select: "Images"

  3. Select the images you want and click OK.

To select multiple images, either use the Shift key, or Cmd for macOS / Ctrl for Windows.

If you don't have Photoshop (lossy)

  1. Go to https://smallpdf.com/pdf-to-jpg (Links to an external site.)Links to an external site. and upload your PDF

  2. Select "Extract Images"

  3. Download the .zip file

Note: images extracted this way will not be original quality. Photoshop is the best way to get images from PDFs.


Word / MS Office Documents

  1. Open the document.

  2. File → Save As... → Web Page (.htm) → Save


Epub

  1. Rename the file from <filename>.epub to <filename>.zip. Ignore warnings.

  2. Unzip the file.

For all other ebook or document formats without DRM (i.e. you need to authenticate to open the file), use an online converter to convert to one of the file formats above and follow relevant instructions.


Find higher-quality versions of an image

This won't always work, but it can be a huge help if your favorite image is too small to use in print.

  1. Go to images.google.com

  2. Drag and Drop your image into the search box. Or use the little camera icon.

  3. Click on the uploaded image at the very top.

  4. Use the "Size" filter to find larger images. You may need to change it if nothing shows up.

  5. Look through and download the best-looking one. Some heuristics are: larger resolution, larger file size, and lossless file format, such as PNG or TIFF.

Note: none of the heuristics above directly indicate image quality. You need to use your eyes. People often distort the file by a) taking screenshots or b) saving a small image larger than it actually is / stretching the image.

Hope this helped!




User Experience Design

Paperworked Interactive Prototype

Try the Adobe XD Experience.

Paperworked is a web app that adds interactive playback to annotations on PDFs, essentially allowing users to author step-by-step guides directly on documents. It was designed as a part of my undergraduate senior design.

In order to see how the idea would work, I created the prototype above on Adobe XD.

Initial Sketches

Walkthrough


Tetrachromat Website

Visit the website on GitHub Pages

Created based on an art exhibition for Graphic Design class, this website focused on a unique interaction—of moving colors that gently follow the cursor—that mirrors the exhibition. The moving gradients were created using HTML canvas and Javascript. Code


World at Penn Assistant

I wanted to demonstrate the potential of a proactive virtual assistant that would help international students complete important immigration-related tasks. I focused on a few things to give the assistant more natural and user-friendly,

  • Conversational and friendly language.

  • Clear differentiation between message types: ✅ for confirmation, ✳️ for starting a task, 🔸 for a reminder, and ➡️ for call to action.

  • Tasks and uploads done directly through messages.


ISSS Online Queueing System

Before starting, I thought about the the minimal set of interactions necessary for . Before mapping out the user journeys, I identified the variables that inform the instructions, notifications, and the user state:

  1. Date and time: queue closes before advising.

  2. Length of queue: if nobody is waiting, they should just walk in.

  3. Whether the user is queued.

  4. Length of time in queue.

  5. Whether the user is physically present at the office.

Based on the steps and the variables, I began mapping out the user journey from the landing page to completion, incorporating the variables above. Once the map was simplified to my satisfaction, I created plenty of mockups for each item on the map to illustrate the UI.

The most challenging part was determining a fair and straightforward way to manage the queue. This was quite the riddle, because initially, we wanted to give the physical walk-ins priority. However, this ultimately conflicted with the purpose of the project, so we abandoned the idea for a simpler solution: treat them the same, and the advisors will take whoever is present at the time. This scheduling algorithm was to be implemented on the staff side.

Things look very different for the staff. I had to consider different facets of the system:

  1. The receptionist’s view

  2. The queue display in the waiting area

  3. Database and scheduling

For the receptionist view, I noticed that nothing needed to change because in the queue, the online and offline queuers are treated the same. The changes would be implemented in the backend, where existing functions would be modified to account for the online queueing system. For example, the receptionist can remove someone from the queue, and removing someone who is not present will additionally trigger a notification.

The queue display in the reception area would be modified to hide online queuers until they are physically present, because the display is only visible in the reception area. If the display showed names of people who are not present, potentially in front of those who are sitting there, it would be misleading to those who can actually see the display.

I outlined the process and the modifications in plenty of specific cases and examples, so that even if there is a loose edge case in the description, the developer can deductively arrive at the correct implementation.


Thank you for visiting!

Portfolio
Motion Design

Summary of Educational Work

See experience design work.

2016
2017
2018
2019

While it goes without saying that education is a life-long process,
my experience in providing structured instructions to others began in 2014, when I worked as a Human Resources Specialist in the Army. Training new soldiers assigned to my office, I found that writing a thorough manual was the way to go, especially for hand-off. Tasked with handling most of the personnel-related administration for the whole unit, I had to be extra organized with files, forms, and procedures, which proved to be a valuable lesson and a habit.


2016

Flow chart for the desired ins, outs, and features.

In 2016, I worked as a Project Manager at Paul Academy in Seoul, Korea, where I consulted on the customization of a question bank software for use with SAT Tests. The SaaS firm, WizEdu, had designed their software for the K-12 of Korean education system, which was not suitable for SATs.

I began by first comparing the two systems, and identifying the modifications that would be needed for the software to accommodate SATs. The project was extensive to say the least, requiring detailed specifications for all modifications.

Upon return to Penn, I began working as the OhSnap Photography Manager. The brand had been spun off a larger agency, but the previous manager had abandoned it many months ago. It was in dire need of revitalization. In the first few months, I rebranded the organization, wrote and designed the entirety of ohsnapupenn.com from scratch.

I created a variety of instructional material, including a manager manual; photographer guidelines, outlining photographic and business conduct; and training material.


2017

One of my first projects at International Students and Scholar Services at the University of Pennsylvania, the STEM OPT Form I-983 tutorial was a hit with the office and the students. In fact, I decided to take this format further with the next tutorial (Form I-765 Tutorial below), and my senior project.

When I was first asked to do this project, I had never created a video tutorial before. I did some digging, and found that existing tutorials on YouTube disappointed me in the following ways:

  1. Written instructions—either none or too much.

  2. No clear indication of where things are on the form, and where the current item is.

  3. When referencing outside resources, no instructions given for those.

  4. Low-fidelity motion and graphic design.

  5. Text is too small because the video does not zoom into individual items.

A vast majority of tutorials, as they have been even at ISSS, were simply people talking over an image of the form. What is the point of creating a video when really, you are only using the audio?

I wanted to bring this format into 2017 by applying practices that I had observed in places like mobile app onboarding flows—I set some criteria for myself based on my past experience and the purpose of the project.

  1. Instructions should be unambiguous and in accessible plain English.

  2. Instructions should be granular and concise.

  3. The video should include both written and spoken instructions.

  4. Visual indicators and motion should direct viewer attention.

And the video above was my solution. Using Keynote, I created a slide for each item, placing a red indicator around the current field and a speech bubble for instructions. The object transitions took care of the animation—I just made it slow enough that there is time between each item for students to pause the video and work on the form. In addition, I reserved some design features / animations for recurring elements, such as the slide in and out on the right side for the table of contents, red for current item, blue for referencing outside resources, slide up and back down at the end for completed pages of the form. This practice in user interface design is something I have been seeing more and more as companies cram in ever-increasing number of features into a tight space. The physical and spatial intuition of where things are and how they behave is crucial in helping users keep track and feel a sense of consistency.


2018

This was a prolific year for me, with four major educational projects, involving new platforms, LMS, and slides for an entire course! Many of my presentations are educational in nature, but below are the most noteworthy.

The first project of 2018 was an e-learning tutorial for business administrators using ISSS systems, created using Articulate Storyline 1. This was my first try, and I was able to make many improvements in the second one.

This tutorial was created because the internal system at ISSS had been updated. The previous tutorial, which I was initially told to revise, was narrated by a coworker who had left a few months before. This meant that the whole tutorial had to be redone, even the parts that stayed the same.

Because these updates are not drastic, and will happen again in the future, we chose to use computer voices going forward, because it will allow future employees to selectively edit the tutorial, regardless of staff changes.

Based on the positive feedback I had received in the video tutorial, I made sure to give clear visual indications for every instruction and illustrate every structural or sequential concept using graphics.

One challenge that I did not anticipate was that unlike humans, text-to-speech software has a very limited contextual awareness. Therefore, I edited the entire script for accurate speech. I outlined the fixes needed in a document outlining how to make changes to the tutorial:

  1. Add a space between every letter in an acronym. i.e. USCIS → U S C I S

  2. Add a space between numbers according to how they are pronounced. i.e. I-797 → I-7 9 7, and DS-2019 → DS-20 19

  3. Change iPenn to “I Penn” or “Eye Penn,” whichever sounds better to you.

  4. Change email addresses and URL’s by spelling out every part as they are meant to be pronounced. i.e. [email protected] → I S S S at P O Box dot UPenn dot E D U.

  5. Make sure to spell out how common words replaced by punctuation are pronounced. i.e. 2 – 3 business days → between 2 to 3 business days.

  6. Prefer verbal or colloquial forms over grammatically correct sentences to make it sound natural.

  7. # is usually pronounced as “number” and things surrounded by brackets add the same pause as would being surrounded by dashes. i.e. form (1) is awkward, but form #1 or form 1 is natural.

  8. Computer speech is very sensitive to punctuation. Punctuations will also change the intonation before and after, so you cannot use it to add artificial pauses. Change or even re-phrase what sounds wrong and use it to your advantage to make things clear.

The presentation above is one in a series of 7 PowerPoint slideshows for lectures on intercultural communication. I opted for a card-like system for presenting a list of items, because there was a wide range of information density on these slides, and bullet points couldn’t possibly be used in a consistent manner without sacrificing visual impact.

In order to keep the design consistent between modules, I defined a thorough PowerPoint template based on my previous presentations. Designing this template allowed me to review my previous projects and decide on an aesthetic for future projects at ISSS. Did you know that you can bake transitions and builds into the template? Neither did I. See other modules here.

My second Storyline project, International Student Orientation Tutorial, was a little more complex than the first one. This time, I explored every part of the software to customize the player in order to add flow control, variables, and player customization.

Flow control was needed here, because unlike the first Storyline project where everyone needed to see the same thing, students can have different types of visas with different immigration requirements.

My most recent video tutorial, the Form I-765 Tutorial builds on the format of the first tutorial. I have been getting positive feedback from the International Student Advisors, who tell me that the tutorial has reduced the amount of inquiries from students.

The biggest challenge, both on the form and for the video, was Section 6. While most other items were OK after simply rephrasing for spoken computer text, the completion of this section depended on 2 variables that generates 4 possible cases on 2 groups of fields. A mouthful, right?

The script initially explained this in a linear fashion, explaining the two groups on 2 cases, and then introducing the third case after. But that had some immediate issues:

  1. Students will need to pay extra attention to the explanation.

  2. They have to listen to the whole thing before working on the form.

So I reworked the explanation so that a linear progression was possible through the 4 cases without sacrificing clarity. I drew the 2 by 2 table for my own sake, but realized that this type of table was fairly common, even in the humanities and social sciences. I capitalized on this by creating an indicator out of this table because:

  1. Students will know, from the start, which part to listen for.

  2. Even when paused, the indicator will show which case the instructions applies to.

  3. Students don’t need to do the combinatorics of these variables.

While not perfect, this was a timely solution that reduced the mental load of viewers. In fact, I have received feedback that some students come in for advising because the instructions are too clear cut for how open-ended the section is. (Overthinking is a common trait for anxious students)


2019

This year, I have been working as a Book and Publication Design Teaching Assistant, teaching alongside the professor with a focus on the technical side of Adobe InDesign.

Booklet printing—one of the most important features of a publishing software—on InDesign is geared towards professionals. There are two separate levels of menu and more than three dialogs that needs to be configured every time, which, I have to admit, took a lot of trial and error for me when I first started using it. While this process has much room for usability improvement, for now, we have no choice but to learn how to use it.

So I wrote a detailed set of instructions. I think it worked, because some of the students had it printed out, and I have not gotten a single question since. See PDF

Notes on Nested and GREP Styles. Nested styles were covered in class.    PDF

Notes on Nested and GREP Styles. Nested styles were covered in class. PDF

Because Book and Publication Design is a Fine Arts course, and GREP is more of a Computer Science topic, I decided to create a little cheat sheet for students to refer to. The examples at the bottom are the building blocks they need to auto-superscript citations.

That’s all the educational and instructional projects I have worked on so far. I have a few more coming up—they will be added as soon as they are published.

Thank you for visiting!

Portfolio
Experience design

Senior Project Overview

Senior project is an opportunity to create something from scratch, to apply what I’ve learned during the program. I decided to build on an observation I made while doing research for a tutorial video on filling out complicated paperwork.

What I found—there is no simple way to give step-by-step instructions on paperwork—was surprising to me. I wanted to solve it by building Paperworked. Read more through the links below.

I designed a cute logo for the project!

I designed a cute logo for the project!

More coming soon…

Photography Portfolio Summary

 
 

Counter the Land

Conceptual landscape photography course taken in Fall 2018.

Colorspace is my take on what the opposite of black & white looks like. I tried many different ways of doing this, and eventually was able to create a good, consistent methodology. The images are put through simple adjustments after their Brightness channels in HSB mode are flattened. The same process was applied to all photographs in this album. Location is Schuylkill Environmental Center.

Boundaries looks at the abundance of glass surfaces. I always enjoy looking at the distorted reflections in the windows of buildings around me. I have many images of this, even of glass in moving vehicles, but never did an actual project. With the prompt to create a set of images about interference, I went to Cira Green and looked for interesting and complex surfaces. Providing better views, the large windows have turned into views themselves. What is inside, and what is outside?

Copies explores the impact of appropriation—both for profit and for personal reasons—famous landmarks. It is generated by finding the median pixel value of a large number of images scraped from Instagram. The album shows Statue of Liberty (location), #lovestatue, #eiffeltower, #yosemite. The number of images double every iteration, starting at 32.

 

Travel

Sights that moved me during travel. Mobile photos are on Google Photos, which has an option to display image metadata.

Iceland is from a trip to Europe in 2016. My friends and I—we had met during military service and just finished—were so mesmerized by the scenery in Iceland, that we stopped our car minutes after leaving the airport to take photos. I remember thinking: “there is so much sky,“ because there were no buildings or hills in sight to obstruct it. Thankfully, one of us reminded the group that this is just the side of some road and that we will be doing actual sightseeing. I filled out my first SD card before we got to the Airbnb, and eventually deleted most images of the sides of the streets… The first image in the album was exhibited at the Charles Addams Fine Arts Hall during a guest event in a giant 65 by 44 inch print. Most images are taken in Iceland, but a few are from Scotland.

Yosemite is a set of images from 2014 at Yosemite National Park. I found the scale of the rocks and the patterns on the cliffs inspiring. This was a guided tour, so we had little time. I want to go back soon and hike around all day.

Mobile Photography (external link) is dedicated to images taken on my phone. For the past two years, I have not been traveling with my camera, because the phone is so much more convenient. In addition, image sensors and computational photography are really exciting right now; these technologies bring dramatic improvements in smartphone image quality. Some of my best images are taken on phones.

 

Advanced Digital Photography

An upper level photography course, taken in Spring 2014.

GMO is a subtle illustration of genetically modified organisms. For these images, I bought a few groups of fruits and vegetables that have similar shapes and textures but different colors. I photographed them in the same setting and produced the three variations on Photoshop.

Coherence is the result of a project named After…, which involved choosing an artist and imagining the work that would come after, both stylistically and conceptually. I chose Yves Medam, intrigued by the overlaying technique that resonated with me. The images seemed to encode how we experience the world—dynamic, multifaceted, and fragmented. I took hundreds of images at various focal lengths at locations around Philadelphia for this project. There is also a book. Images from this album won an award from International Photography Awards (IPA), 3rd in Architecture-Other in 2014.

Nature II imagines the ongoing struggle between construction and nature. At first a harmless barrier, the build environment slowly takes over until nature is just a mirage Taken around Philadelphia.

 

Old Portfolio

A selection of work produced in 2012 or earlier. This used to be everything on this website.

Vietnam I, Vietnam II is a pair of albums from Vietnam, when I went to a remote village for community service work. This was the second trip, and we built large huts using thatch. Some people in the village were affected by Agent Orange, which was motivation behind the work. The first album is mainly landscape, while the second is exclusively portraits.

Things Intangible is an experimental photo shoot that involves ink, soap, petri dish, and a light box. I was inspired by watching something about buildings mimicking nature, like bubbles, and that they have recursive / fractal structures. I still think that this kind of repetition has a lot to do with the perception of beauty. Before the shoot, I just wanted pretty bubbles, but I ended up with unique images resembling various intangible things.

Nature was shot at a forest in Korea, using a medium format film camera. The result is a wonderfully detailed and serene images of trees. My personal favorite is the second one. During this time, I tried many different types of cameras and photography.

China is a view of Beijing and some of its famous landmarks through a panoramic film camera. The format was fit for capturing the expanse and scale of the scenery.