My Photoshop Masking Technique

Posted on December 12, 2008 by Matt

First, I don’t mask everything the same way. In fact, the example I’m about to show you would probably be done differently given the neutrality of the background. But, I want to get really really basic here for a second. Why do we Mask? Simple. Because you never know. Masking is non-destructive and allows for an incredible amount of flexibility when extracting something. Your other option is to delete or erase what you don’t want, but I would highly recommend not doing that. Our computers are powerful enough that we can carry the extra overhead of having a few quick masks among our layers.

Call me old school, but I like to mask by hand. There are occasionally situations where I jump into channels and extract by using the most “contrasty” channel and so forth. But, unless the background of your subject is extremely lacking in texture you probably aren’t going to get decent results. In the end this is just the way I do it. It’s not right or wrong, it’s just the way I prefer.

Step 1 – Buy a Wacom tablet

Well, jeez I must work or get paid by Wacom to say that, right? Nope. They’re just that good. When I said I mask by hand I meant it. I’m literally drawing on the screen with the stylus. For those of you who don’t know what a tablet is, this is mine:

 

Yes, that's my finger

Yes, that is my finger

With all that being said, you can still mask effectively without having a tablet. I know they’re expensive, and that sucks, but if you do this for a living it will be one of the best purchase you’ll make. The pressure sensitivity alone makes it a crazy nice asset in your tool belt.

Step 2 – Locate your subject

It really doesn’t matter what the heck you choose to use. I found this lady on the internet. Not sure who she is, but I heard she has like 14 children from Africa or something like that. (Yes, that was sarcastic)

 

Angelina

Angelina

 Okay, so now we have something that we can stare at for a little while. Let’s move on.

Step 3 – Starting to mask

The first step you should always do is duplicate the layer you are going to be working on. So once your in Photoshop and have opened your image go ahead and drag that layer down on top of the Create a New Layer icon. It’s at the bottom of the layers palette. This will duplicate the layer for you. After you have duplicated the layer, apply a layer mask to your layer. Your layers palette should now look like this:

 

Current State of Layers Palette

Current State of Layers Palette

