This Weeks Poll

Many of you voted in the poll deciding which site would get redesigned today. As you may have picked up on from the comments to the poll post, there was some doubt over the true winner. Whilst DoKall showed the most votes, I have a few reasons for choosing The Capital Singers of Trenton for this weeks redesign:

• The Capital Singers of Trenton were leading the poll considerably, which was also evident from the genuine comments left by people who didn’t like their original design.
• DoKall was not receiving many votes at all, but then in the space of a couple of hours received around 100 votes, pushing them into the lead. Since that point they have continued to hardly receive any new votes.
• I received several spammy comments to the post promoting DoKall and it’s ‘wonderful’ services.

So at the end of the day yes, it is my decision which site gets redesigned. Although I’m sure you’ll agree that in this case the right site is getting the redesign, as none of us like spammers.

Week 2: The Capital Singers of Trenton

The Capital Singers of Trenton are a semi-professional singing chorus, aiming to enrich New Jersey. You can view their current website below:

The Capital Singers of Trenton.

In the space of 5 minutes I can identify some of the key strengths and weaknesses of this design, and sketch out a mockup.

STRENGTHS:

• I never like to be too harsh about a design. But the strengths of this website are limited. The inclusion of upcoming events on the homepage is a positive.
• Additionally the logo is OK, although a little small.

WEAKNESSES:

• The top of the content area is being wasted. The huge amount of padding and useless text like ‘welcome’ pushes the important content way down the page.
• Similarly the lack of columns for content means that all text, images and other content are all on separate lines, spacing it out way too much.
• There is a lack of any real design. The whole layout is very blocky, table based and generally 90s feeling.
• The huge headline text overshadows the logo and menu, making the website harder to navigate and the ‘brand’ of the group fall to the wayside.
• There is no real color scheme going on. There needs to be colors used for backgrounds, buttons and menus that tie in with the site’s logo and general image.
• The photo of the group, which should be acting as the ‘face’ of the website is pushed right down the page. This needs to be brought up, so that the website is no longer faceless, and shows just who the ‘The Capital Singers of Trenton’ are!

My Redesign

As always, I was limited by the 30 minute time-frame, perhaps more than last week as I had to try and ‘undo’ a lot of the negative points of the original design. However, I managed to come up with the following design:

WHAT I TRIED TO DO:

• Give the website a more personal feel – using a larger logo, and prominent image of the group to promote who they are.
• Created a much clearer navigation, cutting out redundant links from the original menu, focusing on what users will actually be looking at.
• An explanation of who the group are, and what they do took visual precedence over the upcoming events section.
• To assist the ‘personal’ feel of the redesign I added in a section showing the director, and encouraging visitors to learn more.
• A lot of content as either pointless or repeated on the original design (such as contact details). I stripped away all unnecessary content and made a single set of contact details for the header, encouraging visitors to get in touch.
• I used the colors of the groups logo to base the main websites color-scheme around. This helped provide more of a ‘brand’ for the group, as well as an attractive, unified color-scheme for visitors.

Comparing the 2 Designs:

Here is a quick comparison between the original design and my 30 minute redesign. Sure, my design could be more polished, but I believe that a lot of the basic elements have been improved upon, creating a more pleasant browsing experience.

How and Why To Enter Redesign Saturdays

You can have the chance to have your website redesigned in next weeks post. All you need to do is leave a comment to this post with your website address and why you think it needs a redesign.

The Benefits of Getting Your Site Redesigned Include:

• Most obviously – a FREE redesign job!
• Your website gets exposure to PSDFAN’s thousands of readers
• You understand how to improve your website. This isn’t just a redesign, it’s a lesson in design.
• You will get emailed the .psd of your redesign and can do whatever you want with it!

So please, leave a comment today for a chance to have your website redesigned next week!

In this article we are going to present 5 chart libraries that suit different needs from simple charts to high complex charts. Most of them are free for personal and commercial use.

Tables are a rather unchallenged interface element. In most cases, they are a forgetten element, an undesired element and a seldom-used element.

Learn how to set up an Apache server to handle custom file extensions.

Do you remember?.. The first time you played with pieces of modeling clay, melting them in your hands and going deeper and deeper into the colourful plasticine world where your imagination was the only limit. Since the 19th century, when Franz Kolb and William Harbutt independently of each other invented plasticine (modeling clay), it has been used in almost all fields of art: illustration, web design, typography, claymation, installation design.

