Templates by BIGtheme NET
Home / Basics / Photoshop Tutorials: Custom Design for Flat Types of Apps Icons

Photoshop Tutorials: Custom Design for Flat Types of Apps Icons

Android and IOS applications programmer always look for a graphics designers who can make the best flat icon, emblem or logos for their applications. They develop their applications by spending a days and nights and want to make their application is also unique and beautiful. So they lease graphics designers and spend a lot of money but their requirements have not been fulfilled. I think there is no need to hire graphic designer anymore. Because in this tutorial we are going to teach you custom design for flat types of Apps Icons in Photoshop for Android and IOS operating systems.

So be attentive and read out every step wisely. After understanding this tutorial, you’ll be able to design attractive icons for your applications easily.

Custom Design for Flat Types of Apps Icons Step By Step

Message App Icon

Step 1: Create Icon Document

First of all create a new document related to your message application Icon size. Go to File -> New a new window will open having further options associated with a new document. First change the document name as Flat Icon with default name Untitled-1 and set the value of Preset as Custom. After that adjust the size of an icon by giving Width and Height values. Set Width 100 Pixels and Height 100 Pixels, after this put the resolution as 72 Pixels / Inches and Color Mode RGB 8bit. At the last set the Background Contents as Transparent from the drop down menu.

New Document Window for Flat Icon. Image © reserved 2015 Photoshop Helps.com

Now values have been set just click on an Ok button a new document will appear in front of your screen which will seem like below picture.

First look of New Transparent Sheet for Flat Icons. Image © reserved 2015 Photoshop Helps.com

Now it is ready for flat icon designing. Before making a design first build a structure in your mind and implement it step by step in the icon sheet. Get the some ideas related to flat icons here  https://www.behance.net/gallery/20382043/Flat-iOS-App-Icons.

Step 2: Round Message Icon

Now we are going to make a messages icon, for this purpose you’ve needed a circle with the help of Ellipse Tool. Draw round shape with Fill and Stroke #f5b144 into a transparent sheet.

Plot Round Shape with Solid Color for Message Icon. Image © reserved 2015 Photoshop Helps.com

A round shape has drawn now it’s time to give some special figure associated with Message identification. So go to custom shape tool and select the Talk 2 diagram from Shape Combo Box. Now draw this figure with Fill and Stroke #ffffff.

Insert a Message Figure from Custom Shape Tool on Icon sheet. Image © reserved 2015 Photoshop Helps.com

Flat message app icon is ready for Android and IOS applications. Just save it in PNG image format. So go to File -> Save and save it in PNG extension into your computer. You can design many of icons for your mobiles applications by this simple way.

Our final Message Flat Icon is ready for use. Image © reserved 2015 Photoshop Helps.com

Ultimate Results

Flight Application Icon

Step 1: Create Flight Icon Document

First of all you’ve needed a new document so repeat the step again go to File -> New or press command Ctrl + N from your keyboard. A new window will open Fill the option like Width 100 Pixels, Height 100 Pixels and Background Contents as Transparent, just like below picture.

Custom Design for Flat Types of Apps Icons new document window. Image © reserved 2015 Photoshop Helps.com

After filling all options press the OK button to create a new document. The first view of a new document can be seen in a below picture.

First look of Transparent Sheet for Flight Icon. Image © reserved 2015 Photoshop Helps.com

Now sheet is ready for designing, it’s your art how can you design flat icons for mobiles applications. Now we are going to design Flat Icon for flight application.

Step 2: Elliptical Flight Icon

Here you’ve needed an Ellipse Tool, select from Tool Bar and draw it with Fill and Stroke #21bbc7. Set the Circle Diagram like below image.

Plot the Round Diagram with Solid Color for Flight Icon. Image © reserved 2015 Photoshop Helps.com

