Nettuts+

How to Build a Lava-Lamp Style Navigation Menu

Jeffrey Way — Sat, 13 Mar 2010 20:17:50 +0000

A couple weeks ago, I created a screencast that demonstrated how to build a three-level navigation menu. In a response email, one of our readers requested a tutorial on how to build a lava-lamp style menu. Luckily, it’s quite a simple task, especially when using a JavaScript library. We’ll build one from scratch today.

Prefer a Screencast?

Step 1 Create the Mark-up

Before we can create this neat functionality, we need a base from which to work from. In your favorite code editor, create an unordered list for your navigation, and import both jQuery and jQuery UI, via Google.





	
	SpasticNav  Plugin
	





	
		Home
		About
		Blog
		More About My Portfolio
		Contact

Note how we gave an id of “selected” to the home page. This is fairly standard in most websites; it allows use to target the current page, and style that particular list item accordingly.

Next, we must decide how to best implement the lava-lamp functionality. To allow for reusability, we’ll package this little script into a plugin, and call it like:

$('#nav').spasticNav();

Since we’ve decided to build a plugin, let’s go ahead and create a new file for that script, and reference it in our mark-up. We’ll call it jquery.spasticNav.js.

Step 2 Beginning the Plugin

To reduce the number of global variables that we must create, as well as remove any possibilities of the $ symbol clashing with other JavaScript libraries, let’s wrap our plugin in a self-executing anonymous function.

(function($) {

})(jQuery);

Now, jQuery will be passed into our plugin, and will be represented via the $ symbol.

Next, it’s generally a best practice to give the users of the plugin as much flexibility as possible. As such, we’ll give them the option of passing in an object-literal when they call the plugin to override a handful of settings. As I see it, they should be able to:

Set the amount of overlap for our little blob. This refers to how much the blob will exceed the height of the navigation menu.
Set the speed
Set a reset, which causes the blob to move back to the current page item (assuming that the user never clicks on a link)
Set the color of the blob. This can be accomplished with CSS, but it’s a nice convenience, nonetheless.
Set the easing option.

Now, we’ll name our plugin, and make it equal to a function. $.fn is simply an alias for jquery.prototype.

$.fn.spasticNav = function(options) {

};

Knowing that we’ll be allowing these overrides, we must make sure that we accept an “options” parameter.

Step 3 Configuration Options

Now that we’ve named our plugin, the next step is to create the configuration options.

options = $.extend({
	overlap : 20,
	speed : 500,
	reset : 1500,
	color : '#0b2b61',
	easing : 'easeOutExpo'
}, options);

Above, we’re taking the options variable, setting some default properties and values, and then extending it with whatever (if anything) the user passes in when they call the plugin. That way, the options they pass will override our default settings. For example, if, when I call this plugin, I pass:

$('#nav').spasticNav({
   speed : 2000,
   easing : 'easeOutElastic'
});

Those two properties will override the default settings, while the remainder of the options will remain the same.

Step 4 Implementing the Functionality

Now, we’re ready to cycle through each element that was passed to this plugin, and implement the lava-lamp functionality. Remember, we can’t assume that the user is going to pass a single element to this plugin. They could, if they wanted, reference a class, which refers to multiple items that should receive this functionality. As such, we’ll call this.each to iterate over each item in the wrapped set.

return this.each(function() {

});

Within this function, we’ll create some variables. Not all of them will immediately have values, but since the JavaScript engine will hoist all variable names to the top of the function anyways (behind the scenes), it’s generally a best practice to declare them at the top, and then initialize them later.

var nav = $(this),
	currentPageItem = $('#selected', nav),
	blob,
	reset;

nav : “Caches” this, wrapped in the jQuery object.
currentPageItem : Contains the list item with an id of selected. We pass a second parameter to set the context to search from. That way, we don’t have to traverse the entire dom to find this element.
blob : For lack of a better word, this variable will reference the highlighter, that will follow our mouse when we hover over the menu.
reset : This will store a reference to the setTimeout function that will create later. It’s needed in order to call clearTimeout. More on this soon…

Now that we’ve declared/initialized our variables, let’s create the actual blob, so to speak.

$('').css({
	width : currentPageItem.outerWidth(),
	height : currentPageItem.outerHeight() + options.overlap,
	left : currentPageItem.position().left,
	top : currentPageItem.position().top - options.overlap / 2,
	backgroundColor : options.color
}).appendTo(this);

The reason why we’re calling the CSS method, rather than simply adding a class, is because these values will vary depending on the current page’s list item. As such, we must use JavaScript to retrieve they values.

width: Get the width of currentPageItem, including any borders and padding.
height: Get the height of currentPageItem, including any borders and padding. Also, add the amount of overlap, to make the blob extend outside of the menu.
left: Sets the left property of the blob equal to the left position of the currentPageItem. (We must set a positioning context in our CSS for this value to take effect.)
top: Sets the top value as well, and vertically centers the blob.
backgroundColor: Sets the background color.

Finally, we append this new list item to this, or #nav.

Next, we need to store a reference to #blob. That way, we don’t have to search the DOM everytime we wish to access it. We declared the blob variable at the top of the function. Now, let’s initialize it.

blob = $('#blob', nav);

Step 5 The Hover Event

We must now “listen” for when the user hovers over one of the list items (excluding the blob of course) in our navigation menu. When they do, we’ll set the width and left properties of the blob equal to that of the currently hovered list item.

$('li:not(#blob)', nav).hover(function() {
	// mouse over
	clearTimeout(reset);
	blob.animate(
		{
			left : $(this).position().left,
			width : $(this).width()
		},
		{
			duration : options.speed,
			easing : options.easing,
			queue : false
		}
	);
}, function() {
	// mouse out
	reset = setTimeout(function() {
		blob.animate({
			width : currentPageItem.outerWidth(),
			left : currentPageItem.position().left
		}, options.speed)
	}, options.reset);

});

To summarize the script above…

Get all list items – not the #blob – within the navigation menu, and when they’re hovered over, run a function.
Animate the blob, and set its left and width values equal to that of the hovered list item.
Pass an object literal as the second parameter of animate, and set the duration and easing equal to what we set in our configuration options. Set queue to false to prevent animation build-up.
When they mouse out, call setTimeOut, which will push the blob back to the current page item. If we didn’t do this, and the user didn’t click on a navigation link, the menu would show that they were on
a different page entirely. This will, after a second or so, animate the blob back to currentPageItem.

