How developers can repurpose old web graphics for new mobile platforms

so many sizes

The underlying technology behind mobile phones, tablets and even laptops and desktops is constantly changing. And changes to the screen sizes, orientations and resolutions of their screens can at times make a graphic artist go insane.

More often than not, the graphics that have been used in the past were created and sized for a specific purpose and just do not seem to look right when repurposed on a new device or platform. It is likely that many graphics were sized for the web and were right-sized and optimized for faster downloads of pages. Unfortunately just resizing an image to a larger size does not always produce the results one expects. Sometimes you are fortunate enough to have all of the base elements used when the graphic was originally created and can ‘re-cut’ the graphic for a new purpose. Other times you may just have to start over from scratch or hire a professional designer.

There is, however, one technique that can work when all you want to do is simply repurpose a good design for a different use. If that is the case, then the following will help recycle your existing graphics used with older technologies, for new platforms that you would like to move to in the future.

Turn the image into a vector

Turn the image into a vector

Provided the graphic you are interested in preserving has enough detail left in it, you may be able to revitalize it by turning the image into a vector first. Raster-to-vector, or vectorization as it is sometimes referred to, uses different edge detection methods to create the necessary paths, points and curves in a vector graphic. In fact, one of the most useful features in Adobe Illustrator ($239.88/yr) for me has been its ability to vectorize a raster image using the built-in Image Trace feature.

There are more cost-effective versions of vectorization tools that provide workable results as well. Super Vectorizer for $19.99 on the Mac App Store is one such tool that has become part of my Creative Suite replacement toolset for OS X. Using a few simple controls, you can open an image file and quickly export an AI, SVG or PDF vector file for editing.

Inkscape is another vectorization tool that is available on Mac, Windows and Linux. It is a free, open source tool that is licensed under the GPL. It uses the Potrace bitmap tracing engine to accomplish similar results to Super Vectorizer and Image Trace.

Clean up the vector’s path

Clean up the vector’s path

The next part of the process can be the most tedious part, depending of course on the complexity and detail of the original graphic. The results of any vectorization process are not always picture perfect. Using a vector editing tool, you can clean up the graphic by adding, removing and moving the various points on a vector’s path. Sketch 3 ($79.99) and iDraw ($24.99) are two vector based graphic tools (in addition to the afore-mentioned Adobe Illustrator and Inkscape) that you can use to clean up the graphic produced by the vectorization process.

Once the vectorized image file is open in the vector designer, the first thing I typically do is lock the aspect ratio and enlarge the image by a factor of ten; that is assuming that I started out with a relatively small image. I then import the original image, lock its aspect ratio and enlarge it to the exact same size as the newly created vector. Of course the original image will suffer greatly from pixelation, but that is OK for how I intend to use it. Placing the original image behind the vectorized version of the image creates a sort of template to follow. Sometimes during the clean up process you may delete or move a point that you should not have and distort the overall design. Having the original image there as a guide will help you maintain the original image’s design aspects. Once the clean up is complete, I simply delete the layer that has the original image in it.

Add style to the vector as an image

Add style to the vector as an image

The reward at the end of a tedious vector cleanup effort comes when you save the final vector or export it as an image file. Importing the vector into an image editor like Adobe Photoshop ($119.88/yr) or Pixelmator ($29.99), you can resize the canvas to fit a new medium, add color to various aspects of the design to match your existing color palette or a new color palette, and even add effects like shadows. If you do want to apply a different color or style to various parts of the vector graphic, be sure to separate them first before importing them into your image editing tool of choice. Depending on how you plan on using the design, you can even add new design elements to fill out the extra space on your target platforms canvas. This is particularly useful when creating various banners for the different social media pages you plan on using.

One tool in particular that can be used to quickly add a new style to a vectorized graphic is BeLight Software’s Art Text ($19.95) for Mac and Windows. With it you can import different parts of your vectorized image as separate layers in order to add different fills, multilevel gradients and even apply various effects. Art Text is really useful when it comes to creating icons, logos and buttons. At times, it can be easier to get the desired effect you are looking for rather than searching online for a Photoshop or Pixelmator tutorial video.

Resizing the final image

Using image editors to export the various sizes you need for each platform you plan on targeting is one path you can take. Another is to use a tool like Lemke Software’s GraphicConverter ($39.99) to do the job for you. GraphicConverter has a Convert and Modify tool that can execute many different functions on an entire directory of images in one batch operation. Once you get you batch operations just the way you like them, you can even save the instructions for use on your next project. It is very similar in fact to Adobe’s own Media Encoder.

Now remember, this is where you got into the whole mess of having to vectorize the original graphic in the first place. Don’t make the same mistake twice and resize the only artifact you have down to the exact size you need. Be sure to keep all of the different elements you created along the way in case you need them again for the next platform update or new device layout size.

loading

Comments have been disabled for this post