“God is in the details”. This is a phrase I’ve heard many times before. Perhaps this is why I love taking a closer look at all the small details that make up a whole. It is my search for every bit of perfection working together to create a whole beautiful picture. The details in a drawing give me the feeling of when I was a child, entering a huge toy store or supermarket - bliss. Looking at every little detail, like jumping into that funhouse of colorful plastic balls, has always held my interest and curiosity. Always going back for more details I might have missed at first glance and maybe even after the second look.
Especially in the design of websites, I enjoy taking the time to appreciate what the creator intended for us visitors to understand and benefit from. Like after watching a good film, even after I leave, I am constantly reflecting upon the content and design of the website as well as the purpose and the beautiful mechanics behind each detail. This excitement is similar to that of a child receiving a new toy for Christmas.
The addition of intricate details can be obvious and be revealed as soon as one enters the site at the home page. However, be sure to include some details that can only be discovered when the mouse hovers over an object. This random factor will increase the curiosity of visitors and will interest them in uncovering other hidden treasures, like an Easter egg hunt. Simple and fun features like this can easily be done with the use of Flash.
Flash is a great tool for creating sites with intricate details whether it is just an illustration, an animation, or interaction based. The best thing is it only requires the addition of a few lines of code.
As with any software, everyone has their own way of working with it. After all, there are many different methods and techniques to completing a design piece. With this tutorial, feel free to use methods of working with Flash that you are most comfortable with to achieve the same result.
Illustrating and Animating Details with Flash
The best way to create small intricate objects is while working on a high zoom. The recommended zoom level would be 500-550% with brush size 3. Although not all of them will be very clear, this allows most of the image to look very detailed and meticulously done when viewed at 100%.
Despite knowing that not every line or point needs to be perfect as long as it looks good at 100% zoom, it is good to ensure that your design is detailed enough to be enlarged at least 5 times and not appear sloppy. Why? This is because the illustration you do today may be used in the future for other purposes besides just for the web. Perhaps it will become part of an illustration of a book, used in a business card or even featured as a life-sized standee. Every illustration, character, or design goes into your portfolio; and your portfolio deserves the best treatment. Design with great care for details.
When illustrating with Flash, use as many layers as possible. This would make it easier to make changes at a later stage, and to animate any objects.
Group all layers of a single object together into a symbol so that it is easier to resize all the details at once. After working on the intricate details, even viewing it at a slight decrease in size can turn it from something you weren’t fully satisfied with, into one that you’re proud of.
Say 'No' to Duplicating
No matter how tedious or time consuming, ensure each detail in a whole picture or illustration is kept unique and done individually. The adding of random and distinctive objects to an illustration helps build a unique quality and style to each piece. Although it is easier to do a template piece to copy and paste repetitively, it is easy to spot lazy work from miles away. Each brick in the wall shown below is different and has its own unique characteristics.
Although it is not very obvious, each distinctive detail works together to present the viewer with a whole picture. It is in taking care of such small details that the viewer is able to appreciate and understand the hard work that has gone into creating the image.
Of course however, we don’t always have the luxury of time to design everything individually. Deadlines abound, and clients are usually impatient to see the finished product. In situations like this, ensure that you try your best to make tiny changes to the duplicates. Add a line or two, or perhaps you could flip it, rotate it or skew it slightly to make them as different as possible from each duplicate. In fact, even slightly modifying its color can help to make each duplicate unique.
There are always one or two visitors who are extremists. These are the visitors who will give their undivided attention and look at every pixel of an illustration. Don’t get too comfortable with shortcuts and quick tricks. People will take notice of the extra effort you put into the details of your illustration or design. They will rightfully credit you for your professionalism as well as your efforts in making them feel welcomed and special. When you care about the quality of your designs, your visitors will take the time to explore and enjoy it.
Visitors will also further enjoy the details of an illustration if you add interactivity to it. You can do this by creating random surprises for them when they explore the illustration. Apply random rollover states to various objects. This will encourage them to investigate every object in the illustration to see which will give them an action.
You can add variety as well and prepare multiple states for each object. This allows a random frame for the object to be called out, thus creating a random reaction. Visitors will then spend more time with the illustration, testing to see the many different actions objects will give them.
The example shown above is an image of my own portfolio page. The thumbnails react differently each time the page is loaded or refreshed. This is achieved by applying several different masks to reveal different sections of the image at random.
Giving an illustrated character life and personality adds to the overall experience for visitors. You can have the character’s eyes blink or apply other small common and realistic actions to the character. Prepare these different animated actions to be inserted on the timeline and have them appear at random and at set intervals of time. All these little details will keep the illustration interesting and lively.
Create the Hand-Drawn Look
The hand-drawn look adds a personal touch and special quality to an illustration despite being drawn with a computer software. These are a few techniques to achieve the hand-drawn/manually-rendered look for your illustration.
Go with the Brush Tool, Not the Pencil
Invest in a good sized tablet. It will help you to do illustrations with precision and also give you a variety of contours, pressures, and strokes while painting. Changing these attributes randomly and repeatedly while painting the illustration will help to create the hand-drawn look. In some cases, stretching some of the points in the strokes can also help create the desired look.
Avoid Using the Gradient Tool
The gradient tool gives the image an unnatural look because it is nowhere close to what you can get with hand painted illustrations. Instead, to add shades to an object, simply use the pencil tool, with hairline thickness, to draw the desired shape of the shade and fill it with a slightly darker color. Remember to delete the strokes after the shading is done.
Don’t Mix Mediums
In an illustration, don’t add other mediums like photographs or fonts into the mix. Unless it is a part of the site which is specifically meant for it, like in a portfolio or a company logo, and must appear in its original style, do not mix mediums in your illustration. Even when you need text in buttons or titles, consider drawing it by hand and avoid duplicating letters where possible. Randomness and detail adds character to the illustration.
To help make drawing fonts easier, write the text in a font of your choosing and trace it by hand. This will also help keep to the natural hand-drawn look of the illustration. You can also try your hand at creating your own font.
Add Life with Animation
Life is full of surprises. You can add life into your illustration by adding simple loop animations to different objects that randomly occur even without the user doing anything. Of course not all objects need to be animated. If you go overboard with the animation, the illustration might end up looking disorganized and complicated, so keep some objects static.
In order to enrich the site's movement and liveliness, you can create links between different elements. This allows interaction between different elements in the illustration, and invokes the interest and curiosity of the visitor.
Maintain a Shorter Loading Time and Lower CPU Usage
Detailed illustrations has its downside; its large file size. The file size of a detailed flash illustration is large and requires a longer loading time. It may also result in slower computer performance, which may cause the user to exit the site.
However, this problem can be reduced by rasterizing the images of objects that remain static in the illustration. This allows Flash to have fewer real-time vector calculations to deal with, enabling a smaller file size and shorter loading time.
Export the finalized design to Photoshop as a PNG file, including all the static objects. After optimizing the PNGs import them back into Flash, replace all vector objects with its rasterized copy. If time permits, you can even rasterize each static part of the object to cut down on the eventual file size and lower CPU usage. In fact, when viewed closely, you can tell which parts were kept as vectors and which ones were rasterized.
Beauty in the Little Things
Paying close attention to the little details can add character to your illustration. Each detail works together to create an interesting and wholesome picture. It also allows the visitor to see the effort and pride you take in creating each design. Start paying more attention to the little details.