Plasticine artworks can be found just everywhere: advertisements, book/magazine as well as CD/DVD covers, movies / TV series, music videos, computer / console games, and even web design elements. Below you will find a collection of beautiful plasticine artworks that hopefully will inspire you and give you an idea about how this material can be used in your next design project.

[By the way, did you know there is a brand new Smashing Wordpress Book? Push WordPress past its limits!]

Plasticine + Photography / Illustration

Advertising

Nike Italy by Wieden+Kennedy Amsterdam (Netherlands)

Faber Castell plasticine Advertisement by Unitas RNL Santiago (Chile)

Onida Washing Machines Advertisement by McCann Erickson Mumbai (India)

Freya Lingerie Advertising by Stuart Jackson

Becks Advertisement by Scholz+Friends Hamburg (Germany)

Forma Total Gym by Artplan (Rio de Janeiro, Brazil)

Nicorette Advertisement by DRAFTFCB KOBZA (Austria)

Aniquem Advertisement by McCann Erickson Peru

Stamyl Advertisement by Maruri Grey (Ecuador)

Magazine Cover Design

Esquire (March 2009) – 30th birthday of plasticine character Morph

Poster Design

“The Summer Reading Club” Poster for The Toronto Public Library by Barbara Reid

“Young Audience” Poster for Theatre Direct by Barbara Reid

Flyer for The Ovnis by Pablo Alfieri

Book Illustrations

Barbara Reid

Artworks

Amy Vangsgard

Irma Gruenholz

Anna Villalba

Manuela Martin

Charlotte Oh

Tammy Durham

CactuSoup

Plasticine + Animation = Claymation

Clay animation, or claymation as it is popularly known, is one of the types of stop-motion animation which is extremely laborious. Each animated piece is sculpted in plasticine clay. Some of the best-known clay-animation artists and studios include Will Vinton, Aardman Animation, Art Clockey and many others.

Animatied Movies / TV Series

The Gumby Show (1957 – …)

Closed Mondays (1974)

Morph (1977 – …)

The Adventures of Mark Twain (1986)

Wallace and Gromit (1989 – present)

Wallace and Gromit in “A Matter of Loaf and Death” (2008)

Creature Comforts (1989)

Mona Lisa Descending a Staircase (1992)

Loves Me… Loves Me Not (1992)

Purple and Brown (2006 – …)

Shaun The Sheep (2007 – …)

Chess Game “Poole – HAL 9000″ (from the “2001: A Space Odyssey” movie)

Pigeon Pilfer (2009)

Plasticine Crow (1981) [RU]

Last Year’s Snow Was Falling (1983) [RU]

From Iljitsch to Kuzmich (2000 – …) [RU]

Movie / TV Opening Title Sequences

Freaked

Spokoynoy nochi, malyshi! [RU]

Advertising

Levi’s

Sony Bravia: Play-doh

Chevron Cars

American Express: Modelling Clay by OgilvyOne London

Xbox 360

Music Videos

Frank Zappa – Baby Snakes (1979)

John Fogerty – Vanz Kant Danz (1987)

Grizzly Bear – Ready, Able (2009)

Paolo Nutini – Pencil Full Of Lead (2009)

Computer / Console Games

Claymates (1993)

ClayFighter (1993)

Primal Rage (1994)

The Neverhood (1996)

SkullMonkeys (1998)

Platypus (2002)

Gumby vs. the Astrobots (2005)

Cletus Clay (2006)

Wallace & Gromit’s Grand Adventures (2008)

Shaun The Sheep

Plasticine + Web Design

Microsoft: {You shape} it

lauren.brandcubator

malum

Plastilina Creativa

Zaramella

Plastilin Event

Plasticine + Typography

Further Resources

• http://www.bombastudio.pl/index.php?/identity/plastelinowa-typografia-new/
• http://www.behance.net/Gallery/plasticine-typo/310776

Installation Design

James May’s “Plasticine Paradise” garden at RHS Chelsea Flower Show 2009 on May 19-23, 2009 in London, England.

Plasticine Art Tutorials

• “Working With Plasticine” Tutorial by Barbara Reid
• “Making Plasticine Pictures Video” Tutorial by Barbara Reid

What do you think?

What is your opinion on plasticine art? In case any exceptional plasticine works haven’’t been covered, please feel free to use the comments area to share your thoughts and suggest other beautiful works. We are looking forward to your feedback and your thoughts!

---

© Aygul Zagidullina 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:

How to Create an Outstanding ‘Out of Frame’ Horse Scene

In this tutorial I will show you how to make a horse reach out of a frame with some simple, but cool techniques. Besides of the techniques you will learn how to combine colors to make the scene even more dramatic.

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Open up this picture in photoshop Frame Photo

