iTut

Requested Tutorial: Keeping bits of color on a desaturated image

2006-05-07T01:43:47Z

Skill Level: Any/all
Program: PS CS2, but is most likely translatable to any program if you know it well enough.
Notes: There are so many different ways to accomplish this - this is just the way I do it.

Starting with this: Courtesy of so_alone_at_ehc

Duplicate layer.

Desaturate duped layer - Image>Adjustments>Desaturate:

Using the Magic Wand tool (Tolerance: 30, Anti-aliased, Contiguous), choose which areas you want to remain the original color. Choose multiple areas by setting the tool to Add to Selection or holding Shift while clicking. It also helps to zoom in - makes for easier selecting.

In this case, I will choose the hair and eyes:

Go to Select>Inverse - this will select everything BUT the original selection.

With the desaturated layer active, click the layer mask button at the bottom of the layers window. This will automatically mask the image, only showing the hair and eyes:

If anyone knows a different way, feel free to comment with it and I will add it to the post.
Please comment if you have any questions!

Requests - take 2

2006-03-28T10:35:33Z

Hey guys! I know it's been a month or so since the last requests post and most of the things that have been requested have not been filled - I apologize for that.

If those who requested in the last post, if you still would like tutorials on those specific things, please leave a comment here. Be sure to include what programs you use!

Also, if anyone else would like a tutorial on anything, leave a comment here. Be specific, include examples if you'd like.

As in the last request post, the comments will be screened!

Mod Post

2006-03-20T00:42:39Z

Just a couple of reminders to those with posting access:

1) Please make sure that your tutorials are posted directly to the community. This is in the posting guidelines so I just want to make sure that you're aware of it.
2) If you haven't yet - and most of you with posting access haven't - please join itutwriters. It's a community I set up specifically for those who post here to discuss tutorials and to perhaps bounce ideas off other members. Membership is moderated so if you don't have posting access here you won't get approved for membership there.

Thanks guys! :)

And for those who are watching the community and learning, the call for requests is now closed as we still have quite a few requests to fulfill. Once we have those done I may do another post asking for suggestions. Please keep an eye out for that!

okay, first tutorial

2006-03-19T16:51:45Z

Tutorial Type: icon tutorial; color correction
Skill level: beginner/intermediate
Program used: ps7
Notes: Hopefully the steps are clear!
it's going from to .

01. take a cap and crop it to 100x100.

02. I then used curves to correct the image's color and light, which is done by image>>adjustments>>curves, I think. My image was pretty dark and had a lot of green in it, so I adjusted the "Green" curves level and the "RGB" curves level. This step will be different for everyone.

03. There was one part that was bothering me (that little green spot on her chin, see?) so I went over it in new layer with a color that matched her skin tone and set that layer's mode to "Color."
&

04. I set a new layer filled with #e9e9e9 to color burn, which kind of makes the image more... vivid, i guesss? I also made a new layer and set it to screen.

05. This part is sort of complicated, I think. I pressed Ctrl+A, then Ctrl+shift+C, which takes a screenshot of your image, kind of, with all the layers. I pasted (Ctrl+V) this "screenshot" onto a new layer at the top of this image. I deleted the screen layer, and set my SCREENSHOT to Screen 50%.

06. Then, I used the sharpen tool on places like her eyes, her lips and her collarbone, places I wanted to make stand out more. You can also blur her skin a bit to make it more smooth.

07. You're done with the major part of the tutorial! I just added text and such. It sort of comes out in a cone shape from her mouth in a lot of different fonts, which to me looks like she's speaking, heh. The finished product:

Remember:
A. Don't copy the tutorial exactly! It's slightly different for every image! Toy around with it!
B. Pimp the community iconifixation! Friend it! Become our affilate! YAY.

I hope you enjoyed it ;)

Tutorial #11 - Tiny Text Tutorial

2006-03-06T23:12:15Z

Gotta love the alliteration eh? heh

Tutorial Type: text tutorial
Skill level: any
Program used: PS7
Notes: This tutorial teaches you how to create your own tiny text as well as introducing the character palette.

The goal of this tutorial is to teach you how to create your own tiny text as well as introduce you to the character palette. This affords you more control over your text! I have dontlickit to thank for teaching me how to do tiny text and introducing it to me but since I'm impatient I'm writing the tutorial instead of her. ;) Anyway, on with the tutorial.

This is the character palette. If you don't have it visible, click Window>Character to bring it up. As you can see there are some things here you are likely familiar with and some other things you may not be familiar with. I'm going to do a quick rundown on each of the items just to help you feel a little more comfortable.

(1) This is where you choose your font face. I'm sure everyone here knows how to do that. ;)
(2) This is where you choose the style of your type. That is you choose if it's Regular, Italic, or Bold. Some fonts have other options here as well.
(3) This is where you choose your font size. The size is measured in pixels. Note: If you notice your font is very small, even when the size is like 454px then make sure your resolution is set to 72.
(4) This is where you set the leading. Leading refers to the space between lines of text.
(5) This is where you set the kerning. Kerning refers to the spacing between specific characters pairs.
(6) This is where you set the tracking. Tracking means that you are setting the spacing between characters to be equal throughout the whole set of characters. This will come into play when creating tiny text so you will see it a little later on.
(7) This is where you set the vertical scale. This just means you can scale the text taller or shorter.
(8) This is where you set the horizontal scale. This means you can scale the text wider or more narrow.
(9) This is where you set the baseline shift. The baseline is where your text sits. If you enter a higher number here (than 0) then the text starts up higher than it normally would.
(10) This is where you choose the colour for your text.
(11) Here you can choose many options for your text. You can choose faux bold (bolds text that normally wouldn't be able to be bolded), faux italic (italicizes text that normally wouldn't be able to be italicized), all caps (capitalizes all the letters), small caps (large cap first letter, small cap for the rest), superscript (like ^this), subscript (like _this), underline (underlines the text) and strike through (puts a line through the text).
(12) Set the language.
(13) Set the anti-alias. Note: You will almost always want the anti-alias on (either sharp, strong, crisp, smooth) - the only time you may not want it on is if you are using a bitmap font.

The beauty of the character palette is that you don't have to have the text you are working on highlighted to make changes. This was something I learned from dontlickit when she introduced it to me. You simply have to have the layer selected in the layer palette and then make any changes you wish to the text! Now, on to making tiny text.

I used tiny text brushes for the longest time and I have no qualms about using them now, nor do I begrudge those that do use them but I wanted to know how to make tiny text myself so I learned and now I want to share it with you. You may be surprised at how easy it is. ;)

Let's say you've got an icon that's just about finished but it needs something... tiny text!

The first thing we do is slap any old text on there. It doesn't really matter what it says - it can be lyrics or porn or random cuss words or just a bunch of jibberish - make sure you stick some spaces in there too! And for right now, it doesn't matter what font you've used either. You can use just about any font to make your tiny text!

You can see I've labeled the layer there that is going to be my tiny text. The font is currently Cooper Black BT because that was the last font I used (for the R) and it is set to the same size I had used as well. (My text says "this is going to be my tiny text okay?")

The next thing I do is set the font size to 2px. You could perhaps use 1 or 3 but this is what I was taught and haven't bothered to change it because it works! I have also set the text to subscript and that makes it even smaller. Sometimes you don't need to do this but because I still have it set as Cooper Black BT it should be smaller - but this is my opinion. These settings can be changed to fit what you like.

As you can see by the above picture the text looks just like a blurry line or something. Where's the texture that gives it that extra kick? Well this is where the tracking that we talked about earlier comes in.

Here I have set the tracking to 500. The settings only go up to 200 but you can manually enter any number you want. 500 is kind of my default number. You can set it higher or lower, again, it's based on your preferences. Sometimes I set it to 750 or 600. :D

The last thing to do is to move the text into place. Well that's the last thing I've done, you could have done that at any time. I decided that I wanted more space between the letters so you can see I've increased the tracking to 600. Here is the finished icon:

Now like I said in a previous step, you can use any font you want and different fonts will give different looks to the tiny text. Here are a few examples of just tiny text. They all say the same thing (tiny text test) and the ally use the settings I used above unless otherwise marked.

So go forth and create your own tiny text! Remember to play with the settings because they will change how the tiny text appears! And if you like the icon feel free to use it, no credit required! :)

Queer as Folk Tutorial (B/J) Photoshop CS2

2006-02-27T21:40:45Z

How to try to make but end up with .

Dunno how translatable this is, I haven't touched PSP once

NOTE: I'm doing this from memory, so it's probably not going to be exact.

Now, I took this picture which I got from one of erraticonstilts's many QaF spams, and cropped it sort of like this

Then I used this colouring technique. It was an action I had before things got booted and I had to reinstall PS so I don't have it anymore which is a shame since it was one that looked awesome one most pics.

Next, I decided I wanted it be a reflection pic because I'm cool like that, so I merged the layers and then duplicated the base and flipped it vertically (Edit>Transform>Flip Vertical)

Now, here's where I'm a bit fuzzy as to what I did. I think I next took the base, and since it is the background, right clicked on it in the layer palette, and chose Layer from Backround. Then I moved it down slightly.

(I made the top layer invisible so you could see)

Then I used a black and white gradient map on the topmost layer

Now for the blending. I used a soft brush for this (default with photoshop and oh-so-trendy right now) I think it was probably the 45px size, though any size from 45px to 100px is alright, because after that things get too blended and seethrough.

Again, fuzzy on details but I probably used a layer mask to erase. ALWAYS USE LAYER MASKS. LAYER MASKS>ERASER)

Layer Masks in 10 words or Less:
Black=Erase
White=Bring Back
Layer Masks=NO MISTAKES!

