You are using Internet Explorer. Have you considered upgrading?
To stand out your text, you can apply some effects like word art or lighting effect. These effects are very common and easy. If you would like to create something different or even more outstanding, you can have a go on this glass broken effect.
Filter Forge – Photoshop Plugin with 6500+ Textures and Effects
Today we present Part 1 of a two part post, identifying common mistakes in design, and showing you the right way to do things.
For each example we will present case-studies, in order for you to understand the principles of design first hand.
Whilst color is a great attribute to web design, it must be used correctly. Colors should go together well, and be easy on the eyes. Color should be used to draw attention, not just for the sake of it:
WRONG:
Yaxay.com – The colors of this design are a little overwhelming. The viewers eye doesn’t really know where to go. The large block of bright orange in the background actually pulls the viewers eye away from the page content.
ShopSafe.com – The bright colors of the menu and background seem to clash. They’re far too saturated, giving a cheap feel to the website. The overwhelming colors pull the viewers eye away from the content. The eye should be on the website’s offers and products, not on the useless background!
RIGHT:
ColorSchemer.com – This website shows that bright colors can be done tastefully. The background, whilst bright is subdued enough to enhance the content, rather than distract from it. The brightest colors are in the top-center of the design, drawing in the users eye. The bright colors are relevant to the site’s purpose, and give life to the website’s design.
37Signals.com – Whilst not an overly colorful website, blocks of color are used to promote the most vital content of the website. Key text and product areas are highlighted with color, and different (but complimentary) colors are used to differentiate between the various products.
A good website design should have clear, legible typography. Fonts should be kept to a minimum (2-3 tops) so as not to overwhelm your visitors.
WRONG:
KanyeUniversecity.com/blog – Kanye West’s blog uses menu font that is very hard to read (not helped by it’s tiny size). His menu is rendered very unusable, and the website suffers.
Neil Gaiman – Neil Gaiman’s blog uses a similarly hard to read menu font. The image menu tabs, close kerning, close proximity between menu links, and integrate into the header actually make the menu look like part of the header design, rather than a menu at all. The result – a hard to navigate website!
RIGHT:
AListApart.com – AListApart uses a very clear menu typography, as well as elegant headings. Fonts are used sparingly, but to great effect!
ElliotJayStocks.com – ElliotJayStocks uses dynamic text replacement to improve his pages typography. The menu and headline use the same type, but both are clear and legible.
With so many websites out there, branding is becoming increasingly important. Designs should not only look professional, but encompass your websites philosophies and message. Furthermore, your brand should help set you apart from your competitors, sticking out in visitors minds.
WRONG:
TechDesigns.co.uk – TechDesigns design isn’t terrible, but it had literally nothing to set it apart from the crowd. The design seems like any generic hosting template, yet it’s for a web design agency!
BusinessProDesigns.com – BusinessProDesigns is another very generic lookins website. There is no branding, no uniqueness to the design.
RIGHT:
Tutorial9.net – Tutorial9 has a clear brand, playing off of the ‘Cloud 9′ ideal. The logo, subtle background patterns and color-scheme all serve to promote the image of providing ‘heavenly tutorials’ to their visitors.
OutLawDesignBlog.com – With a name like ‘Danny Outlaw’ Danny couldn’t really help but brand himself brilliantly. That being said, his website pulls off the branding effort with perfection. The western feel and attention to brand detail is outstanding!
The old motto Keep It Simple Stupid is never truer than in the world of web design. Simplicity is key to great design. The best designs only have the content that is vital, no useless content at all. Additionally white space is required for great design, leaving a good amount of space between the visual elements of the page in order to give it a padded feeling.
WRONG:
WebCreationUK.com – WebCreationUK is a web design company, yet they seem to find the need to cram every piece of information they can onto their homepage. There is no feeling of being drawn into their site, as instead you feel bombarded by the amount of data that they’re throwing at you!
Web-App.net – Web-App.net takes a similarly shocking approach, bombarding you with endless columns of text. There is very sporadic white space on this website, and because of this content areas are not clearly defined.
RIGHT:
KyanMedia.com – KyanMedia contains a very selective amount of information, and for this reason it’s visual elements feel nicely spaced out and focused. There is no confusion when viewing this design, your eye knows just where to go.
MT-Ventures.com – MediaTemple Ventures is a very minimal design, yet it doesn’t feel underdone. Rather, the design is elegant, and the content feels professionally integrated. The design utilizes plenty of white space.
A unique design is essential. I’m personally not a fan of the thousands of sites using pre-made themes and templates. Nothing about these designs stands out, and particularly those sites in the design niche should consider using a custom-made design:
WRONG:
Websites Using Pre-Made Themes – Sure, themes/templates are convenient and handy, but in using a template many sites sacrifice their ability to make a real name for themselves. One solution for designers is to purchase a theme so that the code is already in place, but then use the design to make modifications – this way you can put a unique twist on a pre-made design. I’d like to make it clear that I have nothing against theme/template providers, many of them offer great designs. However, professional websites should consider using a unique design.
RIGHT:
WebDesignerWall – WebDesignerWall has one of my favorite all time favorite designs. It’s originality and creativity had the entire community talking when the design first went live.
WebDesignerDepot – WebDesignerDepot is a more recent example of a design that captured the interest of the design community. The hugely creative and unique header helped to carve out a niche for the blog, providing quality content and great design insight.
    |