Select the “Pen Tool (P)” and mark around it like on the picture below. It will help you if you’re holding down the left mouse-click when you’re on the wheels. This makes it more rounded.

When you have marked it all, right click on it and click on “make selection…” and press ok with the settings you see below:

When selected, press “ctrl+c” to copy and “ctrl+v” to paste it. Name the new layer “Frame” and delete the “Background layer” After this we still have some red spots inside the cogwheels. You can erase them by also using the “Pen Tool (P)”, select it with the same settings and delete.

Step 2

Now you’re going to do almost the same here. As you can see on the picture below, we’re going to erase the scene inside the frame, so we can design it just as we like. With the Pen Tool (P) you’re going to select the area inside. But mark around the cogwheels, because we want to keep them. When selected as on the picture below, click delete.

Once again we have some spots inside the cogwheels we need to erase. Do it in the same way as on step 1. As you can see on the picture there is two places I have erased the inner cogwheel because we don’t have all of it and therefore it’s better without.

Step 3

I think that the frame has a lot of grain, which will be prettier if we reduce them a little bit. So go to Filter>Noise>Reduce Noise… and use these settings.

Look if you can see the difference:

Step 4

Create a new document with these settings:

Now we need a black background for this document, so set the foreground color to #000000. Pick up the “Paint Bucket Tool” (G) and click on the document.

Step 5

Now go back to our old document and drag the “frame” to our new document by holding down the mouse button. As you can see on the picture below, the frame is too big. So hold down “ctrl+t” to transform the frame.

Before we get started with the fun part, we need to flip the frame horizontal, so go to edit>transform>flip horizontal… Now we have the highlight to the right, where the horse also will be jumping out from.

Step 6

Open up this picture in Photoshop http://www.flickr.com/photos/vegaseddie/3309223161/sizes/l/in/photostream/ and drag it into our document. Name this layer “horse”

Set the layer’s opacity down to 50 % so we can see where to transform it to. Hold down “ctrl+t” to transform it into around the same settings as I used:

When you’re finished transforming it you can set the layer’s opacity up to 100% again.

Step 7

Now we’re going to cut the horse out, so we can erase other parts of the horse. So you need to use the “Pencil Tool (P)” again, and mark the house. Take your time. It’s better that you cut it out in the exact same shape than thinking of being finish as quick as possible. When you’re finish marking the horse, right click on it and click on “make selection” and use the settings as you see below on picture 2. After that, hold down “ctrl+c” to copy and “ctrl+v” to paste it. Name the new layer “horse outside”.

Step 8

Go down to the “horse” layer, and create a layer mask.

Hold down the ctrl key while clicking on the thumbnail of the “frame” layer, so we have that selected. (Remember, you still need to be on the layer mask on the “horse” layer)

Now with your foreground color set to black hold down “shift+f5” to fill the layer mask with black, click “ok”, and hold down “ctrl+d” to deselect. Now it should look like picture 2 below.

Still on the layer mask, select a black brush and paint the outgoing scene of the “horse” layer. It will afterwards look like this:

Step 9

I think that I have made my document too small, but don’t worry, it’s easy to fix. Go to image>canvas size (“Alt+Ctrl+C”) and use the settings you see below:

Now it should be a little bigger:

Step 10

Select the “frame” layer, the “horse” layer and the “horse outside” layer at the same time, hold down “ctrl+t” to transform it a little bigger. In order to maintain image quality you should always work with Smart Objects when possible. The settings of the transformation shall be like on the picture below:

Step 11

Now we’re going to give the horse some highlights. Start by creating a new layer upon the “horse outside” layer. Name the new layer “horse highlights” Set the blending mode to overlay and the opacity down to 85 % like on the picture below.

Hold down the “ctrl” key and click on the thumbnail on the “horse outside” layer, but still be on the “horse highlights” layer. With the color set to #fffcd9, you’re going to paint around the places as you see below.

Step 12

Now we’re going to add some drop shadows to the “horse outside” layer. Go to Layer>Layer Style>Drop shadows and enter in these settings:

Step 13

I’m not satisfied about the look of the frame yet. Go down to the frame, right click and click on “duplicate layer”, so we got another frame layer. On the new layer (“frame copy”) set the “blending mode” to “multiply” and the “opacity” down to 70%. It should look like this:

Now do the exact same thing to the horse layer with the exact same settings, so it’s going to look like this

Step 14