It's not exactly straight, but I'm not a walking ruler.

Now for the shiny part. I used this texture set to screen 100% by zemie Which I adore and have used on lots of icons because it is really useful.

Something was off (like the tacky colour combination?) so off to Hue/Saturation (Ctrl+U)

Still a bit of green, so I used #d8d2a5 (which I picked out of the background) and went over it WITH THE BRUSH SET TO COLOUR not a new layer.

You can see a bit in the corner went over the layer, so I used the smudge tool (65px 45% strength) to even that out.

New Old

Always wondered what I kept thinking I missed. I forgot to sharpen the original.
Now, it's not exact, but I did say it's from memory and not PSD.
DO NOT COPY TUTORIAL EXACTLY Use your own ideas, don't rip off mine.

Mod Post

2006-02-26T15:48:58Z

Hi gang!

I have created the community for those of us with posting access here - itutwriters. Everyone with posting access should have received an invitation to join itutwriters but if you didn't, let me know and I'll send it along. :)

If anyone is interested in helping out and wants posting access, visit this post for more information!

Thanks gang and keep your suggestions coming in! You can submit your requests here

Call for requests!

2006-02-25T11:18:21Z

Hi folks! I have a special offer (of sorts) for you! I want you to leave a comment in this post with a tutorial you would like to see. What I would like to do is then take those requests and see which of our tutorial writers would be able to help out! So if you have a tutorial you'd like to see, leave a comment. If you can help out with writing a tutorial, leave a comment!

I would also like to know, from those that write the tutorials, if it would be worthwhile to have an "itutwriters" community to help with community management - I thought it would be a decent idea but your thoughts are appreciated. I think it would be a great idea to have one of these in light of my above paragraph. ;)

At any rate, comments are screened so if you think your idea or request is dumb, you can rest easy that no one else will see it but me! ;) (Although I'm sure it isn't :P)

19/03/2006 We are no longer taking requests at this time. Please watch for another post in the future if you wish to make a request.

Tutorial: Tips and Tricks for Photoshop

2006-02-25T11:11:26Z

Tutorial Type: Program
Skill level: Any, really.
Program used: PSCS2
Notes: These are just a few tips and tricks for Photoshop. I use CS2, but I think these should work on all versions. If not, let me know. I don't know how well this will translate to other programs, sorry!
Under the cut: Easy B&W from a Color Image, Levels, Curved Text

Easy B&W from a Color Image:
Desaturating a color image usually leaves it dull. To fix that, one would have to fiddle around with brightness/contrast or other tools. Why do that when all you have to do is make an adjustment layer?
I'll start with this image:

This is the image desaturated:

Not so pretty.
Go to Layer>>New Adjustment Layer>>Channel Mixer OR click on the half-black/half-white circle at the bottom of the layers window.
When the window pops up, make sure the red is set to 100%, check the little box beside Monochrome and click ok.

Nice, yeah?

Another trick with this Channel Mixer layer:

To get this effect, just change the Channel Mixer layer to lighten - it will get rid of all colors but blue (notice his shirt still has a blue tint).
If you change the red back to 0%, green to 0%, and blue to 100%, it will turn the sky gray (while still on lighten mode).

Fun stuff.

Keeping with the Adjustment Layers - let's move on to Levels:
To me, Levels are like the bastard child(ren?) of Curves. They are much easier to work with but are less exact than Curves.

There are 3 different adjustment sliders:
The Black - Shadows
The Grey - Midtones
The White - Highlights
In RGB mode, moving the sliders to the right will make the icon darker - moved to the left will lighten.
In Red mode, moving the sliders to the right will give a tealish coloring - moving to the left will redden.
In Green mode, moving the sliders to the right will give a magenta coloring - moving to the left will green.
In Blue mode, moving the sliders to the right will give a yellow coloring - moving to the left will be bluish.
Play around until you are happy with the results.
Before:
After:
Settings for the after icon:
RGB: 0, 1.51, 204
Red: 22, 0.85, 255
Green: 24, 1.00, 225
Blue: 0, 1.15, 220

For the last tip/trick, I will show how to do curved text. When I read this tutorial by swirlin, she mentioned using paths to give shape/tilt/whatever to text. Here's how to do it.
First, you must make a new path. To do so, go to your layers window, click on the 'paths' tab, and click the square icon at the bottom.
Choose the pen tool and make a line where you want the text.

Now choose the text tool and move the cursor over the pen-line until it changes. Type in whatever, and there you go.

Feedback/questions are always welcome!

Tutorial #10 - Basic functions/tools in Photoshop 7 - part 6

2006-02-13T22:27:19Z

Tutorial Type: program tutorial #6
Skill level: beginner
Program used: PS7
Notes: This tutorial is part six (and the final part) of a series that I am going to do that covers the more common tools in Photoshop 7. This series is intended for those who are learning PS7 for the very first time. Be warned, this is image AND text heavy.

You see a lot of tutorials out there that talk about colouring and how to do it and a LOT of them talk about the good 'ol blue exclusion layer. Yes, this is a viable option for creating some very nice colouring but there are so many more options and that's what we're going to take a look at today - blending modes!

I am going to be using this picture of Cillian Murphy from Batman Begins because he's pretty. :P Cropped, resized and prepped we get this:

So let's move on to the blending modes shall we? You'll find them on the layers palette as highlighted below.

There are 22 different blend modes in 6 different sections. Each of the options in each section does something similar to the others but there are differences. I'm going to give you a quick synopsis of each blending mode as provided by the photoshop help file - with clarifications where necessary - and visual examples. If you're anything like me, the visual examples will be much more useful than the text. ;)

Normal
Normal is the default state. Whatever you do - whether it be a fill layer or a brush or gradient - will show up exactly as it does in the preview. Here are some examples (all of these were done on new layers over my base):

Dissolve
Here's what the PS help file has to say: the result color is a random replacement of the pixels with the base color or the blend color, depending on the opacity at any pixel location. Say what? Think of it this way: you know when you drop some alka seltzer tablets into a glass of water and you get all those fun bubbles? The dissolve blending mode is kinda like that - it "dissolves" some of the solid colour to give a speckled look. It doesn't work on solid fills as you can see below and it doesn't work on gradients - at least the one I have selected - but you can see it in the middle with the little fishie thing I drew.

Making your images Darker
Darken
The darken tool looks at the color information in each channel and selects the base or blend color--whichever is darker--as the result color. Pixels lighter than the blend color are replaced, and pixels darker than the blend color do not change. You end up with a layer that is a darker shade of the colour you used originally and that has transparency to it so the layer below shows through.

Multiply
The multiply tool looks at the color information in each channel and multiplies the base color by the blend color. The result color is always a darker color. Multiplying any color with black produces black. Multiplying any color with white leaves the color unchanged. You end up with a layer that is a darker shade of the colour you used originally and that has transparency to it so the layer below shows through.

Color Burn
Looks at the color information in each channel and darkens the base color to reflect the blend color by increasing the contrast. Blending with white produces no change.

Linear Burn
Looks at the color information in each channel and darkens the base color to reflect the blend color by decreasing the brightness. Blending with white produces no change.

Lightening your images
Lighten
Looks at the color information in each channel and selects the base or blend color--whichever is lighter--as the result color. Pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change. This is the exact reverse of Darken.

Screen
Looks at each channel's color information and multiplies the inverse of the blend and base colors. The result color is always a lighter color. Screening with black leaves the color unchanged. Screening with white produces white. The effect is similar to projecting multiple photographic slides on top of each other. This is the inverse/reverse of Multiply.

Color Dodge
Looks at the color information in each channel and brightens the base color to reflect the blend color by decreasing the contrast. Blending with black produces no change. This is the inverse/reverse of Color Burn.

Linear Dodge
Looks at the color information in each channel and brightens the base color to reflect the blend color by increasing the brightness. Blending with black produces no change. This is the inverse/reverse of Linear Burn.

Adding depth/defining shadows
Overlay
Multiplies or screens the colors, depending on the base color. Patterns or colors overlay the existing pixels while preserving the highlights and shadows of the base color. The base color is not replaced but is mixed with the blend color to reflect the lightness or darkness of the original color.

Soft Light
Darkens or lightens the colors, depending on the blend color. The effect is similar to shining a diffused spotlight on the image. If the colour is a light colour, the image is lightened as though dodged. If it is a dark colour it is darkened as though burned.

Hard Light
Multiplies or screens the colors, depending on the blend color. The effect is similar to shining a harsh spotlight on the image. If the colour is a light colour, the image is lightened as though screened. If it is a dark colour it is darkened as if it were multiplied.

Vivid Light
Burns or dodges the colors by increasing or decreasing the contrast, depending on the blend color. If the colour is a light colour, the image is lightened by decreasing the contrast. If the colour is dark, the image is darkened by increasing the contrast.

Linear Light
Burns or dodges the colors by decreasing or increasing the brightness, depending on the blend color. If the colour is light, the image is lightened by increasing the brightness. If the colour is dark, the image is darkened by decreasing the brightness.

Pin Light
Replaces the colors, depending on the blend color. If the blend color (light source) is lighter than 50% gray, pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change. If the blend color is darker than 50% gray, pixels lighter than the blend color are replaced, and pixels darker than the blend color do not change. This is useful for adding special effects to an image.

Inverting Colours
Difference
Looks at the color information in each channel and subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value. Blending with white inverts the base color values.

Exclusion
Exclusion is very similar to difference with the exception that it is lower in contrast.

Adding Colour
Hue
Creates a result color with the luminance and saturation of the base color and the hue of the blend color.

