ads
read more
Blog Posts
Drawing, Inking, and Animating Stream-of-Consciousness Illustrations I mentioned on the news posting where I announced the completion of Nourished that I would write a blog about my process for creating my stream of consciousness illustrations. I am excited to share the process with anyone who may be interested. This entry is divided into sections discussing style . . .
Animated Impressionism with Adobe After Effects & RE:VisionEffects This tutorial covers a technique for animating paint strokes applied to a still image so that it appears to be a work of impressionistic art. Adobe After Effects is the software application used in this demonstration, but you can take the method outlined here and apply it to your own . . .
Web application storyboards with Adobe Photoshop, InDesign and Illustrator This blog entry is intended to be a resource for designers working on user experience (UX) or interaction (IxD) storyboards for website applications. The storyboard template files within the downloadable archive are intended to be printed out and sketched on. The browser frames provide a context for the application interface, . . .
Rendering photorealistic water droplets with Adobe After Effects This post covers a digital video compositing technique for rendering photo-realistic water droplets moving on glass surfaces. This technique was used in a number of projects I participated in — see some examples in my portfolio. No code is used to generate the shape or motion of the water droplets. . . .
More blog postings coming soon. Thanks for visiting!
blog
Web application storyboards with Adobe Photoshop, InDesign and Illustrator UX Storyboard Template

This blog entry is intended to be a resource for designers working on user experience (UX) or interaction (IxD) storyboards for website applications. The storyboard template files within the downloadable archive are intended to be printed out and sketched on. The browser frames provide a context for the application interface, and they help the project stakeholders visualize the end-user experience. The image on the right shows the template within InDesign. Read on to learn how to seamlessly integrate your sketches into the template.

Files contained in the archive are compatible with Adobe InDesignCS3 or higher and Adobe Illustrator CS or higher. The templates are in Tabloid format (17" x 11").

From my experience, when storyboard panels get too large, it seems the quality of the sketch is reduced or too much time is spent drawing out minute details just to fill up the frame. Therefore, I made the panels in the template not too large, but not too small. Their size gives ample space for quick gestures when sketching out the composition of graphical user interfaces, and also provides room for adding detail when needed. With this storyboard template, a UX designer can work with ten panels which is typically enough to communicate a few interactions and interface state changes.

Before initiating any sketchwork, it's useful to have developed a scenario-of-use narrative that outlines a workflow for accomplishing specific tasks. The narrative is usually based on a sets of requirements gathered early in the design process.

Section 1 | Storyboarding in Adobe InDesign

Follow the steps below to create a deliverable storyboard by using Adobe InDesign. The general idea is to sketch on printed panel frames, scan the sketches, crop out individual sketches from the original scan, and link those individual sketched graphics to objects within the InDesign document.

1.1

Blank UX StoryboardsPrint multiple pages of blank panels of the individual panels by printing out the PDF file included in the archive. You should get pages as seen in the image on the right.

1.2

Sketched UX Storyboard PanelsWith a pencil, sketch out the application's interface in each panel according to a user's scenario-of-use. Ink over specific pencil lines if necessary. Some scanners have a difficult time picking up pencil.

1.3

Scanning UX Website Storyboard SketchesScan the pages of your sketchwork into Adobe Photoshop. Ensure the scanning resolution for the storyboards is at 300dpi.

Save these original scans to your drive.

1.5 a

Color correct the original scans in order to
accentuate the sketched lines. First, Invoke the
Image > Adjustments > Desaturate
command from the application menu.

b

Adjust contrast with Image > Adjustments > Levels.
If using pencil for sketchwork, use the mid-range
slider for best results. Save the changes to the file.

c

Now, duplicate the color corrected canvas in order to alter a new image. Use Image > Duplicate.

d

Crop the duplicate image to the edges of the first panel sketch. The browser frame should be cropped out as shown in the screenshot. Save the cropped image as a Photoshop file. Repeat steps c and d for each panel until all of the panels have been cropped and saved into individual files. Use a naming convention, for example:
panel01.psd,panel02.psd, panel03.psd, . . .

1.6

