--- 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:
You will get to download a Resources folder that includes:
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.
In this first lecture I will show you what this course covers.
The corners in iOS7 look much smoother and organic.
Don't forget to download the Resources :D
In this lecture we are going to learn about how important colors are in flat design.
Flat design is simple by nature, so KISS (keep it simple stupid) ;D
This is why the Apple Flat is not like the Google Flat.
Meet the most popular iOS7 icon type.
It's what it says: these icons are made up by only 3 colors (mostly).
More colors. This will be one colorful year :)
Some effects are allowed, but not too much.
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 :)
Test your knowledge.
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.
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.
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.
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.
Creating the "App Store" iOS7 icon
This icon is the brother of the iTunes Store icon. Simple and elegant.
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.
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.
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.
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.
Lastly you will have to add your icons to your Xcode project.
This is the second and last quiz to verify your knowledge about the two bonuses.
Flat design is here to stay. It is new, exciting and a lot of fun.
A quick summary of the course.
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 2011. 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 or almost anything you can throw at him. Recently he is a Swift 3 evangelist :)
Alex believes that you have to have 3 things in place to have a successful app business:
He teaches these three things on Udemy since mid 2012 as an established and respected instructor. Currently his courses have more than 10.000 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"