Saturation
Creates a result color with the luminance and hue of the base color and the saturation of the blend color.

Color
Creates a result color with the luminance of the base color and the hue and saturation of the blend color. This preserves the gray levels in the image and is useful for coloring monochrome images and for tinting color images.

Luminosity
Creates a result color with the hue and saturation of the base color and the luminance of the blend color. This mode creates an inverse effect from that of the Color mode.

Those are quick examples of each blending mode. The key with all of them is to choose the proper colour (this bright purple is decidedly not, it is used just as an example ;) heh) as well as to fiddle with the settings. Sometimes you want to set the layer to screen but lower the opacity to get the desired effect - it's all about playing with the settings.

I'm now going to talk about a few of the blend modes that I see most often in other tutorials. Basically I want to point out options that get overlooked or just give you a better idea about that mode. First up: Exclusion.

Exclusion
I am sure everyone here has seen at least one tutorial that contains the words "blue exclusion layer" with a dark blue colour selected. If you haven't head on over to icon_tutorial, I can guarantee that there will be at least 2 on the front page alone. ;) Anyway, what I want to touch on is that you don't always have to do a blue layer. Pick a different colour and you can get all sorts of nice colouring effects.

Here I have used a dark blue (far left), a dark green (center) and a dark red (far right). Each nice in their own way in my opinion. So change it up a bit, pick a different colour for that exclusion layer than just a dark blue.

Overlay and Soft Light
Overlay and Soft Light you may find get overused but depending on the picture, you may want to use them just to bring out the shadows and highlights. Here I have duplicated the layer and set the top layer to soft light and overlay.

In this instance, I find the Overlay here to be too dark so if I were to make an icon, I'd use the soft light. However, there are times when the image doesn't need to have one of these layers and again, you may want to have that definition but find it a bit too dark so you could lower the opacity on the soft light or overlay layer to get it where you want it.

Screen
Screen is really good for lightening up an image. It's also very commonly used with light textures because of the neat effects that can come about. You can also of course, use it to add some colour to an icon. Here are some examples of various uses.

With this and every other blending mode, the key is to play with it. You may find a colour that works great on Pin Light but that same colour looks horrid on Multiply. The best thing to do is to fiddle with the settings and when in doubt? Ask a friend for their opinion. ;)

And finally, here is an icon created using only the techniques discussed here (with some text added):

See if you can figure out how I did it. ;) (And it is free for the snagging, no credit required)

This brings us to the end of my photoshop series. This was as far as I had ever planned on going. This won't be my last tutorial by any means, just the last one in this series. With everything we've covered in this and the last 5 tutorials, you should be well on your way to making spectacular graphics! Don't forget to check the other tutorials in this community for more help!

Tutorial: Re-coloring part A - replace color

2006-02-10T22:26:02Z

Tutorial Type: program
Skill level: intermediate
Program used: PS-CS, PS7
Notes: I used screencaps from Photoshop CS for this tutorial, but the same dialogue boxes are available in Photoshop 7 (one's on my laptop, one's on the family computer, so I checked!) - although as far as I know, there isn't a replace color feature in PSP, when I used PSP5, there was a tool that could be used with similar effects.

Goal for this tutorial: to show how color can be altered in an image through the replace color setting in Photoshop, also to explain the options

Starting Image: - this is from Getty Images and is the complete picture, simply resized to 100x100px for practicality. Use this image to follow along, or use one of your own.

If this is your first time playing with the replace color feature in Photoshop, I highly recommend using a picture with simple coloring, such as the one I am using. It is easier to see what happens with different settings, and it's also more likely that you'll have positive results, thus reducing frustration. You needn't use an icon sized image - in fact, when I was making an icon with this, I used it at full size, then reduced it for this tutorial! Unfortunately, the dialogue boxes could not be made any smaller and resizing them lost some detail, so these images are somewhat large.

The "color replace" can be found under Images -> Adjustments -> Replace Color. I may use different terminology throughout this tutorial, but this is what I will be referring to. I always want to call it "color replacement" but that's not the official wording, alas.

The default dialog box should look something like this:

1. The Selection Section
My image is on the left for reference purposes. In this example, I have used the dropper tool to choose the color I would like to change. In this case, it is the green background, where the arrow is pointing. This color is show in the top green box. That box will always be whatever you have clicked to change.

The middle box is like a mask. Everything that shows up white will change. Everything black is unaffected. As you can see here, there are three white spots which correspond exactly to the green my dropper tool picked up.

The "fuzziness" slide is similar to the "tolerance" slide on the magic wand tool. By setting it to 0, you are telling it to only change the exact color in the upper box. By increasing it, you are telling it to allow variations on the color, both ligher and darker and more or less red/blue. The next two examples show what happen when you change the fuzziness.

Do you see how some areas become grey? Those areas will be adjusted only partially. It is as though an opacity filter has been placed on the color tool. The lighter the grey, the more it will be affected by the color change. Thus in example two, the girl will not be adjusted at all, and the left side of the background will only be slightly changed, while in example three, the background will all be changed and the green tints in the hat will change slightly.

2. The Replacement Section
The next example shows what happens when you change the slides in the bottom half of the box, using the selection settings from the last example.

As you can see, these work like the Hue/Saturation settings. The top slide changes the hue. The color you selected will always be in the middle, in this case green. The opposite of green is magenta, therefore when you go to the edges, it becomes more magenta. The middle slide changes the saturation. All the way to the left will remove saturation, as in greyscale. All the way to the right will add saturation. The bottom slide adjusts luminosity. The left is more black, the right is more white.

This is example is good because you can see how, by choosing a green on the far right of the image, the left side is changed differently because it is not as similar to the selection color - it is grey instead of white, so the adjustment is on a "lower opacity" (so to speak). Move the slides around and see how they affect the color.

3. Replacing Color in a Specific Area

You can also replace specific selections. The marching ants indicate I have selected the girl's hat to replace the color. In the replace color box, I used the dropper to choose a khaki tone in the hat (right about where the arrow points) - but it's also present in her face! Note the difference in the central box from when we selected a green in the background. However, by using the selection, when I used the replacement slides, only the hat was affected.

4. The Selection Box Image

This example is, unfortunately, slightly out of order. It would have done best up in the first section, but I forgot to take a screencap until after I had changed the hat, and I didn't want to be confusing because of that.

At any rate, this shows how the two radio buttons work. The "selection" button causes the box to show similarities to the selected color in greyscale. The "image" button shows the original picture, where you selected the color. If you're trying to compare a new color with an old, this works really well in conjunction with the "preview" (which I've been using all along). However, for knowing how much color is being replaced, the "selection" button is my preference.

5. The Dropper Selection

I wanted to brighten the girl's skintone, so that it wasn't so grey compared to her hat. However, by selecting part of her face with a high fuzziness, I also ended up changing the hat and shirt colors, which I didn't want! But the detail was very small and I didn't want to take the time to use the freeform selection tool when the colors are so similar. What did I do? I used the Dropper +. Like with the various selection tools in the basic menu, you can use the plus and minus droppers to add and subtract shades from your selection area - but be careful, because using the fuzziness slide might make your efforts nill.

As you can see, by using a relatively low fuzziness and selecting portions of her face AND hand, I was able to adequately adjust her skintone.

6. Where To Select?

As you saw above, using color selection from the far right of the background made it look jagged. I could have used the dropper + tool, but there's an even easier way to fix the problem.

I instead selected from a medium shade of green, halfway between the colors on the left and right (one is less saturated and more luminous than the other). I could then adjust the fuzziness until just enough was changed. TIP: to make the highlights in her hat look right, I selected a tiny portion of the white on the right, to make it more blue than green.

The result:
Result #2:

Note that #2 is the same as the first icon but with only the background changed, then duplicated on "overlay" at 50% opacity. I include it here to show how changing color can create different moods in the same picure.

NEXT TIME: Re-Coloring Part B - Gradient Maps! With both results 1 and 2 from this tutorial as examples. Yay!

Tutorial #9 - Basic functions/tools in Photoshop 7 - part 5

2006-02-08T18:01:48Z

Tutorial Type: program tutorial #5
Skill level: beginner
Program used: PS7
Notes: This tutorial is part five of a series that I am going to do that covers the more common tools in Photoshop 7. This series is intended for those who are learning PS7 for the very first time. I can't say right now how many tutorials there will be when the series is complete but they will be posted 1-3 days apart. Be warned, this is image AND text heavy.

We last left off with the various text tools so let's jump right in with the Pen tool!

Pen Tool
The pen tool lets you create straight lines and smooth flowing curves with greater precision than is possible with the freeform pen tool. For most users, the pen tool provides the best control and greatest accuracy for drawing.

So basically the goal of the pen tool is to make it a bit easier to draw than to do it freehand. This is likely most helpful for those of us who are no good with the mouse drawing to begin with. ;)

There are two main ways to create shapes using the pen tool. If you want to create a shape with curves, click once on the canvas and drag to create your starting path. Click again on one of the anchors (the small squares) and drag to create the curved portion.

To create straight lines or straight edge shapes, click once on the canvas to create your first anchor and then click elsewhere on the canvas to place another anchor point. If you want the angle of the lines to be a multiple of 45^o then hold down shift when you click again. You can create as many anchor points as you wish.

You may notice that some of the squares are hollow and there are some that are solid. The squares that are solid (colour-wise) are the ones that are selected. I want to point out the other options available with the pen tool.

The freeform pen tool lets you draw freehand. It's like you would draw with a paper and pencil. The difference between using the pen tool and the pencil tool or the brush tool is that anchor points are added and you can move or modify those anchor points as you see fit once the path is complete.