Now we’re going to add a little dept to the “frame copy” layer. Go to Layer>Layer Style>Bevel and Emboss and enter the settings you see below:

Step 15

Now we’re also going to add a little dept to the “horse” layer. Select the burn tool with “Midtones” in the “Range” and an “Exposure” on 50 %. Burn these places.

Step 16

Now we’re going to add some extra soil beneath the horse. So create a new layer upon “horse highlights”. Name it “soil”

Download this brush Debris Brush Set

Install the brush in Photoshop by select a random brush and load the brush this place:

Pick this color #22110a, and paint with the first brush, but adjust the size to around 5-600 px. After you have painted it, set the blending mode to “Multiply”

Step 17

Actually I think that we can make the horse look a little more outstanding. Right click on the “horse outside” layer and click on “Duplicate Layer…” And stay on the new “horse outside copy” layer

Go to Layer>Layer Style>Drop shadows to check the layer style off.

Now go to the old “horse outside” layer and blur this layer by going to Filter>Blur>Motion Blur and enter these settings:

Step 18

We can actually duplicate the “frame copy” layer one more time. Do that. On the new “frame copy 2”, set the blending mode to “overlay” and the opacity to 45 %.

Step 19

Now we’re going to make the scene a little more dramatic. Create a new layer right upon the “horse copy” layer (beneath the “horse outside” layer). Name it “clouds”.

On our new layer, select the “Rectangular Marquee Tool (M)” and select this place you see below:

Go to Select>Modify>Feather (“shift+f6”) and feather it with 30 pixels.

Now when have a black and white color in your color palette, go to Filter>Render>Clouds… Hold down ctrl+d to deselect.

Set the blending mode to “multiply” and the opacity to 70 %.

Create a layer mask, and pick up the “Gradient Tool (G)” With these settings:

Hold down shift drag the “Gradient tool” from left middle of the frame to about half way in the scene.

Now click on the “clouds” layer’s thumbnail, and go to edit>transform>distort and distort it like this:

Last, go to edit>transform>flip horizontal… The result will look like this.

Step 20

Now we’re going to make the reflection. This is a very easy technique. Make the “Background” layer invisible by clicking on the eye icon.
Now click “ctrl+a” to select all.

Go to edit>copy merged (“shift+ctrl+c”) and hold down “ctrl+v” to paste. Name the new copied layer “Reflection”.

Now go to edit>transform>flip vertical and drag it right under our original frame like this:

Now let’s make that “Background” layer visible again. But still be on our “Reflection” layer. Set the layer’s opacity to 30 %

Create a new layer upon the “reflection” layer, name it “reflection shadow”. Pick up the “Gradient tool (G)” with the same settings and before, and drag it from down to up like on the picture below:

Step 21

Create a layer upon all other layers. Name it “Blue”. Pick up this color #3f3e65. Pick up the “Paint Bucket tool” and fill the layer with this color. Set the blending mode to “overlay” and the opacity to 65 %

Create another layer upon the “Blue” layer. Name it “Brown”. Pick up this color #624b2b and fill the layer with this color. Set the blending mode to “color” and the opacity to 60 %

This post is part of a weekly series showcasing inspirational vector art. Although the series showcases vector art, some work might just be vector inspired, not created completely with vector art. If you have any art suggestions, feel free to comment! For more vector art inspiration, check out the Vectips Flickr Group.

Robot Pink Mao by Loguy

Indian Mobile Girl by Loguy

American Mobile Girl by Loguy

Flight of the Conchords by Aaron Horkey

The Break by RNSaffold

Largest Nosering Ever by Freakshow6

sebastien CUYPERS

Firma el Libro por Darfu-México Los Niños De Darfu by Omar Mijangos 1000changos

My Magical Tee by MikeLaughead

Le Carnaval de la Folie by Christian San Jose

Revolver by Death by Colour

Electro Ganesh poster by Lavínia Carvalho

Wonderland State of Mind by Helen Huang

Nike – Dream your 90 by Happycentro

LMS MonoGRAM by Like Minded Studio

Factory by Luca Belotti

blue by neslirawles

Mister Mista Series 02 by Price

God Save the Villain! by Enkel Dika

Almighty’s by Andreas Krapf

Yoki Safari – Issue 1 Promo by Freakshow6

Hari autumn for dodongo-fin by Freakshow6

Brrrrr by Zzanthia

Lashified Characters by kinkei

Yes, this is another round-up of fresh and useful Javascript techniques, tools and resources. But don’t close the tab yet, as you might find this one very useful. In this selection we present calendars, forms, buttons, navigation, debugging, optimization and compatibility tables as well as handy resources and tools. We also cover various jQuery-plugins that will help you extend the functionality of your website and improve user experience with ready components or coding solutions.

