Muse: Creating Websites for Desktop (and Mobile!) Using the InDesign Skills You Already Know

So Many Meetings

There's a lot happening in October and November. In addition to the regular November LAID meeting, we're having an extra October LAID meeting -- right on the heels of our just past September LAID meeting. And Adobe corporate is having a Create Now meeting in October where all the Adobe CC applications will be discussed. Here's a roadmap.

October 29, 2013 8:30 a.m. to 12:30 p.m. Create Now: An Introduction to All the Creative Cloud Applications 
with Paul Trani, Dennis Radeke and Terry White 
Regal LA Live Stadium 14 1000 W. Olympic Blvd., Los Angeles, CA 90015 
Free

October 29, 2013 7:00 p.m. Lightroom and Photoshop 
with Terry White 
Plummer Park Community Center 7377 Santa Monica Blvd., West Hollywood, CA 90046 
$10.00

October 30, 2013 6:00 to 10:00 p.m. Photoshop Tricks & Techniques Deep Dive 
with Terry White 
Author Services 7051 Hollywood Blvd., Hollywood, CA 90028 
$7.99

October 31, 2013 4:30 to 9:30 p.m. Muse: Creating Websites for Desktop (and Mobile!) Using the InDesign Skills You Already Know 
with Terry White 
Loyola Marymount University 1 LMU Dr., Los Angeles, CA 90045 
Free

November 21, 2013 7:00 to 10 p.m. The Magic of OpenType Advanced Features 
with Travis Kochel 
Glendale Community College 1500 N. Verdugo Rd., Glendale, California 
Free

Now on to details about the October 31 meeting...

Muse: Creating Websites for Desktop (and Mobile!) Using the InDesign Skills You Already Know

The legendary Terry White comes to the Los Angeles InDesign User Group to take us on a trip though Muse, the Adobe application that allows you to create and publish dynamic websites for desktop and mobile devices — all without writing code. You can design freely creating sites that meet the latest web standards using hundreds of web fonts and the familiar tools of InDesign.

One key concept in Muse is the Master layout, from which your site is built out. Master layouts are customizable with headers, footers, logos for specific sub-pages. Another key concept in Muse is that of Widgets — interactive elements like slideshows, contact forms, navigation buttons, downloads, and animations. Widgets are all touch-enabled so, for example, the slideshow lets you swipe through the images, just as a tablet user would expect. With Muse you can create interactive, data-driven CMS-style sites, while still squarely focused on great design.

Terry will pack a lot into this presentation explaining it in a way that's perfectly clear. And we aren't talking trivial information. We're talking practical information that will pull you off the sidelines and into the website game. Plus Terry’s a funny guy and thinks on his feet. This won't be a canned presentation.

Agenda

6:00 p.m. - Presentation (with 5 minute mid-presentation break)

8:00 p.m. - 30 minute break

8:30 p.m. - Audience Q&A

9:30 p.m. - Raffles

10:00 p.m. - Exit

Meeting Notes

By Alvin Takamori

It was Halloween. As night descended upon the campus of Loyola Marymount University, inside the Ahmanson Auditorium in University Hall, the Los Angeles InDesign User Group gathered for a special meeting. The evening started normally, almost routinely. That’s when the whispers started. Casually at first, then with growing concern. Word was spreading, “ Where was our guest speaker?” “Where was Terry White?” ”Was he detained by ghouls? Assaulted by zombies? Kidnapped by aliens?!” The crowd grew restless. They started chanting,”We want Terry!” Then they started throwing cookies and turning over chairs and tables and burning bonfires…well, not really.

Come on, who’s going to throw away a perfectly good cookie? Actually, the audience was satiated with yummy cookies and water and entertained by our fearless leaders, Alan Bell and DeShawn Burton, until Mr. White was able to find his way to our venue.

For those who are not familiar with him, Terry White is a world-renowned Adobe Evangelist, who advocates and teaches about the Adobe design programs. On this night, we were treated to a demonstration of Adobe Muse, the website creation program for those of us who are code challenged.