Now for some tricks of mine. First select the mask itself in the layers palette. Then hit backslash “\”. This will toggle on the highlighting aspect of the layer mask. In other words everything you mask from now on will show up as a red glow. Just tap backslash again and you’ll just see what you’ve masked. You also want to get familiar with the following keyboard shortcuts when you have the brush selected as your tool:

  • “[" - makes the brush smaller
  • "]” – makes the brush larger
  • “shift+[" - makes the brush softer (essentially feathers the edges)
  • "shift+]” – makes the brush harder (will go until you have no feather)
You want to get used to these, because you’ll constantly be needing to change the diameter of your brush to work around fingers, hair, etc. Now that we have that stuff committed to memory let’s actually start masking.

Step 4 – Outlining

Here we go. This is where my technique begins. Using my wacom tablet and a medium sized brush I’m going to fully outline Angelina. I’ll have to make the brush smaller in certain places, but that is fine. The brush should have a bit of a feather to it so we don’t get ultra crisp, and unrealistic, edges. Also, make sure your opacity and flow are both at 100%. Here is a close up of the outlining I’m talking about:

 

We just need an outline around the subject

We just need an outline around the subject

Hopefully you’re not saying, “oohhhhhh, this sucks so bad to have to do by hand.” Well, it kind of does, but when you’re a hot shot designer some day you’ll be passing that off to a production artist. For right now, you have to start somewhere. Continue outlining the subject until she is completely surrounded by red.

Here is the fully outlined image. And don’t bust my chops for not fully masking her hair. This is just a tutorial, and the image is pretty low res so I didn’t want to bother.

 

Fully Outlined

Fully Outlined

Cool. So we’re actually getting pretty close to being done. Now for the extration.

Step 5 – Final Extraction

The hard part is over at this point. Next, you need to turn off the visual masking by hitting backspace “\” on your keyboard. Now, hold down alt and click on your mask. If you do this successfully you should see just your mask in black and white.

 

The result of alt-clicking the layer mask

The result of alt-clicking the layer mask

Sweet. Since we are wanting to extract the foreground we will need to color everything outside the outline Angelina black. Now, what tool do you know what is really good at selecting things of contrasting colors? Yup the good ‘ol magic wand! Start by selecting anywhere outside the outlined Angelina. Then what I like to do is apply a 2px, or so, feather to the selection. Go to Select > Modify > Feather to do that. Now you just have to fill in, with the paint bucket, the selected area with solid black, #000000. Go ahead and fill the area 5 or 6 times to ensure it completely fills out the feather. Here is the desired result:

 

Result of Mask

Result of Mask

Last but not least, you just need to go back and alt-click the layer mask to reveal your newly extracted Angelina. Not too shabby. The best part about all of this is its’ just a mask. You can continue to do all the fine tuning you want. Brushing on the color white will reveal the actual image. Brushing on the color black makes it disappear. Make sense?

It’s definitely not rocket science, but I’ve found it to be the least amount of steps needed to get a good extraction. And it’s entirely up to you on how detailed you want your mask to get. If you feel like it you can get in there and and mask out all those beautiful strands of hair. Have fun masking and let me know if there are any questions.

 

Final result

Final result

Posted in Photoshop, Tutorials | Tagged , , | 5 Comments

How To Get HTML Signatures in Apple Mail

Posted on December 11, 2008 by Matt

For some reason, Apple doesn’t make it very easy to create your own html based email signatures in their Mail.app. It’s pretty handy to have your email and/or website linked at the footer of your email for easy communication. A recent switch to MobileMe has effectively eliminated any chance of using Entourage so I had to devise a way to trick Apple Mail into allowing an html based sig.

End Result Preview

Example Signature

Example Signature

So this is essentially what we are going for. Name, title, email address, phone, and website. You could of course ad something like a company logo, and at the end of this post you’ll understand how to do it if you so choose.

Step 1 – Create the signature

We are first going to want to create our desired signature in html. I personally wouldn’t bother trying to spice up your signature with CSS as most email clients are just going to strip it out anyways. If you’re curious as to what is compatible and in what client check out this. My belief is that it’s just a signature. Don’t make it annoying by changing your font to purple comic sans. Seriously. Don’t.

Anyways, here is the html for the Homer’s above signature:

<hr />
Homer Simpson | Donut Eater
Homer@simpson.com | 123-456-7890
<a href="http://www.simpsons.com">simpsons.com</a>

That part is pretty straight forward. Just straight html. Nothing fancy. Save that file to your desktop as sig.html.

Step 2 – Working with Apple Mail

In this step you need to open up Apple Mail and go to Preferences. Once you’re in Preferences click on Signatures. You’ll want to click on the plus sign to create a new signature. You don’t need to worry about what you put in the signature at this point. Then drag the newly created signature name over to the account you want. Here’s a visual:

Example

Example

Step 3 – The “Hack”

If there is a tricky part, this is probably it. Open up a finder window and go to User > Library > Mail > Signatures. Ensure that you have the list view selected so that you can see the date modified. You’ll want to take notice of the most recent file. It will look like a bunch of letters and numbers with the file extension “.webarchive”. Go ahead and select that most recent file and copy it to your clipboard.

Now, go to your desktop and open up the sig.html file in Safari. You should see your signature in it’s html format. Go to File > Save As… Browse back to the signatures folder at User > Library > Mail > Signatures. Paste in the copied file name and replace the existing file.

Step 4 – Relaunch Safari

Just restart Safari and you should be ready to go. Now anytime you write or reply to an email you’ll have your nice brand new html based email. Email away.

Posted in Computers | Tagged , , , | Leave a comment

How to Create the Popular “Leopard” UI Look

Posted on December 10, 2008 by Matt

Okay, so everyone is doing it. And that probably means you should too. (Isn’t that what Dad used to say?) Adobe uses the look for their application splash pages. Apple uses the look through out their Leopard UI for both type and graphical elements. Heck, I use it on this site. And if I use it, it must be good!

We will be specifically talking about the “beveled” look, or whatever you want to call it. It’s essentially the look that gives a nice clean feeling of depth, without making the type or text look clunky or overweight. UI’s or GUI’s can often be quite complex. There is no need to burden the eyes with flashy in-your-face graphics. A good user interface is there to present and locate information and data being requested by the user. The UI shouldn’t be the center of attention.

Some examples

Examples of the bevel

Examples of the bevel

You’ll notice that the Apple finder window and icons/buttons make use of the bevel. In the center Adobe is using the bevel look on type. On the right, Yahoo is even using the bevel look on it’s search bar.

The basics

Okay, so what are we really dealing with here. Let’s start with an extremely simple example. We’ll just be creating a horizontal bar that could potentially house some navigational elements.

Open Photoshop and create a new document with dimensions 800×40. Select the Rounded Rectangle Tool and enter in a corner radius of 5. Set your foreground color to #999999. Then starting in the upper left hand corner drag out your rectangle to be the full width of the document and slightly taller. Your result should look like this:

Step 1

Step 1

After you have your shape, you’ll need to apply a gradient. I do this by applying a layer style. It’s the little fx at the bottom of the layers palette. Once you click on that, enter the following settings:

Step 2

Step 2

Next comes a stroke. This provides the outer most contrast when it sits above other things. This is important in a UI like an operating system when you can have many windows on top of each other. Here are the settings:

Step 3

Step 3

Finally, while we are still in our fx palette we’ll apply an inner shadow. This will provide the contrasting highlight, which is essentially what creates the bevel. Use the following settings:

Step 4

Step 4

At this point we are starting to look pretty good. Your document should look like the following:

Step 5

Step 5

Next Steps

Okay, so we’re doing pretty well. We have the advantage of applying our bevel via layer styles so they can actually be transferred to other elements to retain the same look and feel. Copying layer styles is easy. Just right click the fx on your layer and select Copy Layer Style. Then just paste it to whatever layer you need it on.

If we were going to add some visual element beneath this, we would want to manually draw a 1px highlight with the pencil at the very bottom in a dark grey. This make the next corresponding highlight really pop.

Type

The treatment for type is nearly the same. And we can accomplish the whole thing through layer styles again. I’ll just model the type after the Adobe Illustrator application splash.

Open up Photoshop, if it isn’t already, and create a new document 200×200. You can just fill it with a solid orange. Or play with a radial gradient like they have. The background is not important here as we are focusing on the type.

Go ahead and type “Ai” into your document. I don’t know that I have the actual typeface that they use, but I just used Myriad. It lacks the little “serify” thing off the top, but oh well.

Next, go into your layer styles and select Drop Shadow. You’ll need to enter in the following settings:

Step 6 - Drop Shadow

Step 6 - Drop Shadow

To add the subtle depth Adobe uses, you’ll want to add an inner shadow. Settings:

Step 7 - Inner Shadow

Step 7 - Inner Shadow

That’s really about it. Your final image should look something like this:

Adobe Type

Adobe Type

Looks pretty nice! This may or may not be the way they actually do this. I personally like this approach because of it’s flexibility. For instance, if you need to change it to say “Ps”, you just need to type in the new letters and the layer styles are maintained. And, as mentioned before, you can copy the layer styles across multiple elements to maintain consistency.

Go ahead and use the technique to work stuff up in your own GUI’s. It’s clean, fast, and sexy. And that’s just how I like ‘em ;)

Posted in Photoshop, Photoshop, Tutorials | Tagged , , , | 2 Comments

Web Developer Toolbar/Firebug For Safari

Posted on November 16, 2008 by Matt

I have no doubt that there are some diehard Safari users out there. When I develop on my Mac I find myself hoping back and forth between Safari and Firefox a lot. I’m sure everyone is somewhat familiar with the Firebug and Web Developer toolbar plugins found on Firefox, but there is an equal need for something similar on Safari.

Well, your in luck.

How to do it

If your on a Mac, go ahead and open Terminal. Don’t worry, we’re not doing anything scary so there’s no need to freak out. Terminal can be found in Applications -> Utilities -> Terminal. Once it’s open, paste the following line of code:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Hit return to commit the action. Simply restart Safari and you’re all done! At this point you can right click any element on a page and chose “Inspect Element” from the pop up menu. You’ll be presented with a very similar dialogue box to what you get with the two aforementioned Firefox plugins. It’s a pretty nice figure to have if you didn’t know about it already.

Posted in Tutorials, Web Development | Tagged , | 2 Comments

“18 Rules the Best Web Developers Follow” – My Comments

Posted on November 13, 2008 by Matt

There was recently an article that made it to the front page of digg that I found interesting. It comes from a site called Digital Labz that claims to focus on “Online Marketing and Web development.” The particular article in question was titled, “18 Rules the Best Web Developers Follow.” I know there is not necessarily one right answer when it comes to some of this stuff, but I felt strongly about sharing my opinions on this article.

1. Don’t push information on your visitors

Let your visitors choose and decide what they want to read. Giving them the control over their viewing experience. Ask yourself: what would be my reaction to a dozen of pop-ups and tons of ad blocks?

I think we can all agree that no one likes pop-ups. But, pushing information is certainly part of the biz. Understandably, there are many different genres of website business models. But, unless you are running an entertainment site, you are there to provide an experience based on your choosing. If users like it they will come. If its not their style, they will leave.

There are certainly exceptions to the rule. Social networking sites like Facebook exist because of the users. You are therefore committed to do everything in your power to please them. But, websites for businesses, blogs, promotional websites, etc. are all examples of pushing information.

2. Poor advertising is evil

Don’t focus on the ad revenue side of your site.  Visitors start forming opinions about your site within seconds of visiting your page.  If it is loaded with ads, it may actually have a negative impact on your visitors, which can hurt your ad revenues in the long run. Try to balance your ad placement and quantity with the flow of the content and page layout.

I tend to agree with everything but the first sentence. Focusing on the revenue side of your site is very important for some people. I certainly pay attention to it every day. I also move ads around and try different placements to see what is most effective.

I understand that without good content people never see your ads in the first place. But, my business model is to give everything away for free in the hopes that I generate enough impressions/clicks to make it worth my while. All this being said, don’t be an idiot. Deceptive advertising and over-the-top advertising can and will drive people away.

3. Be a source of information

Virtually everyone on the web is looking for specific information.  Whether it is for a product, service, or just educational, sharing your expertise and experiences sets your website apart from the others and adds value to the content.

This is a funny idea to think about. The sheer existence of a website means that you are sharing information. It’s practically the definition of a website. I would probably add the ajectives relevant, timely, and good in between the words “a” and “source.”

4. Develop your own style

Never ever “copy” someone else’s efforts.  Try to be as original as possible.  This will make your site and its content unique and fresh.  A fresh spin on something that has been done before is acceptable because having a new take on existing material creates unique content.  So, surf the web and let it inspire you.

Pablo Picasso once said, “Bad artists copy, Great artists steal.” Sometimes somebody else gets it right before you do. And if that’s the case, why go reinvent the wheel? I’m by no means advocating plagiarism. And I am positively in favor or everyone having a unique style. But, in the never ending pursuit of perfection there is always something we stand to learn from someone else.

There are many excellent web designers out there doing fantastic work. And every single one of them has influences. They probably all started by imitating someone else. I dare you to go find a successful musician who didn’t start out by playing covers of his/her favorite band. Your own style will take time, there’s no need to rush the process.

5. Obey the standards

Standards may seem like a pain, but sticking to them will save you headache in the future.  Code that is written in compliance with web standards has a much better chance of being rendered properly in the various browsers people use on the web these days.  It also has a better chance of being rendered properly for the various versions of these browsers; older and newer.

Never were there truer words spoken. To put it bluntly, you are a moron if you are not attempting to do this. Standards are there for a reason. If we have any hope that Microsoft will eventually jump on board we need to give power to the W3C and the like.

6. Be clear

Your website needs to communicate as clearly as possible to its visitors. You only have a few seconds to make that initial impact on the visitor.  Telling them exactly where to find things and exactly what product or services you offer help the visitor feel comfortable in using your site to gather information and/or make their decision.  If it is something that is complex, break it up into digestible chunks.

Not quibbles with this point. It is always a good idea to present your information in an easily digestible manner. Start with successful online news sites for best practices. It’s no small task to display that bevy of information.

7. Use Internet Explorer as a baseline

Don’t design your code for special browsers or special resolutions. Regardless of how you feel about Internet Explorer, it still used by more than 85% of web users; and that demands a web developer’s respect.  In most cases, getting your code to render properly in IE6 means it will probably render properly in most browsers.  There are, of course, exceptions.  One day IE6 will be ancient and there will be a new baseline, which is determined by the most popular browser used.

Wrong. Wrong. Wrong. I couldn’t disagree with this more. At one time 85% of Americans practiced slavery, but that didn’t mean it should have been the defacto standard. I don’t even know how this statement could be made after example number five? You will have a hard time obeying standards by using IE as a baseline.

I truly believe that the intentions here are good. IE is still the elephant in the room. And, before going live with any website you need to make sure that it works in IE. But, why would you develop first with IE in mind, knowing full well that you are breaking rules to accommodate it? Use Firefox, Safari, Opera, etc. Those are the browsers that choose to obey standards. IE is a bane to the existence of developers and should die a slow and painful death. (Until they decide that there market share doesn’t make it okay to ignore standards)

8. Content is king

Some of the most successful websites bring something new and useful to the web.  There are millions of cookie cutter websites out there and users get bored with them.  Fresh, useful, and entertaining content is in high demand and you will find visitors to your site thirsty for more once you give them a taste.

Content will make or break some websites. Especially sites that rely on return traffic and user impressions to survive. I wish I could offer up some magic solution to ensure your content is of the utmost releveance, but it truly is the million dollar question.

9. Web-crawlers and SEO should be an afterthought

Don’t think in keywords; unless you want your website to seem artificial.  Time spent on SEO would be much better spent on creating more useful content.  Creating great content and sharing it through the web will naturally help your search engine rankings improve.

I spent a year and a half at a SEO/SEM job that tought me a lot about the field. SEO is not just about jamming in keywords to try to get relevant results. In fact, that is one of the least useful ways of achieving results.

Good SEO should be part of the process throughout. It is something to be considered in phase 1 of development all the way through content generation. I agree it is a bad idea to spam your posts or articles with relevant keywords, but it can be done tastefully along with many other techniques to provide good search results in the various engines.

10. Share content naturally, don’t spam

Sharing your content naturally means, you are sharing with people who would actually be interested in it. Think about the sites they are likely to visit.  Keep in mind that you are writing to a human being, who can effectively spread your content across the web by sharing it or using social media to bookmark it, etc. Don’t spam or advertise, offer useful content for the potential readers of the content.

Ummm…I guess this comes down to a debate on the benefits of advertising itself. Not all of us are writing on our blogs. Microsoft needs to advertise Windows, because Windows sucks and no one would seek it out on their own :)

