DDD

Photoshop to Dreamweaver (via Fireworks)

Translating your imagined website from thumbnails straight to code can be a daunting, if not impossible, task for the beginning web designer. Photoshop is a good tool to layout your site visually, but it still won’t write the code for you. I’m going to teach you how you can quickly take your Photoshop designed site and translate it into CSS (Cascading Style Sheet).

For this tutorial you will need:

Photoshop (any version)

Fireworks (CS4/5)

Dreamweaver (CS4/5)

The First step…

Layout your site design in Photoshop. I can’t tell you how to design it, but keep in mind that in order for this process to work, you will need to keep the different elements of your site on their own layers (do not flatten the image). Save your design as a .psd file.

In order to keep this tutorial brief, I’ve excluded any text blocks.

The Second step…

Open the .psd file in Adobe Fireworks. You’ll notice that the layers have transferred nicely into the program.

The Third step…

We need to “slice” this image so that the separate elements can be incorporated into our code. This used to be a painstaking process done in Photoshop, and then you would still have to insert it into the code. Fireworks will speed up this process by doing multiple slices at once. You will need to shift + select all the visual elements in your design. This step does not involve the content (text blocks), but it would be smart to select any text that may have an unusual font. This will convert that text into images that any browser can read.

Once those elements are selected, right-clicking will bring up a popup menu.

Select ‘Insert Rectangular Slice’, then select ‘Multiple’. That was easy. Before we bring this into Dreamweaver, it’s important to know that Fireworks can assign specific elements in your design to be .jpeg, .gif, etc.. Simply shift + select the elements you want to have the same characteristics, click on the ‘Optimize’ tab in the upper right corner, and specify the file type and qualities you want those images to have.

The Fourth step…

Now we’re going to export this as our css and html. Go to file>export. Name it, define the location you want them saved to, and click the ‘CSS and Images (.htm)’ under the Export options. Yes, it’s as cool as it looks.

Also remember to check the ‘Put images in Subfolder’ just to keep your website file clean. Then click ‘Export’. This will generate your html and css files in the folder you’ve specified.