Linden Lab does not provide any advertising capabilities other than our Search listings in Second Life. In general, it’s important to understand that Linden Lab views Second Life as a platform and focuses its efforts on development and improvements of the platform. We do not create content or services within Second Life.

Here are some suggestions of ways to use Second Life as an advertising medium.

Second Life to drive blog coverage.

One way to advertise is by simply creating a presence in Second Life and publicizing it. Many Second Life Residents are active in blogs and other internet activities. Many companies have found their activities in Second Life generate significant mentions in web and blog postings. Images in Flickr and videos involving Second Life on YouTube are additional ways to activate buzz from Second Life. Examples are American Apparel 108K Google hits and Addidas (87K impressions from their Second Life presence).

Presence in Second Life

Some companies have found success with an ongoing presence in Second Life and driving visitors though related or unrelated events – technical talks (Intel), or concerts, for example. The key, as with a web site, is to provide fresh content that gives Residents a reason to visit and interact with you. Others have created places with activities to engage Residents (Vodaphone and Weather Channel). As with real world properties (whether web or physical), to be successful you’ll need to promote your presence and activity to the Second Life community through group notices, event notices, articles and ads in Second Life related periodicals, or any other means appropriate.

Active advertising in Second Life

The most difficult, but probably the most rewarding in the long term, is to create an active presence in Second Life that drives the message or experience you are trying to promote for your product or brand. If it’s a product, you can script ways for people to interact with the Second Life version of the product. For example, while avatars don’t need to eat or drink, if your product was a soft drink, you could provide a script that had people laugh and dance around whenever they took a ‘virtual’ drink. You could also provide a hat with your logo which people could give to others, creating viral distribution of your brand. The hat could be scripted so giving it to someone opened a website or a Second Life notecard with more information about the product, or a coupon for a discount on the product.

Distributed Advertising in Second Life

There are many popular venues in Second Life, from malls to clubs. Many of them will put up posters or kiosks that can distribute information, links, objects, or provide teleports to the sponsoring location, for a small fee.

Advertising networks in Second Life

There are a number of businesses that have built distributed advertising systems in Second Life, so you can pay by location and time to have your ad displayed. Some of the systems are limited to images, while others enable some level of interaction with content (link to a website, teleport to a location, a notecard with additional information and links). You’ll find some of them listed in the Tools section of the Solution Provider Directory on the Second Life Grid website.

Person-to-person advertising

Several companies has been very successful in using avatars as a promotional vehicle. Avatars engage people in conversation and offer links to websites, coupons, or other direct follow-up actions. Some companies offer camping solutions at a per-lead cost. It has been comparable or lower in cost than other media. The quality of leads is questionable as the effectiveness of using static camping chairs as the primary driver for Residents provides only small amounts of $L currency as the draw for participation. Imax was reportedly successful with this approach.

An expanded form of Person-to-person advertising can take the form of brand personification, whereas brand icons or personalities are realized in Second Life for engagement with residents. An example of this would be Nestle Nesquik where the Nesquik Bunny Avatar entered Second Life, attended a variety of events, handed out in-world bottles of Nesquik Drink, drove visits to several campaign websites, and assumed the role of ‘event maestro” over the course of 4 mouths. Nestle Nesquik was purported to be a successful example of how real & relevant interaction yields emotional, non-breaking connections with brand personifications.

Media in Second Life

Every parcel in Second Life can incorporate an audio and video stream. You can simply publish a streaming URL for audio or video and any land owner can add your URL to their land to enable the stream. You will need to provide them with a reason to do that – good content, or payment, as well as publicizing your stream so Residents know about it. In addition, there are radio and tv stations in Second Life which provide streaming broadcasts. These streams can incorporate advertising, as radio and tv do in real life.

Media in Second Life

In-world publications offer reasonable advertising rates for products and services.

Articles about advertising in Second Life

• New Program Guarantees Visitors to Your Business
• Advertising in Second Life
• In ‘Second Life,’ a Virtual Ad Agency Arises
• While not exactly about advertising, this article has some ideas about advertising in Second Life:

Advertising Dos and Don’ts

Advertising networks in Second Life

These are links to companies with ad networks in Second Life. Some of these are listed in the Tools directory on the Second Life Grid website.

• Search in SLClassifieds under Services
• SL Business Directory – A lot of second life advertising services, including free ones: guaranteed visitors, picks booster, Second Life search analysis tools. Free categorized listing of SL businesses, a largest one at the moment
• Subscribeomatic
• Moderne Interactive – Formerly TheSLAgency
• SLContext Ads
• Apez.promote advertising service
• RezAds Grid-Wide Advertising
• SLearth Advertising Network
• RezzMe Advertising
• Crash-Vertisement

In-World Media and Publication, Magazines

• Second Life Business News magazine
• Uncover Magazine
• Role Magazine
• The Best of SL Magazine
• Second Style Magazine
• Sxy2nd Magazine
• Prim Perfect Magazine
• Essence of Style Magazine
• Avenue Magazine

See also