Advertising is about creating awareness. Some people may find uses for products they never even knew existed. And how do you search the web for something you don’t know exists? Sharing content naturally is a great way to deliver free traffic. But, it is only one piece to the puzzle.

11. Answer your e-mails immediately

Quick personalized responses are a must with communicating through email on the web.  Make the person you are communicating to feel important by giving a personalized response and show them that you think their time is valuable by responding quickly.  Automated emails feel cookie cutter and can leave a negative impression of you.

I can only imagine this could be written by someone who has never dealt with more than a couple clients at once. There have been numerous productivity studies conducted that suggest you should only check you email twice a day. If I had to answer every client email on the spot, I would never get things done.

An added benefit of not answering emails is the ability to process the information or question. Your responses are better thought out and more useful. Responding immediately also says, “I’m available”, which results in the, “Hold on, I’m just going to call you.”

12. Engage in Social Media

Gain visibility for your site by using Digg, Reddit, Mixx, del.icio.us, Ma.gnolia, StumbleUpon and hundreds of other social media websites. The great thing about social media, is that it is word of mouth advertising for the web.  Once social media users find useful content, they often share it across the web using other social media sites, linking to your content from their blog, and more.

All I’ve got to say is do it tastefully. Social media is not the holy grail. Appearing on the front page of digg might drive unprecidented traffic to your site, but it could also open your site up to a world of hurt. In reference to the article I’m quoting, the majority of comments are taking stabs at the author’s content. Hell, I’m writing an entire post about it.

