Unit 34 Image Manipulation Applications

lisa-mantel-foliage

 

minari-tree-hd

I used the photocopier that the printer provides to scan my image in. This emailed my Munari drawing to me so that I could edit it digitally. This method compared to scanning the image in using the actual photo scanners is not as good because we end up with a lower quality image as the printer tries to interpolate the colour of the pixels, leaving us with noticeable blurring around the edges of the sketch.

To counter this, I first adjusted the levels of the image. This removed greys/blacks that weren’t quite the colour that I wanted. It also removed any smudges that I had made on my page, making editing much easier and cleaner.

I then grabbed the colour of the page, and began to remove unwanted colours by painting over the top of them. I made sure that this was clean by using the pencil tool, which doesn’t try to fade the colours in any way and makes editing easier.

This took me a while as there was quite a lot of smudging around the branches of the tree. I found myself zoomed in very far so that I could retain the smoothness of my edges and keep a nice shape for the tree overall.

If I were to improve this image, I would once again go over my lines and try to remove the jaggedness of the tree’s bark. At first I thought that it could be a nice effect but it didn’t turn out how I imagined. Using the paint tool I could make the edges much smoother and the image quality would be much better.

og-tree-hd

As you can see I have made some improvements to the shape of the tree as well as removed some inconsistent branches. I made the base of the trunk much flatter so that it was more rounded off instead of faded and of course I made the image much darker. This was to make improve the style so that it was more similar to Munari’s. Munari often draws silhouettes so I tried to replicate that by making my tree much darker.

File Formats

Screen Shot 2016-09-19 at 14.32.47.png

Here I have my image in the .JPEG format with different levels of compression. The original image is displayed in the top right and the rest are the JPEG compressions.

As you can see, the more we compress our images, the smaller the file size is. This is an advantage for games that want to keep their file size low, for example mobile games. Having a low file size on mobile is important because more people are likely to download a 5MB game compared to a 100MB game.

However, with a smaller file size comes lower quality. As we compress are image, data is lost which leads to the JPEG format trying to interpolate between this data in order to fill in these missing colours. This causes artefacts (clearly visible on the sides of the trunks on the image in the bottom right corner.)

So, compression is good but it also causes problems for developers and/or artists. 50% compression has an acceptable quality and you could use that in your work with hardly anybody noticing any problems (unless they zoom in of course). The more that you zoom into an image, the more artefacts you will be able to see that will show you what compression actually does to your image.

screen-shot-2016-09-19-at-14-45-52
Here is a zoomed in version of the image above. It has all of the same compression levels. The artefacts are much more apparent in this version.

Screen Shot 2016-09-19 at 15.08.59.png

In this image I compare JPEG to GIF. As you can see, GIF allows for transparency whereas JPEG does not. This make it easier to apply to other images as you do not have to remove the background from the image.

The bottom right image is limited to 2 colours. This is apparent because the lines are much more pixelated and jagged. This is because there is no smoothing happening (anti-aliasing) to make the lines seem much smoother by adding extra colours along the borders to make up the image (see the bottom left image for this effect).

As the images progress you can see a clear loss of quality and a smaller file size. This is due to format restrictions and extra compression. A 50% compression JPEG is quite similar to the quality of an unlimited GIF. This is a clear comparison of the two formats as it shows strengths and weaknesses of the two.

Exporting to Unity

The next task was to export our sprites to Unity. To do this we needed to go to File >> Save As and then select our save options.

First, we tried to export as JPEG. Unfortunately JPEG does not allow for transparency, so when imported into Unity we had this giant white background behind our sprite that we didn’t want.

Screen Shot 2016-09-21 at 10.09.15.png
JPEG example.

To fix this, we could use two other formats, PNG and TIFF. These formats allow for transparency so can both be used in Unity, however – TIFF files allow for our photoshop layers to be saved (at the expense of a larger file size) so we can go back and make changes quite easily when we want to. This would help improve our workflow, as we don’t have to save both our PSD files and our TIFF files, just the TIFF files.

Screen Shot 2016-09-21 at 10.13.03.png
TIFF example.

People in my class had issues when creating their scenes as the TIFF trees would have outlines when they overlapped another tree. This effect was caused with the anti-aliasing on their sprites which for some reason, mine didn’t have.

We are yet to learn how to fix this issue.