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.

dube vaporizer penThursday, July 31, 2014

This allows you to fluctuate the amount of vapors then hee mioght suppose
of thinking that it is the responsibility of parents, teachers, portable
vaporizers review and other belongings, and no.

Involve in different activities: It is always after to the user
when he inhales on the device.

masshy.fastwave.gr.jpWednesday, August 20, 2014

May I simply say what a comfort to find somebody that really knows
what they're discussing on the web. You actually realize how to bring an issue to light and make it
important. More people should look at this and understand
this side of your story. It's surprising you're not more popular because
you definitely have the gift.

tile and grout steam cleaning machines Las VeSaturday, August 23, 2014

There are many types of tiles available nowadays.
The method of tile cleaning will depend more on the tile type.
However there are couple of things to be followed to add
the sheen and glow of the tiles.

Do the regular floor cleaning
Clean the spills as soon as they occur

It is very crucial to clean dirt and water too as soon as they are split to prevent the stains.
Place a doormat which helps in reduction of mud or dirt entering through footsteps.


There are basically following tile floors where in one will use the tile and
grout cleaning process, types of tiles are as follow -

Ceramic
Porcelain
Stone

Porcelain Tile cleaning

Porcelain tiles maintenance is not difficult if
the surface is cleaned regularly. The surface can be vacuum cleaned every day or just sweep it.

The wet mopping is required once in a week. Use of mild
floor cleaners will do for the mopping. One can make it
at home by mixing vinegar and water.

Ceramic Tile Cleaning

The rule is followed here as well; remove the dirt as soon as possible.
Vacuum clean the tiles every day or a simple
broom can be used. Plain water or the special ceramic tile cleaners can be used for the wet mopping.


Stone Tile Cleaning

One need to be careful while cleaning the tiles made of stones as they are natural
minerals. Never use harsh floor cleaners. Sweep or vacuum clean. After using any floor cleaner
use a dry mop to soak any type of liquid residue.

Grout Cleaning

Along with the tile cleaning it is very important to regularly
clean the grout, i.e. the lines between the tiles. Hence tile and grout cleaning goes simultaneously.
Grout is porous in nature and attracts dirt, grease etc.
The surface looks shabby if the grout is unclean. It can also be
a cause of mildew or mould in the damp areas like bathrooms.
It is best to have a seal (colour or clear) on the grout which
will not only protect the surface but also acts as an anti-fungal
agent.

Many a times it gets difficult to maintain the floor due to hectic working
schedules. Hence we come in picture and provide the tile and
grout cleaning services to our clients at a very affordable price.
Moreover the price depends on the type of the tiles, number of tiles and size of the tiles to
be cleaned.

Following steps are followed for the tile and grout cleaning after you contact us-

Pre inspection of the tiles and floor.
Shifting of the furniture, if any, from that space.

Dry Sweeping of the surface
Application of the suitable cleaning solution.
Cleaning the surface with a soft pad.
High pressure cleaning
Mopping and drying the surface.

We have our experts who carry special tools to do the tile and grout
cleaning; the grout sealing is also done if ordered.

http://www.millcreekfamilypractice.org/wp-conMonday, October 20, 2014

at the tiny fraction in the Arie Stavchansky | Blog | Web application storyboards with Adobe Photoshop, InDesign and Illustrator price tag out of respectable on the internet traders. Inside conjunction together with the introduction from the Gucci Tradition group, the style household completely new Paris retailer have been redesigned for you to indicate some sort of famous, http://www.millcreekfamilypractice.org/wp-content/zozo.asp high-class any.

air max 90 infrared vintage ogSunday, October 26, 2014

Great blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog shine. Please let me know where you got your design. Many thanks
air max 90 infrared vintage og
[url=http://www.teatimeinvirginia.com/?keyword=air-max-90-infrared-vintage-og&id=430]air max 90 infrared vintage og[/url]

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