Some paintings require you take a closer look to see all the details. Now instead of a painting, imagine a blank canvas that can be filled with images and text and dynamic descriptions.

Note: This tutorial has nothing to do with the HTML5 canvas element!

In this tutorial we will be looking at the basic concepts of creating an application like this. It is advisable to keep the source code next to you while reading the tutorial because not every part is explained. Source code is available for use with FlashDevelop or with Flash CS3 Professional and higher.

Note: Opening the Application Locally

Please be aware that before trying to open the application from your hard disk, you will need to have it added to the “trusted locations” list specified in the Global Security Settings panel shown below. Otherwise, no access is granted to grab the images from your hard disk. This is not needed when uploaded to a website as long as the images are located on the same web server.

Step 1: Setting up the XML file

In case you are unfamiliar with XML, check out Dru Kepple’s AS3 101: XML. Shown below is the XML data corresponding to one page filled with one image and one text field. Settings specified here apply to all pages. As you can see, creating multiple pages and adding content to them is made easy. To images you can add a title and description which is seen when hovered over with the mouse. Multi-line text be added and size and style can be customized. Every text field uses a custom font found in the .fla file.

Step 2: The Document and Canvas Class

Use the following code to set up our application. It is almost completely generated by FlashDevelop using the “AS3 Project” template. Main is the document class – which is the class first loaded when starting flash – and inside Canvas we are building our application.

And a simplistic version of Canvas. Note that we use a display object container as a parameter to add that extra bit of control to add/remove the Canvas.

Step 3: Using Bulk Loader to Load Assets

In this application we are using the so called BulkLoader: an AS3 library that aims to make loading and managing complex loading requirements easier and faster. When first loading up, we use it to grab the XML file and a background image. The following code shows how to boot up the BulkLoader and add two items to the loading queue. The Complete function is called when all items are loaded.

Step 4: Saving the Loaded Assets

We save the loaded assets inside the class for later use. The BulkLoader provides an easy way to grab the items we need. Just call the function corresponding to the type of object and use the object’s ID string. Static variables are used to make the XML data globally available (e.g. accessing a static variable using Canvas.viewerWidth). The path variable specifies where the externally loaded images will be located. Images can only be loaded from the own webserver due to security restrictions.

Step 5: Introducing the Virtual Camera

As you may or may not have guessed, the application uses a virtual camera to extract a portion of the canvas and show to the user. The camera applies scaling and translation to a displayobject container such that only the area under the camera is seen on the screen. The following demonstration gives you a better idea of how it works.

The source code of this demonstration is also included in the archive. Let’s explain this example by starting with configurating the settings. We would like the viewer region to be 305 x 230, and the content region – which are the dimensions of the flower image – should try to keep the aspect ratio of the viewer region so it does not deform too much. Our flower is 1000 x 750, which is close enough. In order to show the entire flower in the viewer region, the camera must be the same size as the flower, which is 1000 x 750.

The following code sets the dimension settings. In this example they are hardcoded, but otherwise it is taken from XML.

Next up we create a viewer container.The option scrollRect is used to clip off anything outside a specified rectangle. This is very useful as only a portion of the canvas must be shown when zoomed in. It is a neater solution than for example putting a black border around the application.

To the viewer container we add another Sprite called viewerScroller. The function of viewerScroller is simply to act as a container for anything that must serve as content for the camera. It makes it easier to add multiple items to the content region.

Add content to the viewerScroller. In this case the flower image.

Now add the Camera class. Although we have yet to make the Camera class, its constructor will take the viewer dimensions as parameter, and the function SetTarget has the content Sprite as parameter. We position the Camera in the middle of the content and give it a first update.

With all this code in place we are able to render and manipulate the camera. Inside a Event.ENTER_FRAME loop you could run cam.Update() to refresh the camera view. It is however more efficient to only update upon a change. By changing cam.x and cam.y you can move the camera around, and by changing cam.scaleX and cam.scaleY you can change the scale. This is exactly what the keyboard keys in the example do.

Step 6: Camera Class A Closer Look

Here we take a look at the internals of the Camera. In the constructor function we add some graphics which are needed for the manipulation of scale of scale of the camera. We also store the viewer content dimensions locally inside the class.

Next up, attach the camera to an object. The camera becomes the same scale as the object.

This is the most interesting part and the engine of the camera. Scaling and translation is applied to the object attached to the camera by giving it a new transform matrix. Check out the Matrix class in the AS3 documentation for more information on the use of matrices.

Step 7: Setting up the Viewer

We return to our application. In this step we lay down the foundation for so called Page objects that contain the canvas with pictures and text. First, create a background for the whole application. The color is specified from XML.

Like in the example with the Camera and the flower, we are using pageContainer and pageScroller and Camera. This should look pretty familar.

Next up is adding all the Page objects required as specified in the XML. In our example we have only created one page. Note that the Page class does not exist yet as we are creating this one the next step. pages is an array that will hold all Page references for later use.

Parameters used by Page are

• pageScroller: the Sprite to which the Page will be added to
• p: an XML data object containing all information within a certain page (all images and text)
• g_background: the background texture

Step 8: Creating a Page

Displayed below is the constructor of Page. We simply save all the parameters locally in the class for later use.

Now a bit more interesting stuff. The Load function of Page starts off by taking the background texture we loaded before and wrapping it over the canvas. To do this we need to know the size of the background image we are looping and the size of the entire canvas. Create a Sprite called g_background which functions as a graphics container. Add a solid background color to prevent lines between the bitmap images to show.

Wrapping the background texture uses two loops, only vertically and one horizontally. It keeps on looping until the edge is reached. Every every tile at an even position – like (2,2), (4,2), (4,6) et cetera – is flipped around using scaleX or scaleY. This makes the texture flow over to the next one seamlessly. Checking if a number is even is done using the modulo operator (%). If the remainder of a number after deviding by 2 is zero then that number must be even. Around the edges we clip off any texture that goes outside the content dimensions as specified in trueWidth and trueHeight. It is important that the Page object stays this size as making it larger will change the aspect ratio and cause the screen to deform.

The result of the repeating background should be something like this. Dark borders are added for clarity.

Step 9: Loading Text

Let’s start our page-filling journey by adding text. Go through all XML entries labelled “text” and pass their data to the AddText function.

The AddText function looks like this. The first portion of the code validates the XML data. In case some fields aren’t filled in it will append a standard value. QuickText is a class used to create a textfield with certain options. Finally, the text must be excluded from mouse interaction by using mouseEnabled = false and mouseChildren = false.