All I’ve got to say is be ready for the big show if you want to stay there.

13. Make connections, and nurture relationships

The best web developers often write guest posts on other blogs.  They are active in developer forums.  They are administrators for comments on blogs and more.  Doing these thing helps build key connections that will increase your credibility as well as build on your list of relationships with other developers who have strong credibility.  This can open many doors.  Make sure, when forming strategic relationships on the web, balance the give and take to make sure there is something in it for both parties.

This pretty much goes for anyone trying to make it in the real world. I hate to say it, but half the time you get a job because you know someone. Personally, I wish that you would just be judged on your performance and past experience, but that’s often not the case. Create good impressions and maintain your relationships. It will pay dividends.

14. Take advantage of the “worldwide” web

The world is a big place and more and more people are coming to the web.  Don’t be afraid to expand your web presence beyond your local niche or country.  As long as the information you are providing is useful, the visitors will come to learn more, regardless of where they are.  Ideas transcend borders.

True that. I get a lot of traffic from London. Thanks guys!

15. Build sites for “users”, not the “site owner.”

This can always be tricky when dealing with clients.  Most developers have had the experience of clients who envision a site that is really meant for them and not for users.  It is our job as developers to educate our clients to ensure that the websites we create are built around the user’s experience.  Most clients are grateful when you share this information.

