Alright, I signed up for an AIGA Chicago Small Talk – Muse a Tutorial. The class was very helpful and full of some awesome insight! Also the first mention of CS6.

So to kick off this project, I am working with a set of doctors and their charity. In the past, they have self funded their entire mission trip which included the transport of medical equipment, drugs, doctors, and other necessary materials. Its a huge boulder on their backs. They are doing really great things and helping many different types of people. They reached out to have professional services rendered to make their missions easier and involve more people.

I decided to use Muse because it is new, its in beta, it was free, I trust Adobe with my life, and I see some serious potential. Muse is like if InDesign and Dreamweaver hooked up and had a kid. It is in beta and therefore only holds a few expected tools. You can see a few screenshots and I will try my hardest to keep this updated as I would really like to share my progress with others.

I’m a very bad instructor, and I have never written a tutorial prior, so I wanted to say that this is not a tutorial or a class, walk-through, hints and tricks. Its just a place where I can post my progress and hopefully spread some awesomeness. Show people this is a pretty easy tool that effectively builds simple sites!

Here goes!

Initial Issues

When I first downloaded Muse, since its in Beta, the application seemed to be missing a LOT of familiar Adobe tools, and the user interface seemed a bit mediocre. Well, after a few updates, it is slowly becoming something worth shelving next to Illustrator and InDesign. Sorry Dreamweaver, I loved you once, but … ba-bye. Muse is run using Adobe AIR, which is a framework, basically running VERY small, light weight programs as if they were a huge applications. Its used for mobile and is the future of application and program building. AIR needs to be downloaded, free, before you can download and run Muse.

At first, everything was fine, but the most recent update was somehow not recognizing that AIR was on my system. I restarted, uninstalled, reinstalled, restarted, made coffee, reinstalled, uninstalled, changed browsers, installed, trashed, reinstalled, restarted, grabbed coffee, opened up the Adobe forums! Apparently, I had to switch off Automated Graphic Switching in the Energy Saver < System Preferences . How the hell would have thought?! Well, I turned that off, and then reinstalled without an issue. I don’t know. Here are some screenshots.

Starting Anew

Right off the bat, I made a new document and I was happy, as a former coder, to see we have options familiar to a developer. Padding, margins, page widths. The only thing that I would like to see is the conversion for browser pixels. Right now, I usually use 1024 x 768 as a standard basis for all web projects, so I had to do hardcore math right off the bat!But considering this is the modern age, Adobe would have the standard size already inputted for you. So I started here. This, like everything else, can be switched with ease!

Something about the images you create in Illustrator, I guess you can’t copy and paste right from AI to MU. Even if the document is RGB. You get a black halo that does not go away.

And also, you can see at the top of the application, like Dreamweaver and Flash and InDesign, you have a Plan, Design, Preview and Publish tabs. The Plan shows you wireframes with masters and sub masters, and Design is the design view where you do NOT NEED CODE!!! You can move your objects, make text boxes, we’ll get to that later. And then Preview shows you how the site will interact. Publish requires an account with Adobe Business Catalyst, that is basically sharing, hosting for Adobe users. I don’t know the benefits.

Page and Browser Properties

Playing with how you want your body container to display on the webpage is an easy thing to code, however, just like Adobe, you can color the page and the browser with specific properties that are common to those specific page elements.

Footer and Headers with EASE

After poking around a bit, one of the best features about this program is the ease and control you have over the header and footer areas, without having to do math or code. You can just move the scrub handles up and down and the header is always at the top and the footer automatically stays at the bottom with all the footer contents! Its really sweet. It behaves as you would think it should.

The Next Session

Some familiar Adobe tools

Right away, I tried to copy and paste something from Illustrator straight into Muse, which resulted in some unwanted results. When using InDesign, apple+D allows you to place an object, and so does Muse. Again, because this is a Beta version, we do not have access to many tools and I am sure there will be a lot more tools when 1.0 is released. When you place an object onto the artboard within Muse, that object is automatically inside of a frame / box / div, whatever you want to call it, just like InDesign. You have the move, crop, resize tools that allow you too shift the object within this frame / box / div.

You can rotate this image frame, set the padding, the margins, and you will know that you are working with that frame by the element indicator, like in flash or dreamweaver, at the upper left hand corner of the program.

One of the biggest challenge for designers and developers were creating rounded corners, it was a pain in the ass to cut the little edges, export 9 different pixels, align them up with DIVs and CSS and you would be trialling and erroring all day long before you got the first corner in place. Well, with Muse you can give any frame rounded corners instantly and with a specific radius. You can instantly give any frame a transparency. Most of all the styles end up exporting as CSS. Alpha, text-width, line-height, link colors.

Overlapping Image Frames

Its easy to overlap images in InDesign or Illustrator without thinking how that printed piece is going to look across all browsers or on your mobile device. If you have any knoweldge of how DIVs work in HTML and CSS, you will know that you can almost never ever overlap divs like I am overlapping these two images. The code is going to look extremely awful and if and when you do need a developer, they will most likely slit your throats, and forget about this looking good in most browsers. Especially ones that have a hard time understanding z-index.

However, with Muse, I am finding that the code looks really good. At least right now in the simplicity of the only two elements on the page at the moment. If anyone can advise not doing this within Muse, please let me know. The point of Muse is to make print and web flawless. So I am going to treat this as if it were a print piece.

Take a look at the code:

Masters

