In web design we often focus on using Photoshop to create pixel perfect designs that are meticulously shaped and layered until they’re absolutely pristine. Repeated patterns, tiny strokes, complex gradients and reflections are trademarks of this design style.

But what if you’re going for something more organic? How can we use Photoshop to create complex and random particle arrangements that don’t look cheesy and contrived? The answer of course is to utilize scatter brushes. This awesome tool seems fairly simple on the surface but there’s a ton functionality and limitless possibilities to explore so even if you’re a Photoshop pro, read on to see some great ideas for how to use scatter brushes in your work.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Every Brush Is a Scatter Brush

Photoshop gives you a remarkable amount of control over every single brush that you use, whether you built it yourself or downloaded it from the web. This means that any brush that is currently in your Photoshop brush palette is potentially a scatter brush. Which is great news, because this equates to scatter brushes being super easy to implement.

To start off, simply open up your brush palette and select a brush. As I just mentioned, any brush will do, but I’m going to pick a star because its complex shape really helps show off the varying level of effects that you can achieve.

Spacing

Built into the brush you just selected are various attributes which are unique to just that brush. One of the most important attributes to our discussion today is the spacing. A default round brush is really just a circle shape that has the spacing set to 0. This creates a solid line when you click and drag. Some other brushes however, have a slightly higher spacing setting. Here’s what my star brush looks like when I click and drag with it:

As you can see, instead of dragging a solid line, it looks more like a series of closely spaced stamps that follow my drawing line.

So how do we control this behavior? If we go to our Brush palette (Window>Brush), we find a ton of settings for controlling pretty, much every aspect of the brush. To start, make sure you have the “Brush Tip Shape” category selected on the left. At the bottom of this palette you’ll find the spacing options for the brush.

Cranking the spacing up decreases the frequency with which the star is stamped in our line. If we repeat our click and drag maneuver, we get something like this:

We’re moving in the right direction, but we still haven’t really created a nice scatter brush yet that’s capable of creating some nice particle effects.

Making It Scatter

Adjusting the spacing on a brush is nice, but in order to effect a scatter we need major vertical and horizontal shifts between each stamp. To do this, go into the “Scattering” section on the left side of the Brush palette.

Here you can crank up the Scatter slider to really create a nice and random distribution. Adjust the Count slider to play with the frequency of the stamps. Now our brush is really starting to look like a scatter brush!

Jitter Bug

Throughout the Brush palette you’ll see various “Jitter” sliders. You might be asking yourself, “what the heck is jitter?”, which is a perfectly legitimate question. The word itself refers to deviations from a standard, so when you apply that to a brush setting it means that you’re introducing more variation into the result within a given range.

Size Jitter

Let’s take a look at a good jitter example. In our next step we want to start varying the size of our stars. Repeating the same basic shape is boring and jitter sliders allow us to make the scatter much more organic.

Under the “Shape Dynamics” category, you’ll find a Size Jitter Slider. Crank this to the max:

With that, click and drag your brush and the stars should come out in all different locations and all different sizes. Fancy!

Angle Jitter

Notice that, even though the sizes are different now, the stars all still look a little too similar. One reason for this is that they all share the same exact orientation. To fix this, jump down to the angle jitter:

Now any semblance of uniformity is really starting to disappear. Our stars are all over the place with different locations, sizes and rotations.

Opacity, Color and Roundness Jitter

Under the “Transfer” section, you’ll find the Opacity Jitter, which helps you fade the stars in and out:

And under the “Color Dynamics” section, you’ll find the option to jitter between the foreground and background, and adjust the hue and saturation:

If we want to really go nuts, we can go back into the “Shape Dynamics” category and turn up the Roundness Jitter. This will make our stars look like they’re tilted in 3D space. The result is seems really layered and impressive for something that only tooks a single swipe.

Fun With Scatter Brushes

Armed with the knowledge above, you can create some really amazing things with scatter brushes. The possibilities are limited only by your imagination. Here are a few examples.

Bokeh Textures

Bokeh textures are really popular in design right now. These utilize the blurry spots that result when lights are photographed out of focus (bokeh itself really refers to aesthetic quality of the blur, but that’s a different discussion entirely).

Creating these with scatter brushes is super easy. Just grab a nice hard round brush and set some of the parameters we just learned about. Here I kept the size constant but increased the scatter, spacing and opacity jitter.

The result looks photographic but the dots were created entirely in Photoshop. The cool lighting effects are the wonder of Color Dodge in action. Let’s see how this works in a new example.

Disintegration Effect

To utilize this effect, create two layers, make the one on top black and the one on bottom “almost black” (really really dark gray).

One the black layer, grab a soft white brush and paint with a size a roundness jittered scatter brush. The result should look pretty weird at this point, like this:

Now, if we take the top layer with all the scatter brush work and set it to Color Dodge, we get a nice glowing effect.

Now throw in some text, mask out the bottom and apply some more bright spots with tighter scattering around where the letters disappear and you’ve got the title image for this post:

Custom Shapes

Also be sure to experiment with various shapes, especially those that occur in nature and therefore tend to be scattered organically when we see them. Here I had some fun with a leafy arrangement:

Conclusion

To sum up, scatter brushes are a quick and easy way to make your designs more organic, interesting and complex. Absolutely any brush can quickly be turned into a scatter brush and you have lots of simple controls to vary the effect however you like.

Leave a comment and let us know if you learned anything. Do you ever use scatter brushes in your work? Leave a link to an example if you have one.

In the ever expanding world of online website builders, it’s pretty difficult to find anything that’s worth spending more than ten minutes with. This market is flooded with clunky interfaces, hideous templates and brutal freeform design restrictions.

I recently came across a product called IM Creator that stands out though both in style and functionality. Does it live up to its promises or join the rest of the sites in this market and fall short of a decent DIY website solution? Read on to find out.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Plight of the Web-Based WYSIWYG

WYSIWYG website builders are still regarded by many professional coders and designers as a bit of an abomination, web-based WYSIWYGs double so. Most of them impose strict constraints on your design freedom and/or spit out some pretty abominable code. Some even go so far as to dish out a… wait for it, Flash site! I’m definitely in the “code it yourself” camp but I still always play with these things when I see a new one just to keep an eye on how this market is evolving.

The thing that holds my interest in this area is that, despite rejection by we snobby coders, the market refuses to die. In fact, it seems to be not only growing, but quickly improving. Each new fancy do-it-yourself website builder that I come across is a little bit better than the last. Incremental improvement is nothing to scoff at, in the long-term it could lead to products that even serious professionals have to appreciate.

Will that day ever come? Many say it won’t. The popular argument says that WYSIWYGs will never be a tool for serious web design professionals, only amateurs wishing they were in the big leagues or entrepreneurs who can’t afford to hire a designer.

I’d wager that if I went back to the 1980s, I’d find tons of designers that would tell me the same of computers in general. Sure, they hold potential but no serious designer would ever use one. To do so would be to abandon the true art of design and the freedom of building by hand. Sound familiar?

I’m not making the argument that every web designer should run out and start using Homestead, I’m merely saying that there’s no point in forever discarding the idea that this niche of products could one day make a big splash in the professional world even beyond what we saw from Dreamweaver years ago.

With that in mind, I’ll keep trying these things. I might shake my head and wonder how some of them are so far off base, but I’m confident that one day I’ll perform that same gesture in wonder of just how far these products have come.

Meet IM Creator

The latest online website builder that I’ve come across is IM Creator. The sales pitch is a lot like that its brethren: build your own beautiful website without typing a single line of code, free! We all know these free claims are pretty bogus because in the long run, you’ll have to fork out for the hosting if you actually want to use the site. But it’s at least truly free to sign up and start building sites.

IM Creator actually delays sign up until you want to save something so you can jump right into the site builder.

The interface here is completely bare, in a good way. It looks simple and approachable. There’s a ton that you can do but it’s cleverly structured to be easy enough that practically anyone can use it.

Building a Web Page

I chose to build my own site from scratch so IM Creator started me with what is essentially a blank page with a simple navigation menu at the top.

To add something to the page, you click the “Add an Element” button at the top, which expands a fairly large strip of buttons with options for adding a picture, title, paragraph, video, gallery, slideshow, etc.

To start, I choose to drop in an image. Right away, an attractive photograph of a bird shows up in my canvas, ready to be resized and dragged into place.

Clicking on the little link button above the image brings up a dialog that allows you to easily set up an internal or outgoing link so that when you click the picture, it takes you to a specified destination. Elsewhere you can add a title, alt text, etc.

With the picture selected, I click on the “Advanced” options at the top right of the screen and select the “Borders and Background” option. After a look at my options, I decide to see if I can turn this photo into a circle by cranking the border-radius (which is how I would do it in CSS).

Unfortunately, this does a whole lot of nothing. It seems to work on boxes, but not on images. Also, the border radius controls max out at 99px, which makes it almost useless for my circle hack.

No matter, I can make a circle picture on my own. So my next step is to replace the bird placeholder image with an image from my hard drive. To do this, you click on the image and then hit the big blue “Replace Pic” button.

The app quickly imports my photo and I nudge it into place. I’m quickly starting to get a feel for the workflow here and it’s not too bad. The app is quite responsive and feels much smoother than I expected. I also like that I’m not forced into a template as with apps like iWeb, I can build whatever I want.

Adding Some Text

Next I go back to the “Add an Element” button and this time I choose a paragraph. Once again, the placeholder content is pretty awesome. The paragraph appears with a header, both of which are already fairly nicely styled.

However, I notice immediately that I hate the squished line-height so I hit “Edit Paragraph” to see if I can fix it. From here I have basic options like setting the font family (a decent selection of popular free fonts like Chunk Five and Aller), size, color, etc. as well as some advanced options. Here I find the line-height control that I’m after.

Cranking the line-height up to 1.5em helps immensely. Already our page is starting to look pretty good!

Fixing the Menu

Next on the agenda is fixing that ugly navigation menu. I decided to go with something much more minimal: just plain text with simple hover effects.

I had no idea how to accomplish this, but clicking on the Menu Settings button popped up a set of controls that made it super easy. I was able to ditch the background color, set the text and text hover color, space out the items to my liking and even adjust the letter spacing.

After a little more menu tweaking, I toss in a logo and this thing is really starting to look like a decent web page!

Finishing Up

Following the same process, I fill out the rest of the design. There are a number of really useful tools to play with here. For instance, I was able to insert a live Google map and my Twitter feed in mere seconds. Here’s what the finished result looks like:

Being able to actually build what’s in my head on a free online website builder is actually a pretty impressive feat. I would’ve definitely liked to have more control over CSS properties, especially those for layout, but on the whole the building experience was a pleasant one.

It Looks Good, But What’s Behind the Curtain?

If you want to see the actual page that resulted from my tests, you can check it out here. On the surface, it looks all right, but any web designer will have some serious problems with it. Just to be sure I hadn’t done anything wrong, I compared my result with one of the featured sites. They both suffered from the same problems.

For starters, the code is a mess. The HTML is completely bloated with content that seems more related to the app and its functions than the page you’re looking at in the browser. Further, the basic functionality is pretty rough. For instance, you can’t select any of the text on the page. As far as I can tell, the fonts are served up with FontSquirrel and @font-face so there’s no reason they shouldn’t be fully selectable.

Under the hood code and functionality is a critical place where just about all WYSIWYGs fall short in one way or another. It’s definitely an area that needs to be addressed before these tools and their resulting products can ever truly be respected as “real” websites.

Gorgeous Templates

IM Creator might fall far short of greatness in what’s under the hood but I have to say, from a purely visual standpoint, it really excels. The built-in templates are some of the best I’ve seen from a service like this:

It’s really nice to see someone offering truly modern-looking web design templates in a WYSIWYG service, the norm in this industry tends to be pages that look straight out of 1999.

The Whole Package

As I mentioned earlier, the “free” element is really just for the design element. You’ll have to fork out the dough for hosting and a custom domain. The current price is $7.95/month (just short of $100 per year) but it looks like it’ll go up to $12.95 in the near future.

It’s not the cheapest service in the world but if you’re on a tight budget, paying $100 to get an attractive website hosted at the domain of your choosing for a year is actually a pretty decent deal. If you hired me with the same goal in mind, you’d certainly pay a lot more (though you’d get a much better product).

Conclusion: What’s the Verdict?

Obviously, it goes without saying, this isn’t a product for professional web designers, and it’s not meant to be. We have better, more professional tools available to us and these sorts of services don’t offer the power or flexibility that we need.

However, if you’re a photographer, restaurant or other small business, the IM Creator package is pretty enticing. It’s decently priced and actually impresses me with its ability to build something completely from scratch with a fair amount of freedom. And for the folks out there not gifted in designing from scratch, the provided templates blow away any competitor that I’ve seen.

Online DIY site builders still have a long way to come, but products like IM Creator hint at a future where these types of tools produce truly impressive websites that both appeal to the masses and hold up under a professional’s scrutiny.

Today’s article points out a harsh but true reality: just because you know how to use Photoshop for design work doesn’t mean you know how to edit photos. Fortunately, we’ve got you covered.

Follow along as we show you five simple and lightning fast steps you can take to transform your plain, boring portraits to stunning images that look straight out of a professional photographer’s portfolio. Along the way you’ll learn several important tips such as how to properly sharpen an image and how to draw the viewer’s attention to where you want it to go.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

A Different Kind of Workflow

Web designers generally know their way around Photoshop pretty well. Odds are you’ve been using it for years and could write a few tutorials on it yourself.

After years of being a designer, I found myself in this very position. From a design perspective, I was a Photoshop whiz who knew the application inside and out. However, when I began to pursue photography on a professional level, I realized that the skill set required for this task was a fundamentally different one.

A Tale of Two Photoshops

There are a million different reasons to use Photoshop, but two prominent uses come to mind. The first is how the crowd reading this blog generally uses it. We lay out websites, build typographic art, and create fancy looking UI elements from scratch. In short, we see Photoshop as a blank canvas on which we can create something.

On the other side, the very name of the application, “Photoshop,” indicates what could be argued as its original primary use: photo-editing. It’s rare that you’ll find a professional photographer these days who is satisfied with what comes out of the camera, they almost all take their images right into Photoshop, Lightroom (alternatively Aperture) or some combination of the two.

Let’s step away from our typical discussion of how to use Photoshop as a designer and take a brief look at a dead simple photography workflow that will help you improve the photographs that you incorporate into your work.

Step 1: Raw Exposure Adjustments

The first step we’re going to take is to open up your raw image, straight out of the camera, in Photoshop. When working with a photo shoot with thousands of photos, I perform this step in Lightroom. However, with a single image, it’s fine to just go right into Photoshop as it gives you a very similar set of raw editing tools.

If you’re using images provided by someone else, you may not have the luxury of working with raw files. However, if you’re using images that you shoot yourself, make sure that you shoot in raw.

There’s only one downside to shooting in raw: file size. Raw files tend to be huge compared to their JPG equivalents. However, from an editing standpoint, raw files give you so much more freedom to manipulate and improve the image. If you’re skeptical, try shooting the same photo in RAW and in JPG, then adjust the white balance for each and you’ll immediately see the benefits of raw.

The Raw Dialog

When you drag a raw image to Photoshop, you’ll see a special dialog specifically for working with raw images. This contains a strip of tools along the top, a set of sliders along the right and shows a live, automatically updating preview of the image in the center.

Adjusting Exposure

The first thing we want to do in this dialog is fix our exposure. As you can see, I took this shot a little on the dark side so we’ll need to brighten it up a bit. Here are the Adjustments that I made:

As you can see, the main thing that I did was increase the brightness (not the exposure). I also added a tiny bit of fill light and upped the recovery to help reign in the highlights on the subject’s white shirt.

The result is a much brighter image that looks a lot less like the subject was standing in a shadow.

Step 2: White Balance

The other step that I want to take in this dialog is to adjust the white balance. One of the primary factors that sets a professional’s photo apart from an amateur’s is proper white balance. An image with poor white balance has ugly, unrealistic colors that make the image look either too cool or too warm.

I’d like this image to be just a bit warmer so I take the temperature slider and move it to the right just a pinch. The result may seem subtle, but in the long run it’ll be a really important change.

Adjusting the white balance can be tricky at first, but you’ll get the hang of it quickly after reading a good primer on the topic. I highly recommend checking out Cambridge in Colour’s “Understanding White Balance” article.

Step 3: Sharpen

Another big difference that sets professional photos apart is the sharpness of the image. If you take a close look at what you’re getting straight out of your camera compared to something from a magazine, odds are your images will look downright fuzzy by comparison.

There is a simple default sharpen command in Photoshop, but few professionals ever even touch it. You’ll find that you get much better results from more advanced techniques, the crowd favorite of which tends to be Unsharp Mask.

The Unsharp Mask command actually uses a blurred copy of the original image to reduce the dynamic range and effectively sharpen the points with higher contrast. It’s a fairly complicated scientific process dating all the way back to the 1930s, you can read more about it here.

All you really need to know is that you can use this command to achieve nice and sharp images. I have an action set up that runs the Unsharp Mask filter twice with the following settings:

First Time:
Amount: 150%. Radius: 1.5 pixels. Threshold 6.

Second Time:
Amount: 25%. Radius: 30 pixels. Threshold 0.

Throw these settings (these are set up for large images) into your own action and you’ll be stunned by how much crisper your images will look with just the click of a button.

Here’s an even closer look that really showcases the effect and how much it improved the sharpness of the image.

Step 4: Draw the Focus to the Face

This step is an interesting step that you might never think to do on your own, but believe me, it makes a huge difference. The idea here is that faces are generally the most interesting part of an image. The viewer’s eyes are naturally drawn to faces but you can help boost this natural tendency by playing with the highlights and shadows of the image.

The steps we’ll be taking essentially to better highlight the face work perfectly as a sort of artificial flash; it will illuminate your subject and darken the background.

To begin, create two separate Curves Adjustment Layers: one that darkens the image and one that brightens it. Make the basic shape of your curves something close to what you see below.

Next, apply a mask to each of the layers and fill the masks with black to hide them completely. Then grab a large soft brush and use it to paint in white on the masks. Use a brush at around 10% to lighten the face and then up the opacity to around 20-30% to darken the background. Here are the two masks that resulted from my efforts:

And here are the resulting before and after images. The difference seems super subtle when you compare them side by side but it’s actually a fairly significant change. Click here to see an animated GIF that swaps between the before and after image. Notice how the effect draws your eyes in towards the center of the image.

Step 5: Finishing Touches

To finish off your image nicely, I recommend two more adjustments. First, make one last, very subtle, global Curves adjustment to make sure you like the dynamic range of the image.

Finally, use a Hue/Saturation Adjustment layer to increase the saturation. Now, this is the part where newbies inevitably ruin the photo. The goal here is a slight increase in saturation, just enough to give a nice color boost without making your photo look like something from a Disney cartoon.

I usually up the saturation slider to seven and then reduce the opacity of the layer to anywhere between twenty and fifty percent. Being conservative here will pay off and prevent other photographers from scoffing at your over saturated images.

Here’s a look at the result of my final adjustments using these techniques:

Final Image

With that, we’re all finished. In five super easy steps we were able to take an average looking photo with minor white balance and exposure problems and turn it into a professional portrait!

Here’s a look at the final image next to what we started with. This small image doesn’t do it justice so be sure to click the photo for a larger preview.

Conclusion

Given enough time, there are several other steps that I would take to complete this image. I might brighten up the the area around the eyes a bit, smooth out the skin; the possibilities are endless. However, when I’m under a tight time constraint, these are the five absolutely essential steps in my workflow.

Leave a comment below and let us know about any tips you have for creating stunning portraits. Is your workflow similar to the one above or do you take a drastically different approach. We want to hear all about it!

Photoshop actions are an extremely easy way to automate all of the mundane daily tasks that have made their way into your design workflow. Whether you’re in web or print design, odds are there are a few repetitive tasks that you could let Photoshop handle for you.

Perhaps the biggest hurdle to automating your workflow is simply coming up with ideas for where Photoshop actions could help you out. Today we’ll help you solve that problem by going over 10 ways Photoshop actions can improve your workflow.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Wielding Actions as a Designer

Just about everyone that uses Photoshop knows about actions. They’re a simple and incredibly time effective way to get an amazing amount of work done in very little time.

The thing is, they’re largely underutilized in the design world. Photographers leverage actions heavily in their workflows but I’ve found that many designers barely ever even glance at the Actions palette.

I think one of the biggest hurdles is simply coming up with ideas for how to use actions effectively. As designers, our workflows are so organic that it’s hard to spot tasks that can be automated.

To help you out, I’ve compiled ten ways that I use custom actions in my workflow. Browse through the list and see if you can come up with a few timesavers as well.

How Do Actions Work?

For those new to actions, I’ll give you a quick primer. Basically, an action is a way to let Photoshop handle repetitive tasks for you. Think about all the repetition you go through on a daily basis setting up and saving files and you can probably see the benefit of speeding up these processes.

Creating actions is so simple that even complete Photoshop novices should be able to handle the task with ease. Basically, all you do is go to Window>Actions to open the palette. Then hit the New Action button at the bottom.

From here, the action will automatically start recording, which means Photoshop is officially watching everything you do. If you want this to stop, simply hit the stop button in the palette, then hit the record button to start again. Once you’re recording, simply perform the task that you want Photoshop to remember. Once you’re done, always remember to hit the stop button. I frequently forget this step and end up recording way more than I intend to! After you’re finished, simply hit the play button to perform the action at lightning speed.

Remember that Photoshop actions record every little thing you do. For instance, if you’re recording an action to save a file, it will record where you saved it, which may not be ideal if you want to create a generic saving action. We’ll see how to deal with these issues a little later, for now just remember to keep things as generic and widely applicable as possible for actions that you want to work across projects. Also keep in mind that temporary actions for a single project can be extremely helpful as well so feel free to create something very specific that you then trash as soon as you’re finished with it.

1. New Documents at the Right Size

This one seems insignificant, but you’d be surprised how much time you spend in that “New Document” dialog over the course of a month.

If you’re like me, you frequently work with images that are the same size. This is often true of bloggers who have a set content width for their site, for which they’re repeatedly creating imagery.

I recommend setting up a folder of actions called “NewDocs” and recording an action for each of the file sizes that you typically work with. For instance, Design Shack images are 510px wide, so I created an action that quickly churns out a new blank document with that’s 510px wide by 300px tall.

I have about six of these that are named according to their uses. More than quickly creating documents without dialogs, these actions help me remember all the preset sizes that I work with for different projects. This perhaps saves me the most time as I don’t have to go dig around to try and find out what the proper size is for a given task.

2. Automatic Grid Setup

Web designers who frequently work with grids are forced to set up a complicated array of guides on every project. This saves time in the long run by creating designs that are easy to lay out in CSS, but in the short run it can be a real pain in Photoshop, which is exactly why almost no one does it manually!

Most grid-based frameworks, such as 960.gs actually include an extras folder of some kind containing actions for helping you set up your documents. Be sure to grab and install these to save yourself some time.

If you really want control over how your grid is generated, check out GuideGuide. This isn’t technically an action, but it does automate the task and is in fact even better than an action. GuideGuide is a custom palette (now called panels) that lets you instantly spec out custom grids in any document. It’s free and super awesome so be sure to grab it.

3. Print Guides in a Jiffy

Web designers aren’t the only ones who need guides set up. In addition to designing on a grid, print designers use guides to help them set up trim, bleed and/or live areas on their documents.

My workflow for this is a little wonky, but it works. I wanted an action that would set up the right guides no matter what size my document was, so here’s what I did.

Step 1:
Create new action, start recording

Step 2:
2. Go to View>Guides>New Guide and create a new horizontal guide and a new vertical guide that match your bleed area size. So for an 1/8″ bleed, create guides at the .125″ mark. This takes care of the top left corner (repeat for trim and live area)

Step 3:
Rotate the document 180 degrees.

Step 4:
Repeat step 2 (this takes care of the other side)

Step 5:
Rotate the document 180 degrees and stop recording.

The problem here is a tricky one. If you set up guides on the left side of a document that’s 12″ wide and then use that action on a document that’s 15″ wide, your guides will be in the wrong place. I solved this with the steps above by rotating the document as I created guides in the top left corner. This gives you an action that creates guides all the way around the document no matter what the document size happens to be. It also rotates the document back to where it started so you can even perform this after you start working.

4. Lightning Fast Photo Editing

Photo editing is typically what people think of when they think about Photoshop actions, and for good reason. Many photographers perform the same steps over and over on hundreds of images and setting up actions saves them countless hours.

As a designer, you’re not off the hook for photo editing. It’s often the case that the resources that you have to work with aren’t quite up to par and could use a little fixing. Every designer should at least have a basic set of actions for editing photos.

To start, I recommend having actions for sharpening, resizing, boosting colors, fixing red eye and even a few for creating vintage effects, which can definitely be cool in a retro design. Last year I put together a huge roundup of 100 Photographer action sets for PhotoTuts, be sure to check it out and download a few sets to keep handy.

5. Saving Multiple Versions

Back when I was in print design, I was showing clients new projects and revisions multiple times every day. For the sake of being thorough, I would always provide multiple versions of every file: one high-res PDF for proofing and one low-res JPG for quick previews. Sometimes a given project would contain as many as fifteen different pieces, which meant that I could spend half my day resizing and saving out all these PDFs and JPGs!

As a solution, I set up actions that sped the process along. The action would flatten the file, save out a PDF, resize the image to something smaller (these were huge print files), save the JPG, then close my original layered document without saving the resizing and flattening changes.

Now, you can easily set up an action to flatten and resize your artwork for easy web viewing, but the saving part gets a little tricky.

Inserting Menu Items

Earlier I pointed out the problem of setting up saving actions: the actions record the saving location. This means if I record a save action for project one, then switch to project two, that action will save all my project two files back in project one.

To solve the problem, you first record all of the non-save actions, then stop the recording. From here, you click the little context menu in the upper right of the Actions palette and choose “Insert Menu Item.” Then choose the save options that you want (Save As, Save for Web, etc.) right from the menu.

This will cause the action to run the save command, but allows you to choose a custom save location each time the action is activated. Now, you might think this is only saving you a quick keyboard shortcut, but if you have a multiple step saving process like I did, having Photoshop speed you through the steps automatically saves loads of time.

6. Running Multiple Actions

An Action within an Action? It’s like Action Inception! It sounds crazy but this is yet another quick step that you can take to drastically speed up your process.

For instance, let’s say you took my advice above about building up a nice set of photo editing actions. You have ten or twenty actions but you’ve found three that you really like that you run on every single photo in addition to some of your own tweaks afterward. You can actually set up a single action to do it all, while keeping the original actions separate.

All you have to do is create a new action just like normal, then run the actions that you want and finish up with your custom tweaks. Photoshop is smart enough to insert references to other actions within an action, so now when you press a single button, multiple actions are performed. The time saving becomes exponential!

7. Dummy Content

Here’s a super handy one for working on wireframes and initial mockups. Try building a set of actions to insert common placeholder content, this will save you a time-consuming trip to the web.

To set up a dummy text generator, grab some lorem ipsum and copy it to your clipboard. Then record a new action and set up a new text box, pasting the lore ipsum inside. Now whenever you need some placeholder text, just run the action and Photoshop will create a new text box while remembering the text you inserted when you created the action.

The same process is useful for images. Try setting up a few actions to record some simple black vector boxes at preset sizes that you use often for images. Then when you need a placeholder for a 900px by 400px header image, just hit the action and Photoshop will draw one up for you.

8. Make It 3D

Here’s a quick and fun one that you’ll enjoy. Making 3D elements in Photoshop can be very time consuming, especially if you have an older version that doesn’t have all the fancy new 3D built-in features.

So let’s say you just want to take a shape layer or some text and apply a quick 3D effect that doesn’t suck, or perhaps you have some flat artwork that you want to quickly throw onto a box shape; actions to the rescue! Here are two that I like:

Magic 3D Photoshop Action

This handy action can handle shape layers, text and regular layers. In just a few clicks, it creates a really snazzy looking shiny 3D element from flat artwork.

There is plenty of opportunity for customization along the way as well so you can create objects with different perspectives, colors, depth, etc. It’s actually really impressive for a free action.

3D Box Generator

Like I mentioned above, this is an action that will convert flat artwork into a perfectly believable three dimensional software box.

Even if you’re not designing for a software company, this is quite useful. The software box is a common visual metaphor for all types of bundled products and services. It instantly communicates the idea of a product, which isn’t always easy when you’re dealing with virtual services.

9. Batch Processing

Here’s where Photoshop actions stop saving you seconds and start saving you hours. Any time you have a huge set of images that need to be resized, brightened, converted to black and white or any other repetitive task, Photoshop’s batch processing commands ensure that you don’t have to either do the work yourself or go off searching for some custom third party batch utility.

All you have to do is record an action containing all the various steps you need on a sample image. Then you go to File>Automate>Batch in the Photoshop menu. From here, the action you just made should automatically be selected, simply browse to the folder containing the images you want to work on and sit back and watch as Photoshop performs in seconds what normally takes you hours (some still bill their clients for hours).

There are plenty of additional options in this dialog for overriding saving commands and the like so be sure to have a look around.

10. Droplets

In addition to using the Photoshop batch processing technique in the previous tip, you can streamline things even further by creating a Photoshop droplet.

The process for setting this up is almost identical, only this time you go to File>Automate>Create Droplet. Even the dialog box looks almost exactly the same.

So what gives? What’s so special about a droplet? The answer is that this method is so incredibly efficient that you can batch process images right from your file browser. This saves you the hassle of setting up a batch processing workflow every single time you want to do something.

Simply select a bunch of images, drag them to the droplet icon that Photoshop created for you and BAM, you’re done. Just sit back and watch the magic. Droplets are so great that Photoshop legend Deke Mcclelland wrote a song about them.

Conclusion

Hopefully, this list has your brain on overdrive thinking up new ways to automate and speed up your workflow using Photoshop actions. It’s really a shame to ignore such a helpful feature that really does have the capability to make your work day a lot more bearable.

Leave a comment and share your ideas for Photoshop actions. What actions have you set up for work? How much time do they save you?

Today we’re going to take a brief look at how mobile websites are becoming ubiquitous, why turnkey DIY services are a necessary part of the web design world and a few of these services for you to check out. We’ll even walk you through the process of using one of these services so you can see how easy it is to have your own mobile site up and running in minutes.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Mobile Web Is Here to Stay

Once upon a time designers had to spend a good deal of time simply convincing clients that they needed a website. Eventually though, everyone came around and by today just about every business on the planet agrees that a website is not only a worthwhile investment but a necessary one.

Many web designers in the past five years have been in the same place with mobile site design as they were long ago with full site design, but we are definitely beginning to witness the same kind of widespread acceptance among businesses and individuals that we saw with full-size websites. We’ve reached the age of smartphones and tablets, the web is no longer confined to a desktop but is with us everywhere we go and accessed daily by an almost innumerable array of devices.

There’s a massive trend in design right now to not only consider mobile in the design mix, but to keep it front and center in our minds as we develop creative for any given project.

Responsive web design has recently given us an amazingly flexible way to create sites that instantly adapt to look custom-tailored to specific screen and browser window sizes. It’s currently the industry’s best and most appropriate answer to the dilemma of the duality of mobile and desktop computing. Unfortunately, not everyone has the budget or skill set for implementing such a solution.

The Necessity of Turnkey Websites

Though professional web designers are currently embracing mobile-centric design in an unprecedented manner, there is still another portion of the web that is just now really starting to dive into the mobile arena: turnkey, template-based websites.

Serious professional web designers need not scoff, there is a legitimate and burgeoning need for normal everyday people to create websites without spending thousands of dollars to do it. The web shouldn’t only be a place for those with multi-thousand dollar budgets to have a presence, it’s something everyone should have the freedom to enjoy and be a part of.

All kinds of users from every profession have flocked to products that allow them to have their own little corner of the web and will continue to do so. Professional designers shouldn’t be threatened in the least by this trend as it represents a significantly different audience that the one they are gunning for.

Make Your Own Mobile Site

The turnkey web design industry has been around for a long time with options like Homestead dating all the way back to 1996!

In the past few years we’ve started to see this industry turn towards the ever growing market of the mobile web. Tons of different options are popping up that promise a quick, easy and often free way to make your own mobile site. Each of these services has its own method, templates, etc. for helping you get the site you want. Let’s grab one and see how easy it is to build a good looking site with zero design experience.

WixMobile

One recent and interesting entrant into this mix is WixMobile. You’re probably already familiar with Wix, which helps you create free Flash-based websites. However, with iOS leading the mobile world, Flash isn’t a serious possibility for mobile sites.

Fortunately, for mobile sites, Wix dishes out pages that look perfect on an iPhone, iPad, and most other popular smartphone operating systems such as Andriod and Blackberry (Version 6 or higher). Just about anyone can build a Wix site completely free and it only takes four steps.

Step 1: Choose a Template

As soon as I opened up the WixMobile interface, I was struck by how simple it was, in a good way mind you. These types of apps tend to be quite cluttered and are frankly a mess of usability. This however was very straightforward.

Notice the big iPhone on the right. This is a fully-interactive live preview of your site that updates instantly with every change that you make. Clicking a link on the phone is just like tapping it in real life, the page updates and proceeds to the next screen.

The first thing you’re told to do is choose a template. There are currently 17 different styles to choose from, which range from super minimal to quite colorful. I used the word “styles” because there’s really only one overall layout and structure with various different aesthetic options to choose from. Here’s a look at a few:

Step 2: Enter Site Title

This step is easy enough, all you have to do is enter the title for your site and choose an overall category that the site fits into from options like Photography (what Wix is known for), eCommerce, etc.

Step 3: Edit Pages

Once you’ve got your template squared away, it’s time to actually plan out and implement all your content. This is the most time intensive part of the whole process and is quite dependent on whether or not you really know what you want.

By default, your site is pre-populated with several pages but you can add in new ones if you want. There are eight different page types to choose from, each with its own layout: gallery, about, services, events, collection, restaurant, contact and network.

Once you choose a page type, your template on the right updates to show the layout and you use the area in the center to start filling in and uploading your own custom content. It really couldn’t be any easier.

Once you’re done entering your content, you can customize your site even further with the “Appearance” settings. Here you can manipulate your color scheme and even change the background image. As a designer, I particularly like the option to upload a custom background, which affords me a lot more freedom over that the site will look like.

Step 4: Publish

After that, you simply hit the publish button and your site will be pushed live to the web! At this point you’re given a link that you can share with anyone.

Pricing

Most of the free site building services use “freemium” business plans so while it’s completely free to sign up and use the service, there are various perks that you can only receive by subscribing to one of the premium plans. These include the removal of ads, custom domains, Google Analytics, and more. Click the chart below to get a closer look at the available plans.

Conclusion

To sum up, getting your own basic mobile site up and running is an intimidating task. Fortunately though with services like WixMobile the task is neither difficult nor expensive.

Leave a comment below and let us know if you’ve tried any of these mobile turnkey web template services and what thought of them!

We’d like to make it clear that this is a sponsored review. Our writers are always encouraged to give unbiased opinions.

For all you Chrome lovers out there, we’ve got an awesome collection of 25 extremely useful Google Chrome Extensions for Designers and Developers. Whether you’re looking for a quick way to validate your page or create a custom grid overlay, we’ve got the tool for you.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Firebug Lite

Firebug Lite provides the rich visual representation we are used to in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides some cool features like inspecting HTML elemements with your mouse and live CSS editing.

Stylish

This extension makes it easy and fun to completely redesign the visual style of a web page or site. Want to create a gray version of YouTube or a black version of Google? Stylish is your answer.

Stylish lets you easily manage user styles. Add, delete, enable, disable, and organize with a few clicks of a mouse, no code to edit, no obscure configuration to find. Stylish’s companion website, userstyles.org, hosts tens of thousands of user styles made by other Stylish users that you can try.

CSS Reloader

CSS Reloader is a browser extension that allows you to reload CSS without reloading the page itself. Just hit a quick shortcut and the page will update with the style changes.

Speed Tracer (by Google)

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. The UI is an easy-to-use dashboard full of applicable information and graphs that will help you optimize your apps.

Live CSS Editor

This extension provides a text box on any HTML page so that you can write CSS freely and immediately see the results. It’s a simple tool but it’s quite helpful for working out ideas and troubleshooting.

Aviary Screen Capture

This is a really neat little tool that captures any web page and automatically opens it up in one of Aviary.com’s many professional tools for creatives. You’ll have access to Photoshop-like tools so you can manipulate your image however you please: crop, resize, rotate, etc.

Lorem Ipsum Generator

Just a simple Lorem Ipsum generator built right into your browser. Extremely useful for when you’re creating mockups and need some filler text.

Refresh Monkey

Automatically refresh a page at a set interval. Monitor the page for a change and get notified in case of change. This is obviously the perfect tool for web developers who would like to keep an eye on code changes in the browser without constantly manually refreshing the page.

Window Resizer

This extension resizes the browser’s window in order to emulate various resolutions. If you’re jumping on the responsive web design train, you’ll want to check out this extension so you can quickly evaluate your designs at various popular sizes.

Google Font Previewer for Chrome

I’m a huge fan of Google Fonts, the free tool for applying custom web fonts via CSS. This extension allows you to quickly apply Google fonts to specific CSS selectors so you can get a fast preview of what that font will look like in your design before actually updating your files.

ruul

ruul – a fantastically simple on-screen ruler for lining up and measuring type, line height, strokes and just about anything on the web. Perfect for analyzing existing designs.

Check My Links

‘Check My Links’ quickly finds all the links on a web page, and checks each one for you. It highlights which ones are valid and which ones are broken. I can’t tell you how many times I’ve made stupid mistakes like forgetting to check my links to make sure they all work. This simple tool automates this annoying process and helps you identify what you need to fix.

Comps

If you like to code websites from Photoshop comps, you’ll find yourself constantly comparing the two to see if you’re on the right track. This extension allows you load images from your local computer and easily overlay them onto your website for comparing your code against a given design.

The Grids

This extension helps you create a custom grid overlay for any page. It has quite a few options and is quite useful in creating pixel perfect grid-based layouts.

Grayscale

With this extension you can make your pages show in grayscale, this will help you see potential problems with colors not having enough contrast. Contrast is a major element in design that improves aesthetics and usability for typical and colorblind users alike.

Rulers, Guides, Eye Dropper and Color Picker

For UI developers. Pick any color from webpage using eye-dropper tool; display rulers, guides and grid on the page.

Pendule

Pendule is a large collection of developer tools for Chrome. You can view and validate code, disable styles, view used colors, hide images, show passwords and a lot more.

WhatFont

WhatFont is an awesome tool that you can find on many browsers. It’s quick, easy, super attractive and tells you not only the font name but the size and line height as well.

Palette for Chrome

A neat little tool that quickly grabs colors from any image and helps you instantly build solid color schemes.

Guides

Keep your elements in line with Guides! Check distances, alignments and more to make sure your websites are pixel-perfect.

HTML Instant

HTML Instant is a nice and simple, double pane editor that allows you to enter HTML, CSS or JavaScript on the right and instantly see a live preview on the left.

HTML Validation

A quick and easy way to validate the current page using w3.org.

SEO & Website Analysis

SEO & Website Analysis by WooRank is an extension for Google Chrome that provides a deep SEO analysis covering more that 50 SEO and Usability criterias.

Browser Compatibility Detector

Cross-browser compatibility is the biggest pain you’ll face when developing websites. This tool can help you quickly identify potential problematic areas in your code.

Neo Vision

Neo Vision provides syntax highlighting when viewing source files. The cool part is that there are multiple customizable themes so you can make the code look however you want.

What’s Your Favorite Google Chrome Extension?

Now that you’ve seen our collection of Google Chrome Extensions for designers and developers, leave a comment and let us know what your favorite extensions are. Also, have you tried any of the extensions above? What did you think of them?

Today we’re going to take a quick look at eight popular methods for creating selections in Photoshop and where each is the most applicable.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Why All the Options?

Photoshop is a mammoth of an application that’s seemingly ripe with redundancy. For any given action, there’s always a handful of different ways to go about it! This is especially true of creating selections, which is an action that Photoshop excels at and has tons of features to support.

So why bother learning them all when you can just get really good at using one? Is it really necessary to know eight or more different ways to create a silly little selection?

The answer is a resounding “absolutely.” Every single method of creating a selection that you can come up with has particular strengths and weaknesses. Some methods are better suited for creating quick and dirty selections when you don’t need a lot of accuracy, others are better for creating precise, pixel perfect selections. Some methods work better when there’s a lot of contrast in the image to work with, others help when there’s almost none.

Let’s take a look at each of the major selection techniques and discuss what they are, how to use them and under what circumstances you should consider implementing them.

Marquee

We’ll start with the most basic selection tool in Photoshop: the Marquee Tool. Odds are, you already know all about this one. With it, you can draw a box or circle to select a portion of your canvas. Not much to it right? Not so fast, let’s look at a few quick tips that you should know when working with the Marquee Tools.

Single Row/Column
Though you can switch to them directly via the keyboard, hidden in the submenu of the Marquee Tool are the Single Row and Single Column Marquee Tools. In all likelihood, you’ve probably never used these. However, they are extremely helpful and should be kept in mind when you’re trying to undertake the difficult task of making single pixel selections.

Keyboard Switching
When you’re working with any other tool in Photoshop, you can switch to the Marquee Tool with a quick “m”. This will typically bring up either the rectangular or elliptical version, depending on which you last used. This isn’t the end of the keyboard functionality though, “⇧M” will allow you to quickly switch between the rectangular and elliptical versions without venturing into the submenu.

Modification Shortcuts
These tools follow a standard that you’ll find repeated across the entire line of Adobe desktop publishing apps. When you hold Shift, the shape will be constrained to perfect proportions (a perfect circle or square). Holding Option (Alt) will allow you to start the shape from the center rather than the top left. Combining the two, “⇧⌥”, will give you a proportional shape that grows from the center.

Finally, it’s extremely useful to know that you can actually move the selection around while you’re still in the process of creating it. Simply hold Space and you can reposition the in-process selection.

Additional Options

When you’re using the Marquee Tools, there will be a strip of options above the canvas. These allow you create precisely sized selections, feather your selection and change the default behavior of the next selection action (add to, take away, etc.). The latter of these options can also be accomplished with your keyboard: Shift adds to a selection, Option subtracts, and Shift+Option intersects.

When to Use Them

The Marquee Tools are workhorses, you’ll use them all the time. However, they’re only for the most basic of selection tasks. Any time you need a slightly complex selection, it’s best to use one of the other methods. Don’t fall into the trap of using these simply because they’re the easiest, there are plenty of other options that are just as simple and work far better in certain scenarios.

Lasso

Slightly more complex than the Marquee Tools are the Lasso Tools, which give you much more freedom over the shape of your selection. There are three variations of the Lasso Tool: the Default Lasso Tool, Polygonal Lasso Tool and Magnetic Lasso Tool, which can be quickly cycled through via the “L” key.

Lasso Tool
The Lasso Tool is 100% freeform. Simply grab it and start drawing with your mouse or trackpad to make a selection. Obviously, the result is going to be rudimentary at best and even tends to be quite sloppy!

Polygonal Lasso Tool
The Polygonal Lasso Tool allows you to click from point to point to gradually build a selection. Selections made with this tool are purely comprised of straight edges. If you don’t mind some tedious clicking, you can pull off a primitive curve, but for the most part you’ll definitely want to stick to hard edges.

Combining the Two
It’s pretty rare to find an area that can be selected with only straight lines. Fortunately, you can combine the use of the Lasso Tool and Polygonal Lasso Tool in one fluid workflow. Grab the Lasso Tool and hold down Option to draw straight lines with the Polygonal Lasso. Then, once you hit a curve, let off of Option and you’ll have the freeform Lasso. Once you’re done with the curve, hold down Option again to go back to making straight lines.

Magnetic Lasso Tool
The Magnetic Lasso Tool is a lot like a cross between the Polygonal Lasso Tool and the Magic Wand Tool. It allows you to build your selection incrementally, but in a fairly automatic fashion. Simply move your mouse along an edge and the MLT will give its best guess for outlining that edge. You can let the tool build your points automatically or manually click if there’s a specific point that you think needs to be dropped.

This tool comes with a few settings in the toolbar that let you adjust the width, contrast and frequency. If you don’t like the result you’re getting, try fiddling with these.

When to Use Them

The Lasso Tools represent your tedious selection tool set. They are in fact capable of making very complex and irregular selections, but the accuracy is in the mid range and highly depends on a steady mouse hand.

Use these tools when you need to make a general selection that doesn’t require a lot of accuracy. To be honest, I use the Polygonal Lasso for quick, hard edge selections and usually forgo the others completely in favor of another selection method. The freeform Lasso is much more fun and accurate if you have a drawing tablet so be sure to try that if you have one.

Magic Wand

Next up is our old friend the Magic Wand Tool. I’m going to be honest up front, this is a tool that is primarily used by users who are either new to Photoshop, lazy or inexperienced with other selection methods. Yes, that’s a blanket statement but historically this is a pretty awful tool that has led to decades of hideous selections.

Now, that being said, the recent edition of the “Refine Edge” command has pretty much saved the Magic Wand. In fact, Refine Edge is so good at repairing a poor selection, I even find myself reaching for the Magic Wand from time to time!

Everyone knows how to use this tool: click on an area and Photoshop will attempt to select that area based on color and contrast. The results are rarely as good as you want them to be but if you have truly solid color fields then it can work decently.

Settings
The key to using the Magic Wand Tool effectively (apart from using Refine Edge) is to familiarize yourself with the settings. Three of these are particularly important: Tolerance, Contiguous, and Sample All Layers.

The tolerance allows you to control the sensitivity of the color selection criteria. A higher tolerance will select more of the image, a lower tolerance will select less. Think of this setting as telling the accuracy with which Photoshop will match the pixel that you click on.

By default, the magic wand will make a selection of similar pixels that are actually connected to each other. In other words, only one area will be selected. Deselecting the “Contiguous” checkbox will cause the Magic Wand to ignore connections and instead select any pixels on the canvas that are close in color to the one that you clicked on while keeping your tolerance settings in mind. A non-contiguous Magic Wand Selection is very similar to a Color Range selection.

The last option allows you to choose whether the Magic Wand takes all layers into consideration or only the one that is currently selected.

When To Use It

As you can tell from the comments above, I’m not the biggest fan of this tool. For nearly every selection task, you can find another option that works just as well or better. There are some legitimate uses for it, but ultimately this should be considered to be your “quick and dirty” selection tool. The only real advantage here is speed, this tool is extremely fast so if you’re in a hurry and don’t mind having a selection that looks like it was made with a hacksaw, go for it.

Quick Selection

The Quick Selection Tool is somewhat of a newcomer to the Photoshop selection tool family. However, it’s already proved itself to be far more useful than the Magic Wand Tool. This tool works like a brush: select your brush size, hardness, and spacing, then start painting to create a selection.

Upon its debut, I expected to hate this tool and file it away in the “only amateurs use this” category. However, it blows me away every time I use it! It really seems to be capable of interpreting my actions and picking out what I’m trying to select in cases where the Magic Want would be completely ineffective.

For instance, in the image below, using the Magic Wand we would have to select the white portion and inverse the selection because using it on the multi-colored pinwheel would be quite tedious. However, with the Quick Selection Tool, I simply painted one broad stroke across the pinwheel and the resulting selection was remarkably accurate!

Your results can get even better if you select “Auto-Enhance” from the tool settings above the canvas. Once again, the results should be combined with “Refine Edge” for a truly accurate selection.

When To Use It

I recommend using the Quick Selection Tool any time you’re tempted to use the Magic Wand. It’s more intelligent, gives you more control and simply produces a better selection in most cases.

Color Range

As I mentioned above, using the Color Range command is similar to a non-contiguous Magic Wand Selection. It allows you to quickly target not simply one color but a range of colors within your canvas.

With the Color Range window active, you use the eyedropper to target a specific color. Hold Shift to add to that selection and Option to subtract from it. The “Fuzziness” slider is like the Magic Wand’s “Tolerance” setting and allows you to adjust how accurate the color matching is.

Below the sliders you get a little black and white preview of your selection. Just like in a mask, white represents selected portions and black represents deselected portions.

When To Use It

To use the Color Range Tool, you’ve really got to have some well defined portions from a color perspective. For instance, the photo of the jellybeans above seems like it would be perfect for this tool but in reality the lighting and shadows make for some widely varied tones that aren’t easily targeted with Color Range.

It’s certainly a powerful tool, but I find that it’s pretty rare to be working with an image that really makes the Color Range command worthwhile. Try it out on a few images and you’ll quickly get a feel for when it will and won’t work effectively.

Pen Tool

The Pen Tool is probably the most widely feared of the selection tools, it also happens to be one of my favorite. To be accurate, the tool is specifically for creating paths, which can then easily be converted to selections via a Command-Click.

The Pen Tool is difficult to master but once you really get the hang of it, there’s simply nothing that feels as accurate or flexible. The strength of the Pen Tool lies in creating smooth curves. These are hard to freehand and obviously impossible with the Polygonal Lasso.

So why not just use the Quick Selection Tool? There are several reasons! First of all, you can be far more precise and intentional in your selection with the Pen Tool. Further, Pen Tool paths are vector and are therefore incredibly versatile, allowing for endless editing and scaling at any time. Also keep in mind that your eye can sense an edge much better than software so when there’s a lack of clear contrast, the Pen Tool will prove superior. Finally, paths can be saved with even flat files and therefore represent the best way to embed a selection into a file that doesn’t retain layers.

When To Use It

As long as you’re not working with a soft edge, the Pen Tool should be at or near the top of your list of go-to tools for creating professional quality selections. Having a saved vector path to work with is simply an unparalleled advantage.

I used to do a lot of work with grocery store product shots and the standard way for us to share images was a high resolution JPG with an embedded clipping path. This allowed us to keep file size small while also making it easy to remove the product from its background.

Masks

This one might confuse you a bit. After all, you typically create a selection and then convert it to a mask, meaning that the ultimate end is the mask, not the selection. However, this logic can easily be reversed, sometimes the best way to create a complex selection is create, refine and tweak a mask (Command-click on a Mask to turn it into a selection).

There are several benefits to using a mask to structure your selection. For starters, typical selections are lost as soon as you deselect everything, but masks stay with the layer and can even be saved with a layered file.

Masks give you a better balance of freedom and control over your selection than perhaps any other method (you can even combine them with the other methods). The reason for this is that you have the freedom to use Photoshop brushes and take advantage of the endless benefits therein. For instance, painting with a gray brush creates a diluted selection.

Another key advantage of masks is that you can use them to create soft selections. Almost all of the selection methods we’ve examined thus far are best used with hard edges, but what if you’re trying to create a blurry selection? From crafting a selection from a photo with a shallow depth of field to trying to select a shadow, there are tons of times when you need to work with soft edges and masks are the way to go about it.

When To Use Them

Use Masks when you need a high degree of accuracy in your selection but don’t necessarily require a vector path. Also, any time you need to create a selection that can be continually evolving and feature both soft and hard edges, masks are your best friend.

Leveraging Channels

Creating truly complex selections and masks is a painstaking process that can take years to fully learn. One technique that will boost your talent in this area by leaps and bounds is getting the hang of using Channels as a means to create selections.

To do this, inspect your channels closely with the thought that white equals fully selected, black equals not selected and everything in between represents various levels of selection. Find the channel that most closely correlates to your desired selection and use it to your advantage.

For example, say we wanted to create a precise selection of the hair on the image above, an intimidating task! To begin, find the channel with the greatest amount of contrast and duplicate it. Then, find ways to increase the contrast even further: Levels adjustments, dodge and burn, brushing in black and white, etc.

With enough work, you’ll end up with a super high contrast channel like the one below. From here you simply Command-click on the channel to create a selection. This often results in the opposite of what you want (we’ve selected the background, not the hair), so inverse the selection and you’re ready to go!

I’ve outlined this technique in detail in the our Complete Beginner’s Guide to Masking in Photoshop.

When To Use Them

Channels are incredibly useful tool. Any time you’re faced with creating a dauntingly complex selection, have a look at the channels and look for areas of contrast that you can manipulate. Utilizing this method, you’ll be able to create selections that impress even the pros!

Conclusion: Mix and Match

To sum up, there are a million ways to select something in Photoshop. This article was meant to help you become aware of the major methods of crafting a selection and when you should think about implementing each. Knowing the right tool for the job is vital in creating effective selections.

Keep in mind that this guide isn’t meant to get you to choose one method over another in every circumstance. Instead, you should be analyzing each scenario individually and deciding which combination of tools will get you closest to the result that you want.

Leave a comment below and tell us about your selection tendencies. Do you have a few favorite tools that you always use? Are there any that you hate? We want to know!

This leap is deceptively simple and merits significant inspection as to the fundamental differences between mobile and desktop platforms and how that can and should affect how interfaces and experiences are crafted.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Rise of the Smartphone

As the smartphone made its rise to power and glory, designers realized that they had a lot to learn about the new form factor. On particularly impressive platforms like the iPhone, the potential was there to meet and exceed the richness of interfaces of desktop apps.

Countless studies, discussions and evolutions have led designers to a point where it is indeed the case that desktop users find themselves enamored with mobile interfaces, wishing that desktop UIs would undergo a similar revolution.

Mobile devices have a lot going for them. The direct interaction model provided by multitouch is so completely intuitive that everyone knows how it works immediately. Further, there’s just something about small screen that really makes designers focus on what’s most important while stripping out all the non-essential elements. The result is thousands of beautifully streamlined applications that users simply can’t put down.

A New Problem

Traditionally, given this timeline, the progression of interfaces in recent history has been from large to small. How do we take the desktop experience and successfully transplant it to a smaller screen and new interaction model?

As we now look to mobile development as a smashing success, the designer’s problem has been completely turned on its head! Many developers, including the Apple team themselves, are seeking to translate the newfound joys of mobile interfaces to the desktop (not to mention a similar leap from the iPhone to the larger iPad).

More than Interface Scaling

Conceptually, it seems like a far easier task. You’re going from a small amount of space to a large one, so you have more room to implement the features you need. However, in practice, the shift is much more difficult. In fact, many developers and designers are still struggling to get it right.

I’ve found that the problem goes much further than merely how interfaces scale to a new screen size, there’s actually a fundamental difference in the way we interact with desktop interfaces versus those on a mobile device. Let’s explore this idea further.

Back to the Mac

Leading this procession of technology and design from mobile to desktop is of course, Apple Inc. Their most recent operating system, OS X Lion, was labeled a “Back to the Mac” project meant to bring key features that first made an appearance in iOS back to OS X.

If anyone was going to get this transition right, it was Apple. After all, they were behind the smartphone that set the standard for all smartphones: the iPhone.

Interestingly enough, even Apple’s designers and developers have had a less than perfect run with making the transition from mobile to desktop. Let’s discuss some of their attempts.

Natural Scrolling

When you look at a document on an iPhone, there aren’t any visible physical controls on the phone itself, so your first reaction is to reach out and touch the document when you want to scroll. This reaction proves to be correct and you instantly realize that the interaction model mimics the real world, it’s as if you were really reaching out and touching a piece of paper. If you flick your finger in an upward motion, this grabs the piece of paper and moves it upward, effectively scrolling downward. The key takeaway here is that the learning curve is about as close to zero as it can get, almost no one takes more than a few seconds to figure out how scrolling works and will then remember it forever.

Since scrolling feels so natural like this on the iPhone, Apple decided to implement the same system in Lion. “Natural Scrolling” is now the default scrolling mode in OS X, all it really does is invert the scrolling method: swiping down used to scroll down, now it scrolls up and vice versa.

Not What I Expected
The first time I personally used an iPhone, I immediately appreciated the intuitive nature of the scrolling and remarked that the Mac should adopt this model. However, when I first tried Natural Scrolling in Lion, I realized that it didn’t translate quite as well as I thought it would.

Curious about what others thought of this, I polled over 1,800 OS X users. Almost 26%, a decent number to be sure, responded that natural scrolling seems more intuitive than the previous model. However, 34% admitted that it took some getting used to, 14% said they tried it for a while but gave up and the remaining 26% said they turned the feature off immediately.

Direct vs. Indirect Interaction
Fully 74% of respondents had at least some trouble adopting the new, supposedly more intuitive, scrolling system. Now, most of this is because we’ve been doing it the other way for years, our brains were hardwired for one model switching so suddenly wasn’t the easiest task.

Far more important though is the realization that direct interaction is a very different beast than indirect interaction. Both trackpads and computer mice provide an indirect means for input. We’re not reaching out and touching the icons or the page, we’re looking at these items while our hands are off somewhere else controlling the movement on the screen. Even though both trackpads and the Magic Mouse are multitouch, using them is still a very different experience than interacting with a touchscreen device.

Drawing tablet users have known this for years. Drawing on a tablet without a screen is a pretty interesting experience. Your hand is one place and the output is another, very different from the natural drawing model. The process becomes much more intuitive when you use a Wacom Cintiq, which has a built-in touchscreen for direct input.

Fullscreen Apps

This one should be easy to transfer, right? Bringing an app to fullscreen on a large display helps you stay focused on the task at hand and can surely only increase productivity.

However, in many ways, fullscreen apps actually represent a reduction in functionality and efficiency. One such problem that I encounter daily is with Mail, OS X’s default email client. When I’m not in fullscreen mode, I can easily start a new message in a new window, then switch back to the main window to copy an email address or some other important snippet of information. I can also move that active message window over a little bit, click on a file on my desktop, and drag it to the message window.

In fullscreen mode, neither of these actions are possible. The interface isn’t merely stretched in size, there’s a fundamental shift in the way it works that locks things in place and makes for a more rigid workflow. This seems natural on my iPad, but on my desktop where I’m used to being able to move between windows freely, I find it frustrating and usually revert to manually sizing the Mail window rather than using fullscreen mode.

Versions & The New Saving Model

Autosave is another feature that seems like it should easily survive the transition from iOS to Mac OS. After all, who wouldn’t want their document to save itself so that work is never lost?

Apple decided to go a step further with this though and rethink the core functionality of how saving documents works. Since saving the way we used to know it is now automatic, each time you hit “Command-S” you now save a new version. You can then sort through previous versions of the file and see the changes progressively. Again, a great feature!

The part where it becomes strange though is the removal of the “Save As” functionality. As a full-time writer, I have several templates for various types of content that I typically produce. My workflow used to be such that I would open my template, make some changes and hit “Command-Shift-S” to save those changes as a completely new document, thereby preserving the original template. Now however, the system is far less efficient. I’m forced to open my template in TextEdit, manually navigate to File>Duplicate in the menu before I make any changes, then make my changes and save the document.

In making the desktop saving model mimic that of iOS, Apple has stripped out core document functionality that has literally been around for decades. Before this, the lack of a “Save As” feature in any text editor would’ve been a cause for mass complaints, now it’s billed as a feature.

What’s the Point?

All right, so we agree that there are significant differences between both mobile and desktop interfaces and the interaction models for the same, how does any of this relate to design?

The primary takeaway from this article is to thoroughly consider every aspect of moving a design from a mobile space to a desktop space. Here are a few points to keep in mind as you make this transition.

Don’t Just Scale the Interface, Rethink It

Many developers have been criticized for creating simple ports of iOS apps for the Mac. Remember that, just as with natural scrolling, what seems perfectly intuitive on a touchscreen may seem awkward on the desktop.

Begin to question why your buttons are placed where they are, how each item’s proportions works with the rest of the interface, whether desktop users will expect greater control and how you can tailor the visual experience to a fundamentally different interaction model.

Think About the Experience

Notice that, more than making Lion look more like iOS, Apple sought to make it work like iOS. As we showed above, this can be both good and bad depending on the implementation.

Remember that there’s a fundamental difference between UI and UX. When crossing platforms, we uproot both the UI and UX and plop them into a new system. This causes obvious troubles with the UI, which are fairly easy to address because we can clearly see them. However, far more subtle and tricky are the UX differences between the two platforms.

Never assume that the experience and interaction will translate perfectly. Instead think about the strengths and weaknesses of both systems and fuse the strengths in light of user expectations. If you’re constantly bucking against how the user will intuitively want to use your product given that it’s in a desktop environment, you could be fighting a losing battle.

Always Ask “Why?”

When moving a product from a mobile to a desktop environment, “Why?” can be your greatest asset. If you leave something exactly the same during the transition, ask yourself why it wasn’t changed. Are both platforms similar enough in this area that it will translate well? Was the standard way of achieving this in a mobile environment better than an alternative route that’s usually taken in a desktop environment?

Similarly, if you do change something, also start asking questions about why it was changed. What were your motives for the change? Did you improve the experience or make it less efficient/effective?

Ultimately, you should always ask yourself if you’re mimicking mobile UI and/or UX just for the sake of doing it or because it actually represents an improvement. As we saw with Apple’s attempts, the answer won’t always be black and white. I am personally now more comfortable with natural scrolling than the old way, but has my experience actually improved or was it a superficial change?

Conclusion

The purpose of this article was to get you thinking about the fundamental differences between mobile and desktop environments and how that affects design and interaction decisions.

Too many people hastily port a product, feature or model from one platform to the other without thinking through the implications of that leap. The result is a poorly developed end result that disappoints users.

Always remember that a multitouch trackpad and/or mouse is very different than a multitouch screen and that moving a design from a small screen to a large one involves much more than scaling your graphics.

Image credits: superstrikertwo and kumazo

With all the time, effort and money that Adobe spends on creating a “code free” solution for designing websites, you’d think that they would be able to create something decently usable by now. So what’s holding them back? Today we’ll take a brief walk down memory lane, starting all the way back at PageMill, to see if we can discover any reoccurring themes in Adobe’s history with web designers.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

In The Beginning

Once upon a time, Adobe owned the creative industry. This was that magical point in history when print design was enjoying a long-held high, web design hadn’t quite taken off as a ubiquitous profession and everyone had finally decided that Quark pretty much sucked.

To be sure, I still don’t know of a single creative professional who doesn’t have an Adobe app or two open on their machines at almost all times, but the company still seems to be struggling with a new generation of designers.

Adobe has a long and sordid history with web designers, particularly in the area of WYSIWYG web editors. Again and again they’ve tried to revolutionize and own this industry, each time with less than desirable results. The fact that Adobe is still releasing yearly experiments in this arena is proof enough that internally, they think there is still plenty of room for improvement.

So why can’t the king of creative crack this nut? What is it about web design and/or web designers that Adobe just doesn’t understand? In our quest for the answer, let’s look at some of their notable attempts to infiltrate the web design world.

PageMill & GoLive

As far back as late 1994, Adobe realized that this Internet thing might be something that they needed to pursue. To do so, they did what any mega-company does in favor of wasting precious R&D time and money: bought up a competitor.

From 1994 to 1999, Adobe’s WYSIWYG of choice was PageMill, acquired from Seneca. By the second or third iteration, it had a lot of bells and whistles and was receiving fairly positive feedback, but Adobe was already working on its next big entrant into this area.