I’d like to think that most clients are grateful when you share this information, but a lot of times their ideas are set in concrete. But, this is all the more reason to display a good grasp on your profession and convey your knowledge in a convincing way.

Let’s face it, you are the professional here. A client looking to fly to the moon probably shouldn’t be advising NASA on how to build rockets. I don’t know that it is all that much different with the web. I think that because clients are familiar with the internet they sometimes consider themselves knowledgeable and qualified to offer advice. Ensure them that they are here talking to you because you are an expert in the field.

16. Always keep learning

The landscape of the web changes fast and developers have to change with it or else their skills run the risk of being outdated.  The best way to do this is to subscribe to blogs using RSS.  Social media is now playing a big role in the way informational pages are tagged and shared.  Check out our List of 100 Web Designers to Follow on Twitter.

Amen. May your thirst for knowledge never be quenched. I learn something every day by surfing around the tubes. Every day I’m humbled by what others are doing. That inspires me to keep going.

17. Find inspiration resources for creativity

Sometimes all you need to do is browse through other people’s work to get ideas.  Sometimes you just need some coffee.  If you still can’t shake the creativity block, take a break to clear your mind or get some exercise to get the blood flowing in your brain.

Look no further than HexLuv. I am the one stop shop for everything you could possibly want in life. For instance, I can tell you which restaurants have the best Mt. Dew syrup to co2 ratios! And yes, they are different.

18. Beautify the Web

Most web developers realize CSS designs are beautiful; not to mention more efficient on the coding side of things.  Even if you don’t know CSS very well, you can still get ideas from CSS Table Gallery, CSS Zen Garden, Comment Design Showcase, Typography, and Form Assembly Garden.

Follow this step unless you write a blog about ugly things. The rule of thirds, the Golden Mean, and Helvetica are all things to be paid attention to. Comic Sans is the devil and reflective logos are dead.

Closing Thoughts

I don’t want to blast the author for his ideas. I’m sure he’d probably change some if he had to do it all over again. Heck, these are just opinions any ways. I just felt the need to offer my advice on the 18 rules and that’s the gist of it. Adios.

Posted in Web Design | Tagged | 3 Comments

ActionScript 3 – What are Conditionals?

Posted on November 10, 2008 by Matt

Do you prefer Pepsi or Coke? Of course, we all know the correct answer is Mt. Dew, but that is besides the point. When it comes to ActionScript the answer itself can be asked, and then responded to, using conditionals.

If your familiar with other programming languages you can probably glance over the next paragraph or two. If your new to the whole game then you’ll want to hang around. Conditionals are exactly what they sound like. They are testing a condition. When the test is complete we respond to it in a particular way.

For example, “Do you prefer Pepsi or Coke?”

“Coke”

“Congratulations, here is a glass of ice cold Coca Cola.”

We asked the question and then responded to it. This is the essence of a conditional statement. You will use them all the time in your programming so it’s a good idea to get a handle on them. There are two primary conditional statements in ActionScript. If statements and switch statements.

if