If you have this tool selected you can also turn on the Magnetic option (not pictured, but it's on the Options bar when you have the freeform pen tool selected) which snaps the path to a predefined edges of the area on your image. You can define the range and sensitivity of the snapping behavior, as well as the complexity of the resulting path.

The add anchor point tool comes on automatically when you hover your mouse over part of your path. It does exactly what it says and allows you to add an anchor point. The delete anchor point is the reverse of the add anchor point tool and comes on when you hover your mouse over an existing anchor point. Remove the point by clicking on it.

The convert point tool allows you to convert corner points to curve points and vice versa.

* To convert a smooth point to a corner point without direction lines, click the smooth anchor point.
* To convert a smooth point to a corner point with direction lines, make sure the direction lines are visible. Then drag a direction point to break the pair of direction lines.
* To convert a corner point to a smooth point, drag away from the corner point to make direction lines appear.

The Shape Tool
I'm just going to lump all the shapes into one here. The shape tool allows you to create different shapes on your image. You have the rectangle, rounded rectangle, the ellipse, the polygon, the line and the custom shape tool. All of these allow you to add certain shapes to your image as you would expect.

I have created examples of each tool as you can see. The custom shape tool is pretty cool. There are all sorts of preset shapes to choose from. You can also create your own shapes if you are so inclined. I will point out one option at the top there, the style option. This dictates what sort of style to fill your shape with. In the example above I just left it at none but here are a couple of examples with different styles.

All of those shapes are available by changing the set of shapes to Animals in the shape menu. :)

I know I said in the last tutorial that I was just going to look at these two tools but I'm going to finish up the tools bar. I am not going to go into a whole lot of detail with these last few tools, I'm just going to give a quick rundown of what they are.

The Notes Tool
Allows you to add notes or an audio annotation to your file. To add a note, select the notes tool and click on your canvas. Then type in the text you wish to include. For the audio annotation you need to have a microphone connected to your computer.

The Eyedropper Tool
The eyedropper tool picks out a colour from an area on your image and sets it to the foreground or background colour. To select the colour as your foreground colour, just click on the part of the image you wish to use. To select the colour as your background colour, hold down the ALT key when you click.

The colour sampler tool allows you to choose colours and save the information in the info palette so you have that information at easy access. You can select the tool using the menu in the tools bar or by holding down Shift when clicking with the eyedropper tool.

The measure tool calculates the distance between any two points on your canvas. When you measure from one point to another, a nonprinting line is drawn and the options bar and Info palette show the following information:

* The starting location (X and Y).
* The horizontal (W) and vertical (H) distances traveled from the x- and y-axes.
* The angle measured relative to the axis (A).
* The total distance traveled (D1).
* When using a protractor, you can view two distances traveled (D1 and D2).

The Hand Tool
The hand tool is used to navigate your image. If the entire image is not visible in your work area, you can click and drag with the hand tool to pan to different parts of the image. (Rather than using the scrollbars for example)

The Zoom tool
The zoom tool is used to zoom in and out of your image. Double-clicking the zoom tool returns the zoom to 100%. Clicking once will zoom in, ALT+clicking will zoom out.

Colours
Here you can select your foreground and background colours. The top - or front - box is for your foreground colour and the bottom - or back - is for the background colour. Clicking the little arrows will switch the two colours and clicking the little black/white version will return the colours to black and white. Here I have a red colour as the foreground colour and white as the background.

The last few sections
That's my fancy name for the last three sections. heh

(1) Edit mode - Edit in Standard Mode or Edit in Quick Mask Mode Standard mode is what you'll use 99.8% of the time. Quick Mask mode lets you edit any selection as a mask without using the Channels palette and while viewing your image. The advantage of editing your selection as a mask is that you can use almost any Photoshop tool or filter to modify the mask.
(2) Screen Mode - Standard Screen Mode, Full Screen Mode with Menu Bar, Full Screen Mode This just changes how photoshop looks. Choosing something other than Standard allows you a bigger work space because it hides the various bars at the top of the window.
(3) Jump to ImageReady - Does exactly what it says. It opens the active document in ImageReady so if you wanted to add animation or something you can do that.

That brings us to the end of this part of my tutorial series. In the next part of this series, I am going to look at the layers palette and blending modes! That will be a pretty big one so watch out for that!

Questions and comments are of course welcome.

Tutorial #8 - Basic functions/tools in Photoshop 7 - part 4

2006-02-05T06:01:25Z

Tutorial Type: program tutorial #4
Skill level: beginner
Program used: PS7
Notes: This tutorial is part four of a series that I am going to do that covers the more common tools in Photoshop 7. This series is intended for those who are learning PS7 for the very first time. I can't say right now how many tutorials there will be when the series is complete but they will be posted 1-3 days apart. Be warned, this is image AND text heavy.

Before we get started I just want to apologize that it's taken me so long to get this next section up. I have been having some personal problems and that's why it's taken a bit longer. Sorry!

We last left off with the Sponge tool. Today we will be starting with the Path Selection Tool. For this tutorial I won't be using any photos because there is no real need. Sorry gang! ;)

Path Selection Tool
The path selection tool allows you to reposition a path component (including a shape in a shape layer). You can copy parts of the image, merge other parts together, reshape them, move them, or delete them.

The most simple use of this tool is to move part of your image or shape somewhere else. Click on your selection and drag it to the new location. You can move some of it off the working canvas and it will still be available.

To make a working path that you can do more with, select the shape tool and then click the path button on the options bar. This will allow you to create all the paths you want and then you can merge them, move them around, delete them or whatever else you may want to do.

*You can see the combine button in the second screen shot. It is available when the pat selection tool is the active tool.* I'm not really going to talk about this tool much more than this. I have never used this tool (before now) and for the purposes of this series, we aren't going to go into much further detail.

Direct Selection Tool
The Direct Selection tool is used in conjunction with the path selection tool. You can use this to reshape your path, add more anchor points which can be used to reshape or delete your path.

I have included a shot of what the context menu is when you right click on a path. As you can see there are all sorts of things you can do with a path. Basically, with this tool, you click once on the path so the anchor points show up. You can then use those points to reshape your original path. As you can see, you can also fill that path, stroke the path, delete it or add more anchor points. Probably the easiest way to show this is to give you a visual example.

I put a second rectangular path at the bottom to give you a better of idea of where to look on the square for each step. I have also included the history in the screen shot so you can follow along. Now, when you add a new anchor point, it will also include control points which allow you to further stretch and twist your path.

Step 1: Drag upper left anchor "northwest"
Step 2: Add anchor to bottom of path
Step 3: Drag new anchor point "south"
Step 4: Drag control point "southwest"
Step 5: Drag control point "east"
Step 6: Add anchor to right side of path
Step 7: Drag anchor point "west"
Step 8: Drag control point "south"
Step 9: Add anchor path to original stretch (step 1)
Step 10: Drag anchor point "southwest"

I then right clicked on the path and selected Fill Path. I was given the following menu:

From here you can choose how to fill the path and other options for how the fill should appear. I chose 75% opacity and selected the pink colour for the fill. I left the other settings alone however you can fiddle with them if you wanted to try something else as well.

Like the path selection tool, I'm not going to go into much more detail. I'm just introducing you to these tools. :)

Text Tool
The text tool, I am sure, everyone is familiar with and if not I'm sure you can at least surmise what it is for. It's for adding text to your image of course!

On the option bar as you can see, there are all sorts of things you have to choose from. Let's get a quick summary of the different options. (A visual example of all the appropriate sections is to come)

(1) Change the text orientation - set it to vertical or horizontal.
(2) Font Face - which font you want to use. Here I have selected Arial as you can see.
(3) Font Weight - Regular, Italic, Bold, Bold Italic are the options here. Not all fonts will have each option.
(4) Font Size - how big or small your font is. *NOTE: If you have set your font size to 300 px and it is still very small, make sure your resolution is set to 72 px/inch*
(5) Anti-Aliasing - None, Sharp, Crisp, Smooth, Strong - this is used to smooth the edges of your text so that it is not so jagged. The only time you may want to set it to None is if you are using a bitmap font.
(6) Text Alignment - Left, Center, Right - how the text is aligned
(7) Text Colour - What colour your text will be
(8) Create Warped Text - Puts the text into a curved shape of some sort
(9) Toggle the Character and Paragraphs Palette - just what it sounds like ;)
(10) Apply or cancel the changes

Here is a visual example of each section.

Vertical Text Tool
This is exactly the same as the regular text tool except you start off already vertical. You have all the same options as you would with the regular text tool.

Type Mask tool
When you use the horizontal type mask tool or vertical type mask tool, you create a selection in the shape of the type. Type selections appear on the active layer, and can be moved, copied, filled, or stroked just like any other selection.

What this means is, it is basically like the lasso tool or the rectangular marquee or any other tool you would use to create a selection except it is in the shape of text. This gives you more flexibility for how you fill your text so that rather than just solid colours you could use gradients for example. Here is a an example of what I mean.

All you have to do is create a new layer and start typing with the Type Mask tool. You can use the horizontal or the vertical - they are similar to the regular type tools. Once you have your text typed in, select your fill - I decided to use a gradient and I dragged the gradient from the top left to the bottom right to get this effect.

Next time we will be looking at the pen tool and the shape tools.

The next tutorial may not be up for a few days. As I mentioned at the beginning, I am having some personal problems but I'll get them up as quickly as possible. Thanks for all of your encouraging feedback gang!

Tutorial feat.Scarlett Johansson

2006-02-01T01:09:43Z

Tutorial Type: Icon

Skill level: Beginner

Program used: Paint Shop Pro 9
Notes: The image used is from Scarlett Johansson Fan