And that’s all there is to it! This is a super simple plugin. The next step is to style our navigation menu.

Step 6 Styling the Menu

Without any styling, our menu should look similar to this:

Let’s first style the “nav” ul. Open your style.css file, and add:

#nav {
	position: relative;
	background: #292929;
	float: left;
}

Next, we’ll style each list item.

#nav li {
	float: left;
	list-style: none;
	border-right: 1px solid #4a4a4a;
	border-left: 1px solid black;
}

This simply floats each list item to the left, and adds a border to each side.

Moving along, we next must style the anchor tags within our navigation menu.

#nav li a {
	color: #e3e3e3;
	position: relative;
	z-index: 2;
	float: left;
	font-size: 30px;
	font-family: helvetica, arial, sans-serif;
	text-decoration: none;
	padding: 30px 45px;
}

We’re setting a color, floating them to the left, setting some font values, and a healthy amount of padding. Take note of the z-index property. This is a necessity, and will be explained shortly. However, remember that, in order to adjust the z-index, we must set a positioning context, which we’ve done.

Because we’re not implementing a full reset stylesheet, let’s ensure that we zero out any default margins and padding on our ul and li, just to save any potential headaches.

ul, li {
	margin: 0; padding: 0;
}

The last step is to style the blob itself!

#blob {
	border-right: 1px solid #0059ec;
	border-left: 1px solid #0059ec;
	position: absolute;
	top: 0;
	z-index : 1;
	background: #0b2b61;
	background: -moz-linear-gradient(top, #0b2b61, #1153c0);
	background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 2px 3px 10px #011331;
	-webkit-box-shadow: 2px 3px 10px #011331;
}

Once again, we set some pretty colors for our borders, and add some background colors (including CSS3 gradients/borders/shadows for Firefox and Safari/Chrome). Once again, we see that z-index property. Without this, the blob will display above all of the text in the navigation menu. To counter this, we must be sure that its z-index property is LOWER than the list item’s! We also must set the position to absolute in order to adjust its top and left values with our plugin.

Conclusion

That’s all there is to it! With minimal effort, we’ve created a really neat looking navigation menu from scratch. Let me know if you have any questions! Thanks for reading and watching.

Quick Tip: HTML5 Video with a Fallback to Flash

Jeffrey Way — Fri, 12 Mar 2010 18:52:27 +0000

In this video quick tip, we’ll review how to work with HTML 5 video in your own projects. Because older browsers and Internet Explorer do not understand the element, we must also find a way to serve a Flash file to viewers who are utilizing those browsers.

Viewing Options

Screenr (Mp4)

Unfortunately, much like HTML 5 audio, Firefox and Safari/Chrome don’t quite agree when it comes to the file format for videos. As such, if you wish to take advantage of HTML 5 video at this time, you’ll need to create three versions of your video.

.OGG: This will make Firefox happy. You can use VLC (File -> Streaming/Export Wizard) to convert your video to this format easily.
.MP4: Many screencasting tools automatically export to Mp4; so you can use that file for Safari and Chrome.
.FLV/.SWF: Not all browsers support HTML 5 video, of course. To compensate, make sure that you add a fallback Flash version as well.





	
	untitled

There are a handful of attributes available to the element.

Controls: Display the play/stop buttons?
Poster: The value can be a path to an image, that will serve as the display of the video before it is played.
AutoPlay: Immediately play the video when the page is loaded?
Width: The desired width of the video. By default, the browser will automatically detect the dimensions of the supplied video.
Height: The desired height of the video.
Src: The path to the video file. It’s better to use the child element instead for this task.

Dos and Don’ts of HTML 5 Video

DO create three version of your video to make Firefox, Safari/Chrome, and IE happy. (.ogg, .mp4, .flv/.swf)
DO NOT omit one of these formats. Unfortunately, you can’t easily choose to serve HTML 5 video to Firefox, and the Flash fallback to Safari. Safari understands the element, and will expect to find a suitable video format to load. If one is not found, it will display an empty player.
DO keep in mind that full-screen support will not work in Safari and Chrome. However, with the release of Firefox 3.6, you can right-click, and view in full screen.
DO remember that the reason why IE loads the Flash file instead is because it does not understand what the element is. However, if a browser DOES understand that element, it will expect to find a suitable file to load.

Please note that, if I can find a suitable work-around for the full-screen problem, we’ll be using this method on Nettuts+ in the near future!

CodeIgniter from Scratch: File Operations

Burak Guzel — Thu, 11 Mar 2010 22:47:52 +0000

In today’s episode, we are going to be working with several helper functions, related to files, directories, and downloads. We are going to learn how to read, write, download files, and retrieve information about both files and directories. Also at the end we will build a small file browser that utilizes jQuery as well.

Catch Up

Day 11: File Operations

Get the Flash Player to see this player.

New Premium Series: Tumblr Theme Design – Start to Finish

Jeffrey Way — Thu, 11 Mar 2010 07:39:13 +0000

Tumblr’s popularity over the last year has increased exponentially. The reason why is quite simple: Tumblr is flexible, powerful, and, most importantly, a pleasure to work with. Unfortunately, there aren’t many training resources available for the platform yet. In this video series, we’ll go through the process of taking a Tumblr theme, designed in Photoshop, and converting it into a fully working theme – in just a few hours.

To take advantage of this mammoth video series, become a Premium member!

Watch the Intro

Get the Flash Player to see this player.

The Full Series

Chapter 1: Intro
Chapter 2: Slicing the Design
Chapter 3: Creating the Markup and Adding the Tumblr Template Tags
Chapter 4: Adding the CSS
Chapter 5: Configuration Options
Chapter 6: @Font-Face and Custom Fonts
Chapter 7: Slide-out Panel – HTML and CSS
Chapter 8: Slide-out Panel – jQuery

Final Design

View the live demo.

Thanks to Kate Payton for submitting the design for this tutorial.

Join Net Premium

For those unfamiliar, the family of TUTS sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. If you’re curious about the other Premium tutorials that we have available, check here. Join today!

Inspiration: Awesome Book-Related Website Designs

Cameron Chapman — Thu, 11 Mar 2010 05:20:43 +0000