If statements are the most common form of a conditional. In simple form they are asking, if something is true then do the following. Here is an example using ActionScript 3 syntax:

var drink:String = "Coke"; //Declare our drink variable

if (drink == "Coke") {//Conditional Statement
   trace("Here's a nice cold glass of Coke");
}

Let’s look at what we did here. The first thing we did was declare a variable and set it equal to the string “Coke.” Line 3 starts the conditional statement. The question we are asking resides inside the parentheses “()”. In this case we are asking if the variable drink is equal to the string “Coke.” Our response resides in the brackets “{}”. The answer to our condition is true, so we will trace out the string “Here’s a nice cold glass of Coke.”

Cool. But what if the person likes Pepsi instead of Coke? What happens then? If we use the code from below nothing would happen.

var drink:String = "Pepsi"; //Declare our drink variable

if (drink == "Coke") { //Conditional Statement
   trace("Here's a nice cold glass of Coke");
}

Nothing happens because the statement evaluates to false and we haven’t provided an alternative. Bummer. This guys not getting his Pepsi. Let’s fix that. If has a close friend else. Else provides an ultimatum. That way if our statement evaluates to false like the code above we still perform some action. Let’s look at how we add that in our code.

var drink:String = "Pepsi"; //Declare our drink variable

if (drink == "Coke") {//Conditional statment
   trace("Here's a nice cold glass of Coke");
} else {// Our ultimatum
   trace("Sorry, we're out of Pepsi. Would you like Coke instead?");
}

Okay so you noticed at line 5 we added an “else” clause. This essentially is saying, if everything else fails in the condition do this. So if this man’s favorite drink is anything other than Coke, perform whatever actions are in the else statement. In this case Flash would trace, “Sorry, we’re out of Pepsi. Would you like a Coke instead?”

Hopefully this is all making sense up until this point. There is yet another step we can throw into our code for more specific results. It doesn’t do us much good to just have an either/or conditional. We may want to specify multiple conditions and evaluate which one occurs. This brings in the else if statement. You can repeat else if as many times as you like in your code for as many possibilities as you would like to test. Here is an example in code.

var drink:String = "Pepsi"; //Declare our drink variable

if (drink == "Coke") {//Conditional statment
   trace("Here's a nice cold glass of Coke");
} else if(drink == "Pepsi") {// Conditional statment
   trace("Here's a nice cold glass of Pepsi");
} else if(drink == "Mt. Dew") {// Conditional statment
   trace("Here's a nice cold glass of Mt. Dew");
} else if(drink == "Sprite") {// Conditional statment
   trace("Here's a nice cold glass of Sprite");
} else {//Our ultimatum
   trace("Sorry dude, looks like your going be thirsty.");
}

Now we have multiple options to test. This allows us to get a little more specific in our code and get a very specialized outcome. You can start to imagine the potential of the conditional if statement.

Switch

Another common form of the conditional statement is the switch statement. Switch is often a replacement for long if, else if statements. They tend to look a bit cleaner and are easier to read. Ultimately, this is a preference thing. They can both accomplish the same end-goal, but just look different in doing so.

Here is an example switch statement that follows the form of our pop debate.

var drink:String = "Pepsi"; //Declare our drink variable

switch (drink) {
   case "Coke" : //Checking to see if the case is equal to drink
   trace("Here is some delicious Coke"); //If the case is true, this will trace out
   break; // Exits the switch statement
   case "Pepsi" :
   trace("Here is some delicious Pepsi");
   break;
   case "Mt. Dew" :
   trace("Here is some delicious Mt. Dew");
   break;
   default :
   trace("Dude, you're having a bad day. We still don't have any liquid.");
   break;
}

You can see that it’s a bit cleaner looking. How does it work? Well, in the parenthesis we place what we are trying to determine the truth of. In this case we are trying to determine what “drink” is equal to. To do that we specify a case. The cases here are Coke, Pepsi, and Mt. Dew. If, at any time, one of those cases becomes true the line of code underneath will execute. Lastly, we have chosen to include a break statement, which means that if this particular case evaluates to true, exit the switch.

The default statement on line 13 is optional and is exactly the same as the else statement. It is our ultimatum if everything else evaluates to false.

Logical Operators

At some point your going to want to know more than whether a condition is true or false. There are other comparison operators such as:

  • (==) equals
  • (>) greater than
  • (>=) greater than or equal to
  • (<) less than
  • (<=) less than or equal to

You can also combine the above comparisons together to get ever greater specificity. The following are called logical operators:

  • (&&) AND
  • (||) OR
  • (!) NOT

In simple language and example might be, “Do you like Pepsi andMt. Dew?” Logical operators really open up your opportunities to get specific in your code.

Well, that’s about it for conditional statements. Let me know if there are any questions. Now, I’m off to go drink a real Mt. Dew!

Posted in Flash/ActionScript, Web Development | Tagged , , | 1 Comment

Final Cut Pro, After Effects, and DV Workflow

Posted on November 7, 2008 by Matt

