Convert RGB to Black and White

There is no one "right" way to convert color photographs from color to black and white. In fact there are tons of ways to do it, and they all have their advocates. If you want to see some other methods, I'd recommend taking a look at a tutorial at digital Photography School entitled How to Convert Color Digital Images into Black and White Ones, or at another one from GimpGuru.org entitled Converting Color Images to B&W using the GIMP. Both of these detail several different methods, all with their own merits.

I've been researching the subject quite a bit, and I think I've settled on a favorite method of my own, and I'm going to detail it for you now. We'll be using lessons learned in the last couple of posts on luminosity masking, so if you haven't read those yet, you might want to at least skim them to get the idea.

The photograph for today is another CC licensed shot, originally posted to flickr by user J. Star. Thank you J. for this truly amazing photograph.

Okay, let's get on with it.

1. The first thing we're going to do is decompose to LAB to get the luminosity layer, so click Image>Mode>Decompose. Select LAB, make sure decompose to layers is checked, and click OK.
   
   Discard the A and B layers, and just set that aside for a few minutes.
2. Go back to the original color shot and click Filters>Colors>Channel Mixer. Check both of the boxes for Monochrome and Preserve luminosity.
   
   You do not actually have to check the preserve luminosity box. What this box is supposed to do is make the sliders dynamically adjust so they all add up to 100%. I have not found this to be the case, but maybe I'm just doing it wrong. If anyone can shed some light on that subject, I'd be very appreciative. I recommend checking it anyway just to be sure.
3. Step three is highly subjective, and will probably differ from image to image, so use your judgement here and pick values that look good to you. I'm picking Red - 70, Green - 25, and Blue - 5. I'm doing this because there's obviously a lot of red, not much green and very little blue in this photograph.
   
4. You may at this point decide that you are finished. The channel mixer is a pretty powerful tool, and you can get very good results with it. I personally think the highlights on her back are a little too high, and the darkness on the back of his hand is a little too dark, so I'm going to use that luminosity layer to create some masks and adjust those areas a bit. Please see Monday's post on luminosity masking to get an idea on how to do that.
   

Here is the final result:

I hope you've enjoyed this tutorial. Please remember there are many many ways to convert photographs from color to black and white, and I highly encourage you to research the subject to find your method of choice. Thank you for following along.

Edit: I realize the EXIF data on the photograph says it was edited with Photoshop Elements 3.0. I assure you that was done by the original artist. All the work done in this tutorial is done in the Gimp.

Gimp Portable

PortableApps.com announced yesterday the release of their portable version of the Gimp 2.2.13. From the announcement:

This new release updates the included GIMP to 2.2.13, adds Vista compatibility, correctly cleans up GTK's bookmark and thumbnail files and features a greatly improved startup speed thanks to the new launcher's plugin processing. And, it's now packaged in PortableApps.com Format so it can easily integrate with the PortableApps.com Suite.

If you don't have a portable computer, or if your only computer is someone elses, having PortableApps is the next best thing, seriously. Go check it out!

Gimp Users flickr Group

Just bumped into the Gimp Users flickr group. (Thanks again Charles.) From their description:

Just to let the world know that some of us prefer to use "free software".

They've got over 1,100 members in the group. Check them out!

LightZone for Linux

Charles Tilford (a.k.a. listentoreason) sent me a tip about another photograph editor called LightZone for Linux. I haven't had much time to experiment with it, but it looks to be a pretty sweet little package. This is $250 software on Windows or Macintosh but free for nerds linux users. Score! Here's a quote from their homepage:

Drawing on principles behind the photographic Zone System and traditional darkroom film photography, LightZone 2.1 makes it simple and easy to bring out the true tone, color and contrast often hidden in digital images. Designed by photographers for photographers, LightZone 2.1 offers a rich set of powerful, yet easy to use digital editing tools. LightZone's editing tools help reduce the noise often found in high-ISO digital images, correct color shifts and white balance errors, selectively sharpen or blur images or parts of images, remove dust spots and boost overall color to create beautiful, breath-taking images, letting the true talent of the photographer shine though.