The last section also covers a number of useful educational resources such as a compilation of useful JavaScript coding practices, a detailed comparison of JavaScript frameworks and general JavaScript programming conventions. We are looking forward to your feedback.

You may be interested in the following related posts:

• 50 Fresh JavaScript Tools That Will Improve Your Workflow
• 45 Powerful CSS/JavaScript-Techniques
• 70 Useful AJAX And JavaScript Techniques

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Calendars and Timelines

jDigiClock – Digital Clock (HTC Hero inspired)
jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget.

jQuery Sliding Clock v1.1
jQuery transpearant Slider clock with CSS sprites.

Date / Time Picker
Note that this control is not designed to work in IE6; although it will function correctly in most cases, the positioning of the calendar may be way off depending on how your page is styled.

JavaScript Debugging and Validation Tools

Venkman JavaScript Debugger project page
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. It does not include Gecko-based browsers such as K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is available as an add-on package in XPI format. Venkman JavaScript Debugger has been provided as part of the Mozilla install distribution since October 3rd 2001.

CompanionJS
Companion.JS (pronounced Companion dot JS or CJS) is a Javascript debugger for IE.

How to Test your JavaScript Code with QUnit
QUnit is a powerful JavaScript unit testing framework that helps you to debug code. It’s written by members of the jQuery team, and is the official test suite for jQuery. But QUnit is general enough to test any regular JavaScript code, and it’s even able to test server-side JavaScript via some JavaScript engine like Rhino or V8.

JS Bin – Collaborative JavaScript Debugging
JS Bin is an open source collaborative JavaScript debugging tool.

Forms, Buttons & Navigation

Making a Google Wave History Slider
Here is shown how to create a Google Wave-like history slider. Using it will enable visitors to go back and forth in time to view the changes that take place on a comment thread.

Fancy Radio Buttons With jQuery
Creation of 2 mandatory option sets that a user could choose, while hiding off the radio button inputs and using an anchor links to make it a bit more usable.

Creative Button Animations with Sprites and JQuery
Fading hover effect for which the transition is smoothed with JavaScript, using jQuery library.

Password (un)Masking
JavaScript jQuery that toggles the masking and unmasking of the password field.

jQuery MagicLine Navigation
These “sliding” style navigation bars have been around a while, and turns out it’s really pretty darn easy. Here are put two examples together.

Fixed Fade Out Menu: A CSS and jQuery Tutorial
The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields
The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.

Sliding Labels v2
Form label keeping the label inline, but sliding it off to the left rather than going away on click.

Ketchup Plugin
Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

Layout tools

jQuery {css}designerGrid Plugin
{css} designerGrid is A jQuery Plugin developed for website interface developers who use the grid system of layout. {css} designerGrid is intended to assist these developers with CSS prototyping.

css-template-layout
JavaScript (jQuery) implementation of the CSS Template Layout Module

How to create a fluid grid with jQuery
Grid-based layout is probably the more preferred way to style up a webpage to give it more magazine-like look and feel. This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout (See demo here). The algorithm/procedure used in this tutorial is very simple and straightforward. There are more advanced algorithms out there which can handle multiple scenarios. But the purpose is to understand the basic logic on how to create such layout. So here it goes…

closure-templates
Closure Templates are a client- and server-side templating system that helps you dynamically build reusable HTML and UI elements. They are easy to learn and customizable to fit your application’s needs. Closure Templates support JavaScript and Java and use a data model and expression syntax that works for either language. You can also use the built-in message support to easily localize your applications.

Useful jQuery Plugins

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!

jQuery Roundabout
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)

jParse – jQuery XML Parse Plugin
jParse is a jQuery plugin that allows you to parse XML that was fetched with the jQuery .ajax method (making it fully customizable).

jQuery Quicksand plugin
Reorder and filter items with a nice shuffling animation.

typeQuery, change website typography with jquery
typeQuery gives the flexibility to change the font-family for everything you define with class, id, or tag, this example is referring to the selected item on a select object with id=”tag” and the font-family value at select object with id=”family”: $($("#tag").val()).css("font-family", $("#family").val());

Flip! A jQuery plugin v0.9.9
Flip is a jQuery plugin that will flip easily your elements in four directions.

Data Encryption With JavaScript: jCryption
jCryption is a jQuery plugin for encrypting POST/GET data submitted by forms. It uses public-key algorithm of RSA for the encryption & has a PHP file for handling the decryption of data.

