iPhone icons in iOS7 - learn flat design
3.0 (5 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
165 students enrolled

iPhone icons in iOS7 - learn flat design

Stay ahead of the game with these principles and make your app icon stand out on the App Store
3.0 (5 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
165 students enrolled
Created by Alex Nagy
Last updated 9/2013
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 28 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • learn how to make flat iPhone icons for your app
  • you will have to have an iOS developer account to publish apps
  • Photoshop is my "drug" of choice. The resources are PSD files, so you better have Photoshop or something installed on your computer :D

--- Are you a student or a non-profit organization? Just message me for a considerable discount. ---

FLAT DESIGN - Most designers either can’t get enough of this trend, or absolutely hate it. But one thing remains certain: Apple embraced it in iOS7 so you better learn what flat design is... or pay the price.

Your app icon is your FIRST IMPRESSION about your app/game so you better work hard on making that icon look awesome!

Did you know that you need 18 icons in 13 different sizes for you app? You can learn all the smart and useful stuff from here.

In this course I will show you 9 principles of flat designed icons. Inside you will find:

  • flat design principles
  • PSD templates for your flat icons
  • making of all the standard iOS flat icon - ALL 26 OF THEM
  • 2 bonus lectures that will save you a lot of development time
  • 41 high quality HD video lectures (1920 x 1080)
  • 2 quizzes to test your knowledge

You will get to download a Resources folder that includes:

  • 2 PSD files for your flat icons
  • Brushes
  • Swaches
  • 11 flat gradients
  • 26 standard iOS7 icons (psd and png files, 1024 x 1024 pixels)
  • Much more

Stay ahead of the game, make your app noticed on the App Store with the strongest trend in 2013.

Learn how to make awesome flat design icons.

Who this course is for:
  • all iOS (iPhone/iPad) developers and designers
Course content
Expand all 41 lectures 02:56:21
+ Welcome
2 lectures 04:34

In this first lecture I will show you what this course covers.

Preview 01:44

First impressions are everything. In this course you will learn how to make that A+ flat icon that will turn heads. You will give you the knowledge and the tools to make your dream iOS7, flat icon.

Preview 02:50
+ 9 principles about flat design icons
9 lectures 12:54

The corners in iOS7 look much smoother and organic.

Don't forget to download the Resources :D

Principle #1 - These corners are sexy

In this lecture we are going to learn about how important colors are in flat design.

Preview 02:25

Flat design is simple by nature, so KISS (keep it simple stupid) ;D

Principle #3 - Simple elements

This is why the Apple Flat is not like the Google Flat.

Principle #4 - No added effect... just a little

Meet the most popular iOS7 icon type.

Principle #5 - The "gradient" icon

It's what it says: these icons are made up by only 3 colors (mostly).

Principle #6 - The "3 colors" icon

More colors. This will be one colorful year :)

Principle #7 - The "more colors" icon

Some effects are allowed, but not too much.

Principle # 8 - The "not so flat" icon

You will need rounded icons for your marketing. Here's how you will make them.

Also, take a look at lecture #39 for the new PSD file :)

Principle #9 - Squared and rounded corners

Test your knowledge.

Quiz about the 9 principles
10 questions
+ Making of... (great examples to learn from)
26 lectures 02:29:56

Creating the "Phone" iOS7 icon

In this lecture I am going to show you how I re-created the Phone icon. This is the most important icon of them all, after all the iPhone is a phone.

Because these example videos are much too long, I have put them on fast-forward.

Remember to download the finished psd along with the png files for this icon to the right. Take a look at them and enjoy this video of how it was made.

Preview 06:51

Creating the "Mail" iOS7 icon

The mail icon is quite simple. It just uses a different gradient. I have included all of the used gradients in the Resources folder. Use them freely.

Preview 05:49

Creating the "Safari" iOS7 icon

Creating the Safari icon was meticulous, but in the end it was worth it. Watch this video of how it all was made.


Creating the "Music" iOS7 icon

Yet another easy icon to reproduce. The music icon is fairly simple. Just add some gradient to it and we are ready.


Creating the "Messages" iOS7 icon

Because the messaging is second to calling, the Messages icon looks similar to the Phone icon. Let's see how I made it.


Creating the "Calendar" iOS7 icon

The calendar icon is a great example of what Apple means by flat and simple design. Creating a simple icon can be hard. You have to put a lot of thought into it. But once it is clear, you are ready to design it.


Creating the "Photos" iOS7 icon

Photos are colorful. So is this awesome Photos icon. Let's reproduce it.

Don't forget that you can download this and all the other icons' psd files to the right of the lecture.

P.S. I have redone the Photos icon :) Download the new psd file from "Photos revised"


