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.

(View This Tutorial)

Our Sponsor

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.

Saturation and Color Choices

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.

Typography

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.

Branding

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!

K.I.S.S

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 Layout

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!]

Famous Toy Cameras

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?

Diana

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

Lomo LC-A

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

Holga

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)

ActionSampler, SuperSampler, Oktomat

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

Lomo Fisheye 2

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

Photoshop Tutorials And Resources

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.

Faking the Holga Camera and Fisheye Lens

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.

Recreating Low-Quality Camera Flaws

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.

Working on Colors and Light Exposure

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.

Using Textures and Double Exposure

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.

Other Ideas

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

Want More?

Polaroid

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

Polaroid and Transfer Effect

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.

Showcase of Beautiful Pictures

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

Further Resources

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

One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you’re simply trying to get to the next or the previous item. MooTools NextPrev is a compact javascript class that allows you to move about a collection of items quickly using human terms.

The MooTools Class

var NextPrev = new Class({
	Implements: [Options,Events],
	options: {
		baseEvent: 'keyup',
		eventContainer: document,
		eventCheckNext: function(e){
			return true;
		},
		eventCheckPrevious: function(e){
			return true;
		},
		onLoad: $empty,
		onNext: $empty,
		onPrevious: $empty,
		startIndex: 0
	},
	initialize: function(collection,options) {
		this.setOptions(options);
		this.collection = $$(collection);
		if(this.options.container == document) this.options.container = document.body;
		this.index = this.options.startIndex;
		if(this.options.baseEvent) {
			$(this.options.eventContainer).addEvent(this.options.baseEvent,function(e) {
				if(this.options.eventCheckNext(e)) {
					this.move.bind(this)('next');
				}
				else if(this.options.eventCheckPrevious(e)) {
					this.move.bind(this)('previous');
				}
			}.bind(this));
		}
		this.fireEvent('load',[this.collection[this.index]]);
	},
	move: function(norp) {
		var previous = this.index;
		switch($type(norp)) {
			case 'string':
				var ev = 'next';
				if(norp == 'next') {
					var plus = this.index + 1;
					this.index = this.collection[plus] ? plus : 0;
				}
				else {
					var minus = this.index - 1;
					this.index = this.collection[minus] ? minus : this.collection.length-1;
					ev = 'previous';
				}
				this.fireEvent(ev,[this.collection[this.index],this.collection[previous]]);
				break;
			case 'element':
				this.index = this.collection.indexOf(norp) || 0;
				break;
			default:
				this.index = norp;
				break;
		}
		this.fireEvent('change',[this.collection[this.index],this.collection[previous]]);
		return this;
	}
});

The following are arguments, options, and events for NextPrev:

Arguments

• collection: The collection of elements..
• options: The instance options.

Options

• baseEvent: (defaults to ‘keyup’) The event to listen to.
• eventContainer: (defaults to document) The event listener container.
• eventCheckNext: (defaults to function) The function that decides if the conditions to trigger a “next” have been met.
• eventCheckPrevious: (defaults to function) The function that decides if the conditions to trigger a “previous” have been met.
• startIndex: (defaults to 0) The starting index for the collection.

Events

• change: Fired when the index changes.
• load: Fired every time the class is initialized.
• next: Fired when the next directive is triggered.
• previous: Fired when the previous directive is triggered.

Public Methods

• move: May be passed the Strings “next” or “prev”, or a DOM node.

Sample Usage

var np2 = new NextPrev($$('#images img'),{
	eventCheckNext: function(e) {
		if(e) e.stop(e);
		return e.key == 'right';
	},
	eventCheckPrevious: function(e) {
		if(e) e.stop(e);
		return e.key == 'left';
	},
	onNext: function(cur,prev) {
		prev.removeClass('featured');
		cur.addClass('featured');
	},
	onPrevious: function(cur,prev) {
		prev.removeClass('featured');
		cur.addClass('featured');
	},
	onLoad: function(cur) {
		cur.addClass('featured');
	}
});

The code above hijacks the “left” and “right” keys, moving forward and backward in the collection depending on which key was pressed.

NextPrev is extremely simple but also quite flexible. You decide the events, keys, actions, etc — the plugin simple allows for simple control of position in the list. Have ideas for this class? Know what you’d use it for? Let me know!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Introducing MooTools NextPrev

Related posts:

1. Create a Simple News Scroller Using MooTools, Part I: The Basics
2. Introducing MooTools ScrollSidebar
3. Introducing MooTools LinkAlert
4. Introducing MooTools Dotter
5. Create a Simple Slideshow Using MooTools, Part II: Controls and Events