Lowter

Sponsor: The JavaScript Anthology

The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks (external link)

Browse Blog Archives

« March 2006 April 2006 May 2006 »

Blog Entries from April 2006

Animated Smilies

By Daniel Malmqvist

In this lesson, we will go through the process of making an animated smilie. Are you ready? Then let us begin!

Step 1

Create a new image (CTRL+N). You can use any size you desire; I will be using 100×20 pixels. Remember to make the background transparent. Note that I will be using a white (#FFFFFF) background in this tutorial to make everything easier to see.

Create a new layer (CTRL+SHIFT+N) and name it "Body".

Step 2

Set the foreground color to white (#FFFFFF). Set the background color to the color you want your smilie to be. I will be using a soft red (#CD3D3D).

Select the "Elliptical Marquee Tool". Make a selection as big as you want your smilie, as shown in the picture below. Start from the right and pull to the left.

Step 3

Fill your selection using the "Gradient Tool". Use the following settings:

Step 4

Give your smilie a nice outer stroke. Right click on the "Body" layer and select "Blending Options". Then select "Stroke". Pick a color that looks good along with the body of the smilie.

Step 5

Great! Now we are done with the body. Create a new layer and name it "Eyes". Using the "Pencil Tool", draw two eyes. Your smilie should look something like this:

Note: This image has been enlarged for better viewing.

Step 6

The following step is optional. In order to make an arm, follow the same steps used to make the body; except this time make the circle a lot smaller. To make a set of arms you place two small "balls" next to the smilie's body.

You can also use the same technique to make other body parts - legs, arms, etc.

Step 7

Now it is time to start working on the animation. Click the "Edit in Image Ready" button (SHIFT+CTRL+M) to move the image into Image Ready, where we will work on animating the smilie. If you have not read the first entry on basic animation, I recommend that you do so now.

Note: It helps to make your smilie and its body parts into a set. This makes it easier to move the whole smilie simultaneously.

We are going to make the smilie look to the right. Overall, it is pretty simple, but it will give you the basic idea of creating animated smilies.

If the animation window is not open, select Window -> Animation. Next, duplicate the animation frame.

Now we need to move the eyes so that they look to the right. Simply move the "Eyes" layer a bit to the right. When you have completed this, click on the "Tween" button. When it asks you how many frames to add, you can enter as many frames as you would like, depending on how smoothly and quickly you want the eyes to move. I will use just two frames, as I want the eyes to move fast.

Step 8

You can repeat step seven as many times as you find necessary. Basically, if you want your smilie to move around a ton, you will have to redo step seven more then once or twice. Last, go to File -> Save Optimized. Now you are done!

Here are a few examples of what you can make using the same technique:
Importance of Cross-Browser Compatibility

By Ethan Poole

Companies seem to not realize the importance of cross-browser compatibility. If a customer cannot use their preferred browser to use your online service, it is unlikely the customer will switch browsers just for your website. Some may, but you had better be a darn good website for that to happen.

A few days ago, I went to Progressive Auto Insurance's website. For those who do not know, Progressive is one of the largest online auto insurance providers. They advertise their focus on their customers and how great their service is. Well, I have to disagree. When I visited their website, I tried to get a quote. After typing in my ZIP code, I got a not-so-lovely screen telling me that they did not support my web browser - Opera. I tried both Safari and Firefox, but I still did not get into the (not-so) instant quote service.

What does this mean? Progressive is intentionally denying tons of users their service. How is an OS X user suppose to get a copy of IE6 running? Simple - they cannot.

The sad part about most websites that deny certain browsers access, is that the denied-browsers most of the time will render these websites perfectly fine.

The moral of this story is that cross-browser compatibility is extremely important for any website to be successful. In some cases, as with Progressive, you may even lose business over it.
The Power of Referrals

By Ethan Poole

Any freelancer must know the massive importance of referrals and word-of-mouth. Both promotional methods are vital for a developer to get good, profitable leads.

From my personal experience, I can say that almost all of my projects come from four main sources. Each of these four sources were some of my very first clients, for whom I slaved hours on end. However, in the end, each was extremely pleased with my work and I have profited greatly from them simply referring friends to me.

Referrals are easy to obtain as long as you approach the task correctly.
1. Perform outstanding work for the client. Your overall development process - communication, timeliness, perfection, creativity, etc. - has to be conversation-worthy.
2. Once the project is completed, ask the client to refer people to you.
3. Some developers offer an incentive - such as a discount - if the client refers new clients. Personally, I have never tried this.
Another good hint is not to ask every client about referrals. Why? Not every client is going to be a pleasant one. If the client was a pain to deal with, it is very likely that the people he/she refers are going to have a similar attitude. Also, if the client did not overall express happiness about your work there is no reason to ask them about referrals, because he/she probably will not give them anyways.

If you do remarkable development, then it is very likely clients will refer people to you just by nature. People tend to talk about things that went well and that they liked.

There are entire businesses built upon referrals. They are powerful. Never underestimate how profitable they can be.