DesignWell

Over fifty-percent of the DVDs I burn in DVD Studio Pro 4 (DSP) fail and become coasters, and every fifth or sixth DVD I burn forces me to restart my Dual G5 Mac Pro! The problem is that I have to Force Quit DVD Studio Pro when it is burns or formats the DVD. I wait about five minutes after the status bar has stopped moving. I then force quit DVD Studio Pro with the DVD unable to eject without restarting OS-X. There are ways of ejecting the DVD through holes with paper clips, but I might as well restart my computer than do that. I hate it when Apple thinks they know best by not allowing for an eject button that is on the front of the computer and not software supported via the keyboard. I have the same drive (Pioneer DVR-109) on my PC at home, and do not have this many problems!

To burn video DVDs, I’ve switched to the open source burning software, Burn. I’m sure many other programs will work that support the video DVD file system.

Since I have switched, I have a 20% coaster rate, and this program verifies the data, too (which as far as I know DSP doesn’t do). Most importantly, I have not had to restart my computer yet! I must mention that I am burning at 4x. I going to guess that the DSP default (and only setting) is to burn at the maximum rate of the drive which is 8X.

As a side note, we buy hub-printable white Taiyo-Yuden 8x DVD-Rs from AllMediaOutlet for all our DVD burning. We also buy silver non-hub-printable Ritek CD-Rs for out CD burning. As far as I know, no one makes hub-printable silver CD-R or DVDs.

Are there better consumer DVD-Rs out there?

I have used a few project management software packages ArtLogik, AceProject, and dotProject (open source) at my current job and a former job. At my current job, online project management did not last long. Since we are small company of under 10 employees that do not pass projects back and forth often, there is not a great need for the overhead of project management software.

Personal Timesheet

We use job folders that an archive copy of the project on DVD and time sheets go into. Before tallying the final time sheet that is printed from Excel, I use a personal time sheet that I write on. It is a seven column time sheet with the date, start and end times, a short description, the hours of the task, the comp number (only used for print projects), and a column to check if I have transferred the time to the final time sheet that goes into the job folder.

Final Time Sheet

The final time sheet that is archived with the digital copy of the project files is an Excel template. It has a place for the job number client and project in the heading. The way these three spreadsheet cells are set up that increases productivity is that one can complete the information for all three cells, copy them to the clipboard, and then paste them into the file name of the Excel file. Thus the filename will be .xls and Spotlighting (from OS-X) the correct files in the future will be easy.

After the heading, is a list of the tasks with their date, description and total time. Below the task hours that are billed are additional fees that can be charged such comp approvals, ftp approvals, pdf approvals, and DVD approvals. This is all where material costs would be listed. These section has five columns: the date, a description of there service, who the material was sent to, how it was sent, and who said to send it. This level of description allows for a paper trail of who did what and when.

I hope that these thoughts and files help you in your project management. How do you do project management in your business? Do you use a paper trail? Track it all online?

I have not tested Dreamweaver CS3, but prior versions of the program do a mediocre job of displaying CSS correctly. For instance, div tags do not always display correctly without inline style tags–which we all know is such a coding faux pas. This has led to a departure from using a WYSIWYG editor and to using the browser to construct webpages. Below are the best aids I have found in debugging and editing webpages in the browser Mozilla FireFox.

Suggested extensions for making coding easier

Web Developer

The Web Developer FireFox extension was the first FireFox extension I ever installed. It was mid-2004, and I was frustrated with Cascading Style Sheets. I was using CSS, not for the first time, but I was using CSS for margins and padding and widths– all those things we used spacer gifs and tables for back in the web?¢‚Ǩ‚Ñ¢s infancy–for the first time. The sole reason that I would have even paid for this extension was the Outline tab and it?¢‚Ǩ‚Ñ¢s ?¢‚Ǩ?ìOutline Block Level Elements.?¢‚Ǩ¬ù The fact that I could actually know where one element ended and another begin was a godsend. There are many more uses for the plug-in. Almost too many to name here. The highlights that I use (or used to use) regularly are:

