Hi all, I'm making a puzzle bobble clone and I need to have the arrow to shoot the bubbles rotated. I planned on going to photoshop and save it every 5 degrees. My problem is that the outcomming image is from a very low quality and I dont know how to fix it. Here you can see the diference: Someone knows how to fix this? The image was originally in bmp, and before exporting it to png it already looked so ugly. thanks guys!

I think that looks ok.. =) Depending on your photoshop version you can pick between different filter modes; "bicubic sharper" might, for example, generate results that are closer to what you might be expecting.

I guess the green background is transparent color, and your problem is that your colors are messed up at the border of your shape when you rotate it. I don't use photoshop so I don't know exactly how to do it, but I would make the rotation only on the arrow, instead of the whole image. You can probably do it by selecting the arrow and apply rotation on selection only, or else using layers.

bmp is a pretty good image quality but its huge as far as file size. Personally if your trying to take a model and duplicate it, it being as small and generic as it is, try to recreate it in photoshop or illustrator instead. Intially start it in Illustrator and scale it with that to the appropriate size then work the details in Photoshop.

If thats too much work for it, you're really going to regret not working with the 'original' image for the work.

To me it looks like the image is being resampled. However if you're just rotating photoshop does not need to resample at all. you sure you aren't doing anything else to the image?

I tried a few different methods of rotation. See if you like any of these:



The first image is the original. The second was made in Flash with bitmap smoothing enabled, and could also be made easily in Photoshop. The third was made in Flash with bitmap smoothing disabled. The forth was made in Fireworks; it took several more steps to make but it looks almost the same as the third. The fifth was made in Fireworks.

I wanted to see how it would look if I resampled the image with the nearest-neigbor algorithm instead of bicubic interpolation or bilinear interpolation. That's what I accomplished in the third and forth images. Simulating nearest-neighbor rotation in Photoshop or Fireworks is hard because they don't allow you to choose a resampling method when you rotate an image. In my opinion, the third is the best because it was easy to make and it looks really sharp. Plus, rotating bitmaps in Flash is non-destructive.

Let me know if you'd like me to describe in detail how I made any of these.

Peter

fruki, just out of interest, are you rotating the source image by 5 degrees, saving it (as image #2) and then rotating #2 image by 5 degrees, saving (as image #3) and then rotating #3 by 5 degrees (to get #4)?

Or are you saving #2, and then opening the source and rotating by 10 degrees (#3) and reopening the source and rotating by 15 degrees (#4).

I only ask, as Photoshop may be blurring the edge of the lines with each rotation. Perhaps always starting with the source and rotating by a greater increment each time (ie 5 deg, 10deg, 15 deg) *might* help.

I'm no photoshop expert, but it could be worth it! If that ain't it, I'm all out of ideas.....

You can download all images from here:
arrow.zip (rapidshare.com)

(There are 72 files in arrow.zip)

For future reference, you would avoid all these problems if you made your graphics in vector format (like InkScape, Flash or Illustrator) and exported them to pixel once rotated. I know it's not usually convenient if you don't know these software in the first place, but you could do it only for images that need to be rotated for non-90degrees increment.