The following image shows all the options of the QuickText class:

And the result of the new page including text:

Step 10: Loading Images

The first step here is to create Picture objects that will hold the XML data, the bitmap and some descriptive text. Listeners are directly applied for mouse interaction. All these Picture objects are then stored in an array for easy access later.

And here is the basic version of the Picture class, just holding the XML data. Picture extends Sprite, we can already position it somewhere. The scale setting is verified before being used, because if the user omits it from the XML it will return 0. The standard value for scale is 1.

Create a new BulkLoader just like the first time, but now to load batches of images. We are going to be loading 5 images at a time and displaying those when done. It will keep fetching new images until all are done. The function Complete is called at the completion of each batch.

Step 11: Loading Images (Continued)

In this step we’re putting the loaded data inside Picture objects. The items property of the loader holds all objects that have been loaded in. Loop over all those objects and check whether they are an image. Each Bitmap is given to the corresponding Picture object and the Picture is added to the canvas. We also delete the loaded image from the loader items list to prevent conflicts with a later batch of loaded images.

And a closer look at the SetImage function of Picture.

And adding a picture to the canvas is as easy as calling addChild.

The result now becomes:

Step 12: Adding the Page

Adding something to the camera view is done by adding a child to the viewerScroller container. We’ve added the viewerScroller to each Page object as a parameter so that we can add it as a child by calling the Show() function of Page.

Return to the Canvas class and call the Load() and Show() functions when we’d like to a show the user a page. In case the Page is already loaded, Load() will return directly so no unnecessary actions are done. The current Page we are showing is saved in the class as page. This reference will be important for page interaction.

Step 13: Zoom Modes

Now that we’ve created our page with images and text, it’s necessary to scale it so it will fit inside our viewer region. We are using the public static variables zoom and magnifyStep for this purpose. magnifyStep is an array holding all the different scale values of the camera and zoom is the current position of magnifyStep the camera is scaled to. To know which scaling value is needed to fit the content inside the viewer we need to know the ratio between the content and viewer regions. To account for wrong aspect ratios we take the minimal ratio between width and heights as follows:

We’d like to zoom in when clicking on the canvas. Add a mouse event to the hitfield of Page. The hitfield is basically just the graphics in the background of Page and because it is a Sprite we can put mouse interaction on it.

Upon a mouse click we would like the camera to scale down to the position zoom in the magnifyStepList and move to the point on the canvas that we clicked. Remember from the example that as the camera becomes smaller (scales down), the zoom on the canvas becomes larger. This is why we decrease the integer zoom by the value one. Getting the mouse position we clicked on the canvas is easy by using page.mouseX and page.mouseY. Flash automatically converts the numbers so that it appears local – meaning that if the page is for example 2000 px scaled down by 50% and you click halfway, it returns 1000 px, even though the mouse position on scale coordinates is a lot smaller.

Step 14: Correcting Camera Position

To keep the area of the camera inside the canvas we will need to correct the position within bounds of the camera. Looking at the camera example again for a demonstration of this. The camera is centered around itself so the position horizontally for example will need to stay within 0 + camera half-width and contentWidth - camera half-width. A reliable way to calculate the width of the camera when zoomed in is contentWidth/2 * magnifyStepList[zoom], because the camera in its initial unzoomed condition has the size contentWidth (same size as the canvas).

Shown in the image below is the camera and the canvas, zoomed in one time. The red lines show the borders that the camera can not cross and must stay within.

Step 15: Making the Zoom Work

Zooming is performed by adding scale to the camera. We are using the Tweener class and the "easyOutQuint" transition to make this happen in a smooth way. bZooming is a variable used to see if the camera is already zooming or not. You cannot zoom on the page again while it is still busy scaling up or down. At each update of the camera the function Update is called, which performs the scaling on the content.

Step 16: A Closer Look at Pictures

Remember that we added MouseEvent listeners to all the pictures inside the page. What we’d like to do is zoom in on a picture when one is clicked on and make sure it fits within the viewer region well. Images smaller than the actual viewer region must not be scaled beyond their resolution.

The basic concept here is that the aspect ratio of an image must first be determined. If the width of an image is higher than the height then imgRatio < 1 will hold true and vice-versa if the height is larger than the width. We will always scale to the largest part of an image, meaning that if the image is for example 200x400px, we will treat the image like a 400×400 square. Another addition here is that we scale the image with 1.05 first, meaning the image becomes 5% larger. This way the image does not touch the sides when zoomed in. To calculate the scale of an image in comparison to the content size we divide it by the height or width of the content.

Call the Zoom function of the camera and move to the middle of the picture we’re focussing on and apply the new scale that we’ve calculated.

Here is the image zooming process shown in action. Notice how the camera is kept within the bounds of the page, and how the entire image including description fits inside the screen perfectly.

Step 17: Scrolling the Page

If you hadn’t noticed, when zoomed in on a page you can move the mouse cursor to the edges of the screen to scroll around and view more of the page. The code shown below may look a little bizarre to you; it is something I’ve written a while ago for a RTS style game engine and have been re-using it ever since for anything that needs scrolling. Basic principles here is that you check where the mouse position is, and in case it moves without a certain range around the sizes (mouse_scroll_areax_reduced and mouse_scroll_areay_reduced) then it will start moving to one side at a rate proportionate to how far you are inside that range. When the mouse cursor is not inside the range it will put a drag on the scrolling to slow it down eventually.

Shown below is the area where mouse interaction for scrolling occurs. Remember that it can only happen when zoomed in.

Conclusion

I believe this sums up all the learning goals I set out for this tutorial. Unfortunately, not everything shown in the application could be discussed because of the scope of the tutorial, but I hope you managed to learn the basics about XML data, page filling and camera manipulation. Thanks for reading!

The Crux: Font Editing Software

All the brilliant design, precise calligraphic work, and deep knowledge of kerning won’t mean anything if you can’t translate your work into a computer-friendly format, which is why you’ll need a good piece of font editing software at your disposal. Font editing software comes in a variety of strengths and prices, and works on a variety of platforms. The major players are listed below:
Font Editing Programs