Since its emergence, the digital photography market has gradually supplanted the traditional one. APN and digital SLR cameras entered our lives, and some people announced the death of silver-based images. This is not all lie, and yet old-fashioned images have been particularly popular in the past few years. All we do seem to do now is try to recreate the atmosphere of those bygone times anyway. Blurry, distorted and over-saturated images are not just a fad anymore. People have became familiar with the style and even consider it a full-fledged photographic genre.
And this is where toy cameras play a role. These devices, made entirely of plastic, including often the lens itself, are not only toys. Sure, they cost next to nothing and have no controls to speak of, but this is what people like about them: they create unpredictable pictures, with equally unpredictable vintage effects. Once you understand this, the rest is a beautiful game. Take them anywhere, anytime, and photograph whatever you like.
Photo credit: Pirouetting, by helenannsia
How does this apply to modern design? Now that vintage websites are so trendy, why not look to this type of image for inspiration? You probably don’t want to go through the trouble of taking up silver-based photography because that would mean buying, developing and scanning film, maybe even making prints. That takes time and is expensive.
What you can do, though, is use the magic of Photoshop to make your ultra-sharp, high-definition images look like they were taken with one of these cameras. Below are a list of the most famous toy cameras and some tutorials that can be used to recreate their famous effects. Most of them are part of the Lomography movement, but you might also want to consider some other options in trying to recreate that authentic look. You also may be interested in our previous article “The Disturbing Beauty of Oversaturated Pictures and Lomography.”
[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]
Toy cameras are cheap, low quality and yet functional. As such, the deformations in the photos they produce are pronounced, and not all images are guaranteed to be perfectly exposed. Still, there are just so many of them these days that picking a few is hard. The ones presented here have paved the way for the success of the others. You may know them but not the stories behind them?
Let’s start where it all began. Picture yourself in Hong Kong in the early ’60s, when a factory starts producing the Diana. This inexpensive plastic-body camera was at the time usually given away as a novelty gift. Occasionally, it would be used by actual photographers who took advantage of the various effects it produced. And many effects there were. Because of the poor quality of materials used, the Diana camera was disposed to light leaks, leading to film damage, an effect typically fixed by sealing the seams with light-proof tape. Handy, huh?
But the plastic body wasn’t the most interesting part: it was the lens, also made out of plastic. Not only did it enhance the already low contrast created by the light infiltration, but it also made for odd color rendering, chromatic aberration and blurry images. As if this weren’t enough, the image circle only marginally covered the diagonal of the film frame, which is why Diana images have heaving vignetting.
Photo credit: elZekah
As photographers started to deliberately exploit these characteristics, production grew through the ’70s and opened the way for other toy camera manufacturers.
Photo credit: chomdee
This is where things get a bit tricky, so pay attention. It’s now the beginning of the ’90s, and for a few years the Russian factory Lomo PLC has been producing the Lomo LC-A camera, which basically has all of the characteristics of a toy camera (vignetting in particular). But production was stopped, and the camera was all but forgotten until two Austrian students found one at a flea market in 1991 and decided to exploit its marketing potential. They convinced the director of the Lomo PLC factory to relaunch production and negotiated an exclusive contract for distribution with their brand-new company: Lomography AG.
Photo credit: maaku
And here begins the Lomography movement. If the term is familiar to you, you probably know at least two things about it. First, it promotes casual snapshot photography. Second, it is associated with over-saturated and high-contrast images. To confuse things, this second characteristic has nothing to do with the LC-A camera itself or with any other cameras for that matter. It is actually the result of the way the film is processed, which would usually be cross-processing. But Lomography is a movement, not a technique, and it was certainly the first to promote camera imperfections as an aesthetic. The success of the LC-A camera helped spread this aesthetic.
Photo credit: citronnade
With the success of this movement, Lomography AG became interested in other low-cost cameras, such as the Holga, which had been produced in China for a decade. Even though it was made by a different manufacturer, the Holga was considered the successor of the Diana. Inspired by its predecessor, the Holga was designed as an inexpensive mass-market camera. And like the Diana, it is not of the best quality and has the same flaws.
Photo credit: babyabby10
But the Holga became popular and was even exported to the West over time, mostly for photo-reporting, for which its low profile was appreciated. Its problems were no longer problems, and now it is not surprising to hear of Holga photos winning awards. Because it is entirely manual, one can create effects, such as double exposure and panoramas, by not winding the film.
Photo credit: Bill Hansen (website)
These three cameras don’t have many differences. They all take multiple shots in a set period of time, thus creating micro-images that look like short animated movies. The Actionsampler and Supersampler have four lenses each, while the Oktomat has eight, fitting eight frames into the standard 35mm.
Photo credit: amylynnthompson
To make them a bit more fun, what you see through the viewfinder is not exactly what you get.
Photo credit: golfpunkgirl
As the name suggests, the Lomo Fisheye camera has a fish-eye lens. It was the first 35mm compact camera to offer such a wide angle (170°), and unlike the other toy cameras covered here, it gave surprisingly good results for the price. The second edition came with several enhancements, such a viewfinder that covered the same angle as the lens (it was blocked off before).
Photo credit: aapnootmies
The effect created, often seen in sport images, can serve many other purposes. But the user should be aware of two major characteristics: strong deformation and light leaks.
Photo credit: faha
Now, let’s put all this into practice. Even if you are familiar with these effects, have ever actually tried to replicate them? There are a lot of different effects, and you can combine them to create unique images.
How to Fake a Holga Photograph
This tutorial shows you how to fake Holga photographs in a few simple steps.
Another Way to Fake a Holga Photograph
Another tutorial on faking Holga photographs.
Fish-eye effect
This shows you how to create a fish-eye effect for a picture taken with a regular lens. This one is a video and it addresses two important points: the lens circle border is not supposed to be so sharp when taking a fish-eye photograph, and one often deals with light infiltration.
Fish-eye effect
Another fish-eye tutorial. It doesn’t show how to distort the image, so you will have to add this step yourself, but it adds a nice final touch to the image by using a picture of the inside of a fish-eye lens.
Vignetting
A very simple tutorial on recreating the vignetting effect.
Soft-Focus Lens Effect
What if you’re already happy with the contrast and color saturation of your image and just want to recreate the effect of a soft-focus camera lens or diffusion filter? In this tutorial, you’ll learn a fast and easy way to add a more traditional soft-focus lens effect to images.
Faking Barrel Distortion and Chromatic Aberrations
Here is a nice Photoshop plug-in to fake barrel distortion and chromatic aberrations. Adding these effects to your pictures will make them look even more authentic.
Light Leaks Effect, Part 1 and Part 2
Of course, this article wouldn’t be complete without a great tutorial on light leak effects. Here is an awesome one, divided into two parts, each covering a different effect: a white-blur light and a colored bar leak.
Getting That X-Pro Lomo Look
This tutorial is fairly quick and easy. It shows you how to get that great x-pro Lomo look by tweaking color. You’ll be exploring a new method of vignetting, and you’ll be widening and blurring the image a little.
Cross-Processing Tutorial
With so many possible permutations of film stock and processing techniques, there is no single, identifiable look to cross-processed images. The most common combination is C-41 as E-6, in which slide chemistry is used to process color negative film; and mimicking it in Photoshop is a quick job. Image contrast is usually high, with blown-out highlights, while shadows tend towards dense shades of blue. Reds tend to be magenta, lips almost purple and highlights normally have a yellow-green tinge.
Cross-Processing
Another cros-processing tutorial.
Vintage Effect
Age your images a give them a vintage effect.
Through the Viewfinder
Did you know that Flickr has a Through the Viewfinder group? The idea is that you shoot through the viewfinder of an old camera using your modern digital or film camera and create an interesting framing effect. Here is a tutorial on how to create this effect.
Resources of Speckle Pattern
Yes, there is also a Flickr group called “Noise and Dust Through the Viewfinder.”
Paper Texture Effect
Here is a quick and easy tutorial for those who want to learn the art of taking a photo and turning it into an old-fashioned vintage picture.
Some More Paper Texture Effect
Another tutorial (this one a video).
Filmstrip Effect
Download a filmstrip template and use it to create negatives of your pictures.
Double Exposure
When you take a double-exposed photograph, the results are usually a bit unpredictable. With Photoshop you have much more control over the result.
Another Way to Create Double Exposure
While the most common way to create a double exposure is by using a different blending mode on the top layer and adjusting its opacity, this method accurately simulates how a camera takes a double exposure.
No tutorials are needed to create these effects. They are included here merely to give you more ideas. You’ll still need to work on your pictures to get that vintage look. Then, just put them together and enjoy.
Shoot Series Like the Oktomat and the Actionsampler
Draw inspiration from the Oktomat and Actionsampler cameras. You’ll get either four or eight images in the same frame, each of them having been shot after an interval of only a few seconds.
Photo credit: Look!, by Moyö
Shoot Series like the Supersampler
The Supersampler effect is quite similar to the Actionsampler: four images in the same frame, but spaced differently. And remember that you can arrange layers both horizontally and vertically.
Photo credit: moving clocks run slow, by aleinsomniac
Panorama 1
Panorama images don’t necessarily have to be perfectly arranged. Here is an example of what else can be done.
Photo credit: Christophe Dillinger (website)
Panorama 2
Another inspiring panorama.
Photo credit: bruceberrien
Panorama 3
The panorama view can be combined with a filmstrip effect. It simulates a double-exposure panorama taken on a manual camera.
Photo credit: mikrofoniusz
If cheapness is a defining characteristic of toy cameras, it surely isn’t for Polaroids. The Polaroid camera itself is not expensive, but because Fuji is now the only company that produces the film for it, getting affordable ones has become difficult. But this may change in the next few months thanks to the Impossible Project.
Going back a bit, the world’s first commercial instant camera was the “Land” camera, unveiled in 1947. Since then, Polaroid has become synonymous with instant photography, because most of the cameras have been created by the Polaroid Corporation. Nowadays, the cameras are used by photographers mainly to preview their work before actually shooting. But as toy cameras, they are fun to play with and can make for nice effects.
Photo credit: paine666
Retro Polaroid Coloring on Your Photos
This is a simple tutorial on how to get that retro Polaroid coloring in your photos.
Polaroid Transfer Effect
This Photoshop tutorial shows you how to create a cool old photo transfer edge effect using a piece of stock photography, an alpha channel and the burn and dodge tools.
Considering that Flickr has a group for almost every subject, it is no surprise that there is one for toy cameras. Here is a showcase of the most beautiful images from it.
Photo credit: have I told you lately, by cHr1st1an S
Photo credit: ubu84
Photo credit: 000038, by qwj
Photo credit: 54330027, by etara
Photo credit: Ipanema Beach – Brazil, by marcelo_maia
Photo credit: Hélicoïdal, by Cathy Lehnebach
Photo credit: Purgatoire, by stiveune
Photo credit: untitled, by Greg Zauswoz
Photo credit: untitled, by bradbrochill
Photo credit: .., by cjlomo
Photo credit: spree1, by hellomelly
Photo credit: Love me two times, by laszlo_ototh
Photo credit: exit, by renaishashin
Photo credit: untitled, by Sergio Conde Sánchez
Photo credit: Akhirnya buat lomba juga -__-, by febryanyovi
Photo credit: Cosy Clausterphobia, by miss_michelle
Photo credit: svema_test1, by ashtonleee
Photo credit: untitled, by poppart
Photo credit: lomographicsocietyinternational
Photo credit: La Bòfia – Redscale, by fgali1964
Photo credit: chomdee
Photo credit: offcenter
Photo credit: Holga Tennis, by Nick Whitmoyer
Photo credit: golfpunkgirl
Photo credit: eyetwist
Old Toy Camera – Photoshop action
This Photoshop action makes images look as though they are aged prints, shot on a toy or antique camera. Also included are two actions that create borders similar to those seen on photos from many antique and toy cameras.
Toy Camera Contest
FILE presents here a selection of images submitted for its Toy Camera Contest. This collection gives an idea of the challenge facing the judges to find three winners. The range and quality of the submitted images are impressive.
Gallery
This project is home to photos taken with toy cameras. Most are plastic: Holga, Diana, Dorie, Debonair, Lubitel, Banner, Snappy and Yunon. Distortion, blur and imperfection are some of the characteristics that endear these cameras to enthusiasts.
Abduzeedo: 60 Interesting Lomo Fisheye Shots
Gathered here are a few Lomography fish-eye shots. Some were taken with Lomography cameras such as the Diana and the LC-A+ with a fish-eye lens adapter attached.
Lomography.com
Lomographic Society International Website.
(al)
© Jessica Bordeau for Smashing Magazine, 2010. | Permalink | 19 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: photography, photoshop, toy camera, tutorial, Tutorials, vintage
Avatar has swept the whole world. Lots of designers have done lots of art works related to “Avatar”. Lots of designers have been working on the transformation from a human photo to “Avatar”. However, this tutorial will start the artworks from pencil drafting. You will learn how to develop an impressive Avatar art in a new way.
Filter Forge – Photoshop Plugin with 6500+ Textures and Effects
Blog design has always been a special art. Bloggers often have to fit a lot of content into their designs – post contents, titles, dates, social bookmarking options, advertising – the list goes on…
That’s why today we present 30 fresh and professional blog designs that present their content elegantly and cleanly. Some really inspiring designers here!
Fuctastic has created an awesome skull illustration for the readers of Vectips. Download the illustration and check out all the intricate details! It is a great illustration to use by itself or pick through the many elements used to create the skull!
Illustrator Version: CS4 and Illustrator 10 EPS
License: See Terms in Download
Web Icon Set aims to provide the best professional and quality web icons to web designer and developer. They have released some free web icons including Application Icons, Blogging Icons, Mobile Icons and E-Commerce Icons. They come in 128, 64, 48, 32px sizes. These icons are for free for both personal and commercial projects.
Filter Forge – Photoshop Plugin with 6500+ Textures and Effects
    |