To demonstrate the potential of the program, Terry went through the process of building a website with Muse. To begin, select New Site and, according to Terry, the defaults are good so, just click OK. Similar to InDesign’s panel of Pages and Master Pages, Muse has panels showing all the pages of a website and how they are linked, with a Master Page section for creating pages with features that you want to apply to multiple pages. Just like the InDesign Master Page. The gray area indicates the background that fills in whatever sized area is visible on a viewer’s browser. The white area is a general indicator for people comfortable with print pages but, it is not necessary and can be ignored.

To put something on a page, you go to File and Place. To adjust the size of an object just grab a corner. There’s no need to hold the shift key.

For non-content related items, go to the widgets panel. There you can access features like menu buttons. The defaults are very plain but, easy to edit to change colors and fonts. Terry talked about other widgets later.

The next feature he explained was animations. Adobe has an animation program called Edge Animate. You can import an object and place it into a timeline with keyframes. This allows you to change the size and position of that object from one moment in time to another and have it follow a path in between. You can place Edge Animate files in Muse and if you want to check it or any other aspect of your website, you can Preview Page in Browser to examine how well your site is working.

An interesting aspect of Muse is that it can read PSD files. This is useful if you have an image that frequently changes. Whenever the graphic is altered, Muse automatically updates the linked image. This is a great timesaver if you happen to have multiple layouts for the iPhone, iPad and computer screens that use the PSD graphic.

Next, Terry provided some enlightening information on the use of fonts for the web. In Muse there are three categories of fonts from which you can choose. The first are the 11 web safe fonts that you see everywhere. Next is the group of fonts that exist on your computer. The problem with these fonts is that there is no guarantee that viewers on the Internet will have the same fonts on their browsers. So in order to allow others to see them, these fonts are rasterized before they go out on the Internet. This choice is okay if you have a few items of type, but not if you have a lot. The third option when selecting type for your Muse website, is to select Typekit fonts. Typekit stores a library of about 400 fonts on its servers. Whenever someone opens your website, they are automatically linked to Typekit, which lets them see any Typekit fonts that you used on your site.

As you drag and drop and place elements into your website, Muse automatically writes the HTML code. However, if you want features that Muse can’t create, you can always go to the Object Menu and select Insert HTML. You can copy code for features like videos and shopping carts and simply paste them into your website.

When a site is ready to upload to the internet, you have the option to allow Adobe to host your site or upload to an FTP host of your choosing. You can also export a site as HTML code. However, if you alter the website outside of Muse in a program like Dreamweaver, Muse will no longer be able to read and edit the site.

On the demonstration website that Terry created, he had a slideshow with changing graphics and leaves that scrolled vertically across the page. Muse has a slideshow widget, however to recreate what Terry did using images combined with text, it’s better to use the composition widget. The moving leaves were created using the Scroll Effects Panel.

Another useful widget in Muse is the Form Widget. It’s good for creating a Contact Page. If you want to add a Google Map to your website, you can go to Google Map’s Classic mode to grab the embedded code and Insert the HTML in Muse.

Muse sites are device specific. So you need to create multiple layouts specifically designed for phones, tablets or computer screens or wherever you want your website to be seen.

To see an example of the Muse website that Terry White created for the demonstration, you can go to www.thewildisles.com. Our thanks to Terry for taking time out of his hectic schedule, to show Muse to our group.

As usual, we had a few prizes to give away. Heidi Boyd, Robert Smith and Caty Kehs all won admission to a future LA Web Professional Group meeting. Elias Wondimu, who earned some good karma by arranging for the use of the auditorium at LMU, also won admission to an LA Web meeting and he won Rasterino for Illustrator from Astute Graphics. Another guy who earned some good karma was Jack Diem. He came all the way from Hawaii and brought boxes of Caramac chocolates to share with everyone. For traveling the farthest, he earned a subscription to InDesign Magazine. He also won three-month access to Stock Layouts and he won Font Agent Pro 6. See what happens when you do something nice for the group.

Other multiple winners were Trish Hall who won iDML iPad App from DTP Tools and 50 photos or images from Fotolia. Also, Patti Laurrel, who won eDocker Tablet Publisher and Collider Scribe for Illustrator from Astute Graphics.

Parking at Loyola