First Step: Create your base. I used this image of the beautiful Scarlett Johansson

Second Step: Sharpen your base twice

Third Step: Smooth your base, avoid the eye and lip areas. I also used a little smoothing on the tip of the nose, but on a very low opacity, which is my preference.

Fourth Step: Merge all layers. After merging, duplicate new base and set it to Dodge at 20% opacity. (Bring above all.)

Fifth Step: Duplicate new base again but this time set it to Screen at 20% opacity. (Bring above Dodge layer.)

Final Step: Create a new layer and flood fill that layer with #140b3f. Set this layer to Softlight at 28% opacity. (Bring above Screen layer.) If you would like, you can smooth out more areas, but I personally liked the outcome.

Finished!

If there are any problems (I don't think there will be, but if there are...) just ask me.

Tutorial #7 - Basic functions/tools in Photoshop 7 - part 3

2006-01-30T23:40:42Z

Tutorial Type: program tutorial #3
Skill level: beginner
Program used: PS7
Notes: This tutorial is part three of a series that I am going to do that covers the more common tools in Photoshop 7. This series is intended for those who are learning PS7 for the very first time. I can't say right now how many tutorials there will be when the series is complete but they will be posted 1-3 days apart. Be warned, this is image AND text heavy.

When we last met, we finished up with the Art History Brush. So today we start in on the next section. For this part of the tutorial I will be using this picture of Keanu Reeves.

Eraser Tool
The eraser tool does exactly what you would expect it to do - erase parts of your picture. You can use any brush tip to do this. If you wanted to you could use a non-standard brush. Here is the image cropped down that we'll be working with.

And here is the same image using the eraser a bit. When you use the eraser tool what shows through is whatever the background colour is set to. In this case, my background colour was set to a purple colour so that's what is showing through. It is not showing a transparent background because I simply cropped the picture. If you wanted a transparent background layer you could either create a new document and drag this image to that document or go to Layer>New>New Layer from background and that will turn the image into it's own layer. Then create a new layer, and drag it below the image. Anyway, here is the picture where I've used the eraser tool. The top left bit was done with a regular round brush. The Xs and >>> were from a brushes alleycatfish so you are not limited to erasing with a "regular" brush.

Background Eraser Tool
The background eraser tool lets you erase to transparent. This means that rather than whatever the background colour is set to, it will erase those parts of the image and leave them transparent. This would be helpful if you had a layer below your working image and wanted to erase bits to show that layer through.

I've highlighted a few things here. Up at the top are some options that you can use to configure how to use this tool. I have put a checkmark in "Protect Foreground Color" and selected a dark grey from Keanu's jacket. With this turned on and this colour selected, if I am erasing and I accidentally start erasing on his jacket, it will be spared because it matches the foreground colour. Let's look at the settings I've highlighted.

Limits: Choose Discontiguous to erase the sampled color wherever it occurs under the brush; Contiguous to erase areas that contain the sampled color and are connected to one another; Find Edges to erase connected areas containing the sampled color while better preserving the sharpness of shape edges
Tolerance: A low tolerance limits erasure to areas that are very similar to the sampled color. A high tolerance erases a broader range of colors.
Sampling: Continuous to sample colors continuously as you drag; Once to erase only areas containing the color that you first click; Background Swatch to erase only areas containing the current background color.

That information is all taken from the help file but let me break it down a bit. Discontiguous under limits means it acts similar to the regular erase tool. Anything that comes under the brush will be erased (but to transparent instead of the background colour). Contiguous is like similar to using the magic wand tool in that it finds the colours that are connected. Find Edges allows you to better define edges around an image. Below is the visual representation. Imagine the white parts are the transparent parts.

Raising or lowering the tolerance says how close to the sample colour (first click) the colour on the image has to be for it to be erased. Again, here is a visual representation. The highlighted part on the left had the tolerance set to 5%. The erased bits on the right had a tolerance of 79% so you can see that a high tolerance will start erasing colours you may not want it to.

For sampling, if you choose continuous it will keep choosing colours as you drag your mouse around. That means unless you have other things configured correctly, you may erase bits you don't want to. Choosing Once means you click once and that is the colour you will erase. (Set to foreground) Background Swatch allows you to choose a colour that will be set as the background colour and it will erase areas containing that colour. Again, here is another visual representation.

Tolerance was set at 50% for those.

Magic Eraser Tool
The Magic Eraser Tool combines the magic wand tool with the eraser tool. So with one quick click you can select AND delete big chunks of colour. Very useful! :D One thing to note: If you're working in the background, or in a layer with locked transparency, the pixels change to the background color; otherwise, the pixels are erased to transparency.

As you can see there are similar options here as for the background eraser tool and they work the same way. You can also see chunks of the background colour that I have erased.

Fill Tool
Even if you've never used Photoshop before you probably know what this tool does. The paintbucket! It fills a layer or a selection with a colour or pattern that you define.

As you can see, I selected a part of the image and filled it with the purple colour. What I actually did though, was create a new layer and fill that selected area on the new layer. Anyway, let's look at the options we have for this tool.

Fill: This is where you choose foreground or pattern. Foreground fills it with a solid colour and pattern fills the selection with a chosen pattern. (There is an example a bit farther down)
Pattern: This is available only if you have chosen pattern. Here you choose the pattern you with which you wish to fill.
Mode: This is where you can choose the blending mode. We'll talk more about this when we get to the layers palette tutorial :)
Opacity: This is how opaque/transparent you want your fill to be. 100% means that there is no transparency at all. (There is an example for this as well)
Tolerance: This is the same as with the eraser tool but rather than erasing we are filling. The tolerance defines how similar in color a pixel must be to be filled
Anti-Alias: This defines whether or not to smooth the edges of the fill. If it is unchecked you will see more ragged edges. For example, 98% of text on graphics should be anti-aliased to keep a nice smooth look. (Bitmap fonts generally aren't anti-aliased)
Contiguous: Again, similar to the contiguous option for the eraser tool. It finds the connected colours and fills those with the colour you have chosen.
All Layers: To fill pixels based on the merged color data from all visible layers, select All Layers. Basically it takes a sample of the pixels in all areas and fills the common ones. (There is an example of this as well)

You can see the marked areas giving examples of the various ways you can use the fill tool.

Gradient Tool
The gradient tool is similar to the fill tool with the exception that you are filling with two or more colours. Gradients can be used to create neat colouring effects over images.

Let's look at the options we have available with this tool. The 5 icons in the upper left beside the gradient that I chose represent the type of gradient. By default linear is selected but you have the option to select Radial (circular), Angular (which looks like the top of a cone), Reflected (which is basically what it sounds like - the right mirrors the left), and Diamond (which makes a diamond shape).

Mode is again the blending mode. You can see one area that I have added a gradient to, I have set the layer to Overlay just to give you a hint of what kind of neat things can be done, colouring-wise. Opacity is the same as it is in any other feature - how opaque or transparent a layer is. Dither allows for a smoother blend and less "banding". Reverse switches the order of the colours. This is more noticeable on the non-linear options. This is probably more noticeable in gradients with 3 or more colours. Transparency allows you to use a transparency mask. Here is a visual example of these different options.

Blur Tool
The blur tool does what it's name implies - it blurs areas that you "paint". Again, you can use any type of brush type you like, I generally use a small round brush. A lot of people use the blur tool for smoothing out skin after sharpening and this can be done but you want to keep the strength very low if you do. I find it more useful for smoothing out the backgrounds on images rather than on skin.

Here I have blurred part of the background near Keanu's face and also the left side of his face. This image hasn't been sharpened at all so in my opinion, the smoothed skin is too smooth, it doesn't look realistic. So if you're going for realism - at least a bit - use the blur tool on skin sparingly. Using it on the background here, it would be much more effective if I had used a larger brush.

Here I have used a size 31 brush and blurred the background. You will probably want to be a bit more careful around his hair but I am just trying to give you an idea of what it looks like. I actually like this sort of thing because the image is sort of dreamlike. :D

Sharpen Tool
The sharpen tool is generally used for helping to define lines in an image. In icon making, the most common use seems to be to make "sparkly" eyes and lips. The easiest way to describe it is to show you. :)

Now I did this very quickly but I have blurred the skin and then sharpened the eyes and the lips. I just brushed over the eyes and the lips with the sharpened look. Now personally, I don't use this tool. I think I've used it maybe once or twice and that was just to pull out a line in the icon - like the line of a coat or something - and that's it. I find that if you really want sparkly lips and eyes then to do a sharpen either by sharpening twice and using the smudge tool and just not touching the lips and eyes (they look sparkly comparatively) or using the unsharp mask to sharpen the image. You *may* want to dab once on each eye but I wouldn't recommend it. Stick to picking out lines with this tool or if you want to sharpen your image, use the unsharp mask. ;)

Smudge Tool
The smudge tool simulates the actions of dragging a finger through wet paint. The tool picks up color where the stroke begins and pushes it in the direction you drag. I can't really describe it any better than that. You will find a lot of people use the smudge tool set to a very low strength to smooth out skin.

You can see the smoothed out skin on the left hand side. I've saved it as lower quality to try and preserve the load on my server but you can still see the difference. Over on the right I have enabled the "finger painting" option (which is on the option bar) to show you what that looks like and then in the middle right I have set the options to the settings listed.

Dodge Tool
In the simplest of terms, the dodge tool is used to lighten areas on your image.