If you’re a book lover, you may have noticed that the vast majority of book-related websites out there leave a bit to be desired when it comes to design and information architecture. In fact, some author and publisher websites make me feel like my eyes might bleed!

But there are some gems out there, and we’ve collected some of the best. If you know of any other fantastic book-related websites, whether they’re for authors, individual books, publishing companies, or blogs, let us know in the comments.

Authors & Individual Book Sites

Author websites are some of the more challenging sites to design. If an author has a large backlist, it can be difficult to figure out how to showcase all of their work effectively. And if the author has only published one or two books, it can be hard to have an effective site that doesn’t feel empty.

And in reality, there are a lot of things an author’s site needs to accomplish. It needs to provide readers and potential readers with information about the books and why they might be interested in reading them. It needs to give booksellers information about the books, and why they should stock them. And it needs to act as a constant promotional tool that will help the author sell more books and gain more fans.

Dear Author has a great post on what many author websites are lacking. The list includes things like a printable book list, a link on the home page to contact the author, and a highly visible “coming soon” section. Check out the full list for more points to keep in mind if you’re designing an author’s website.

Here are a few great author and book websites you should be sure to check out for inspiration and ideas.

No One Belongs Here More Than You

This is one of the most creative books websites I’ve ever seen. While it’s not the most user-friendly of sites, it suits its purpose and does well to hold reader interest.

Justine Larbalestier

An excellent, clean-looking design that still has plenty of character. Her books are prominently displayed on the home page, along with links to her blog, about information, and other important parts. She also includes information about events, interviews, and specific book info on the home page, a big plus for readers and book sellers.

Stephen King

Stephen King’s presents its own challenges to a designer, mainly the sheer volume of information it needs to contain. King has written well over sixty books, has had a number of his books adapted for the screen, and has written numerous short stories. But his site manages to include all the pertinent information a visitor might be looking for while also showcasing his best and most recent works, all while maintaining a very streamlined and professional design.

Cherry Adair

Cherry Adair’s website fits well with the types of books she writes. The only downside to the site is that it’s entirely Flash-based, though the interface itself is slick and very responsive. She includes all of the information one would expect on an author site, including a printable, PDF booklist.

Jim Collins

Jim Collins’ site takes a much more minimalist design approach than many of the others on this list. The color scheme is limited and sophisticated, there’s plenty of white space, and only necessary content is included.

Jean Chatzky

Jean Chatzky’s website is well-suited to the types of books she writes and the brand she’s built for herself (you may recognize her from her regular appearances on the Today Show). It’s professional but unintimidating and has a friendly feel to it. It also provides all the necessary information you’d expect and is easy to navigate.

Hank Phillippi Ryan

Hank Phillippi Ryan’s website is bright and colorful, which matches the covers and style of her books. The layout is reminiscent of a grid layout and makes good use of negative space.

Caroline Tiger

Caroline Tiger’s site has some of the best use of color of any author site I’ve seen. Navigation is simple and straightforward, the emphasis is placed squarely on her books, and the overall impression is professional but relaxed.

Nicholas Sparks

Nicholas Sparks’ website makes great use of large background images and transparency. It’s easy to find the information you might be looking for, with prominent links to his books and movies, as well as appearances and biography information.

Publishers

Publisher websites have to be many things to many people; not always an easy task to do well. They have to showcase their books to potential readers. They have to appeal to booksellers and convince them to stock more of their books. They have to give information to prospective authors, either in the form of submission guidelines or guidelines that tell them they don’t accept unagented submissions. They have to provide information to the media and book reviewers. And sometimes, in the case of the larger publishing conglomerates, they also have to present a united front across multipe imprints.

The best publisher sites showcase recent books as well as best sellers. They make it easy for readers and booksellers to make decisions regarding book purchases. And they provide all the necessary information about the company, the books, and the authors for anyone looking.

Here are some of the best book publisher websites out there. They run the gamut from small publishers with only a handful of books to large publishing houses that publish hundreds of titles each year. What they all have in common is good information architecture, a clean style, and excellent user experience.

Dragon International Independent Arts

The DIIArts site packs a lot of information into a small space while maintaining an uncluttered and clean-looking layout. Their main nav includes nine tabs while still leaving some breathing room. The use of icons throughout the site helps to unify everything, as does the light color scheme.

Arcadia Publishing

Arcadia Publishing’s site fits its business perfectly. It has a vintage feel to it, which fits them since they’re publishers of historical nonfiction. The site is easy to navigate and effectively showcases important information (like the fact that they offer free shipping).

Melville House Publishing

The Melville House Publishing website has a simple blue and white theme throughout. It has a minimalist, grid-based layout nad a lot of white space. Information is easy to find and their books are displayed prominently.

Princeton Architectural Press

Princeton Architectural Press’s website is great because it’s design is a bit unexpected. The bright yellow background and grid-based layout are visually striking, which is entirely appropriate for a publishign company that focuses so heavily on design, but also a bit unexpected for a site in such a conservative industry.

Penguin Group USA

Among all of the big-name publishers out there, Penguin has one of the most attractive websites. Their layout is well-ordered, the color palette is refined, and they place emphasis where appropriate. There’s a ton of information on the site, and yet it feels uncluttered.

Timber Press

The Timber Press website makes great use of color and has a fantastic layout. The design is eye-catching and easy to navigate, with a well-implemented slideshow showcasing some of their books on the home page.

Llewellyn

Llewellyn’s website uses a muted color palette and three column layout that creates a sophisticated and professional feel to their site. They make it easy to browse their books, as well as to find other information about the company and their authors.

Storey Publishing

Storey Publishing is another company that opted for a muted color palette and simple layout. The green accents on the site fit well with the country-living and outdoor-themed books they publish, as do the graphics throughout the site.

Gibbs Smith

Gibbs Smith makes great use of Flash to showcase books on their home page, but otherwise keeps their layout fairly simple. They emphasize their best-sellers but make it easy to browse their entire catalog or find information about their authors. The red, burgundy and gray color scheme is sophisticated and feels very neutral.

Other Sites

Publisher and author websites aren’t the only sites out there that target book lovers. There are communities for readers (and writers), blogs and book review sites, and service sites for readers and writers alike.

The sites below target many different demographics, but each focuses on great user experience and simple architecture. Each has its own distinct style that adds to the user’s overall impression of the site and the company or people behind it. And each one has a clear purpose and mission that they accomplish well.