* FontLab Studio is what I use to make my fonts. It is more or less the industry standard, and, as such, isn’t exactly cheap, coming in at $649 (US). A 30-day free trial is available, if you want to try before you buy. It’s available for both PC and Mac. I’ve used FontLab Studio pretty extensively, and can vouch for its excellence, and the vibrancy of the user community.
* FontForge can ostensibly do everything that FontLab can, and it’s free and open-source. That said, installing FontForge (at least under Windows) is not exactly a simple matter (you’ll need to install Cygwin first). Also, the program is not as well documented as FontLab. There was an interesting thread recently over at Typophile about FontForge that you might want to read, if you’re considering taking the open-source plunge. FontForge is available for PC, Mac, and Linux. (If you’re a Linux user, FontForge is more or less your only choice.)
* For those rolling in cash, DTL FontMaster can do everything FontLab can, and more, but it’s quite expensive. FontMaster comes as seven different modules, which I find altogether cool and intimidating. It’s available for PC and Mac.
* FontCreator is another choice, more affordable than FontLab. The program works only with TrueType and OpenType fonts—no Type 1 fonts—and is for Windows only.
* TypeTool from FontLab is a more entry-level product along the same lines as FontCreator. The company says that TypeTool is “for students, hobby typographers and creative professionals who occasionally need to create or customize fonts”. PC and Mac.
* The original king of font editing software is Fontographer which languished in non-development purgatory for years until FontLab bought the code and recently updated it for the Mac. The last version was really showing its age even in the late 1990s, so I’m hoping that Fontlab did an impressive rewrite for its new version. It’s half the price of FontLab Studio, but I can’t vouch for its new user interface, not having tried it. Fontographer is available for PC and Mac, though only Mac users get the latest version.

All of these programs operate on the same principles, differing in specifics, interface, and levels of options and power. So do some research before you buy—download and try some demos, read the rants and debates of other font creators out there, and figure out which font editor works best for you. One path I’ve read about some people taking is to start with TypeTool, see if this whole font-creation thing is something they genuinely love, and then eventually upgrade to FontLab Studio once the limitations of TypeTool become an issue.

Once you have a good font editing program, there are three basic routes to creating a font.
Method 1: Draw it on paper

Tools You’ll Need

* Good Pen
* Good Paper
* Ruler (Optional)
* Scanner
* Adobe Photoshop (or similar image editing software)
* ScanFont
* Font Editing software of your choice

Are you artistic? Have cool handwriting? Well, get a good pen, a stack of good paper, and start drawing your alphabet. (Don’t overlook your choice of pen. Is your font going to be something thick and juicy? Try using a Sharpie. Or will it be calligraphic? Break out your calligraphy pen set. Will it be thin and delicate? Pick a fine-point precision pen for your work.) Draw big, so there’s plenty of detail to capture, and make sure your characters are all the appropriate height (you might want to add ruled lines in pencil to your paper before you begin). Don’t forget to draw all of the characters a good font needs! That means punctuation, tildes, accents, parentheses and brackets, and numerals. You’ll also want to include obscure characters like the thorn and eth. Create a new font in your font editor before you put pen to paper, and look at the standard glyph table it presents you with. There will be characters there you’ve never heard of, but there are typesetters out there who will be expecting to see those characters in your font!

Scan your beautiful work into Photoshop, and then turn your image into a bitmap (black and white—no shades of grey).

Almost there. Open your bitmap image in FontLab’s ScanFont. This nifty little program (which comes bundled as part of the Mac version of FontLab Studio—lucky Mac users!) allows you to take bitmap images and convert them into font glyphs. (Font editing programs work with outlines, which are basically vectors like those used in Illusrator. Scanners and programs like Photoshop work with bitmaps. ScanFont bridges the gap between these two media.) Once this is accomplished, you can either save your font in ScanFont, or copy individual glyphs from ScanFont into FontLab Studio. (Hey, nobody said this would be easy!) And once you have all of your glyphs in FontLab, you can begin the long, arduous, fun process of editing your font towards perfection!
Method 2: Draw it on a tablet

Tools You’ll Need

* Wacom Tablet
* Adobe Illustrator
* Font Editing software of your choice

You can skip many of the above steps by using a Wacom tablet to draw your font glyphs directly into a vector graphics program like Adobe Illustrator. FontLab Studio, for one, supports copying and pasting directly from Illustrator. One cool thing about using Illustrator to draw your alphabet is that you have a wide range of brushes to choose from, so that you can change the style of your entire alphabet with a couple of mouse clicks. One thing I’ve discovered is that, as good as tablet technology has gotten, there’s really no substitute for pen and paper—an alphabet drawn on a tablet will be different from the same alphabet drawn on paper.

Method 3: Draw it in your font editing software

Tools You’ll Need

* Mouse
* Font Editing software of your choice
* The Steady Hand and Patience of a Deity

I’ve created a couple of fonts entirely in FontLab Studio, with just my mouse, a steady hand, and a healthy amount of invoking the Undo command. It can definitely be done, and you’ll potentially be able to generate more precise fonts this way, as opposed to drawing your glyphs outside of your font editor and then importing them. There are, as you might expect, lots of tools in font editing programs that are geared to this process: tools that generate straight lines and perfect curves, and guides that help you align everything with the utmost precision.

Coming Up Next…

Now you’ve got the tools of the trade, the desire to create a font, and a basic idea of the process involved. Of course, the devil is in the details. In the next instalment I’ll address some of the specifics of font creation and editing. Read So You Want to Create a Font–part two.

Source: http://bit.ly/9A6stB

Author: Alec Julien

Let it be filled with joy, work, love, and happiness.

4r Salutes you from Mariano Di Maggio on Vimeo.

Note: I want to thank a very appreciated client who send this awesome salutation card I am sharing with you. Thanks Ugur!

Use the following as a to-do checklist for your future installations and you’ll keep yourself right.

1. Change the Admin Password and Manage Your Authors

WordPress gives you some random concoction of a password that you’re *never* going to remember so the first thing you need to do is change this to something memorable.

Manage your user settings via the Users panel, and you can add any additional blog authors here.

2. Edit Permalinks

By default your articles’ urls will look something like www.leemunroe.com/?p=396. This url structure is poor for SEO and poor for usability (makes no sense to your users).

By changing your url structure to something like www.leemunroe.com/25-hot-female-web-designers you can include the post’s keywords in the url and it makes more sense to your users.

1. Go to Settings > Permalinks
2. Under ‘Common settings’ choose ‘Custom Structure’
3. Enter %postname%/ in the field
4. Or if you prefer to have the category in the url as well, enter %category%/%postname%/

3. Upload Your Theme and Activate It

1. Download a theme or design your own
2. Unzip and upload it to wp-content > themes
3. Activate it via Appearance > Themes (then just click on your theme)

4. Add Your Categories and Change the Default

