Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author James Fritz shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Adobe Photoshop, InDesign, or Illustrator. The course covers the design process from start to finish, from setting up web pages and populating them with graphics and text, to creating dynamic menus and adding special features such as widgets, slideshows, animations, embedded video, social media integration, and more. James also explains how to create an alternate layout for display on mobile devices, publish and update your site, and view analytics on web traffic.
If you're used to print design, you're probably familiar with using native formats, like PSD files, in your designs. However on the web, you can't use that type of format. Luckily, Muse supports Native Photoshop PSD and Fireworks PNG files for your layouts. Upon exporting your site for the web, Muse will automatically convert your files into JPEGs or Pings. On the Home page, we're going to scroll down to this open area, and we're going to go to File > Place, and in the Assets folder, grab bird-watching.psd.
When placing a PSD file, we'll automatically get Image Import Options. The first option is to Import the Composite Image. What that means is it will import the PSD file looking exactly how it looked in Photoshop. In fact, we get a little preview, so we can see what it looks like. But if you like, you can actually choose to Import specific layers. So if I click on Import layer, I could choose to import just the Bird layer, or just the layer 1, which happens to be the background. If I bring in just the Bird, we can see it shows up very small.
So we can clip the contents to just that particular layer, And that way we just have a smaller image of just the Bird. But for now, we're going to import the entire composite. Now with my loaded cursor, I'll just click and place it at 100%. An advantage of working with PSD files is that it makes it very easy to make changes to the file. All I have to do is right-click on the image and choose Edit Original, and it will automatically jump to Photoshop. While I'm in Photoshop I can make any changes that I need. I could turn the layer on and off, make a color change.
But in this case I'm going to grab my Selection tool, hold down the Option or Alt key and I'm going to drag this bird to the second branch. Now I'm going to save the file. I'm going to go back to Muse, and we'll see that it's automatically been updated with my change. Some of the advantages of using PSD files, as opposed to JPEGs, are that it's really easy to edit, because you'll jump directly to Photoshop. Another advantage is that Photoshop files are lossless, versus lossy files of JPEGs. As you edit JPEGs over and over in Photoshop, they will be recompressing and you'll lose image data over time, as opposed to PSD files, where it's nondestructive editing.
In addition to working with Native Photoshop PSDs, we can also work with Native Fireworks Pings. We're going to go to File > Place and we're going to find samocha-logo-fw.png in our Assets folder, and we'll place this next to the bird image and I'm going to resize this to make this a little smaller. Now if I decide I want to make a change to this, if I right-click and choose Edit Original you would probably think it will go to Fireworks. Unfortunately, depending on your Operating System Settings, it may not.
In this case it went to Preview on the Mac, and on the PC it might go to a program like Paint. So to fix this, I'm going to close this application, and back in Muse, I'm going to find this Asset in the Assets panel. I'm going to right-click and choose Reveal in Finder on the Mac or Reveal in Explorer on the PC, and this will open up a window where I can find the image. Now with this image selected, I need to right-click and choose Open With, and find Fireworks. Now that I have this file open in Fireworks, I can make any necessary changes.
Because this is a native Fireworks Ping, I still have vector information here, so I'd be able to edit this easily. Just be careful because every Ping doesn't necessarily mean it's a Fireworks Ping. So in this case, I'm just going to change the color of the door. Now I'll save the file and now when I go back to Muse, I'll have to manually update this, because I didn't trigger the Edit Original directly from it. So all I have to do is go to the Assets panel, right-click and choose Update Asset.
Working with Fireworks has a few advantages, because it does allow you to use vector files, special shapes or even auto shapes. When you're finished with your layout, and you're ready to upload your web site, PSD files will automatically be converted either to JPEG or Pings upon export. However, Firework Pings will stay as Pings, but they will be re-optimized upon export. Be careful though; don't leave your file placed at 100%, because if you leave a Firework Ping placed at 100% it won't be changed upon export.
And Firework Pings are larger than normal Pings, so what I recommend you do is inside Muse, just resize it so it's not exactly at 100%, either make it be a little bit bigger or a little bit smaller, that way Muse will re-export it as a normal Ping, and your file size will be substantially smaller. Just because you can import Native Photoshop files, doesn't mean that should do your layouts inside Photoshop and then place them in the Muse. You're better off creating the graphical elements in Photoshop, and then placing those into Muse to lay everything out.
Find answers to the most frequently asked questions about Muse Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.