Skip to main content

Artwork & Graphics

Creating professional artwork for your app is a must. Amateur artwork is an immediate deal-breaker for most users and significantly impacts an app's overall experience in a negative way. The opposite is also true. Applications with professional grade artwork and graphics stand-out positively in a growing sea of childish, amateur software.

Image Format

Images in your Buzztouch app should be lightweight (small file size) flattened .PNG files. See this article if you're unsure what a PNG image is. The term "flattened" is an industry term used to describe an image file that has it's header information removed. Header information is used by graphic design software packages such as Photoshop or Illustrator so they can keep track of file edits. This allows the files to be editable after saving and re-opening. Flattened images are much smaller in file size but are no longer editable. Most graphic designers keep two copies of each file, one flattened (for use online and in mobile apps) and one un-flattened so they can go back later and update the image. Your favorite photo editor should flatten your artwork when you chose the "Export" function.

Image Locations

Images can be included in your project or they can come from a remote source using a URL from your website or another website (with the owners permission). Copyright infringement is illegal and you should never put yourself at risk by "borrowing" an image from a URL. Even worse, don't put your client at risk by using an image in an app you're being paid to create if you don't have the right to use it.

When using image file names, enter the file name only, without any path information. Example: myimage.png is correct and BT_Images/myimage.png or BT_Images/myImageFolder/myimage.png is incorrect. When entering URL's for images in your control panel, enter the complete URL like: http://www.mywebsite.com/images/myimage.png. Image URL's CANNOT CONTAIN SPACES. This means http://www.mywebsite.com/images/my new house.png will not work because the name of the image (my new house.png) contains spaces.

If you're including images in your project they need to be added to the BT_Images folder in Xcode or Android Studio after downloading your project. Open your project in Xcode or Android Studio then drag them into the BT_Images folder. The example on the right shows Xcode for iOS. You can drag an entire directory into the project to help keep yourself organized. Most developers keep their app's graphics on their hard-drive in one folder. Their graphics folder sometimes contains sub-folders. Next, after downloading the source-code for their project they drag their graphics folder into Xcode or Android Studio. This approach allows them to easily add graphic assets to their project each time they download the source-code.

Images in HTML can be referenced from your project or from a URL. This means you can create an HTML document that includes images you added to your project or images that come from the internet. Images in HTML that come from the internet are not saved on the device and will require internet access.

To use an image in you added to your project use an image tag like this:

<img src="mycoolimage.png" />

To use an image from the internet use an image tag like this:

<img src="http://www.example.com/images/mycoolimage.png" />

Launch Icon Dimensions

iOS and Android launch icons are a specific dimension. When you download the source-code for your Buzztouch application it will include a launch icon suitable for the device. This included icon is created from the image you entered in your control panel. The control panel uses .JPG files for your apps icon. This .JPG is converted to .PNG when you download your project. The conversion process sometimes reduces the quality of your icon and you may need to replace it in your project after you download your source-code so your apps icon is of the highest quality.

Launch Icon Sizes

iPhone / iPod Touch: 57 x 57

iPad: 72 x 72

iPhone 4 Retina Display: 114 x 114

Android high-density (hdpi): 72 x 72

Android medium-density (mdpi): 48 x 48

Android low-density (ldpi): 36 x 36

App Store / Market Artwork Sizes

App Store: 1024 x 1024

Google Play: 512 x 512

References

Android Icon Reference

All about iOS Icons

Mastering App Store Screenshots

Online Icon Creator Tool