• Second Life Radio & TV
• Best Neighbor Ad Hiding Script
• A listing of Resident traffic to commercial properties (Tateru’s Mixed Reality Headcount
• Marketing Your Products In Second Life

Reference: Anthony Contradi – Creative Manager
Phone Number: 631.200.5415 Ext. 10

Employment: Full time employee
Time Employed: 4/07-10/08

• I was selected out of 5 web designers to perform redesign of entire Vitamin World website.
• Company sales increased from 55% to 85% due to conversion rate on new website.
• Developed and successfully implemented formal style guides to establish a consistent brand presence, NBTY.
• Collaborated with merchandise managers, project managers and programmers to ensure proper functionality of the website.
• Managed time effectively; coordinated activities and resources to maximize efficiency.
• Designed email, site graphics and landing pages for all NBTY brands such as:
Puritan’s Pride (Spanish and Japanese), Vitamin World, Doctor’s Trust, GNC,
MET-RX, Vitamins.com, FreeVitamin.com.
• Analyzed site reports to develop precise website design layouts.
• Utilized wire frames to outline the initial phase of a project.
• Mentored and assigned projects to interns and junior web designers.
• Created web static and animated advertising banners; produced marketing graphics for multiple advertising campaigns.
• Ensured Internet Browser compatibility for best user experience, maintaining a technical knowledge by reviewing professional publications.

Reference: Saisha Grayson
Phone Number: 516-933-8000

Employment: Contract freelancer

Jaroff Design is a full service design consulting company combining a devotion to beauty with an unparalleled knowledge of metal and glass custom fabrication. Jaroff Design hired me to redesign their website and to make it search engine friendly. I studied their website needs and company industry and came up with a comprehensive plan to better market their website.

Elements, Web Tools & Software Used
• Drop Down Menus
• Site Search Feature
• SEO Friendly URLs
• Google XML SiteMap
• Google Analytic
• SEO Meta Elements
• Email Address Subscription Feature
• Word Press Content Management System
• Photoshop
• Dreamweaver
• CSS/ XHTML
• JavaScript
• FlexScroll
• AJAX

Free Stock Photography Sites

Free Range Stock
Just sign up for a free membership, log in and download high-quality, high-resolution free stock photos and textures. All images are at least 2400 x 1600 pixels and can be used for personal and commercial use.

Stock.XCHNG
Stock.XCHNG is one of the leading free stock photo sites on the Internet featuring over 400,000 quality images. Photos are available in five different sizes for print or web. Visitors can see the popularity of an image by viewing how many times the photo has been downloaded.

Every Stock Photo
Every Stock Photo is a search engine for free photos. These come from many sources and are license-specific. Membership is free and allows users to rate, tag, collect and comment on photos.

MorgueFile
This site contains free high resolution digital stock photographs and reference images for either corporate or public use. The purpose of this site is to provide free image reference material for illustrators, comic book artist, designers, teachers and all creative pursuits. A classic resource that has become standard for free stock photography over the last years.

Mayang’s Free Textures
Mayang’s Free Textures is a texture library with over 3,800 free to download, high-resolution textures. Featuring everything from brick walls, leaves, water, paint effects and so much more, these images come in handy for any designer.

Vintage Pixels
Vintage Pixels is a large database of historical, high-quality, free-for-use images which allows people to share their archived photos. Visitors can download image for print, or use in graphic design, as well as upload images to add to the ever growing album of vintage images.

Photogen
Photogen is a source for quality, high-resolution free stock images. Photos are available for commercial or personal projects. Users must register for a free account to download images.

Free Stock Photos
Download free images to use for professional or commercial use. Categories include Athens, Christian, Egypt, Israel, Rome, Scenery, Sky, Weather and many more.

ImageBase

ImageBase offers free high resolution photos. In addition to beautiful images, the site also offers free PowerPoint Templates.

Kave Wall
Kave Wall presents free stock photos, image and textures. CD’s are available for download in various categories.

Turbo Photo
Visitors can browse and download 2,000 free stock images from 10 categories on TurboPhoto. Also available are high quality, professional stock images.

Free Stock Photography
Free Stock Photography offers a plethora of completely free Royalty-free stock photography. Browse over one hundred categories from animals to toy and games.

Freepixels
Freepixel offers free stock photography for any use. You can easily search for images as well as make full use of the tag cloud. Over 3,000 images are featured and some are usually found on paid registration sites.

Stock Vault
Stock Vault features over 13,000 free stock photos from over 3,600 photographers. The site’s helpful tutorials, videos and articles can also be a powerful tool for any designer.

FreeFoto
FreeFoto showcases a large collection of free photographs. A link back and attribution are required for some images. The site is made up of over 100 thousand images with over three thousand categories.

BigFoto
BigFoto has a large variety of free images from different cities and continents as well as unique sceneries. Choose Royalty-free photos of San Francisco, Egypt, Germany, Israel or Prague.

Geek Philosopher
Geek Philosopher offers free stock photography. Visitors are encouraged to use the images for free but are required to post a link back to the Geek Philosopher. Browse several categories, such as food, nature, art, animals and texture.

Commercial Stock Photography Services

Corbis
Corbis features unique and helpful options to search images. Users can filter by date photographed, photographer, orientation, number of people in photograph and more. Also featured are premium collections from famous photographers, such as the Andy Warhol Foundation and Ansel Adams. Most images range from $10 to $600.

Photocase
Photocase is a community of photographers and their high-quality photos. Users can vote on images, leave comments, contact a specific photographer and see related images. Images are purchased with credits and are available for web or print. DownloadCredit Packages are 16 downloadcredits for $25, 40 downloadcredits for $50 or 80 downloadcredits for $90. Subscription plans available include 6 credits daily for $99 per month or 16 credits daily for $199 per month.

Pixmac
Pixmac contains over 6,500,000 digital pictures, features unique and helpful options to search images that are available for $1, $2 and $3 per image. The resource can be useful for low-budget projects. Also various subscription plans are available.

iStockphoto
iStockphoto offers photos, vector illustrations, video footage, audio tracks and flash files. Visitors can sign up for their “pay-as-you-go” credit package from $18-$1,900 or save even more by purchasing a subscription for three months, six months or one year. Subscription prices vary depending on desired daily credit limit set but range from $979-$46,150. Corporate subscriptions are also available.

Fotolia
Fotolia features photos, vector images and videos and has over one million members. Users can purchase credits for a single download for $1 per credit. Subscriptions are also available, ranging from one month up to one year from $750-$21,600, depending on length and downloads per day.

Free Digital Photos
Thousands of images are available for corporate and personal use. Photos are free but the site requires a link back or there is an option to buy a high resolution version.

Big Stock Photo
At Big Stock Photo visitors can choose from over three million photos in categories such as fashion, summer, business, food, success, sports and more. Image prices range from one credit for a small image to six credits for an extra large image. Prices per credit vary from $1-$2.50 depending on amount purchased. Images are available in four different sizes for use in print and web.

Shutterstock
Shutterstock offers over seven million royalty-free stock photos, illustrations and vector images, and more than one hundred thousand video clips. They offer a “25-a-day” subscription at $249 for 1 month, $709 for 3 months, $1,349 for 6 months or $2,559 for 1 year. You can also choose the “On Demand” subscription, for JPG & Vector files of all sizes, at $49 for 5 downloads or $229 for 25 downloads. If you prefer only the small and medium size options, you can get 1 year at $49 for 12 downloads or $229 for 60 downloads. The “Enhanced” subscription allows you to download images at any time within the year, including TIFF, JPG and Vector, at $199 for 2 downloads, $449 for 5 downloads, or $1,699 for 25 downloads. Footage subscription plans are also available.

Photos.com
Photos.com offers over two million Royalty-free images by subscription. Their collection contains more than 390,000 professional, model-released photos in various categories. The basic subscription allows you to pay once and download up to 750 images per month from $99-$449. They also offer a “Photos.com Plus” subscription giving you access to millions of files including images, illustrations, fonts, flash and audio files from $249-$1,699.

Stockxpert
Stockxpert has over three million images with over forty thousand images added per week. Videos and photos are available in five different sizes. Subscriptions allow for up to 25 images downloaded per day at $219 for one month, $499 for three months or $1,299 for one year. Visitors can also pay per download; credits are $1 and available in many quantities.

Getty Images
Getty Images is a leader in providing digital media worldwide, creating and distributing a range of assets – from Royalty-free stock photography and editorial images to footage, music and multimedia. One unique part of Getty Images is it features creative images to up-to-the-minute editorial coverage – including news, sports, and celebrity photos. Prices range from $49 to several thousand dollars

Can Stock Photo
Can Stock Photo is a photography agency that offers professional stock photography. The site has over 1,492,000 images to choose from and three purchasing options. Choose from several subscription durations, weekly, monthly or yearly, and volumes, up to 10 images per day or 25 images per day, from $35-$1,199. Credits are available at 50 cents per credit. Images vary from 2 credits for a small image to 10 credits for a large vector. Photos can also be purchased without credits or subscriptions, but are not offered at a discount.

123RF
123RF sells Royalty-free images and vector images. If you do not find the perfect photo amongst their four million images, they offer 24-hour live support. 123RF offers the flexibility to choose between two modes of purchase; monthly subscriptions or credit purchase. The Basic Subscription Plan allows up to 5 images downloaded per day or the Premium Subscription Plan allows for 26 downloads per day. Both subscriptions are available for 30, 90 or 265 days. Prices range from $89-$1,799. Credits are $1 each and available in various quantities.

Vectorious
Vectorious has a wide variety of stock vectors. The site features over 8,000 vector illustrations and three types of subscriptions: $15 for one month, $40 for 3 months or $70 for six months. The daily limit is twenty images per day.

Veer
Stock photography, illustrations, typefaces and unique merchandise are all available on Veer. Images can be found in up to six sizes from $1 to $20, depending on the size of the images. Veer features images in hundreds of categories and also gives users the ability to easily create a lightbox.

Jupiterimages Unlimited
At Jupiterimages Unlimited you will find millions of images from eight premium collections and four subscription services, alongside millions of value photos and illustrations. Jupiterimages Unlimited has a flexible subscription plan as well as Rights-Managed and Royalty-free images. Monthly subscriptions start at $599 to $1,499. Annual subscriptions range from $599-$3,399 depending amount of access to photos. Most plans are limited to 750 downloads per month.

Spffy
Spffy is a great way to find free images. The site indexes some of the most prestigious stock photography agencies such as StockPhotoFinder, Corbis, Jupiter Images, Fotolia, NASA and Super Stock. For video and footage, Spffy searches YouTube, AOL Video, Live Video StockMotionFinder and others. Visitors have different ways to search: via a dedicated stock photos image resource search, web photos (flickr especially), or in the public domain. Prices many vary depending on source of image.

PunchStock
PuchStock has over two million Royalty-Free photos and illustrations from JupiterImages, Getty Images, Corbis and over 50 other brands. PunchStock also offers virtual CD’s, which you can download instantly, and traditional CD’s, which can be quickly shipped. As a bonus, the site usually features monthly specials or promotions.

VivoZoom
VivoZoom showcases fabulous commercial images you can trust. It is the “only microstock site that guarantees its images are legally safe to use.” Pay-As-You-Go Plan allows members to choose the number of downloads from 5 to 50 downloads for $39 to $149. Subscriptions plans are also offered; monthly-$279, quarterly-$699 or annually-$2,499, limit 15 downloads per day.

FotoSearch
FotoSearch is a provider of Royalty-free and Right-managed stock photography, illustrations, maps, videos and audio. Their subscription package allows up to 25 images downloaded per day for $249 a month. CD’s and DVD’s are also available and grouped by category.

Dreamstime
Dreamstime features over six million images from over 70 thousand photographers. Users can purchase credit packages; 5 credits-$7, 12 credits-$15, 25 credits-$25, 52 credits-$50, 108 credits-$100. Subscriptions are also available for 1 month, 3, months, 6 months or 12 months. Prices range from $98-$3,739. The site also features free stock photos, illustrations, vector and raw images as well as a blog for people to interact, make friends and share tips and techniques.

PhotoSpin
PhotoSpin presents two subscription levels to fit your design needs. Both offer high resolution photos, up to 3600 pixels for $299 per year or 5100 pixels for $499 per year. Photos, illustrations, fonts, audio and video are all available for download.

Inmagine
Inmagine is one of the leading supplier and distributor of Royalty-free digital stock photography. With more than 3.5 million Royalty-free stock images, they hold one of the most competitive lists of publishers in the market today. Sales support is available 24 hours a day, Monday though Friday, to help with any questions or a research consultation. Prices range from $29-$870 on average.

Unprofound
Unprofound is a unusual or unorthodox stock photography site. This is because images are categorized by color. Images are completely free to use.

Matton Images
Matton Images is a complete Royalty-free resource. Images and illustrations are listed by category and theme. Subscriptions are available for 3 months, 6 months and 12 months from $360-$1,189.

Comparison Table

Photo Licensing

Photography is often quickly bought and sold in several different ways with various licensing agreements. It is important to understand the copyright on the image you are using or purchasing as to not violate the law. More often than not, simply finding an image off the internet, whether through a search engine or a website, and using it is in violation of its intended use and can result in a lawsuit and severe penalties. Some of the most common licenses used are Rights Managed or Royalty-free.

The value of a Rights Managed image, or sometimes called “licensed images” or “RM”, is determined by the use of the image. This includes the intended use of the image, duration it will be displayed, country it will be used in, size and exclusivity. Royalty-free stock photography, commonly referred to “RF”, offers a photo buyer the ability to use an image in an unlimited number of ways for a single license fee.

About the author

Jourdan Wilkerson is the Marketing Coordinator at lifeBLUE Media, a top-level Web agency that specializes in custom web design and development as well as search engine marketing.

Creation

Pen Tool

The Pen tool (P) – simple to use but difficult to master. It provides a precise method for creating paths, but requires an experienced hand to plot naturally flown curves. The power unlocked by mastering this tool is well worth the time needed to do so. While no amount of instruction can make you a Bezier master, below are some tips to keep in mind as you practice.

• Always use as few points as possible.
• Place an anchor at every acute or abrupt angle.
• Mid-curve anchors should be placed to comfortably accommodate curve transitions.
• To help set anchor points, you can turn on the ‘Rubber Band’ option – located in the drop-down next to the Custom Shape Tool button in the Pen’s property bar. This setting will allow you to see the curve connecting the last anchor point with the mouse’s current position.

Pen Tool with the Rubber Band setting

Shape Tool

The Shape Tool (U) gives you access to standard geometric shapes as well as more complex presets with the Custom Shape setting. To define your own custom shape, select the shape using the Path Selection Tool (A), right-click inside the canvas, select ‘Define Custom Shape…’, name it and click OK. When using the Shape tool, more advanced settings – involving size, proportion, origin and pixel-snapping – lie hidden inside the drop-down next to the custom shape button in the tool’s property bar.
Advanced Shape Tool settings

From Type

Converting type to a shape layer allows you to work directly with the anchors and curves of each letter and might even help improve your typesetting. This technique is most useful when you know the text won’t change as you’ll have to sacrifice the ability to edit it. With the type layer selected, right-click the layer in the Layers palette and choose ‘Convert Type to Shape’. You now have access to the actual paths used to create the type. Thinking of type in this manner – as shapes instead of letters – can dramatically change the way you work. Kerning is now more intuitive; select a letter and move it – no pesky integers to set!
Type to Path conversion

From Selections

The editing of paths is far superior to raster data, especially when it comes to matters of upscaling. If working with a simple enough raster shape, why not convert it to a path? Select your shape. From the flyout menu in the Paths palette, select ‘Make Work Path…’ or Option-click the ‘Make work path from selection’ button at the bottom of the palette. Set the tolerance based on the complexity of your shape – the simpler the shape, the higher the tolerance. Click OK. You’ll notice that pixel to path conversion is not an exact science, but with some manual clean-up you can effectively recreate the original shape.
Selection to Path conversion

Implementation

Modes

When creating paths via the Pen or Shape tool, three settings – found in the tool’s property bar – are available to define how the path should be used: Shape Layer, Paths and Fill Pixels. The Shape Layer setting will automatically create a new fill layer using the color and layer style set to the right. Paths will create a temporary Work Path accessible in the Paths palette, which makes it available for many different implementations (see below). Fill Pixels will paint raster data on the current layer, leaving no paths behind.
Pen tool set to create a Shape Layer

Shape Layer

A Shape Layer is essentially a Fill layer with a vector mask. They can be created as a solid color, gradient, or pattern, though only the foremost is explicitly available. The easiest way to create a Shape Layer is to use a path drawing tool set to Shape Layer. However, using the tool set to Paths, allows you to specify the type of fill used. First, draw your path. Then, click the ‘Create new fill or adjustment layer’ in the Layer’s palette and choose from Solid…, Gradient…, or Pattern…. Note that you can also create an adjustment layer with a Vector Mask in the same manner.
Creating a Gradient Shape Layer

Vector Mask

Vector Masks are often more preferable than a Raster Mask as they can be easily tweaked or scaled and still produce a crisp edge. With CS4’s introduction of the Masks palette, Vector Masks are more powerful than ever. Now, you can also feather the edges and adjust the density of a Vector Mask. The quickest way to create a Vector Mask is to select the layer you wish to mask. Then, select the path using the Path Selection Tool (A) and Command-click the ‘Add Layer Mask’ button at the bottom of the Layer’s palette.
Command-clicking to quickly create a Vector Mask

Type Paths: In and On

There are two ways paths can be used with the type tool: by defining the baseline and by creating a custom text box shape. Select the Work Path you’d like to use and with the Type tool (T) mouse-over the path. The dotted square on the cursor will change from a square to a curved line. Click on the path and you’ll see that the type flows right along the path. After committing the type (Command + Enter), you can use the Path Selection Tool (A) to move the beginning and end points – indicated with an ‘x’ and a black circle respectively – or to flip the type from the top of the line to the bottom. If using a closed path, you can click inside of it to create a custom-shaped text box.
Type on a path
Type in a path

Fill and Stroke

The Paths palette provides an interesting array of options to fill and stroke a Work Path. These options are available only when the current layer is a raster layer; you can quickly create a new raster layer using Command + Option + Shift + N. Then, by Option + clicking on either the ‘Fill path with foreground color’ or ‘Stroke path with brush’ button, you can open the Fill or Stroke dialog boxes. From here you can set the fill type, blending modes, transparency, feathering or stroke tool, which will adopt that tool’s current settings.
Fill Path dialog box
Stroke tools

Boolean Operators

Use

To allow for more complex shapes, multiple paths can be grouped together into a compound path, on which  Boolean operations can be set. These are accessible in the properties bar of the Path Selection Tool (A) and include: Add (+), Subtract (-), Intersect and Exclude. Add specifies a fill area and Subtract defines an area that is not filled; if only one path exists, the entire canvas is considered the fill area from which the shape is subtracted. Intersect sets the fill to areas included in all paths, while Exclude fills all path areas except those that overlap; these modes work only in compound paths.
Boolean Modes

Stacking Order

When creating compound paths, it’s important to take note of the paths’ positions in the stacking order.  A compound shape with an Add path on the bottom and a Subtract on top will be completely different with swapped depths. A path’s Boolean operator takes effect on all of the paths below it. Unfortunately, there are no commands or palettes to simply swap depths in Photoshop; you’ll need to use a series of Cut (Command + X) and Paste (Command + V) to rearrange them.
Path Stacking Order

Combining

Combining paths can help reduce complexity by creating a single path from the perimeter of a compound path’s fill area. To do so, select the paths to combine using the Path Selection Tool(A) and click the Combine button in the Tool Properties bar.
Reducing complexity by combining Paths

Importing/Exporting

Importing

Though Photoshop provides vector tools sufficient for many basic tasks, it in no way compares to the ease and power of Illustrator. Fortunately, Adobe products work in unison. You can create your paths in Illustrator and easily import them by Copying (Command + C) and Pasting (Command + V) in Photoshop. In the Paste dialog box, select either ‘Path’ to import a Work Path or ‘Shape Layer’ to create a fill layer with the foreground color.
Path Paste dialog box

Exporting

In the occasion that you might need to translate your paths in the opposite direction, copy and paste will work in the same fashion as above or you can use Export → ‘Paths to Illustrator…’ to create a new Illustrator document with the same dimensions and positions as the current Photoshop document.
Paths to Illustrator…

Pixel Precision

The positions of anchor points and the lines connecting them do not correspond to the pixel grid of the image. This can lead to undesirable anti-aliasing, most noticeable along horizontal and vertical edges. To avoid these unclean edges, you can zoom in (Command + ‘+’) and use the Direct Selection Tool (A) to select and move the anchor points so that they lie on exact pixel coordinates; Pixel Grid (Show → Pixel Grid) can be very handy when doing this.
On- and Off-Pixel edge comparison

Keyboard Shortcuts

Pen Tool (P)

• Shift + P – toggle between Pen Tool and Freeform Pen Tool
• Shift – constrains to 45° angles
• Option – change to Convert to Point Tool, used to set directional handles
• Command – change to Direct Selection Tool, used to move anchor points or stretch line segments
• Command + Shift – select multiple anchor points and segments
• Command + Option – change to Group Selection Tool, used to select entire paths
• Command + Option + Shift – select multiple paths
• + – set Boolean mode to Add
• - – set Boolean mode to Subtract

Shape Tool (U)

• Shift + U – rotate through Shape tools
• Shift – constrain proportions
• Option (while dragging) – draw from center of shape
• Option (before clicking, if set to create Shape Layers) – temporarily switch to Eyedropper tool
• Option (before and while dragging, if set to create Paths) – set Boolean mode to Subtract
• Option + Shift (before and while dragging, if set to create Paths) – set Boolean mode to Intersect
• Command – change to Path Selection Tool, used to select and move paths
• Command + Shift – select multiple paths
• + – set Boolean mode to Add
• - – set Boolean mode to Subtract
• Spacebar (while dragging) – move the shape’s origin

Path Selection Tool (A)

• Shift + A or Command-click inside document window – toggle between Path Selection Tool and Direct Selection Tool
• Shift + Click – select multiple
• Shift + Drag – move and snap to 45° angles
• Command + Option – Convert to Shape Tool
• Command + Option + Shift – Convert to Shape Tool (constrained to 45° angles)
• Option – change to Group Selection Tool
• Option-Click-Drag – Duplicate selected path
• Arrow key – Nudge selected path or anchor point 1px
• Shift + Arrow key – Nudge selected path or anchor point 10px
• Option + Arrow key – Duplicate selected path or anchor point and move copy 1px
• Option + Shift + Arrow key – Duplicate selected path or anchor point and move copy 10px

Target Path

• Enter – Dismiss Target Path
• Command + Enter – Selection from target path
• Command + Option + Enter – subtract path area from current selection
• Command + Option + Shift + Enter – intersect path area from current selection
• Command + T – Free Transform Path
• Command + Shift + T – Free Transform Path Again
• Command + C – Copy path or anchor point with neighboring points
• Command + X – Cut path or anchor point with

Article taken from: http://www.smashingmagazine.com/2009/08/18/mastering-photoshop-with-paths/

In this article we’ll examine the issues that face corporate blogs, we’ll observe some current trends, and we’ll look at a large sample of blogs from companies of various sizes in a wide variety of industries.

Purposes of Corporate Blogs

Probably the most significant reason for companies to manage a corporate blog is the communication benefits it can provide. As a higher percentage of the population uses the Internet for researching and buying products and services, companies can often benefit from having a more direct line of communication with customers and potential customers.

1. Communication with customers and the public

While websites in general provide plenty of opportunities for corporate communication, blogs can eliminate barriers and allow a company’s executives or employees to communicate directly with anyone who visits the blog. Those who read the blog will sense a much more personal message in what is generally a more relaxed environment than many other types of corporate communication.

Companies that place a priority on communicating with customers through a blog display a certain openness and responsiveness that today’s consumers appreciate. A blog is able to bring a company and its customers together through the open sharing of ideas, issues, announcements, events and feedback.

2. Demonstration of corporate responsibility

In some cases, corporate blogs are not used to directly promote the products and services of a company, but rather to demonstrate ways in which the company is giving back to the community or to show that the company is conducting its business responsibly. McDonald’s effectively uses its blog to do just that.

Corporate responsibility can also be demonstrated by using blogs as a medium for improving products and services and helping customers get more value out of them. A company that truly promotes open two-way communication through its blog is demonstrating to customers that it is committed to doing everything within its power to provide a quality product.

3. Reputation management

The issue of reputation management continues to grow in importance for businesses both large and small. With technology available that allows anyone to post damaging statements online to be seen by the world, blogs provide companies with a way to prevent problems before they happen or help improve situations when it is too late for prevention.

Because of the level of communication that can take place on a corporate blog, companies have greater control over the messages that the public receives about the company. They can quickly respond to any negative publicity and can help prevent such situations by adopting an open communication strategy that develops the trust of consumers.

4. Promotion of products and services

In very few cases, the primary purpose or goal of a corporate blog is to directly sell more products. In most cases, the blog is seen rather as a valuable tool that can indirectly assist the company to achieve more sales, but direct promotion is rarely the priority. However, some companies are able to find creative ways to promote their own products through blogs.

In some examples we’ll see throughout this article, companies are using their blogs to provide information or announcements about products, which of course can be done with the intent to boost sales. Some blogs provide content that shows readers new ways to use products or explains features that might not be commonly known. In other situations, products aren’t even mentioned in many of the blog posts but are most likely linked to in some area of the blog, frequently the sidebar.

5. Provide executives and/or employees the chance to communicate openly

One of the real advantages of a blog to a traditional company website (not to say that a blog should replace a traditional website) is the personal nature in which a writer and reader can communicate and interact. Even readers who do not participate in making comments likely notice that the post was written by an individual, and that individual may be the best way for the reader and potential customer to connect with the company.

Bloggers enjoy sharing their thoughts and information with readers, and readers enjoy being able to connect with the writer of the content. A corporate blog can add personality to the company in the eyes of readers, and employees can benefit by being able to express themselves and share with readers.

Potential Issues for Corporate Blogs

Although blogs provide all kinds of opportunities for companies, there are also several common struggles that can be experienced. In order for a company to have a positive experience with its blog and for the blog to be useful and relevant to readers, the company must consider these issues ahead of time and develop a plan to address and prevent them from happening.

1. Negative comments

While communication is the major benefit of corporate blogs, it can also work the other way. Not all communication that occurs through blogs is positive. The presence of negative comments may not be a big issue on smaller blogs run by individuals, but they can be a problem for corporate blogs. After all, the company’s reputation management isn’t being helped by a blog that includes a lot of negative comments from readers.

In order to avoid potential issues with negative comments, all comments should be moderated for approval before appearing on the blog. This way, unreasonably harsh or profane comments can be deleted without ever being posted to the blog. Some blogs also require users to create an account in order to post a comment.

2. Consistent and frequent posting

Blogs in general, not just corporate blogs, often suffer from abandonment or long periods of inactivity. While it may be acceptable for an individual to be inconsistent with a blog, corporations could possibly do more harm than good with a blog that doesn’t get much attention. When visitors arrive and see that nothing new has been posted in a long time, it sends the message that the blog is not important to the company and that it doesn’t take this form of communication with customers very seriously.

Corporate blogs have a wide variety of posting schedules. Some are very active, with multiple posts each day, while others have posts much more infrequently. Before launching a blog, or when evaluating an existing one, the company should consider what type of posting schedule would allow for the blog to be used as an effective tool for itself and its customers.

3. Usefulness of posts

Another major issue facing corporate blogs is the challenge of providing interesting content that is useful in some way to readers. Of course, the blog needs to benefit the company in some way as well, so content development can often be a struggle. Although a blog is intended to bring some type of benefit to the company, simply creating posts that promote products or services will draw little interest from readers and will have poor results.

Typical content for corporate blogs includes discussion of issues that are relevant to the company or industry, press releases, information to help readers use the company’s products more effectively, and other specific types of content that appeal to the company’s target market.

When examining various corporate blogs, you will notice a great variety in the types of content being published and their usefulness to readers. Some companies do an excellent job of adding value for readers, while others are little more than another form of advertisement. Not surprisingly, the ones that have creative solutions to this challenge are usually the most effective.

4. Who is going to write the content?

Although corporate blogs typically include some sort of disclaimer that the information and opinions provided do not necessarily represent those of the company, the reality is that a blog is a direct reflection of the company in the eyes of visitors. Some corporate executives handle blogging responsibilities, but these people are obviously extremely busy with other work, and these blogs are rarely very active.

Most companies have employees who would enjoy being able to share their insights through a blog, but the company has to weigh the pros and cons of doing so. A corporate blog is useless without content, so the company does need to consider who will be responsible for providing it.

5. Promoting open communication without damaging the company

Because of the openness of blogs and because they connect with readers on a personal level, the chance exists that the communication being done through a blog will damage the company. In most cases, companies are careful about who is allowed to publish content, and those individuals may be given restrictions as to what they can say.

Some companies have a corporate culture that is more open and are willing to let employees participate in blogging activities, and other companies are more restrictive. Companies face the challenge of embracing the nature of blogging without also bringing some of the baggage that may come as a result of poor choices.

6. Lack of focus

Simply having a corporate blog isn’t enough. In order to make it effective for the company and for readers, there must be some sort of focus or plan for using the blog to everyone’s benefit. Companies should consider who will be writing the content, how frequently new posts will be published, what types of content will be published and how the content will help the company and readers.

Many corporate blogs suffer from poor direction or a lack of focus. If the blog is nothing more than a place to publish press releases, it is unlikely to ever draw much interest from readers, because it really serves no purpose for them. The most successful corporate blogs have a clear focus, and those involved in running the blog understand how they can help readers and the company through their efforts.

7. Converting traffic into something useful

Blogs may be able to attract visitors and regular readers, but the company still needs to convert that into something of significance. The strategy here depends on the focus and priorities of the blog. If the company’s goal with the blog is strictly to present the company in a positive light and to increase exposure of its actions in the community, then it wouldn’t be necessary to attempt to convert visits to the blog into product sales.

Trends in Corporate Blogs

Like other kinds of blogs, corporate blogs often follow their own unique trends. Of course, this isn’t to say that all corporate blogs have these things in common, but many do.

1. Simple layout, with a lack of visual appeal

Although many companies involved in corporate blogging spend huge sums of money to promote themselves to customers and potential customers, their blog designs are typically very simple. While content is the primary element of a blog, one would think that major companies might not want a blog design that looks so basic.

Going against the trend:

Nike is one of the few companies that have put more emphasis on the look of the blog.

2. Branding

Although layouts and designs in corporate blogs are usually unremarkable, most companies clearly attach their business to the blog by branding elements in the design. Most corporate blogs include logos or standard branding that would appear in other places, such as the main portion of a company’s website. Additionally, corporate colors are typically used for the blog design to promote consistency in branding.

3. Multiple authors

Most corporate blogs include a number of different writers who work together as a team to provide content to readers. Because these people typically have jobs outside of running the blog, it’s difficult to get a significant amount of content from one individual. In most cases, if the company wants an active blog that includes regular posts, multiple authors may be a more realistic option.

How blogs handle multiple authors can vary. Many corporate blogs include a small picture of the author in posts, which can help readers connect with the writer — and, as a result, with the company, too. Some companies have different writers who cover different topics on the same blog, and others separate topics into a few different corporate blogs.

4. Networks of blogs

When companies want to cover a wide variety of content in their blogs and employ many different writers, they will often have a small network of blogs rather than one all-encompassing blog. In these cases, the blogs will be separated according to topic, or sometimes each writer will have his or her own blog. This allows the company to publish more content and be more specific with content so that it can truly be of value to readers — plus, it helps readers get only the content that interests them.

5. Few comments

Although blogging is intended to be two-way communication between companies and readers, many corporate blogs attract very few comments to their posts. This seems to be in part due to the type of content that is presented. Companies that publish typical blog content that isn’t focused on their products or themselves tend to draw more comments than those that publish corporate announcements or posts that are mainly intended to promote a product.

6. No ads except for internal ads

The only ads that are typically found on a corporate blog are for the company’s own products and services. This is not surprising, but it is a drastic difference when compared to blogs in general. Because of the specific purposes and intent of corporate blogs, ad revenue is inconsequential, and ads would be a distraction to readers and a hindrance to the company’s goals for the blog.

Monster uses a large banner ad on its blog for its own services, but no outside advertisements.

7. Links to the company’s home page as well as products and services

Every corporate blog will at some point link back at least to the company’s home page, and sometimes to specific products as well. Sidebars in corporate blogs are frequently used to direct visitors to other parts of the company website and provide brief information about products with links to specific pages or sections of the website. Without advertisements in the sidebar, there is plenty of space to do some internal promotion.

8. Separate domains

It’s not uncommon for a corporate blog to be kept on a separate domain than the company’s website. There is a good deal of variety in practices with this, and it certainly isn’t the case with every corporate blog, but many companies have chosen to use a separate domain.

Gallery of Corporate Blogs

Here, we’ll take a look at more than 40 corporate blogs. To start, we’ll point out some that have particular items of interest, and other will simply include links and screenshots.

American Express
American Express has one of the more impressive corporate blogs. Its blog is part of OpenForum.com and provides information and resources to business owners. The blog at Open Forum is nicely designed and laid out. The sidebar on the left is used to promote some of the company’s products as well as for general navigation. Take a look at the posts and you may recognize some of the writers, including Guy Kawasaki and Seth Godin. With the Open Forum blog, American Express attempts to provide valuable information that will help its target market of small business owners, rather than directly promote its own products.

McDonald’s
McDonald’s Corporate Responsibility Blog provides content exclusively on just that. You won’t find content here about McDonald’s food or current deals, just information on what the company is doing around the world. This blog is a good example of one that has a specific focus and purpose. The design and layout is very simple, but it does include some McDonald’s branding, and it clearly shows visitors that McDonald’s takes corporate responsibility very seriously.

Best Buy
Best Buy has a few different blogs. The Holiday Rituals Blog provides short posts that give information on specific popular products or recommended Christmas gifts. Because the posts cover specific products, it’s puzzling why the product descriptions are not linked back to the main Best Buy website, where those products can be purchased. Nevertheless, the blog has a nice colorful, winter-inspired design.

Best Buy also has a blog at AskABlueShirt.net that provides information on the upcoming digital TV transition. This blog has a lot of Best Buy branding in the design, including the colors, the logo, and the picture of the worker in the blue Best Buy shirt.

Nike Basketball
The Nike Basketball Blog obviously places more importance on the look and visual appeal of the website than other blogs. The background is a large image of a basketball court, and a big picture of Kobe Bryant is currently in the header. Each post has its own header image, and some include pictures of NBA players who are sponsored by Nike. The content of the blog is primarily focused on drawing attention to athletes who are affiliated with Nike, which would ultimately lead to more shoe and apparel sales, because the players have a lot of influence on sales.

Wal-Mart
Wal-Mart’s blog is located on a separate domain, and even Wal-Mart’s branding may be missed at first glance. The content is mostly related to information about products that can be bought at Wal-Mart. Unlike Best Buy, Wal-Mart does link to pages on its own main website, and the Sam’s Club website, where specific products can be purchased.

Cisco
The Cisco blog, The Platform, is used primarily to publish company news. There are some informational posts that don’t have to do with the company, but most are Cisco-related. The Platform uses a three-column layout that includes common blog elements, such as a tag cloud in the right sidebar.

Dell
Dell uses several different blogs on various topics. Its blog network’s front page includes links to recent posts from across the network.

Lenovo
Like Dell, Lenovo also uses multiple blogs for different topics. Its blog network’s front page contains links to all of the various blogs, plus it includes elements typical of traditional blogs, such as a Flickr photostream and recent Delicious bookmarks.

Possibly of interest to Smashing Magazine readers is Lenovo’s Design Matters blog.

Google
The official Google blog is one of the more well-known corporate blogs. Naturally, Google’s blog is hosted on Blogspot.com.

Monster
Monster’s blog also has a design that fits well with the design and color scheme of the main website. Most of the content is geared to job searchers and those interested in career-related information. The header of the blog includes a banner ad for Monster’s resume-writing services.

Johnson & Johnson
Johnson & Johnson’s blog, JNJ BTW, includes a variety of content, including information on health, social action that the company is involved in and even a recent post that is an apology for an advertisement that some people found offensive.

Yahoo!
Yahoo! has several different blogs, including Yodel Anecdotal, on which Jerry Yang recently posted a copy of an email he sent to all Yahoo! employees about current layoffs. Yodel Anecdotal has a colorful design and includes content relevant to various aspects of Yahoo’s business.

The Yahoo! Search Blog is specifically focused on search-related content.

The Yahoo! Developer Network also has its own blog.

Southwest Airlines
Southwest tries to distinguish itself as a company that has a more fun and laid-back corporate culture than other major airlines. The Southwest blog also takes that approach with its design.

GM
GM has several blogs for different purposes. Its blog network’s front page includes links to the various blogs.

FastLane
The GM FastLane Blog is dedicated to covering all aspects of GM vehicles. The design uses a bright, colorful background.

FYI
The GM FYI Blog is for GM news, information and opinions, and it is written by GM employees and others.

Quicken Loans
Quicken takes a unique approach with its blog, What’s the Diff? Content is rarely relevant to the company itself but is rather diverse, with a lot of different subjects covered. The blog includes some advertisements for Quicken’s mortgages.

Quizzle
Quicken also runs the Quizzle blog, which publishes content related to home ownership and money management.

LinkedIn
The LinkedIn blog has a design that fits well with the rest of the website. The content is focused on providing LinkedIn users with information that can help them get more value out of the main website, which draws more comments than the content on many other corporate blogs. Like some of the other blogs featured here, LinkedIn includes a Flickr photostream.

37signals
The popular blog of 37signals, Signal vs. Noise, publishes content on “design, business, experience, simplicity, the Web, culture and more.”

37signals also has a separate Product Blog that focuses on the company and its products.

Aviary
Aviary’s blog includes content that is actually relevant and useful to users of its products, rather than just posts about company news and information. The design of the blog features a colorful and attractive header, which is appropriate because the company offers browser-based tools for designers.

Best Western – On the Go with Amy
On the Go with Amy isn’t a typical corporate blog like many others featured here, but it is affiliated with Best Western. Amy writes about her travels and provides tips to readers for their own travels. The blog uses a fun and colorful design with an illustrated header.

AOL People Connection Blog

The Nokia Blog

The Nokia Conversations Blog

Flickr

Facebook

Digg

Delta

Kodak

Boeing

Sun Microsystems

Novell

BBC

FreshBooks

Marriott

Hoefler & Frere-Jones Type Foundry Blog

GE Global Research

Ning

Oracle

Viddler

IBM

Toyota

To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters more than usual (or at least should matter more than usual). We’ve chosen popular newspapers, magazines and blogs as well as various typography-related websites.

We’ve carefully analyzed their typography and style sheets and searched for similarities and differences. We have also put together a spreadsheet of the study that displays the websites’ various values (for example, the ratio between the line height and line length).

Ultimately, we identified 13 general typographic problems and issues related to typographic design and tried to find answers to them through our research:

1. How popular are serif and sans-serif typefaces in body copy and headlines?
2. Which fonts are used most frequently?
3. What is the average font size?
4. What is the average ratio between the font size of headlines and body copy?
5. What is the average line height of body copy?
6. What is the average ratio between line height and font size in body copy?
7. What is the average ratio between line height and line length in body copy?
8. What is the average amount of spacing between paragraphs?
9. What is the average ratio of paragraph spacing to line height in body copy?
10. How are links styled?
11. How many characters per line are common in body copy?
12. How often are links underlined?
13. How often is font replacement (sIFR, etc.) used?

We ended up with solid data, which we evaluated and prepared for this article. Based on the statistics, we have identified several “rules of thumb” for working with type. Please note that these rules can often, but not always, be considered best practice.

1. Serif vs. Sans-serif

Whether designers should use serif or sans-serif fonts for body copy is one of the most discussed and unresolved questions about typesetting on the Web. Some designers prefer to give their headlines serifs (which are short, decorative lines at the end of letter strokes) to give them more appeal. The main reason to choose a serif font for your headlines is that, at a large size, serif fonts are easy to read and look great. The contrast between a serif font for headlines and a sans-serif font for body copy can be interesting, too.

Some designers prefer serif fonts for body copy because they believe the lines at the end of letter strokes help guide readers from one letter to the next, making scanning and reading more comfortable.

According to our study, sans-serif fonts are still more popular than serif fonts for headlines, although they seem to have dropped in popularity in recent years.

• 60% of websites use sans-serif typefaces for headlines, mostly Arial, Verdana, Lucida Grande and Helvetica. Among them: CNN, ArsTechnica, Slate, BBC and NewScientist.
• Only 34% of websites use a serif typeface for body copy. Among them: New York Times, Typographica, Time, AIGA and Newsweek.
• The most popular serif typefaces for headlines are Georgia (28%) and Baskerville (4%).
• The most popular serif typefaces for body copy are Georgia (32%) and Times New Roman (4%).
• The most popular sans-serif typefaces for headlines are Arial (28%), Helvetica (20%) and Verdana (8%).
• The most popular sans-serif typefaces for body copy are Arial (28%), Verdana (20%) and Lucida Grande (10%).

Two thirds of the websites we surveyed used sans-serif fonts for body copy. The main reason is probably because, despite the growing popularity of advanced font replacement techniques, such as Cufón, most designers stick to the core Web fonts, which essentially give them only two viable options: Georgia and Times New Roman. And because of the stigma attached to Times New Roman (that it often makes a modern website look outdated), they’re left with only Georgia. Sans-serif fonts offer a wider variety of options for the Web.

2. Which Typeface Is Most Popular?

Surprisingly, despite the growing popularity of font replacement techniques and growing availability of new pre-installed fonts (e.g. Windows Vista and Mac fonts), designs in our study mainly used the traditional, core Web fonts, the only exceptions being Lucida Grande (which comes installed only on Macs), Helvetica and Baskerville.

As one would expect, Arial, Georgia and Verdana are used for the majority of body copy today. In our study, around 80% of websites used one of these three fonts. For the remaining 20%, designers’ favorite Helvetica is a popular choice, as is Lucida Grande.

With options such as Verdana and Arial available as fall-backs, a designer really has no reason not to specify other non-standard fonts to achieve the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font Stacks.
Jon Tan uses serif typeface Baskerville for headlines and serif typeface Georgia for body copy.

Verdana is used minimally for headlines. Only 10 websites use it for body copy to begin with, and only four use it for headlines. The main reason is that Verdana puts a lot of spacing between letters, which makes it not as tidy to read at a large size. If you are going to use it for headlines, you may want to take advantage of the CSS letter-spacing property. Georgia and Arial are most popular fonts for headings.

Finally, we note that “alternative” fonts are used much more for headlines than for body copy. Designers seem more willing to experiment with their headings than with the main body. If you want to bring some typographic variation into your next design, headings may be the easiest place to start.

3. Light Or Dark Background?

We were curious to learn the extent to which designers were willing to experiment with dark background colors. We looked out for any typography-oriented websites that had a dark color scheme and were surprised to find not a single one.
The New Yorker has a light color scheme, with Times New Roman used for headlines and body copy.

Pure white background for body copy won by a landslide. However, many of the designs avoid the high contrast of pure white on pure black; text color is often made a bit lighter than pure black. Designers clearly focus on legibility and avoid experimenting with background colors. The contrast of black on white is easy to read and is, at least among these websites, the status quo.

4. Average Font Size For Headlines

Of course, the choice of headline font size depends on the font used in the design. In any case, in our study by far the most popular font sizes ranged from 18 to 29 pixels, with 18 to 20 pixels and 24 to 26 pixels being the most popular choices.

Our study didn’t yield any clear winners. The average font size for headings is 25.6 pixels. But note that any size between 18 and 29 pixels could be effective; it depends, after all, on how your headings fit the overall design of your website. Still, you could try experimenting with larger sizes, because displays are always getting larger, as are display resolutions.

An obvious outlier is Wilson Miner (screenshot below), who uses a massive font size of 48 pixels for his headlines. His website is a special case, though, because all of his posts have extremely short titles, only a few words.

5. Average Font Size For Body Copy

Do you remember about seven years ago when Web designs had tiny, barely readable elements, and body copy was set to 8 pixels in Tahoma? Small font sizes are out, and more and more modern designers are turning to large font sizes. From our sample size, we saw a clear tendency towards sizes between 12 and 14 pixels. The most popular font size (38%) is 13 pixels, with 14 pixels slightly more popular than 12 pixels. Overall, the average font size for body copy is 13 pixels.

We noted (as one would expect) more and more attention being paid to the smallest typographic details. Dashes, quotes, footnotes, author names, introductory text and paragraphs have been carefully set, with optimal legibility in mind. Type setting is usually very consistent, with a lot of white space, leading and padding.
Typographica uses a large font size for the introductory paragraphs of its articles, and then reverts to a normal size for the rest of text.

Heading to Body Font-Size Ratio

To better understand the relationship between heading and body font size, we divided each website’s heading font size by its body font size. We took the average of these ratios and derived a rule of thumb for you to work with:

Heading font size ÷ Body copy font size = 1.96

The overall value, then, is 1.96. This means that when you have chosen a font size for your body copy, you may want to multiply it by 2 to get your heading font size. This, of course, depends on your style; the rule of thumb won’t necessarily give you the optimal size for your particular design. Another option is to use a traditional scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) or the Fibonacci sequence (e.g. 16 – 24 – 40 – 64 – 104) to get natural typographic results.