Minimalist jQuery: 11 useful plugins under 4K
jQuery makes our lives easier. So much so that it’s tempting to use it all the time, inadvertently slowing our page load times (cue YSlow and Hammerhead). Combining, compressing, and delivering scripts at the end of your page helps in the HTTP request department. On the file size front, below are jQuery plugins that give solid bang for your performance buck.

Undo/Redo in jQuery
An easy-to-use plugin for adding undo/redo capabilities to a jQuery application. It is based loosely on the Objective-C/Cocoa way of doing things.

editease
editEase – jQuery CMS | no fuss, no database, no worries

jsHub
jsHub is a single piece of JavaScript (a “tag”) that can handle reading different sorts of page information and then send them to many different vendors’ products. One piece of code to send to Google Analytics, Omniture SiteCatalyst, WebTrends and Mixpanel. Instead of one piece of JavaScript per vendor, jsHub has a single piece of code (the “hub”) and plugins that know how to translate into the required wire protocol for each vendor. Vendors only maintain the plugin for their product.

Educational JavaScript Resources and Tutorials

Caffeinated Simpleton
JavaScript is an amazing little language, but it’s got some quirks that turn a lot of people off. One of those quirks is this, and how it’s not necessarily what you expect it to be. this isn’t that complicated, but there are very few explanations of how it works on the internet. This article is an attempt to explain how this works and how to use it properly.

What You Need To Know About JavaScript Scope
This article discusses how JavaScript handles scope and how various JavaScript libraries provide methods for dealing with it and how they smooth out a few bumps. We’ll also look at how you can get back to basics and do some interesting scope wrangling without a library, a useful approach if you’re writing code that needs to stand alone.

Learning Advanced JavaScript
A very nice tutorial to learn JavaScript, containing code and discussion from the upcoming book Secrets of the JavaScript Ninja by John Resig.

Highlight search terms automagically with JavaScript and mark
Script surrounding the search term(s) with the mark element rather than a span, although the class searchword is retained in case you want to style these marks differently from others. In the CSS, the rule article mark is just added to turn it a gentle shade of pink.

10 Really Helpful Traversing Functions in jQuery
With jQuery, selecting HTML elements is laughably easy. But at times, we may wish to further refine the selection, which can be a hassle when the HTML structure is complicated. In this tutorial, we’ll explore ten ways that we can refine and extend a set of wrapped elements that we wish to operate upon.

Using keyboard shortcuts in Javascript
If you want to enhance your web app, Javascript keyboards shortcuts is definitely something to consider. In this article, you’ll learn to use JS keyboard shortcuts, with and without the JQuery framework.

Code Conventions for the JavaScript Programming Language
This is a set of coding conventions and rules for use in JavaScript programming.

jQuery – Select element cheat sheet
This cheat sheet helps you to find the index of a selected option, set the selected option by value, set the selected option by text, insert a new option before or after another and get the text or value of the selected option.

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

Park your Horse, Code Cowboy: Professional JavaScript Workflows, Part 1
In this series, we’ll talk about tools & techniques you can use to cover those No’s, and cut a lot of strife & embarrassment from your JavaScript experience.

JavaScript Reference examples (example source code)
JavaScript Reference examples, organized by Objects, Properties, Methods & Collections. Some Event Handlers Reference are also available.

JavaScript best practices
A compilation of best practices and good advice I’ve amassed over the years, much of it learnt the hard way (experimentation and suchlike). Take the advice below to heart and keep it in a part of your brain that has a quick access route so you can apply it without thinking about it. I am sure you will find things to disagree with, and that is a good thing – you should question what you read, and strive to find better solutions. However, I have found that following these principles has made me a more effective developer and allowed other developers to build upon my work more easily.

wtfjs
JavaScript is a language we love despite it giving us so much to hate. This is a collection of those very special irregularities, inconstancies and just plain painfully unintuitive moments for the language of the web.

Related Posts

You may be interested in the following related posts:

• 50 Fresh JavaScript Tools That Will Improve Your Workflow
• 45 Powerful CSS/JavaScript-Techniques
• 70 Useful AJAX And JavaScript Techniques

Poll

What programming language should we cover in next round-up?surveys

---

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 18 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: AJAX, javascript, jquery

Have you wanted to learn more about color correction? The focus of this tutorial is to help you delve deeper into color correcting to up the production value of your images. Learn a few simple techniques while creating.

I will be using Photoshop CS4 for this tutorial, but all of the features I will use are available in previous versions of Photoshop. Or in any decent photo-editing software.

