Adobe fill tool...

TeKBuzz · 03-03-2005, 10:51 PM

Alright, since Atom pointed something out when he helped with my avatar. I figured out why the outside edge wasn't smooth; its because when I use the fill tool a few pixels "bleed." Like two or three extra pixels fade with that color, sometimes that means it goes over its edge. This makes trimming harder cuz I have to try to find the exact line and erase it perfectly (and I don't... ever). I was wondering if there was a way to make it so it didn't have this "bleeding" effect? I'm having trouble figuring it out. Appreciate the help. This is just for knowledge, not really working on anything in adobe right now...

Atom · 03-04-2005, 01:13 AM

The only way I know of to get a smooth edge on a bitmap graphic is with the eraser tool, but you must have a steady hand and a lot of patients. If you do not have the patients and a steady hand, the next best thing for smoothing a bitmap graphic is feathering the edge, but it is not as smooth as the eraser as you will see if you try each and compare. Also, feathering makes the edge blurry, and the smoother the edge the blurrier it becomes, so it's a trade off.

What I would use if I wanted to make a smooth circle in PS is a vector graphic, which the custom shapes are. (The pen tool also draws in vector format.) I would choose the thin circle in the custom shapes palette, then drag out a perfect circle. You will see that the edge of this circle actually is comprised of two circles, one slightly smaller and inside the other, so you can simply fill the interior if you want a solid color circle. To do this I rasterize the shape, then ctrl+click the custom shape's layer in the layers palette, then edit/fill with white (or what ever color you want). Then click in the center of the shape with the magic wand. Then I edit/transform/scale. Then I click the link icon in between the percentage windows near the top of the screen, and highlight the 100% in one of the windows (doesn't matter which because you've clicked the link icon to make both H and V proportions change equally), I then would type in the number 106 (106%) and this will grow the selection the wand has made to the center of the two circles on an 80px by 80px circle, which this is. Then you simply edit/fill with white (or whatever color you want). select/de-select and, voila.

The vector graphic (custom shape) is the one marked CS. The others are bitmap graphics feathered with .2, .5, 1 feather tolerances, and the one marked E is the same as 1 but with a perimiter selection that I added and quickly erased around. That just made it a bit crisper and a little less blurry.

But as you can see, vector is the way to go for smoothness. And BTW, vector is also resolution independent, so it sizes without pixel distortion. (note: vector is what format Adobe Illustrator draws in if you have AI).

Vector format is really what your avatar should have been created in, mainly because it is white (is highly contrasted against a dark background), and because it is a circle (the shape that shows the most bitmap irregularity).

Atom · 03-04-2005, 01:50 AM

I should add that in the example marked E, I used the eraser around the edge but it was with a selection present. If one was steady enough to erase with no selection present to restrict overlap, then you would see that the eraser tool alone (used freehand) leaves a considerably smooth edge, more so than feathering using a selection.

correction: that is not "rasterize the shape", but rasterize fill content that you must do before filling.

Layer/Rasterize/Fill Content

Atom · 03-04-2005, 02:33 AM

correction: I was mistaken, I guess you do "rasterize shape" before filling the outter circle. This is why I hate trying to explain things, because I just do them and am not used to explaining what I take for granted.

Layer/Rasterize/Shape

Another thing I forgot is, you must be sure and select the background layer when it comes to filling the inner circle.

Atom · 03-04-2005, 03:13 AM

Oh, and after you type in 106, you press enter twice to remove the bounding box before filling.

Atom · 03-04-2005, 04:25 AM

Sorry, one more discrepancy. You select the custom shape layer to wand (select) the inside of the circle, then you select the background layer to edit/transform/scale the selection to 106%. Then you select back to the custom shape layer again and edit/fill.

TeKBuzz · 03-04-2005, 03:11 PM

Wow Atom, I really appreciate the help man. I plan on working on that tonight to see if I understand just what your saying. I am having a hard time understanding a word of that, but I'm hoping that if I treat it like a tutorial that I'll be able to understand it better. Your definitely right that the CS is by far the smoothest, so I guess vector is what I'm gonna try working on.

One question I have is, since vector is so much crisper / smoother would you recommend working on site designs and such in vector format? Also, what about if the background is part of the picture (IE: banner) and I want to do a neat look such as: http://www.crystalballdev.com/dev/header.php. Would using vector format be the way to make that stream of "light" behind the text leading the to crystal ball look better? As it looks pretty nasty >.<

Again, I really appreciate your help, and I apologize for being a noob.

Atom · 03-05-2005, 03:32 AM

Quote:

Originally Posted by TeKBuzz

Wow Atom, I really appreciate the help man. I plan on working on that tonight to see if I understand just what your saying. I am having a hard time understanding a word of that,

Can't say that I blame you ..

If you run into a specific problem, just holler[QUOTE=TeKBuzz]

Quote:

Originally Posted by TeKBuzz

