iPhone GUI 3.0 PSD

Gone are the days when I was the only mobile designer I knew. Now everyone and their mama is creating UI's for the iPhone. The guys over at teehan+lax have provided us designers with an awesome resource, a PSD file of nearly every iPhone GUI asset.

It's not perfect, but it's as close as you're gonna get. I would prefer if every element was created as a shape or layer style, some are flattened so they aren't as easily edited. And the volume control knob isn't correct. But other than those minor flaws, this kit has saved my life numerous times.

http://www.teehanlax.com/blog/?p=1628

Setting Up Photoshop For Web, App and iPhone Development

Most people who have designed websites or apps in Photoshop will, at one point or another, have had issues trying to match colors in images to colors generated by HTML, CSS or code. This article aims to solve those problems once and for all.

http://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/

Font Bureau clashes with NBC over font licensing

NBC Universal and CNBC Inc are in some legal hot water with the type foundry The Font Bureau. A lawsuit claims both companies bought a single-seat license for some popular fonts, but later copied them to multiple computers and even sent copies to third parties.

http://arstechnica.com/tech-policy/news/2009/10/font-bureau-clashes-with-nbc-over-font-licensing.ars

Stop Quicktime from loading PNG's in IE

1: Open up Regedit
2: Navigate to HKEY_CLASSES_ROOT\Mime\Database\Content Type\image/png
3: remove CLSID value completely - don't just set it to empty
4: Navigate to HKEY_CLASSES_ROOT\Mime\Database\Content Type\image/x-png
5: Repeat step 3.

Restart all Instances of IE.

Just another reason Apple should be banned from making PC software.

Add rounded corners to rectangles in Flash using the keyboard

Awesome tip: Way back when, I had an issue with having to double-click the rectangle tool to add rounded corners to a rectangle object in Flash. Not sure who told me at MM at the time, but you can simply hold the mouse button when inserting a rectangle on the stage and hold down the up or down arrow keys to adjust the rounded corners *real-time*!

Source: http://weblogs.macromedia.com/amusselman/archives/2005/09/add_rounded_cor.html

Does your Ultimate Scroller have a ton of blank space at the bottom?

http://www.forum.flashloaded.com/boards/showthread.php?t=18765

Does your Ultimate Scroller stick on mouseUp?

http://www.forum.flashloaded.com/boards/showthread.php?t=18765

Link O' the Day: The Mysterious Save-for-Web Color Shift

http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/

Dreamweaver Phone Home

I had Fiddler open today when I was trying to get some images from a provider's site for something I'm working on. Well, look who's phoning home to Adobe with my OS, version number, app name, etc... Flash and Dreamweaver!

It even phones this directly into Omniture's website, which is the scary part. If you don't know, Omniture is a web analytics (reporting) tool that the big boys use. The info Omniture can snag is super detailed, from knowing where your mouse's positioning is within a site, the complete trail of where you're coming from and much much more, broken up into beautiful real-time graphs. I know, I've used their tools for sites in the past.

Photoshop and Fireworks don't seem to, except for Fireworks' annoying "Register" window that pops up daily.

JUST IN: It seems both Adobe and Apple use this in their products and it can be a pain to opt-out of. So it's not a new thing, but the fact I never knew about it even though I'm in these products daily means it's not quite as transparent as it should be.

Merging shapes in Illustrator, and the hairline gap intersection

If you have an issue with hairline gaps appearing between two shapes you've merged, or wonder why merged shapes still have two editable shapes grouped, instead of becoming one object, I think you're using the wrong tool. I've been working to get rid of this hairline stroke/gap between two objects I merged. They're letters I've created from other letters. I don't think I've ever really paid attention in Illustrator, I think my main problem is that the Merge "tool" is for paths, not shapes. It will work for shapes, but not quite the way you intend.

Instead of using "Merge" under Pathfinders, use Add to Shape Area under Shape modes, and immediately hit "Expand" in the same palette. This will create one shape out of your objects, instead of just grouping two objects together leaving behind artifacts. This will remedy the white gaps appearing between your two shapes.

Reference:
http://www.bittbox.com/illustrator/pathfinder-explained/

Want to vertically center your dynamic Flash text?

I googled this, and all of the code I came across either didn't work or seemed like a lot of code for such a simple thing. All I wanted to do was vertically center my text against a container I was displaying it in, no matter if I had 1 line, 2 lines, 3, etc.

So I came up with the following code. Just make sure that the object you want to center against is center aligned within the movieClip.

myDynamicText.autoSize = true;
textHeight = myDynamicText._height;
myDynamicText._y = -(textHeight/2);


That's it.

Adobe Fireworks CS3 Bug - Forced Bit Depths

I just figured out today that Fireworks will force lower bit-depths if the amount of colors warrants it. Exporting an 8-bit PNG that's solid black? Fireworks will export it as 1-bit. Have 16 colors in your image? That's 4-bit for you. 4 colors? 2-bit.

This is all fine and dandy, since I imagine that these lower bit depths compress better. The problem is, not everyone and everything supports them, like this phone I'm working on. It won't render anything less than 8-bit. This needs to be an option in Fireworks, not on by default.

To fix this, I'm manually adding colors to the indexed palettes of the 8-bit PNG's I'm exporting, unchecking the "Removed unused colors" box at the bottom. This is allowing me to get the colors up to 17 in order for Fireworks to export these as I need them.

