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.

Resources

Over the past few semesters, I've really started to build up my library of reference books. As a rule, whenever an idea for a short creeps into my abnormally large noggin I grab these two books.

Ideas for the Animated Short

This book offers a great summary of the Animated Short process up to the point of production. If you have an idea for a story, no matter how well thought out it is, this book will help you refine it , read: simplify it. It covers character and contact improvement, do's and don'ts of camera angles, Story-boarding, intro to acting, and everything else you need to know to get started. There are more thorough books on the individual subjects, but if you can only buy, or only have the patients for one book, this should be it. They've even added a DVD with it so that you can not only view professional work, but that of other students as well. Very cool.

Prepare to Board

This is one that I've grown to like a lot more as I get more experience with the process. This

book concentrates more on the storyboard aspect, and why it's important (something that needs to be experienced before you fully buy into the idea). The title is misleading. It definitely

covers more than just story-boarding. This book provides a framework for your entire project. I've found that the more you apply this framework, the less your original idea becomes diluted in the process. I will probably be referencing this one a bit more, since I've put a higher value on a clean production process.

...An Idea

One might ask, "What would cause someone to create a blog"?

Well, for me, it was an idea. An idea for a new 3D (hence DDD) Short. The details will follow. So far I've pitched the rough storyline to USU Associate Professor Alan Hashimoto, currently the head of the 3D program at USU, and he's given his blessing to proceed with the storyboard. I plan to work on it as I have time this semester, and fully ramp up production during the winter break.

Currently, Jaimie Eddy and I are 'polishing' our last animation, 'Tako' (Japanese for Octopus). We're adjusting the assets (aka models), and should be animating soon. Progress will be posted.