iPhone, iPad App Icon Sizes and Rounded Corner Icon in Photoshop

No Comments

This tutorial will show what icon sizes are needed for iPhone or iPad development to submit your app into the AppStore. As an iOS developer, every time I make a new app I have to refresh my memory for the list of icon sizes and have to “google” or “apple” the details.

So, Apple requires the following icon sizes for iPhone, iPad apps to be submitted to the AppStore:

  1. Icon512.png – 512px
  2. Icon.png – 57px
  3. Icon@2x.png – 114px
  4. Icon-72.png – 72px
  5. Icon-72@2x.png – 144px
  6. Icon-Small.png – 29px
  7. Icon-Small@2x.png – 58px

You do not actually need to crop any of the images you use in the binary to submit to Apple. They should all be square and not have any transparency. Apple will automatically mask each icon in the appropriate context.

However, there are cases when I need to make a rounded corner icon for marketing and promotional reasons. Thus, the formula to calculate the rounded corner is:

10 / 57 * (new size)

where 57 is the base icon and 10 is its radius. You have to scale up or scale down to calculate the radius for different size icon. For example, if I want to know the radius of 114px icon I have to do this: 10/57*114. Result is 20 pixels. See the list of all icons and their corresponding radius below:

  1. 512px – 89.825
  2. 57px – 10
  3. 114px – 20
  4. 72px – 12.632
  5. 144px – 25.263
  6. 29px – 5.088
  7. 58px – 10.175

How to create a smooth rounded corner icon.

In Photoshop:

  1. Open your sized-down icon, say 114px, and double-click the Background layer to make it editable.
  2. Select the Rounded Rectangle tool from the Tools panel.
  3. In the Options bar, click the Paths mode button and change the Radius field to 20 pixels (see chart above for radius size). Make sure that the Rounded Rectangle tool is in Paths mode
  4. Click and drag diagonally to draw a box around the icon.
  5. In the Layers panel, make sure the photo layer is selected then add a vector layer mask by Ctrl +  Clicking the Add Layer Mask icon at the bottom of the Layers panel.

This will hide the area outside the rounded square, leaving you with lovely smooth corners on transparent background.

Smooth Rounded Corners in PhotoShop

No Comments

In PhotoShop:

  1. Open an image on which we add rounded corners or create blank image.
  2. Add a new layer on top, so image has its own layer under the newly created layer.
  3. Selected “Rounded Rectangle Tool” and draw rectangle on the new layer.
  4. Double click on the layer that you just drew the rounded rectangle on.
  5. In the Advanced Blending area, play with the Fill Opacity percentage. Make it 0% if real image (not blank) is underneath it.
  6. Click on the Paths tab., select the path, click on the little arrow button, in the upper right corner, and select “Make Selection…”.
  7. In the “Make Selection” option box, make sure Feather Radius is set to 0 pixels, and Anti–aliased IS checked.
  8. Finally, with the selection still pending action, go to Edit, Copy Merged. Create a new document, and leave the dimensions alone. In the new document, go to Edit, Paste. That’s it!

HTML Color Codes and Photoshop Color Picker

No Comments

The best online source for web developers and designers to find HTML color codes is HTML RGB Color Codes developed by VUNET. This tool will not only list all web safe Hexadecimal color codes but also list their RGB values and, as one of the best features, will change the page background color to feel the effect of the selected color.

In addition to these wonderful features, there is a powerful Photoshop-like color picker to choose any possible color of your choice at ease. Simply, visit the page http://www.vunet.us/html-color-codes/ and don’t forget to bookmark it for later use.