Two bills before Congress, known as the Protect IP Act (PIPA) in the Senate and the Stop Online Piracy Act (SOPA) in the House, would censor the Web and impose harmful regulations on American business. Millions of Internet users and entrepreneurs already oppose SOPA and PIPA.

The Senate will begin voting on January 24th. Please let them know how you feel. Sign this petition urging Congress to vote NO on PIPA and SOPA before it is too late.

Sign the Petition

We have been working so hard lately that we haven't had a chance to take a refection on our own design.  Well I had a chance to and decided it was time for a new logo.  With that being said welcome any feedback you may have.

This is a Photoshop tutorial showing you all the steps you need to take in order to photo-manipulate yourself into an Avitar (based on the characters in James Cameron's movie "Avatar"). I used Photoshop CS5 in order to create this, but older versions should do the same just with a few different steps.

Step 1

Import a photograph of your choice, but make sure its size is relatively large, as it gives more room to play with. Also, make sure that the person on the photograph is well lit - but not overlit - perhaps taken with a flash, so that enough sharp details are visible. If necessary then change the levels of the photo before any other step to make sure you can see the features of the face.

Step 2

My overall image had turned a little too dark in my opinion, so I went to my Layers window, and at the bottom I clicked on the "black and white" symbol that has the name "Create new fill or adjustment layer", and selected "Levels..." from the menu. Now a new window opens up and all I did was click on "Auto" and "OK". However that option doesn't always turn out a good image, so you may want to play around with the sliders. Alternatively, if your image is too light or pale, you can change this here too, using the sliders.

Step 3

Liquify the nose to achieve the broad nose.  Use varied sizes when liquefying.  If you haven’t used this before play around with it until you get the nose you want. The avatars have a broad catlike nose and defined features unique to the individual.  Enhance your own features here.  Adjusting the mouth slightly will help balance the other larger features.

Step 4

Create a new adjustment layer.  Double click the gradient map enter the following colors into the different boxes: #000000 position:0%, #001b32 position: 25%, #19448c position: 60%, #50b1c0 position: 80%, #ffffff position: 100%

However, every photograph is different, so you may prefer different shades of blue for your image.  And finally, pick a shade of purple, I used #472a50, with a small brush and its Opacity set to 10%, paint the lips with it, and then randomly brush all over the face with it, as this breaks everything up a bit, thus making it more "natural" looking.

Step 5

Create a new layer. Use the elliptical marquee tool and paint with a soft round brush. I used the color #73712e, width: 20px and opacity: 100%. On the same layer use the elliptical marquee tool.  Paint with a soft round brush color #000000, width: 20px and opacity: 100%. Create a new layer and paint some lines with a soft round brush.  Color #c12b648, width: 9px, opacity: 100%. Use the smudge tool width: 9px, strength: 50% and smudge the lines you just made.

Create a new layer and paint with a soft round brush and use a darker green color #545b34, width: 9px, opacity: 100% around the outer part of the eye as well as dark lines in the color part of the eye.  Use the smudge tool width: 9px, strength: 50% and smudge the lines you just made. Smudge where the green meets the black part of the eye so there is not a sharp edge. Use the dodge and burn tool to create to your liking the high lights and low lights in the eyes.

Next create a new layer and paint with a soft round brush use the color white #000000 a width of9px and opacity 50%. Use the smudge tool to soften the edge. This is to give a glossy look to the eyes.

Step 6

After you done to your liking merge all of the eye layers and duplicate this layer.  Use the horizontal flip to make the other eye.

Step 7

Create a new layer and paint the lines around the face with a soft round brush.  Color #002542 width 20px and opacity 100%. Apply a gaussian blur of 5px.  Change the opacity of the layer to 25%.  Change the layer blending mode to vivid light.

Step 8

Next take the dodge and burn tool and create highlight and lowlights on the cheek bones and forehead.

Step 9

On a new layer paint with a soft round brush and paint on the white dotes on to the cheeks, nose, forehead, and chin..  Color white #000000 width: 9px and opacity 100%.  Change the layer blending mode to overlay. Duplicate this layer and apply a Gaussian blur 5px.  Use the eraser to adjust the light on these layers width 40px and opacity 30%.

Step 10

This is still fairly difficult. You will now be using the "Burn" and "Dodge" tools from the Tools window a lot. Use both tools, with their "Range" set to "Midtones", and the "Exposure" set to 5% and continue to "shape" the nose by carefully adding definition. "Burn" darkens, while "Dodge" highlights, so make sure you figure out where the light on your picture is coming from. Because this step is so tricky, it is okay to carry on with the next steps and return to the nose from time to time.

I continued to use the "Burn" tool - a combination of both "Midtones" and "Shadows", to further add definition all around the face. You may choose not to do this on your photograph. However, you might have noticed that I went back to "Liquify" the nose a little more....

Step 11

Now here is the final result with the original image:

Join us at Google I/O 2011 from the comforts of home or anywhere you have a reliable internet connection.

The Refine Edge Tool in Photoshop CS5 has made one of the most challenging jobs of Photoshop much easier, the tedious task of cutting out images that may have hair flying in the wind and or other fine edged objects.  To get that professional look you need to preserve the detail while cutting out the background, you can now use the Refine Edge Tool in Photoshop CS5.  The Refine Edge command is not new to Photoshop, it was introduced in Photoshop CS3 but was not as cool as it is now.  The Refine Edge command is found on the Options Bar on top, just below Photoshop’s menus and as long as you have any selection tool chosen in the tool box, the “Refine Edge” button will be available in the Options Bar. A tutorial will be put up soon on how to use this wonderful tool.

In Flash there are two different ways of animating your drawings: frame by frame or tweening. Frame by frame is where you create an object on each frame (see image below) and make a slight adjustment to a single or multiple objects to indicate movement. Tweening on the other hand, is where you make only a few KEY frames and Flash goes and creates the frames that aren't as vital to have. In CS4 there are three different kinds of tweening (see image below): Motion Tween, Shape Tween and Classic Tween. I’ll go over all three different types of tweens in more detail in my next post "Why Three Types of Tweens?".

There are both pros and cons to each and knowing which to use is a very important decision you will have to make. If you want to have a realistic animation you may choose to do a frame by frame. Or if you are going for a less of a realistc look then using a tween may be your best bet.

Frame By Frame

In order to create a realistic feel you will need complete control over every object in your animation. This will consist of creating a frame for each small movement. For instance, if you had a couple sitting on a park bench talking, you would have many different things happening all at the same time. The mouths will be moveing on the two sitting on the bench as if they were caring on a conversation with each other. During which other people are walking by or dogs running on the grass in the back ground. You may have a bug or bird fly across the screen and even have a slight breeze blowing leaves, hair and/or branches around. You cannot leave realistic details like this to Flash.

The pros for frame by frame are COMPLETE control. You can make a frame for every 1/4 of an centimeter of movement, which brings me to the cons. The cons for frame by frame is this process is very time consuming and when compared to an animation of tweening, frame by frame adds significant size to your file. A big concern if you mean to put your finished animation up on the web.

Tweens

Tweening is about making it easier for you.  Say you wanted to have a ball rolling across the floor you would only have to draw three frames; one to show the ball starting on one side, one with the ball in the middle of the screen and one at the other side of the screen. Tween the key frames together and tada, you have your animation. Complete that fast, saving you much time and effort.

The pros for tweening are faster development time and a smaller file size, the cons are less control over your animation and more of a non-realistic look.

So, we learn the more control you have over your animation, the more you sacrifice in time and file size. Besides nobody ever said you can’t combine the two.  In fact, that's what a lot of professional animators do: take care of the difficult stuff themselves, and rely on Flash to fill in the areas that aren't as important.