Free Tools: Converting Images to ICO format

Recently I have been designing a website for a client and needed to create a a favicon image. A favicon is the graphic you see in the address bar before the URL or in the browser tab before the name of the page. The size of favicons are 16x16 or 32x32. The most supported file format for this image is ico which is not something you can just Save As in Photoshop. In the past, I have used a separate application that I had to install on my computer. I have a new computer now, so this would mean I would have to spend time to research what application would work best for my machine and this just seemed like a pain plus I was in a hurry since there was lots of testing to do for the said website.

Luckily, the good people at Punk Labs created a web application that will take many existing graphics and convert them to ico format. This is a very useful tool for web designers to have in their arsenal.

Check it out: http://converticon.com/

More about favion: http://en.wikipedia.org/wiki/Favicon

Inspirational: Painting with Light from an iPad

Dentsu London, a creative communications agency has crossed new media with old media and created something new. First the start by creating 3D animations, converting them into a virtual CAT scan view and then playing them on an iPad. Next they have a person move the iPad playing the animation (which looks just like a series of squares) through physical space in front of a camera which is set to a long exposure. They repeat this process many times to create a stop-frame animation that extrudes the light from the iPad to spell words out and create light objects that seem to dance and sway to the ambient electronic music they put the artwork to.
Have a look at this creative ground breaking work: HERE.
For a more comprehensive overview of the project, visit  their collaborator's blog: BERG.

Inspirational: Koralie

I just love the style of Koralie. Her artwork is a combination of Japanese manga style with the elegance of old Japanese prints and a side of modern street-art flair. Her art medium ranges from galley installations, graphic design, photography and graffiti. Her website has an appropriate use of Flash animation as an introduction to the page too and even has four different animations to look at in the lower left corner of the website (titled moods). Check them all out! Her style reminds me a lot of Italian artist Tokidoki, so check out his website if you like Koralie's art.

Inspirational: Infographics

Infographics or information graphics are a great tool to express complex ideas into easily understood units using graphics and text. Since most people just scan websites and magazines, being able to condense information into infographics is a real advantage. The website graphicdesignblog.org has posted 15 modern examples of good inforgraphics. Have a look at the examples HERE.

History of Public Relations

In 2002, Adam Curtis wrote and directed a four part BBC documentary called The Century of Self in which he examines how marketing changed by the influence of the Freud family. Sigmund Freud's nephew, Edward Bernays, applied his knowledge of crowd psychology with his uncle's new techniques of psychoanalysis to transform marketing from a "needs" basis to creating an emotional response to a product and creating a "desires" basis. He was originally hired to create propaganda by the United States government and wanted to apply his knowledge to corporations in time of peace, so he coined the term "public relations" and set up shop in New York City. As Paul Mazer from Lehman Brothers in the 1930s described it, "People must be trained to want new things even before the old has been entirely consumed. We must shape a new mentality that American man's desires must overshadow his needs." His techniques were cunning and manipulative, swaying women to start smoking because he made it seem to represent equality and he even started a war in Guatemala so an American banana plantation would eliminate an interfering local government. All of this was done in the name of free enterprise to benefit his client's interest.

It is important to examine the founder of modern public relations and know his techniques. Apple recently came out with a commercial for their new phone that plays heavily to your emotions by showing a man experiencing the birth of his child over the phone's camera feature. The would be a classic Bernays technique. I recommend you watch the series at the great website freedocumentaries.org.

Inspirational: Illustrated RSA Speech About Motivation

The Royal Society for the encouragement of Arts, Manufactures and Commerce (RSA) host talks from some of our world's top thinkers. They offer many of these talks on their website and on their YouTube channel. A few of these talks, they give to a very talented artist who illustrates on a whiteboard what is being said. One very amazing talk is given by Dan Pink who talks about what really motivates people at work and at home. His discusses the finding of two different studies done about it and their surprising results. Have a look at the video HERE.

Tutorial: Seemless Patterns

If you ever find yourself needing to make a seemless pattern, Veerle's Blog has a great Photoshop tutorial for you to read. Check out her post HERE.

Tutorial: How to Draw a Manga Face

Graphic novel writer and artist, Mark Crilley, has posted a fantastic video tutorial on the general principles of drawing a realistic female manga face. He goes over the basic geometry and rule of thirds in making the structure of the skull, placement of the eyes, nose, mouth and chin. Crilley also gives clues on the staying within the artistic style of manga, such as the small nose and big eyes but still give a realistic portrait. Check out his fine tutorial HERE.

Inspirational: The Unexpected Creates Big Impact

One of the biggest thrills I get is seeing art and animation used in unexpected ways. MUSE Amsterdam and Starcom did just that for client Samsung in a cutting edge marketing campaign last month. The ad campaign has two elements to it, a live event and recorded but interactive replay of the event.

First, they created a live event in front of an eager crowded street watching an overlaid projection of 3D artwork onto a historic building. The animation shows the building cracking and bursting open with butterflies, water and vines. It's a beautiful example of their client's new 3D-Outdoor projection system. Also at the live event, representatives showcase the new 3D LED TV for visitors and they have a drawing for visitors to win one of their own.

Second, for the vast audience unable to attend the live event in Amsterdam, they posted the video on YouTube. The video looks just like what you would expect from a normal YouTube page but then as the video shows the animation of the building cracking, the page suddenly cracks open with it revealing vines and water. The top YouTube banner falls to the bottom on the page and butterflies are flying out on the comments sections and thumbnail previews. A pop up informs the user to click on as many butterflies as possible for a chance to win their own Samsung 3D LED TV and the game begins! The final reveal has the building completely destroyed and showing the client's product.