Pixel aspect ratio can sometimes be a bitch hard thing to wrap your head around. And if you’re like me and video is not necessarily your forte, this pixel stretching issue can be quite a bummer. I believe my setup, and subsequent workflow, will be fairly common. Therefore, I’ll be using my workflow as the example.

The players

What is in my workflow? Well, there is a ton! But, we’re going to focus on the following:

  • Final Cut Pro 6.0.4
  • After Effects CS4 (the AE version shouldn’t matter too much)
  • Canon ZR 200 – a simple mini DV camcorder

Our goal is to use these three products together in the most seamless fashion possible. That being said, these are all created and manufactured by different companies and don’t always “talk” to each other like you would want them to. That’s okay, we’ll work around it.

First things first

We need to go out and capture some footage. We are going to be shooting widescreen or 16:9. This widescreen issue can be confusing so I’ll take some time to explain it.

We’re dealing with DV video. DV video has a frame size of 720x480px. This means that the aspect ratio of the footage is 4:3. This is what your looking at when you’re viewing a standard “old-school” tv. Cool. But, we want a widescreen look and we are stuck using a standard DV camcorder.

These standard DV camcorders often have a “widescreen” feature that essentially allows you to capture your footage in a 16:9 aspect ratio. The caveat is that the recorded video is still a frame size of 720x480px. In widescreen mode your camera is essentially cropping off the top and bottom of the images and then stretching the remaining image to fit the 720x480px frame. (A slight bummer because we lose a bit of resolution when doing this)

Without getting into too much more detail, this pseudo widescreen issue can cause all kinds of problems when moving footage around in your editing programs. Most of the frustrations centers around pixel aspect ratio. Pixel aspect ratios are different on a computer than they are on a TV. Our computer monitors utilize square pixels to display the image, while TVs actually use rectangular pixels. Can you say headache? This makes the eventual output for your video an extremely important factor.

All that being said, go capture some footage!

Capturing footage to your computer

Congrats, you’ve got some footage. Now we have to dump it on to the computer. Open Final Cut with your camera connected via firewire and hit command+8. This opens up the capture window. You shouldn’t have to mess around with the settings because Final Cut has gotten pretty damn smart these days.

After you’ve logged and captured your footage. Drag a clip from your the browser window on to the timeline. At this point you’ll probably be prompted by a warning asking whether you want to change the sequence settings to match your clip settings. Yes, you want to do this. This is how Final Cut ensures that the two match. It also sets the precedence for future footage. In other words, if you for some reason happened to drag some HD footage on later, it would warn you.

After Effects and when to use it

After Effects (AE) is a composting program. It is not in any way, shape, or form meant to be your primary editing platform. Cutting up your film and messing around with audio are better left to Final Cut or other dedicated programs. You use AE to better work with layers, 3D spaces, special effects, etc. I mention all this because I think a lot of people tend to give up with Final Cut and assume that every clip has to be edited in AE. Not so fast.

Final Cut has become extremely robust. You can do a ton of things from within the program. In my opinion, the less I have to jump back and forth between software the better. I can, for instance, do major color corrections and stylistic effects without ever leaving Final Cut.

My ultimate point is, use After Effects when it is appropriate and save yourself the headache of the back-and-forth rendering.

Moving from After Effects to Final Cut Pro

So, you’re got some rad Star Wars light saber effect that you’ve created in AE and you need to bring it back into Final Cut. Here are the steps:

1. Make sure your composition settings are NTSC DV Widescreen.

AE Composition settings

This ensures that we have everything correctly setup for export. This is found under Composition > Composition Settings in case you were wondering.

2. After you’ve got your light sabers, or whatever, looking just the way you want them you need to add your composition to the render queue. Click on Composition > Add To Render Queue. This should swap you over to the render queue itself. At this point you can pretty much use all the default settings. You may need to change your “Output to” location. Click render in the upper right hand corner of the queue.

3. You now have an uncompressed .mov ready to import back into Final Cut. Once you’re back in Final cut you can right click in the browser window and click Import > Files… Select your wonderful new AE footage and import it.

4. At this point you’d think everything would be ready to go. But this is where AE and FCP don’t really talk to each other that well. AE thinks that it correctly exported widescreen DV footage. (And it did). But, since we are ghetto and only shoot on $300 camcorders FCP has slightly different sequence settings. So, you need to right click on your newly imported footage in the browser window and select Item properties > Format…

5. In the final step you need to ensure that anamorphic is checked under the format tab. This goes back to the whole square vs rectangular pixel thing. If you didn’t check anamorphic you’d end up with a horizontally squished image. Your format window should look similar to the following:

Format Settings

You’re ready to drag and drop on to your timeline now without the fear of those stupid pixel issues. Hopefully this has clarified your workflow a bit, or stopped your Googling of the problem. I know it’s something that has always frustrated my.

Alternative Solutions

There are some other workflow solutions out there.

  1. Use Adobe Premier Pro instead of Final Cut Pro – CS4 has become quite aswesome with its ability to talk with After Effects. There is a built in seamless transition between the two programs
  2. Use Automatic Duck Pro Export FCP – I haven’t personally used this, but it allows FCP to export/import xml info for editing within After Effects. If you had a crazy timeline with many small segments that all needed to be dumped into AE this would probably be your best bet.
