Here are 5 free videos from From Web Design to Website — Bridge the Gap Between Graphic Design and the Web. Sometimes the most difficult part of creating a website is a step that is often overlooked: converting a graphic design into HTML/CSS files to be used on the web. In this workshop, expert web developer and trainer Candyce Mairs shows you how use a design created in Photoshop or Photoshop Elements as the basis for a website created with Dreamweaver (try a 30-day trial) .(If you purchase this product, use our exclusive discount coupon code PSSV2B for an instant 20% discount.)You’ll learn how to "slice" a graphic design for conversion, optimize and export your images for the web, and plan how you are going to organize your website. Then, as the course moves into Dreamweaver, you’ll use HTML and CSS to create web pages, add content, and format and position that content. Finally, you’ll see how to test your pages in a variety of browsers to make sure you get the best results. Web Page Design Mockup — Creating Wireframes In this video we'll walk through the process of creating wireframe boxes in our Photoshop design to use for the page wireframe. These boxes are created on new layers above the layers in our original design so we can turn them on and off as needed and store them with our original design.Slicing — Slicing with Photoshop Photoshop offers the Slice tool to assist you with slicing up graphic designs into separate images to use on a web page. In this lesson you'll learn how to create and work with slices using the Slice tool in Photoshop.Optimizing Images — Image Formats for the Web There are three main image formats available for use on the web: .gif, .jpg, and .png. This video describes the differences between them and offers some general tips for optimizing images for web pages.Getting Organized — Creating the Root Folder Before we move into the Dreamweaver and web side of the conversion process, it is a good idea to get organized. In this video you'll see how to create a root folder that contains all of the files we will need for the website.Building the Web Page — Using CSS Background ImageCSS enables you to add images to your web pages as either foreground or background images. In this video you'll learn how to use Dreamweaver to designate a background image for a portion of a web page.(posted by Jennifer Apple for www.PhotoshopSupport.com)

More...