Primary Color Correction

In this tutorial, our work will be primary color correction. “Primary color correction affects the whole image, utilizing control over intensities of red, green, blue, gamma (mid tones), shadows (blacks) and highlights (whites).”

Overview

Before we begin, you’ll want to be sure that you have at least a novice understanding of the following tools in your photo-editing program: Curves, Hue/Saturation, Photo Filter, and Black & White adjustment layer.

Monochrome and Sepia

A monochromatic image is one whose range of colors consists of shades of a single color or hue.

Step 1: First, let’s make our image grayscale. There are various ways to do this, but we’ll look at just two:

I think the best way is to use the Black & White adjustment layer. (This can be found at the bottom of the Layers toolbox.) What is so great about this adjustment layer is the ability to control the luminance of the 6 primary and secondary colors – red, green, blue, cyan, magenta and yellow with the sliders. This is a very useful tool for fine-tuning the the tonal range of your image.

However, the Black & White adjustment layer is only in Photoshop CS3 and newer. So, if you’re using an older version, skip to the next step.

Step 2: Apply the Hue & Saturation adjustment layer. Click the Colorize checkbox and this will automatically desaturate and tint your image. However, the Hue is wrong. So set the Hue to 35. Now it’s starting to look right.

Step 3: Lastly, perfect color brightness of your image with the sliders in the Black & White adjustment layer. Use the eyedropper tool that comes with the filter to select the part of the image you want to alter and it will hightlight which color is in range. But be careful not to drastically change the colors or you’ll be in danger of posterizing the image.

Usually changes solely in the Black & White filter are not enough to correct the image; so apply a Curves adjustment layer on top and get your image looking right. (It’s best to do these steps last – after your color adjustments – so that you’re seeing and effecting the color-corrected spectrum.)

And, for sepia, you’re done.

In addition, using other monochromatic color schemes are done the same way. Instead of setting the Hue to 35, move the slider to the color of your choice. You also could up the Saturation a bit to make the colors pop. (For the image below, I set the Hue to 295 and the Saturation to 35.)

Bleach Bypass

A popular image treatment is the bleach bypass. In actual film-developing, this means skipping the bleaching process. This leaves a silver tint on the photograph, as if the black-and-white and color image had been combined. So that’s exactly what we’re going to do.

Step 1: Apply the Black & White adjustment layer once again to your image. (Or desaturate with a Hue & Saturation adjustment layer.) Then, the only alteration we need to do is in the blending mode: change it from Normal to Overlay.

Step 2: Apply a Curves adjustment layer on top. A characteristic of most bleach-bypassed images is increased contrast. So add a contrast curve to your image. But be careful. Adjustments should be minor at this stage because the image has a lot of contrast. Make sure you’re not overexposing in the highlights or underexposing in the shadows.

Quick Color Theory

Before we begin working on our next style, we’re going to talk quickly about color theory.

Take a look at the color wheels below. You’ll notice the three primary colors in our RGB color model: red, green and blue. Then, in between those you’ll notice the secondary colors of CMY: cyan, magenta, and yellow. Secondary colors are formed by the sum of two primary colors: cyan is green + blue, magenta is red + blue, and yellow is red + green. Simple enough.

The secondary colors are opposite on the color wheel to the primary colors. Hence:

Red – Cyan

Green – Magenta

Blue – Yellow

Another six tertiary colors are created by mixing primary and secondary colors. But we don’t need to get into that in detail right now.

The primary and secondary colors, and their relation to each other, are important for us to know. In the Curves adjustment layer you can effect color in the red, green, and blue channels separately. So, for instance, any adjustments upward of the diagonal line in the red channel increase the red in the image. Lowering, below the diagonal line, increases the cyan. The other channels are the same: Upward in the green channel, green; lower, magenta. Upward in the blue channel, blue; lower yellow.

Blockbuster/Fashion Look

Ok, now that we got that covered, let’s begin. This style is used a lot in big summer movies, such as the Transformer films. It’s also popular in fashion photography.

First off, take a look at the picture above. In an effort to create this look, determine the color hue and tint of the shadows, midtones, and highlights. Most importantly, the shadows and highlights. You’ll notice that the shadows are very bluish and the highlights – mainly the part of the image containing the skin tones – are, well, the color of skin.

This is a complementary color scheme. Meaning the colors used, blue and orange, are opposite each other on the color wheel.

