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.

The Fifth step…

Now you can open up your css file in Dreamweaver, or any other editor to fine tune it. Adobe claims that Fireworks exports pretty clean code.

Word of the Day: Refreshing

When it comes to websites, where does one start? My daily life on the internet is filled with a boring, mundane, sea of white-noise websites. Heavy on function, but lacking in form. How tiring.

Enter, http://www.crowleywebb.com/

I think the most striking aspect of this site is the simplicity of it. It's not an ad driven site, unless you count the fact that it's self promoting. There is truth in the old adage that you never have a second chance at a first impression.

There are no images on their homepage (a bit of useful irony considering they're an ad agency). This allows for a 'clean canvas' effect for potential clients. There is nothing that defines them into the constrains of a certain niche in the market.

I never pictured a flash site that relied so heavily on just Typography. Each page is a one paragraph description of the purpose of the page. Most of the paragraph is written in a serif font, but this is where it gets interesting. They strategically place links within the paragraph, which are identified by contrasting a white, sans-serif font with the rest of the text.

I love the, again, simple navigation of this site. Clicking the links will take you to a new page , but remnants of the homepage exist, albeit scaled and pushed to the side. Simple enough. Successful enough.

I hearby commandeer this blog

Ok, so I haven't posted in quite a while. Nothing like a University level design class to get me out of that funk. For the next semester I will be using this blog for ALL my art and design (not just 3D). I will be required to use this for an interface design class, but will also include progress from my Digital Photography 1 class.