Delivering WebApp Ready Photoshop Files

As a “hybrid” I am either a designer, developer, or both on various projects which means I’m either delivering the creative assets or I am the one receiving the creative assets. Years ago I learned just because I am familiar with both sides of the fence, I need to be cognizant of the fact that not everyone I work with is.  So to be courteous, in my design process, I began setting up my creative assets as if those receiving them knew nothing about the project and could find what they needed and clearly understand what was delivered. This helped to cut down on stress, rework, searching for that “missing layer” and made for a more efficient process.

Here is a list of things I recommend doing if you’re a designer and work with developers or other designers.

Label each layer appropriately

Labeling each layer will allow the person working with the file to find what they need as a glance as opposed to digging through layers and having to guess what is what.

Place grouped layers in appropriately name folders

Again, this helps to locate layers that are needed and cuts down on the amount of time needed to find the correct layer to work with.

Clean up layers so they are production ready

When the developers or whomever start cutting up the graphics, it’s best they don’t have to make any edits or modifications to the files in order to get a clean asset.  When using masks and gradient masks, it’s best to apply them to the layer so that when the layer is cut, it can be simply saved out. Each element on the canvas should be able to exist on a transparent background without any change to its appearance.

Provide “true” copy rendering

Be aware of the app in which the final product will be developed such as Flash. Photoshop gives the designer better control over how fonts are rendered. Flash, while it offers some control, it does not always translate exactly. Using transformations on fonts that are meant to render as HTML text can add to extra time being spent trying to match everything up.

Provide fonts when necessary

That’s pretty self explanatory :)

Cosmetic Design Concept

Just finished up a design concept for enve cosmetics. It’s an interactive makeup assistant that simulates the application of makeup with a few other design elements to add flare.  I kept the navigation simple while still allowing her to be able to move around in the app as she needs.  I have some other ideas as to what I could do with this thing but I’m going to save them for later :)

Also, shouts out to P.L.B with Stock Expert for letting me use her profile in the design!

Useful Links About Using Twitter for Business

Updated : I have compiled a list of several sites that I feel have some good information for those thinking about using twitter for marketing your business.

Passing Variables to A Function in ActionScript 3

I have asked and have been asked, “How do I pass a variable to a function when using the addEventListener to call a function in ActionScript 3?”

Passing a variable to a function in ActionScript 2 was a fairly simple task. However, it is not so easy using ActionScript 3. There are a few more things you must do first.

In ActionScript 2, passing a string variable looked like this.

my_btn.onRelease = function(){
doThis("whatever variable you want goes here");
}

function doThis(a:String){
trace(a);
}

In ActionScript 3, this is what I need to do to get the same results.  I initially wrote the example below thinking at some point, I will have several buttons that the user will interact with such as a navigation menu.

var b:Array = [b1_btn, b2_btn, b3_btn];
var a:Array = ["zero","one","two"];

for (var i:int = 0; i<b.length; i++) {

b[i].addEventListener(MouseEvent.CLICK, clickedOne);
function clickedOne(e:MouseEvent):void {
for (var j:int = 0; j<a.length; j++) {
if (e.currentTarget.name == b[j].name) {
doThis(a[j])
}
}
}
}

function doThis(v:String):void {
trace(v);
}

Get the source fla file here.

If you have any questions just drop me a line.

UPDATE!!!

There’s more than one way to solve this problem.

Thanks to kcreation for this solution.

var btns:Array = [b1_btn, b2_btn, b3_btn];
var a:Array = ["zero","one","two"];

for (var b in btns) {
btns[b].name = b;
btns[b].addEventListener(MouseEvent.CLICK, clickedOne);
}

function clickedOne(e:MouseEvent):void {
var b:int = int(event.currentTarget.name);
doThis(a[b]);
}

function doThis(v:String):void {
trace(v);
}

Thanks to Mykola Bilokonsky for this solution.

var buttons:Array = [b1_btn, b2_btn, b3_btn];

var dict:Dictionary = new Dictionary();
dict[b1_btn] = “String Argument”;
dict[b2_btn] = new MySampleMovieClip();
dict[b3_btn] = 7

for each (var b:MovieClip in buttons) {
b.buttonMode = true;
b.addEventListener(MouseEvent.CLICK, myHandler);
}

function myHandler(e:MouseEvent):void {
var myVariable = dict[e.currentTarget];
}

What I Was Doing at That Moment

It was November 4th 2008 and I was sitting on my couch talking with my family and chatting with friends on twitter when CNN announced that Barak Obama has won more than the 270 electoral votes needed to secure the presidency.  My phone rang seconds later and continued to ring from a flood of calls I received from friends and family. When the phone didn’t ring, my text alert sounded.  People are partying tonight like it’s new years.