I used the dodge tool on his jacket as you can see by the circled area. The "wtf?!" area is also a lightened area. Doesn't it look like his jacket is mouldy? Ew! Anyway, when I did the lightening, the Range was actually set to Midtones. As you can see you can set it to Shadows and you can also set it to Highlights. (Midtones to change the middle range of grays; Shadows to change the dark areas; Highlights to change the light areas.) The Exposure is similar to the Opacity option in other tools. The Airbrush tool at the end of the options bar allows you to use the tool as an airbrush rather than a regular brush.

Burn Tool
The Burn tool is the opposite of the dodge tools. It is used to darken areas on your image.

Poor Keanu! He's either got a very horrible tan or he's very dirty! Ah the joy of the burn tool. I used it on his skin because it would be the most noticeable. The options that are highlighted at the top are exactly the same as they are for the dodge tool except of course with the burn tool you're darkening areas.

Sponge Tool
The sponge tool subtly changes the color saturation of an area. In Grayscale mode, the tool increases or decreases contrast by moving gray levels away from or toward the middle gray. Can't get much simpler than that? Let's take a look!

Flow is similar to Opacity in the other tools and Exposure in Dodge and Burn. I don't have any other information on this tool because honestly, I have never used it. Although it does seem like you can do some pretty neat things with it if you play around with it.

And that's it for this section! Next time, Path Selection Tool, Text Tool, Pen Tool and Shape tool!

Before we end this completely, I'm gonna let you in on a little secret. The easiest and best way to figure out how to work these tools? Aside from reading tutorials like mine? Play with them! I'll be honest again and say that I haven't used a lot of these tools - either at all or very sparingly. But I spend some time playing with them to figure out what they do and that's what you should do too. Writing these tutorials has taught me all sorts of neat things - it usually takes me 2-4 hours to write one of these because I want to know what the heck I'm talking about ;) - so hopefully they are helping y'all as well!

Look for the next tutorial in the next few days. :)

Welcome!

2006-01-28T17:23:25Z

Hi! Welcome to itut!

As this community has grown so much in such a short time I thought I would make an introductory post of sorts to help people get acquainted with the community. I am obliquity (or Lyn) the creator and one of the mods. My goal with this community was to provide a place that provided only tutorials. There are no posts asking for help with certain settings, how to do a certain style or anything like that - tutorials only. Why did I decide to do this? Because I got very frustrated wading through all sorts of posts, unable to get to the actual tutorials. I have nothing against such communities, in fact I am a member of a couple and use tutorials I find there, however I wanted a place where I could go and bam! Tutorials everywhere! So that's how this community came to be.

The co-moderators of this community are tamswitter and dontlickit. There is also a community email address at itutcomm(at)gmail.com if you have any questions or concerns that you believe deserve private attention.

Like any community, there are rules and guidelines and those are on the userinfo so I won't bother reposting them here. I trust we are all mature enough to read those on our own. ;)

Because I would like to keep this community as high quality and user friendly as possible, posting access is granted by invitation OR by application only. There are no exceptions to this. Everyone and anyone is welcome to join the community and post comments but you will not automatically be granted posting access. Even if you are granted posting access, the posts are still moderated to make sure that the tutorials are easy to follow for any skill level.

Now, earlier in the post I mentioned that there will not be posts asking about specific techniques and this is true however this does not mean that you cannot ask a question about how to do something or about a tool in your program. If the question is related to a tutorial, post it as a comment on that tutorial and hopefully the author will answer it or someone who reads the comments will be able to answer it. Alternatively, there are two posts where you can post a question.

Icon Questions - leave a comment here if there is a specific technique you would like to know more about. For example, you want to know how to work with black and white images. :D
Program Questions - leave a comment here if you have a question about a tool in your program or are experiencing problems. For example, "How do I get rid of that little 1 on my image in photoshop?" or "What does the clone stamp tool do?".

And know that my goal was not to be a tutorial for elite icon makers - my goal is to provide help for anyone who wants it - whether they are beginner, intermediate or advanced. Happy iconning!

Tutorial #6 - Basic functions/tools in Photoshop 7 - part 2

2006-01-27T23:42:28Z

Tutorial Type: program tutorial #2
Skill level: beginner
Program used: PS7
Notes: This tutorial is part two of a series that I am going to do that covers the more common tools in Photoshop 7. This series is intended for those who are learning PS7 for the very first time. I can't say right now how many tutorials there will be when the series is complete but they will be posted 1-3 days apart. Be warned, this is image AND text heavy.

When we left off, we had last learned the slice tool. We are now going to look at the next little section of tools starting with the Healing Brush Tool. For this tutorial, I will be using a picture of Luke Wilson.

Healing Brush Tool
The healing brush tool is used for cleaning up blotches and other discolourations. I honestly don't use this when I make icons and graphics because I don't tend to use pictures that require "healing" but it doesn't always have to be used just for fixing up pictures. I am going to keep the image larger so you can see the effects of the tool. So here is the image I am going to work with.

Now, let's take the healing brush and get rid of that "fractured-simplicity.net" - not that I have a problem with that because it's my friend's site but it's just to show you how the tool works. ;) Anyway, select the tool and Alt+Click an area around where you want to heal and that is where the healing will come from. It copies that area and "paints" over what you are trying to fix. When you ALT+click the brush tip changes to a circle with the crosshairs to select the area. I sadly couldn't get a screenshot of it.

You can see the area where I have started to cover up the website address. You can go over the whole thing and then touch it up and when you're done it should look like nothing was ever there.

As you can see in the above image, the address is completely gone and I also did the right side of his jaw to get rid of the stubble. You do have to play with it to make sure you consistently get the right colours so that it does look smooth. This was done quickly - you will obviously want to spend a bit more time to make sure that the areas are smoothed over and it's not as obvious where the changes were made.

Patch Tool
The patch tool is located with the Healing Brush tool. To get to it, click and hold the healing brush tool until the menu pops up and select Patch Tool. The patch tool is similar to the healing brush tool except that rather than it being a brush, you can select an entire area to patch.

As you can see, I have selected the area around the web address again because that is the area I want to patch. If you look at the upper left you will see that Source is selected. What this means is that the initial selection is what will be patched. To get that area patched, I then move the selection to the area I want to use as the patch.

And here is the finished product:

Note: I'm saving these with low optimization to ease the load on my server. Of course you want to save it with high optimization.

Now what about selecting "Destination"? What does that do? Well when you select Destination what actually gets patched is where you move the selection to in the first step. So using this picture, you would select a part of the picture using the patch tool first and then move it over top of the area you want patched.

I have selected an area to use to patch and now I am going to move that over to cover the text.

And here is the finished product:

If you really wanted to you can click "Use Pattern" to fill the selection with whatever pattern you have selected.

Brush Tool
The brush tool is probably the most used of all tools when it comes to icon making. You know by now that you can download all sorts of different types of brushes to use on your icon or header or what have you. The best way to use the brush tool is to create a new layer and use the brush on that new layer.

As you can see I have created a new layer and that is where I will use the brush. Up near the top you can see the options that are available to you when you select the brush tool.

Here I have clicked the down arrow beside the brush (1) to bring up the brush menu. As you can see, I have a collection of brushes loaded and have selected a circular one with a size of 23. You can use the slider to make the brush smaller or larger. In (2) I have selected the right arrow to show the brush menu that lists all of the brushes I have installed. To change to another brush, just select one from the list. It will prompt you to load the brushes and you can say Yes or choose to append them to the collection you currently have loaded.

Here I have used the circular brush in white on the new layer. Of course you can use all sorts of different brushes to achieve different effects but that's not the focus of this tutorial. You can also just use regular shaped brushes to paint areas or lines or what have you. The brush tool is very versatile.

Pencil Tool
The pencil tool is used basically for free hand drawing. You can do that with the brush tool as well. Like the brush tool it's good to do it on a separate layer so that you aren't drawing on the image itself. You can also select different brushes with the pencil tool and they will be much more pixelated.

Clone Stamp Tool
For this part, I am going to use this picture by Dennis Flood. It will give you a better idea of what this tool does. Basically, you can select a part of the image you want to clone and then paint it somewhere else. It is similar to the healing tool in that sense but is a lot cooler. :D

I have resized this a bit. We are going to copy the flower.

I ALT+clicked on the flower on the left and moved over and started painting with a round brush. Continue in this manner until you have finished the area you wish to clone.

This is basically the finished product. What you would want to do now is use the healing brush tool to clean up the edges around the flower on the right. :)

[edit]Thank you to fileg_ for this further clarification of the differences between the clone tool and the healing brush tool.

The clone brush reproduces the selected area over the the target.

The healing brush averages the selection with the target area.

This makes the healing brush great if you are trying to get rid of things like marks on skin, a blemish, a shaving cut, etc.[/edit]

History Brush Tool
"The history brush tool lets you paint a copy of one state or snapshot of an image into the current image window. This tool makes a copy, or sample, of the image and then paints with it." That's taken directly from the Help file for photoshop. Let's see it in action! I am going to use the flower picture again.

The first thing you have to do is take a snapshot of the area you want to keep. I took a snapshot of the flower with the second flower just to have it there. If you look at my history window, you can see above the history there is the snapshot there. Make sure the brush is in the box beside the snapshot you just took. You can also see that I have undone the changes so that I'm back to having just one flower.

Painting now with the history brush I can return the image back to having the two flowers. I have not used this tool before now so I don't know how much use you would get with this tool when just making icons. The one thing to note about this tool versus the cloned state is that you can take a snapshot at any state and paint using that rather than just with the current image. :\ I hope that makes sense!

Art History Brush
Keeping with the flower image, the art history brush allows you to go over your image so that it looks more like a painting. Again, you'll need to take a snapshot to paint from.