IndieBound

IndieBound is a community for independent bookstores and their customers. Their site is well-laid-out, has a great color scheme, and a unique design. They have a lot of information on the site, but it remains easy to navigate and find the information you need. They even manage to make the wide variety of graphics used on the site appear cohesive.

The Fiction Project

The Fiction Project at Art House Co-Op has a really awesome site design. The overall look represents the artistic sensibility of the project, but all information about the project is easily found and legible.

Lulu

Self-publishing company Lulu has a well-designed website that focuses on user experience. They keep graphics simple and use them specifically to highlight their services. The color scheme is consistent (white, blue and orange), and there’s plenty of negative space in the design. What sets Lulu’s site apart from many other self-publishing sites is that they’ve made it just as easy for book buyers to use the site as they have for authors.

Readerville

Readerville uses a simple two-column design with brownish-orange, burgundy, and muted blue accent colors. Readability is given the utmost importance in this design, with usability a very close second. While the site is no longer updated, it is still a great example of a book-related site design.

DailyLit

DailyLit, a service that delivers daily reading to your email inbox, has a fantastic website that uses a muted, cool color palette and grid-based layout. The site is easily navigated and showcases their services and the books available.

Blurb

Blurb is another self-publishing service that puts more emphasis on style than many other self-publishing sites. They offer good user experience for both authors and book buyers, and showcase “staff picks” on the home page (something many self-publishing companies don’t bother with).

The Millions

The Millions is a book review and culture site that uses a grid layout and mostly-black and white color scheme with bright orange accents. The layout of the site is fantastic, and the entire thing feels very modern and refreshing.

Guys Read

Guys Read is a literacy site for boys that places a heavy emphasis on typography. The site uses a red-white-and-blue color scheme and plenty of white space. It uses a mostly two-column layout and has a very masculine feel to it without feeling stuffy or staid.

Quick Tip: The Difference Between Live() and Delegate()

Jeffrey Way — Wed, 10 Mar 2010 18:03:18 +0000

In jQuery 1.3, the team introduced the live() method, which allows us to bind event handlers to elements on the page, as well as any that might be created in the future dynamically. Though not perfect, it definitely proved to be helpful. Most notably, live() bubbles all the way up, and attaches the handler to the document. It also ceases to work well when chaining method calls, unfortunately. Delegate() was introduced in version 1.4, which almost does the same thing, but more efficiently.

We’ll examine the specific differences between the two methods in today’s video quick tip. Thanks to the FireQuery Firebug extension, we’ll have the tools to more easily understand how each method functions.

Alternate Viewing Options

Screenr (MP4)


	 Click Me

// Bind attaches an event handler only to the elements
// that match a particular selector. This, expectedly,
// excludes any dynamically generated elements.
$("#items li").click(function() {
	$(this).parent().append("New Element");
});

// Live(), introduced in 1.3, allows for the binding
// of event handlers to all elements that match a
// selector, including those created in the future.
// It does this by attaching the handler to the document.
// Unfortunately, it does not work well with chaining.
// Don't expect to chain live() after calls like
// children().next()...etc.
$("li").live("click", function() {
	$(this).parent().append("New Element");
});	

// Delegate, new to version 1.4, perhaps should have been a complete
// replacement for Live(). However, that obviously
// would have broken a lot of code! Nonetheless,
// delegate remedies many of the short-comings
// found in live(). It attaches the event handler
// directly to the context, rather than the document.
// It also doesn't suffer from the chaining issues
// that live does. There are many performance benefits
// to using this method over live().
$('#items').delegate('li', 'click', function() {
	$(this).parent().append('New Element');
});	

// By passing a DOM element as the context of our selector, we can make
// Live() behave (almost) the same way that delegate()
// does. It attaches the handler to the context, not
// the document - which is the default context.
// The code below is equivalent to the delegate() version
// shown above.
$("li", $("#items")[0]).live("click", function() {
	$(this).parent().append("New Element");
});

Conclusion

This can definitely be a confusing topic. Please feel free to ask questions, or discuss within the comments. Thanks so much to Elijah Manor for clarifying a few things for me on this topic!

Save Time and Money by Systematizing your Photoshop Workflow

Ben Gribbin — Tue, 09 Mar 2010 15:29:35 +0000

Repetitive tasks can quickly become tedious. As a designer, you probably often find yourself designing the same elements over and over from scratch. STOP!

Wasting time is so old-fashioned. It also means you’re wasting money! So, let’s review some ways that you can automate and systematize your Photoshop workflow. And be sure to download the project base for all of your new designs!

File Tree & Re-usable Project Base

The first step in systematizing your workflow is to organize your files. Identify all common elements you use within your designs.

You may come to a list such as the following:

Home Page template
About Page
Contact Page
Services Page
Fonts
Assets

The Project Base

Consider how your final deliverables are used. If they are shipped to a coding business, be as organized and thorough as possible, including notes and fonts where applicable.

You can ensure that you have perfectly organized themes by creating a package that allows you to “fill in the blanks”, so to speak. Simply copy this folder, assign it to the project by renaming it to the project and get working. This is a very simple and efficient way to work, and means that websites you built four years ago can easily be edited, because everything is packed into its very own place.

Download the Project Base

In the zip file, you’ll find a simple re-useable template starting point. This file contains elements such as dividers, buttons and a pre-gridded template to speed up your design workflow.

See how simple starting a new project is now? It may take a couple of minutes to set-up, but the time saved later is more time for you to be doing what you love best – designing!

Now that we have a solid base to build upon, we can starting filling out our ‘boiler-plater’ with specific files and concepts.

Web Template

The sample template will allow you to create a page of your most used elements, ready for quick inclusion in your latest project.

If you’re a web designer in particular, you’ll find that a lot of your projects, even those different in every possible way – use and re-use common elements.

Begin by building a few re-usable templates. Don’t worry about which elements you wish to include just yet, because you can always go back and look at your previous projects and analyze more popular features – then re-create them here.

Personally, I use just one template. I have a home page (this contains elements such as news bulletins, blog post stylings, menus, logos and call to actions). I can modify this template to suit blog pages, buy it now forms and more.

The page also has a 960.gs pre-applied. This has been included for download at the end of the article, in the template boilerplate.

Once you’re set-up with this concept, you can build designs very quickly. However, you should definitely consider developing your own, and tailor it to your clients and team. You could go further by adding icons, search elements and online store related items – anything to suit your client base.

