Interactive Design Using

Photoshop CS4 Extended

Paul Trani, Adobe Certified Instructor

paul@paultrani.com www.DesignUpdate.com
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
 Attending

  Creative Directors
  Art Directors
  Designers
  Production Designers
 Challenges for Creatives

  Do more…faster
  Deploy engaging
experiences everywhere
 Print

Mobile Web

Video
 DESIGN DESIGN WEB WEB PRODUCTION MASTER
PREMIUM STANDARD PREMIUM STANDARD PREMIUM COLLECTION

InDesign CS4 ● ● ●

Photoshop CS4 Extended ● ● ● ●

Photoshop CS4 ●

Illustrator CS4 ● ● ● ● ●

Acrobat 9 Pro ● ● ● ●

Dreamweaver CS4 ● ● ● ●

Flash CS4 Professional ● ● ● ● ●

Fireworks CS4 ● ● ● ●

Contribute CS4 ● ● ●

After Effects CS4 ● ●

OnLocation CS4 ● ●

Premiere Pro CS4 ● ●

Soundbooth CS4 ● ● ●

Encore CS4 ● ●

ADDITIONAL TOOLS* IN CREATIVE SUITE 4

Bridge CS4 ● ● ● ● ● ●

Device Central CS4 ● ● ● ● ● ●

Dynamic Link ● ●

Media Player ● ● ● ● ● ●

Version Cue CS4 ● ● ● ● ●

Agenda

1.  Interactive Design Overview

1.  Design for Web
2.  Design for Mobile
2.  Designing Interactive Content
3.  Designing for Interactive in Photoshop
4.  Bringing the Design to Life
 Designing for Web

2006 Adobe Systems Incorporated. All Rights Reserved.

Interactive Design Overview

What is a Web Site?

  A collection of related web pages, linked together and viewable on the
Internet through a browser
Interactive Design Overview

What is a Web Page?

  A document written in plain text interspersed with formatting instructions
of Hypertext Markup Language (HTML, XHTML)
Interactive Design Overview

Publishing
  Once a website is created it is published (uploaded) to a computer called a
web server

web server
Interactive Design Overview

Accessing a Website
  The website is then accessed by a web address made through a web browser
on the users device or through a search engine

http:///www.MySite.com

web server

user’s computer
 Designing Interactive Content

2006 Adobe Systems Incorporated. All Rights Reserved.

Designing Interactive Content

Business Objectives
1.  Defined Goal (Promote, Sell, Inform)
2.  Gives a Good Impression

3.  Easy to Update

Home page About page Portfolio page Contact page

Designing Interactive Content

User’s Objectives
1.  Site is Available/Viewable
2.  Delivers Information Requested

3.  Easy to Use

Home page About page Portfolio page Contact page

Designing Interactive Content

Design Considerations
  Heirarchy of information is perfectly clear
  Clearly differentiate hyperlinks/buttons from content
  Indicate what clicking a link will do
  Keep body copy “bite sized”
Logo
  Keep critical information
Home | About | Portfolio | Contact
“above the fold”

Photo? Homepage content

goes here. About
two paragraphs.
Designing Interactive Content

Navigation
  Easy to learn and consistent

  Provide feedback (roll over)

  Minimal clicks to arrive at the next destination

  Group navigation into logical units

Logo

Home | About | Portfolio | Contact

Photo? Homepage content

goes here. About
two paragraphs.
Designing Interactive Content

  Technical Considerations
  1024 x 768 Resolution (54%) 800x600 Resolution (15%)
  Browser compatibility - IE, Firefox, Safari (Browser Stats)
  Pages download quickly (<150k , US Broadband 80%)
  Optimized for search engines (Google Search Engine FAQ)
  Flash Player (Version 10 94%)
  Accessible to users with disabilities? (508 Compliant)
Designing Interactive Content

Logo

Home | About | Portfolio | Contact

768 pixels high

– browser buttons
Homepage content
Photo? goes here. About two = 600 pixels
paragraphs.

1024pixels wide – browser scrollbar = 1000 pixels

 Adobe Creative Suite 4

