January  24, 2014

Creating graphics for iOS and Android

by Bill at 4:46 pm

If you haven’t already, you’re bound to get assigned something that’ll require you to do some UI for an iOS or Android project. Here are some tips.

mobile-graphics-1024x363

As pictured above, there are five typical densities to deal with across iOS and Android, which fall into four main groups:

  • non-Retina (iOS) and mdpi (Android)
  • hdpi (Android)
  • retina (iOS)
  • xhdpi (Android)

Your process should be something like this:

iOS graphics

  1. Figure out the largest iOS device we likely want to go after, and get its screen resolution.  Let’s say we want to target an iPad retina, which is 2048×1536. Let’s now double that resolution.
  2. We’ll do our mockups in those new dimensions, 4096×3072 (72dpi), within Photoshop.
  3. As you break your UI pieces apart and export them out for developers, save them as filename@2x.png (or whatever file format you’re using).
  4. Then, you’ll want to make copies of all those items, take off the @2x part of the filename, and shrink them all in half. So for example, a 200×200 icon is now 100×100. These smaller images will be for the regular iPad.

Android graphics

  1. Figure out the largest Android device we likely want to go after, and get its screen resolution. Let’s say we want to target a Nexus 10 tablet, which is 2560×1600.
  2. We’ll take those dimensions, and multiply them by 2.25 (225%), and build our file in Photoshop at 5760×3600 (72dpi).
  3. Break your UI pieces apart and export them out as PNG files.
  4. Download 9patch-resizer.  (get the newest .jar file) Save it to your desktop.
  5. This part is clumsy, but the end result is worth it.
  6. Open terminal.
  7. type in cd desktop
  8. Type in java -jar Resizer_1.3.1.jar
  9. Make sure Input density is set to xhdpi
  10. Check all boxes except for tvdpi
  11. Drag ALL your images on top of the arrow

foldersThen end result? Every single one of your UI elements is automatically resized, and placed in pre-named folders, just the way Android developers need them.

Questions? Give me a shout.

August  8, 2009

Video encoding confusion: Tekzilla clears it up

by Bill at 10:04 pm

I was watching an episode of Tekzilla the other day. The show comes from Revision 3, and is hosted by car-dude Patrick Norton and geek-gal Veronica Belmont. Kevin Rose filled in for Patrick this day, as they answered viewer questions — one being about proper video encoding for online. They use an app called Episode Pro. I assume these directions and screenshots are from that app … but you’re likely to have some of these same fields whether you use Sorenson, Vegas, Quicktime .. you name it.

You can watch the video below… but here’s the just of it:

Bandwidth settings:

  • Peak Rate: 1500 kbit/s
  • Average rate:  1200 kbit/s
  • Frame skip probability: 0
  • VBV buffer size: 5
  • VBR strength: 50 (but grayed out)
  • Profile settings: Vp6-E

Encoding settings:

  • High Quailty
  • 2-pass Encoding: yes (checked)
  • 2-pass Mode: CBR
  • Sharpness: 5

Frame Rate:

  • Frame Rate: 29.97
  • Type: fast
  • Fraction: 1/2
  • Framerate Type: Upper limit
  • First Interlaced Pair: Frame 2 and 3

Deinterlace:

  • Field Order: Automatic detection
  • Creating New Fields by: Edge detecting interpolation
  • Deinterlace Type: deinterlace interlaced frames (automatic)
  • Threshold: 6
  • Deinterlace Chroma: 1
  • Double Frame Rate: 0

Resize:

  • Width: 640
  • Height: 360
  • Top: 0
  • Bottom: 0
  • Left: 0
  • Right: 0
  • Display Ration Compensation: Assume 16:9
  • Aspect Mode: Letterbox (pad)
  • Interlace Handling: Progressive output
  • Interpolation mode: Automatic

video-settings-encoding

video-settings-framerate

video-settings-bandwidth

video-settings-audio
video-settings-encoding