Creating the "Camera" iOS7 icon

Making the Camera icon looks simple at first glance, but I had a lot of work with it. Take a look at this video to find out how i tackled the obstacles.


Creating the "Videos" iOS7 icon

The Videos icon hasn't changed that much. It just got flat. in my opinion it's much cooler now.


Creating the "Maps" iOS7 icon

Here's a fairly complicated icon witch needs a lot of attention to detail. If you are like me, always tinkering with details, you will love this lecture. Also, take a look at the downloadable psd file to the right.


Creating the "Weather" iOS7 icon

The Weather icon is one of my favorites: simple and clear, like a sunny day.

Preview 04:11

Creating the "Passbook" iOS7 icon

Here you will find a perfect example of bending the standard flat design rules. The Passbook icon is not so flat after all.


Creating the "Notes" iOS7 icon

This is my favorite icon of them all. It represents all what iOS flat design is about. Love this icon.


Creating the "Reminders" iOS7 icon

It looks like this ikon was inspired by the Notes icon. Simple and elegant; the design tells the functionality; just the way I like it.


Creating the "Clock" iOS7 icon

We all know the Clock icon. Of course you would not add the handles, because they are added programmatically.


Creating the "Stocks" iOS7 icon

One of the black icons of iOS7. Don't be afraid to use black. Black goes with everything.


Creating the "Newsstand" iOS7 icon

The Newsstand icon is one of my least loved icons. I believe it is just childish, and it's a pain in the you-know-what to reproduce. But hey, it is still a flat icon.


Creating the "iTunes" iOS7 icon

Not much to tell about this icon. Just use the gradient and you're done.

iTunes Store

Creating the "App Store" iOS7 icon

This icon is the brother of the iTunes Store icon. Simple and elegant.

App Store

Creating the "Game Center" iOS7 icon

Do you like bubbles? Who doesn't? Install the bubbles brush from the Resources folder and you're good to go.

Game Center

Creating the "Settings" iOS7 icon

This icon was hard to make. A lot of detail, a lot of work. In the end it worth it. Check this video out to find out the process or download the finished psd file to the right.


Creating the "Face Time" iOS7 icon

Yet another iOS7 icon that is simple. Take a look at this video to see how easy it is to make an icon when you have decided to use strong symbols, like this video symbol.


Creating the "Voice Memos" iOS7 icon

This icon uses only black and white and a sound-wave to represent the functionality of the app. Nice indeed.

Voice Memos

Creating the "Calculator" iOS7 icon

Expressing the purpose of the app is important. Expressing it as simple and clear as possible is hard. If you want to take a look at a great Calculator icon, look no further.


Creating the "Contacts" iOS7 icon

This is another example of the "not so flat" icons. It resembles of a contacts book but it still remains stylishly flat. Download the final psd file from the right.


Creating the "Compass" iOS7 icon

One of the great pleasant surprises of the iOS7 icon set was this one. It's hard to replicate, but it fits in nicely with the UI of the app. Genius.

+ What to do next?
2 lectures 06:44

You should know that you will need a lot of icons in different sizes. In this lecture I will show you how you will love to make them.

Bonus #1 - Create once, export to all dimensions

Lastly you will have to add your icons to your Xcode project.

Bonus #2 - Xcode and ROUNDED corners

This is the second and last quiz to verify your knowledge about the two bonuses.

Quiz about the bonuses
5 questions
+ Conclusion
2 lectures 02:13

Flat design is here to stay. It is new, exciting and a lot of fun.

Flat design is king

A quick summary of the course.

This is what you have learned about