Grouping & Organizing

The above image demonstrates the tangible difference between an organized layer palette, and a messy one!

When you’re in a real creative flow, it can be difficult to stop and start naming and grouping layers. Photoshop doesn’t really help in this area by default either!

So, take the time as you go to name and group layers. This will help you later when coding the design, or if you ship if off for coding elsewhere.

Name each layer, and try to use a descriptive and short word – such as ‘menu’ for the navigation. Group specific areas, such as the header or a contact form.

This has a two-fold benefit.

You can toggle whole areas (or the whole design) on or off in order to work on the background or other elements.
You can move sections of a design without the need for moving each element. This can save hours per project!

So, take the time to stop every five minutes or so, and name and group each element. You’ll be glad you did!

Make good use of the select tool! You can toggle the select mode between layers and groups. This facilitates mass updating and re-aligning designs, so don’t forget it!

Actions

If you don’t use actions in your work-flow, then you should begin using them immediately.

Photoshop actions are entirely configurable lists of actions Photoshop should carry out automatically. You can create your own, or choose from the bounty available online. If you work on Photographs for example, and have 400 pictures to edit and resize, this would take a long time. Instead, you can create an action that adjusts the contrast, alters the size and then saves the file in .jpg format, blasting through 400 files in seconds! You must use actions!

If you do not have the knowledge, or experience to create your own actions, GraphicRiver has a large selection of actions available for purchase from $1!

The actions on sale range from simple photo effects to this action which can add various pre-formatted text sections such as contact details or blog posts in seconds.

Start using Actions and you will notice a significant increase in your productivity and reduce the amount of times you need to repeat monotonous tasks over and over.

Creating and Using an Action

Making your own action is easy. As an example, we’ll create a simple action to re-size several images at once, then save them.

First off, you need to hit the new action button, on the actions palette.

You shouldn’t need to change any settings as standard, bar changing the name for better organization. Photoshop is now recording your actions. So, all you need to do is re-size the image. Go to image size, and alter the dimensions. The action will change any image to these dimensions. Then hit save.

Finally, press stop on the action palette.

Now, when you press play on the action you’ve created, Photoshop will follow the list of defined actions on your image. Although very simple, an action such as this one could save you hours of monotonous resizing photos and images. This is only a very simple look at actions. They can do so much more, so take your time to get to know them and really use them. The beauty of them is in how you can record basically any action in Photoshop – selecting, changing styles, transforming, re-sizing and saving.

iPhone & UI Design

Do you work with user interfaces? If so, you really need to download a GUI element pack for Photoshop.

There are many available for most popular operating systems and mobile platforms.

For example, if you work with the iPhone, you can download the iPhone GUI pack that contains all elements available in the iPhone interface library, and then simply start designing your app. Simple, quick and much easier than attempting to create these from scratch.

Android GUI Kit

http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/

Teehan Lax Kits

The agency, Teehan Lax have several high quality, life-like UI kits. These are great for building an iphone app sales site, or designing the actual UI of an app. Kits are available for the iPhone, Palm Pre and Browsers.

Conclusion

I hope we’ve given you some tips that you can use to improve your productivity and efficiency. Photoshop is a wonderful tool, but, if we’re not careful, we can find ourselves repeating the sames tasks over and over. So be sure to implement the above tips and start saving time, money and your sanity!

Download the Project Base

Do you have any Photoshop time-saving tips? Have any ideas on other tasks that could be automated to save time and repetition? Feel free to share them with the community via the comments.

Quick Tip: My Favorite New IDE: WebStorm

Jeffrey Way — Mon, 08 Mar 2010 17:28:05 +0000

Over the weekend, Elijah Manor tweeted about a new IDE, called WebStorm, that is currently being offered as a public preview, from JetBrains. After spending a few hours with it, I’m extremely impressed! In this video quick tip, I thought I’d show you some of my favorite features that you, frankly, just don’t see much in other code editors.

Alternative Viewing Options

Screenr (MP4)

Notable Features

Not as bloated as other IDEs, like Aptana
Git integration
Fast intellisense
Vertical Selecting (Option + select)
CSS lookup on markup (Shift + Command + I)
Definition lookup (Control J)
Immediately finds formatting errors in your code
Advanced debugging
Plenty of skins
Zen coding implementation! (Such as, ul#nav>li*4>a)
Quickly and easily export inline CSS and JS to external files.

What Do You Think?

So, if you’re curious, take some time to look over WebStorm and let me know what you think! I’m still learning it too, so let me know if you found any cool features that I didn’t mention.

Uncovering jQuery’s Hidden Features

James Padolsey — Mon, 08 Mar 2010 16:15:53 +0000

jQuery is not always as it appears. There's a lot of cool stuff going on under the surface, and there are many methods just waiting to be discovered, and many potential usages of jQuery's API that you may not have considered before. In this article I'll be taking you through a few of the not-so-obvious things I've discovered about jQuery.

1. Understand jQuery!

When you call 'jQuery' what happens?

The jQuery function itself is very simple:

jQuery = function (selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context);
};

Under its skin, the jQuery function (commonly referred to as the "wrapper" function) simply returns an instantiated jQuery object — i.e. an instance of the 'jQuery.fn.init' constructor.

This is useful to know; with this information we know that each time we call 'jQuery' we're actually creating a totally unique object with a set of properties. jQuery is clever in that it gives you an object that can be treated as an array. Each of your elements (all together, commonly known as the "collection") is referenced within the object under a numerical index, just like within an array. And jQuery also gives this object a 'length' property, just as you would expect from an array. This opens up a world of possibilities. For one, it means that we can borrow some functionality from 'Array.prototype'. jQuery's 'slice' method is a good example of this — modified from the source:

/* ... jQuery.fn.extend({ ... */
slice: function() {
    return this.pushStack(
        Array.prototype.slice.apply( this, arguments ),
        "slice",
        Array.prototype.slice.call(arguments).join(",")
    );
},
/* ... */

The native 'slice' method doesn't care that 'this' is not a real array– it'll be fine with anything that's got a 'length' property and [0], [1], [2] etc.

There are some other interesting properties within this jQuery object — '.selector' and '.context' will, most of the time, reflect the arguments that you pass into 'jQuery(…)'.

