The trilogy "The Ultimate Guide to Creating a Design and Converting it to HTML and CSS" describes the development of a skeleton page in Fireworks, creating designs in Photoshop and slicing a template in HTML / CSS. The first two parts exist only in the format of a web of text and pictures. The third part - screencast. It shows before slicing PSD-made template from Photoshop to JPG / GIF / PNG and coding HTML / CSS in (makintoshevskom) notebook.

1. Build a Promotional iPhone App Website Wireframe in Fireworks

Wireframing is a useful part of the website design process. It's great to separate out this planning stage and have your page positioning, spacing, layout, and other elements like text size and tone works out before you jump into Photoshop to add color, texture, images, and effects to polish off your design.

Fireworks is a great tool for creating a wireframe and while it doesn't work perfect with Photoshop, you can export over there and then build off your wireframe. We'll cover the design process of creating a wireframe for an iPhone application website in Fireworks. For those of you not familiar with this program, it will be a good jumping off point for using it to wireframe your web design projects. This is a first part of a multi-part series and will be fun!

2. Create a Promotional iPhone App Site in Photoshop

In this tutorial, we'll be continuing this series on creating an iPhone app promotional site by taking our previous Fireworks constructed wireframe and adding color, texture, images, and effects to polish off this design in Photoshop. We'll use some interesting elements, like iPhone imagery and a stylish aurora vector background illustration. We'll finish up with a professional site design ready to get coded!

3. Converting Our Design to a Nicely Coded HTML and CSS Website

This screencast will serve as the final entry in a multi-part series across the TUTS sites which demonstrates how to build a beautiful home page for a fictional business. We learned how to create the wireframe on Vectortuts+; we added color, textures, and effects on Psdtuts+; now, we'll take our completed PSD and convert it into a nicely coded HTML and CSS website.