Note: it's not open source, but it is free. Take that for what you will. I'll be checking it out sometime this week depending on my free time.

Luminosity Masking: The Dark Side

Okay, last time I showed you how to bring out detail in highlighted areas. Today, I'm going to show you the opposite, bringing detail out of darkened areas. I'm also going to show you a different way of creating this luminosity mask that I think is a little more versatile. If you'd like to see the Photoshop way of doing things, the tutorial I'm adapting is from planetphotoshop.com and is called The Shadowy Face of the Luminosity Mask.

The photograph for today is another CC licensed photograph originally posted by flickr user listentoreason. Thanks Charles!

1. Okay first, as always, open up your photograph in the Gimp and duplicate the background layer. Rename this layer Mask 1.
2. Just like last time, we're going to decompose the image into LAB layers by clicking Image>Mode>Decompose.
   
3. Discard the A and B layers, then select all by pressing Ctrl-A and copy by pressing Ctrl-C.
4. Go back to your original color image, but this time, instead of creating a masking layer, we're going to use the quickmask by pressing Shift-Q. This will put a red overlay over the image. Press Ctrl-V to paste the copied Luminosity layer onto the quickmask and anchor the layer.
   
5. Press Shift-Q again to toggle the quickmask off, and you should see the marching ants indicating a selection. If you look at the Selection Editor dialog, you'll see a black and white copy of your image that looks just like the Luminosity layer. White areas are fully selected, and black areas are fully deselected. So, right now, I've got almost all of the flower area selected along with some green leaves in the background.
   
6. Press Ctrl-I to invert the selection, then press Ctrl-K to delete everything in the selection. Here's what my Mask 1 layer looks like now:
   
   
7. Set Mask 1 layer blending mode to Multiply. The opacity is going to be subjective, so play around with yours, but I'm going to set mine to 57%.
   
8. Now, Copy the background layer again, and merge the Mask 1 layer with the background copy and call it whatever you like. I'm calling it Layer 1.
   
9. Now, you should still have a selection. Activate the background layer press Ctrl-C to copy the selection. Create a new transparent layer on top of Layer 1 and call it Mask 2. Press Ctrl-V to paste into the layer and anchor it. Here's what my Mask 2 layer looks like:
   
10. Now, set Mask 2 layer mode to Screen. Wow! Hello leaves. Now, you could decide that you're done at this point, but you might want to play with the curves dialog a bit to bump up those highlights even more.
    

That's it! Here's the before and after:



I hope you've enjoyed this tutorial. Thanks for stopping by.

Luminosity Masking: The Light Side

This is part one of a two part series on luminosity masking. The original Photoshop tutorial can be found on planetphotoshop.com and is entitled: Recovering Lost Highlight Detail, by Jim Patterson. Luminosity can be utilized for a great number of color and shade adjustments. Jim covers the basics, which should give you a good idea of the types of things you can do.

Okay, onward. The image for today is another CC licensed photograph found on flickr. It was originally posted by flickr user robad0b. Thanks! Please note that I don't actually think this photograph needs editing. I used it because it can highlight an extreme use of this technique. It is a very good photograph, and this technique is not going to make it better. It will however be good for illustrating the technique.

1. Open your image, and make a copy of the background layer.
2. Click Image>Mode>Decompose. Select the LAB radio button, make sure the Decompose to layers checkbox is checked and click OK.
   
   This will create a black and white copy of the photograph that probably looks pretty funky.
   
3. In the layers dialog, you'll see 3 layers A, B and L. We only want the L (luminosity) layer, so you may discard the other two.
4. Select the entire layer (Ctrl-A) and copy it (Ctrl-C).
5. Go back to the original photograph. Right-click the background copy layer and select Add layer mask. Initialize it to white (full opacity) and click OK. Now, paste the copied luminosity layer from the decomposed version onto this mask (Ctrl-V). Anchor the layer by right-clicking the floating selection and selecting Anchor layer. You should now have a black and white thumbnail next to the color thumbnail in the background copy layer.
   
6. Now, we don't want to affect the sky with our luminosity adjustments, so we're going to mask it out by painting black over it on the mask. Right click the Background copy layer, and select Show layer mask. Use a soft brush, and carefully go over the edges of the sky with black.
   Now you can either continue using the paintbrush, or use the freehand select tool to select the rest of the sky and fill it in with black.
   
7. The mask is now prepared, so on your layers dialog, right click the Background copy layer and select Apply layer mask. Here is what my masked layer looks like.
   
8. Now for the adjustments. First thing, make sure Background copy layer is selected and change the layer mode to Multiply. Right away you will notice a big difference.
9. The next few steps are really subjective. Here's what I'm going to do. First I'll reduce the opacity of the Background copy layer to around 50%. Then I went to Layer>Colors>Curves and bumped up the Value just a bit. Now, the rocks are too dark, so I'm going to erase the rocks from the Background copy layer using the eraser tool.
   

Now, you'll notice the area below and to the right of the rocks has a bit more detail, and the shadows are much more defined. I hope you've enjoyed this tutorial adaptation. Next time we'll finish up with The Dark Side.

Excuses excuses...

I have a couple of tutorials simmering, but I just can't dedicate the time they need right now. I've got two tests, today and tomorrow, and I need to focus. I promise this weekend I will have some content for you. Thanks for being patient.

Borked my partition

Hey everyone. I thought I'd be cute and use a rearrange my partitions to give me more space for my linux partition, and I managed to completely kill my system. So, I'm spending the day recovering my files, reinstalling my OS and all my applications. Once I've got everything in place, I'll finish up the next tutorial and post it, but that might not be until tomorrow or the next day depending on how much free time I get.

I'll also probably be changing the layout here to try to pretend that I'm an actual website instead of a blog. My plan is to just make some backdated posts and then put links to them in the sidebar. Who knows, maybe one of these days Gimparoo will move to a commercial host. Maybe.

Anyway, just wanted to give you all a heads-up. If you're looking for some Gimp related fun, you might check out the Gimp User Group (GUG). I've known about it for a long time, but just signed up as a member.

Open Source Photography (OSP)

For all you shutterbugs out there, there's a flickr group out there just for you called Open Source Photography (OSP) I'll just post the summary they have up:

This group deals with the usage of open source software to process photography. It intends to be a forum to share experiences and advances in the area of OSP. Image pos-processing using gimp, experiences with plug-ins, different open source for Tone mapping and HDRs, and much more …

That is all.

Inkscape: Web 2.0 Violator

My very first tutorial was an adaptation of a Photoshop tutorial on how to make one of those trendy violator badges. Well it turned out pretty ugly looking because the GFig plugin for the GIMP doesn't anti-alias the lines. Much discussion was had on whether or not I should include Inkscape tutorials on this blog to make up for the shortcomings of the GIMP, and I decided that I would give it a shot.

Now, before I start, keep in mind that I am a total newbie at Inkscape, so there is probably an easier way to do the things I'm about to show you. By all means, please suggest improvements on the way I've done things here. Okay, enough weasling, on with the tutorial.

1. Open up Inkscape and set your document size to 200x200px. Set the X and Y grid spacing to 5px and make sure you've got grid snapping on. Press [5] to make the document fit the window size.


2. Click the stars and polygons button (or press [*]). Increase the number of corners to 12, and make sure the Polygon checkbox is unchecked. Set the spoke ratio to 0.830 and make sure Rounded and Randomized are set to 0.



3. Starting in the center of the drawing area, click and drag out to the 10px mark.



4. Click Edit>Duplicate. You won't see a change, but you've actually got 2 shapes now. One on top of the other. Select the top shape and change it to whatever color you want your violator to be.


5. With the selection tool [F1] press and hold the [Alt] button and click the star shape. This will actually select the one on the bottom. You can tell because the color in the lower left will switch to black.


6. Click Object>Fill and stroke. Set the Blur to 3.5 and the Master opacity to 80.0%.



7. Now select the colored shape and duplicate it again. Now, if you still have the fill and stroke dialog box open, change the color to white and click the radial gradient box.



8. Now select the gradient tool [Ctrl]+[F1], and you'll see 3 handles that form a right angle in the center of the gradient. These control the position and size of the gradient. Grab the middle one and drag it to the upper-left portion of the shape. You can play with the other 2 handles to resize the gradient. I left it as-is.


9. Now select the text tool [F8] and click anywhere in the shape to start typing.


10. Using the selection tool, click twice until you see the handles on the corners change to indicate that it's in rotation mode and rotate the text however you want it. Note: You can create a shadow under the text the same way you did with the shadow for the shape.

That's it! Once you get the hang of how inkscape works, it really is easier to use for this sort of thing than the GIMP. I hope you've enjoyed this tutorial. Thanks for following along.

Basic Photo Retouching

Today I'm going to touch on some very simple yet extremely effective things you can do to make any photo look better. This is an adaptation of the Photo Edit 101 tutorial done by Worth1000.com user Dallas_TX.

You can use these basic guidelines to enhance just about any photo. In the future, I'll use this post as a reference on what to do before starting whatever it is I'll be writing about that day. So, anyway, let's get started. Pick an image you want to enhance and open it up. I'll be using another CC licensed image originally posted by flickr user Munzerr.



Setting black and white points:
You will only need to do this step one time.

1. Click Tools>Color Tools>Levels...
   
2. In the levels dialog, click the Channels dropdown and select the Red channel.
3. In the input levels, set the black level to 12 and the white level to 245.
4. Do the same thing for the green and blue channels, but leave the Value channel alone.
   
5. Click on the Save button, and save these settings. Now, whenever you want to apply these settings, you can just click the Open button and open this file you've just created.

Dallas gives a good explanation of why you would want to set the black and white points like that. I don't actually know if his explanation is correct or not, but it makes sense and the image certainly looks much better after applying the settings, so I'm not going to argue. Basically, what he's saying is that pure black and white don't actually contain any detail, so when you set the black and white points to almost black and almost white, you give the shades more detail. Like I said, I don't really understand the science of it, I just know it works.

More black and white settings

Now that we've told the program what our black and white limits are, let's pick out the darkest point and the lightest point in our image to define black and white for this picture.

1. Click Layer>Colors>Threshold.
2. Grab the left-hand slider, and slide it all the way left to 0.
3. Slowly move the slider back to the right until some black spots start to appear. This is the darkest point on your picture. Remember this spot and click Cancel on the threshold dialog.
   
   
4. Open the Levels dialog back up and under the section for All channels, click the left-hand eyedropper and click in that darkest area of your picture.
   
   
   

Now, for the white point, you're going to do almost the exact same thing, except in the threshold dialog, after you drag the slider all the way to the left, you're going to manipulate the right-hand slider until things start to become visible. For me that was very quick. Remember that spot, cancel the threshold dialog. In the levels dialog, you're going to grab the right-hand eyedropper under the All channels section this time and click that whitest spot.



At this point, you should already be looking very much better.

Now we're just going to push up the saturation ever so slightly. So click Layer>Colors>Hue-Saturation, and type some value between 5 and 15 into the saturation value. You will hardly notice a difference most likely, but it is there.

Now we're going to sharpen a bit. Click Filters>Enhance>Unsharp Mask. This is a very misleading title for a very useful tool. Use very small values here. If you go too high, you'll start seeing a glow appear around your dark objects. I used a radius of 1.5. For amount, I used .50. Leave threshold at 0.

Play around with these values until you find something you like. Just remember, go easy. Lower values are better.

The next thing he mentions is straightening images. You can do this in images that have a horizon or other reference that should be horizontal. My image does not have that, so I'll just tell you how to do this in the GIMP. Pick out your reference, and drag a horizontal guide down until it touches the reference. Pick the rotate tool, and rotate the whole layer until the reference is parallel to the guide. Now, you'll notice the corners are transparent now. You'll just have to crop the image to remove the transparent areas.

Okay, that's it. Let's take a look at the before and after images.



Pretty sweet!

Inkscape .deb Package

For those of you using some flavor of Debian linux (Ubuntu) and do not favor building your own packages, ubuntuforums.org user gummybearchen
has conveniently packaged Inkscape for us. Check it out here: http://www.ubuntuforums.org....

That is all.

Fake Tilt Shift

Note there are several updates to this entry at the bottom.

Today's tutorial is an adaptation of Christopher Phin's Fake Model Photography tutorial for Photoshop CS, and it's all about faking tilt-shift photography.



I'll be using another CC licensed photograph today. This one was originally posted by flickr user pietroizzo. Thank you very much!

Okay, let's get started.

1. The most important part of this process is picking a good photo. There are basically 2 key components: aerial photography and strong lighting. You want this to look like you took the picture standing next to a model that's lit by a shop lamp.
2. Open your photo and create a new transparent layer named Mask.
3. Right click the new layer and select "Add layer mask"
4. Reset your colors by pressing the [d] key. You should have black as foreground and white as background now.
   
5. Grab the gradient tool, select the FG to BG (RGB) gradient, and set the shape to Bi-linear.
6. Now pick out an imaginary focal point somewhere on your picture. When you take real closeup pictures of small objects with a nice camera, the focal point will be in sharp focus while the rest will be out of focus.
   
7. Once you've got your focal point, click and drag the gradient in a vertical path starting from the focal point. It doesn't matter if it's perfect. This may take you a few tries to get just the way you want it. Note that you won't be able to see the gradient in your image, just in the mask thumbnail in the layers dialog.
   
   
8. Right click the Mask layer, and select "Mask to selection". Now you'll see some marching ants in a rectangle, but don't be deceived. The selection area indicated by the ants only indicates pixels that are more than 50% selected. If you take a look at the Selection Editor dialog, you'll see what the selection really looks like. (By the way, if anyone knows a better way to simulate Photoshop's quick mask, I'd love to hear it.)
   
9. Activate the Background layer and click Filters>Blur>Gaussian blur. I used a 15 pixel radius, but you'll probably want to experiment with different levels of blur. Press [Ctrl]+[Shift]+[a] to deselect.
   
10. Now for the color. Again, you'll probably want to experiment as the values in this step are highly subjective. Here's what I did: click Layer>Colors>Brightness-Contrast and bump the contrast up to 15. Then I bumped the color up a bit in the curves dialog (Layer>Colors>Curves).
    

Here's the before and after comparison:




That's pretty much it. I mentioned several times that you'll want to experiment, and I'll say it again. This isn't a formula so much as a guideline. The values for any of the above steps will need to be adjusted to taste for any photo, unless you pick this exact photo and you want it to look exactly like I made it look.

I hope you've enjoyed this tutorial adaptation. Thank you for following along.

Update: I realized after reading Alexanders comment that we could eliminate a couple of steps, so the article has been modified.

Update 2: Commenter Achim has pointed out the Focus Blur plugin made by Kyoichiro Suda. This really is a nice plugin, and I've been having fun with it today, but you must be using linux and you must have the libgimp2.0-dev package installed. For those reasons, I'm not going to include a tutorial for it because I think it's just too exclusionary. If you're savvy and you want a more powerful blur option, I highly recommend it.

Here's the same photo blurred with the Focus Blur plugin:



Update 3: I was looking through the keyboard shortcut options and found the Quickmask! It's [Shift]+[Q]. There is also a tiny little button in the lower-left corner of the image window that toggles the quickmask. I may do some short tutorials on its use in the future.

Post Coming Soon

I know you are all probably ready for some new content by now, so I just wanted to let you know that I have a post cooking, I just haven't been able to perfect it yet. I've got to do some homework tonight, but I'll try to have it up in the next 24 hours.

Hang tight!

In the process of moving...

I'm in the process of moving my blog from wordpress to blogger. If you're looking for Gimparoo! content, please visit my old url for now: http://gimparoo.wordpress.com

Update: All the posts from my old blog have been moved to this page. If you'd like to see the comments from those posts, I encourage you to go visit the old url, but please remember to leave new comments here on blogger. Thank you!

I realize the template looks pretty sparse right now. I'll be working on that soon. I probably won't make any drastic changes except to widen the layout (does anyone really still use 800x600?) and maybe add a logo up top if I can come up with something. You may remember that I am completely not an artist, so that might be a challenge for me. Thank you for bearing with me during this transition. I promise to have new content soon!

Should I Include Inkscape?

What I'm wondering is, should I include Inkscape as a tool for the tutorials on this blog? It's another open-source application which does vector paths a lot better than the GIMP's GFig plugin and I could make things like the Web 2.0 violators look a million times better. I'd still try to do everything here with the GIMP whenever possible, only using Inkscape when I felt it could accomplish the task in a way the GIMP could not.

I don't know how to do one of the fancy polls, so just post a comment with your opinion please. Thank you.

Update: It seems like the overwhelming majority would appreciate some Inkscape content. Havoc makes a very good point though. I'm a very busy guy. I'm a husband and a father. I have a full time job, and I am also taking a couple of courses at the local University. My time is Precious. However, one of the benifits of my job is that when things are going well, I can pretty much research and do what I please. I'm not terribly familiar with Inkscape, but since people (including myself) feel that it is a valuable addition, I will make an effort to include it when appropriate. After all, one of the reasons I started this project is to learn new things. So far, there's really only been one post where it would have made a difference in my opinion, so there may not be much call for it.

Thank you everyone. I really appreciate the input.

Orton Effect

For today's adaptation, I'm not going to single out any one particular tutorial because there are many good ones, and they're all a bit different. If you want the Photoshop method, I advise you to do what I did, and google it.

So, here we go.

Hello New Visitors

Holy moly. I checked my blog stats on a whim, and for a minute, I thought maybe I had somehow logged in as someone else. Right now I'm sitting at 1,801 hits, and at this rate, it looks like we'll hit 2,000 before the day is done. (My previous high was 39. As in, less than 40.) I believe I have Ubuntu Blog and Planet Ubuntu to thank, so, thanks!

I hope you are all finding something useful. Keep in mind I just started this blog recently, so after a while there will be a lot more material. I would love it if you would recommend some tutorials you'd like to see adapted. It's helpful to know what people are looking for. Before today, my most popular posts were the ones regarding Web 2.0, but now it seems most are checking the Lomography adaptation out.

I seriously almost cried when I opened up google reader and saw my blogs' name right up on top. I even took a screenshot.


Thanks again for visiting. I hope you'll stick around. I should have some new content for you very soon!

Update: Just cracked 2,000 visitors. Thanks everyone, you're seriously making my day.

Lomography

Today I'm going to give you another simple but effective technique. We're going to simulate lomography with a few simple steps. The original Photoshop tutorial I'm adapting was done by Denny Tang and can be found here. We'll be using another CC licensed photograph originally posted to flickr by user Bob Jones. Many thanks to Mr. Jones.

So, here we go.

Contrast Masking

Last time I said I'd get into something a little more in depth, but I couldn't resist posting this simple technique. It's so easy and so amazing, I think you will love it. I found the original tutorial on nyfalls.com. I don't know if "masking" is really the proper term for what we're about to do, but I don't have a better one, so that's what we'll call it.

Let's get started.

Selective Colorization

Today, I'm going to teach you how to first simply create a black and white image from a color photo, then to selectively colorize any portion of the photo. I'm not going to directly adapt a Photoshop tutorial because this is a very simple process, but if you want to find the Photoshop way of doing this, simply google "selective colorization" and you'll get about five gazillion results. For those of you keeping track, yes, this is the first Gimparoo original.

So, as I mentioned in the previous post, flickr's CC license image search tool is totally awesome, and that's where I found today's image. In the spirit of the license, I'm attributing flickr user Daniel Montesinos as the original photographer. Thank you Daniel. I will also make my finished product available with the same license provisions on my flickr page.

On with the show!

Great Photography Site

In my search for photo's with liberal licensing, I've run across yotophoto.com, which I am now absolutely in love with. I just wanted to mention it here in case any of you were looking for some photo's you can use for just about anything. Always be sure to check the licenses for anything you publish.

Update: On second thought, flickr's Creative Commons search is much much better.

Busy, busy, busy

I've got a lot going on right now, but I wanted to let everyone know that there are more Photoshop adaptations in the works for you. I'll probably put up new content this weekend. We'll move away from this web 2.0 business and delve into the real meat and potatoes: photo retouching. Stay tuned, and we'll hopefully be able to help some of you photog's out there save a bit of cash and maybe learn a few things.

Adapting Web 2.0 Design: Part 2

Last time we adapted the first part of Tommy Maloney's Web 2.0 Design Kit, and today we're continuing with the second half. The original adaptation can be found here: Web 2.0 Design Kit, Part 2. I found what I believe to be a mistake in the original diagonal line tutorial. He says to make a 7x7 pixel selection but I could not get the diagonal lines to line up like that. I even tried it out in Photoshop just to make sure it wasn't something to do with the application, but still couldn't get it to line up properly. I ended up modifying my instructions so that they work. If anyone knows what I'm doing wrong, I'd love to know. Anyway, on with the tutorial!

GIMP 2.3 .deb

If you are a Debian or Ubuntu user, Ubuntu Forums user soc has created a .deb file for the latest version of the GIMP. Check it out here: www.ubuntuforums.org. If you're unfamiliar, a .deb file is an automatic installer for Debian based systems which makes installing applications a very simple process. No dependency hell. If you're brave, you can download and build the package from source. I'm going to continue using v2.2 here just because it is the stable version. As soon as 2.4 is announced, I'll make the switch for tutorials.

Thanks soc!

p.s. Here's the changelog for 2.3

Adapting Web 2.0 Design

Today I'm going to be adapting a tutorial that was one of the first Web 2.0 tutorials I ever saw, and is kind of the inspiration for this site. It's by a guy named Tommy Maloney who writes for a website called Photoshop Lab. The tutorial in question is his Web 2.0 Design Kit. We'll cover part 1 today, and maybe go over part 2 another day. Since we covered violators last time, I'm not going to go over that part again. We're just going to recreate the header logo. So fire up GIMP, and follow along!

The Background

1. In the document you want to create the logo in, create a rectangular selection the size you want the logo to be. Create a new layer and call it "Gradient".


2. GIMP doesn't actually let you edit their default gradients, so we are going to create a new gradient. In the Gradient selection dialog, click the "New gradient" button.
   


3. In the Gradient Editor dialog, give the gradient a cool name, then right click the gradient and select "Split segments at midpoints. Along the bottom bar, you should see 3 black and 2 white triangles. Double click the left-hand white triangle. Right click this area and select "Left Endpoint's Color" and set it to #484848. Right click again and select "Right Endpoint's Color" and set it to #575757. Double click the right-hand midpoint triangle and set it's left color to #5e5e5e and the right to #707070. Click the save button and close the editor dialog.
   


4. Making sure the Gradient layer is selected, press and hold Ctrl to constrain your movements, click and drag from the bottom of the selection to the top and release. The gradient is now applied.
   


5. Create a new layer called "Color" and place it above "Gradient" in the layers stack. Fill it with whatever color you want, and set the layer mode to something that looks good to you. I used Overlay. This technique is neat because if you ever want to change the colors of your website, you can just come back to this image, select the "Color" layer, click Layer>Colors>Hue-Saturation..., and change to any color you want without affecting the gradient or any of the other elements. Neat!
   

Reflected Text

This is a really cool effect that is very simple to do when you know how. Here's how to do it with GIMP.

1. Select the text tool, set the color to white and set your font size and type options (don't worry, you can change all of this later if you want,) and type the text you want to see. Use the arrow keys to manuever the text into position just above the break in the gradient.


2. Duplicate the text layer and name it "Reflection". Click Layer>Transform>Flip Vertically. Use the arrow keys to manuever the flipped text till it's just below the original text. They should touch, so there is no gap between them.


3. Right-click the Reflection layer and select "Add layer mask..." Initialize it to White (full opacity) and click OK. Select the gradient tool, set it to FG to Transparency, check the Reverse checkbox, and set the foreground color to black. Drag the gradient from top to bottom. Continue playing with this until you get it the way you like it.
   

Soft Shadow

The final touch is the soft shadow underneath the logo. This is probably the easiest part for us.

1. Activate the Color layer in the stack, and with the "Select contiguous region" tool, select the colored area. Click Select>Feather... and set the feather to 15 and click ok.


2. Create a new layer below the "Gradient" layer called "Shadow" and set it's opacity to 50. Make sure black is the foreground color, and fill the selection.
   

That's it! I hope you've enjoyed this P2G tutorial. The comment board is open, so drop me a note. Thanks!

Web 2.0 Violators

Please note, there is now an Inkscape version of this tutorial available.

For this tutorial, I'm going to adapt Ajax Lessons: Web 2.0 Badge Photoshop Tutorial.

1. Open a new file, 200px by 200px with a white background layer.


2. Open the GFig dialog by clicking Filter>Render>GFig...


3. Select the "Create star" tool, set the number of sides to 12, uncheck the "Stroke" checkbox, select "Color Fill" from the drop-down menu and select white for your color from the color picker.
   


4. In the drawing area of the GFig window, starting at the center, click and drag to the outside creating a star shape that almost fills the window. Leave some room on the outside for the border and drop shadow later.

Hello GIMP Users!

As it says in my info page, I'll be using this space to adapt existing popular Photoshop tutorials into GIMP tutorials. I will attempt to obtain permission from original tutors when necessary, and will at least always attribute the original work, so if you'd like to see something done the Photoshop way, you can simply follow the attribution links to the original work.

At some point, I plan on actually being more proficient with GIMP and will be authoring original Gimparoo tutorials. If you ever see the "Gimparoo" category attached to a post and no attribution links, this means I have succeeded.

For those of you wondering what the heck GIMP is; GIMP stands for "GNU Image Manipulation Program". It is a program similar to but not exactly like Adobe's popular Photoshop application. The most significant difference to the lay user is that GIMP is free. I say "lay user" because Photoshop does have significant advantages for the professional user, but to the average user, GIMP is more than sufficient. Especially for free. You can download GIMP and a large number of add-ons for Windows, Macintosh or Linux by visiting their website. If you are running some modern flavor of Linux, chances are good that you already have it installed. Being open source software, there are a number of ways you can personally contribute to the project. Please explore the GIMP homepage and it's associated links for more information.

So, on with the show already! Up next I'll start with everyone's favorite new fad: Web 2.0. I'll be walking you through a few of the more popular Web 2.0 Photoshop tutorials, GIMP style, and hopefully we'll all learn something in the process.