Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
iPhone User Interface Cookbook

You're reading from   iPhone User Interface Cookbook A concise dissection of Apple's iOS user interface design principles

Arrow left icon
Product type Paperback
Published in Nov 2011
Publisher Packt
ISBN-13 9781849691147
Length 262 pages
Edition 1st Edition
Tools
Concepts
Arrow right icon
Author (1):
Arrow left icon
Cameron Banga Cameron Banga
Author Profile Icon Cameron Banga
Cameron Banga
Arrow right icon
View More author details
Toc

Table of Contents (18) Chapters Close

iPhone User Interface Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
PacktLib.PacktPub.com
Preface
1. Getting Started: Prototyping, Proper Tools, and Testing our Design FREE CHAPTER 2. Customizing our Icon, the Navigation Bar, and the Tab Bar 3. Different Ways to "View" our Application 4. Utilizing Common UI Elements 5. All About Games 6. Starting, Stopping, and Multitasking 7. Notifications, Locations, and Sounds 8. Accessibility, Options, and Limited Opportunity to Help our User 9. Migrating to the iPad The Importance of Direct Manipulation
If you need a stylus, you blew it

Creating the rounded edges effect on our icon


The raised, rounded rectangle bezel is a common trait on many application icons. Made popular by developers such as Electronic Arts, Lima Sky, Gameloft, and others, such icons often look as if they almost have a wooden or metal frame.

Let's take a look at how we can go about creating our own rounded edge effect so that our icons stick out on the App Store.

Getting ready

For this recipe, we'll need a copy of Adobe Photoshop or another similar raster image editing application. It will also be useful to have the source file, titled IconBezel.PSD, to be downloaded from the Packt website.

How to do it...

Creating a rounded bezel effect on our icon is relatively simple; we'll just have to work in some rounded rectangles and proper sizing requirements. Let's take a look at the simple steps that we must take to create such an icon:

  1. 1. Create a new Photoshop file for the icon, square in shape, measuring at least 512 pixels by 512 pixels. Then, give a color...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image