smooth edges...
^AndreA^
I'm doing some images for a website,
here is one: http://www.lesperimento.netsons.org/image/
As you can see, the left edge of the image (home.gif) is not smooth...
you can recognize each single pixel and it's not a very nice effect.
How can I have it smooth?
I've had a look to the semi-Flatten plugin ( http://docs.gimp.org/en/plug-in-semiflatten.html
) but it doesn't work for me because the background is an image, not a
flat color...
The background I placed there is just an example...
any advice would be appreciated!
Andrea
Michael Soibelman
Method #1: Create a new image in Gimp.
Method #2:
1. Open Image in Gimp
2. ->Image ->Mode ->RGB
3. ->Filters -> Blur -> 2x2 Blur (apply twice)
4. ->Filters -> Map ->Bump Map (use-'invert bump map') O.K.
5. (optional) Colors -> Brightness-Contrast. Set Brightness to 35 and
Contrast to 50. (play with these settings until you get what you are
looking for.
6. Save as GIF
Should look a lot better.
^AndreA^
> ^AndreA^ wrote:
> > Hello guys,
>
> > I'm doing some images for a website,
> > here is one:http://www.lesperimento.netsons.org/image/
>
> > As you can see, the left edge of the image (home.gif) is not smooth...
> > you can recognize each single pixel and it's not a very nice effect.
>
> > How can I have it smooth?
>
> > I've had a look to the semi-Flatten plugin (
> > me because the background is an image, not a flat color...
>
> > The background I placed there is just an example...
>
> > any advice would be appreciated!
>
> > Andrea
>
> Method #1: Create a new image in Gimp.
>
> Method #2:
> 1. Open Image in Gimp
> 2. ->Image ->Mode ->RGB
> 3. ->Filters -> Blur -> 2x2 Blur (apply twice)
> 4. ->Filters -> Map ->Bump Map (use-'invert bump map') O.K.
> 5. (optional) Colors -> Brightness-Contrast. Set Brightness to 35 and
> Contrast to 50. (play with these settings until you get what you are
> looking for.
> 6. Save as GIF
> Should look a lot better.
Great Michael, thanks.
I did exactly what you said in the method #2 and it worked fine...
Anyway also the method #1 was fine for me, but I don't know how to get
it done properly...
Basically, How can I do that image without having that horrible effect
on the side where I modify it?
Where is my mistake?!?
thanks in advance...
Andrea
^AndreA^
Ok, I found something about anti-aliasing on the GIMP manual...
It says to do some anti-aliasing manually
http://www.gimp.org/tutorials/Creating_Icons/
here is in short:
"Antialising
One of the basic aspects of bitmap images is the negative effect of
Aliasing.
Although many tools like the brush tool work well in large images,
they aren't effective at the icon size. In particular, drawing with a
1x1 pixel brush doesn't behave as well as could be hoped.
The solution is to anti-alias manually.
Some people prefer to work at a higher resolution, with full anti-
aliasing, and then scale down, but the icon loses smoothness and most
of the benefit of the larger size...
As much as it sounds hard, manual anti-aliasing is easy, and even fun.
All you need for this is the opacity setting of the pencil tool. Say
we have an outline that's aliased. Select a 1x1 brush and set the
opacity to something like 40%. When you start drawing with this black
brush by clicking on the white surface, it will become light gray. One
more click and it gets darker. That way you can easily create fluent
transitions between the two border colors...."
So I did, or at least I tried to do.
Here the old image and the new one "smoother": http://www.lesperimento.netsons.org/image/
Am I on the right way?
Michael Soibelman
Sorry but I've got some things to do right now (moving about 35 trees!).
But I must say the right way to create your own new graphic image is to
start with the right tool !! For clean text and simple graphic shapes you
will get a much better result if you create the image in Inkscape. Vector
graphics produce cleaner curves. Save the vector drawing as a 'plain svg'
image and then open it in Gimp. Looks much cleaner and you can now apply
effects to it if you like. Save as a gif and paste that up on your page.
Should look good. Before you convert to gif however, MAKE SURE you resize
the image to the size of your final image first. You never want to resize
a gif !!! Looks bad.
I'll check in later.
^AndreA^
OK, I did the image with Inkscape... (you can find it here:
www.lesperimento.netsons.org/image/home3.svg )
Of course the curves are perfect...
Then I did the .gif one by Gimp but it doesn't look so good anymore...
image number 3)
www.lesperimento.netsons.org/image/
It seems to me that the best solution was the number 2...
or at least, I could create the perfect curves with Inskape and then
do the antialiasing with GIMP...
any suggestion?
Andrea
ps: How many trees left?!? hehe...
Michael Soibelman
-----------------------------snip------------------------------
>
> ps: How many trees left?!? hehe...
15 trees which I'll pick-up tomorrow.
O.K. Gif isn't a very good format anyway. As most browses can handle jpg
or png why don't you try png as the final format ?? Should look better
though the file size might be a bit larger. Again, this probably wont be
an issue as the time to load a small image, even in a larger file size, is
still tolerable by most peoples standard.
Just thinking.
And after thinking a little more...try this.
Start with your svg image.
1. -> Select -> By Color (shift + o)
2. Click on the black background to slect all the black.
3. -> Edit -> Copy (ctrl + c)
4. -> Edit -> Delete (removes black)
5. -> Layer -> New Layer (shift + ctrl + n)
(use transparency as layer type !!)
6. -> Edit -> 'Paste Into' then (Ctrl + h) to anchor layer
7. -> Edit -> New Layer (shift + ctrl + n)
(use transparency as layer type...again)
8. -> Edit -> 'Paste Into' then (ctrl + h)
9. -> Layer -> Transparency -> Fade. Click on the middle left square in the
dialog that pops up. Click o.k.
10. Click on the middle layer in the layers dialog to select the other black
layer. Slide the opacity slider down to around 50 to get a slightly faded
left edge to the black region. Play with the setting until you are
satisfied with the result.
11. Shift + ctrl + A (select none)
12 Merge Layers (ctrl + m)
13 save as....png OR save as gif. See if it makes any difference.
I think png will look better in a browser.
P.S. I just think the fade makes the edge look cleaner though I haven't
looked at it on a web page. Try it and see if that helps.
^AndreA^
Ok, I did what you said (except passage #9 because I didn't find the
voice Layer-> Trasparency -> Fade).
The result is the image number 5 and 6. (always the same link:
www.lesperimento.netsons.org/image/ )
The 5 is .png and the 6 is .gif... you can see the big difference!!!
Basically, the big problem was the extension... I was trying to
use .gif images because of them lightness. But the quality is
completely different.
The image number 4) is done with Inkscape too, saved as a .xcf (so you
can save the different layers) and then, by GIMP, saved as a .png.
Just that!
And the result seems good!
Michael, thank you very much for your help!!!
Andrea
PS: vector graphics is very cool...