Posted in Motion/3D | Tagged , , , , | 2 Comments

CSS – How To Make a Large Centered Background

Posted on November 7, 2008 by Matt

I was collaborating with a fellow designer the other day and was sent a website comp to take a look at. One of the first things I noticed was that I had a horizontal scrollbar show up in Firefox for no apparent reason. Let’s get one thing straight…I hate horizontal scrollbars! I don’t know why, but they make me angry. Anyways, it bugged me enough that I decided to look at his CSS and see what was wrong.

It turned out that he did, what I’m sure many people do, and defined a very wide “wrapper” div. I don’t remember the exact specs, but it was over 1000px wide. I work across multiple displays, once of which is a 30″ Apple Cinema display, but I don’t always have my browser windows all that wide. In this case it wasn’t as wide as the wrapper div, which caused the horizontal scroll bar. Not a problem, there is an easy fix.

Step 1 – Creating the image

If you’re still reading this tutorial then you’re probably wanting to create a fairly large background image. I’m starting with the document dimensions 1200×800 px. Below is a quick example of what I’m trying to accomplish. My background is the gigantic smiley face, and the slightly transparent rectangle represents the eventual content of my web page. (And yes I know that the page will cover up most of the smiley face).

Large background example

Step 2 – The CSS

At 1200 pixels wide we would definitely cause a horizontal scrollbar demon to appear, so we need to do something tricky. The initial CSS for the background looks like this:

body {
	padding:0;
        margin:0;
	font:94.5% Helvetica,"Lucida Grande",Arial,Verdana,sans-serif;
	color:#fff;
	position:relative;
	background:#000 url(images/bodyBG.jpg) top center no-repeat;
}

The important line to notice from above is the background element. We are first setting the background matte color. In my example I have the smiley face matted against a black background. Thus, I am defining #000 as my background color. (For those of you that don’t know #000 is the short hand version of #000000. You can use them interchangeably)

After I define the background color I need to specify the image to lay on top. I.e. my smiley face. And this is where the trick comes in. Specify your image with:

url(images/bodyBG.jpg) top center no-repeat;

Aligning your image with “top center no-repeat” ensures that your image anchors itself to the top and is centered correctly. It is very important that you don’t specify a width in the body. Specifying a width will bring back your horizontal scroll bar.

Step 3 – Add the rest of your CSS

The rest of your page layout is up to you. In my above example I have a content area that is 800px wide and aligned to the middle of the page. You are free to do whatever you like. The best part about the whole thing…no horizontal scroll bar.

Posted in CSS, Tutorials, Web Development | Tagged , | Leave a comment

Photoshop CS4 – Convert to sRGB

Posted on November 7, 2008 by Matt

First impressions of Adobe Photoshop CS4 are quite nice. It is, as advertised, very fast. Dragging things around with the “hand” tool has an iPhone feel to it. In other words, there is acceleration involved. But, I noticed one thing quickly when trying to save some graphics for the web.

The dialogue box after selecting “Save for Web & Devices” has been revamped. And there is a new option for sRGB fanatics. sRGB stands for “Safe Red Green Blue.” Back in the days when monitors displayed far less colors it was extremely important to make sure that your web graphics were restricted to these safe colors. Personally, I don’t feel the need to adhere to these “safe” colors due to the fact that monitors and graphics cards are far more capable of displaying a wider spectrum of colors than they once were. But, some people still think it’s important.

Here is a screenshot of the new dialogue box:

New "Save for Web" dialogue box

Okay, so what does this all mean? Well, it means that if you are working with a typical RGB color palette and have this little checkbox selected, you might not actually get your desired color. This is simply because with sRGB selected, Photoshop is going to find the closest safe color to your selected color. I don’t recall how Photoshop defaults on installation, but you’ll definitely want to turn if off if you are more accustomed to the CS3 setup.

Conclusion

Is it a cool setting? Sure. It’s nice to have. I personally won’t be using it, but if you are at a firm that demands it or just like adhering to sRGB, then you have a nice fallback in place to ensure everything is safe. That should make some people happy.

Word.

Posted in Photoshop | Tagged , , | 4 Comments

Congratulations President Elect Barack Obama

Posted on November 5, 2008 by Matt

I think it’s safe to say that we’ve have reached a new time in United States history. Everyone should feel a deep sense of pride no matter your color, religion, political views, or sexual preference. We, as a country, have taken a gigantic step forward. That being said, I think we should all offer our congratulations to the new President Elect, Barack Obama.

President Elect

All politics aside, I think its safe to say Obama’s campaign showed an incredible amount of discipline and talent in the design department. From top to bottom there was a constant message and a consistent look that helped fuel his message of change. I am greatly looking forward to someone smarter than I putting together a case study on this very fact. It would be an interesting read.

Posted in Misc. | Tagged , | 2 Comments