var jqObject = jQuery('a');
jqObject.selector; // => "a"

One thing that's important to note is that jQuery will sometimes give you new jQuery objects to work with. If you run a method that changes the collection in some way, such as '.parents()', then jQuery won't modify the current object; it'll simply pass you a brand new one:

var originalObject = jQuery('a');
var anotherObject = originalObject.parents();

originalObject === anotherObject; // => false

All methods that appear to mutate the collection in some way return a brand new jQuery object — you can still access the old object though, via '.end()', or more verbosely, via '.prevObject'.

2. Bread-and-butter Element Creation

Central to jQuery's DOM capabilities, is its element creation syntax. 1.4 brought with it an entirely new way to create your elements quickly and succinctly. E.g.

var myDiv = jQuery('', {
    id: 'my-new-element',
    class: 'foo',
    css: {
        color: 'red',
        backgrondColor: '#FFF',
        border: '1px solid #CCC'
    },
    click: function() {
        alert('Clicked!');
    },
    html: jQuery('', {
        href: '#',
        click: function() {
            // do something
            return false;
        }
    })
});

As of 1.4 you can pass a second argument to the jQuery function when you're creating an element — the object you pass will, for the most part, act as if you were passing it to '.attr(…)'. However, jQuery will map some of the properties to its own methods, for example, the 'click' property maps to jQuery's 'click' method (which binds an event handler for the 'click' event) and 'css' maps to jQuery's 'css' method etc.

To check out what properties map to jQuery's methods, open your console and type 'jQuery.attrFn'.

3. Serialize your Inputs

jQuery provides a method that you can use to serialize all of the inputs within one or more forms. This is useful when submitting data via XHR ("Ajax"). It's been in jQuery for a long time but it's not often talked about and so many developers don't realise it's there. Submitting an entire form via Ajax, using jQuery, couldn't be simpler:

var myForm = $('#my-form');
jQuery.post('submit.php', myForm.serialize(), function(){
    alert('Data has been sent!');
});

jQuery also provides the 'serializeArray' method, which is designed to be used with multiple forms, and the 'param' helper function (under the jQuery namespace) which takes a regular object and returns a query string, e.g.

var data = {
    name: 'Joe',
    age: 44,
    profession: 'Web Developer'
};

jQuery.param(data); // => "name=Joe&age=44&profession=Web+Developer"

4. Animate Anything

jQuery's 'animate' method is probably the most flexible of jQuery's methods. It can be used to animate pretty much anything, not just CSS properties, and not just DOM elements. This is how you would normally use 'animate':

jQuery('#box').animate({
    left: 300,
    top: 300
});

When you specify a property to animate (e.g. 'top') jQuery checks to see if you're animating something with a style property ('element.style'), and it checks if the specified property ('top') is defined under 'style' — if it's not then jQuery simply updates 'top' on the element itself. Here's an example:

jQuery('#box').animate({
    top: 123,
    foo: 456
});

'top' is a valid CSS property, so jQuery will update 'element.style.top', but 'foo' is not a valid CSS property, so jQuery will simply update 'element.foo'.

We can use this to our advantage. Let's say, for example, that you want to animate a square on a canvas. First let's define a simple constructor and a 'draw' method that'll be called on every step of the animation:

function Square(cnvs, width, height, color) {

    this.x = 0;
    this.y = 0;
    this.width = width;
    this.height = height;
    this.color = color;

    this.cHeight = cnvs.height;
    this.cWidth = cnvs.width;
    this.cntxt = cnvs.getContext('2d');

}

Square.prototype.draw = function() {

    this.cntxt.clearRect(0, 0, this.cWidth, this.cHeight);
    this.cntxt.fillStyle = this.color;
    this.cntxt.fillRect(this.x, this.y, this.width, this.height);

};

We've created our 'Square' constructor, and one of its methods. Creating a canvas and then animating it couldn't be simpler:

// Create a

This is a very simple effect, but it does clearly demonstrate the possibilities. You can see it in action here: http://jsbin.com/ocida (this will only work in browsers that support the HTML5 canvas)

5. jQuery.ajax Returns the XHR Object

jQuery's Ajax utility functions ('jQuery.ajax', 'jQuery.get', 'jQuery.post') all return an 'XMLHttpRequest' object which you can use to perform subsequent operations on any request. For example:

var curRequest;

jQuery('button.makeRequest').click(function(){
    curRequest = jQuery.get('foo.php', function(response){
        alert('Data: ' + response.responseText);
    });
});

jQuery('button.cancelRequest').click(function(){
    if (curRequest) {
        curRequest.abort(); // abort() is a method of XMLHttpRequest
    }
});

Here we're making a request whenever the 'makeRequest' button is clicked — and we're cancelling the active request if the user clicks the 'cancelRequest' button.

Another potential usage is for synchronous requests:

var myRequest = jQuery.ajax({
    url: 'foo.txt',
    async: false
});

console.log(myRequest.responseText);

Read more about the 'XMLHttpRequest' object and also be sure to check out jQuery's Ajax utilities.

6. Custom Queues

jQuery has a built-in queuing mechanism that's used by all of its animation methods (all of which use 'animate()' really). This queuing can be illustrated easily with a simple animation:

jQuery('a').hover(function(){
    jQuery(this).animate({paddingLeft:'+=15px'});
}, function(){
    jQuery(this).animate({paddingLeft:'-=15px'});
});

Quickly hovering over a bunch of anchors and then hovering over them again will cause the animations to queue up and occur one at a time — I'm sure many of you have witnessed this queuing effect before. If not, check it out here: http://jsbin.com/aqaku

The 'queue' method is similar to the well-known 'each' method in how it's called. You pass a function, which will eventually be called for each of the elements in the collection:

jQuery('a').queue(function(){
    jQuery(this).addClass('all-done').dequeue();
});

Passing just a function to 'queue' will cause that function to be added to the default 'fx' queue, i.e. the queue used by all animations done by jQuery. Therefore, this function will not be called until all current animations occurring on each element in the collection (in this case, all anchors) have completed.

Notice that we're adding a class of 'all-done' in the function above. As outlined, this class will only be added when all current animations are complete. We're also calling the 'dequeue' method. This is very important, as it will allow jQuery to continue with the queue (i.e. it lets jQuery know that you're finished with whatever you're doing). jQuery 1.4 provides another way of continuing the queue; instead of calling 'dequeue', simply call the first argument passed to your function:

jQuery('a').queue(function(nextItemInQueue){
    // Continue queue:
    nextItemInQueue();
});

This does exactly the same, although it's slightly more useful in that it can be called anywhere within your function, even within a mess of closures (that typically destroy the 'this' keyword). Of course, pre-jQuery-1.4 you could just save a reference to 'this', but that would get a bit tiresome.

To add a function to a custom queue, simply pass your custom queue's name as the first argument and the function as the second:

jQuery('a').queue('customQueueName', function(){
    // Do stuff
    jQuery(this).dequeue('customQueueName');
});

Notice that, since we're not using the default 'fx' queue, we also have to pass our queue's name to the 'dequeue' method, in order to allow jQuery to continue with our custom queue.

Read more about 'queue', 'dequeue' and 'jQuery.queue'.

7. Event Namespacing

jQuery provides a way for you to namespace events, which can be very useful when authoring plugins and third-party components. If needed, the user of your plugin can effectively disable your plugin by unbinding all event handlers that it's registered.

To add a namespace when registering an event handler, simply suffix the event name with a period and then your unique namespace (e.g. '.fooPlugin'):

jQuery.fn.foo = function() {

    this.bind('click.fooPlugin', function() {
        // do stuff
    });

    this.bind('mouseover.fooPlugin', function() {
        // do stuff
    });

    return this;
};

// Use the plugin:
jQuery('a').foo();

// Destroy its event handlers:
jQuery('a').unbind('.fooPlugin');

Passing just the namespace to 'unbind' will unbind all event handlers with that namespace.

Conclusion

So which ones did I miss? Any helpful features that you feel jQuery doesn’t document well enough? Let’s discuss in the comments!

How to Create a Simple iTunes-like Slider

Siddharth — Fri, 05 Mar 2010 17:40:37 +0000

When space is at a premium, making use of sliders is the optimal way to present information. Today, we’ll take a look at how to create a slider similar to the one used in the iTunes store.

Developers often seek the functionality provided by sliders in order to fit lots of information in the space provided. But creating such a slider is not as difficult as you might think. With a little planning and some experimenting, you can create one rather quickly.

I believe a demo is worth a thousand words. Hit the demo and try it out yourselves.

Interested? Let’s get started right away!

Design Goals

Before we start coding, here are a few goals for this widget.

Minimize the space taken up by images by making the slideshow’s dimensions the same size of a single image and then fading between them.
Provide a vertical carousel of images on the side showing upcoming images.
Provide a method to manually move the carousel and the slideshow forward. In this instance, we make use of a simple anchor element.
On the carousel, the top most image is the next in line and will be displayed when the next button is clicked.
Minimize DOM manipulation as much as possible. That’s not to say we aren’t going to touch the DOM, it’s just that we aren’t going to meddle with the DOM too much.

Plan of Action

There are actually a handful of techniques to make a widget like this. For our purposes today, I’m going to stick with a technique which adheres to a saying:

When in doubt, use brute force.

Step 1: Setup the CSS for the gallery container so that all the main images collapse into taking the space of a single image. I’ll explain this point later below.

Step 2: Setup the CSS for the thumbnail container so that only three images are visible at once.

Step 3: Cycle through the images and assign a class to each thumbnail and image with a numeric index to identify each independently. For example, each image gets a class of thumb-xx where xx is a number.

Step 4: When the next button is clicked, move the carousel one thumbnail up and then display the thumbnail’s corresponding image.

These are the basic steps involved in creating such an effect. I’ll explain each step in detail as we go along.

Step 1: Core Markup

The HTML markup for the demo page looks like so:



	
		iTunes slider
		
	

	
    	
        	Create a simple iTunes-esque slider with jQuery
		by Siddharth for the lovely folks at Net Tuts
		A simple slider/slideshow which mostly emulates the one on iTunes barring a few changes. Click the down button to cycle the images.

Disregarding the boiler plate code, we have two container elements full of images: one for the main gallery images and one for the thumbnails. I’ve given an ID to both of them so they can be easily accessed from the JavaScript. We also include an anchor element which acts as the next button.

We include the jQuery library and our own script file at the end.

At the end of this stage, our demo page looks like just a list of images.

Step 2: CSS Styling

*{
	margin: 0;
	padding: 0;
	border: 0 none;
	outline: 0;
}

body{
	font-family: "Lucida Grande", "Verdana", sans-serif;
	font-size: 12px;
}

p{
	margin: 20px 0 40px 0;
}

h1{
	font-size: 30px;
	font-family: "Myriad Pro", "Lucida Grande", "Verdana", sans-serif;
	padding: 0;
	margin: 0;
}

h2{
	font-size: 20px;
}

#container{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0 0 0;
	position: relative;
}

img{
	display: block;
}

#gallery, #thumbs{
	float: left;
}

#gallery{
	width: 800px;
	height: 300px;
	overflow: hidden;
}

#gallery img{
	position: absolute;
}

#thumbs{
	width: 100px;
	height: 300px;
	overflow: hidden;
}

#next{
	display: block;
	width: 47px;
	height: 43px;
	background: url(img/arrow.png);
	position: relative;
	top: 257px;
	left: 855px;
}

#next:hover{
	background: url(img/arrowmo.png);
}

.clear{
	clear: both;
}

The CSS is pretty self explanatory but there are a couple of points I want you to take note of:

First up, notice that I’ve applied position: absolute to #gallery img. This makes sure that the images are stacked on top of each other instead of one below the other. This way we can later manipulate their opacity to decide which image to show.

Secondly, notice that the thumbs element has its height set to 300px. This is because the thumbnails in the demo are 100px tall each and I want the carousel to show 3 images at once. Essentially, for your own implementation, multiply the height of a thumbnail by the number of thumbnails you want to show at once to find the required height of the element.

Also, take note of the fact that we’ve set its overflow property to hidden to make sure no more than 3 thumbnails are shown at once.

After we’ve styled our slider, it looks like the image below. Notice that almost everything is in place. The last image is stacked at the top and is thus visible.

Step 3: JavaScript Implementation

Now that we have a solid framework and some basic styling in place, we can begin coding the required functionality. Note that we make extensive use of jQuery. Feel free to link to Google’s CDN if necessary.

Procuring the Elements and Prepping them