Start off the same as we did with the history brush. Take a snapshot of the state you want to "paint". You can then play with the settings at the top for the kind of stroke you want, the size of the brush you want to use, and the radius of the artistic brush strokes. I have used a round brush on size 9, opacity at 25% and the dab style. I played with it a bit to find a setting I liked.

What I did here was just create a new layer and fill it with white. I then started painting with the Art History Brush and this was the result. You can of course do it without the white layer or with a different colour or even with a different type of brush.

I know I said I would do more of the tools however when I said that I didn't realize that each tool had so many other little options so I'm going to leave this here for now. Next time we'll look at the Eraser tool, the Fill tool, the Smudge tool and the Dodge tool as well as all of the ones that share the same spots.

Look for the next tutorial in the next few days.

Tutorial #5 - Basic functions/tools in Photoshop 7

2006-01-26T19:10:15Z

Tutorial Type: program tutorial #1
Skill level: beginner
Program used: PS7
Notes: This tutorial is part one of a series that I am going to do that covers the more common tools in Photoshop 7. This series is intended for those who are learning PS7 for the very first time. I can't say right now how many tutorials there will be when the series is complete but they will be posted 1-3 days apart. Be warned, this is image AND text heavy.

This tutorial is going to be about some of the more common tools used in icon and graphic making in Photoshop 7. This tutorial is not the be-all and end-all of explanations, it is here to get you started and more familiar with the various features that are available to you. And, unfortunately, it is based on those tools that I use most so if there is something you want more information about, leave a comment and if I can't answer your question, I'm sure one of our other knowledgeable members will be happy to help!

Let's start with the program after you have just opened it. Below is a screenshot with various parts numbered and those parts are listed below the image. A more in-depth discussion of each numbered feature will follow.

1) The Canvas - this is where you do all your work
2) The Tool bar - quick access to the most commonly used tools
3) Navigator/Info - when you have an image on your canvas it will show up here. If you have zoomed in, a red box will appear on the image in the navigator window which will outline the area you are currently looking at. You can zoom in and out on this window.
4) History/Actions/Tool Presets - for me, this is most often on History. It shows the last X number of steps you've done - where X is a number you can specify. I like having it on history because I can quickly go back a step if I don't like something I've done. Actions are predefined sets of scripts that do certain things. I won't really be talking about those in this tutorial other than just mentioning it here. Tool Presets are here so you can create a preset setting for the various tools. If you uncheck "Current Tool Only" you can see the default presets.
5) Layers/Channels/Paths - I'm not going to talk about Channels and Paths here. This is your Layers window. When you have more than one layer you will see them listed in this window.
6) Color/Swatches/Styles - This is pretty much what it sounds like. It will give you information about the current foreground colour, change colour, choose a swatch or select a style to affect a layer or object.
7) File Browser/Brushes - These are both very handy things. The file browser allows you to quickly see files in various locations on your system. It's exactly what it sounds like. Brushes allows you to change how a brush works. You can change the direction of a brush, the scattering, the texture, the spacing and all sorts of other neat things.
8) Tool Info Bar - Heh I don't know what the correct term for this section is but that's what I'm going to call it. As you can see in the image I have the Move tool selected and so that section shows various options available for that tool. This content of this area will change depending on which tool you have selected.
9) Status Bar - Again, another area I'm not sure if that's the correct name or not but that's what it is called in 90% of other applications so we'll go with that. Down here you can change the zoom level, see other options for the tool you currently have selected, save your document and see how large the file is currently (saved as a PSD).
10) File Menu - This is your standard file menu where you can access various features like Save and Open as normal however there are all sorts of other tools available here as well.

So to really get things started, let's look a little bit more in-depth into the tools on the toolbar. I am going to be working with this picture of one of my cats. :P

Move Tool

I have circled the move tool as you can see and underlined one of the options at the top. I have decided to show the bounding box on the image because the picture of my cat is larger than my canvas and I want to resize it. To resize an object and keep the ratio, hold down the Shift key while clicking and dragging one of the corner boxes. After resizing and moving, this is what I have.

That's it for the move tool.

Marquee Tool
I am continuing with the last image for this section. By pressing and holding the marquee tool button, you can see the different options available to you.

The marquee tool (either rectangular or elliptical) is used to select portions of whichever layer you are on. You can then do all sorts of different things with that selection - fill it with a color, delete it, add a blending mode to it, whatever you wish.

I have selected part of the picture using the elliptical marquee tool as you can see and will show you the different examples of what you can do with that selection.

	Deleted or Cut the selected portion
	Added a new layer and filled the selection with pink
	Move the selected part someplace else

That's not all you can do but that gives you an idea of what you can do. Play with the different options available to do different things.

Lasso Tool
The Lasso tool is similar to the marquee tool with the exception that you can select odd shaped areas. As you can see, you can also set the feathering and whether or not you want the edges to be anti-aliased or not.

Here is an example of the odd shaped selection:

The options you have with this are exactly the same as with the marquee tool. You can delete the part you've selected, add a layer and fill it with a colour and other things.

Magic Wand Tool
The magic wand tool is used to select all of one colour in your image. This is often very useful for removing a background that you don't want to use. Just click on the colour you want removed and it will select all instances of that colour within a specific area.

Now seeing this you may wonder why it didn't select her hind legs. It didn't because I had contiguous checked off. That limits it just to that area. With it unchecked it would select all the white it can find on pita.

The options available with the magic wand tool are again, the same as the marquee tool and the lasso tool. I often use this in combination with the lasso tool to remove a background on an image if I don't want it there.

Crop Tool
This is probably my favourite tool. I love it for icon making because you set the image resolution and what the final size of the area you select should be and it does all the resizing for you!

Starting with the original picture of my cat (pita) we have this:

You can see that I have set my size to 100x100px and the resolution to 72 px/inch. You can set your crop size to whatever you want of course but I like making icons so for me it always stays at 100x100. Selecting the area I want to use in my icon we get this:

Clicking the checkmark (unseen, on the far right) to apply the settings leaves us with this:

And from there you're ready to go on your merry iconning way!

Slice Tool
The slice tool is another type of selection tool but what it does is a bit different. The slice tool is really useful if you want to have a large image with links and you don't want to use image maps. Although you can use image maps with slices as well. Basically what it does is slice up the image into a bunch of smaller ones.

(I've highlighted the "extras" there because a lot of people get that showing up when they open up photoshop. To get rid of it, just go to View>Extras and remove the check and you're set!)

When you select a part of the image, you end up with the different pieces of the image as well an HTML file when you save it. Below are the individual slices and you can see the html file created when I saved this one here.

That's it for this tutorial. In part two we will be looking at the next section of tools in the toolbar:

Look for the next tutorial in the next few days.

Tutorial #4 - Tips and Tricks for black&white pictures

2006-01-25T23:04:23Z

Tutorial Type: icon tutorial
Skill level: beginner-intermediate
Program used: PS7
Notes: This was requested by foreverred. I have labelled it beginner-intermediate because the steps we use are simple but you do need to know how to access the various parts of the program.

To start with, we are going to be using this picture of Alan Rickman. Cropped down to icon size, we have this:

I prepped the icon by sharpening it once and that's it. It doesn't need to be smoothed out at all in my opinion however depending on the picture you have chosen to use you may need to do more prepping than I've done. Here is the prepped base:

As you can see it just looks a little more clear than the original base. As far as prepping the base, black and white photos are no different than colour pictures. You can oversharpen them and oversmooth them. Below, on the left, is an example of a the base being oversharpened and on the right is one that is too smooth.

The oversharpened one has been sharpened 3 times. The over smoothed one has been sharpened twice and then the skin smoothed out using the blur tool at 70% and sharpened just the eyes. In that case, you may as well use the original base without doing anything to it at all. Note: The blur or smudge tool should never be so high if you're using it to smooth out skin. It is best to keep it low - 5-8%. If you are smoothing out background colours that's different but skin should always be done on a low number to keep it looking realistic.

Now the beauty of a black and white picture is that you can do all sorts of neat things to it to get all sorts of colour effects. Here are a series of effects done on the prepped base.

	I added a new layer and filled it with #5F6E86. I then set the blending mode to Color and the opacity to 75%
	I added a new layer and filled it with #112035. I set the blending mode to Exclusion and the opacity to 75%
	I added a new layer and filled it with one of the default gradients - a purple to orange one. I then set the layer to Lighten
	I added a new layer and filled it with #EB0732. I set this layer to Exclusion and the opacity to 60%. I then duplicated the base layer, moved it on top of the other layers and set that layer to Soft Light.

The best thing to do is fiddle with the colours and the layer blending modes. You can do all sorts of neat stuff with those. Now for a different type of example. For this part, I will be using this picture, also of Alan Rickman. (I like him :P can you tell? hehe)

My cropped and prepped base is below. I sharpened it once and smoothed out the skin with a size 8 brush and the smudge tool set at 8%.

I personally love working with black and white pictures that have light coloured clothing because it's a really fun way to add colour to an icon. I find the best way to do this is to add a new layer and fill it with whichever colour you want to use. Then set that layer to multiply and erase all parts with the exception of the clothes. Once you've got the colour just over the clothing you can change the blending mode to see what looks best. A few examples are below.

	Filled a new layer with #EB0732 and set that layer to Soft Light
	Filled a new layer with #2139CD and set that layer to Soft Light
	Filled a new layer with #CBD96A and set that layer to Multiply
	Filled a new layer with #CBD96A and set the layer to Color Burn

Now that's just playing with colours with black and white photos. You can also use brushes and filters and textures and all that fun stuff as well. Here are a few examples!

	I used this texture by dearest. I set the layer to Overlay and opacity to 80%
	I used a texture by rough_draft___ set to Soft Light
	I used this texture made by me. I set the layer to Lighten and put the opacity to 79%. I then duplicated the base and moved it on top of the other layers and set it to Soft Light

