So, number one, I just thought that was cute, and I hope it made you smile – very gumby-esque (or bob the builder-esque for you new schoolers). But number two, I wanted to remind you that great work can be done with some very light lifting.

It’s not really a huge thing, but it is yet another resource to which you can point your customers to learn about tats. Venture over there sometime, participate in a poll, write a comment, or at least sign the guestbook.

Please take a look Squidoo.com/tat.

Squidoo is basically a free web page service. However, their focus is definitely on information. They really remind me of fan pages, but Squidoo well predates facebook fan pages. They also offer some really cool tools that you might not find everywhere else. In my opinion, Squidoo really shines because of it’s ease of creation. Each lens (their special name for page) is constructed with discreet and powerful modules which makes it very, very user-friendly – especially if those users are computer-allergic. Feel free to venture over there and make your first free Squidoo lens.

I’d like to extend a huge thank you to Ellyn, our recent superhero, for putting this up for us. (Make sure to comment on her Wednesday Spotlight this week.)

Recently they launched their newest tool called Talon. Talon is not as amazing as some of their other tools, but what it lacks in razzle-dazzle it makes up for with handy. Talon’s function is screen-capture markup, and it is very, very good at it. It allows you to take a screenshot of any webpage, and then write all over it, circle things on it, highlight it, draw stick figures, and then produce that for email or whatever you would like.

I thought this would be a valuable tool for this crowd because, the process of taking screenshots and produce them into usable jpg’s has come up on this blog several times, so I thought it would be a great accessible app. Also, it’s a great way to be precise when communicating with your design guy if you have someone who handles your webpage for you. Check out their handy firefox extension which takes Talon everywhere with you on the web.

This process hinges on one trick which you may or may not use currently. It is something the GIMP calls “alpha to selection.” This technique selects everything that is not transparent and can help us a lot when we are coloring designs because anything that is not selected will not be filled while we use our paint brushes or buckets.

So the first thing to do is to go get the design you will be working with off the web at TatStore.com. I believe that I’ve instructed on this topic before but if you have forgotten simply find the stencil you would like and enlarge it to the maximum size by clicking it. Once there, right click the image and select either “Save Image As…” or “Save Picture As…” depending on your browser. All we are doing here is downloading the picture on to your computer. Of course, if you already have a picture of the design on your hard drive there’s no reason to get another one. However you got it, open up the picture in your favorite graphic editor like Photoshop or GIMP, and we are ready to roll.

The first step is a bit unintuitive if you are not used to working in a graphic editor. Jpegs open as background layers which means that they don’t support transparency. So you need to double click the layer in photoshop or right click the layer in GIMP and add alpha layer. This will allow you to erase parts of the picture which then become transparent, you’ll know you haven’t done this step correctly if when you erase from the layer it becomes the background color instead of the checkerboard transparency which you should see.

Once all of the white is deleted from the original image you now have basically an inverted stencil. You can proceed in several ways from here, I will outline two. #1 you can set this layer to protected transparency which means that it will not let you paint over any transparent areas. That’s pretty nice. Alternatively you can select the non-transparent areas by pressing control and clicking the preview thumbnail of the layer in Photoshop, or in GIMP, right click the layer and select “alpha to selection.” Now as long as that selection is up you can paint it however you want and it will only paint in the selected area.

That’s great and all but to take it to the next level we are going to do some editing of our selections under the selection menu in either program.

First we lay down a black layer. Then, make a new layer and before you fill it with another color be sure to feather your selection somewhere in the forty or fifty pixel area. You can find that, as I said, under the selection menu. So now you should have a very murky looking picture with very very soft edges. So to clean those up reform the original selection through the same methods we used before and contract it somewhere in the 5 pixel range. This will be the width of the black border in the final product. Then invert your selection, once again in the selection menu, and delete what is now selected. You should end up with a black outline with a progressively softened inner color. For a more dramatic effect, add even another color or white on top of all three with an even stronger feather.

Here’s my example, I’ve also put it at our TatStore Blog Design Work pool on flickr. Feel free to join the pool, and upload your own. Also comment here with your attempts. If you have any problem getting your work to show up, be sure to email me and I’ll get it put up for you.

We’ve been working around with this series on non-destructive editing. Well, I think that we’ve been through about everything that I wanted to. I thought it would be a good idea to maybe give you a little pay-off for these techniques. So I downloaded one of the stencils on our website and just started to play around with it. I set out to make a custom coloring style, and I’ll show how I did that in my next blog entry, but then I started playing with the Photoshop layer styles, and the results were pretty interesting.

If you click the image above, and then click it again if you need to, you can enlarge it. My favorite is the translucent glass with my custom paint job although the slick chrome is pretty nifty too. Most of these were created simply by clicking the layer style that is listed under the picture with no changes. Some may have a slightly edited drop shadow or other incredibly minor tweaks, but most are entirely stock. By far, the most complicated image is the two gels + layer mask image. That is simply a red gel and a black gel layer on top of each other where I added a layer mask to the top layer such that you can see through it to the under layer in the spots where we wanted the second color. Imagine using these easy easy designs for your logo or even for flash whatever you want.

This example has not yet been integrated into the GIMP, but I hope soon will be. A layer style affects the content of the layer without polluting the content of the layer. For example, If I were to want to color text in photoshop with a gradient, it is just a matter of double clicking the layer, which brings up the layer style dialog, selecting gradient, and editing the settings. Then I can change it as many times as I want, change the text, add an additional pattern overlay, and add a bevel effect. Then, I can turn it all or any of it off, reverting back to the original image. If I were to do this in the gimp I would have to rasterize the text, and then apply the gradient. This is actually changing the layer and cannot be undone by anything except the clunky undo function. Try it, live it, love it.

Layer masks are a wonderful creation where you can selectively apply transparency to a layer. So while this may at first seem the same task as the eraser tool, you should not confuse them. Actually, if you want to get more work done faster at a higher quality, you should actually consider abandoning your eraser all together (I’ll explain more about that later). Layer masks should in most cases be considered as part of an existing layer, and for this reason all graphic editing software I have ever used display them side-by-side with the layer that they are affecting. There are a lot of ways to explain them, like that they are the opposite of an actual layer, but instead of losing everyone, I think I will just jump to showing you what they do.

I understand that the above is likely hard to read, thus it links to the full size picture of layer masks. I right clicked the layer in the layer manager which brought up the context menu where there is an option to “Add Layer Mask.” Based on your selection in the next dialog box, you will end up with a white or black or other box that looks like a layer, but it’s place conspicuously next to the layer you clicked. Simply click the layer mask preview, to switch to editing the layer mask, not it’s corresponding layer.

Now, in layer masks, black means transparent, and white means opaque. In other words, white means that you can see that area of it’s affected layer, and black sections are turned invisible much like if you erased them.

There are a lot of reasons why this is nice. One, you can use gradients from black to white and vise versa to make awesome fading effects like you can see demonstrated in the picture. This is actually a very common need for web designers, and layer masks are the optimal way to do it. Two, as the series suggests, they are non-destructive, this means that if you are either painting black with a brush of any type or using a gradient and you are not happy with any of your work, you can simply try it again and again until you get it perfect with no loss to the image because keep in mind that you are only editing the layer mask, not the layer it is attached to. Finally, layer masks, once finished can be applied to the layer which actually makes permanent any changes in transparency which actually simulates an eraser, but with a hundred times the precision and flexibility. Layer masks can usually be deleted, applied, added, and hidden all from a context menu when you right click them.

I have included the two final logos of a fictional florist, the top with the layer masks turned off, and the bottom with the layer masks turned on. You can see a big difference, but you might be saying to yourself that you could have done that with an eraser and other permanent tools. That’s true, but if you want to see the full benefit of layer masks, I have included the GIMP file for download and see what you can do by maybe turning my smooth line layer masks into gradients, or changing my linear gradients into radial or shaped ones. If you take a second to think about how much time and effort that will save you, you will fall in love, as I have.

With layer masks

Without layer masks

PupilsIris.xcf (GIMP)

Non-destructive editing, as the name implies, means editing that does not alter the original work. The payoff to us is that it is work that can be undone or change, and redone. The most basic delivery of non-destructive editing may be the simple addition of layers. Instead of drawing a black line directly on the digital image, forever obliterating those sacred pixels which once there resided, one might create a new layer and draw the black line on that which can now be removed, changed, or made invisible, all the while leaving the original image unaltered.

Here’s the rub though. Non-destructive editing takes more time, more finesse, and more creativity, than does its ruthless counterpart. Most of the time it’s not as reflexive as adding a new layer, nor as obvious. Take for example a simple size change. Objective: Remove red-eye from a digital portrait and downsize it to be sent quickly in an email. Once you have removed the red eye and you approach the home stretch it might be easy to simple go for the image size adjustment, save it the size you need and leave. However you would have perpetrated an enormous blunder. The proper procedure would be to edit the red-eye (hopefully with layers), save that project (layers and all), shrink, save as a copy, and then decline to save changes to the original. In this way, you have retained maximum raster data at minimal cost, in fact only the tiny bits of time, mental focus, and hard-drive space (for which prices are currently free-falling nearly through the floor). Now I would hope that the benefits are self-evident, but maybe are not convinced… What if you decide after all that you left a distracting and now illegible billboard blob in the background? What if you decide you made it too small to be printed at 5×7 size? Now these minimal costs seem like a bargain when your data is lost. Hopefully you saved the original, so you can repeat all your editing to get it just right. And this was an incredibly mundane example. Imagine your examples, your logo, your website, your business cards. Non-destructive editing should be a constant pursuit for anyone who works with pictures.

Fortunately for us, non-destructive editing is the way of the future. Things like layers, adjustment layers, layer masks, layer properties, blending options, layer styles, smart objects, and paths all make it easier to change your mind. So next image you are working on try to do one extra thing in a non-destructive way, and then make it two… It will change your editing world.

In my google reader assisted web roaming, I stumbled across a wonderful web suite of products under the umbrella Aviary. You can visit them at Aviary.com – I would strongly suggest doing so. Their offering includes four very trendy (yes, beta) programs called Peacock, Phoenix, Raven, and Toucan. In reverse order a swatch processor, a vector editor, a graphics editor, and an acid-esque adventure in image manipulation. I would encourage you to adventure throughout each program but I will here focus on the Phoenix and the newly launched Raven.

In addition to their incredibly original bird themed names [cough* Firefox (originally Phoenix, then renamed Firebird), Thunderbird, Sunbird, and Songbird, etc…], they have at least one major (and I do mean major) advantage over other comparable free products I have suggest on this blog: GIMP for image manipulation, and Inkscape for vector graphics. This advantage is that the Aviary suite is completely web-based. This means that you can use them, with identical functionality, on any computer in the world absolutely free. Not only that, but a web-app delivery method means that you have no complicated download. Just wait through a short load screen, and you are on your way, editing with some very powerful tools.

That is pretty much it for now. I would like to have a few tutorials on these programs in the future but for now take a minute to poke around and see what you think.