6. Optimal Line Height For Body Copy

Leading (or line height) will always depend on your chosen font size and measure (or line length). In general, the longer the measure, the longer the leading should be. Therefore, presenting a chart of the most popular choices for leading in pixels wouldn’t make sense here. More appropriate would be for you to use a relative unit, such as an em or percentage value, that determines the relation between leading and measure and between leading and font size.

According to our study:

• line height (pixels) ÷ body copy font size (pixels) = 1.48
  Note that 1.5 is a value that is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very few websites use anything less than that. The number of websites that go above 1.48 decreases as you get further from this value.
• line length (pixels) ÷ line height (pixels) = 27.8
  The average line length is 538.64 pixels (excluding margins and paddings) which is pretty large, considering that many websites still use 12 to 13 pixels for their body copy font size.
• space between paragraphs (pixels) ÷ line height (pixels) = 0.754
  We were surprised by this result. It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of the paragraph leading. The reason may be that leading usually includes the space taken up by descenders, and because most characters do not have descenders, additional white space is created under the line.

AIGA is a perfect example of optimal leading. Its font size is 13.21 pixels (converted from ems) and its line height is 19.833 pixels (conversion from ems). In fact, 19.8333 ÷ 13.2167 = 1.5011.

So, once you have decided on your body copy font size, multiplying this value by 1.5 will give you the optimal line height. Once you’ve got that, you can multiply this new value by 27.8 to get your optimal line length. Note that the layout will also need gutters, margins and padding to let the body copy breathe.
The New Scientist has 20 pixels of spacing between paragraphs.