When you install WordPress the default category is ‘Uncategorized’ and this just looks ugly. Assume at some point you’re going to post an article and forget to select a category – what would you want that post to come under by default? I tend to use News or something general like that.

1. Go to Posts > Categories
2. Click on ‘Uncategorized’ to edit it – change it to ‘News‘ or similar
3. Add your other blog categories

5. Activate Akismet

Akismet is a plugin that blocks comment spam and if your blog allows comments then trust me, you’re going to get spammed.

Fortunately Akismet comes with WordPress, you just need to activate it.

1. Go to the Plugins page in the admin area and activate Akismet
2. To complete Akismet activation, WordPress requires an API key. You can get this by registering on WordPress.com then viewing your profile.
3. Now go to Plugins > Akismet Configuration, and paste in your key.

6. Install Google XML Sitemaps

Google XML Sitemaps generates a compliant XML-Sitemap for your site, allowing the major search engines (Google, Yahoo, Ask, MSN) to easily index your site. Every time you edit or add a post, the sitemap will modify itself.

Click here for Google XML Sitemaps plugin.

Now go to Google Webmaster Central and log in with your Google Account. On the first page, there will be a link to “Verify” your site. Follow the instructions there.

Once that’s done, you can then click the “Add Sitemap” link from the first page and put in the URL to your sitemap, which will be http://www.yoursite.com/sitemap.xml

7. Install WordPress Database Backup

Always good to have a backup in place. Things may go wrong with your server, or you could even make a mistake yourself.

WordPress Database Backup will backup your WordPress blog, and you can even set it so it will email you a backup on a weekly basis, so you don’t have to do anything yourself but activate it.

Click here for WordPress Database Backup plugin, or read a complete guide to automatic backups on Pro Blog Design.

8. Test Your Blog With Dummy Content

You’ll not know what your blog will truly look like until you have thoroughly tested it with multiple posts and all types of formatting applied.

Save yourself some time by using this sample post collection from WP Candy.

Import the sample post collection (Tools > Import > WordPress) and your blog will compile with sample posts including comments, parent/child categories and formatting, allowing you to thoroughly test it and make any theme alterations.

9. Add your RSS feed to Feedburner

First edit your RSS settings. Settings > Reading and you can edit how many posts you want to show in your RSS feed and whether they should show the full post or not.

Now you want to burn your feed with Feedburner. Feedburner will provide you with stats on your feeds and automatically ping services so your new content is updated immediately along with a whole host of other services.

Once you have signed up to Feedburner, change your feed subscription link in your theme. Place the following code between the head tags.

1

<link rel="alternate" type="application/rss+xml" title="Feed Title" href="YOUR FEEDBURNER URL" />

10. Activate your Analytics

Keep track of your users and traffic. I recommend Google Analytics. Other good analytic services available include Mint and StatCounter.

Optional

Here’s a few optional to-dos. Not as major as the above but you still might need to check them.

Change your Media image sizes

Change your image sizes depending on the size of your content area.

Settings > Media

Change your blog tagline

Your tagline may or may not be included in your theme but it’s most likely included in your RSS feed.

Settings > General

Source: http://bit.ly/9ZWLoq

Author: Michael Martin

HTML 5 is not only about the endless possibilities of the <canvas> element or the awesome multimedia support with the <video> tag. HTML 5 offers a wide new range of input types for specific situations, such as url, email, date, etc. In this post we will explore these new HTML 5 input types, along with the <datalist> element, a welcome addition to most input fields that your users will love.

We have talked in the past about the outstanding video capabilities in HTML 5, but video elements are not even close to be as ubiquitous as web forms. Even the most simple search field is a form and  web applications based in HTML 5 are all about forms. Forms are our way to interact with the web and fortunately, the new HTML 5 specification has some very good enhancements to web forms.

For the correctly display of the demo, you should open the demo page in Opera and Chrome. Firefox and Safari lacks support for most new input types. Chrome supports only a few and Opera supports most features.

We’re going to go through each form so load up the demo in a separate tab and let’s start exploring the new input types.

Launch HTML 5 new input types example

There’s no additional stylesheet applied to the forms so you can see what they look like out-of-the-box.

Sliders

The first new type acts like a slider. The type name is range and you can set the minimum value, the maximum value and the step.

<fieldset>
 <legend>Sliders</legend>
 <label for="radioactivity">Radioactivity Level</label>
 <input id="radioactivity" name="radioactivity" type="range" min="-100" max="100" value="0" step="20">
 <label for="slider2">Bigger step</label>
 <input id="slider2" name="slider2" type="range" min="-100" max="100" value="0" step="50">
</fieldset>

Opera renders tick marks according to the step size, so you can see they are far more spaced in the second slider since the value is more than twice the top one.

Steps

Another new input type in HTML 5 is number. When an input is defined as such, it will display arrows pointing up and down to increment the number displayed in the field. You can also set minumum and maximum value as well as the step.

<fieldset>
 <legend>Steps</legend>
 <label for="step">How old are you?</label>
 <input id="step" name="step" type="number" min="1" value="25" max="99"> <span>years old</span><br/><br/>
 <label for="step2">Floating numbers too!</label>
 <input id="step2" name="step2" type="number" min="1.5" value="25.5" max="30.5" step="0.5"> <span>years old</span>
</fieldset>

<fieldset>
 <legend>Date and time</legend>
 <label for="time">Time</label>
 <input id="time" name="time" type="time" value="12:00"><br/><br/>
 <label for="date">Date</label>
 <input id="date" name="date" type="date" value="2010-11-02">
 <label for="week">Week</label>
 <input id="week" name="week" type="week" value="2010-W45">
 <label for="month">Month</label>
 <input id="month" name="month" type="month" value="2010-11"><br/><br/>
 <label for="datetime">Datetime</label>
 <input id="datetime" name="datetime" type="datetime" value="1997-08-29T02:14Z"><br/><br/>
</fieldset>

<fieldset>
 <legend>email, url, tel and search</legend>
 <label for="email">Email address</label>
 <input id="email" name="email" type="email">
 <label for="website">Website</label>
 <input id="website" name="website" type="url" placeholder="http://"><br/><br/>
 <label for="query">Search</label>
 <input id="query" name="query" type="search" size="30" placeholder="type your search and hit enter"><br/><br/>
 <label for="phone">Telephone</label>
 <input id="phone" name="phone" type="tel" autofocus><br/><br/>
 <label for="bgcolor">Color</label>
 <input id="bgcolor" name="bgcolor" type="color"> <span>(Not yet implemented by any browser)</span>