It is a great balance of beautiful artwork, unexpected elements and interactivity. Have a look at the live event HERE and the interactive ad HERE.

Inspiration: Art Nouveau

I love the style of art called Art Nouveau ever since my eyes first saw it. One of the most important artists to popularize this style was the great illustrator, Alphonse Mucha, who designed many Paris posters in the late 1800s. The style spread quickly and into other fields of art like furniture, decor, architecture, jewelry and even can be seen in the stained glass style of Louis Comfort Tiffany. Common traits of Art Nouveau is symmetry,  ornate organic elements, mythology content, elaborate framing of the main subject, and a muted color palate. While browsing though the internet for inspiration, I found a collection of new artists with a new take on this classic style. Have a look HERE. I really like the Iron Man Art Nouveau piece HERE as well.

Software Review: Google Sketchup

Google has come out with a pretty impressive free 3D CAD program called Sketchup. I gave it a try and really like what I see. Most of the tools are intuitive and with a little practice, this could be a very useful tool for 3D models and animation in presentations, digital art and more. It is able to import existing CAD designs as well as having an extensive model library, called 3D Warehouse, to place objects and buildings into to your design.The Layers feature does work differently than most programs. Be sure to watch the useful tutorial on that HERE. Most of the other tools have modifier keys like CONTROL and SHIFT so play around to get the feel for it or watch other useful tutorial videos HERE.There is also a growing community for Google Sketchup with an online forum, contests and a gallery. Check it out!

Inspiration: Illustrations by Daniel Conway

The incredible digital illustrations of Daniel Conway are featured on Abduzeedo's graphic design blog. Check out the featured list of illustrations HERE. For more of Conway's artwork, check out his Deviant Art page HERE.

Software Review: Kdenlive

The open source community has released a  free video editing program called Kdenlive. This great program can do all the basic multi-track video editing you would expect plus comes with some preset effects and title animations. It is available for download on the Mac, a wide variety of open source operating systems (i.e. Ubuntu) and can be run on a live DVD or live USB stick for Windows users (boots into Linux). I recommend taking a look at NixelPixie's tutorial which gives a great walk through of the software and can be seen HERE.

Tutorial: UsabilityPrinciples

Last weekend, I went to a technology show and tell called BarCamp. It had three venues and there were half an hour presentations all day long. One of the most impressive presentations I saw was by a Full Sail University professor, Chris Burke, on usability principles. He was nice enough to share his presentation online and I encourage you to have a look at it HERE. BarCamp exists in many cities, so if you don't live in Orlando, please check locally to see if there is one by you. It is a free event.

Free Fonts

Every Friday, the good people at Abducted by Design post awesome free fonts. Check out this week's installment HERE.

Free Textures from BittBox

Every Tuesday, BittBox releases a collection of textures for free under the Creative Commons License. BittBox specializes in high resolution texture photography and is very kind to share his works with the world. Have a look at the freebies page HERE.

Inspirational: Font Fun

The graphic design blog, YouTheDesigner has posted a great collection of text-art. Text-art is the manipulation of text shape, size and color to create an image. Check out the collection HERE.

Tutorial: Depth of Field Shift

In last week's post, I gave a quick tutorial on how to give a tilt-shift effect on photographs that have been shot from above. This same technique can be applied to photographs shot from eye level which can alter their depth of field.

In this example, I have used a photograph I took on the Olympic Peninsula, WA. The photo to the right is the unaltered version. Make the duplication layer just like in the previous tutorial and add a layer mask to it.

However, since this effect will be seen from eye level, a simple reflected gradient mask will not necessarily work to give the desired effect. Other objects in the foreground might be on the same plane as objects in the middle or background that we wish to give focus to, therefore a more precise layer mask is needed.

On this example I created two different groups to demonstrate the effect. The first group, named "foreground rock", shows the masked rock in the foreground created using the either the quick mask mode or using a black brush on the blurred layer mask. The second group, named "middle rock" shows the masked out rock in the middle ground. Remember we are manipulating the layer that has been blurred and masking out the area that we want to be sharp, which is the layer underneath it.

Here are the final results for the two different depth of field alterations to the photograph:




A great way to give an interesting effect to a Flash animation is to use images that you can alter the depth of field to. Just open up the Flash file, import the two images onto separate layers, make them into movie clips and then tween the alpha (opacity) between the two which will give the effect of a lens depth of field shift from foreground to middle ground or background.

Tutorial: False Tilt-Shift Photo Effect

I was very inspired by THIS amazing video which uses a post-production false tilt-shift camera effect to make city scenes seem miniaturized. I went through some of my old photographs to see how they would look with the effect. It is best to use a photograph that has been shot from above the subject or location. The photo to the right is my starter image, shot on a bridge in Seattle.

Open the image in Photoshop and create a duplicate layer of the image (Control + J). Use a Lens Blur Filter on this duplicate layer.

Now create a Layer Mask on the blurry layer. On the Layer Mask, use a Reflected Gradient on the area you wish to be the main subject of the image.

Normally, it is best to exaggerate the saturation levels to give it that "not real" feel but this photo was already brightly colored. I did, however, adjust the curves.

For the final touch, I created a low opacity layer with a black fade around the corners to give it that extra focus in the center. Done! Here is the final image. Click to enlarge it.

UPDATE:

Here are a few more examples of this effect on some of my other photographs. Click to enlarge.

Portfolio Spotlight: Exopolis, Inc.

It is always inspirational to check out some of the top design studios. One company that I have been following for years is Exopolis, Inc. Their markets range from web, broadcast, print, film/animation and even mobile. Have a look at their diverse portfolio and demo reels HERE.