You can park on campus for $10 or you can park on the street for free. Ahmanson Auditorium is located in University Hall just east of the Loyola’s new main entrance on Lincoln Blvd. Park below University Hall and take the elevator upstairs. Parking on campus is actually $2 each 20 minutes with a $10 maximum, but is free after 8 p.m. There are a few free street spaces on the east side of Lincoln Blvd. south of the entrance to the school, but just a few. There is more street parking on Bluff Trail Rd. west of Lincoln Blvd. directly across from the new main entrance. You can also park on the streets in the residential neighborhood across from Loyola’s old main entrance on 80th St. and Loyola Blvd. and walk across campus to University Hall.

Farthest Attendee

The person who travels the farthest to attend the meeting will receive a one-year subscription to InDesign Magazine. This prize has a $69 value. If everyone is kinda sorta in the area, then this prize will go the person who just had or is about to have a birthday.

Raffles

SOFTWARE: one eDocker product, Your choice of: eDocker2, eDocker Tablet Publisher. Value to $995.00.

1-YEAR SUBSCRIPTION: Adobe Creative Cloud. Full access to a CC applications. Value $599.88.

3-MONTH SUBSCRIPTION: Fotolia. 50 high resolution photos or vector images per month for three months. Value $349.00. (two raffles)

3-MONTH SUBSCRIPTION: Stock Layouts. Full access to the entire Stock Layout template library for three months. Value $299.00.

1-YEAR SUBSCRIPTION: FlightCheck Version 7 for Mac from Markzware. Value $199.00.

1-YEAR SUBSCRIPTION: Q2ID for CC, CS6, CS5.5 and CS5 for Mac or PC from Markzware. Value $199.00.

SOFTWARE: Font Agent Pro 6 for Mac from Insider Software. Value $99.95.

SOFTWARE: TypeDNA. Value $49.00.

SOFTWARE: Rasterino for Illustrator CS4 to CC from Astute Graphics. Value $46.24.

SOFTWARE: iDML iPad App for iPad from DTP Tools. Value $19.00.

SOFTWARE: ColliderScribe for Illustrator CS4 to CC from Astute Graphics. Value $15.00.

Raffle Prize Winners

Nick Cuccia also won 50 images from Fotolia and Tom Luth won Type DNA. There were also two Markzware prizes. Bonnie Barrett won Flight Check 7 and Lea Frechette acquired Q2ID. Finally, Marty Safir won a prize everyone wants, a one-year subscription to the Creative Cloud, where you can go to acquire Muse and start building some websites.

Next Meeting

You know that if InDesign encounters an f followed by an i, it can automatically substitute the fi ligature. Imagine that technology taken to the extreme – as different as a rocket ship is from a scooter. That’s part of what lurks in the advanced features of OpenType and what Travis Kochel will be speaking about on Nov. 21 at the next Los Angeles InDesign User Group meeting being held at Glendale City College.

Thank You to our Sponsors

Event Sponsors

Loyola Marymount University, Marymount Institute Press, Tsehai Publishers

Raffle Sponsors

Adobe, Astute Graphics, DTP Tools, eDocker, Fotolia, InDesign Magazine, Markzware, Mogo Media, O’Reilly Press, Peachpit Press, Stock Layouts, ThePowerXChange, TypeDNA

About the Presenter

Terry White

Terry White, a an Adobe Certified Expert and Worldwide Design Evangelist, has been with Adobe Systems for over 15 years and has extensive knowledge of Adobe’s Creative Professional product line. In his current position, he leads the charge of getting customers excited and educated about Adobe Creative Cloud products and services. Terry is a key presenter at major industry shows around the world.

Terry has been active in the industry for over 25 years and is the founder and president of MacGroup-Detroit, Michigan’s largest Macintosh users group and is a columnist for Photoshop User Magazine. He is the host of the top-ranked award-winning Adobe Creative Cloud TV. He is also the author of Secrets of the Adobe Bridge and co-author of The iPhone Book, The iPhone Book 2nd Edition, The iPhone Book 3rd Edition, The iPhone Book 4th Edition, The iPhone Book 5th Edition, The iPhone Book 6th Edition and InDesign CS/CS2 Killer Tips.