Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Mordy Golding demonstrates how to be more productive, efficient, and creative by taking advantage of Adobe Illustrator to create pixel-perfect web graphics and interactive Flash content. Illustrator CS4 for the Web investigates the pros and cons of pixel- and vector-based web graphics, demonstrates efficient workflows, and explores the creative options available in Illustrator. Mordy also covers design techniques, such as creating typography that works well on screen, adding reflections, and making Flash animations. He discusses new Illustrator CS4 features, including using multiple artboards, bringing art into Dreamweaver, and utilizing Flash Catalyst. Exercise files accompany the course.
One of the most popular development tools for working with websites is Adobe Dreamweaver. A favorite of web developers, Dreamweaver allows you to manage entire websites. Not just one page or one graphic, but an entire website. However, you may still need Illustrator to deliver some of those graphics. After all Dreamweaver is a Layout tool. It's doesn't allow you to create the graphics. Now what just still happens to be that Photoshop and Dreamweaver enjoy a certain amount of synergy where you can create a smart object inside of Dreamweaver and then easily update that graphic back inside of Photoshop when needed.
Unfortunately that synergy does not exist between Dreamweaver and Illustrator. However, you can of course take anything from Illustrator and bring that into Photoshop as we have discussed before. And in addition when it comes to actually to laying out a web page you can actually create an HTML page that has some CSS inside of it to help you get started with Dreamweaver. So let's explore what that looks like. In this document, I will actually turn off all these layers here and I will just turn on the Dimensions and the Slices layer. Now I will go to the File menu and I will choose Save for Web & Devices. I don't really care what each of these particular slices are being exported as.
Those are just going to be placeholders for whatever I am going to put into them when I bring them into Dreamweaver. But by defining a grid as designer I can lay things out inside of Illustrator and then instead of starting from scratch inside of Dreamweaver, I can have a great starting point based on what I have already inside of Illustrator. So I will choose Save and I will throw this on my Desktop here. I want to create both HTML and Images and I also want to make sure that the slices I choose is All Slices. Finally, I am going to come here to where it says Settings and I am going to choose Other. I want to create an XHTML file and I am going to choose over here where it says Slices and rather than generate a table I am going to Generate CSS.
Now I will click OK and then I will choose Save. Now let's trump over to Dreamweaver. I will choose to open up that file. I will go to my Desktop here and choose surf_website_final.html and open up right up here inside of Dreamweaver. You can see that all those areas came in, but more importantly if I go to Code view right now, you will see that because I exported this as CSS, all the areas got defined as divs. So as you can see I created a modern CSS-based layout using Illustrator and then quickly brought it into Dreamweaver to get started with my web layout.
There are currently no FAQs about Illustrator CS4 for the Web.
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.