Interactive Design Using Photoshop CS4 Extended

Paul Trani, Adobe Certi ed 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 PREMIUM

DESIGN STANDARD

WEB PREMIUM

WEB STANDARD

PRODUCTION PREMIUM

MASTER 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.  2. 

Design for Web Design for Mobile

2.  3.  4. 

Designing Interactive Content Designing for Interactive in Photoshop 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.  De

ned 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” Keep critical information “above the fold”
Logo Home | About | Portfolio | Contact

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 Photo? Homepage content goes here. About two paragraphs. =

600 pixels

1024pixels wide – browser scrollbar =

1000 pixels

Adobe Creative Suite 4

2006 Adobe Systems Incorporated. All Rights Reserved.

Work ow

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 eld 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 Pre ight Cross References Conditional Text Smart Text Re ow

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 { font-size: 24 pixels; font-family: Times; font-weight: bold; }

Selector – Identi es the element
     

Tags (p, h1, h2) Classes (.style1) 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 { font-size: 24 pixels; font-family: Times; font-weight: bold; }
Aquo.css

About.html

Humble Beginnings
The Aquo founders are extreme sports participants or fans. We all share the passion of extreme sports

<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 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/

Resources:
         

       

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/

Sign up to vote on this title
UsefulNot useful