I thought I could not be out-geeked. With a background in radio, and having dabbled in the demo scene on the Commodore 64 and hung out on BBSes and IRC for a long time and all the other things normal kids don’t quite get, I thought I was safe in this area.
Then I went to my first WhereCamp, an unconference dealing with geographical issues and how they relate to the world of Web development. Even my A-Levels in Astronomy did not help me there. I was out-geeked by the people who drive and tweak the things that we now consider normal about geo-location on the Web.
Pulling out your phone, find your location and getting directions to the nearest bar is easy, but a lot of work has gone into making that possible. The good news is that because of that effort, mere geo-mortals like you and me can now create geographically aware products using a few lines of code. So, let’s give the geo-community a big hand.
[Offtopic: by the way, did you already get your copy of the Smashing Book?]
First of all, why is it important to consider physical location on this planet (at this moment) when we develop Web products? There are a few answers to this.
The first answer is mobility. The days of people sitting in front of desktop machines at home are over. Sales of mobile devices, laptops and netbooks have overtaken those of bulky stationary computers in the last few years. The power of processors now allows us to use smaller, more mobile hardware to perform the same tasks. So, if people use their hardware on the go, we should bring our systems to them. Which brings us to the second—very important—point: relevance.
Giving the user content that is relevant to the physical space they are in at the moment makes a lot of sense. We are creatures of habit. While we love the reach of the Internet, we also want to be able to find things in our local area easily: people to meet, cafes to frequent, interesting buildings and museums to learn about. The advertising industry—especially of the adult and dating variety—realized this years ago. I am sure you have come across one of the following before:
I am sure these ads are more successful than the ones that show only user names. That the photos and names are the same for every location doesn’t seem to be a problem (but yes, I noticed it). So how does it all work?
Every computer on a network has a number that identifies it: its IP address. The Internet is nothing but a massive network, and your IP number is assigned to you by the service provider that you have used to connect to that network. Because the numbers that service providers assign change from one geographical location to the next (much like telephone numbers), you can make quite a good estimate of where your visitors are from.
To find out where a certain phone number is from, you use a phone book. To find out where an IP is from, you can use the Maxmind GeoIP database. Maxmind also provides a JavaScript solution that you can use on websites:
<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
<script>
var info = document.getElementById('info');
var lat = geoip_latitude();
var lon = geoip_longitude();
var city = geoip_city();
var out = '<h3>Information from your IP</h3>'+
'<ul>'+
'<li>Latitude: ' + lat + '</li>'+
'<li>Longitude: ' + lon + '</li>'+
'<li>City: ' + city + '</li>'+
'<li>Region: ' + geoip_region() + '</li>'+
'<li>Region Name: ' + geoip_region_name() + '</li>'+
'<li>Postal Code: ' + geoip_postal_code() + '</li>'+
'<li>Country Code: ' + geoip_country_code() + '</li>'+
'<li>Country Name: ' + geoip_country_name() + '</li>'+
'</ul>'
info.innerHTML = out;
</script>
This gives you some information on the user (try it out for yourself). The challenge, though, is relevance. Your IP location is the location of the IP that your provider has assigned to you. Depending on your provider, this could be quite a ways off (in my case, I live in London, but my provider used to show me as living in Rochester). Another problem is if you work for a company that uses a VPN. At Yahoo, for example, I have to connect to the VPN to read my company email, and I have to choose a location to connect to:
So, for a solution like the one highlighted above, I would show up as being in a totally different part of the world (which might be useful for watching Internet TV in the UK while I am in the US). IP geo-location, then, is an approximation, not a dead-on science.
Guessing geographical location via IP is possible, but it can also be pretty creepy. Being able to take advantage of your location is useful, but security-conscious users and people who are generally suspicious of the Internet are not happy with the idea of their movements being monitored by a computer. This makes sense: if I can monitor your whereabouts day and night, I would know where and when to rob your house without you being there.
There are a lot of solutions to the challenge of having good-quality geo-location and maintaining privacy. Google Gears has a geo-location service; Plazes helps you store your location; and Yahoo’s Fire Eagle is probably the most polished way to securely maintain your location on the Web.
The problem with all of these services is that they require the user to either install a plug-in or visit a Web service to update their location. This is not fun; browsers should do the work for you.
We now have a W3C recommendation for a geo-location API that allows browsers to request the geographical location of the user. This makes it less creepy, and you get real data back.
Firefox 3.5 and above supports the W3C geo-location API. So does Safari on the iPhone if you run OS 3.0 or above. If you use the API, the browser will ask the user whether they want to share their location with your website.
Once the user allows you to get their location, you get much more detailed latitude and longitude values. Using the API is very easy:
// if the browser supports the w3c geo api
if(navigator.geolocation){
// get the current position
navigator.geolocation.getCurrentPosition(
// if this was successful, get the latitude and longitude
function(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
},
// if there was an error
function(error){
alert('ouch');
});
}
Compare the IP and W3C solutions side by side. As you can see, there can be quite a difference in measuring the visitor’s location. The extent of the difference is shown in the following demo:
Having more information is nice, but we have lost the name of the city and all the other nice data that came with the Maxmind database. Because the location has changed, we cannot just grab that old data; we have to find a way to convert latitude and longitude coordinates into a name. This process is called “reverse geo-coding,” and several services on the Web allow you to do it. Probably the most well-known is the geo-names Web service, but it has a few issues. For starters, the results are very US-centric.
One freely available but lesser-known reverse geo-coder that works worldwide comes from a surprising source: Flickr. The flickr.places.findByLatLon service returns a location from a latitude and longitude coordinates. You can try it out in the app explorer, but by far the easiest way to use it is by using the Yahoo Query Language (or YQL). YQL deserves its own article, but let’s just say that, instead of having to authenticate with the Flickr API and read the docs, reverse geo-coding becomes as easy as this:
select * from flickr.places where lat=37.416115 and lon=-122.0245671
Using the YQL Web service, you can get the result back as XML or JSON. So, to use the service in JavaScript, all you need is the following:
<script type="text/javascript" charset="utf-8">
function getPlaceFromFlickr(lat,lon,callback){
// the YQL statement
var yql = 'select * from flickr.places where lat='+lat+' and lon='+lon;
// assembling the YQL webservice API
var url = 'http://query.yahooapis.com/v1/public/yql?q='+
encodeURIComponent(yql)+'&format=json&diagnostics='+
'false&callback='+callback;
// create a new script node and add it to the document
var s = document.createElement('script');
s.setAttribute('src',url);
document.getElementsByTagName('head')[0].appendChild(s);
};
// callback in case there is a place found
function output(o){
if(typeof(o.query.results.places.place) != 'undefined'){
alert(o.query.results.places.place.name);
}
}
// call the function with my current lat/lon
getPlaceFromFlickr(37.416115,-122.02456,'output');
</script>
Combine that with the other services, and we get a more detailed result and can put a name to the coordinates:
While latitude and longitude coordinates are a good way to describe a location on Earth, it is also ambiguous. The coordinates could represent either the centre of a city or a point of interest (such as a museum or a pub) in that spot.
To work around the problem, Yahoo and Flickr (and soon will Twitter) support another way to pinpoint a location. The Where On Earth Identifier (or WOEID) is a more granular way to describe locations on Earth. Because Flickr supports it, we can easily get get photos from a particular area:
select * from flickr.photos.search where woe_id in ( select place.woeid from flickr.places where lat=37.416115 and lon=-122.02456 )
Using this and a few lines of JavaScript, showing geo-located photos is pretty easy:
This has also been wrapped in a simple-to-use YQL solution. The following code will display 10 photos of Paris:
<script>
function photos(o){
var container = document.getElementById('photos');
container.innerHTML = o.results;
}
</script>
<script src="http://query.yahooapis.com/v1/public/yql?q=
select%20*%20from%20flickr.photolist%20where%20location%3D%22paris%2Cfr
%22%20and%20text%3D%22%22%20and%20amount%3D10&format=xml&
env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=photos">
You can also play with this in the YQL console.
The main question about implementations such as the one above is why couldn’t we just do a search on Flickr for the city, instead of doing all the complex geo-lookups? The reason is false positives. Take Paris, for example: if you want to show photos of Paris on a travel website, you don’t want Paris Hilton to show up in there. Same goes for Jack London. You may also want to show photos of London, England, not London, Ontario. Geographic data is full of these kinds of gotchas, and the term for finding the right one is “disambiguation.” See the Wikipedia article on “Victoria” to see just how many geographical contexts this term can have.
Finding a visitor’s geographic location is all well and good, but it doesn’t mean much if you can’t link it to information for that area. This is where it gets tricky. For Flickr (and soon Twitter), this is easy, because both services are able to attach geographical locations to the content you put in them. This is not so for most of the information on the Web, though, and this is when we resort to clever algorithms, machine-learning, pattern-matching and all the other think-tank stuff that computers and the scientists in front of them do.
Say you want to identify the geographical locations that a particular text or Web page talks about. Yahoo offers a service for that called Placemaker, and it is pretty easy to use. You need to get a developer key and send this as appid, send a text as documentContent, define the type of the text as documentType and define the type of data you want back as outputType. All of this needs to be sent as a POST to http://wherein.yahooapis.com/v1/document:
<form action="http://wherein.yahooapis.com/v1/document" method="post">
<textarea id="text" name="documentContent">Hi there, I am Chris.
I live in London, I am currently in Sunnyvale and will soon be in
Atlanta and Las Vegas.</textarea>
<div><input type="submit" name="sub" value="get locations"></div>
<input type="hidden" name="appid" value="{YOUR_APP_ID}">
<input type="hidden" name="documentType" value="text/plain">
<input type="hidden" name="outputType" value="xml">
</form>
You can try this out yourself. Using PHP to call the API instead of a simple form, you can even format the output nicely. See it in action here:
While developers who have played around with Web services won’t find Placemaker hard to use, the service can be daunting for the average developer. That is why I built GeoMaker some time ago. GeoMaker allows you to enter a text or URL, select the locations you want to include in the final outcome, and get the locations either as a map to copy and paste or as micro-formats.
However, because there is also a YQL solution for using PlaceMaker in JavaScript, we can do the same with a few lines of client-side code to enhance an HTML document. Check out the following example:
To use this, you need three things: a text with geographical locations in them in an element with an ID, a Google Maps API key (which you can get here) and the following few lines of code:
<script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script>
<script>
addmap.config.mapkey = 'COPY YOUR API KEY HERE';
addmap.analyse('content');
</script>
This makes it incredibly easy to give your visitors a sense of what part of the world a text is related to.
Online maps have been around for a while now (and Google Maps was instrumental in the rise of AJAX), and many providers out there allow you to add maps to your documents. Google is probably the leader, but Yahoo also has maps, as does Microsoft and many more. There is even a fully open map service called Open Street Maps, which has been instrumental in the recent rescue efforts in Haiti.
If you want interactive maps, probably the easiest thing to use is Mapstraction, which is a JavaScript library that does away with the discrepancies between the various map providers and gives you a single interface for all of them. 24ways published a good introduction to it three years ago.
Probably the simplest way to show a map that supports markers and paths in your document without having to dive into JavaScript is the Google static maps API. It creates maps as images, and all you need to do is provide the map information in the src URI of the image. For example, in the script example above, this would be:
http://maps.google.com/maps/api/staticmap? sensor=false &size=200x200 &maptype=roadmap &key=YOUR_MAP_KEY &markers=color:blue|label:1|37.4447,-122.161 &markers=color:blue|label:2|37.3385,-121.886 &markers=color:blue|label:3|37.3716,-122.038 &markers=color:blue|label:4|37.7792,-122.42
You can define the size and type of the map. If all you provide is the location of markers, the API will automatically find the right zoom level and area to ensure that all markers are visible. Google’s website even offers a detailed tool to create static maps, including markers and paths.
I hope this has given you some insight into all of the things you can do to bring the earth to your product and to put your product on the map. Geo-location and geo-aware services are already huge, and they’ll be even more important this year. There will be more services—some mobile providers are ready to roll out new hardware and software—and now you can be a part of it.
What the geo-world needs now is a designer’s eye, and this is where you can help the geo-geeks create apps that matter, that look great and that make a difference in our visitors’ lives. For inspiration, check out Mapumental, which allows you to pinpoint a place to live in London, or see how Google Earth and some 3-D Objects allow you to race a milk truck on real map data.
(al)
© Christian Heilmann for Smashing Magazine, 2010. | Permalink | 25 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: javascript
This tutorial is available exclusively to our VIP members. In order to read the tutorial and download it’s original .psd source file you must sign up as a member.
If you sign up today you get access to over 75 .psd source files, as well as our weekly members only tutorials and other content!
The result of this tutorial is shown below:
This tutorial teaches you:
Learn how to layer up textures, brushes and overlays to create a highly complex, grungy website header.
Learn how to manipulate photos in order to create an eye-catching and dramatic photo montage header.
You can view this tutorial using the link below, but remember, in order to do so you must have a VIP account.
    |
