codify kōd fī verb.codifydesign.com/chris/speaking/2012/webworkshop/Adobe_Visual_… · designing, and publishing original HTML pages is as easy as creating layouts for print. With

WASHINGTON, D.C. — SEPTEMBER 21, 2012

Web Workshop for Designers

Adobe Visual Web ToolsChris Converse

verb. To arrange (design) into a systematic code.codify kōd f īe

codify kōd f īeAdobe Visual Web Tools These pages accompany a live demonstration.

About Adobe MuseAdobe® Muse™ lets designers create websites without writing code. Planning, designing, and publishing original HTML pages is as easy as creating layouts for print. With master pages, access to over 400 web fonts served by Adobe Typekit®, built-in tools for interactivity, and a choice of publishing hosts, you can produce distinctive, professional websites that meet the latest web standards.

Muse: PlanUse Adobe Muse to plan and architect your website.


Muse: DesignUse the print-like design tools in Adobe Muse to design and format the content for your website.


Muse: Design — Layout, Formatting, and Compositionimport artwork prepared in Photoshop, Illustrator, or Fireworks, to prepare assets for your website. Once imported, use the Adobe Muse interface to arrange elements elements without a single line of HTML or CSS.


Muse: Design — Panelsthe panels in Adobe Muse help to transform the world of CSS into settings that more represent more traditional page layout metaphors.


Muse: Design — WidgetsWidgets provide both layout, and interactive components, to your web page. Use the widgets in Adobe Muse to add a variety of engaging user experiences to your web site.

Tabbed Panels

Presentation(marquee / carousel)

Lightbox


Muse: Design — Contact FormOne of the latest enhancements to Adobe Muse is Contact Forms.

Contact Form (simple)

Contact Form (detailed)


Muse: PreviewAdobe Muse features a built-in web browser, so you can preview your final web site design without leaving Muse.

Publish to Business Catalyst

Access via the Publish tab in the application to connect Muse directly to your Business Catalyst account.

Upload to FTP Host

Access via File menu in the application to connect Muse directly to your web server via FTP protocol.

Export as HTML

Access via the File menu in the application to have Muse write your site as HTML files to your local hard drive.

Muse: PublishYou have three publishing options within Adobe Muse:


About Adobe Edge AnimateAdobe Edge preview software is a powerful yet approachable toolset for creating motion and interactive content for the web using HTML5, CSS3, and JavaScript, enabling consistent display across browsers and devices.

Edge Animate: Interface

Proeprties (contextual) Stage Timeline Elements Library •Fonts •Symbols •AssetsTools


Edge Animate: PropertiesBecause CSS controls both layout and text styles for a web page, the properties panel shows many of the same properties between text and objects that are selected.

Properties for objects

Properties for text


Edge Animate: Creating AnimationsEdge Animate provides a simple, intuitive way to animate HTML content on your web page.

Static object

Activate Auto Keyframe, Auto Transition, and Toggle Pin

Change Object properties, Edge Animate creates the keyframes, transitions based on the duration of the Toggle Pin.


Edge Animate: Adding Web Fontsyou can use a variety of web font services with Adobe Edge Animate. These services include Adobe Typekit, Google Fonts, and Extensis WebInk.

TypeKit.com

TypeKit.com: TypeKit Editor embed code

Add font in Edge Animate

Preview of web font in

browser


Edge Animate: Responsive DesignIn the latest releases of Adobe Edge Animate, responsive design techniques have been added. These allow you to define how your design work will interact with the browser’s windows size, allowing you to maximize the available space within the browser’s viewport.

Settings in Edge Animate that compensate for the browser size.


Edge Animate: PublishingXxx

Publish for Web

Publish to Animate Deployment Package

(for use in Muse and InDesign)

Publish to iBooks and OS X

This created a widget, that can be used in Dashboard or in iBooks Author

Learn more jQuery from Chris Converse on Lynda.comGet a FREE 7-Day Trial from Chris. Find an activation link at:

http://lynda.com/trial/chrisconverse

Twitter: twitter.com/chrisconverse

Facebook: facebook.com/chrisconversedesign

LinkedIn: linkedin.com/in/chrisconverse

YouTube: youtube.com/chrisconverse

Blog: smartnocities.codifydesign.com

Events: codifydesign.com/chris/events

Creating a Responsive Web DesignGet 50% off from Chris by entering the Coupon Code: HOW

Get a link at: http://codifydesign.com/go/how

Create an Engaging Website with Twitter BootstrapGet 50% off from Chris by entering the Coupon Code: HOW


PSD-to-HTML: The Missing Link of Web DesignGet $40 off from Chris by entering the Coupon Code: CONVERSE


Find Chris online at:

Learn MoreMuse on Adobe.com — http://www.adobe.com/products/muse/

Muse on Adobe TV — http://tv.adobe.com/product/muse/

Muse on Lynda.com — http://www.lynda.com/course-tutorials/Muse-Essential-Training/89048-2.html

Edge Animate on Adobe.com — http://tv.adobe.com/product/project-edge/

http://www.adobe.com/products/muse/

http://tv.adobe.com/product/muse/

http://www.lynda.com/course-tutorials/Muse-Essential-Training/89048-2.html

http://tv.adobe.com/product/project-edge/

Documents

codify kōd fī verb.codifydesign.com/chris/speaking/2012/webworkshop/Adobe_Visual_… · designing, and publishing original HTML pages is as easy as creating layouts for print. With