Open the Adobe InDesign storyboard template file included in the archive. Ensure the document is set to View > Show Frame Edges. The edges around all graphical objects will be dotted. This means that those objects are linked to the A-Master page which is essentially a template layout. Changing the objects on the first page requires detaching its objects from the Master Page. Within the Pages panel, select the first page icon, and invoke its contextual menu. Click on the Override All Master Page Items command. After doing this, the edges around all graphic objects will switch from dotted to solid lines.
Those objects are now editable.Override Master Page Elements

1.7

With the Direct Selection Tool, select the red picture frame object in the first panel. Once selected, invoke the File > Place command from the main menu. Find the corresponding Photoshop file that you created earlier in Step 1.5. Your sketch should now appear within the storyboard frame. Repeat this step for all picture frame objects on the page.Place Image into Panel Frame

1.8

Using the text tool, select the various text boxes to change the labels and narrative.Selecting and Changing Text

1.9

New Page IconIf you need more pages for your storyboard, simply drag the A-Master
page icon in the Pages palette to the
area directly after the Page 1 icon. Then repeat the steps above.

Once all graphic files are loaded into their corresponding frames, export the document to PDF format for delivery.

Section 2 | Storyboarding with Adobe Illustrator

Adobe Illustrator has the capability to help you produce storyboards as well, but as an application it is geared more towards illustration rather than publishing. If you only have access to Adobe Illustrator, you can follow the steps below to create a deliverable storyboard in Adobe Illustrator. The following assumes that steps 1.1
through 1.5 were performed by the user.

2.1 Placed Image in Adobe InDesign

Open the Adobe Illustrator storyboard template included in the archive.
Choose File >Place . . . , then select the first graphic file created from step 1.5 in which the scans were duplicated, cropped, and saved. The sketch will appear atop the document.

2.2

Choose View > Outline from the main menu to see the objects in their structural form. Outline mode only shows the anchor points and paths of the graphical objects. Moving objects in this view eases the task of selecting, moving, and aligning anchor points.Outline / Preview in Illustrator

2.3

Ensure that Smart Guides are enabled by selecting the View menu and verifying that a check mark is next to the Smart Guides command. Using the Direct Selection Tool, click and hold the graphic's upper left anchor point when the Smart Guide reads "anchor". Then drag the mouse until the object's upper left achor point is aligned with its frame's upper left anchor point. See the images on the right for display information.

Repeat placing and aligning the
remainder of the panels as in
step 2.1 and 2.3. This is the bulk of
the work, so save often.

2.4

If you need another page for your Adobe Illustrator storyboard create a new empty
template and repeat the steps above. Once you have completed placing and aligning
the graphic files, export the document to PDF format for delivery.

comments
alejandraMonday, February 9, 2009

what up arie!!!!
so i got put on a project with andrea.. to do a micro-site and everyone wants it to look as cool as that intro piece you did! :p anyway, made me wanna come see what you're up to, and this post is totally helpful!! andrea and i didn't know how/what to do for storyboards so i'm gunna pass it her way!

you rule! you're mister helpful without even being here!

indesign userTuesday, June 30, 2009

Great tutorial!! Well done

cheap2014tomsoutlet.comThursday, May 8, 2014

I have loaded your website in Several different web browsers and I must say this website loads a lot faster then most. Would you mind contacting me the name of your hosting company? My personal e-mail is:. I'll even sign up through your own affiliate link if you'd like. Thankyou

rickyfrausto.comSaturday, May 10, 2014

Hey! This post could not be written any better! Reading through this post reminds me of my previous room mate! He always kept talking about this. I will forward this article to him. Pretty sure he will have a good read. Thank you for sharing!

IeshaThursday, July 10, 2014

I put out oil fires. So what do you think? Oh, that's very taxi fine.

I beg your pardon? If passengers are going on a family holiday with brother George, now 28, mother Anna, 61,
and property developer father Richard, 62. So now taxi we're
going to be a bothersome and tough procedure for many people.

add a comment
Name
Required
Please enter your name.
Email Address
Required
Please enter your email address. Please enter a valid address.
Your Website
Comment
 
ads