7. How Many Characters Per Line?

According to a classic rule of Web typography, 55 to 75 is an optimal number of characters per line. Surprisingly, our study shows that most websites have a higher number. We counted how many characters could fit on one line using the design’s default font size. The result, which is an average of 88.74 characters per line (maximum), is extremely high. Of course, this maximal number is different from the average number of characters per line, which in general ranges between 75 and 85 characters per line. Still, the range is way above the conventional range — quite peculiar.

Between 73 and 90 characters per line is a popular choice among designers, yet we also found outliers: Monocle (47 characters per line) and Boxes and Arrows (125 characters per line). To get a more exact reading for each website, you would need to take an average character count from multiple lines.

Other Findings

• 46% of websites underlined the links in their body copy, while the others highlighted only with color or a bold font weight.
• 6% of websites used some kind of image replacement for headings or body copy (e.g. Monocle, New Yorker, Newsweek).
• 96% of websites do not justify text.
• Websites gave their text a left padding of on average 11.7 pixels (counting from the left content area border).

Conclusion

The study shows a clear set of common practices and guidelines for setting type in Web design. Note, though, that these findings are not scientific and should serve only as rough guidelines:

1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
2. Common choices for headlines are Georgia, Arial and Helvetica.
3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
4. The most popular font size for headings is a range between 18 and 29 pixels.
5. The most popular font size for body copy is a range between 12 and 14 pixels.
6. Header font size ÷ Body copy font size = 1.96.
7. Line height (pixels) ÷ body copy font size (pixels) = 1.48.
8. Line length (pixels) ÷ line height (pixels) = 27.8.
9. Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
10. The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular,
11. Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

