Become a member
Online Access to 1000+ Courses!

MasterClass! - Adobe Creative Suite: Web Design Workflow Course

2.5hrs (36 Lessons) 2009-10-20

This Course can only be played using a subscription. You can play only first 3 chapters for free. Click Here to avail a subscription
Adobe Creative Suite offers up a large number of tools and options for creating eye-popping web layouts for today's fast-paced marketplace. Learn the techniques, tools, and commands available to streamline your web workflow in Geoff Blake's MasterClass! - Adobe Creative Suite: Web Design Workflow. Begin by creating a scratch-built layout in Illustrator that's quickly ported over to Photoshop for further manipulation. Learn the best techniques for setting up the Photoshop layout for the web, including the automatic generation of HTML and CSS code. Finally, open the layout in Dreamweaver for further refinement, where you'll learn fast-paced CSS techniques for controlling your overall layout. Work files are included. To begin learning today, simply click on the movie links.

* VTC MasterClass! tutorials are available only to registered VTC Online University members.

Hi, this is Geoff Blake and welcome to MasterClass! Adobe Creative Suite Web Design Workflow. I hope you're up for a lot of fun here. Essentially what we're going to do is we're going to scratch build an Illustrator layout, bring it over into Photoshop, use a technique called image slicing inside Photoshop and then throw the entire layout over into Dreamweaver. Now, let's take a closer look at some of the topics that we'll be covering here together. So, as I say we're going to set up Illustrator for Web layout and we're going to scratch build this Illustrator Web layout and we'll refine that layout in Illustrator before we move it over into Photoshop and this process of moving the layout over into Photoshop will involve using something called Smart Objects between Illustrator and Photoshop. So if you haven't really worked too much with Smart Objects you're definitely in for a treat and as I say, inside Photoshop we'll use a technique called Image Slicing, which will essentially allow us to have some fairly tight control over the resulting layout that we get. And then what we'll do, is we'll take a look at working with Photoshop's Save for Web and Devices dialog box and we'll have a look at a lot of the different settings that we have available inside that dialog box and we'll talk about some of the different exporting techniques that we have available to us when we're headed out from Photoshop into the world of Web Design. So, once we get that layout exported we'll open it up inside Dreamweaver, we'll take a look at the results, and I definitely want to make sure that you understand how the resulting Dreamweaver layout functions and then from there what we'll do is we'll do some organizing, some housecleaning with our CSS Rules that are generated automatically from Photoshop which is awesome; we'll do some layout adjustment, for example, we'll set up some borders and we'll adjust our overall layout. We will export our CSS Rules to something called an External Style Sheet and then finally we'll finish things off by Center Aligning our entire CSS-based layout. So, I hope you're all up for it. Without further ado let's get started.  

  • Course: MasterClass! - Adobe Creative Suite: Web Design Workflow
  • Author: Geoff Blake
  • SKU: 34049
  • ISBN: 
  • Work Files: Yes
  • Captions: For Online University members only
  • Subject: Internet & Web Design
  • The first 3 chapters of courses are available to play for FREE (first chapter only for QuickStart! and MasterClass! courses). Just click on the movie link to play a lesson.
Course outline
Introduction
Course Overview (02:06)

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Getting Started in Illustrator

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Refining the Illustrator Layout

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Moving Over to Photoshop

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Exporting from Photoshop

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Managing the Dreamweaver Layout

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Image Borders (01:52)

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Conclusion
Wrap Up (01:42)

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference