Iphone Tab Bar Icons
After reading several articles about how the iPhone displays the tab bar icons I’ve decided to write a simplified version for everyone to understand how things stand.
Here’s how the tab bar appears on the iPhone :
Let’s consider you’re building a new icon in Photoshop(any other advanced graphic software will do, but for this tutorial I’ll stick to Photoshop) for your brand new iPhone application.Let’s take a ellipse(circle) as the groundwork for our little icon.
1.Start Photoshop and make a new transparent project.
2. Draw an ellipse.
Tip : iPhone displays the tab bar icons, in terms of color, exactly as in the image above.The “Off” state is grayish and the “On” state it’s light blue. Since iPhone automatically displays the icons in this way, it doesn’t matter what colors your object has.
3. Let’s say you want this ellipse to be crossed by a line.Firstly, you’ll tend to draw a line just like in the image below :
Now comes the tricky part.If you export this as a transparent .png and place it into your iPhone application it’ll render like this :
iPhone thakes all shapes as a single one and displays it like this.
If you want more “detail” you have to “cut” through the object(ellipse in this case).iPhone display the transparent area behind(the alpha channel of the image).I’ll show you now a complete screenshot with the transparency area included to understand better :
So, in order to display the line on top of the ellipse, you have to cut that specific area.I’ll guide you in the following step.
4. Steps for selection and deletion in Photoshop :
-> Firstly, select your ellipse shape from the layers windows in the right side :
-> Right-click on it and select Rasterize Layer or go to Layer menu-> Rasterize -> Layer.
-> Now select your line layer(Shape 2 in this case) and while holding Alt + Ctrl + Shift click the layer’s tumbnail.
-> Now reselect your ellipse layer(Shape 1 in this case) and hit Delete.
-> Hide or delete your line lawyer(Shape 2 in this case) and you’ll see the transparent area through your ellipse :
5. Save the file as .png(for Photoshop => File -> Save for Web and Devices… -> Preset -> PNG-24; check Transparency and Save)
6. Congratulations, now your icons will look like this :
Conclusion : The iPhone displays all your shapes as one.If you want more detail you have to cut through your main icon and reveal the transparent area.Don’t forget to save it as .png with transparency enabled.
Hope you enjoyed this tutorial and made your work easier !
Related posts:
28 Comments
Trackbacks/Pingbacks
- Iphone Tab Bar Icons » Programing Tutorials | Design | Area72.ro | PhotoShopped - [...] Continued here: Iphone Tab Bar Icons » Programing Tutorials | Design | Area72.ro [...]
- transparent area - [...] a transparent airbrush (choose your transparency percentage depending on the desired result) ...Iphone Tab Bar Icons Iphone Development Area72 ...
- Iphone Tab Bar Icons | Web Tutorials - [...] Iphone Tab Bar Icons « General It « Area72. Categorized under: Basics, Photoshop. Tagged with: Photoshop ...
Hello from Russia!
Can I quote a post in your blog with the link to you?
Hello !
Yes, of course.
wow!! nice post
I like it
Wow, thanks a bunch m8 !
Very nice to see that people appreciate
This is SO helpful.What a time-saver! Thanks for sharing.
Good site!
Very short, simple and easy to understand!
Hi,
Thank you for this small tuto.
I followed your steps and im not having the same result.
http://img519.imageshack.us/i/img0164.png/
For some reason that i dont know, iphone is not “reading” the transparency info in the png image. He is substituting it for white.
Could you please help me?
Thank you
Dany
Send me that rounded rectangle that causes you the problem at office@area72.ro to check it up a little.
It is perfect!
Oh, thanks very much!
Thank you! You saved me.
Very glad to see that! You’re welcome!
Nice post
Thanks
Great work!
Thank you!
Pretty nice post.
Thanks!
Thank you
Nice post! keep it up.
Thanks very much!
Cheers for this post, it was great to read.
Terrific article!
I’m happy it helped you.
Thanks Jake!