</fieldset>

<label for="email">Email address</label>
<input id="email" name="email" type="email" multiple="multiple" list="addresses"> <span>To add multiple addresses, type a comma after selecting an address.</span><br/><br/>
<datalist id="addresses">
 <option value="sconnor@sky.net" label="Sarah Connor">
 <option value="jconner@sky.net" label="John Connor">
 <option value="kreese@sky.net" label="Kyle Reese">
 <option value="cphillips@sky.net" label="Cameron Phillips">
</datalist>

input[type=email]:required{ background-color: #F6F6CC }

You’ll find them accompanying many different styles. They’re handy effects for web designers because they’re attractive, useful and easy to create with any graphics program. But they have a dark side: they’re frequently abused.

Using amateurish drop-shadows or gradients is almost as bad as affixing a scarlet letter to your shirt to let the world know you’re a beginner or a hack. Even subtle, barely noticeable mistakes can create tensions that undermine otherwise beautiful and effective designs.

In this article, we’ll look at what drop-shadows and gradients do, we’ll talk about how to use them effectively and we’ll look at some examples of mistakes and how to fix them.

What Do Drop-Shadows and Gradients Do?

The job of a web designer is to create patterns of color for glowing two-dimensional screens. (There are a few exceptions to this: websites can be viewed on, say, a Kindle screen, which doesn’t glow; and websites can be printed out on paper.) These screens do not reflect the real world; they’re not even very much like the real world. For this reason, we have no real imperative to make the patterns on our websites bear any relationship to objects in the three-dimensional world we live in.

Operating systems like Unix and DOS have an interface that is nothing but colored text on a screen. Others, like Windows and Mac OS X, are filled with the illusions of real objects. OS X, for instance, has a dock that looks like a table with a shiny surface that recedes in the distance, a menu bar whose beveled edges make it look like it bulges out slightly, and scroll bars that appear to have translucent lozenges.

All of these effects are metaphors. They treat certain elements that we can interact with on screen as though they were three-dimensional objects that interact with light sources in the way that objects in the non-digital world do. It’s a funny thing to do, in a way: all of these light sources and edges and shapes are pure fantasy. Because the objects on the screen are imaginary, why should we relate them to the objects in the real world?

The illusion of space connects the imaginary to a world we are comfortable living in.

The most important reason why we relate imaginary objects to real-world ones is that we are experts at interacting with objects in our three-dimensional world. We have experience in dealing with three-dimensional objects, and we have accumulated knowledge of the visual code that tells us about the relationships of objects to each other in space.

It’s partially because the feat of interpreting light is so remarkable that we take such pleasure in illusion, or in creating the appearance of objects. We are often more engaged by dramatically life-like paintings of common objects like houses and apples than we are by the objects themselves. We humans have created drawings for thousands of years that are intended to present the ideas of objects. Illusory lozenges and tables on the screen are nothing but the most recent manifestation of this long tradition.

There’s more to it than pleasure, though. Shape and position give us information about how objects relate to each other. The long vertical lozenge shape of the scroll bar in the Safari window, for instance, creates the illusion that it sits “higher,” or closer, to me than the elements surrounding it. This gives it greater importance in the design, which is appropriate because the scroll bar is an essential interface element for navigating the page.

Visual metaphors create perceived affordance.

By appearing as an object, the scroll bar creates “perceived affordance.” That is, it links itself by way of metaphor to the properties of real objects that lend themselves to particular uses. A beveled button on a web page, for instance, communicates that it affords pressing. We can make anything on a page clickable, but associating a clickable element with the image of something pressable suggests its function in a clear, obvious and even pleasing way.

Drop-shadows and gradients are basic tools for creating the illusion of space.

Drop-shadows and gradients are two tools that help create the illusion of three-dimensionality and suggest the spatial relationships of objects on the page. When done well, this three-dimensional information makes a design more beautiful and more understandable.

In the real world, drop-shadows are created when an object blocks a light source from striking a surface that is behind it. This is one of the reasons why people say that drop-shadows make two-dimensional designs “pop”: because they make objects appear to stick out from, or float above, other elements.

Gradients appear when one part of an object is closer to a light source than another part. As a result, the closer part appears lighter, and the farther part appears darker. (Gradients get more complex, of course, when multiple light sources interact or when light sources have different colors.)

So, by mimicking the effects of light in the real world, drop-shadows and gradients communicate information about metaphorical objects, imaginary light sources and their relationships.

How To Use Drop-Shadows and Gradients Effectively

Here is one possibility: don’t use drop-shadows or gradients at all.

I mean this, seriously. This is the surest way to avoid drop-shadow and gradient mistakes, and the option should always be considered.

Because tossing drop-shadows on random objects is so easy, they can be an excuse to avoid simpler, better solutions to problems. For bits of text that need to be more prominent, for example, designers will often neglect color, size, weight of the type and many other elements in favor of a drop-shadow.

Similarly, designers often use gradients to make a field of color seem less boring, without figuring out why the overall composition is not dynamic.

If you’re working on a comp for a website, save three-dimensional touches such as drop-shadows and gradients for the end, if at all possible. Use spacing, placement and color to make the design effective before adding the final layer of polish. If you focus on making your designs work without these tricks, you may find that you don’t need them as often, and that they are more effective when you do use them.

Before you plop in a drop-shadow or a gradient, ask yourself, “Is a three-dimensional metaphor necessary for this design?” Am I using it to add useful information about the way objects are related or as an effective component of a sound aesthetic approach, or am I using it as an excuse?”

The Subtler, the Better

For drop-shadows, almost never use Photoshop’s default settings. Photoshop’s default drop-shadow is very dark and is cast to the lower-right corner of an object (the default global light source being 120°, in the upper-left).

Shadows tell you about the light in your environment. Suppose you’re in a dark room with no windows, and you turn on a flashlight. Any object that you shine it on will cast a shadow that’s almost black. That’s because the object is blocking light from the only light source, meaning that no other light is coming from anywhere else to brighten that area.

Now, the shadow won’t be completely black because of the reflected light. Some of the light from your flashlight will bounce off the walls and hit the shadowed area from a direction that’s not blocked by the object. And if you turn on a lamp in another corner of the room, the shadow will brighten considerably. The object will cast a second shadow: the new shadow will appear where the light from the lamp is blocked but will be filled with the light from the flashlight, while the area of the first shadow will still be blocked by the light from the flashlight but will be filled with the light from the lamp.

When we add drop-shadows to our designs, we suggest an imaginary environment for our web page. Dark, hard-edged drop-shadows suggest a dark room with a single light source. Light, soft-edged drop-shadows suggest a room rich with diffuse light.

A well-lit room is the most comfortable environment for users, because it is similar to the kind of environment where we use our computers: an office or study. Unless we deliberately want to avoid that comfort zone, we should bring the drop-shadow settings in Photoshop way down from their defaults. Bring the opacity down to 30 or 40%, or even lower.

Also, keep things simple so that people understand the metaphor without thinking about it. A light source at 120° does not makes much sense. Mac OS X, for instance, puts its light source at 90°, or straight above, which seems more logical. I like to make it even simpler and put the light source directly perpendicular to the screen. To do this, just bring the distance setting on your drop-shadow to zero (this represents the distance from the object that casts the drop-shadow to the object beneath it). At this point, global light doesn’t matter: it’s simply as if a big diffuse light source is coming from behind the user to illuminate the design.

This effect is very common in “trompe-l’œil” designs, the most common of which features the background image or frame of a desk surface, as if one were looking at it from straight above. Film directors such as Alfred Hitchcock, Martin Scorcese and Wes Anderson employ the same effect for their signature God’s-eye-view shots. Such web designs have a kind of effortless comprehensibility, and maintaining consistency across a design becomes easier for the designer.

If you’ve brought the distance setting down to 0 and the opacity down to about 30%, you’re at a good starting point for a drop-shadow. Play around with the size to change how far the surface of the object appears to be from the background on which it sits. Setting the size to 1 pixel, for example, gives you a beautiful effect that’s almost invisible but quite pleasing. Designer Dan Cederholm has made small, simple effects like this an integral part of his style (as demonstrated in his seminal A List Apart article on “Mountaintop Corners“).

You can certainly bring the opacity up if the effect is invisible, but starting subtle and then dialing it up is much better than the opposite. The effect should not be the slightest bit more overt than it needs to be.

For gradients, Photoshop has a lot of fancy defaults. These may have some good uses, but they certainly have unlimited poor uses, so steering clear of them is usually wise.

Instead, select the default black-to-white gradient. Then select both the black and the white and make them both the base color of your element. Now that you have a base, pick either the dark side or the light side and adjust it to be just slightly darker or lighter. Again, the subtler, the better. (Some of the best gradients I’ve come across I had to verify with the eyedropper tool in Photoshop to make sure they were there at all!)

The greater the contrast between the light and dark, the rounder the surface will appear. For some things, such as navigation menus and buttons, some roundness is appropriate. But for objects that should appear flat, keep the contrast low.

And remember, the lighter side should face the direction of your light source.

This kind of gradient is wonderful because it mimics the gradients we see around us all the time. Nothing in the real world is truly a single color field, because it always has some kind of relationship to a light source. Look carefully at the pages in a book or at the ceiling around your overhead light: you’ll find gradients everywhere.

Examples of Mistakes and How to Fix Them

The web has many obviously ugly gradients, but these are not usually done by professional designers. Rather than show egregious mistakes, I’ll illustrate a few ways in which subtle errors can create tensions in otherwise excellent designs.

Uniform Shadows for Overlapping Objects

Overlapping objects imply a difference in their distance from you (determined partly by their thickness). Designers, though, frequently use identical drop-shadows for overlapping objects. So, the information conveyed by the drop-shadows conflicts with the information conveyed by the overlap, undermining the illusion of dimensionality.

Seeing conflicts such as these makes me uneasy, and the more I focus on them, the more my head hurts. Users should take pleasure in your design, not feel pain!

You can read more about this issue in “Build a Better Drop-Shadow,” a guide by Jacci Howard Bear on About.com.

Abrupt Edges

The corners of real drop-shadows wouldn’t have hard edges unless they had absolutely no reflected light—which would be a very unusual situation. Rather, their corners are usually rounded by the rays of light that creep around them.

Here’s a drop-shadow with an unrealistically hard edge:

This otherwise lovely design has almost no dimensional illusion anywhere but has a drop-shadow along the right sidebar. The designer perhaps wanted to lower the sidebar’s hierarchy on the page, an effect that its blue background helps achieve. Not only is it unnecessarily dark, though, but the implausibly hard edge stares the visitor in the face.

At the bottom of the sidebar, you can see a rounded transition, where the designer has created a more plausible effect. But you can see why he didn’t repeat it at the top, because it would jar with the clean horizontal line set by the well-aligned top elements. Rather than demand the realism of this rounded transition, let’s fix it by toning down the drop-shadow as much as possible.

Here, I have made the drop-shadow so light that it does little more than suggest it is sitting farther back. Because it’s so light, the clean line of transition isn’t ugly or distracting.

What the heck is going on behind that object?

Sometimes, a drop-shadow goes nuts for no obvious reason, as with the blue box surrounding the W3C logo below.

Why is the drop-shadow so far back from the object, and so rounded? The more I try to understand the story being told by this drop-shadow, the more confused I get. My guess is that the designer wanted to give more prominence and weight to the logo, which the drop-shadow helps accomplish, but it disrupts the harmony of the page so much that it’s not worth it.

Don’t let your gradients suggest different light sources.

In this otherwise excellent design for WolframAlpha, objects on the page have gradients ranging from white to pale orange. The problem is that the gradient in the header region has white at the top, implying light from above, while the page elements lower down have white at the bottom, implying light from below.

You could argue that I’m over-thinking this, that gradients don’t have to match up with light sources. That’s possible, but subtle gradients like these have an inherent metaphorical relationship to the gradients we see in the real world. Let’s switch the direction of the gradients lower down on the page so that they imply a light source from above:

And we get light source harmony.

Ultimately, you’re free to do as you please.

Because the objects on a web page relate to real objects only by metaphor, their effectiveness is essentially subjective. The connection between an image of a button and an actual button has no reality beyond the mind of the user.

We designers are not required to make our metaphors consistent with reality, but being thoughtful and careful about the many levels of communication in a design helps us make our websites more harmonious.

And our care and consistency helps make the user’s experience of the website comfortable and even delightful.

Author: Nate Eagle

Source: http://bit.ly/6tWhXV

Here is a very nice tutorial for everyone migrating from flash 8 to flash cs3 by Jen deHaan @ Adobe: Adobe® Flash® CS3 Professional introduces many new and changed elements in the workspace that improve the way you work with Flash. It also features new tools you can use to create exciting new applications, or [...]

Here is a very nice tutorial for everyone migrating from flash 8 to flash cs3 by Jen deHaan @ Adobe:

Adobe® Flash® CS3 Professional introduces many new and changed elements in the workspace that improve the way you work with Flash. It also features new tools you can use to create exciting new applications, or integrate with other components of Adobe Creative Suite 3.

This article discusses the new features in Flash CS3 Professional and how they compare to similar features in Flash 8, or how they have changed. Therefore, it’s written with the assumption that you’re already somewhat familiar with Flash. If you are a Flashthusiast ready to update to Flash CS3, read on. You will learn about the changes you need to know about when starting out with the latest version of Flash, whether you want to draw with the enhanced Pen tool or write ActionScript™ 3.0 code. Specifically, this article covers:

- Changes made to the Flash workspace, such as new ways to manipulate panels and great new interface features. You also learn how to optimize your workspace to make working with Flash easier.

- New features in the Flash authoring tool, such as control over the color of your bounding boxes, new copy-and-paste functionality, and changes to 9-slice scaling.

- Improvements made to file import, such as support for PSD and AI files. You also learn about new ways to integrate products, such as the enhanced workflow between Flash and Adobe® Device Central CS3.

- Improvements to the drawing tools in Flash, such as enhancements to the Pen tool, and the brand new primitive drawing tools that let you create shapes easier.

- Improvements to the video components and cue points in Flash and Flash Video Encoder.

- The new ActionScript 3.0 components, including how they compare to the V2 Components found in Flash 8. You will also see a side-by-side comparison of how to create the same components application in ActionScript 2.0 and ActionScript 3.0.

- Improvements to the debugger and coding tools in Flash, and changes to ActionScript. You will find a side-by-side comparison of ActionScript 2.0 code and ActionScript 3.0 code. You’ll also learn about, and how to use, a document class in an ActionScript 3.0 application.

Source: http://bit.ly/h1KaZY

Source: http://bit.ly/d32lM2

It isn’t always necessary to use a 3D program to create 3D text — they’re expensive and overkill if you just occasionally use 3D elements. Adobe Illustrator is more than adequate in allowing us to create some 3D objects with some basic shading for our text. In this tutorial, we are going to learn how to make some 3D text using Adobe Illustrator, and also discuss techniques of shading the text to give it a clean, consistent, and stylized look.

Preview

Here is what we’ll be constructing in this tutorial. Click on the image below to see it in full scale.

Step 1: Adding the Text

We are going to start off by typing out some text. Click on your Type Tool (T), click and drag a box on the artboard for your text, then type out “DESIGN TEXT” in two lines. This will give us the shape we are looking for. You can adjust the size of the text by opening up the Character Panel (Window > Type > Character or press Ctrl/Cmd + T). The font I am using is Adelle Basic Bold, but you can use another similar font if you prefer.

Step 2: Convert Text to Paths

Now we are going to covert the text to shapes so it will be easier to work with. Using your Selection Tool (V), click on the text and then go to Type > Create Outlines (Shift + Ctrl/Cmd + O).

Step 3: Adjusting the Kerning and Leading

The kerning (space in between the letters) and leading (space in between the top word and bottom word) of the text should be adjusted to make everything fit tighter.

First, we need to ungroup the text, so go to Object > Ungroup (Shift + Ctrl/Cmd + G). This will make it so we can click on each letter on its own.

Click and drag a box around “TEXT” with the Selection Tool (V) to select just that word, and then move it up closer to “DESIGN”.

To fix the kerning of “DESIGN”, we want to drag a box around “DESIG” — excluding “N”, the last letter — with the Selection Tool (V). Since we want the “N” of “DESIGN” and the “T” of “TEXT” to stay lined up, move the slected letters in towards the right by a space or two. Repeat this with “DESI”, “DES” and so on until the text is tightened up evenly.

Step 4: Adding Color

Since it will be easier to see the sides of the 3D text, we are going to add color to the letters. First select all the letters of “DESIGN” and fill it with a yellow.

Note: If you don’t see the Color Panel open, you can go to Window > Color (F6). And if you don’t have RGB set up as your color mode, you can click on the arrow at the top right of the Panel, then click on RGB in the options.

We are going to do the same with the “TEXT”, but it will be a light blue.

You can put the colors in your Swatches Panel (Window > Swatches if you don’t see it) by simply clicking and dragging your color into it from the Color Panel.

Step 5: Adjusting Size

We can start working on the 3D text now. First, though, we should make the text fill up the artboard a little bit more. Select both words, hold down Shift (to keep the text from distorting), and then drag a corner anchor out to make it larger.

Step 6: Getting into the 3D Text

Let’s start working on the 3D text. First, group the letters by choosing Object > Group (Ctrl/Cmd + G) so that when we make our text three-dimensional, the letters stay as one shape instead of becoming individual 3D shapes.

Next, choose Effect > 3D > Extrude & Bevel, which will open an Options dialog window. In the 3D Extrude & Bevel Options dialog window, click on the Preview option check box to see how the text is going to look.

These are your default settings whenever you open up these options.

Step 7: Adjusting the 3D Text

Let’s start playing around with the 3D Extrude & Bevel options. The blue square on the 3D box in the options dialog window is the face of the text. You can click and drag each edge of the cube and see how they change your 3D text.

For our text, we want to make the words look like they are lying down on the ground, so tweak the Position options in such a way that your text looks like it’s flat on its back.

Step 8: Adjusting Perspective

The top right corner of “DESIGN” looks out of place and not really within the perspective. To fix this, we can adjust the Perspective to about 50^o for our text.

Step 9: Adjusting Height

Finally, we are going to adjust the height of the sides of the text with Extrude Depth to make them slightly shorter (to 40pt).

For our purposes, those are the only options that we need to change on the text, so push OK to commit the settings.

Step 10: Converting the 3D Text to Paths

The text looks OK: it has some basic shading, but overall, it’s pretty dark and pretty bland. Besides, we want to add some stylized shading onto it to make it more interesting.

To start editing the text, go to Object > Expand Appearance. This will take the 2D text and make paths for the 3D text.

We need to ungroup the text so we can start working on different parts of it.

Tip: Grouping and ungrouping objects are two common Illustrator commands. I suggest getting used to the keyboard shortcuts for them — Ctrl/Cmd + G (Group) and Ctrl/Cmd + Shift + G (Ungroup). In this instance, the keyboard shortcut will be easier because we are going to have to ungroup quite a few times to make sure everything is ungrouped.

Step 11: Adjusting the Text Face Color

Select the face of the “DESIGN” letters by clicking on one face, holding down Shift, and clicking on the others to select them all at once. To apply the color, click on the yellow swatch that we put into the Swatches Panel.

Do the same with the “TEXT” and the blue color we chose.

Step 12: Creating the Shadow Colors

To shade the sides of the text, we need to create more colors. We want to have two more yellows: a dark one and a darker one.

To make the other two yellows, click on the original yellow color that we used for the “DESIGN” face in the Swatches Panel and subtract 40 from R and G (e.g. 247, 187, 14 becomes 207, 147, 14). Click and drag this yellow into the Swatches Panel and create another yellow by subtracting another 40 from R and G so it becomes 167, 107, 14. These will be our 3 yellows.

Repeat this for the blues as well, subtracting 40 from G and B so it becomes 113, 146, 170 and 113, 106, 130.

Step 13: Simplifying the Curves

You’ll notice that when you click on some of the curved shapes, they are split into two pieces. We want to make these two pieces into one, so open up the Pathfinder Panel if you don’t have it open (Shift + Ctrl/Cmd + F9). Click on one part of the side, and then holding down Shift, click on the other one.

Click the Unite command in the Pathfider Panel, then click Expand.

This will combine the two shapes into one. Do this with all of the curved shapes that are separated.

Step 14: Adding Dark Shadows

Now we need to decide which sides are going to get our light source and which sides aren’t. Since the light source is already set up on the right, we’ll use that. Therefore, the bottom parts of the text and the left sides of the text are going to be the dark yellow, with the left sides the darkest. So let’s use our darkest yellow and blue on the left edges of the text.

Step 15: Adding Lighter Shadows

Use the middle blue and yellow shades on the rest of the sides of the text.

Now, we can stop here and stay with this block shading, or we can go a step further and add some color gradients to make the shading richer. For this tutorial’s sake, let’s go ahead and add in some gradients.

Step 16: Creating Shadow Gradients

Let’s create some gradients now. Open up the Gradient Panel (Ctrl/Cmd + F9) if you haven’t already.

Click and drag the brightest yellow color swatch to the left side of the gradient, and the second yellow to the right side of the gradient. Now click and drag the gradient into the Swatches Panel. Create a gradient the same way as the first one using the middle yellow and the dark yellows. You should now have two yellow gradients. To apply the gradients to particular pieces, you just select that piece and click on the gradient color swatch.

Repeat this with the blue gradients.

Step 17: Adding Gradients to the Lighter Shadows

Now, remember our light source is coming from the right, so the shapes are going to cast a shadow from right to left. With that in mind, click on the lighter text sides and then click on the lighter gradient.

To adjust the gradient, click on the Gradient Tool (G) from the Tools Panel. You can click and drag across the shape to adjust the gradient.

Step 18: Finishing Up the Lighter Shadow Gradient

Continue adding a gradient to the lighter areas of both the words. There is no exact science to the way we’re adding in the color gradients, it’s just a matter of getting a difference in color between the different pieces, making things stand out more, and giving them subtle variations in lighting.

Step 19: Adding the Darker Shadow Gradients

Repeat what we did with the lighter areas and add dark gradients to the darker areas. The darker areas are going to be lightest at the top and darkest at the bottom (where there is the least amount of light).

Step 20: Lightening the Text Faces

We can call it good as-is, but if we want to make the text faces a little more visible, we can click on each letter face (holding down Shift to select the invidual pieces together), then Ctrl/Cmd + C (Copy), and then Ctrl/Cmd + F (Paste in Front).

Fill these copied letters with white. Open up the Transparency Panel (Shift + Ctrl/Cmd + F10). Change the Blend Mode to Overlay and the Opacity to 30%.

Tutorial Summary

That’s it folks. This tutorial went over some techniques for making great 3D text with accurate shadings. We didn’t use 3D-rendering software — just Illustrator. The great thing about constructing 3D objects in Adobe Illustrator is that you can adjust the size of the lettering so that it can be as big or as small as you want (because it is, after all, a vector object) and import them easily into other Adobe Creative or Production Suite software as well as third-party products.

1. Double Spaces

“But I was always taught to put two spaces after periods.” Unless you plan on pulling out the old typewriter and white out, get rid of the double spaces. To give you some perspective, when this practice was the standard, they also taught you that ducking under your desk in the event of an atomic bomb attack would save your life. Spaces are our writing system’s method of telling our brain to pause for that split second. Having an extra space causes the brain to stall for an unnecessary amount of time, which could cause you to lose your audience. They also create holes of white space in your paragraph, which is not aesthetically pleasing in the least.

2. Inappropriately Sized Type (Too Big or Too Small)

There is a theory that the larger the type, the more attention it grabs. That is partially true, but only in the same way that ugly things grab a lot of attention. In my experience, nearly everyone sets their type too big. It must be legible, but fonts set too large cause the mind to process it slower, which could cause you to lose your audience.

Two things to keep in mind: All fonts are slightly different sizes and weights, so two fonts could match when one is set at size 10 and the other size 11. And you must know your audience – An invitation for a 50 year high school reunion will undoubtedly need a larger font size than a 10 year, for obvious optical reasons.

3. Widows and Orphans

Appropriately named, widows are single words that exist alone on the last line of a paragraph and orphans live by themselves on the first line of a page. They create visual holes in the flow of text, which could again cause you to lose your audience. Save these poor souls by slightly increasing your column width or editing your text to fit them on the previous line.

4. Computer Styling

Fonts are not Silly Putty, so don’t treat them as such – do NOT stretch, condense, expand, slant, or otherwise compromise the integrity of the art form that someone years back created by hand drawing every curve. If you need your type to be more condensed or expanded, choose a font that has a condensed or expanded typeface.

Example difference between font and typeface:

Font = Helvetica. Typeface = Helvetica Bold or Helvetica Condensed.

5. No Kerning

“You mean the computer doesn’t do that for you??” If it could simultaneously do the Charleston and make you a sandwich maybe, but for now, computers do not automatically make the spacing between every letter perfect. Because every letter is shaped differently, too much or too little space between letters is often created. Remedy this by individually increasing or decreasing spacing between letters, but relax, type under size 24 is generally considered small enough to not need scrutinized kerning.

Hope this was enlightening for you all. If you take these notes to heart, please keep these in mind when you produce your content. And my apologies in advance for pointing these out, as they will now probably annoy you everyday as you notice all the bad typography that litters our world.

Source: http://bit.ly/auJOkN

Author:  Zack Travis