When working with humans in your compositions, you have to take the skin tone into account. You can’t have people turning green, magenta, or blue. That would look odd. Skin will always be between orange, orange-yellow (tertiary), and yellow. Therefore to complement the subject, generally use opposite colors: between cyan, blue or blue-violet (tertiary).

Now that we know this, let’s stylize our photo.

Step 1: Apply a Curves adjustment layer to your image.

Step 2: In the color dropdown menu, change from RGB – which affects the overall brightness and contrast of the image – to blue. We’ll work backwards up the list, starting with blue and ending with RGB.

What we’ll want to do is bring the lower end of the curves slider up. This will increase the blue in the shadows. Next, to compensate for our first adjustment, we’ll want to decrease the blue in the highlights – taking it towards yellow – so that the skin tones stay closer to being correct.

Step 3: You’ll notice that the image has quite a purple tint to it. This is because the green and red channels are at equal intensity. To get a more blue color you can either go to the green channel and raise the shadows, or go to the red and lower the shadows. But there’s a difference here and you would do well to note it: If you were to raise the green shadows, the image would get slightly lighter and loses contrast. If you lower the red shadows, the image gets darker and gains contrast. The first is subtracting color and the second is adding.

In most cases, you’ll want to go with the option that subtracts, not adds.

And that’s what we’ll do. Go to the green channel, and bring it up just enough to take the purplish-tint out of the image. This is where you can decide between how much blue-violet or cyan you’d like in your blue-tinted shadows.

Step 4: At this point, you may need to go back to the blue channel and make sure the skin tone looks good. Not too blue and not too yellow. Adjust the highlights and midtones until you’re satisfied.

Step 5: Now we can go to the RGB or master channel. Finalize the luminance and contrast of your image. All I had to do with this image was lower the shadows.

I’m sitting pretty with a great look.

Step 6: Lastly, you can complement your image with one more filter. Increasing the blue in the shadows flooded the image with a bit too much color. Add a Hue & Saturation adjustment layer and drop the saturation to around -10.

The change is ever so slight. But, it’s perfection. And now you’ve got a blockbuster or fashion-style image. Smashing.

Bronze

Like in the film, 300, you can give your image quite a cool bronze look. This is similar to a sepia effect; however, the image shouldn’t be monochrome. Vibrant colors and those opposite to the bronze tonal region are still visible and actually stand out nicely, while the lights and the darks take on the bronze tint.

Let’s use a picture with more colors and a larger tonal range. It’ll be easier to see what’s happening.

Step 1: Start by applying a Photo Filter adjustment layer to your image. Change the filter color to Sepia and set the density between 90 to 100 percent. Make sure the preserve luminosity box is checked.

Step 2: Add a Hue & Saturation adjustment layer next. Desaturate the image anywhere from -10 to -50. Do what looks good to you.

Step 3: Add that trusty Curves adjustment layer. The bronze-style looks quite good with extra contrast. Make a nice contrast curve.

Step 4: An optional step, one which I think looks good, is to add a little diffusion. You can achieve this by duplicating your image layer (and keeping it under the effects). Next, apply a gaussian blur to the layer. Do not blur too much! If you put too much blur, your final image will look like it’s from a dream sequence – very soft.

For this picture, I’m using a 2.5 pixel blur.

Change the blending mode of the blurred image to Overlay. You’ll notice how contrasty your image gets. To keep it from getting too soft, change the fill anywhere from 25 to 50 percent. Then, compensate for the contrast accordingly with your curves layer.

That’s it for the big, bold, bronze look. This kid is vicious on his scooter. Watch out.

Conclusion

Bear in mind that there are many ways to achieve these looks and styles. There is no correct process or proceedure. Different colorists use different tools. To each his own. Find out what works best for you.

Also, remember that each picture you add these effects to will react differently. You shouldn’t expect these settings – or one specific procedure – to work equally well on all your pictures. It will vary due to the levels or amounts of shadows, highlights, colors, and contrast, etc.

The tendency can be to go overboard with effects. Do your best to use them sparingly and appropriately. When in doubt, less is more.

Go out and take your knowledge further by emulating styles and effects you see in magazines, films, or on the web. That’s a great way to learn. Have fun.

It’s been over three years since Geek Meet Gothenburg February 2007, so it’s about time for another one. Like last time, this event will take place at the NetRelations office in Gothenburg, Sweden. The date is March 24, 2010.

We’ll be talking about the usual web geek stuff, likely with a bit of emphasis on HTML 5 and other up-and-coming web things. Check out Geek Meet Göteborg – the sequel! on the NetRelations blog for the details and to sign up.

Read full post

Posted in Web General.