I tell people all the time about Fireworks' ability to work with PNGs, how it supports alpha transparency for bit-depths that not even Photoshop does. But this bug is just kinda dumb.

Convert to uppercase

Sometimes the project you're working on requires you to type things out in all caps. Maybe it's required by the client's lawyers, maybe it's just part of the design aesthetic. I've had projects where the designer wanted all of the text in caps, but all of the legalese and copy was handed over to me in Sentence case. When I'm handed a 3-4 page document of rules or terms, the last thing I want to do is spend my night typing it out.

For this, just open up Microsoft Word, paste in the text to be converted to uppercase, select all and Shift-F3. VOILA! I use this method because, for the life of me, I can't find the "To Uppercase" function in Word 2007.

Yes, I know I could probably do this dynamically in Flash, append ".toUppercase" to some code in my ActionScript, but not all projects are Flash and having to do that seems silly.

Software Pimpin' #1: SyncBack Freeware (PC)

We live in an age where all of our memories, all of our work, everything we do, is on our computers. I remember going through dad's tall file cabinet when I was younger, rummaging through all the years worth of photos he had in that second drawer. Now, everyone has a digital camera. Gone are the days of 30 or so processed rolls from your youth. These days, youngsters are going to have their entire lives broadcast and memorialized, through hundreds of thousands of digital photos and videos on YouTube. You can't see my sister's walls in her home with the absurd amounts of photos she puts up, I can't imagine how many photos she'd have if she actually had a digital camera.

At home, I have schoolwork and projects back from 1998-1999. Websites and artwork from my college, portfolio pieces from 2000, years and years of my life in work, taking up 0s and 1s on my computer's 7 year old hard drive. A lot of it really awful, but I keep it around for the memories behind them.

That said, this last week my coworker booted into her Macbook Pro and a cute little folder with a question mark popped up on her screen. What wasn't so cute is that this icon was basically telling her that her hard drive crashed and was DOA. Everything she had on it, gone. A year's worth of work, PSD files, Illustrator files, her own stock artwork and originals, gone. Can they get that back? Maybe, but I doubt they can recover the entire drive and even if they do, have you looked into how much hard drive recovery costs these days?

So this has lit a fire under me. I have 9 years worth of digital photos, 10+ years worth of artwork and portfolio pieces, 10+ years of important documents, sitting on that old Pentium 3 in my office. My life and memories can be gone in an instant.

Today I stumbled across a program called SyncBack Freeware (PC). It's as easy a backup program you could ask for, allowing you to automate backing up to external drives, FTP sites and more. It took me literally 20 minutes to setup, and now my computer at midnight, every night, will backup my work and my life to my Dreamhost backup account and an external hard drive. I really wanted the new HP EX487 MediaSmart Server, but going this route for now will save me about $600+ dollars.

I found an article about it at Lifehacker, where you'll find a link to it as well: http://lifehacker.com/software/geek-to-live/geek-to-live-automatically-back-up-your-hard-drive-147855.php

Maybe you're already backed up. I hope you are. For me, I just had this feeling like I needed to do it, but it really wasn't a rush. My coworker, although it sucks that she became a guinea pig for data loss, really proved to me that I can't put this off any longer.

Fullscreen Flash Flickering

Something's been bugging me ever since I made a Flash site go completely 100% browser window. In Internet Explorer, when I would resize the site, the browser window's content would flicker black all the way from full size to as small as I could make the window. The site was more than usable, but the flickering was enough to annoy the hell out of me, and make me wonder if someone was going to call me out on it. I checked through all of my Flash code and I couldn't figure it out. You could still hear the site, but not see it, nor were any of the buttons clickable. Resize a little more, the site comes right back. Resize as small as the window goes? Gone again. I swore it had something to do with my full Flash black fade, but I removed that layer and it persisted.

This only happened in IE, so it made me wonder if it was an HTML issue.

Anyway, the short of it, I added two lines to my body CSS (which are also in my HTML CSS):

height:100%
width:100%

The flickering is gone. Whew.

I could sit here and tell you that it has something to do with the way that Internet Explorer renders its viewport, that the body is really just another container within your HTML hierarchy, so making sure both your body and HTML CSS have these percentage values..blah blah..blah....

But then I'd be making things up. I really have no clue.

"Allow Smoothing" on all bitmaps in library

http://mrsteel.wordpress.com/2007/06/12/flash-jsfl-script-allow-smoothing-on-all-bitmaps-in-library/

The JSFL file located at the above link lets you enable "allow smoothing" on all of the bitmaps in your Flash library. You can also adjust it to make all your bitmaps lossless, or jpeg, or whatever you need. This probably saved me an hour.

Update:
This code is awesome, but be aware exactly what it does.

Here's the code:

var libItems = fl.getDocumentDOM().library.items;
for (i = 0; i < libItems.length; i++){
if(libItems[i].itemType == “bitmap”){
libItems[i].allowSmoothing = true;
libItems[i].compressionType = “lossless”;
}
}

With this line in place, it adjusted the compression on all of my objects to "lossless". Meaning my site went from 1.5 megs to 4.5 megs!! Lossless is great, but expensive, and on some objects, it just doesn't make sense.

I got the site back down to 2.5 megs so far (and falling!)