Just like Flash and InDesign, Muse tells you what page you are editing with tabs. The master acts exactly as you would think. Anything placed on this page show up on all pages. This is where you would place your footer and header stuff, like logos, legal, navigation. Then you can create your subpages without a master. Linking pages within Muse is easy as well, once you create yourself a few pages, a drop down populates with all your pages, simple. Same goes for images and other content you are placing on your page.

Working With Styles

One thing I never did in InDesign or Illustrator was set up paragraph and character styles. I do know. Doing so within Muse is a sure way to style all of your links the same way, for consistency, make sure all your heading text are all the same style, font, color, size. They are very easy to create and I am sure I will be creating some with in the next few additions. All character and paragraph styles translate to the CSS, so this is very important to know when creating fluid web design.

Fonts

There are tricks and work-arounds when dealing with fonts that are not web safe. Web safe fonts are important because these are fonts that are installed on every single computer. These are fonts that will display on all screens and mobile devices across all browsers without any issues. Sometimes browsers allow more and more web safe fonts in each version update. Muse has a work-around, which does not involve any code, like Flash, it take the non web safe fonts and exports them as images and places them right where you placed them. I personally think this is the best work-around.

The Next Session

Applying Repeated Images

Sometimes its nice to have an element span from browser edge to browser edge. And its pretty simple, just like in all programs, there are many ways to get the same thing done. This is one way that is sure to be the perfect way, always. Place a box on your stage / artboard / page, whatever, and make sure that box is selected, then you want to click the Fill arrow down, which is a drop down menu that allows you to fill this box with a background image, and then you can select to fill that box vertically or horizontally. And just like InDesign, you can click the content box once to select the box, and then twice to select the background image. This is all worked out with CSS for the developing side.

Also, here are some menu shots, it took me a while to figure out how to fill this box.

I am noticing something unpleasant. I have run into my first issue. I previewed what I have done so far, and realized that the box I wanted to span from edge to edge does not do that at all. It is still showing the filled artboard. Which, I guess, is the gray area with design view. So now this is something I have to figure out later. Its pretty annoying.

Side note, here is a view of the browser fill menu and the assets palate. With the ability to relink edited originals.

I rely on guides, snap, and align heavily when ever I am creating collateral or any print piece. Same goes for the web, I have a set of social icons I would like to align, however, I noticed that Muse, right now, does not have the menus for align. However, the smart guides do work pretty well and they are colored very well. Its difficult to take a screenshot of the colored smart guides, but its similar to InDesign and Illustrator when you click and drag an object rulers will automatically tell you how far that object is from gutters and such. Same thing.

Another issue I am running into now, is that my footer is floating to the top of the page, which is obviously not what I want. So for now, I will not have a footer.

Remember those handles I mentioned earlier, the footer and header handles? Yeah, they are real buggy. I remember stumping the speaker because this issue happened live with the Adobe representative. And I am still unsure how to solve this without looking at the code. And so far, this is how the code looks, pretty straight forward, but if you don’t know what Muse is calling the DIVs, it can be confusing.

Some More Issues

I remember trying to span an image from edge to edge, like a background image, and I believe I figured it out. Apparently, when you place an image at the edge of the art board, the content box will outline in red, which means that images edge is at the edge of the browser, and not the edge of that body container. The content box with be outlined in blue if the frame in within the body container. I figured it out when I noticed that I had managed to make the white stripe all the way across the browser. It took recreating the frame all together.

And then we have this other issue, the footer is so so buggy! In preview mode, it looks nice, but in firefox, the footer brakes. Not good.

Not good!

The Next Session

Adding Links

CSS links are also something pretty easy to configure. If you know Flash, you are familiar with how the Link palate should work. You have four states and I have always remembered them as LoVe – HAte. Live, Visited, Hover, Active. Muse is calling the Live State, the normal state, which is the link as it appears on the page. When the link is am image, the visited state does not apply. Muse is applying a Hover Over state and a Mouse Down state, so when you hover over am image link, you have the option to make that button turn darker, or lighter, or whatever, and for the mouse down state, when you click the mouse, before unclicking, the button on the page will react differently. Then finally you have the Active (normal) state, which is how the image link will look as it appears on the page. Why they have two states the same, I am unsure.

For my project, I am not adding all those fancy thrills at this point, but will link these social buttons up to their prospective urls.

I created this illustration based on a clever saying from a good friend of mine! Miss Amy Lee Arnold is very clever in her ways. Some of the crap she says is not only funny, but holds tons of wit. Her clever phrase is “Jesus Saves … Coupons”, which is a play on the popular phrase “Jesus Saves”.

Its hard times for everyone, and everyone’s cutting corners to save a buck! Coupons are a great way to help cut some cash. Its no secret that Jesus no doubts clips his coupons, so why the hell not!

Below are a couple of my submissions for tees and totes! If you click any of the images, it will take you to my submission page, please vote!

See the actual project.

Below are some images of the clock I was working on, submitted and tried to get people to vote for:

Despite your views on this subject, art speaks, and sometimes louder than the actual event.

I created this poster for an event held in the city of Chicago.

Select designs were also made into coasters and fine prints!

Click the image to see the rest.

They are like mini portfolios. A place where you can quickly post your projects, showcase your work and gain professional, sometimes amateur, feedback. Some of these sites have limits as to how many projects you can post, which, for a free account, is fine. A designer, or a design studio usually has their own site anyway, that’s branded for them. These free mini portfolio sites are temporary, ever changing, means of critical communication between others in the industry.

Click each image to visit my pages.