Of course these “rules” aren’t set in stone. Rather, they are a set of rough guidelines that you can use as a basis for setting typography. Every website is unique, and you may want to modify your choices at each stage of your design to suit your layout. You can also take a look at the spreadsheet of the study and export its data for further analysis.

Related posts

You may be interested in the following related posts:

• A Small Study of Big Blogs
• A Small Study Of Big Blogs: Further Findings
• Web Form Design Patterns: Sign-Up Forms
• Web Forms Design Patterns: Sign-Up Forms, Part 2

To help you improve your skills, in this article we present 50 useful new jQuery techniques and tutorials that have been created recently and that could make the development of your next website an easier and more interesting experience than the last.

50 Useful jQuery Techniques

Moving Boxes Carousel with jQuery
Many of the concepts presented in classic carousel tutorials are the same, so this tutorial will not throw a lot of source code at you. The big difference here is that there are buttons to change panels and the panels zoom in and out.

Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

Accessible Charts & Graphs from Table Elements using HTML 5 Canvas and jQuery
This technique provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Make a Mega Drop-Down Menu with jQuery
So how would we go about implementing Mega drop down menus? While it’d be great to do all of this in pure HTML and CSS, it’s impossible at the moment to get those nice half-second delays — and of course there’s a pesky problem with Internet Explorer 6, which only supports :hover on anchor elements. Instead, I’ve whipped up a solution using jQuery and a very nifty plugin called hoverIntent.

