Los Angeles InDesign User Group

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

Thursday, October 31, 2013

Loyola Marymount University, Ahmanson Auditorium, 1 LMU Dr., Los Angeles, California 90045

See the Photos

Original Event Page

 

 

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.

 

 

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.

 

 

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

 

 

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.

 

 

Copyright © 2016 Los Angeles InDesign User Group. All rights reserved.