In 1999, Adobe decided to buy yet another company to help defend themselves against the growing threat of Macromedia Dreamweaver. This time around, the target company was GoLive Systems and the product a WYSIWYG editor called CyberStudio, which was rebranded as Adobe GoLive.

Many GoLive users complained that the product suffered from a fundamental conceptual flaw: it was too geared towards static design. It might have been decent for making a very simple, static page, but as soon as you wanted to add any sort of dynamic features, the interface became inefficient, clunky and an all around nightmare to wield properly. Pay attention because this is a theme that we see from Adobe even today.

Other complaints about GoLive related to its fairly messy output. Again, this is a huge lesson, the existence of which Adobe has still somehow managed to remain ignorant.

Surprisingly enough, GoLive was around all the way up through 2007, though it was pulled from the Creative Suite after CS2 and converted to a standalone product. Obviously, as many predicted, Dreamweaver won out in the end.

The Macromedia Chronicles

Macromedia was a hot name in the late 90s, mostly because of two key acquisitions. In 1996, they purchased both FutureSplash, which became Flash, and Backstage, which evolved into Dreamweaver.

You could write a book on the history of these two apps. None of us need to be reminded of how Flash changed the web forever, initially seeming like a savior and lately being marked as a Judas. Flash did in fact give us a taste of what the web could be though: a rich, interactive and dynamic experience that sometimes felt straight out of Hollywood. It also brought us lots and lots of easily viewable video content, a now critical feature of the web that most of us couldn’t imagine being absent.

Dreamweaver, in short, kicked GoLive’s tail. Nearly everyone who had used both apps extensively favored Dreamweaver’s friendlier workflow. Heavy lifting like scripting and database integration was supposedly much easier in Dreamweaver, causing many large corporations with behemoth sites to favor it. Even more basic features like CSS authoring was touted as superior in Dreamweaver.

Adobe Buys Macromedia

In true “can’t beat ‘em, buy ‘em” fashion, Adobe acquired Macromedia at the close of 2005, marking the beginning of the end for their interest in GoLive.

Six years later, the results of this acquisition are a bit mixed. Adobe has certainly invested a lot into furthering Macromedia’s various technologies, but as I mentioned above, Flash is the web’s favorite whipping boy at the moment (with Apple holding the whip).

However, Dreamweaver is still the WYSIWYG to beat. I was unable to find any solid sales numbers or suggestions of how many Dreamweaver users there are in the world, but once again looking to BuiltWith, we know there are upwards of 4.2 million websites using it (they obviously can’t monitor the whole web).

Obviously, no one can say that Dreamweaver isn’t still having a large impact on the web. However, deep and scornful criticism of Dreamweaver can be easily found wherever one might search for it. Some of this hatred is spewed towards WYSIWYGs in general, but much is directed at the still less than stellar code and perhaps even more at the huge barrier to entry that is associated with the application.

If your goal is to forgo learning some simple HTML and CSS in favor of tackling Dreamweaver, you might be taking on a massive task to avoid a small one! To be fair, coders can use Dreamweaver too, but I’m not alone in thinking that it’s much easier, faster and cleaner to simply code by hand.

Far From Ideal

Ultimately, few professional web developers today claim that Dreamweaver is the pinnacle of visually-driven web development. Instead, the industry seems to have an attitude that accepts that it’s likely the best solution we have at the moment while we eagerly await a true “Dreamweaver killer.”

The Tip of The Iceberg

As we transition into a discussion on two very recent efforts in this arena, know that I’ve merely hit the major players here. Adobe has launched a ton of other efforts such as Flash Catalyst that are targeted at code-free development.

Fireworks

To prevent large scale comment riots, I should also mention that Fireworks is a rockstar app that does successfully combine many elements of Photoshop and web design. It’s definitely not a way to build complete websites code-free, it’s merely what Photoshop would look like if it were truly built with web designers in mind. If you haven’t tried it yet, check out a basic tutorial here.

Project Rome

Fast forward to the last year or two and Adobe is still trying to figure out what the future of web design will be. A recent notable yet abandoned experiment was Project Rome, which I personally explored on this very site.

My conclusions on Rome were the same as countless other who tried it. There were some solid ideas at work. The learning curve was infinitely lower than Dreamweaver (I was building functional sites within an hour) and you could successfully achieve quite a bit without writing a single line of code.

However, the unforgivable downfall was, wait for it, the output! The brilliant idea here was that instead of using HTML and CSS, Rome could only export a Flash site, even when your structure had absolutely nothing to merit getting Flash involved. Obviously, in a web development climate that currently puts Flash development on par with the evils of table-based layout and terrorism, this didn’t go over well. The Rome website now contains the familiar message from Adobe about moving on to other projects.

Muse

Only this week Adobe launched Muse, the latest in a long line of promises to give graphic designers a way to build websites without learning code. The videos on the Muse homepage make some pretty big promises about revolutionizing the way websites are built, but we’ve heard all this before and you need only read the previous section to see how it usually pans out.

The web design community spoke out loudly and in unison almost as soon as the announcement email hit our inboxes. The general opinion is best summed up in Elliot Jay Stocks’ recent article, Adobe Muse: a step in the wrong direction. In this harsh but completely justified critique Elliot points out a few of Muse’s fatal flaws: strictly fixed layouts, non-semantic code output (seriously Adobe, have you learned nothing?) and horrible typography. With those areas deemed a failure, what’s left?

I gave Muse a shot and found it to be a logical mixture of the good parts of Project Rome and Photoshop. It’s an obvious attempt to take the same goals and ideas behind Rome and separate them from Flash. It’s super easy to pick up and run with and yet it feels quite limited in what I’m allowed to control. Ultimately, I can’t help but join Stocks in saying that Adobe has once again missed the mark.

What Adobe Doesn’t Understand

It’s immensely frustrating to see Adobe going through so many attempts to bring web design to all designers. It’s definitely a huge problem, one that I’m not sure anyone has solved, but I’m not sure Adobe has really taken the time to explore current practices in web design enough to try to revolutionize them.

The conversation in Adobe’s meetings has likely been the same for years, they want to leverage the unbelievably immense base of Photoshop users and give them a tool for easy web design. Lots of print designers are simply too intimated by code, so let’s give them a way to transition their careers into web design with as little pain as possible.

It’s a novel idea, and frankly one that I searched high and low for before learning to code, but the concept may be entirely flawed. Print design is by nature static. Short of lenticular illusions, ink on a page simply doesn’t offer many opportunities for real interactions.

The web on the other hand, is built on interaction. The basic idea of the worldwide web as we now know it is that it’s an interactive portal to a global network. No matter how much current and former print designers, myself included, want it to be print design on a screen, that’s simply not the case. The web is a living breathing thing and print design metaphors taken too far are simply serving up dead, static content.

When I build a website, behavior is every bit or even more important than the surface aesthetics. I think of how the site will function and let that define how it looks, not the other way around. Most WYSIWYG apps have it backwards and instead focus on building static, unusable designs that are then sloppily infused with a modicum of interaction. This model will forever fail to produce the kind of rich web content that the world is used to receiving.

The Solution: Stop Running from Code

Another thing that Adobe completely misunderstands is that there is a current web design industry! Print designers want into that existing industry, not some third niche that is looked down upon. If every “real” web designer hates your product, then odds are it’s not going to be adopted by incoming newbies who want to join the club.

To this end, Adobe should be attempting to build an app that makes coders happy. This is a tricky goal to be sure.

In my opinion, WYSIWYG’s shouldn’t be a way to avoid learning code, they should be a way to teach it! Consider options like Flux and CSSEdit (now part of Espresso). Both of these offer a visual way to create and style web content without relying too heavily on print design metaphors that simply don’t apply. Instead, the visual controls in these apps entirely revolve around technology that the web actually uses: CSS. If you’re new to coding, using these apps extensively will only help you gain a more thorough understanding of how web development works.

Further, when you look at the code that results from Flux, CSSEdit and even Rapidweaver, it’s clean and web developer friendly despite the fact that the generation was handled through a visual interface. This is immensely important. Adobe simply can’t keep ignoring the output of their web products under the argument that non-coders won’t know the difference. Non-coders will hear from coders that the product isn’t up to par and they won’t use it.

Instead of giving graphic designers a back door into the web industry, Adobe needs to start considering how they can create a product that truly and easily empowers them to be real web developers.

Conclusion

WYSIWYG web design is hard to discuss. So many people hate it and look down upon it in a fashion that completely alienates the users who are bound to it without any other viable alternative. After all, if hardcore coders are pretentious snobs, what incentive is there to become one? As someone who codes by hand 100% of the time, I’m completely guilty of this negative attitude and apologize to any would-be developers out there that are intimidated by a web design community that should be finding ways to welcome them into the fold and helping them out instead of casting them out.

That being said, it’s the state of WYSIWYG applications that get us so fired up. Most of them are simply so far off the mark that they can only cause disgust in the minds of people who spend 40+ hours a week dedicating themselves to following agreed upon practices that genuinely make the web a better place.

Adobe, more than perhaps any other company, lies at the heart of this debate and many believe that they are helping to create more problems than solutions. What would happen if Adobe got together with Eric Meyer, Jeffrey Zeldman, Paul Irish and other leading industry experts and asked how they could build a user-friendly visual editor that meets the lofty standards of these individuals?

What if Adobe slowed down in its mad grab for web design market share long enough to ask what being a web developer really means and how they can help bring print design converts to that place rather than making them the red-headed step children of the web design world?

Something truly revolutionary, that’s what.

Update: Further Reading

After writing and publishing this article, I became aware of some similar discussions and projects. I’m definitely not alone in thinking that a revolutionary step in this area is needed. Check out the links below for more information.

Project Meteor
“Project Meteor is a campaign to demonstrate the demand for a modern web design app and give app developers direction as to what it should be.”

The Perfect Web Design App… and Why It Doesn’t Exist
“Designers and developers share with Craig Grannell their tools for designing websites and demand something more in keeping with modern practices. The perfect tool, it seems, simply doesn’t exist yet, as highlighted by the Project Meteor campaign”

Adobe Illustrator is one of my absolute favorite applications. For vector work, Illustrator simply can’t be beat and you should really set your reservations aside and give it a shot. Even if you’re commonly creating raster graphics for the web, there are a number of things that Illustrator simply does better than Photoshop so getting to know both apps and their strengths/weaknesses is a must.

Today’s article is for the extreme Illustrator newbies. You have the Adobe Creative Suite installed on your computer and have seen Illustrator sitting there quietly begging to be played with but you’ve never jumped in. We’ll go over ten basic things you should know before starting.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

A Photoshop-Centric Discussion

In writing this article, one of the major assumptions that I’m making is that you’re fairly familiar with Photoshop. Most web designers live in Photoshop and/or Fireworks so this should work well for you if you fit that description.

As I go through the tips below, a lot of the explanation will be based on how working in Illustrator is different than Photoshop. The two apps are quite similar so you should be able to leverage your existing knowledge as long as you keep the information below in mind.

Like Photoshop, Illustrator is a huge app so we can’t possibly cover everything in one post but this is a decent overview of some techniques, tools and knowledge to keep in mind.

Vector Graphics Are Magic

The absolute first thing you should know about Illustrator is that it’s used to create vector graphics. As you probably know, vector graphics are very different than the raster graphics that you typically create in Photoshop (it’s true that Photoshop has some limited vector capabilities, but no where near what you can achieve in Illustrator.). Instead of being comprised of static individual pixels, vector graphics are mathematically drawn by your computer and can therefore be drastically changed with absolutely zero loss in quality.

What this means on a practical level is that when you create art in Illustrator, no matter what its original size is, at any time you want you can make it as big as a billboard or as small as a thumb tac. This has major positive implications to the way you work.

For instance, let’s say you’re in Photoshop and you have a circular logo that is small and you want it to be big. As you’ve probably no doubt run into a million times, if you try to increase the size of that element, it pretty much gets destroyed. Watch how much a simple circle loses quality as its size increases:

This makes creating and working with complex graphics in raster quite difficult because your freedom to change your mind is limited, even if you’re using Smart Objects you’re constrained to the object’s original size.

With vector graphics, these problems simply don’t exist, giving you the freedom to continually change your mind and your artwork at will without worrying about any visual degradation.

Also, since vector graphics are comprised of points and lines, you have an unlimited amount of freedom to go in and change individual line segments.

But You Already Knew That

Odds are, if you’re reading this blog you already know what the differences between vector and raster graphics are. The thing that you need to accept now is that Illustrator really does blow Photoshop away in this area (Fireworks is an interesting in-between that does both fairly well). Even better, you don’t have to choose one over the other but can instead use them and all the other apps in the Creative Suite synergistically throughout your various projects.

What’s All This Crap on My Screen?

The first thing that you’re likely to notice when you start using Illustrator is that there is a whole lot of stuff going on when you select and edit something. This is something that lots of new users tend to hate right off the bat because it looks confusing, but in reality all of the information and controls that Illustrator throws as you are extremely helpful.

The Bounding Box

For starters, whenever you select anything, you’ll see its bounding box. This is an intuitive feature that you should instantly understand, the part that’s not intuitive is why it won’t go away.

In Photoshop, you only see an object’s bounding box when you’re in the midst of a transform. In Illustrator, you see the bounding box whenever you have a complete object selected and the active tool is the Direct Selection Tool (V).

If you have multiple objects selected, the bounding box will appear around all of them, allowing you to move or transform them together. The same rules apply as you’re used to in Photoshop: hold shift to scale uniformly, throw in the Alt/Option key to scale from the center, etc.

One major different here is that you can’t grab and independently move a specific corner of the bounding box like you can in a Photoshop transform. This makes shearing and putting perspective on objects a bit trickier as you have to use the dedicated tools for these types of transformations. Later we’ll get a glimpse of how to use Free Transform, which will feel much more like you’re used to in Photoshop.

Smart Guides

Smart Guides are the major thing that bugs many newbies and pros alike. These are the little bits of information and outlines that pop up as you hover over, move or transform something. They may seem like they’re just getting in your way but try to get used to them and use them as much as possible, you’ll soon start to see their value.

Smart Guides allow you to size objects on the fly using precise measurements and align whatever you have selected with points and lines from other objects around it. They make it really easy to create complex layouts very quickly and are much easier than “eyeballing” things. You also of course have a full set of alignment tools for these types of operations:

Turn It All Off

I highly recommend working with all of these extras turned on, but some users simply hate all of the distractions. Admittedly, I feel the same way about the extras for InDesign so I definitely understand this mindset.

Fortunately, Illustrator allows you to silence the noise and turn all of this stuff off. As a quick way to turn off the bounding box, hit Command-Shift-B, or go to View>Hide Bounding Box.

Similarly, turning off the Smart Guides is as easy as hitting Command-U, or going to View and unchecking Smart Guides.

Layers Are Different

When switching from Photoshop to Illustrator, it’s important to note the conceptual changes in the workflow. Despite the fact that the two applications share so many features, it’s frequently the case that the feature is used in a very different way.

Layers are an excellent example of this. In Photoshop, every piece gets its own layer. In fact, an individual object is really defined by the layer it’s on. If you throw two elements on the same layer, they become a single element and if they overlap, you won’t be able to separate them anymore. Also, applying an effect to an object affects the whole layer.

In Illustrator, layers aren’t so much the way to access every separate piece on the page as they are a convenient organization utility. If you choose, you can create an incredibly complex piece of art with thousands of individual elements all using a single layer. Further, the elements on that layer have their own sub-hierarchy and can be independently edited and arranged at any time.

So, for example, instead of having a layer for every item, it would be pretty typical to create one layer that holds all your various text items, another for your vector graphics and possibly even a third for imported Photoshop art.

How Layers Work in Ai

There is a ton of functionality in Illustrator layers that you won’t see in Photoshop. For starters, each layer has a little dropdown arrow that allows you to see the hierarchy of each element within that layer. Here elements can be rearranged to adjust the visual stacking order of the result (use Command-[ and Command-] to bring an item forward or push it back).