Creating a Filterable Portfolio with jQuery
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.

A fancy Apple.com-style search suggestion
“This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial.”

Current Field Highlighting
As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field. In this tutorial, we’ll improve our current field highlighting, using jQuery.

Creating a Dynamic Poll with jQuery and PHP
“When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.”

jQuery Infinite Carousel
This screencast explains how you can create a simple and nice scrolling carousel and how you can also make it automatically loop round by itself. For the latter see also Automatic Infinite Carousel.

De-Constructing Accordion and Hover Effects with jQuery
This video tutorial explains how the hover and accordeon effects on Tim Van Damme’s site can be achieved using jQuery.

Better form submission feedback with jQuery
Browsers fail to give users effective feedback when the user submits a form. Users respond by clicking the submit button over and over. The problem compounds when users find out they’ve been charged 5 times or when you receive 5 contact submissions. The solution is to replace the submit button with a friendly message letting the user know the form is working.

How to Make a Threadless Style T-Shirt Gallery
Here’s the gist: There’s a thumbnail which is a full sized image in a container div, which is smaller than the full sized image. The image is centered within it, but doesn’t show entirely because overflow:hidden is turned on. When the mouse hovers over the thumbnail, overflow:hidden gets turned off, and the entire image is displayed.

Create a gallery by using z-index and jQuery
In this tutorial you will learn to combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures. Also check out Enhancing the z-index Gallery with a Preloader.

Add a favicon near external links with jQuery
External links should always be marked distinctly in order to make it easy for readers to see them easily. You cann add a CSS class to all outgoing links using the pseudo-class a[href^=http]. A more dynamic solution is using the favicon.ico of the external site, if it is available of course.

Scrollable Timelines
Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.

Automatically generate table of contents using jQuery
“Some time ago, I was debating with my friends on the topic: is there any use of generating table of contents automatically. The conclusion was that it can be useful in cases when the reading material is long enough and table of contents (TOC) has a fixed position on the screen. This tutorial will show you how to create such TOC in just a few lines of code.”

Reddit-style Voting With PHP, MySQL And jQuery
If you are a regular at Reddit, you must have noticed the way people vote there. You can either vote up or vote down. This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.

Making a Content Slider with jQuery UI
In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.

BBC Radio 1 Zoom Tabs
This tutorial explains how to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP
This is a detailed tutorial which shows creating an unobtrusive Ajaxed shopping cart using jQuery & PHP and can guide you to Ajaxify any e-commerce software you may already be using or coding.

Create a Digg-style post sharing tool with jQuery
We are going to make a digg-style post sharing toolbox. It’s all pretty straight forward and need a little bit of planning. The way it works is different with digg’s. If you view the html source code of Digg’s, it has the sharebox html code in every single post. But, in this tutorial we have only one sharebox, and all the links are sharing the same template.

Using jQuery to play Media Files (MP3,WMA,etc,etc)
I’m going to show you the most productive way (I guess you could say that) of playing a MP3 ( You can also use WMA, and you file of choice) on your website.

Easy Retweet Button
Ever since I saw the Bit.ly JavaScript API I’ve been wanting to build a simple script for tracking the number of people visiting a blog post from Twitter. This past weekend I built a little script for doing just that – and in a completely unobtrusive manner. The script itself is completely standalone (no dependencies) and can be included in any page relatively painlessly. Additionally, since it’s just HTML, CSS, and JavaScript, it’s completely themeable and customizable to the style of your site.

Create an amazing music player using mouse gestures & hotkeys in jQuery
We will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