One question I have is, since vector is so much crisper / smoother would you recommend working on site designs and such in vector format?. Also, what about if the background is part of the picture (IE: banner) and I want to do a neat look such as: http://www.crystalballdev.com/dev/header.php. Would using vector format be the way to make that stream of "light" behind the text leading the to crystal ball look better? As it looks pretty nasty >.<

I don't know, best to ask a designer these I think. For the stream of light I would either use PS (lighting effects) or eyecandy (a PS plugin) myself, but ask a designer about that.

TeKBuzz · 03-05-2005, 04:02 AM

But I'm not actually looking for design help persay, just to make the image look crisp and clean. If the design is bad I'll have to deal with that later as the site wont' be online for a few months most likely, I'm trying to learn some graphic knowledge and then learn to use that knowledge to make good sites ^_^

Atom · 03-05-2005, 04:21 AM

Quote:

Originally Posted by TeKBuzz

But I'm not actually looking for design help persay, just to make the image look crisp and clean. If the design is bad I'll have to deal with that later as the site wont' be online for a few months most likely, I'm trying to learn some graphic knowledge and then learn to use that knowledge to make good sites ^_^

Oh, well you see, I don't really design sites, I've only desined two pages before, and that was 2 years ago, and I probably didn't even do that correctly .. lol. I'd have never done it without the coaching I had. But anyway ... I think that PS is all that's usually used except for the logo if you want a pro logo. But it's really best to ask a designer. One may see this and give you a definite answer. Myself, I create all my artwork in PS, I haven't fooled much with AI at all, even though I have it. I need to start fooling around with AI more.

Limit · 03-05-2005, 04:25 AM

is it possible to make the CS vector in photoshop without illustrator?

Atom · 03-05-2005, 04:31 AM

Quote:

Originally Posted by Limit

is it possible to make the CS vector in photoshop without illustrator?

Yes, that's how I made the two above, the white circle with gray background that says CS, and the white circle with black background. All the "custom shapes" in the custom shapes palette are a form of vector format, and anything created with the "pen tool" in PS is in a vector format.

Actually a bitmap graphic can be traced in PS with the pen tools and reproduced in vector format, but it takes a lot of practice to learn to do this properly and fairly quickly. AI is much more suited for creating vector graphics, and is a type of vector format that is superior to the PS vector formats. With AI vector you get perfect edges, and with PS vector, you get near perfect edges. I forget what the difference is exactly, but I think it's explained in the PS an AI help sections.

TeKBuzz · 03-05-2005, 04:37 AM

I'm heading home for the weekend in half hour or so, and didn't get home til late from work, so I have worked on trying out what you described, but I plan on trying monday when i get back, I'll post what I did for your critique

Atom · 03-05-2005, 04:41 AM

Quote:

Originally Posted by TeKBuzz

I'm heading home for the weekend in half hour or so, and didn't get home til late from work, so I have worked on trying out what you described, but I plan on trying monday when i get back, I'll post what I did for your critique

K dude, have fun .. : P

Atom · 03-07-2005, 02:27 AM

Here is a white circle that I made in aprox. 2 seconds using a PS plug-in that I have, called KPT Gel. The KPT line of graphics programs were formerly a MetaCreations production, but I believe that they are now a part of Corel productions. I actually created this circle on a transparent background so that it could be used on any background, but added a black background here to allow a better examination of it's edge.

Atom · 03-07-2005, 04:48 AM

Then you can play around with it or what ever. In the following I added a reverse radial gradient scaled to 135%, and the one after that I added a few layer masks and some necrotic tissue and texture. This is artistic sort of stuff, but you can just do basic stuff if you want to create a basic logo.

evilregis · 03-07-2005, 10:04 AM

Perhaps I'm slow, but all you are looking for is a smooth circle in PS? Just a regular ol' circle?

Atom · 03-07-2005, 01:47 PM

Eyecandy/Waterdrops (another PS plug-in) also creates perfect vector circles in seconds.

I'll show you some examples in a little while ... just got up and gotta get coffee'd and cigaretted up.

TeKBuzz · 03-07-2005, 01:51 PM

lol atom, I've never used a plugin for PS, dunno how to get them, install them or use them. If you know of a tut that explains that can you point me in the right direction?

Atom · 03-07-2005, 02:15 PM

Quote:

Originally Posted by TeKBuzz

lol atom, I've never used a plugin for PS, dunno how to get them, install them or use them. If you know of a tut that explains that can you point me in the right direction?

Well, the ones I'm referring to are sold. I think KPT was around $90 .. don't know what it is now. And Eyecandy I don't know how much that is. I just grabbed them from someone who purchased them. I would suggest purchasing them yourself if you are going to use them alot in business, though. The two are both rather extensive graphics programs, and are perfect compliments to PS. They're easy to install. If I was going to go pro designer or w/e, I think I would purchase a Corel graphics program.

Now if you just want to fool around and make a few avatars or something, well you can grab a cracked version from a P2P program, but I think that is illegal and wouldn't recommend it, of course. You know, those P2P programs like Kazzaa and Warez .. E-mule etc ..

But seriously, if you're going to go pro, don't even fool with cracked sh!t ... purchase the programs, I say.