• Outline and highlight block level elements, deprecated elements, frames, links, and other tag and CSS elements
• Disable images
• View the CSS for a particular element by clicking on that element
• Disable cache and cookies
• Display various page and screen sizes for testing (what does this site look like on an 800×600?)
• Disable background images (ever browsed though MySpace, which reminds GeoCities circa 1997)
• View the CSS for a web page while browsing
• Edit the CSS style sheet of web page without reloading
• Validate HTML, CSS, feeds, and links

Firebug

I have only mentioned Web Developer first because it was my gateway drug of FireFox extensions. I use Firebug more often now that CSS is even more prevalent then it was in 2004, thus simplifying the HTML and making hand-coding HTML much easier. Firebug focuses solely on the content of a page and doesn?¢‚Ǩ‚Ñ¢t have the browser related features such as disabling the cache or resizing the browser window. It shines when you want to tweak HTML, CSS and JavaScript contained in a page, all on the fly.

The way Firebug works is by clicking the ?¢‚Ǩ?ìInspect?¢‚Ǩ¬ù button and selecting an element on the page. The HTML and CSS associated with that element is then displayed. The inheritance and overriding of CSS attributes can be seen (hence the cascading in cascading style sheets) and any CSS attributes can be edited or disabled.

Firebug helped make my CSS leaner. Before I discovered it, I often ignored the inheritance features of CSS and repeated the same attributes numerous times, since inheritance is an abstraction that is hard to remember without either modeling (which Firebug does) or precise documentation. Firebug shows this inheritance, thus making the relationships between.

Firebug will measure and illustrate all the offsets, margins, padding, and sizes for you–similar to what you would have in a WYSIWYG editor. Since offsets, margins, and padding can often overlap, there is a ?¢‚Ǩ?ìLayout?¢‚Ǩ¬ù tab that allow editing of these qualities and shows their relationships.

Link Checker

If you?¢‚Ǩ‚Ñ¢ve ever clicked through a large site in order to test all the hyperlinks, you?¢‚Ǩ‚Ñ¢ll find this simple add-on convenient and productive. It will highlight valid and invalid links of a page. Once Link Checker is installed, you?¢‚Ǩ‚Ñ¢ll have to add the toolbar button yourself.

Measure It

You could use the guides in Firebug, but most times, one just wants to quickly estimate the correct margin or padding. This add-on gives the height and width in pixels of a rectangle that can be drawn atop the webpage.

ColorZilla

ColorZilla adds an eyedropper tool to the status bar that allows color sampling and copies RGB values (in five different ways) to the clipboard. This means you don?¢‚Ǩ‚Ñ¢t have to go back to Illustrator or PhotoShop to grab RGB values for your CSS.

A note about Internet Explorer

Unfortunately, the majority of web users browse with Microsoft Internet Explorer and thus testing a site with IE is necessary. At work, I create my websites on an Apple Macintosh and have an old Dell laptop with IE 6 installed to test websites with Internet Explorer. A tool that I have not used extensively, but does help sometimes in debugging under IE is Internet Explorer Developer Toolbar.

With the prevalence of DHTML, much less AJAX, I have begun to use separate Cascading Style Sheets for development and publishing. Since styles override each other, the easiest way to accomplish this is to add a second style sheet link after the publishing CSS link and comment it out when one wants to test the page.

?¢‚Ǩ?ìdev.css?¢‚Ǩ¬ù contains ?¢‚Ǩ?ìdisplay: block;?¢‚Ǩ¬ù within all classes that in the publishing CSS contain ?¢‚Ǩ?ìdisplay: none;
?¢‚Ǩ¬ù much like that below:

.profile_box { display: none;} (index.css)

.profile_box { display: block; } (dev.css)

PNGs from Adobe Photoshop: Record an action in Photoshop

Everyone agrees that color (hue, saturation, and brightness) inside Flash is inconsistent with any color space in Adobe Photoshop and Adobe Illustrator. The closest I can get to the correct color in Flash involves saving all my images into PNG format. This makes sense, because Macromedia Fireworks (Flash’s image editing sister) uses PNGs as it’s native format.

