PS Help -- unpixelating/smoothing edges

0v3rki11 · 11-April-05, 03:00 PM

Ok, working on a "splash" page for my jobs websites that we're transferring to a new server and hosting.

you can see the site at http://www.mwcamerica.com

obviously it's not finished yet, still have some flash to do as well as maximize the look of the images on the site. You can see in particular the top and botom frame images have really bad pixelation from being resized.

What i need to know is how to smooth the edges back out once the image has been resized, if there is a way to do such a thing.

subdismal · 11-April-05, 03:31 PM

Quote:

Originally Posted by 0v3rki11


	Ok, working on a "splash" page for my jobs websites that we're transferring to a new server and hosting. you can see the site at http://www.mwcamerica.com obviously it's not finished yet, still have some flash to do as well as maximize the look of the images on the site. You can see in particular the top and botom frame images have really bad pixelation from being resized. What i need to know is how to smooth the edges back out once the image has been resized, if there is a way to do such a thing.

Not sure if this will help. I'll try to dig up some more information for you.

lcpiper · 11-April-05, 03:55 PM

I am not a flash guy, but it looks like part of the issue has to do with screen resolutions that you are working with while developing the images.

Also, this same problem exists in games and the solution for that is called Anti-Aliasing,. Here is a definition of Anti-Aliasing for you.

I don't know if any of this will help you. I hope one of the other guys can step in with the best solutuion for you.

FunkyFresh · 11-April-05, 04:01 PM

I did a quick re-create of it with the pen tool. Doesn't look exactly the same, but the edges are smooth. I included a zipped version of the Photoshop file, so you can play with the Emboss effect if you like.

Note: The edges of the attached .gif will look jaggy until you put them on the medium gray background.

0v3rki11 · 11-April-05, 05:39 PM

Quote:

Originally Posted by FunkyFresh


	I did a quick re-create of it with the pen tool. Doesn't look exactly the same, but the edges are smooth. I included a zipped version of the Photoshop file, so you can play with the Emboss effect if you like. Note: The edges of the attached .gif will look jaggy until you put them on the medium gray background.

that image helped quite a bit. still a little bit of jaggedness but not as much as before. I think I might have been getting alot of the jagged edges because i was saving the images as gif's with transparent backgrounds. May have turned out differently had I put the grey background in.

I'll play around with the beveling/embossing on the one you were playing with since i deleted my psd files like an idiot. Maybe all it needed was to have a colored background to smooth it out.

anti-aliasing might help but i have no idea how to go aboput doing that in photoshop, yet.

post_break · 12-April-05, 09:20 AM

You might want to just go in there and painstakingly edit out the pixels that make it jagged. If theres one thing Ive learned about photoshop its that the zoom tool can show many mistakes.

subdismal · 12-April-05, 03:38 PM

Quote:

Originally Posted by post_break


	You might want to just go in there and painstakingly edit out the pixels that make it jagged. If theres one thing Ive learned about photoshop its that the zoom tool can show many mistakes.

That's some good advice.

FunkyFresh · 12-April-05, 03:56 PM

I know the .gif I attached above looks jagged on the edges when you view it, but it's only cause it has a transparent background and is optimized for medium gray. This is how it looks when you do put it on a gray background. If it's still too jagged, you could always flatten the image and apply a slight blur to the top edge...

0v3rki11 · 12-April-05, 04:32 PM

I used the .gif you made and did a little adjusting to the levels. it looks alot better than the original did. I did notice that viewing on my laptop and viewing on my home PC was a big difference as well.

check the site out as it is now and tell me if anything looks pixelated beyond a reasonable ammount.

http://www.mwcamerica.com

cl0uder · 14-April-05, 11:13 AM

No one will take the time to notice the minor pixelation of that image. Especially if they came to the website for musical instruments and not graphics. Good fix.

sandalfon · 15-April-05, 10:48 AM

Actually I think that the whole frontpage image should be constructed in Illustrator instead of Photoshop. Using bezier curves for everthing except the materials would totally eliminate all pixel problems.

But then again, you may not have access to Illustrator.

Should you have, then I would recommend learning it. It can do a lot of things photoshop isn't designed to do. Having said that, you would probably have to resort to photoshop again when exporting it for web publishing.

Flash would also do the trick, but you should avoid using pixel images in that case.

11-April-05, 03:00 PM		#1 (permalink)
0v3rki11 Cubic - Hoe	PS Help -- unpixelating/smoothing edges Ok, working on a "splash" page for my jobs websites that we're transferring to a new server and hosting. you can see the site at http://www.mwcamerica.com obviously it's not finished yet, still have some flash to do as well as maximize the look of the images on the site. You can see in particular the top and botom frame images have really bad pixelation from being resized. What i need to know is how to smooth the edges back out once the image has been resized, if there is a way to do such a thing.

12-April-05, 03:56 PM		#8 (permalink)
FunkyFresh 'Da Doctor of Funk	I know the .gif I attached above looks jagged on the edges when you view it, but it's only cause it has a transparent background and is optimized for medium gray. This is how it looks when you do put it on a gray background. If it's still too jagged, you could always flatten the image and apply a slight blur to the top edge... Attached Thumbnails

15-April-05, 10:48 AM		#11 (permalink)
sandalfon Apex Master Tech Apprentice	Actually I think that the whole frontpage image should be constructed in Illustrator instead of Photoshop. Using bezier curves for everthing except the materials would totally eliminate all pixel problems. But then again, you may not have access to Illustrator. Should you have, then I would recommend learning it. It can do a lot of things photoshop isn't designed to do. Having said that, you would probably have to resort to photoshop again when exporting it for web publishing. Flash would also do the trick, but you should avoid using pixel images in that case. Last edited by sandalfon; 15-April-05 at 10:54 AM..

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Slashdot // Softening the Edges of Technology	Gizmo	Slashdot RSS	0	18-March-07 07:20 AM
smoothing out jagged edges	KiwiFlavor	Case Modding	9	09-October-06 10:57 AM
What to do about sharp edges?	Duplo	Case Modding	6	12-March-06 01:53 PM
Covering ugly cut edges?	dliv3rnce	Case Modding	6	20-August-05 02:52 AM
Slashdot // 3D Virtualization Edges Toward the Mainstream	Gizmo	Slashdot RSS	0	14-March-05 01:13 AM

11-April-05, 03:55 PM		#3 (permalink)
lcpiper H2-Hoe	I am not a flash guy, but it looks like part of the issue has to do with screen resolutions that you are working with while developing the images. Also, this same problem exists in games and the solution for that is called Anti-Aliasing,. Here is a definition of Anti-Aliasing for you. I don't know if any of this will help you. I hope one of the other guys can step in with the best solutuion for you.

12-April-05, 09:20 AM		#6 (permalink)
post_break I Drive A Mac	You might want to just go in there and painstakingly edit out the pixels that make it jagged. If theres one thing Ive learned about photoshop its that the zoom tool can show many mistakes.

12-April-05, 04:32 PM		#9 (permalink)
0v3rki11 Cubic - Hoe	I used the .gif you made and did a little adjusting to the levels. it looks alot better than the original did. I did notice that viewing on my laptop and viewing on my home PC was a big difference as well. check the site out as it is now and tell me if anything looks pixelated beyond a reasonable ammount. http://www.mwcamerica.com

14-April-05, 11:13 AM		#10 (permalink)
cl0uder Apex Master Tech	No one will take the time to notice the minor pixelation of that image. Especially if they came to the website for musical instruments and not graphics. Good fix.