The design profession is full of happy folks, and understanding why so many designers enjoy their work is not hard. But not all are so happy. If you’re not careful, the joy of getting paid to pursue your passion can be tainted by the less joyous realities of the professional world.
You see, no matter how skilled you are as a designer, unless you are equally prepared in professional matters, your prospects will be limited and your circumstances compromised. This is true whether you work freelance, for an agency or in-house with a company.
Every week I hear from designers who are struggling to come to terms with these realities. Unhappy with their current circumstances, they write to ask for advice on improving their lot. Usually, they either claim not to understand how things got so bad, or they lay the blame somewhere other than at their own feet. In every case, however, the sole cause is their poor choices and lack of professional acumen. It needn’t be so.
Design is craft, but no matter how skilled you are as a designer, unless you are equally prepared in professional matters, your prospects will be limited and your circumstances compromised. Image source
[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]
Here, I’ll paraphrase a few emails I’ve received from designers seeking advice. For each, I’ll diagnose the situation, explain in no uncertain terms what should have been done to avoid the situation and suggest a strategy the designer can follow to improve their circumstances.
These circumstances are not uncommon. Many of you reading this are likely experiencing similar problems… or may at some point in the future. I hope that the information, advice and strategies presented here will help you avoid these and other problems.
Question: “I recently graduated from design school and have started freelancing, and I’m wondering how you get clients? How do you get your name out there?”
This person may just as well have jumped out of an airplane and then asked, “Now, how do I go about finding parachute? Oh, and should I land somewhere specific? How exactly do I do that?” Even so, this lack of foresight is quite common. The immediate lesson is that you shouldn’t become an independent professional with little to no professional experience, with no prospects and knowing little to nothing about the business.
Fresh out of college or design school, you’re not a professional; you’re a technician (by definition, the opposite of professional). For the next few years you should be acquiring the skills, knowledge and understanding required of a design professional. The place to do this is in the company of peers and under the wings of mentors: at an agency or in house with a company. The successive lessons and built-in support system inherent in these environments are essential to a designer’s professional development.
The way to “get your name out there” is to establish a pattern of excellent work and a reputation for integrity over several years, while you let your agency or company carry the burden of acquiring clients and running the projects. If you are any good, in time you will earn the respect of your peers and superiors, establish a good reputation (spread by word of mouth) and acquire professional acumen. If in that time you make any effort at all to share your work and thoughts with the wider design or business community, your name will become known (through word of mouth and your portfolio or blog), and your reputation will be built on substance rather than on social marketing’s smoke and mirrors. This would be the appropriate time to embark on a freelance career.
As a freelancer, you’ll be running the whole show. So, you’ve got to be an ace at finances and budgeting; at speaking with and converting potential clients; at knowing what to discuss in order to weed out unsuitable potential clients; at preparing all manner of legal and project-specific documents, writing proposals, project management, intra-project client communications (and being the confident, unflinching pro in the face of every client request, question and distasteful situation); at dealing with dozens of types of unforeseen issues without hesitation; at maintaining tax information and constantly preparing various tax and business forms; at marketing, preparing and maintaining your own branding and identity, with its various elements; and at knowing how to begin and conclude all kinds of projects confidently. Oh, and you’ll also need a constant flow of interested potential clients.
If you’re not confident and accomplished in all of these areas, then you’re not ready to be a freelance designer.
Freelancing is only suited to seasoned professionals. Pursuing a freelance career as your first step in the profession is almost always a foolish move. Professionalism is maintained by habit. If your first step is a misstep, you’ve set a poor tone for the work ahead. Unless you immediately correct your mistakes, the habits you’ll develop will be clumsy and unprofessional.
The way to “get your name out there” is to establish a pattern of excellent work and a reputation for integrity over several years. You need to be good at whatever it is you are doing. Image source
Question: “I’m not very good at the discovery meeting with clients. I’m never really sure what to ask or how to figure out what sort of design they’re looking for. My project manager or C.D. usually ends up asking most of the design questions. What’s the best way to handle this situation?”
This is a common issue for designers at agencies, especially those with little experience. Luckily, an agency is a good place to gain experience and competence. But the question signals a few issues that require attention.
First of all, design questions are not really appropriate during the discovery process. Granted, specific branding constraints may need to be defined and understood, but the design you will craft will come not from the client’s judgment and understanding of design but from yours alone. The design will be your articulation of what they need, based mostly on their business aims, the website’s purpose, their customers’ needs and expectations, the end users’ specifics, etc. In fact, if you ask no design questions at all, you’re probably on the right track.
Imagine for a moment that you’re a physician trying to determine the best course of treatment for your patient. In that situation, you would not ask the patient what he thinks should be prescribed. Instead you would inquire about his symptoms, history, environment, physical needs (e.g. is he a pro athlete, or does he simply need to be able to get around normally?). The answers to these questions will define the constraints and indicate the appropriate course of action. Your patient’s opinion on what prescription would be appropriate is likely irrelevant; he came to you because he lacks the ability to help himself.
Go into the discovery meeting prepared. Before the meeting, learn as much as you can about the company, its history and its past and current activities. Script a list of questions—some specific to this client and some appropriate for any client—to get the ball rolling. These questions will serve as a springboard to more in-depth discussion, which in turn will flesh out what you need to know.
One more thing: you’re the design professional and it’s your responsibility to conduct the project successfully. You (not the PM or CD) should be driving the discovery. Use your time at the agency to improve your discovery skills, taking on more responsibility with each successive client. Reflect on each project’s discovery process, and look for ways to improve the process and your questions. With time and effort, you should become competent in this essential part of the design process.
Question: “Some of my clients expect three or four (or more) comps from me. But that’s a lot of work, and I would prefer to show just a couple. Should I just charge more if they want more comps? How do some designers get away with just one or two for all of their clients?”
These are interesting questions, and they beg a couple more:
Good design is not found by picking from a pack of arbitrary options, but is rather the result of deliberate, contextual choices. Taking a scattershot approach to design is in no way effective. Your clients may not appreciate this, but you certainly should! Your responsibility is to ensure that your clients don’t shoot themselves in the foot.
The only person who knows how many design options are appropriate is you: the designer who is engaged in the process. And in almost every case there is one best design solution. Sometimes another compelling direction is worth considering and presenting to the client, but this cannot be known until you have fully engaged in the process, conscious of the parameters specific to that project.
In most cases, you’ll explore a host of options during the design process. A thorough exploration will cull a majority of the trials, leaving only the most appropriate and compelling candidate(s)—one or two. These and only these design options should be shown to the client. Inferior designs should never be presented, even to fulfill a request for more options (options for what: mediocrity?).
As a freelance design professional, or even as an agency designer, your responsibility is to define how many design options to present in a given situation. If a potential client insists on a less effective and less professional process, do not agree to work with that client. Compromise never brings excellence and has no place in design or professionalism. If you become comfortable making this sort of compromise, other compromises will also become easy for you. Your clients deserve and are paying for more than a compromised design.
Question: “I seldom get to meet my clients before I present design comps to them. By that point, the projects almost always become a tiresome series of re-workings of my original ideas. How can I change this?”
One wonders what these original ideas were based on if the designer has never met the clients. If so, either 1) this person is at the wrong agency, and/or 2) this person lacks the professional understanding or the backbone to insist that she decide how the agency should structure design projects and client-designer interaction.
Relationships are built on trust, and trust is born of experience and understanding. Your client cannot trust someone they have never met and who they know nothing about. So, when designs are presented by someone the client has never met, no wonder the client is a bit reticent and inclined to second-guess the designer’s decisions. These and the ensuing problems are all a result of the designer’s failings. Yes, it’s on you. Always.
As the designer and an aspiring professional, you must insist on driving the design process. This means that you must be the one to meet with the client in the beginning. If a project brief is required, you must be the one to create it, based on your direct conversations with the client and his team.
If your agency has a process in place that prevents you from fulfilling your responsibilities, your options are either to change the process or to find a better agency. Anything less relegates you to an irresponsible practice in an unprofessional environment. Hopefully, this is not acceptable to you, because it would erode the habits you are professionally obliged to cultivate.
Question: “I love to design, and I think I’m pretty good at it. But I’m not comfortable talking to clients. Whenever I’m on the phone or in front of a client, I get very nervous. I think my nervousness makes me seem less capable, and I’m pretty sure I lose some of my client’s confidence. What can I do to correct this? Should someone else do the talking?”
Effective communication is one of a designer’s most important jobs. Every communication, whether by email or phone or in person, is an opportunity to demonstrate value and win confidence. And if you don’t demonstrate value, you’ll seldom win confidence. Like designer #1 above, you may simply not be prepared to be a freelance professional.
If you fail in communicating, no matter how skilled a designer you are, you won’t get the chance to ply your skills very often, and seldom for the best clients. The best clients are those who invest complete trust in their designers. That trust must be earned before any actual designing happens (see designer #4 above).
And no, someone else should not do the talking. The design professional’s job is to show confidence when dealing with clients. No one else can communicate your value or win trust for you. The reason clients distrust those who do not communicate with confidence is because this trait signals other incompetencies. This may sound harsh, but it’s a fact: if you’re not confident, it is because you lack capability (whether professional competence, design skill or perhaps vocabulary)… and you know it. Address this void, and your confidence will shine through.
If you lack confidence in conversation, start to address this deficiency immediately or find another calling. Otherwise, you may have a bright future as a production artist somewhere, but not much of one as a design professional. Design professionals are experts at every aspect of interacting with people.
Confidence aside, it goes without saying that excellent vocabulary is an important component of effective communication. People judge you by your words, as well they should. Knowing this, your professional responsibility is to work on your vocabulary, just as you work on your design ability: daily.
Skill in design is only part of what defines a competent professional. Professionalism is also measured by integrity, preparedness in handling and interacting with clients, and breadth of understanding in the myriad of issues that will confront you in the course of working with others (whether clients, co-workers, employees or others). Professionalism is also measured by how well you uphold ethical standards in making the difficult decisions in every area of your work.
Talent and skill can make you a technician; and a technician is, as we noted, not a professional. For context, think of traditional professions: lawyers, doctors, architects. The enormous responsibility they are entrusted with, and their ability to carry out that responsibility across the scope of their work, makes these people professionals. Thus, an able professional would not be troubled by the questions posed in this article. Rather, they would know precisely how to proceed or how to circumvent these issues. If you have any of these questions, you may not be prepared to be a design professional.
Professionalism is also measured by integrity, preparedness in handling and interacting with clients, and breadth of understanding in the myriad of issues that will confront you in the course of working with others. Image source
All of these situations result from designers believing that being a good designer is good enough. This profession has little room for those who lack a professional’s integrity and broad understanding. Designers who are willing to compromise and simply accept the faulty decisions that are handed to them have had their profession stolen from them. These designers have no business working with clients who pay good money for professional service.
Be better than this. Your first step to success is to assume your rightful responsibility for everything that involves you. Dissatisfied with the flawed structure at your agency? You chose to work there; change your circumstances. Frustrated by your perpetual lack of prospects and stalled reputation? Sounds like you’ve got deficiencies to address. Overwhelmed by the challenges and complexities inherent in freelancing? You probably started freelancing without sufficient preparation.
Fix it. You fix it. It’s all on you.
Designers: you get paid to do what you love. How great is that!? But this fortunate and enviable situation leads to fulfillment only if you take full ownership of your profession. Otherwise, you’re carrying a time bomb. When it goes off, your career will either falter or be blown to smithereens. Don’t let this happen to you. Educate yourself. Have the courage and integrity to habitually make good choices so that you enjoy a long and happy career as a design professional.
(al)
© Andy Rutledge for Smashing Magazine, 2010. | Permalink | 50 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:
Authors