The annoying part of saving all your images that will end up in flash as PNGs is that it’s an extra step. An extra step that is made worse by Adobe ignoring the last saved file format (”No, Adobe, we don’t want to always save files as PSDs!”), and defaulting back to PSD everytime ones tries to save an image. To aid in that extra step, I recommend recording a action (or macro) in Photoshop to save an image as a PNG. Photoshop doesn’t support layered PNGs (you’ll have to import your PSDs into Fireworks and use the “Distribute to Layers” Command for that), but for single layer PNGs with transparency a macro is the way to go.

Directions for creating this Photoshop Action:

1. Open a new document
2. Locate your Action palette in Photoshop
3. Press “Create New Action”
4. Assign a function key (I recommend F12, since this is similar to publishing in Flash)
5. Name the action “Save as PNG”
6. Click “Record”
7. Click File>>Save As…
8. Select PNG from the File Format drop down menu
9. Choose a standard location for your PNGs (I recommend “Desktop/PNG/”)
10. Click “Save”
11. Select “Interlace: None”
12. Click “Stop Recording” on the Action palette

Now you can save your current Photoshop document as a ready for flash PNG with one keystroke!

Place frame ActionScript on is own layer

Ever get frustated when you come back to a project after a few months and have to change some ActionsScript and you can’t find it? I recommend creating separate layers for your ActionScript such as the following:

• functions_as: for function calls
• button_as: for onRollOuts, onRollOvers, and onReleleases
• stop_as: for stop() and gotoAndPlays
• music_as: for cueing music
• sound_AS: for cueing sound effects

Hide mouseovers with another mouseover

If I have an area that I do not want to be an active mouseover area for a onRollOut, onRollOver, and/or onRelelease, I use a 0% Alpha shape and place it on a layer above. I then apply the following ActionScript to disable, the hand cursor for that area:

movieclip_MO.onRollOver = function() {
this.useHandCursor=false;
}

Now visitors, don’t know anything is there!

Creating a mouseover of a different shape than the image

If your image is square, but you need an irregular mouseover shape, select the area you want for the mouseover in Photoshop, make it a path, and then copy that path via the Clipboard into Illustrator. Then from Illustrstator, you can copy it via the Clipboard into Flash. Now you have a shape in Flash without any drawing in the Flash UI. I usually give my mouseover-only movieclips the extension “_MO”.

–Stephen M. James
www.smjdesign.com

So you have a business card built in Illustrator and you want to center the text on the card. If you select the 3.5″ x 2″ box and the text box and click “Vertical Align Center” on the Align palette, Illustrator will move each object halfway towards the other object!

If you want only to move the text and not the 3.5″ x 2″ box, you will need to make the 3.5″ x 2″ box the “key object.” To do this, select both objects, then click the 3.5″ x 2″ box (not a Shift+click though). This will align all the other objects to the “key object” you just clicked.

–Stephen M. James
www.smjdesign.com

Most users of Final Cut Pro for any substantial length of time will likely know all of the following, but if you are just beginning the following is indispensable, especially if you are editing in the presence of your boss or your client that is waiting to tell you directions.

There are many more shortcuts than these, but if you don?¢‚Ǩ‚Ñ¢t know these, you are not being as productive as you could be. I very, very much wish someone had forced me to learn the ?¢‚Ǩ?ìJKL?¢‚Ǩ¬ù+ ?¢‚Ǩ?ìIO?¢‚Ǩ¬ù + ?¢‚Ǩ?ìF9?¢‚Ǩ¬ù workflow when I was editing back in college.

Cueing/logging footage
I: Mark in
O: Mark out
J: Reverse (press repeatedly to increase speed)
K: Pause
L: Forward (press repeatedly to increase speed)
F9: Insert from Canvas to Timeline

Tools on Timeline
A: Arrow
H: Hand
B: Blade
N: Snapping
S: Slip
SS: Slide
R: Roll (single tracks)
RR: Roll (both tracks)
T: Select this track, from this point forward
TT: Select this track, from this point backward
TTT: Select all tracks from this point forward
Cmd+A: Select all tracks
P: Pen (Adjust sound and opacity on the Timeline Overlays (Opt+W))
M: Marker (I don?¢‚Ǩ‚Ñ¢t mark often though)

I used to log footage on paper and log clips via FCP?¢‚Ǩ‚Ñ¢s Log and Capture window, but with the price and size of hard drives these days. It?¢‚Ǩ‚Ñ¢s easier to capture all your footage–yes, just let it sit there and eat up your disk space. If you are short on space, then–at the end–use the File>>Media Manager.

