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

TkHMwB It's spooky how clever some ppl are. TWednesday, April 20, 2011

TkHMwB It's spooky how clever some ppl are. Thnaks!

IJWTS wow! Why can't I think of tnighs like tSunday, May 1, 2011

IJWTS wow! Why can't I think of tnighs like that?

GDesignwork - Web Site DesignFriday, February 10, 2012

Great tutorials! Very inspiring, Thanks!

Link exchange is nothing else but it is just Wednesday, February 15, 2012

Great article! This is the type of information that are supposed to be shared around the web. Shame on Google for now not positioning this put up higher! Come on over and consult with my website . Thank you =)

samsung galaxy s3Friday, April 26, 2013

Samsung Galaxy S3 is the latest version of Android, a whopping 4.

These are community cards and they are dealt to the center of the table.
Speedy shutter response times and also rush shot modes even help produce
pro-quality pictures.

Pregnancy Miracle Free DownloadFriday, August 2, 2013

It's a genuine cure for infertility concerns.

chainsawThursday, October 17, 2013

However, for any kind of emergency, you can
have first aid kit ready at home. The saw teeth will need
sharpening on a regular basis. This sometimes happens when the cutting edges on the chain are uneven.

north face cyber mondayWednesday, November 27, 2013

For anyone who is a novice you may need to make use of a tee for all clubs in your follow sessions until you feel self-confident you are able to make superior get in touch with consistently. Keep in mind these instructions are guidelines and you will have to have to take into consideration your individual disability. Think of attempting to sweep the grass under the ball..
north face cyber monday http://shop4airlinetickets.com/north-face-black-friday/

????????????Wednesday, November 27, 2013

??? ????? ?????????!http://kuuya-kuzu.com/nikeairmax.html

??????? ????? ?????Thursday, November 28, 2013

???????? ??? ????????! http://bottegavenetashop.houston48hfp.com/

panic away free downloadThursday, November 28, 2013

It tells you what to do if you grow to be anxious in social circumstances.

petuerey onlineMonday, December 16, 2013

Mezcla Abrigo largo de plumas y traje partido, no sólo alargan la visión, con el oscuro también es más delgada. Si el miedo a cuerpo llevaba parecía demasiado oscuro, puede usar medias con zapatos retro impresos, mostrando si implícita, si obvia femenino.

louis vuitton replica handbags cheapSaturday, January 4, 2014

999 We're undecided if they're good enough to halt a pedicab driver, but we've not still positioned a great deal of our self worth of their palms.. Via the internet TutorialsLet's encounter it, plenty of of us please don't have the time or dough make use of hair dressers, louis vuitton philippines greenbelt makeup artists and stylists on even an occasional foundation.

cheap replica louis vuitton beltsSaturday, January 4, 2014

999 We are undecided when they are plenty of to halt a pedicab driver, but we haven't however positioned a lot of our self esteem within their palms.. Using the web TutorialsLet's encounter it, plenty of of us really don't provide the time or dough to work with hair dressers, louis vuitton garment bag luggage make-up artists and stylists on even an occasional basis.

ugg classic short vs ultra shortSaturday, January 4, 2014

President Wilson could be regarded as certainly one of the most innovative leaders in American background. Woodrow Wilson was the President on the United states of america from 1913 till 1921, creating him the President for the duration of and immediately after WWI. The legacy of Wilson exists in the well-known ideology of Wilsonianism which categorizes Wilson's beliefs when it comes to overseas and household procedures.
[url=http://www.laurelgroveschool.com/boots/ugg-classic-short-vs-ultra-short.html]ugg classic short vs ultra short[/url]

burberry bags for cheapSaturday, January 4, 2014

999 We're not sure if they're adequate to prevent a pedicab driver, but we have not but placed much of our self-worth of their fingers.. On-line TutorialsLet's confront it, a great many of us don't provide the time or cash to make use of hair dressers, louis vuitton 09 collection make-up artists and stylists on even an occasional basis.
burberry bags for cheap
[url=http://greeninmedusa.com/cheap-burberry-bags-c-2.html]burberry bags for cheap[/url]

speedy 25 louis vuittonSaturday, January 4, 2014

louis vuitton bags outlet
speedy 25 louis vuitton

canada goose hybridge vestSaturday, January 4, 2014

expedition parka 4565m buy goose online canada goose icicle parkajacketcoat com genuine canada goose 4565mr canada goose kensington parka berry winter parka online canada canada goose jacket used canada goose kids price canada goose retailers toronto canada goose concepts canada goose kensington parka navy canadagoose vancouver canada goose ladies mystique parka ladies canada goose jackets chateau canada goose buy canada goose cheap canada goose jacket online store cheap canada goose online best canada goose jacket sale canada goose jackets goose canada jackets canada goose jacket men down pillows canada warehouse sale canada goose montebello goose jacket buy bomber jacket toronto holt renfrew canada gose canada goose dawson parka review langford parka caribou canada goose clearance canada goose beanie canada goose yukon bomber parajumper vs canada goose canadian goose jackets outlet canadian goose jacket sale orange parka coat cheap canada goose vest goose coat canada goose toronto store outlet?.
canada goose hybridge vest

knightsbridge uggs for cheap outlet onlineSaturday, January 4, 2014

999 We're unsure if they are sufficient to prevent a pedicab driver, but we have not still positioned a great deal of our self worth of their palms.. On line TutorialsLet's experience it, a large amount of of us please don't provide the time or moolah to try hair dressers, how much louis vuitton bag make-up artists and stylists on even an occasional foundation.

graphicsFriday, March 14, 2014

Hi, i think that i saw you visited my website
thus i came to _return the favor_.I am trying to find things to enhance
my web site!I suppose its ok to use a few of your ideas!!

Ray Ban Outlet Online 2014Saturday, April 12, 2014

Heya! I understand this is kind of off-topic however I needed to ask. Does building a well-established website such as yours require a lot of work? I am brand new to blogging however I do write in my journal daily. I'd like to start a blog so I can share my own experience and views online. Please let me know if you have any suggestions or tips for brand new aspiring blog owners. Appreciate it!

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