We first need to acquire the images and their corresponding thumbnails so that we can process them.

	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
        var index = 0;

The above snippet will take care of obtaining the list of images and thumbnails, and storing them for later use. We also create a variable called index to denote which element to start from. For now, I’m setting it to start from the first element. Note that index is zero based.

	for (i=0; i
Next, we just iterate through both the lists and and add a class of thumb-xx or image-xx to each element where xx is a number. This lets us look for each individual thumbnail or image independently. 
Hooking up the Handler
We now need to create an event handler and attach it to the next button so that we can do something when the button is clicked.
$("#next").click(sift);

The one liner above will take care of that. Essentially, we ask it to call the sift function everytime next is clicked.
function sift()
	{
		if (index<(thumbs.length-1)) {index+=1 ; }
		else {index=0}
		show (index);
	}

This is a very simple event handler actually. We just check to see what element is currently selected. If it is the last, we reset the index so the carousel goes back to the first element, thus creating a pseudo infinite carousel. Otherwise, we increment index by 1.
Next, we call the function show, passing in the index variable as a parameter. We’ll create the function in a bit.
Step 4: Implementing the Core Logic
function show(num)
	{
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = (num+1)*imgHeight;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}

The show function implements the core functionality of this widget. Let me explain each part.
First, we fade out every image the gallery element contains. Next, we fade in just the required image making use of its class. Since each image can be accessed through its class and we have access to the positional index of the image, we just use the following selector: “.image-”+num
Next, we need to scroll the thumbnail element so that the required image is at the top of the carousel. There are two ways to go on about doing this.
The first method makes use of jQuery’s position property. This lets us find the element’s position relative to its parent element. Unfortunately, I’ve been running into quite a few problems with it and Chrome which means we’ll have to use our second method.
The next method is actually just as simple. Since we can easily obtain the height of a thumbnail and since each thumbnail is required to be of the same height, we can easily just find the product of the nth element’s position in the list and the height of a thumbnail to obtain its offset from the top.
var imgHeight = thumbs.attr("height");

The above line lets us obtain a thumbnail’s height. Remember that a collection of elements can be queried just like a normal element.
var scrollPos = (num+1)*imgHeight;

We now calculate the offset of the thumbnail we need. Since we need the thumbnail of the next element in the list and not of that image itself, we increment it by 1 before multiplying it by the height.
With all this info, we can now scroll the element to the height we need.
$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);

We use jQuery’s animate property to alter the scrollTop property to the value we calculated above. If you are new to jQuery’s animation functions, refer to my earlier article. Essentially, we scroll the element x pixels from the top to create a carousel effect. 
Step 5: A Few Tweaks
Polishing the Pseudo Infinite Effect
We are essentially done but a few quick bits of code will make it a little bit more polished.
thumbs.slice(0,3).clone().appendTo("#thumbs");

This line essentially takes the first three thumbnails, copies them over to the end of the list. The slice method selects the first three elements, the clone methods clones these DOM elements and finally the appendTo methods adds them to the passed element.
We can’t just use the appendTo method since it plucks the selected elements from their current position before placing it as required. We need the clone method to copy them first.
We do this to make sure when we approach the final few thumbnails, the illusion of an infinite carousel remains. Else, the user just sees empty blocks which isn’t really what we need.
Making it Auto Rotate
Making the widget auto rotate is actually very simple. Since we have a proper event handler in place, we just have to call the handler every n microseconds. The following line will take care of that:
setInterval(sift, 8000);

In the above code, I’ve asked to call the sift function every eight seconds. Remember, the duration is passed in as microseconds so n thousand equals n seconds.
Initializing the Widget
Currently, the page loads with the widget uninitialized. We’ll need to rectify this. All we need to do is to call the show function passing in the starting position as a parameter.
After you’ve attached the event handler, add this: 
show(index);

The Final Code
And we are done! The final code looks like so:
$(document).ready(function()
{
	var index = 0;
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var imgHeight = thumbs.attr("height");
	thumbs.slice(0,3).clone().appendTo("#thumbs");
	for (i=0; i
Conclusion
And there you have it: we’ve created a simple but useful slider. Hopefully you’ve found this tutorial interesting and useful. Feel free to reuse this code elsewhere in your projects, and chime in within the comments if you are running into difficulties.
Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

Nettuts+

How to Build a Lava-Lamp Style Navigation Menu

Prefer a Screencast?

Step 1 Create the Mark-up

Step 2 Beginning the Plugin

Step 3 Configuration Options

Step 4 Implementing the Functionality

Step 5 The Hover Event

Step 6 Styling the Menu

Conclusion

Quick Tip: HTML5 Video with a Fallback to Flash

Viewing Options

Dos and Don’ts of HTML 5 Video

CodeIgniter from Scratch: File Operations

Catch Up

Day 11: File Operations

New Premium Series: Tumblr Theme Design – Start to Finish

Watch the Intro

The Full Series

Final Design

Join Net Premium

Inspiration: Awesome Book-Related Website Designs

Authors & Individual Book Sites

No One Belongs Here More Than You

Justine Larbalestier

Stephen King

Cherry Adair

Jim Collins

Jean Chatzky

Hank Phillippi Ryan

Caroline Tiger

Nicholas Sparks

Publishers

Dragon International Independent Arts

Arcadia Publishing

Melville House Publishing

Princeton Architectural Press

Penguin Group USA

Timber Press

Llewellyn

Storey Publishing

Gibbs Smith

Other Sites

IndieBound

The Fiction Project

Lulu

Readerville

DailyLit

Blurb

The Millions

Guys Read

Quick Tip: The Difference Between Live() and Delegate()

Alternate Viewing Options

Conclusion

Save Time and Money by Systematizing your Photoshop Workflow

File Tree & Re-usable Project Base

The Project Base

Web Template

Grouping & Organizing

Actions

Creating and Using an Action

iPhone & UI Design

Android GUI Kit

Palm Pre

iPhone

Browser Elements

Conclusion

Download the Project Base

Quick Tip: My Favorite New IDE: WebStorm

Alternative Viewing Options

Notable Features

What Do You Think?

Uncovering jQuery’s Hidden Features

1. Understand jQuery!

2. Bread-and-butter Element Creation

3. Serialize your Inputs

4. Animate Anything

5. jQuery.ajax Returns the XHR Object

6. Custom Queues

7. Event Namespacing