Here is an essential need to set the round diagram. So Select the Pen Tool from Tool Bar and hold Ctrl and Left Click on the edges of a shape. Nodes will appear around the shape, just modify the diagram by holding Ctrl Key + Left Click and arrange it as below picture.

Make the round edges of the shape with Pen Tool. Image © reserved 2015 Photoshop Helps.com

Round Shape has properly adjusted, at this stage give some effect to an around diagram by visiting Add Layer Style -> Drop Shadow from layer section. A new window will open containing lot of options. Set the values as Opacity 80%, Angle 90°, Distance 5px, Size 5px and click Ok button.

Give Drop Shadow to the Shape from Layer Style Window. Image © reserved 2015 Photoshop Helps.com

Now draw an airplane diagram into an icon so select the Airplane figure from Custom Shape Tool and draw it with Fill and Stroke #453768.

Plot the Airplane Figure on the icon to give final touch. Image © reserved 2015 Photoshop Helps.com

Flat Icon for Flight application is ready, just save it in PNG image format go to File -> Save and save it with the extension of PNG into your computer. Enjoy this tutorial and try it with your effort to design more beautiful icons for your mobiles applications.

Finally we have made a Flight icon for Mobile Applications. Image © reserved 2015 Photoshop Helps.com

Ultimate Results

Call Applications Icon

If you are developing a call related application for any mobiles operating system and you don’t know how to design a beautiful call app icon than see below steps.

Step 1: Create Call Icon Document

For designing a call application icon, you must create a new document. Just go to File -> New a new window will open set the appropriate values like below picture.

Make New Document for Call Flat Icon from New Window. Image © reserved 2015 Photoshop Helps.com

After setting the values of new document click OK button. The new transparent sheet will appear on your front sheet.

New Document window for Call icons, here adjust the values. Image © reserved 2015 Photoshop Helps.com

Step 2: Rectangular Call Icon

The sheet is ready for designing, so select the Round Rectangular Tool and draw the shape with Fill and Stroke Color #f18058.

Insert the square shape in the sheet for Call Icon. Image © reserved 2015 Photoshop Helps.com

Now give some effect to layer so go to Layer -> Lifestyle -> Drop Shadow a new window will open related to Drop Shadow options. So set the values as Opacity 75%, Angle 120°, Distance 10px and Size 2px.

call-icon-drop-shadow-window

After pressing the Ok Button, a shadow will appear like below the diagram, which is looking awesome.

Call Icon contains Drop Shadow, in below side. Image © reserved 2015 Photoshop Helps.com

Round Rectangular Diagram has completed now there is a need to add some circle shape in the middle of an icon with Fill and Stroke Color #84c2b7. After filling the circle now add some figure related to Phone so go to Custom Shape Tool and pick the Phone 2 shape from the Drop down menu and Drop it in the middle of a circle like below picture.

Plot a Phone2 Figure With Solid Color on the Call Icon. Image © reserved 2015 Photoshop Helps.com

At last Flat Call application icon has completed just need to save it in PNG format into your computer.

Enjoy this tutorial and make the drill of this tutorial step by step, in the end you’ll be able to create beautiful icon or logo for the company, website or phone applications own your efforts.

Finally we have designed a Call Flat Icon, its final result. Image © reserved 2015 Photoshop Helps.com

Ultimate Results

Conclusion

We have learned to design Flat Icons for Android and IOS applications in Photoshop. We made three type of icons in the above tutorial, 1st a Round Message Icon, 2nd Elliptical Flight Icon in Round Rectangular Shape and 3rd Call Icon in Square shape. All flat Icons dissimilar with each other and have particulate designs. You can make many more icons from these ideas for your mobile applications.

About Ali Imran

Howdy! I’m + Ali Imran and CEO of Photoshophelps.com. I have passed BS Computer Science degree in the year of 2013. I’ve a great experience in Content Writing, Photoshop, Graphics Designing, SEO, Web Developing and Web Designing.

Leave a Reply

Your email address will not be published.