Yesterday, Adobe release Muse (code name), and in one step has transformed how we can now build our web sites. Muse generates clean code, that follows all web standards, is easy to work with and loads in every browser or device, like a charm.
Transcript from video
Transcript from video may content typos –
I have just installed the new software Muse from Adobe. At the moment you can download a free copy of the software. As I said, I just installed it a few moments ago. If you are used to working with Dreamweaver in the past you are certainly going to find this application different. First of all it’s very clean.
I just love the really easy instructions on what I want to do here. I what to create a new site let’s see what happens.
I haven’t looked at this before so I’m just simply going though this for the first time but I do like that we’ve got page sizes, with heights (you know that’s certainly something new for web design. Prefect, I’m going to do three columns. We’ve also got gutters; it is going to be interesting to see what happens here.
I’m going to go ahead and press OK. So I have my home page setup here.
Well that’s pretty nice; we can go ahead and make a really simple sitemap. As you can see I’m just clicking around. I’m not really sure what I’m doing to be honest but I am just clicking around and seeing that Adobe Muse is creating a really nice sitemap here for me. I would assume I can just rename the pages.
All I am doing is simply double checking. I am going to make up some general pages that most basic web sites might have.
Now, I’m assuming here that this Master A is kind of probably some type of template that you can work with. Oh there we go; at the bottom of the page, we have the master template. That’s going to provide us with navigational menus on master pages. Set header and footer guides too. Oh that’s pretty cool.
Guys, I think we’re going to love this Adobe Muse software.
Adobe Muse feels very much like InDesign and this is definitely an InDesign 5 feature. You can round these corners off. Really can give them (corners) a really nice treatment unlike before where we could change the corners to round corners you can now control each corner independently. That’s something that we’ve always wanted to do for a long time.
I’m going to make a header something like so I’m going to keep it straight on one side here. I am looking for a filled color. You know what? I can probably just click here? I’ve got my color picker over here that’s kind of cool. You got some swatches here already programmed in. I’m really like that idea able to work with color in the same way you would with InDesign or Illustrator.
We can hyperlink to any page. All of those pages that we set up in the sitemap now already have preset hyperlinks to jump to. So I’m just going to actually adjust this rectangle that I just made there, and I’m going to say that go to the home page.
Held the ALT key here; and for people who don’t understand what that ALT key does in Adobe look at the cursor you see the way it has a double arrow now that’s an automated duplication tool.
As soon as I press ALT on the first square it’s going to go ahead and duplicate that for me. The other thing I’ve noticed here that it’s given me a precise management of the distance between each one of these objects. This is also in InDesign trait that we’ve really got used to and the publishing world. I just love that the ALT shortcut key is showing up here.
Now if my guess is right, we can probably go ahead and reprogram each one of these just pretty quickly. This is going to be something that people really gravitate towards.
Now everything has been distributed, the Master buttons have all been distributed to every one of the pages I’m going to double click on the home button. We’ve got our entire font styles that we are really accustomed to. We’ve got our indent to first line. Indent the whole paragraph. Most of the type setting tools that the majority of type designers are used to working with.
Adobe Muse also has export type as images. So, my entire font is now able to go out as an image.
With the preview mode on we are able to test to see if the buttons are working. As you saw from the earlier example, I didn’t do any type of programming. But, there we are, our buttons are all in place. We can go back to the design mode we can add our text fields directly in Web Site Create with Adobe Muse.
We also have other features. Menus, so we can insert a horizontal menu. Let’s go ahead and do a quick preview to see what type of mess I just made. Now look at that for a menu.
So, if I want to jump to resources, I can quickly do that. That we can just pop that menu in anywhere we like. If you notice, it’s just a simple rollover, a little buggy, but still seems pretty cool.
Again that is jumping from the previous plan that we did in the plan mode before jumping into the design mode. I am just thinking those designers are going to just really enjoyed this.
Let’s go ahead and I’m going to grab a photograph. Okay, so I have a loaded image, and this is something that I’ve seen in InDesign before. That’s pretty nice. Now I’m not sure if Adobe Muse wants me to drag or drop so I’m going to try it first. I dropped the image. Way too big, that’s not going to work. I am simply going to undo, and simply place that image where I want it to be. Well you know what, that seems pretty easy to me. You can also float that image; you can see its giving me a little bit of guidance here.
Also able to add a custom menu, not very pretty but works really well. I am able to go back to the plan area. I can duplicate the master plan. And make a new master plan. The one feature that I really do like here though is placing an image. I’m going to go ahead and do Place image which you’ll notice has the same shortcut as place in InDesign. I’m going grab this photograph of one of our goats in Adobe Muse. I’m bringing in an enormous image that I’m able to click and drag and add to my web site. You can notice here when I make the image larger than the described page size is. The web site goes ahead and extends the page height and adds additional columns in there for me and provides the space that I need to add that image directly into the composition.
I’m going to go back to the home page. I’m going to jump to a deep page from here. Now I’ve got my new layout without buttons to the side. I did use Master 1 to at least setup the header. It’s got the same columns, it’s got the footer, just modified the color. But, you can see the potential here very quickly.