Creating a Virtual jQuery Keyboard
This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

jQuery Feed Menus

Automated image preloading for a snappy UI
We developed a solution that automates the age-old task of preloading images in web applications. It uses javascript and is packaged as a jQuery plugin, but the concept could easily be ported to other libraries or plain old Javascript as well.

Quick Tip: Resizing Images Based On Browser Window Size
In fluid layouts it is easy to format the text to adjust nicely when the window is resized, but the images are not as fluid-friendly. This Quick Tip shows you how to swap between two image sizes based on the current size of the browser, div, or whatever you decide to make the deciding factor. For those looking for a real life example, Last.fm uses this technique on their artist pages.

Exactly Twitter like Follow and Remove buttons with jQuery and Ajax
This post updated exactly Twitter like follow and remove buttons with fadeOut and fadeIn effect.

Using Form Labels as Input Values with jQuery and CSS
I nice little additive to web forms is to put the input labels inside of the inputs box as the starting value. By using jQuery to bring the label in as the value we can archive the desired effect without impacting accessibility, since the label elements are still there. Then we can take it a step further by dynamically adding a class to the input and use CSS to style the form only if JavaScript is enabled. The search box at the top of this page is an example of this technique.

Pretty checkboxes with jQuery

jQuery and Ajax Best Demos Part-2
A small list of jQuery and Ajax demos.

A jQuery inline form validation, because validation is a mess Të Position Absolute
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

How to create a sliding image/reveal content with jquery
Someone asked me about this effect a while ago and i thought i should make a tutorial about this.

The youlove.us scrolling background effect explained
The technique is actually a lot simpler than it looks, it’s based around scrolling a very tall gradient image behind some transparent PNG images. The header image (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.

Creating a Keyboard with CSS and jQuery
Sometimes it’s just fun to play around with the programming languages we know and see what we can create. I thought it might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. I’ll show you how to build it today.

Portfolio Layout Idea Using jQuery

Creating the iPhone unlock screen using xHTML, CSS and jQuery
The iPhone: Everybody knows what it is, many people “played around” with the gadget and most people love it. I also own one of these amazing smartphones, and the looks of the software is really, really sleek and innovative (Just like we’re used from Apple). I wanted to transfer (some) of these amazing designs to a webpage to re-create the same look and feel for webbrowsers. Today, I’m going to show you how to create The iPhone unlock screen in xHTML, CSS and jQuery.

jQuery File Tree
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

Create an Amazon Books Widget with jQuery and XML
It makes sense to forgo database tables and server-side code when you need to store a limited amount of non-sensitive data. Accessing this data can be a snap with jQuery because the library was built to traverse XML documents with ease. With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

Creating a table with dynamically highlighted columns like Crazy Egg\’s pricing table
I like Crazy Egg’s pricing table on their Pricing & Signup page. When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

Make Your Header Responses To Mouse Movements with jParallax
jParallax turns a selected element into a window, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Submit multiple forms with jQuery and Ajax.
How to submit multiple forms with jQuery and ajax.

Using jQuery To Manipulate and Filter Data
When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this article, I will go over four techniques: hover effects, zebra rows, filtering, and sorting.

Building a jQuery Image Scroller
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.

Horizontal Scroll Menu with jQuery Tutorial
In this tutorial you will learn how to create a scroll menu. In the final result you will be able to scroll up and down according to mouse-y axis and we’ll use jQuery.color to animate the background-color changes.

SpriteMenu
This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. Instead of trying to manage huge amounts of images, everything is packed into just one file, which means the browser will only have to download one file instead of making multiple requests, and its just a lot easier to manage. The menu is displayed by manipulating the background-position property to display individual sprites in the image. There are no drop-downs attached to the menu, but it shouldn’t be hard to add them in which I may do in the future.

Slicker Show and Hide

jMar
We’re going to tell the script to loop through all of the comments on the page. If the member link on the current comment matches the member link in the profile, then it must be an author comment. The script will then apply an additional class to the comment, allowing you to style it separately.

web2ajax
FaceBook Like – jQuery and autosuggest Search Engine

“Outside the Box” Navigation with jQuery
Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common

Animate Image Filling Up Using jQuery

Sexy Drop Down Menu w/ jQuery & CSS
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key × and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

Creating a polaroid photo viewer with CSS3 and jQuery
Placing pictures on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).

Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.
Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery.

Super CSS Selector Support with jQuery
CSS provides a wide array of selectors to specify which elements should be subject to a particular style. CSS 2.1 gives web designers even more granularity when targeting specific elements. This is great in theory. But browser support for these selectors has lagged behind, and IE6 support is limited to only the most basic selectors. This has led to most folks working in the real world stashing the more advanced selectors away for rainy-day experimentation, or idle dreams about the eventual time when we can use these tools.

Download the theme for free!

Smashing Multimedia was designed especially for podcasters, photographers and users who can now easily embed videos and images, rate them and showcase them in their own WordPress-based blog. It has a parent theme and an easily customizable child theme. This Wordpress Theme comes with layered PSD source files, a visual help guide and is fully localized ready for you to translate it into your target language.

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this post if you want to spread the word. You may modify the theme as you wish.

• demo
• large preview (.jpg)
• installation guide and documentation (.zip)
• download the theme (.zip, 2 Mb)
• download the PSD-source (.zip)

Features

1. Easy media embed method, with shortcodes in the post content area or use a media plugin of your choice (supported are YouTube, Vimeo, Google Video, Blip.tv, Veoh, Viddler and Revver),
2. Feature any post, any category – the easy way – just make them sticky! Why restrict yourself to one featured category when you can have the freedom to pick and choose any post from any category to feature!
3. Choose and put together your Site’s Main Navigation without touching the code in the template files. All available options are right there for you included in the Theme Options.
4. Choose and put together your Site’s Category Navigation (appears in sidebar) without touching the code in the template files. Again, all available options are right there for you included in the Theme Options.
5. Choose the type of splash image for your media posts: sliding or static splash image. Do the same indepently for Category pages.
6. Choose the type of post teaser (the usual excerpt or text from the content) to appear on multible post pages and customize it’s word limit through theme options. The word limit can be adjusted independently for sticky (featured) posts or multimedia posts on the front page and on category pages.
7. Subpages appear dynamically in sidebar when created
8. Related posts: if there are any, appear in the single page sidebar. How many should appear is set by you from the theme options
9. 8 Independent widget areas: front page seperator (1) just below the featured area, front page (1 – index), category(1), archive (1 – daily, monthly, yearly, author and tag archives share the same widgets), single (1), page (1), search (1), 404 (1).
10. Security: 2 common sense security precautions already hooked in just for you; hidden login page error feedback and hidden WordPress version number,
11. Preventing Spam: a useful little function to deny Comment Posting to No Referrer Requests
12. Extra goodies: cformsII styles, wp-Pagenavi, wp-PostRatings, WP125: Easy 125×125 Ad Management For WordPress styles included, show your last tweet (shows on the front page and can be removed and replaced by any plugin of your choice so in other words you are not stuck with it if you don’t like it), Social share media, Feedburner Rss and Email, Follow on Twitter, “Give it a Tweet” call to action to your readers, styles for threaded comments (if enabled), seperated comments and trackbacks (appear in animated dropdown), styled admin comments, custom avatar image for when your users don’t have their own!
13. …and even more features! (pdf)

Update (24/08/2009)

The problem with the js is fixed. It was the missing call to the wp_footer(); also, removed the js file that was not needed. Please make sure when you import the sample data that you check the “Download Attachments” when importing!

Everyone has their own opinion of what constitues a decent free WordPress Theme which I appreciate.

In view of that, you may not be particularly excited about the colour, font or other design choices ( including spelling ) and you may decide, as some of you have already done so, to express this in your comments below.

While you do so, it is my sincere wish that some of you may take a moment and appreciate the effort that went into things like: the Theme Options, the custom write panels, the custom video shortcodes, that if I may add output valid html code, and the time taken to write and comment out, what I believe is, decent html/css code.”

Thank you very much, Sarah! We really appreciate your efforts.

Article taken from: http://www.smashingmagazine.com/2009/08/22/free-podcasting-video-and-photography-wordpress-theme/

There is a tremendous amount of competition out there, and a lot of it is willing to play dirty, cut-throat and underhanded to beat you to the clients. How are you supposed to get ahead of those guys? Is it even possible to earn an honest buck? Thankfully, it is possible and can be a lot easier than you think.

Marketing is a brand game

Marketing and its in-your-face division Advertising are all about one thing. Building brand equity. If you take away only one concept from this article, please let it be this one! In this internet fueled economy, brand strength is everything! But brand and brand equity are often misunderstood concepts, the easiest way to think about brand equity is that it’s the sum total of feelings people get when they think about your business or service. And it’s important to remember that brand equity can be positive or negative.
A company like Kiva has copious amounts of positive brand equity – their business impacts the world in a positive way and they are nearly universally liked because they are fair and pleasant to work with.

On the other hand, negative brand equity (like Mr. Madoff), is that horrible, sinking feeling that people get when any mention of your name is raised, which, as you can imagine, makes doing business very difficult.

Brand equity is one of the most monumentally important parts of running a successful business. If people associate your business with nice feelings and positive images – they will want to work with you. If they associate nothing but let downs and suffering with your brand, it doesn’t matter how good your work is, no one will ever come knocking.

Let’s take it from the top

From the very first step setting out as a freelancer, you’re giving up the security of a consistent paycheck for the freedom to work with who you want and when you want. There are a lot of risks, but there are also plenty of rewards for those who succeed. First time freelancers and those just starting out often ask about finding those initial clients. A reasonable request: but one that is, unfortunately, very hard to answer. Starting a business, especially a one man shop (in the way that most freelancers operate) is a very individual process. Everyone has their own story and their own path. However; after conversations with many freelancers and my own experiences, I’ve come to learn that there are a few common themes that can go a long way towards helping rookie freelancers get up and running.