2006 Adobe Systems Incorporated. All Rights Reserved.

Workflow

Design Develop Deliver

 Adobe Photoshop CS4 Extended

  Web Design Creation/Optimization

  Video Editing and Output
  Comprehensive 3D Painting and Compositing
  Animate 3D Objects
  Content-Aware Scaling
  Adjustments Panel
  Masks Panel
  Canvas Rotation
  Improved AutoAlign and AutoBlend
  Improved Dodge, Burn and Sponge tools
Adobe Bridge CS4

  Flash or HTML-based web gallery creation and uploading

  Improved performance
  Path-bar navigation and workspace selection
  Camera Import controls
  Search field
  List View
  Review Mode
  PDF-based contact sheet creation
 Adobe InDesign CS4

  Interactive Document Design with SWF Export

  Export to Adobe Flash CS4 Professional
  Smart Guides and Smart Spacing
  Spread Rotation
  Customizable Links Panel
  Enhanced Table Editing
  Live Preflight
  Cross References
  Conditional Text
  Smart Text Reflow
 Adobe Flash CS4 Professional

  Object-based animation
  Motion editor
  Motion Presets
  Metadata Support
  XFL Import
  Inverse Kinematics with the Bone Tool
  Authoring for Adobe AIR
  3D Transformations
  Procedural Modeling with the Deco Tool
  Adobe Media Encoder with H.264 Support
Adobe Dreamweaver CS4

  Photoshop Smart Objects

  Related Files and Code Navigator
  Live View
  CSS Best Practices
  Code Hinting
  InContext Editing
  HTML Datasets
  Subversion Integration
  AIR Authoring Support
 Cascading Style Sheets

  Cascading Style Sheets (CSS) is a collection of formatting rules that control

the appearance of content in a web page and separates content from
presentation.

  A CSS rule has 2 main parts: h1 {

  Selector – Identifies the element font-size: 24 pixels;
  Tags (p, h1, h2)
font-family: Times;
  Classes (.style1)
font-weight: bold;
  IDs (custom tags)
}
  Properties
 Cascading Style Sheets

  The style resides in a place separate from the actual text it’s formatting—
in the head portion of an HTML document or an external style sheet
  Easier to maintain
  Cleaner HTML code

<h1>Humble Beginnings</h1>
h1 { About.html Humble Beginnings
font-size: 24 pixels; The Aquo founders are extreme sports participants or fans.
We all share the passion of extreme sports
Aquo.css
font-family: Times;
font-weight: bold;
} <h1>Products</h1>

Products
Products.html We will only come up with new drinks when we feel the
need to, not just to compete with our competition or to gain
press.
 Video Fundamentals

  For broadcast or DVD

  NTSC DV size is 720x480, non-square pixels (0.9)
  NTSC DV widescreen size is 720x486, non-square pixels (1.2)
  NTSC DV square pixel size is 720x540
  Frame rate is 29.97
  Use the New Document presets available in Photoshop and Illustrator
  Pixel Aspect Ratio Correction option in Photoshop
  For online
  Medium size 320x240 at 20 frames per second
  YouTube size is 480x360 at 20 frames per second
Lets begin…
Community and Resources

Community:
  Share My Screen/ConnectNow: Free real-time online collaboration from CS4
applications for up to 3 people
  Adobe Community Help: Community-based learning
Resources:
  DesignUpdate.com – Paul Trani’s Blog
  AdobeTV.com over 200 CS4 tutorials will be available when CS4 ships
  Video Tutorial Workshop http://www.adobe.com/designcenter/video_workshop/
  Creative Suite Family Page: http://www.adobe.com/products/creativesuite/
  The Experience: http://www.adobe.com/go/creativelicense/
  iPhone Dev Center: http://developer.apple.com/iphone/
  Gallery: http://www.mobileawesomeness.com/
  Business and Marketing Challenges for Mobile
http://communities-dominate.blogs.com/brands/
  How to design a mobile website:
http://designreviver.com/tips/how-to-designing-a-mobile-website/