iPhone icons in iOS7 - learn flat design
3.5 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
165 students enrolled
Wishlisted Wishlist

Please confirm that you want to add iPhone icons in iOS7 - learn flat design to your Wishlist.

Add to Wishlist

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.5 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
165 students enrolled
Created by Alex Nagy
Last updated 9/2013
English
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
What Will I Learn?
  • learn how to make flat iPhone icons for your app
View Curriculum
Requirements
  • 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
Description

--- 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 is the target audience?
  • all iOS (iPhone/iPad) developers and designers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 41 Lectures Collapse 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
02:16

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
01:22

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

Principle #4 - No added effect... just a little
01:00

Meet the most popular iOS7 icon type.

Principle #5 - The "gradient" icon
01:12

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

Principle #6 - The "3 colors" icon
00:45

More colors. This will be one colorful year :)

Principle #7 - The "more colors" icon
00:54

Some effects are allowed, but not too much.

Principle # 8 - The "not so flat" icon
00:39

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
02:21

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.

Safari
08:45

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.

Music
04:40

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.

Messages
03:26

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.

Calendar
03:00

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"

Photos
06:11

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.

Camera
07:31

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.

Videos
05:05

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.

Maps
10:35

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.

Passbook
09:48

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.

Notes
03:59

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.

Reminders
03:50

Creating the "Clock" iOS7 icon

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

Clock
04:46

Creating the "Stocks" iOS7 icon

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

Stocks
06:39

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.

Newsstand
11:34

Creating the "iTunes" iOS7 icon

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

iTunes Store
02:11

Creating the "App Store" iOS7 icon

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

App Store
01:52

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
03:50

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.

Settings
13:40

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.

FaceTime
02:56

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
02:53

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.

Calculator
03:29

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.

Contacts
05:56

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.

Compass
06:29
+
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
03:01

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

Bonus #2 - Xcode and ROUNDED corners
03:43

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
01:00

A quick summary of the course.

This is what you have learned about
01:13
About the Instructor
Alex Nagy
4.5 Average rating
143 Reviews
6,741 Students
14 Courses
★ REBELOPER ★

Teacher. Coder. Coffee drinker. I'm never more than a few inches away from something with an  logo.

iOS10, SpriteKit and Swift 3 expert... iOS, watchOS, tvOS and macOS game developer.

Alex is a freelance developer since 2010. He is the owner of the iOS game development studio Rebeloper. Rebeloper is the testing ground for all of his "rebel ideas". He likes to experiment with cutting edge development tools and monetization techniques. Alex is also great in Photoshop, After Effects, HTML5, CSS or almost anything you can throw at him. Recently he is a tvOS evangelist :)

Sandor believes that you have to have 3 things in place to have a successful app business:

  • clean code
  • awesome design
  • cutting edge monetization

He teaches these three things on Udemy since mid 2012 as an established and respected instructor. Currently his courses have more than 3700 students in total and counting.

Also he is the founder of an ambitious startup called: rebeloper. Here he teaches you how to make awesome iOS, watchOS, tvOS and macOS games that actually make you money.

"I was born to code, design & monetize. I do those every day in the name of rebeloper"