It pays to have a plan

In the beginning, it’s tempting to try and take every job that comes your way. But taking every job is a mistake. You will end up over-stretched on vastly different projects, trying to work with clients in industries that you know nothing about. Instead, take some time before you even start trying to recruit clients to formulate a plan. Ask yourself what type of work you want to do, with what types of clients? Knowing your audience and knowing your focus from the outset will help you to qualify prospects and qualify their projects.

For example, imagine that, after much reflection and research, you decide that you want to focus solely on designing and building webpages for Broadway actors. You live in New York City and many of your friends are actors, plus you just love the theatre. From that decision, you now have a clearly defined market and a clearly defined product for that market. Finding prospects and explaining your business becomes easier for you, and easier for those prospects to understand.

Tip: The Elevator Pitch: An elevator pitch is a one and a half to two minute summation of what your business is and how it benefits your prospective clients. If you can’t concisely explain what it is that you do and how it helps your clients in that short amount of time it’s a pretty good indication that you need to focus your business goals a little more.

Having a clearly defined plan also simplifies the process of qualifying clients and potential projects: If it doesn’t fit into your plan – don’t take the work, it’s that simple. It may feel counter-productive at the start to be turning prospective clients away but, remember, you’re in this for the long haul and building a brand around your work takes time, commitment and focus. You can’t build a brand by working for everyone doing whatever project they happen to have.

Every person you know is your audience

When you’re constructing your plan, it’s important to think about what you want to work on and where you want to be in the future but don’t forget to include the groups that you are already a part of and the people you already know. Your hobbies can be a great source of business and a great way to get your freelancing business off the ground. If you have a lot of friends that are actors, and you love the theatre – that might be a good industry to focus on.

If you really love photography – you can focus on serving galleries or photographers. If you already know you’re passionate about the subject material, doing the work becomes that much easier! And you’ve already won half the battle with the people that know (and trust) you, so don’t be afraid to ask. Family, friends, old coworkers; they are all potential clients. A word of warning though; mixing business with pleasure can be dangerous territory and certainly not the area for hard selling tactics. Here are a few guidelines to make sure your sales pitch remains respectful of your current relationships:

1. Make sure you’re clear about your intentions. If you’re starting a new business – it should be clear that you are going to be charging for your services. Be certain, from the start, that your potential client (and friend) knows that you’re not giving work away for free.
2. Only offer help where you can make an honest, positive difference. These people trust you, don’t abuse that trust just to build your portfolio. In the long run, your friendship (and your reputation) is more important than your portfolio.
3. Start small and over-deliver. Don’t promise the moon in order to sell your services. It’s always better to start with a small project and execute it perfectly. If you have an idea on how to expand the project, discuss it after you’ve proven you’re a genius.

Buy local, Be local

Another good place to start is by focusing locally. While it’s certainly more intimidating to walk into a local business and try to sell you services face to face, it can also be a lot more powerful. It is important to remember that not everyone is as comfortable with doing business over the internet as us web professionals; for many clients, it’s easier to put trust in another local business because they can see and touch the person with whom they are doing business. Physical meetings settle fears about fly-by-night internet operations that might just be trying to get their check and deliver something sub-standard.

But face to face selling is a lot more difficult than sending out a few hundred emails and waiting for the responses to come pouring in. Here are a few tips for successful face to face selling:

1. Be Prepared: It’s not just for the Boy Scouts! Make sure you understand your client’s business before you walk through the door. It’s an instant credibility booster when you can show that you clearly understand the problems that your prospective client is facing.
2. Show your past successes: Have a few anecdotes and a few samples of your work ready to show. Not an entire tome of every site you’ve ever had a hand in – just a few of the best will suffice.
3. Don’t be afraid to ask: When you’ve shown that you understand your prospective clients issues and challenges and you’ve established the quality of your work, it’s time to ask for what you want. Don’t beat around the bush, just tell the prospective client what benefit you can provide them and how much it will cost them. Be forthcoming and honest about what you charge and, above all, don’t be embarrassed about the number you give them; this is business after all.

Working locally is also a great way to build a community around your brand. A community that you can touch and feel and talk to on a regular basis can be a gold mine for freelancers because smaller, local-run businesses are generally well connected with each other and are quick to offer recommendations (when deserved) to other local businesses. I’ve heard of freelancers that have built websites for, quite literally, every small to medium sized business in their town. They started with one and, based on glowing recommendations and personal connections, were comfortably in work for years to come.

Expanding your reach

So you’ve established yourself, you’ve got a steady flow of business and you’re relatively comfortable, but how do you take your business to the next level? How can you earn more while maintaing the same hours?

Hitting an earnings plateau is a common problem for small businesses, especially one-person operations. Sure, you could bring in employees or sub-contract out some of your work to other freelancers but your underlying problem still remains. You are doing work for other small to medium sized businesses that can only afford to pay a certain amount. To make the jump into a higher tax bracket the name of the game is brand recognition and differentiation. People far and wide need to know your brand and they need to have an acute understanding of why they know your brand. In essence, you need to set your business apart from, and above, the competition.

Cast a wide net

Moving from a client base of small fish to one of big fish takes time and, unless you live in one of the major corporate centers of the world, it takes geographical expansion. You cannot source all of your work locally anymore – and this is where advertising comes into play. Contrary to what many web personalities these days would have you believe, advertising is not dead. No, in fact, it’s more alive and more helpful that you may know! The trick with advertising though, is getting it right:

1. Favor highly targeted, captive audiences: Place your ads within ad networks who cater only to your design/development niche. Broad campaigns are costly and yield low conversion rates, whereas targeted ads to people who are actively looking for a web designer or developer can cost far less and provide many more conversions.
2. Place the ads yourself: By directly contacting small niche blogs and other sites that you know to be frequented by the exact clients you hope to attract you can generally pay less for advertising space. In addition, forming a relationship with the people on the other end is likely to allow you more control over when and how your ads are shown.
3. Maintain a consistent message: Make sure that all of your advertising is consistent with your brand. And I’m not just talking about the design of your ads. Your message and your tone are just as important as how your ad looks. Consistency across all of these areas will help to build a solid brand identity.
4. Publicity Stunts 2.0: Better yet, save those ad dollars, challenge yourself to pull off something incredible in a short period of time (build a working web app in 12 hours, etc.) or redesign the homepage of a potential client’s site and then send them redesign idea with your sales pitch included.

It’s important to note: You can’t just run a few ads and expect the business to just pour in. Effective advertising takes time and, above all, constant measurement to be successful. Start small and keep good records of new business that is a direct result from your advertising efforts. This way you can focus your dollars on efforts that pay off and drop advertising with little to no return on investment.

Let the love grow

You’ve heard it before, but it’s so important that it’s worth mentioning again: Teaching the world what you know is a tremendously powerful method of establishing credibility and bringing in new clients. If you’ve established your business as the expert in a given niche of design or development you’ve, more than likely, built an incredible store of very specific knowledge and experience. While it would seem to make good sense to keep that information to yourself (in order to preserve your competitive advantage) the opposite is actually true.

Write guest posts on influential blogs, post frequently to your own blog, make sure you’re helping as many other designers or developers that you can. Every new place you can get your name and your information only helps to spread your brand and solidify your status as an expert. And contrary to belittling your competitive advantage (remember, competitive advantage is a multi-headed monster and it takes more than just your knowledge to take your place in the market), it fortifies your position in the market as the most knowledgeable and skilled practitioner in your field.

Need an example? Think about the chefs of high end restaurants: Why do you think they are so happy to write cook books full of their most prized recipes? I’m sure the big royalty checks help, but it’s because they know it takes more than the ingredient list to make a beautiful and delicious dish, and that those cookbooks are helping thousands of people cook better food for themselves, which only serves to build their positive brand equity and name recognition.

Charge More

Yup. Simple idea right? You want to earn more? Then charge more. If you have a constant stream of good business, and especially if you have to turn clients away because you are too busy, you should be charging more for your services. Much has been written about the psychological link between perceived quality and price and this idea was covered extensively in my last article here on Smashing Magazine about pricing, but pricing can be a great way to control the amount of work you have on your schedule.

Working too many hours? Raise your prices and you’ll cull some of the price conscious clients off the bottom. Chances are, you’ll be earning the same or more from less hours. A wedding photographer that I know has been steadily raising her prices since about the third client she ever got and it’s only fueled her business. She is now charging at least double what she was originally charging and continues to increase her client-base.

Something to remember about price changes though. If you are going to raise your prices, give fair warning to your current and possible future clients with an announcement on your blog about the price hike. Being honest and forthcoming about what your prices will be and why you are becoming more expensive will generally quell any opposition from clients about the higher price tag on your services.

Hopefully I’ve given some hope to those newbie freelancers out there and some encouragement to those sitting on the earnings plateau. And I hope that everyone has taken away the idea that, more than any other single concept, the idea of Brand Equity should be the paramount concern in any marketing effort you decide to follow!

Further Resources

• The Top 5 Powerhouse Marketing Secrets For Freelancers
  A good list of tips for positioning yourself and making the sale.
• 10 Useful Marketing Tools For Freelancers
  Exactly the way it sounds – A list of helpful tools to aid you in your marketing efforts.
• 9 Tips for Establishing Your Own Marketing Method as a Freelancer
  This is a good article that goes into depth on how to formulate a personal marketing plan.
• 27 proven freelance marketing tips
  Long list of marketing tips and tricks for freelancers. The article is geared towards writers but many, if not all, of the tips can be applied to freelancers of any type.

About the author

Jeff Gardner is a business nerd. He loves spreadsheets, making graphs and helping companies figure out how to perform better. He also enjoys writing, photography and being outside. You can check him out at his blog or look at some of his photos on his newly redesigned photography site.

Article taken from: http://www.smashingmagazine.com/2009/08/24/marketing-rules-and-principles-for-freelancers/