So once you?¢‚Ǩ‚Ñ¢ve captured all your footage, add all the usable footage to a Sequence via the ?¢‚Ǩ?ìCueing/logging footage?¢‚Ǩ¬ù keyboard shortcuts listed above. You won?¢‚Ǩ‚Ñ¢t even need to use the mouse–which is always a great benefit. To start your actual timeline, duplicate the rough timeline and start moving your items around, if you need a certain cut, go back to your initial rough timeline and Copy (Cmd+C) and Paste (Cmd+V) it. If you have any additional tips to make an editor?¢‚Ǩ‚Ñ¢s life easier, please post them.

–Stephen M. James
www.smjdesign.com

With cheap 300GB disk drives available now it has become easier to procrastinate archiving one’s creative work. Everyone hates archiving their work. It’s so boring–so uncreative. The following is how I archive my work and hopefully it will allow you to archive faster and more efficiently.

The main points to consider when archiving are:

• Do I have everything for this project?
• Do have a list of everything on the disk, so I can locate files in the future?
• Do I have a way of marking that I have archived this project and so can delete my project folder in the future?

DVDs vs CDs
With printable DVDs costing a few cents more than their CD counterparts and the ubiquitousness of DVD players now, I always burn one DVD instead of trying to burn multiple CDs.

Listing files in OS X
A co-worker of mine said there used to be a print window (a Finder window) command in OS 9. I was unable to find an equivalent in OS X. One could screen capture the Finder window in List mode and print the resulting PNG or PDF. That would work, but it would be a pain expand all the folers, and you would still need to fold up the piece of paper and place it in the CD case.

A few months ago, I discovered an AppleScript on a forum that uses Unix commands to recursively list all the file contents of a folder’s directory tree (meaning all subfolders and their contents), and saves it to a text file. Here is the folderPrint script, and the folderPrint OS X application (PowerPC version).

The folderPrintApp.app will open up a Choose Folder dialog and ask you for a folder. It will then save a text file named “folder_list.txt” to the Desktop. You can open this text file and copy all the text (Ctrl+A) into a textbox in the following disk template.

Listing Files in Windows
Coming Soon. . .

Disk template
If you have a direct to CD printing printer (or if you want to use labels), use this archival CD label template (PDF made with Illustatrator CS2) for the Epson R220. For directions on using the Epson R220 to print to CD in Illustrator, read my previous post on the topic. It isn’t the prettiest, but your archive disk ends up in a CD album or with a job ticket, after all.

Marking that a folder that has been archived
I place a text file called “_FOLDER_ARCHIVED” in a folder after I archive it. With the “_” first, I know it will appear at the top of the file list. Once this file has been placed in a project folder, I know that I can delete it, since I have a backup copy.

–Stephen M. James
www.smjdesign.com

Microsoft Word is an often overlooked tool in a designers toolbox. Not in actual design, but in data organization. If you are given a column of information and want to make it a row of information or select only one column of tab separated text, Word is an excellent tool.

Selecting only one column of tab separated text
There are two commands under the Table Menu, “Text to Table” and “Table to Text.” This will divide any text by tabs, paragraphs, commas, or any other character into table cells (rows and columns). From there, you can select a column with the mouse (click above the column, so the cursor turns into an arrow pointed down). Then, copy the whole column to the clipboard (Ctrl+C). Open a new document, and paste the column into the new document (Ctrl+V). Now use the “Table to Text” command under the Table Menu to convert the table back into paragraph text. Now you can select any column you want and bring it into Illustrator or InDesign as its own text box. Now that each column is it’s own text box. You can right justify any of the columns.

–Stephen M. James
www.smjdesign.com

This is the best tool I’ve seen for analyzing and disecting a pre-existing website (or to debug the one you just created). This extension allows one to outline table cells, view anchors, DIV tags, disable CSS, resize the browser window, validate your code with the W3C, inspect the DOM, and all inside your browser! Download Firefox. Then download the Web Developer Extension.

Screen shot of Display Element Information
Screen shot of Outline Table Cells

–Stephen M. James
www.smjdesign.com