On the right side of the palette you should see a circle next to a colored square. Clicking on the circle allows you to easily select an element. Click on the layer’s circle to select everything within the layer or an individual element’s circle to select only that item.

The colored square indicates the color of that layer. For convenience, the bounding box and other pop-up graphics are color-coded based on layers, that way when you select something you can instantly see which layer it is belongs to. To move an item from one layer to another, simply click and drag its little square.

The Pathfinder is Awesome

Let’s face it, drawing on a computer is hard. Even simple shapes can be difficult to create if you’re not a master of the Pen Tool. As with most professional vector software, Illustrator makes creating complex shapes much easier through the use of boolean operations found in the Pathfinder palette.

The little previews on the Pathfinder buttons are pretty self explanatory. They all essentially allow you to combine two shapes in an interesting way. When you first use Ai you might be tempted to think that this is a novelty feature that you’ll never use, but trust me, if you’re going to be doing illustration, putting the Pathfinder to work will save you loads of time.

A little bit of creativity goes a long way and once you can learn to see the simple shapes that make up complex objects, the Pathfinder will be your best friend.

Shape Builder

If you have CS5, Illustrator gives you another way to perform complex boolean operations. The Shape Builder Tool (Shift+M) allows you to simply click and drag through overlapping objects to combine them.

Try holding down the Option key to subtract geometry rather than add it. Check out a video tutorial on the new Shape Builder tool here.

Artboards, Not Pages

For over a decade Illustrator users have mourned the fact that it’s impossible to create multi-page documents. Adobe intentionally keeps multi-page projects as a key feature of InDesign though so there wasn’t much hope for a solution.

Recently though, the problem was solved in an interesting way by allowing users to create multiple artboards. These can be used in any number of ways: separate ideas for the same project, designing both the front and back of an object, etc.

You can create as many artboards as you want in a single document. They can even be different sizes. Functionally, there are a lot of benefits to using multiple artboards within a single document instead of simply creating multiple documents. You can easily move/copy objects back and forth and print or export selected artboards all at once.

Effects Are Weird

In place of “filters” like in Photoshop, Illustrator gives you various “Effects” that can be used to manipulate your artwork, and they take some getting used to. To see what I mean, let’s use one. Below I have some text that’s been converted to outlines and I want to give it some perspective. As I mentioned above, the bounding box doesn’t give me this freedom so I went to Effects>Distort & Transform>Free Distort.

Now, when I apply the tranformation, things get a little wonky. The effect can clearly be seen on my text, but when I select the object, all of my points are still in their original positions and don’t reflect my current artwork at all.

This is because the transformation isn’t actually applied in a permanent way. Instead of actually messing with the shape of your object, effects are applied “live”. This is actually a great thing because it means that you always retain the integrity of your original object and can go back and edit the effect at any time.

To edit the effect, select your object and bring up your appearance palette. There should be a little “fx” icon somewhere with the name of the effect that you applied. Simply double click that icon to edit it or drag it to the trash to delete it.

Photoshop Effects

You may have noticed that there is actually a set of Photoshop effects available inside of Illustrator. These can be fun to play with, but in all honesty I’d recommend using them sparingly, if at all. Illustrator effects are built for vectors and use mathematical calculations to adapt to changes in the artwork, Photoshop effects are raster and therefore not as reliable when attempting to apply them in a vector-driven workspace.

The Eyedropper Does a Lot

Inside of Photoshop, the Eyedropper tool grabs a color from your document or screen… that’s it. In Illustrator however, the tool is much more powerful. Here are a few things you can do with it.

Grab A Color from Another Item
This one you know about. Select one object, eyedropper another, the color of the second object will be applied to the first.

Example: Select red box, Eyedropper blue box, both boxes will now be blue.

Apply The Selected Object’s Color Elsewhere
An alternate way to use the Eyedropper tool is to select the object whose color you want to replicate elsewhere, then hold down the Option key and click on anything else that you want to give that color to.

Example: Select red box, Option-Click on blue box, both boxes will now be red.

Grab The Styling From Text and Other Objects
Illustrator’s Eyedropper tool not only grabs color but style as well. You can use it to make two text objects have identical fonts, color and size or to grab the stroke from a shape object.

Example 1: Select red Futura 12pt text, Eyedropper blue Helvetica 15pt text, both objects become blue Helvetica 15pt text.

Example 2: Select a white box with a black stroke, Eyedropper a blue box with a yellow stroke, both boxes become blue with yellow strokes.

Tip: hold down shift to only grab the foreground color of an object.

Fonts Make Sharing Files Difficult

When I pass a Photoshop document off to someone, no matter what fonts are used, they can actually open it up and see what the original design looked like. Without the fonts, they can’t edit the text, but they can at least view it.

In Illustrator this is not the case. If you create a piece of art for someone and send it along to them, if there are uncommon fonts used, odds are that person won’t be able to view your .ai file correctly (they’ll see the wrong fonts).

In practice, most people just send along the fonts, but this could be a poor choice for several reasons. First, font licensing is complicated and you’re technically not supposed to just give your expensive fonts to everyone who wants to see your file.

Also, it’s often the case that someone such as a commercial printer requests your files but you don’t really want them changing anything. In both of these cases you can save yourself a lot of trouble by going to Type>Create Outlines (Command-Shift-O). This essentially turns your text into vector shapes and therefore eliminates any font issues and takes away the viewer’s ability to change the text.

Alternatively, you could save the document as a PDF and share it that way. Many clients will request the “original layered files”, in which case a PDF won’t suffice, but if the person doesn’t care about file formats then PDF is the way to go.

Dealing with Missing Fonts

If you’re on the other end of this discussion and receive a file with missing fonts, there is little you can do to fix it. However, Illustrator does make it easy to target specific missing fonts and replace them throughout a document with something from your system. This is done in the Type>Find Font dialog.

Useful Keyboard Shortcuts

To finish off our Illustrator basics discussion, you should familiarize yourself with how to get around the interface quickly and smoothly using keyboard shortcuts. Obviously, hovering over any tool will show you the equivalent shortcut, so here are some other useful tricks you may not know. Many of these are right out of Photoshop so you should feel right at home.

I’ll just throw in the Mac shortcuts here. PC users should just know that ⌘ (Command) = Control and ⌥ (Option) = Alt.

Zooming

• Zoom In/Out: ⌘+ or ⌘-
• Fit Artboard to Screen: ⌘0
• Zoom to Actual Size: ⌘1

Temporary Tool Switching

• Temporary Hand Tool: Hold Space from any tool
• Temporary Selection Tool: Hold ⌘ from any Tool (gives you Direct Selection if already in Selection Tool)
• Temporary Zoom Tool: Hold ⌘Space from any Tool

Pasting

• Paste In Front: ⌘F
• Paste In Back: ⌘B
• Paste In Place: ⌘⇧V

Working with Objects

