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.
When you create graphics for a print layout, what applications do you end up using? I bet you probably use Photoshop and Illustrator. From these programs you can generally create a large number of formats, like PSD, TIFF, AI, EPS and even PDFs. When it comes to the Web you can continue to use Photoshop and Illustrator, and even Fireworks to create your graphics, but instead of using PSD and AI files, you will need to use JPGs, GIFs and PNGs. The reason we use these is because they're small files and download pretty quickly.
They also are all supported by the major web browsers. If you put an Illustrator file on your web page, it wouldn't display as a picture, instead you would have to download it as a file, and you could only open it if you had Illustrator on your computer. You can easily create these files from a wide variety of programs including Fireworks, Photoshop and Illustrator. Let's take a look at each of these formats in detail. JPGs are great for photographs. They're relatively small files, but they have lossy compression. What I mean by that is they get worse over time everytime you resave the file; it's kind of like photocopying a photocopy.
In order to keep your pictures looking good, you want to keep a non-lossy or a lossless version of it available for editing, such as a TIFF or a PSD file. Then if you have to make a change to the JPG, just go to the original file, make the change and then re-export or save a fresh JPG each time you have to put it on the web. GIF or sometimes pronounced this GIF are used for areas of flat color and logos. So you can see this logo over here is straight blue. So this is going to be a much smaller and crisper logo as a GIF as opposed to a JPG.
They also support basic animation and have limited transparency support. Although the transparency support isn't ideal, since it's only one bit transparency. However when it comes to transparency, you should consider using PNGs. PNGs support 256 levels of transparency versus one for GIFs. So you can see the image on the right has a nice soft Drop Shadow, and it wouldn't look nearly as good as a GIF. PNGs on the other hand are larger files, but they are lossless which means you can re-edit them and they are not going to get worse or re-encode every time you make a change.
Another advantage of using PNG files is you can roundtrip edit with Fireworks. So if you create a graphic in Fireworks and save it as a Fireworks PNG and place it in Muse, if you edit the file in Fireworks it will update again inside Muse. And finally, we have PSD files. Now I know earlier I said that you can't use PSD files on the web, but with Muse we can take a little shortcut. When you put a PSD file in your Muse layout it's linked to the PSD file, but when you upload your web site, Muse will automatically translate the PSD into the appropriate format.
So there's no worrying about having to put a PSD online; you can continue to use them inside Muse. Now some of their advantages are that you can work with them as buttons, you can import all of the various layers, and it supports roundtrip editing with Photoshop. Web sites can display content other than these image formats. Multimedia like Flash, videos, audio and interactive elements are all supported by modern web browsers. In later chapters we'll learn how to work with multimedia content.
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.