27 June 2011
In working with design companies and advertising agencies around the world, we at Codify Design Studio noticed a common gap in the web design workflow—a gap between designers and developers, and the creation of the HTML and CSS necessary to bring that design to life within a browser. This gap in the workflow results in aspects of the designer's vision being unrealized in the final design represented in a web browser.
In my seminars, I ask designers to raise their hands if they would be willing to send only artwork files to their commercial printers, and let the prepress men do the layout work instead of them. No designer raises his or her hand. Just as print designers are responsible for bringing their designs to the press, web designers should be responsible to bring their designs to the browser.
To help designers transition to web design, I've written and designed Bring Your Web Design to Life: Creating Rich Media Websites with Adobe Creative Suite. This unique video series and reference guide starts form the very beginning and teaches designers step-by-step how to bring their web design to the browser. You'll start with a design comp in Photoshop, click on the slicing tool, and get to work creating the assets we need for your web layout.
You'll create new blank HTML and CSS files in Dreamweaver, and go step-by-step through the process of assembling text and graphics into our desired layout. As you work, you'll use the Dreamweaver site management features and create a fully functioning four-page website.
In addition, this video workbook series shows you how to animate an Illustrator file in Flash, edit video in Photoshop, introduce you to Ajax via Adobe's Spry framework, and use Dreamweaver to manage the whole project.
The included reference guide features graphical representations of web design concepts, time codes for referencing the video, an area to take notes, and lots of sequential screenshots—all designed to refresh your memory each time you start a new project.
Watch and read four sample chapters of this unique approach to learning HTML and CSS.
Learn how to use CSS to style your navigation using the provided template. (Running time: 14:36)
In this video, learn how to create templates with editable regions using the provided template. (Running time: 8:07)
See how to edit and design audio using the provided template. (Running time: 7:52)
See in this video how to add and style a Spry widget using the provided template. (Running time: 30:50)
If you liked what you read and saw, check out the complete video workbook series:
Tutorials and samples