I hope this gives you a good idea for all the different things that can be done with black and white pictures. If anyone else has any tips and tricks, feel free to leave a comment with an example or two!

Tutorial - Using Mask/Poloroid Brushes

2006-01-17T22:17:05Z

Tutorial Type: brush tutorial
Skill Level: intermediate
Program Used: PSCS2
Notes: This is just a different way to use mask/Poloroid brushes.

I've noticed that most of the tutorials for using these brushes say to use the brush (in black) on a white fill layer and then set it to screen. The way I will be explaining is a bit more involved than that, but I find it to be more versatile - especially when you'd rather use a texture or a different color instead of a white background.

First, I'm starting with this picture of Jensen Ackles.

Prep the base however you want (color, crop, etc...)
I ended up with

Make a new layer and fill it (or copy/paste) with the color/texture you wish to use.
I used by colorfilter

Duplicate the base layer and move it above the texture layer. Set the duplicated base to lighten mode.

Yes, it looks like crap now, but don't worry...

Make a new layer below the duped base layer and use whichever mask/poloroid brush you want. You can place it anywhere on the icon - I prefer to start with it in the middle and move it to where I want.
I used a brush by my_givenchy that can be found here

Notice how the picture shows up nicely over the brush? That's the beauty of lighten mode :)

Now you can move the brush to show the area of the base you want in the icon. I moved it up a bit to catch more of his face.

You can't do that by using the "screen mode" method - you'd have to mess around with the whole white part of that layer.

Once you have the brush in place, ctrl+click the brush layer in the layer menu to select just the black part of the brush.

Now click on the duplicated base layer in the layer menu and go to Select>Inverse to select everything but the black part of the brush.

And press the Delete button twice to get rid of the parts of the duped base layer you don't want.

Now you can either merge the brush+duped base layers or you can link them. I prefer to link them. (To link, just ctrl+click on the layers you want linked and click the little chain-link button on the bottom left of the layers menu). Now you can move those layers around together, duplicate them, whatever.

And with a few finishing touches, you're done!

I love feedback. Questions are welcome as well. :)

Tutorial #3 - Tips and Tricks for sharpening and smoothing

2006-01-15T18:10:56Z

Tutorial Type: icon
Skill level: beginner
Program used: Photoshop 7
Notes: I am by no means, an expert when it comes to sharpening and smoothing and all that stuff. I pay attention to what people have complained about with regards to sharpening and I like to fiddle. YMMV This tutorial is also good for learning where some tools are within Photoshop.

This tutorial is extremely image heavy.

First off, I'm going to be working on a 200x200 canvas just to make things a little easier to see. Secondly, as I said in the notes, I am by no means an expert but I like to fiddle and I do tend to have a good idea of what DOESN'T look good. Again, YMMV.

Example 1
To start with, I will be using this picture of Eric Szmanda. Cropped down, I have the image below.

As you can see it is a bit fuzzy and I'd like it to be clearer. The first thing I'm going to do is sharpen it twice by going to Filter>Sharpen>Sharpen (twice). The end result is below.

Now the image is much clearer but there are some blotchy parts. I am going to use the Smudge tool with the strength at 8% and the brush size between 7 and 8 for an icon sized image and around 9 for this size. to smooth out the skin. If the Smudge tool is not visible, click and hold the Blur tool (the teardrop) until you can select the Smudge tool.

Notice the pixelation on the right hand side of his face as pointed out. We are smoothing this out so it looks like the left hand side. The result is below.

At this point, I would be ready to continue on with making my icon. I have left his hair, eyes and lips untouched. They do not need extra sharpening or extra smoothing. However you may notice that there are some parts that may stick out on your subject - sometimes there is a glare on the lips - and you can smooth that out as well.

Example 2
For this example, I will be using this picture of Hugh Jackman.

Cropped down to the part I wish to use, I have the image below.

Again, this image is a bit fuzzy so we want to clear it up. I go to Filter>Sharpen>Sharpen and just sharpen once and end up with the image below on the left. It doesn't need to be sharpened any further nor does it need to be smoothed out. Sharpening a second time gives you the image on the right.

The reason you don't do the second sharpen on this image? Because doing that and then going through the smoothing like we did in the first example will bring you back exactly to the image on the left. Why do more work than you have to? And now you're ready to continue with your iconning.

Example 3
For this example I will be using this picture of Hugh Laurie.

Cropping my image gives me the following image to work with.

This image is similar to the last example in that for most purposes, sharpening once with no smoothing will be enough as you can see on the left. However, for this example I like having the facial hair stand out a bit more so we are going to sharpen twice - the image on the right.

Going forward using the image on the right, we use the same smoothing technique we used in example one, leaving the eyes, lips and all hair untouched. The result is below.

Some people may say that the hair is oversharpened. It really depends on what you like. I used this technique on the icon below and I personally love it. So you be the judge.

[edit]
Upon receiving some concrit for the last image, I did what was suggested and the lovely spicyfry74 was right. I re-smoothed out Hugh's skin, lowering the strength to 5% (from 8%) and this is the result. (for comparison's sake, the unsmoothed image is on the left and the smoothed image with the new settings is on the right)

So one thing we can learn from this, is that settings provided in tutorials are not set in stone. These are guidelines and what works for one image may not work for another so play around a bit. :D

[/edit]

You can also use the Unsharp Mask for sharpening images. I have not mastered that yet as I just started fiddling with it today so I did not include it in this tutorial. Perhaps there is someone out there who knows what the heck they're talking about with that option that would like to enlighten us all. :)

Questions and comments are always welcome.

Tutorial #2 - adding a stroke to your icon subject

2006-01-14T22:33:52Z

Tutorial Type: icon tutorial
Skill level: beginner
Program used: PS7
Notes:
The techniques used here can be used in larger projects like headers as well, they are not limited to icons.

Finished Product:

The focus of this tutorial is adding the stroke around Eric. I have seen some other tutorials for how to do this but I found them confusing and not very simple. Hopefully you will find this very simple.

1) Find the picture you want to use. I decided to use this one of Eric Szmanda from CSI.

2) Create and prepare your base. You should have something like this:

To get my base prepared I sharpened it twice and used the smooth tool on his skin and on the background colour where there were blotches.

Adding the Stroke
3) Using the lasso tool, select around your subject. To make sure there is no background colour between the stroke and the subject, select in a few pixels. I have zoomed in on the image so you can better see what I mean.

As you can see, the selection is not at the very edge of Eric and some of him will be left behind, that's fine because you won't be able to see it once we've added the stroke.

4) With your subject selected hit CTRL+X on your keyboard (or Edit>Cut) and then CTRL+V (Edit>Paste) to paste it back onto the image as a new layer. Right click the new layer and select Blending Options.

5) In the Blending Options window, select Stroke at the bottom. It will default to a red, 3px stroke around your subject. Change the pixel width and color to whatever you like. I have used a 4px stroke with a darker shade of blue taken from Eric's shirt.

You should now have something similar to this:

To finish off the icon, I used a brush by miggy and added the text. The brush layer is between the background layer and the stroke layer. The text is on top of all layers. "eric" is done using "CSI Cream Source Inside" at 30pt and "szmanda" is done using "BrushScrD" at 14pt.

Questions and comments are always welcome.

Tutorial #1 - Alan Rickman Icon w/transparency

2006-01-10T19:49:19Z

Tutorial Type: icon (transparency)
Skill level: intermediate
Program used: PS7
Notes:
This tutorial assumes you have a working knowledge of the functions in PS7 and as such has been classified as intermediate.
I had a request for how to make the icon below. I don't have the working file saved so we'll be making something similar. :)

We will actually be making this:

1) First, find a picture you want to use. I don't have the picture I used in the original icon so we will be using this one instead. But pick a subject that works for you and create your base.

2) Prep your base however you wish. (That's not the focus of this tutorial, the transparency is) My prepped base looks like this:

3) Once you have your base to a point where you are happy, flatten it down so it is one layer. Then, make a selection on the image that you wish to be transparent and delete that section. You can feather the edges if you wish. You can see what I have selected below.

4) I inadvertently left my background white so I made a new layer from the flattened selection and deleted the white section. This is what I have now: **(see alternate directions)

5) Create a new layer and fill it with whichever colour you wish. I am going to use white to mix in with the white background I left behind. Delete the inside of the fill so you are left with a 2 pixel border as shown below.

6) As you can see, the border goes across the edge of the transparent space and we don't want that. Erase the fill over the edge of the transparent part like so:

7) We have the edges of the border sticking out over the part we deleted so we'll want to erase some and smooth it in so it matches the area around the transparency. To match it better, I lowered the opacity on the border layer to 70%.

8) At this point I am happy with how the icon looks however if you want to add more to it then go right ahead. :)

**I cropped my base directly from the image so once you have cropped your base the first thing you should do is create a new layer from the background (the image) so that your background is transparent. Then, rather than doing steps 5, 6 and 7 you would select the area of your icon (minus the transparency) and add a stroke to it using the blending properties of the layer. Either way works. :D

Questions or comments are welcome.

Program Questions

2006-01-06T21:02:25Z

We do not allow posts that are asking questions about how to do something however we do have this post specifically for that purpose. If you have a question about your graphic program or how to use a certain tool, post it here and someone will answer it for you!

Icon Questions

2006-01-06T21:01:00Z

We do not allow posts that are asking questions about how to do something however we do have this post specifically for that purpose. If you have a question about a specific technique or font, post a comment here and someone will reply with the answer!