Creating Icons and Logo for Phimpme Android

Creating Icons and Logo for Phimpme Android

Icons are a popular method for visually representing functionality because they help users memorize and recognize functions available within an application easily. So, the logo and icons of Phimpme Android application are designed in way that they are very simple and clear.

There are many applications on the playstore, so we need to make our application stand out of them. No matter how amazing our application is, if it has got a poorly designed icon, people will be more inclined to skip over it. So, we took a great care in designing the logo of our  Phimpme Android application.

Designing the logo for Phimpme Android

A great app icon should be simple, memorable and beautifully designed and it should convey the main purpose of the app from just a quick glance. One should get the clear idea what the application is about by just looking at the logo. In Phimpme Android application, the major features are “camera”, “imageediting” and “sharing images”. We wanted our logo to represent these features of the application. As the name of our application starts with letter “P”, we thought it would be better if we have something related to that alphabet, so that the users can relate the icon with the application. We started with letter P and tried integrating iconics that signify the features of the application to form that letter. We used the camera icon for the circular curve of “P” and used an arrow symbolizing sharing feature of Phimpme, for the rest of the letter “P”. For signifying the editing feature of the Phimpme application, we used a brush stroke to the logo because it relates to art. Finally after multiple iterations we designed the following logo.

Creating the logo

We used Adobe Photoshop software for designing the logo. We exported the output image in PNG format because JPEG doesn’t support transparent images and Photoshop doesn’t support SVG. The final logo had dimensions of around 1024×1024. We doesn’t need an image of such large size. So, we resized it to sizes supported by Android and copied them to proper directories. This operation can be automatically done by using the Android Asset Studio. The icons gets resized to Android supported sizes automatically and a archived file can be downloaded in all the resized icons are arranged as per their dpi.

Creating the icons for Phimpme Android

To be an effective icon, it must fulfill several criteria such as visibility, legibility and comprehensibility. If we want we can design our own icons but there are already many resources available to use like thenounproject, flaticon, iconfinder, worldvectorlogo etc. Many icons are available free of cost even for commercial use in those websites. We used them in our Phimpme Android application for having a simpler and cleaner user interface. These icons may be in PNG or JPG or SVG format. PNG and JPG formatted images are raster images i.e. they get pixelated when scaled and should be different for different DPIs if we want to use them in our application whereas SVG images are vector images. They will be smooth even if they get scaled. So it is better to use vector images than raster images for icons in Android applications. The main disadvantage with SVG images is that they cannot be used directly in the Android application. They should be converted to Android Vector Drawables. Android only supports those type of vector images. Android studio itself provides us with many icons for using in our application. They can be accessed by New -> Vector Asset -> clicking the android icon there to browse other icons.

The icons provided by Android Studio are very basic and are not enough if we are designing a high-level custom interface. There is a method which we used in Phimpme Android for converting SVG images downloaded from web into Android Vector Drawables. We used an open-source web converter svg2android. It generates the Android Vector Drawable corresponding to the SVG. This was extremely useful, as we were able to get only SVG icons from the web but no Android Vector Drawables. We can convert SVG to Android Vector Drawable using built-in converter in Android Studio but it doesn’t work for all kinds of SVG images and sometimes it generates false images.

In some cases, when we try to find icon for a specific purpose, we ended with only PNG image. For that case, we used another free web convertor which turns the PNG raster image to an SVG vector image. This method has slight disadvantage that some of the details might get lost from the PNG image during conversion but it is not much important as we plan to use it as an icon in the application. We can further generate Android Vector Drawable using the above mentioned method and use it directly in the application.

Instead of the set of PNG images those we used for the launcher icon of the application as we discussed above, we can generate an SVG image and further generate an Android Vector Drawable for the Launcher Icon. So that we can use only that single vector image for the whole application irrespective of the DPI.

Resources:

Close Menu