• Duplicate an Object: Hold ⌥ while dragging
• Group Objects: ⌘G
• Ungroup Objects: ⌘⇧G
• Bring to Front: ⌘⇧]
• Send to Back: ⌘⇧[
• Select All on Active Artboard Only: ⌘⌥A
• Lock Selection: ⌘2, ⌘⌥2 to unlock all
• Hide Selection: ⌘3, ⌘⌥3 to show all

Other

• Check Spelling: ⌘I
• Show Grid: ⌘”
• Make Guides: ⌘5 (select a shape first)

Conclusion

I hope the ten tips above have encouraged you to give Illustrator another look. It’s a complicated application but it can’t be beat for vector work and once you get the hang of how it’s different from Photoshop, everything starts to make sense.

Leave a comment below and tell us any great Illustrator tips that come to mind. What did you struggle with when you first picked up this application? What do you still struggle with?

So what sets you apart from the pros? Why are their final results so believable while yours reek of Photoshop? The simple answer is that they know more tricks than you! Let’s fix that.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Problem

The situation is typical, you have some graphics and a photograph and you want to put the two together. You start by grabbing a photograph. Like the example below, photographs of real objects often don’t contain perfectly smooth surfaces and textures.

From here you create some text, then scale and rotate it into place. At this point, your composition isn’t looking very believable.

The text is obviously just placed on top, there’s really no illusion that it’s actually printed onto the shirt, which is what we’re going for. Printed text would capture the light from the room, the texture of the shirt and the folds of the fabric.

The typical first step is to reduce the opacity of the text layer. This helps a little, some of the background is now bleeding through. The illusion is still fairly week though and not exactly anything to brag about.

The level of realism is still lacking. A simple drop in opacity does nothing towards our goal of curving that text to make it look like it’s wrapping around the wrinkles. The end result should look much more like this:

Notice how the “h” isn’t just letting the wrinkle show through, the shape of the letter is actually distorted to mirror the wrinkle. The bleed of the shirt through the letters is also much more believable than a simple opacity reduction.

So how do you achieve this effect and how long will it take? It turns out you can do it quite easily with Photoshop in a matter of minutes. Let’s see how with a new, more extreme example.

Bricks and Smiles

To start off our project, I created a simple smiley face graphic in Illustrator and threw it onto the picture below from photographer Stuart Crawford.

Again, the goal here is to make the graphic look like it’s actually a part of the scene. I chose the wall image because it makes this task quite difficult. There are lots of deep crevices and the pattern itself is quite inconsistent due to the aged, broken nature of the bricks. The trick to doing this without lots of work is the Displace filter.

Creating a Displacement Map

Using the Displace filter requires two integral elements: the document that you want to manipulate and the displacement map. Basically, you use the displacement map in a similar fashion to how you would use a layer mask, with black and white values each having a specific meaning.

With a layer mask, white values create opaque pixels and black values create transparent pixels. A displacement map is a bit more complex. In my own experimentation, 60% appears to be neutral (you would think 50%), while anything lighter than that displaces up and anything darker displaces down.

If this seems confusing, don’t worry, it’ll all make sense when we apply a displacement map to our image. If you look at the image of the brick wall again, you might be tempted to think that it would take forever to build a displacement map that mirrors all of that texture. However, we can actually use a modified version of the bricks to displace our graphics.

To accomplish this, first make sure only the brick layer is showing. Then go into your channels palette and find the channel with the most contrast. In our case, the red channel. Now create a copy this channel.

Now, right-click on your recently copied channel and choose “Duplicate.” I know we already created one copy but our end goal is to create a new document from this channel. Choosing the “Duplicate” command brings up the dialog below where we can tell Photoshop to turn this channel into a new document. Make sure you match the settings shown below and then hit “OK.”

Once you’ve got the black and white brick image as a new document, add a Gaussian blur. This may sound a bit strange but in the end it will help. I’m working with a really large image so I cranked my blur, but you’ll likely only need to hit around 1px if you’re working with a small document.

Applying a Displacement Map

That’s all we need to do to create our map! You could work on the contrast a bit more if your image lacks definition, but ours should work pretty well as is.

Save and close the map as it’s own PSD then switch back over to your original bricks doc with the smiley face. Now select the smiley face layer and go to Filter>Distort>Displace. The following dialog should pop up. The default settings should work fine so hit “OK” and then a file select menu will pop up. Choose the BrickMap.psd file you created earlier.

At this point, you should see the distortion effect. However, it might not initially look like we’ve done a very good job. We went from a clean smiley to a sloppy smiley, neither of which look like they’re on the wall! If you take a closer look though, you can see that the distortions do map pretty well to the bricks.

To make the effect more believable, you’ll have to experiment a little with blending modes. Which will work best depends entirely on the actual content you’re working with. Overlay, Screen, Multiply, and Color Dodge are good places to start. For my white graphic and dark background, Color Dodge at 80% fill gives a pretty decent result.

See how the graphic is much more believably a part of the scene now? The dips and curves create the illusion of depth and go far beyond simply reducing a layer’s opacity. Speaking of which, notice how I reduced the fill of the layer, not the opacity. Oddly enough, you get much better results when working with blending modes if you reduce a layer’s fill.

Going Further

There’s always more that you can do to push the believability of a composition even further. For instance, with my scene, the Color Dodge filter is creating some pretty crazy highlights that simply don’t look realistic. Also, I don’t think enough of the brick is showing through.

To battle this, I command-clicked on that brick channel that we made earlier to create a selection from it. Then I applied the selection as a mask to smiley face layer. This went a little too far so I duplicated the smiley layer and set the fill for both at 80%. Here’s the result:

Optionally, if you want to grunge it up a little more. You can create a Soft Light layer filled with 50% gray (neutral to this blending mode) and masked to the face layer. Then grab a soft brush and paint areas of black and white to add contrast to the composition. I also threw in a slight blur so my edges weren’t so crisp.

To really get a feel for how well this technique works, I encourage you to experiment on your own with different settings, blending modes, layer effects etc. The displacement filter really does take a whole lot of work out of creating textured compositions. Check out the impressive distortion that resulted when I applied a flag graphic to the same brick wall using the techniques above.

If I would’ve attempted this level of distortion manually, it would’ve taken me hours to achieve a result half as good. With Displace, this took under a minute!

Conclusion

To sum up, any time you’re combining flat graphics with a realistic texture, you’re going to run into some problems with realism. Displacement maps are one of the most powerful tools in your arsenal to help solve these issues because they can quickly and easily apply the distortions of the texture to the graphic.

Never stop there though. Always go further and tweak away at your image by manipulating the highlights, messing up clean edges, exploring new blending modes and anything else you can think of to make the final image mirror reality. Even if each change only makes the slightest different, they’ll start to add up and the result will be an impressive composition.

Today we’ll look at a number of the best tools available for making color adjustments, adjusting focus, enlarging images, transforming layers in 3D, reducing noise, creating textures, applying complex masks, and even taking that PSD into full-blown HTML.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Color and Exposure

Exposure 3

“Over 500 analog techniques and organic looks are back like cross processing, Polaroid and vintage Daguerreotype. There is careful research under the hood, but the controls are simple so you can focus on the creative choices. The result is a photo that looks like it was made by a human, not a computer.”

Price: $249.00

PhotoTune 3

“Great color, it’s not as hard as you think. If you can compare images side-by-side and pick the best one, then you can easily color correct and enhance your images with PhotoTune 3. Additionally, PhotoTune 3 improves the color and sharpness of your image without the need to know how to use levels or curves in Photoshop.”

Price: $159.95

Kubota Artistic Tools Viva La Vintage

“Add some new fun to your images with these Kubota Actions inspired by vintage looks your clients will love! These classic effects are wildly popular around the industry and in high demand from photographers and their clients. ”

Price: $109.00

Topaz Adjust

“Quickly and easily make your photos stunning by using Topaz Adjust’s creative exposure, powerful detail enhancement, and unique color manipulation tools.”

Price: $49.99

Focus Enhancement

Bokeh 2

“Bokeh 2 provides a wide range of creative focus effects and accurate lens simulation in a simple interface. Photographers use Bokeh to draw attention to their subject by manipulating focus, vignette, and depth of field. Bokeh gives you the visual language of specialized lenses without the expense or hassle. Just drop a focus region over your subject and choose a preset or easily craft your own look.”

Price: $199.99

FocalBlade

“FocalBlade effectively sharpens photos for display and print, reduces noise and produces great looking blur, soft focus and special effects. FocalBlade is ideal for sharpening and enhancing all kinds of photo, e.g. snapshots, landscapes photos, portraits as well as high-ISO shots, because it effectively sharpens and reduces noise at the same time.”

Price: $69.95

DOF Pro

“Naturally occurring depth of field has extremely complex optical characteristics. It cannot be simply simulated through the use of a standard blur filter. Lens size, subject distance, aperture shape, lens curvature, film grain, spherical aberration, chromatic aberration, lens asymmetry, transparency, light refraction, motion blur and much more must be taken into account in order to achieve an accurate and convincing depth of field effect. DOF PRO carefully takes into consideration all of these aspects in order to produce the highest quality depth of field output possible.”

Price: $99.99

Enlargement

Blow Up 2

“Blow Up 2 is a Photoshop plug-in that produces enlargements dramatically sharper than any other software, especially Photoshop! Blow Up uses an innovative algorithm that temporarily converts pixels to a vector representation which results in perfectly smooth, crisp edges. Simulated texture and film grain keep photos looking natural even in extreme enlargements. Blow Up can even clean up JPEG compression artifacts when a client insists on using a low quality source image from the Web.”

Price: $249.00

Perfect Resize

“Perfect Resize (formerly known as Genuine Fractals) is the industry standard for enlarging and resizing images. It is renowned across the photographic and printing industries for its ability to increase image size without the loss of sharpness or detail that you might normally expect. The patented, fractal-based interpolation algorithms work like nothing else and the results speak for themselves.”

Price: $199.95

3D Transformations

3D Invigorator

“3D Invigorator for Adobe Photoshop allows you to easily create complex 3D objects, logos and text. Import a vector object or create a simple object inside the Photoshop plugin. Add lighting to make the object look more real. Then drag-and-drop 3D materials to make the object look transparent, reflective, or just plain cool. This 3D Photoshop plugin opens up a new world of creating 3D objects and text.”

Price: $199.00

AV Bros. Page Curl Pro

AV Bros. Page Curl Pro 2.2 is an extremely powerful and high quality Photoshop plugin, which will definitely boost your productivity and creativity. This Photoshop filter lets you not only bend the image, using two types of bending (curling and folding), but also texturize it (using the bump maps), orient it in 3D space (including the perspective distortions) and obtain total control over the process of lighting the image (including the option of dropping inner shadows). All this is possible thanks to the all new and unrivalled engine of this plug-in.

Price: $49.95

3DECovers

“Create dazzling ecovers that virtually jump from the screen into the prospect’s lap…giving them a level of ultra-realism and incredible detail they can almost touch with their fingers. There’s no huge learning curve, no monster manual to memorize, and no long list of prerequisite software. All you need is Adobe Photoshop–that’s it!”

Price: $97.00

Noise Reduction

Noiseware

“Noiseware is a high-performance noise suppression software tool designed to decrease or eliminate noise from digital photo or scanned images. Unlike most image processing software techniques that utilize simple methods (such as median filters) to treat digital noise in images, Noiseware features a sophisticated yet fast noise filtering algorithm. Using the adaptive noise profile capability and sharpening function, Noiseware greatly reduces the visible noise while keeping the details in the images. ”

Price: $49.95

Neat Image

“Neat Image is an image filter to reduce noise and grain in photographic images produced by digital cameras and scanners. Neat Image is indispensable in low-light (indoors, night, no-flash, astro) and high-speed (sport, action, children) photography.”

Price: $79.90

Texture Creation

Texture Anarchy

“Texture Anarchy is a set of Adobe Photoshop filters for creating textures and borders. With these three Photoshop texture filters, you can create a variety of seamless, infinite textures that range from realistic and organic to design-appropriate. Plain old math is used to generate, extend, and output an image.”

Price: $129

Machine Wash Deluxe

“Finally you can create professional quality image texture, aging and weathering effects with our Machine Wash Image Filters! This closely guarded secret of the design industry can now be yours!”

Price: $99.00

Filter Forge

“Filter Forge is a high-end Photoshop plugin that lets novice and expert users create a wide variety of realistic and abstract textures and effects. It’s a must-have for any digital artist – 3D modeller, photographer, web designer and scrapbooker alike.”

Price: $166.00

Kubota Texture Tools Industrial Pak

“You’ve never seen anything like the 50 textures you’ll find in our new ‘Industrial’ pak. Far from subtle, these striking looks give you the ability to add an element of techno-industrial style that will make your images snap! Edgy looks from textures like ‘Cobalt’, ‘Fingernails’ and ‘Lead’ bring a sharp, eye-catching look while ‘Radon’, ‘Polonium’ and ‘Zinc’ will give you that final touch, grunge-look that seniors are begging for in their portrait shoots.”

Price: $149.00

Masking

Mask Pro

“For removing unwanted backgrounds, Mask Pro is the Photoshop plugin recommended by Advanced Photoshop magazine. Mask Pro allows you to cut out a subject from the background by assigning keep and drop colors and simply painting away the background. Mask Pro makes it easy to create masks, selections and clipping paths on difficult subjects like hair, glass and fog all in real-time.”

Price: $159.95

Fluid Mask 3

“Take masking to the next level with Fluid Mask 3. The professional choice for quality masking, Fluid Mask 3 is industry recognised for excellence. Quick to pick up and intuitive to use – gets professional results fast.”

Price: $149.00

EZ Mask

“EZ Mask is an easy to use interactive image masking tool capable of extracting almost any object in an image–even if you are dealing with fine hair detail, smoke, or reflections. This extraction process creates what is known as a mask–essentially a black and white cutout. White mask areas are extracted, black areas not, and gray areas in between represent a level of transparency. Once a mask is extracted, the foreground object can be seamlessly composed onto a new background in Adobe Photoshop as well as apply filter and image corrections only within the area defined by the mask.” Also check out Power Mask from the same developer.

Price: $150.00

Web Design

SiteGrinder

“If you know Photoshop then you already know enough to start creating web pages for yourself and your clients. With SiteGrinder there is no longer a requirement to slice up your web design and send it off to a developer to convert your design from Photoshop to HTML / XHTML and CSS. SiteGrinder does all of that tedious work for you. Your Photoshop web design is output just the way you envisioned it – resulting in a full functioning website.”

Price: $397.00

Divine

“Divine suggests easy steps to convert Photoshop to WordPress theme that any of you can carry out. Yes, that’s right – you need no special extended knowledge about HTML, no special skills in coding, basics are completely enough to convert PSD to WordPress. You’ll find all necessary information about converting Photoshop to WordPress at our site. ”

Price: Free (Still in beta, Windows only)

Miscellaneous

DiskFonts

Browse and install uninstalled fonts right from Photoshop.

Price: $29

ColoRotate

“Fully Mac and Windows compatible with Adobe Photoshop CS4 or newer. The ColoRotate 3D color editor plugin for Adobe Photoshop CS4 is intended to give you another way to edit colors — intuitively and effectively. The magic of ColoRotate is that your colors are displayed and edited in three dimensions, the same way your brain naturally understands colors. ”

Price: $9

What Are Your Favorite Plugins?

There are a few plugins from the list above that I simply love using. For example, Machine Wash is unrivaled for creating awesome grunge effects; I’ve never used anything else that even comes close. Also, Page Curl is a great tool that I used daily back when I in print design and constantly creating product mockups.

Leave a comment below and let us know what your favorite Photoshop plugins are and why you can’t live without them!

The next time you’re faced with the task of designing an interface, why not learn from those who have already succeeded? Below we’ll take a look at the interfaces of ten beautiful and fairly new Mac applications and discuss what went right.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Wunderlist

The wizards at 6Wunderkinder are quietly taking over the productivity app industry with a killer combination: great design, simple functionality and an unbeatable price tag (free). Both their iPhone and desktop app look just excellent.

The key to the awesomeness of the Wunderlist interface is something extremely simple that we just don’t see enough of in Mac application interfaces: customization. Wunderlist comes built in with a whole bunch of gorgeous backgrounds like the wooden one shown above. Since the UI elements are actually fairly minimal, swapping out the background changes the entire personality of the application!

Why spend hours scratching your head wondering what your users will like the most when you know that every user is different? Providing your users with a number of equally attractive but very different options is a solid way to increase customer satisfaction. One important hint: make sure it’s easy to switch between the options. As a rule of thumb, if you have to write a tutorial on how to do it, it’s too complex. Wunderlist simply provides a row of icons at the bottom of the window. When you click on one, the background changes. It’s that simple.

The one killer feature that I think would make this even better is if users could use their own images as a background. Sure, plenty of your users will choose something hideous but there will also be a ton of users who come up with something that’s actually better than the built-in options.

I’m making a prediction that lots of developers will follow in the footsteps of 6Wunderkinder and begin offering users the ability to personalize their application interfaces to fit their unique personalities.

Reeder

Reeder for Mac is making a big splash in the Mac design community. Most of us have used NetNewsWire for ages and are definitely sick of the stagnant and boring interface. By contrast, Reeder is a breath of fresh air offering a notably clean and non-cluttered looking interface for an RSS reader.

The awesome thing about Reeder is that it represents another growing trend you can expect to see on the rise in the next few years: Apple iOS design on the desktop (Reeder began life on iOS). The iPhone lit a wildfire under interface developers who began churning out buttery smooth interfaces unlike anything we’d ever seen. This fire has recently been lit anew with the arrival of the iPad and innovative new interactive experiences like Flipboard.

Gradually, we’ve been seeing these design trends trickle back to the Mac. Even Apple has realized the benefits of iOS-like interfaces and is incorporating many of these benefits into OS X Lion, the next major release of Apple’s legendary desktop operating system.

Sparrow

I hesitated to add Sparrow because it is quite controversial among designers. The reason for this is that it represents a shameless ripoff of the UI of another popular application: Tweetie for Mac.

On one side of this debate you have legitimate claims that Tweetie has been stagnant in development for quite a while now and will likely stay that way because of its acquisition by Twitter (who really just wanted the iPhone app). Designers on the other side claim that it’s pretty uncool to rip off another man’s interface no matter the circumstances.

Regardless of which side of the debate you’re on, Sparrow is an interesting example for one important reason. It took a format that we were used to in one category (Twitter apps) and sought to apply it in a completely different context (email). This type of thinking is a stellar source of innovation. Take a look at all the apps you use every day, now take a look at the competing apps in that category. Chances are, they’re all about the same because someone innovated the category and everyone else simply followed. If you want to create something truly different, ask yourself how you could take the concept of that app and fit it into the structure of an app from a different category. You might just revolutionize an entire category.

Kiwi 2

Though the functionality still doesn’t feel quite as smooth as Tweetie, Kiwi has to be one of the most attractive desktop Twitter clients on the market.

As with Wunderlist, the key element here is customization. Kiwi offers users a number of themes to choose from that radically alter the appearance of the application. Wunderlist takes the simple route and offers different backgrounds, but in Kiwi, everything in your stream changes. This includes the shape and color of the tweets, the background and the appearance of the icons. Even the functionality alters pretty dramatically from one theme to the next. For instance, one theme simply shows you a list of usernames and hides the actual tweets until you click on a user to see what they said.

The execution here is very important. Kiwi doesn’t require you to choose a specific theme or walk you through some advanced setup process. The app has all the default settings worked out for you. In fact, if you never poke around in the preferences menu, you could use Kiwi for quite a while before even finding the customization options. They’re not exactly hidden, power users will find them in the first place they think to look. However, users who want a simple experience aren’t being hit over the head with intimidating decisions that they’re not prepared to make.

The lesson here is that customization should be both simple and optional. Don’t force your users into it or they’ll close the app and turn elsewhere. Let your users love your app for what it is and work their way up to making it look how they want as they become more familiar with how everything works.

DaisyDisk

Daisy Disk is the most attractive hard drive storage visualization I’ve ever seen. The retro futuristic charts look so good you’ll want to print them and use them as office art.

The important question to ask here is whether or not you have to sacrifice usability in your quest for aesthetics. The crazy pie chart shown above looks quite complicated and is probably enough to scare away a lot of users. However, the implementation is actually quite solid. Next to the graph is a simple list showing the types of data on your hard drive and how much space is being eaten up by them. All the information you need is in this list. It’s simple, straightforward and easy to understand. The visualization is there for visual thinkers like us designers who are crazy enough to favor this representation over a list.

Most importantly, the two representations of the data are linked in an interactive way. When you hover your mouse over the “Applications” line item, that part of the chart begins to glow. So even if you don’t remotely understand the chart at first, it will suddenly begin to make sense as you hover over each item in the list and see how the proportion of glowing space relates to other sections.

The lesson here is that eye candy isn’t for everyone. If you want to set your application apart as the one with crazy beautiful visualizations, go for it. But don’t neglect the users who would rather use Excel than Photoshop. Make sure your attractive graphics have a strong foundation in easy-to-use controls and understandable communication methods.

Transmit 4

Transmit 4 is the latest update to the reigning patriarch of Mac FTP clients and represents one of the most significant aesthetic boosts to the application to date. I never thought I would drool over an FTP client but Transmit now has a ton of really nice screens, animations, buttons and more.

The most noticeable tactic used here is increased contrast. FTP clients are notably bright and white; every screen, every list of files, nothing but white and, if you’re lucky, a little gray and/or blue. The folks at Panic decided to tackle this monotony with a number of really beautiful dark screens for setting up servers, navigating favorites, etc.

The important lesson here is that they really didn’t mess with the meat of the app too much. The file lists are still on a white background and function just like they always have. Anyone familiar with FTP software will be able to pick the app up and run with it immediately. Any time you want to update a UI to give it some visual flair, don’t be afraid to be extremely choosey about what parts do and don’t get updated. If you’re working with a product made popular by its simple functionality, keep it that way. Instead, take the time to focus on all the little details that really polish off a UI and make it feel like a major step up from the competition.

Courier

Courier has to be the most beautiful tool on the planet for quickly sharing multimedia files using social media. Would I ever pay $20 for a Facebook image uploader? No way. Has this one made me seriously consider changing my mind? Yep.

The lesson here is one I’ve discussed countless times in a web design context: visual metaphors rock. The first thing RealMac did was focus on core functionality. They made sharing files to all kinds of networks at once a ridiculously easy task powered by the drag and drop experience Mac users know and love. With an unbeatable workflow in place (always make sure to focus on content first!), they were able to wrap the whole thing in a beautiful and appropriate theme: the daily mail. This takes a fairly technological task and brings it into a very real and familiar experience for the user. Suddenly the mundane task of uploading files looks and feels like a virtual mail-sending video game where you can choose what envelope you want to use and where to send it.

1Password

Open up Keychain Access on your Mac. This is a typical password manager, designed by none other than Apple inc. It’s quite usable but also quite boring. Now take a look at a very different visual approach to the same basic functionality in 1Password.

Quite the difference no? 1Password possesses a simply outstanding interface for managing your logins, passwords, form data, etc. I don’t know about you but this makes me question every single database application on my hard drive. Why has the norm become to make such plain presentations of database information? What if applications like Evernote (already one of the more attractive database apps out there) looked a little more like 1Password or Bento? Would that be so bad? I submit that it would not.

Great aesthetics don’t complicate usability, they improve it. Believe it or not, you can present tables, rows, cells and fields of information in a really attractive manner without adding so much superfluous fluff that it ruins the functionality. If you don’t believe me, download 1Password and give it a shot.

SweetFM

In contrast to all this discussion of adding visual interest to your your interfaces, SweetFM, a wonderfully simple Last.fm client, does the exact opposite. Just take a look at how compact and attractive it is!

Now, compare that screenshot you just saw to the official Last.fm client for Mac:

Admittedly, many people will like the official client better. It seems more robust and puts everything in front of you at once (a highly efficient approach). However, there’s definitely something to be said for drastic simplification. Back to a point that we made earlier, blindly following the UI conventions of a given category is no way to innovate. Sometimes you can snag a ton of users that no one else is targeting simply by stripping out everything but the absolute bare necessities. Take a page out of Chocomoko’s book, sometimes less really is more.

Cockpit

Cockpit is an awesome menu bar app that you can use to control all kinds of stuff on your Mac. It’s not only super functional though, it also happens to look pretty stellar.

In this case, I’m not sure where the developers are drawing their inspiration from. The typical textures are here: metal, glass and rubber. Yet, the iTunes controller above doesn’t look anything like iTunes and it sure as heck doesn’t look like any other menu bar app I’ve ever seen (it looks more like a Dashboard widget). There’s a lot to be said about drawing inspiration from all of the examples you’ve seen today, but always remember that there’s no substitute for blazing your own path and intentionally trying to be completely different than anything else you’ve seen before.

Pull up Photoshop, crank some music and spend a few hours dishing out ideas as they come to you. Instead of focusing on what’s been done elsewhere, try to discover what hasn’t been done and explore the possibilities with that goal in mind.

Conclusion

I hope the ten awesome applications above have both provided you with a few new apps for your Mac and taught you a thing or two about interface design. Mac developers and designers continually wow me with their ability to continually push the envelope for the level of beauty we expect from desktop applications. You guys are my heros.

Leave a comment below and let us know what you think of the interfaces above. Also be sure to point out any other new Mac apps you’ve come across that serve as an excellent example of UI design.

Today we’ll go over how to use one the many new features in Illustrator CS5: variable width strokes. With the new “Width Tool” you can make complex line shapes in seconds using only a few quick click and drag motions.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Variable Width Strokes: The Old Way

One of my favorite new features in Illustrator CS5 is the ability to control the width of a stroke at multiple points along a path. To understand why this is so great, let’s look at the old way of doing things.

With Illustrator CS4 and any of its predecessors, creating complex strokes involved defining custom brushes. So let’s say you wanted to create a stroke that started thick and ended thin. First, you would create a basic triangle that mirrored what you wanted your stroke to do. Then you would drag that shape to the brush palette and define the various settings for shading, direction, etc. Finally, you would then be able to draw and apply the brush.

Obviously, this multi-step procedure was a bit long and drawn out and therefore tended to make it easier to manually draw out complex lines as if they were shapes.

Variable Width Strokes: The New Way

To illustrate how the new “Width Tool” works in Illustrator CS5, let’s look at an example. Imagine you’re working on a set of eyes for a character you’re sketching out and you’ve got the basic shapes in place.

As you can see, the eyes are a little too rigid and lifeless. We need to bring in some thickness to help bring them to life. However, bringing in thickness in equal amounts doesn’t help make the eyes any more real than the thin strokes the already have. Instead, we need to add some variation to the widths of those lines to help give it that marker sketch look.

To begin, grab the Width Tool from your tool palette (Shift+W to activate it right away). Once you have the tool activated, simply click and drag anywhere in a stroke to change the width at that point.

Adobe did an excellent job of reducing the learning curve here to near nil. The tool works exactly like you’d expect: a click and drag controls the width at that point, drag in to reduce the line weight and drag out to increase it. The nice part is that the transitions are automatically nice and smooth so you don’t have to spend time fiddling with the curve (unfortunately, these automatic curves can get a bit sloppy looking at times).

All we have to improve our set of eyes is click on a few selective areas where we want to add a little variation.

With only a few clicks and a little arranging, our pair of eyes is looking much better. Creating this in CS4, though no highly skilled feat, would’ve still involved considerably more steps.

Specifying Specific Widths

Though it’s fun to just click and drag around to see the results you can come up with, occasionally you’ll want to be more precise. For instance, if you take a look at the eyebrows from the previous example, you’ll see that they end pretty abruptly on one side rather than coming to a point.

To fix this, we could zoom way in and try to reduce this a bit, but it’s hard to work with such a small area. A better option is to take the Width Tool and double click on the point at the end of the line. This will bring up the dialog seen below.

Here you can adjust the width of each side of the stroke. To get that line to come to a nice clean point, just set all the numbers to zero like I did above.

To get a better grasp of how these numbers in the dialog affect the shape of the line, consider the example below.

Here we’ve set Side 1 to extrude by two inches and Side 2 to extrude by one inch. This is great because it means that we can create complicated shapes that don’t have be uniform on each side.

Using Variable Width Profiles

Let’s say you’re creating an illustration like the set of eyes above where you’re going to want your strokes for multiple objects to be about the same. Rather than eyeballing it and hoping they’re close enough, you can setup Variable Width Profiles that automatically apply a given shape to a line.

Illustrator comes with a few presets that you can use right out of the box. However, it’ll be far more useful to create and save your own as you work.

To create your profiles, simply draw a line and adjust it the settings that you want the profile to duplicate. Next, hit the little save button at the bottom of the profile palette.

Now all you have to do to apply it is select a stroke that has already been converted to variable width, then click on the profile.

Functionality Tips

Now that we’ve gone over the ins and outs of using variable width strokes, we’ll finish up with a few tips to help make you a pro.

The Path Doesn’t Change

It’s important to note that as you apply variable width strokes, the nature of your path is staying exactly the same. Despite the fact that it might look and feel like you’re adding extra points to the path, you’re actually editing the stroke independent of the path.

To see what I mean, let’s look at both sets of eyes from before in outline mode (Command + Y). The top set is from before we added variable width strokes and the bottom set is after.

As you can see, the two are identical in both the number and placement of points.

Editing The Stroke Profile

Once you’ve taken the Width Tool and dragged out an area of a stroke, you’re not stuck with that transformation. Click and drag again in the same spot to readjust adjust the width at that point. You can also click and drag the point in the center to move it left and right along the path. This allows you to quickly tweak where the curves in the line lie. Finally, if you option-click and drag one of the transformation points, it will duplicate it so you can use the same transformation on multiple parts of the line.

Asymmetrical Strokes

We saw above how to use to use the dialog window to control both sides of the line, but you can also make these changes live right on the line. Simply hold down the option key while adjusting one side of the line to make the changes only affect that side. If you adjust the line width without holding the option key, all changes you make will be uniform across both sides.

Converting The Path To a Shape

If you want to convert the stroked path that you’ve made to an actual filled shape with points along the outer edge, click on “Object” in the menu bar and come down to “Expand Appearance.”

Remember that once you do this, it will be considerably more difficult to edit the shape. However, you will have more freedom over each point and curve. It’s a good practice to convert your strokes to outlines before you send off your artwork to a printer or anyone else that might attempt to scale or change it.

Conclusion

The information above should be enough to make you the master of your strokes. The best way to get a feel for how variable width strokes work is to just crack open Illustrator and start experimenting.

Leave a comment below and tell us what you think of the new variable width strokes in Illustrator CS5. Do you think they are useful enough to make it into your illustration workflow or is it just a neat feature that you can’t ever see yourself using?

Regardless of which camp you fall into, you should know that there are a lot of robust and powerful alternative CMS options that have been built from the ground up to help you manage the content on your site. Below you’ll find 50 content management systems perfect for designers, end users, churches, media sites and more!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

50 Powerful Content Management Systems

Zotonic, The Erlang CMS — Zotonic

Zotonic is a CMS. It is fast, easy to use and open source. Zotonic is the content management system for people that want a fast, extensible, flexible and complete system for dynamic web sites. It is built from the ground up with rich internet applications and web publishing in mind.

DeployCMS – effortless Web CMS and site management.

Whether you’re a code guru, a designer, or both; DeployCMS can help you build a better website, every time.

SilverStripe.org – Open Source CMS / Framework

ur CMS is fast, flexible, and FREE. It’s designed for people who edit website content. Find out more, watch a video overview for content editors, or try it out yourself with our online demo.

Plone CMS: Open Source Content Management

Plone is among the top 2% of all open source projects worldwide, with 340 core developers and more than 300 solution providers in 57 countries.

Pods CMS Framework

Pods is a CMS framework that lets you add and display your own content types. Unlike WP custom post types, each content type gets its own table.

HiFi CMS (Coming Soon)

A website is conceived with specific purposes and goals. Usually it starts as a design. That design is then transformed into HTML, CSS and Javascript and placed on a Content Management System. The CMS is then handed over to the webmaster. How often does this final product match the original vision?

RuubikCMS – open source web content management

RuubikCMS is an open source website content management tool which is designed to be user-friendly for both the end-user and the webmaster.

GetSimple CMS

GetSimple is an open source CMS that utilizes the speed and convenience of XML, a best-in-class UI and the easiest learning curve of any simple Content Management System out there.

PyroCMS | The modular open-source CodeIgniter CMS

Lightweight, themeable and dynamic, PyroCMS is perfect for CodeIgniter developers to kickstart your projects.

Wolf CMS – Open Source Content Management System

It simplifies content management by offering an elegant user interface, flexible templating per page, simple user management and permissions, as well as the tools necessary for file management. Wolf CMS is a fork of Frog CMS, which was itself a PHP migration of the Ruby-on-Rails app, Radiant CMS.

Surreal CMS

Surreal CMS is a hosted content management system that was built for web designers. Manage all of your websites from one convenient location and give your clients access to safely edit their own content. Best of all, there’s absolutely nothing to download or install.

Simple CMS

A fully branded, easy to use content management system for your clients… all you do is add a little piece of code to your existing site.

PageLime – Simple CMS for Web Designers

Pagelime is a brandable CMS that lets your clients manage their content. No installation, no coding to integrate, and no wasted time. Just add the cms-editable CSS class to any HTML element on your site and Pagelime does the rest.

MojoMotor : The Publishing Engine that Does Less

The Publishing Engine that Does Less! MojoMotor is a simple publishing engine that lets you keep your site fresh.

LightCMS

Light CMS is the premier content management system (CMS) for web designers. Design web sites with HTML/CSS standards — our content management system gives you ultimate design flexibility. Empower your clients with easy-to-use tools. Plus, Light CMS helps you build your web design business with free reselling tools.

Croogo | Free, Open Source, CakePHP Powered CMS

Croogo is a free and open source content management system, built on top of CakePHP framework.

Unify

Unify is the simple content editor that anyone can use. 1-step installation…takes about 60 seconds. Define what can be edited simply by applying a class. Go to your website, login, and edit right on the page.

Adobe Business Catalyst

The complete online business platform for amazing websites and online stores has arrived. And it’s built for web designers like you.

Easy to Use CMS for Designers

TypeRoom is uniquely suited to edit static websites that have already been built by users who have little to no technical skill.

Joomla!

Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available. Best of all, Joomla is an open source solution that is freely available to everyone.

Drupal

Equipped with a powerful blend of features, Drupal supports a variety of websites ranging from personal weblogs to large community-driven websites.

Alfresco

Alfresco reduces your ECM costs by up to 96% compared to proprietary systems like Documentum, Open Text and SharePoint. It’s as simple to use as a shared drive or SharePoint and does not lock you in to a proprietary stack.

Pligg CMS | Open Source Content Management System

Pligg is an open source CMS (Content Management System) that you can download and use for free. Pligg CMS provides social publishing software that encourages visitors to register on your website so that they can submit content and connect with other users. Our software creates websites where stories are created and voted on by members, not website editors. Use Pligg content management system to start your own social publishing community in minutes.

ExpressionEngine – Publish Your Universe!

You can tell a lot about a product by the company it keeps. Discover why so many top web professionals choose ExpressionEngine as the de-facto publishing platform for their clients’ sites. ExpressionEngine’s proven capability, combined with its world-class support, is a recipe for online success!

Ekklesia 360 : Church Content Management System

Ekklesia 360 is the next generation Content Management System. Learn how we can deliver more than a website, we help ministries and churches do ministry online.

Radiant CMS

Radiant is a no-fluff, open source content management system designed for small teams.

Frog CMS – Content Management Simplified

Frog CMS simplifies content management by offering an elegant user interface, flexible templating per page, simple user management and permissions, as well as the tools necessary for file management. Born as phpRadiant in January 2007, Frog CMS is a PHP version of Radiant CMS, a well known Ruby on Rails application.

Symphony. An open source CMS.

XSLT-powered open source content management system. Gives designers and developers complete control over data structures, URL schemas, and every bit of markup.

Free and simple CMS » CushyCMS

Finally, a free and truly simple CMS. Allow clients to safely edit content. No software to install, no programming required.

Auctori | Web CMS Made For SEO

Creating your website in Auctori is taking the first step toward taking back control of your website. No longer will you have to rely on web developers or designers to make every little update to your website. Once you have logged into Auctori, you will be able to add to and change your website dynamically.

Flash Website CMS | MotoCMS

Moto CMS is an advanced Flash content management system that allows you to create attractive, functional and SEO- friendly Flash websites.

Tweak CMS for Resellers – Home

Tweak lets you define your own CMS plans and set prices your clients can afford. Charge as little as $10/month.

Contao Open Source CMS

Contao is an open source content management system (CMS) for people who want a professional internet presence that is easy to maintain. The state-of-the-art structure of the system offers a high security standard and allows you to develop search engine friendly websites that are also accessible for people with disabilities.

CMS for Web Designers – Subdreamer

Introducing a CMS for web designers, you design and Subdreamer will do the rest. A beautiful, easy to use, and 100% rebrandable CMS that just works perfectly.

Twilight CMS

Give your business a powerful, content-managed website at an affordable price. Strata Technology’s «Twilight CMS» features an easy-to-use, Windows-inspired interface that allows even technical novices to update and maintain complex sites.

Vivvo :: News Content Management System

VIVVO is news Content Management System atop a powerful framework, empowering thousands of industry leading online newspapers, magazines, portals and media publishers.

Textpattern CMS

With a browser-based interface in over 40 languages, excellent support and full range of features, it’s no wonder that publishers, designers and developers everywhere choose Textpattern.

Mura CMS – Open Source ColdFusion CMS

Mura CMS is built with one focused purpose in mind – to make it easier and faster for people to build and update websites. Whether it’s something as simple as adding a news release or as complex as integrating website data with an enterprise CRM system, Mura CMS provides a clear and complete toolkit.

Hotaru CMS – Open Source Plugin-Powered CMS Engine

Hotaru CMS is an open source, PHP platform for building your own websites. With flexible plugins and themes, you can make any site you like.

sNews – Lightweight Content Management System

sNews is a completely free, standards compliant, PHP and MySQL driven Content Management System. sNews is extremely lightweight, simple and customizable. It’s easy to install, and easy to use via a simple web interface. sNews consists of only one core engine file, one independent template file and its accompanying CSS stylesheet file, plus an .htaccess file that makes all URLs search engine friendly.

Umbraco – The Friendly CMS

Umbraco makes it quick, easy and fun to develop web applications. Consider the screenshot above. It shows how to create a blog post in a User Control using the umbraco API and Visual Studio. “What’s special about that?” you might think. But take a closer look.

Magnolia

Magnolia powers the websites of government as well as leading Fortune 500 enterprises in more than 100 countries.

SkyBlueCanvas

SkyBlueCanvas is an easy-to-use Web Content Management System, that makes it simple to keep the content of your site fresh. You simply upload the software to your web server, and you are ready to start adding text and pictures to your web site.

Zimplit CMS

The easiest Open Source Content Management System for small web- and minisites.

CMS

Jojo is a PHP-based free CMS for web developers wanting to build good websites. We like sites that are fast, standards compliant, easy to manage, search engine friendly and design flexible.

Traffik

A CMS for designers, built for business. The perfect union of artistic freedom and in depth marketing intelligence, Traffik content management system empowers your entire team to exce

Refinery CMS

Refinery is an easy way to manage your custom website. And when we say easy, we mean it.

Shopify — Create Your Online Store

You get your own online store, you can accept credit cards, use your own domain, customize your store’s design and we host everything for you.

Ellington | Home

From small news and media organizations to widespread content networks, Ellington’s advanced CMS and UGC tools give you everything you need to immerse your audience in a rich, socially-aware, multi-media experience — on the web and on the go.

Simple, Customized Website Management – Reflect

Introducing Reflect — a hosted website solution that allows web designers and their clients to easily create and manage websites. Through a seamless content management system, Reflect bridges the gap between the high costs of a custom solution and the low customization of an off-the-shelf system. Reflect is the better, easier and simpler way to launch and manage websites.

Enso CMS

Enso CMS is a brand new approach to website content management. Built specifically for web designers, there’s no software to install and no complex coding required. It simply combines your great design with an easy-to-use CMS your clients will love.

How Do You Manage Your Content?

There are a million content management systems available online. Some are completely free and open source and others offer monthly service plans. With all these options available, it’s hard to know where to turn.

This is where you come in. Leave a comment below and let us know what CMS you use and why. Also be sure to tell us about those that you’ve tried and hated!