Share this article
It\u2019s 2014: Everyone you know has a web-ready phone, and it seems like every second person you talk to dreams of creating their own chart-topping, million-selling app. This has lead to a truly crazy proliferation of apps available across the various, different online stores.
It almost goes without saying that obtaining a simple, eye-catching app icon is \u2018table stakes\u2019 for anyone hoping to compete in such a hyper-competitive jungle.
So, in this tutorial, I\u2019ll show you how to create an elegant calculator app icon, using the powers of Adobe Photoshop.
Here\u2019s a peek at what we\u2019re aiming to make:
The first thing you have to do is to create a new document, you can do this just by pressing \u2018Ctrl + N\u2019. Give the canvas the dimensions of 1000 x 800 pixels. You are free to insert any background you want, in this case I chose a flat metal pattern.
Create a new layer, and, after selecting the \u2018Rounded Rectangle Tool\u2019 with the radius set to 40 pixels, draw a square. As usual, this is easier if you hold the \u2018Shift\u2019 button stretching out your rectangle.
It\u2019s time to add some style, so double-click on the layer to open the \u2018Layer Style\u2019 panel.
Go to \u2018Stroke\u2019 and insert the following values:
Move to \u2018Gradient Overlay\u2019:
We are now going to create the blue main circle. Pick the \u2018Elliptical Tool\u2019 up and draw a circle inside the rounded rectangle. Once again, I suggest holding down the \u2018Shift\u2019 button to maintain a perfect circle.
The color you use it\u2019s not important since we are going to fill it with a gradient. Open the \u2018Layer Style\u2019 panel and go to \u2018Gradient Overlay\u2019.
You should be seeing something like this:
Let\u2019s create the inner rounded rectangle \u2014 the calculator body. To draw the shape, you\u2019ll do exactly what we did in step 2, with one difference. Instead of adding a gradient, we\u2019ll fill the shape with just one color: #d1eefc.
Open the \u2018Stroke\u2019 panel and punch in the following parameters:
Every calculator needs a screen, and ours\u2019 is no exception. Anyway, this is an easy step.
Simply draw a rounded rectangle using the \u2018Rounded Rectangle Tool\u2019. This time it\u2019s better to set the corner radius to around 10 pixels.
I filled the shape with a classic \u2018white\u2019 (#ffffff), but a light-grey would be fine too. Your call.
In this step, we\u2019ll make the smaller buttons.
Once more we\u2019ll use the \u2018Rounded Shape Tool\u2019 with a 10 pixels radius.
You\u2019ll have to draw a small rounded shape, you can create either a square or a rectangle, as you prefer.
Then open the \u2018Gradient Overlay\u2019 panel and insert these values:
As of the stroke, use white or a light color and set the size to 2 pixels.
So now we\u2019ve created one of the four buttons. If everything worked out ok you should get a result similar to this one.
You should now proceed with the creation of the other buttons.
Don\u2019t worry, you don\u2019t have to repeat the previous step three times, you can easily duplicate the button level and place the shapes in the most suitable positions. I suggest you using the guidelines in order to get a symmetric result.
The key with the \u2018equal sign\u2019 can be created as the previous ones. Of course it\u2019s a bit bigger, I made it twice higher than the other buttons.
The color is different too, indeed the gradient goes from #1d77ef to #87e7f5.
We have almost finished the work. We only have to add some details to make the calculator looks more real.
For example, it\u2019s possible to add some math signs on the buttons: you can easily find many ready-made symbols on the web.
Differently, I decided to create my own signs. In this case you have to select the \u2018Line Tool\u2019 and set the thickness to 2 pixels. The color I used is white, #ffffff, but I suggest you using the same color of the buttons stroke.
This is the very last step of this Photoshop tutorial. It\u2019s time to add some numbers on the screen.
So, pick the \u2018Horizontal Text Tool\u2019 up and write some digits. The font I used Is \u2018Helvetica Neue UltraLight\u2019 , while the color is a common black, #000000.
And that\u2019s it!
I hope you enjoyed it and got a great result along the way.
To design a flat calculator app icon in Photoshop, you will need to use several basic tools. The Rectangle Tool is essential for creating the basic shape of the calculator. The Rounded Rectangle Tool can be used to create the buttons of the calculator. The Text Tool is used to add numbers and symbols on the buttons. The Gradient Tool can be used to add depth and dimension to the flat design. Lastly, the Layer Styles feature is used to add effects such as drop shadows, strokes, and gradients to enhance the overall look of the icon.
Creating a realistic shadow effect in Photoshop can be achieved by using the Drop Shadow feature found in the Layer Styles. You can adjust the opacity, distance, spread, and size of the shadow to create a realistic effect. It\u2019s important to consider the light source in your design to ensure the shadow is consistent and realistic.
Consistency in design is key in creating a cohesive user experience. You can ensure this by using a consistent color scheme, typography, and design elements throughout your app and icon design. Using the Eyedropper Tool in Photoshop can help you match the exact colors used in your app design.
Photoshop allows you to export your design in various sizes using the Export As feature. You can specify the sizes you need for different devices. It\u2019s important to consider the requirements of different app stores as they may have specific size and format requirements.
Even though the design is flat, you can create a 3D effect by using gradients and shadows. The Gradient Tool in Photoshop allows you to add a gradient effect to your design, giving it depth and dimension. Adding a drop shadow can also enhance the 3D effect.
Adding text to your calculator buttons can be done using the Text Tool in Photoshop. You can choose the font, size, and color of the text. It\u2019s important to ensure the text is clear and legible, even at smaller sizes.
Creating a rounded rectangle in Photoshop can be done using the Rounded Rectangle Tool. You can adjust the radius of the corners to create the desired roundness.
Layer styles in Photoshop allow you to add effects to your design such as drop shadows, strokes, and gradients. You can apply these effects to a layer and adjust the settings to achieve the desired look.
The Gradient Tool in Photoshop allows you to add a gradient effect to your design. You can choose the colors and direction of the gradient. This can add depth and dimension to your flat design.
Creating a visually appealing and standout design involves a combination of factors. A unique and recognizable shape, a consistent and appealing color scheme, clear and legible text, and effective use of effects such as gradients and shadows can all contribute to a standout design. It\u2019s also important to consider the context in which the icon will be seen, such as on different devices and alongside other app icons.
Simone is a graphic designer who loves technology, design and who is always looking for new trends and innovative concepts. He also likes to give tips and to share his knowledge with other tech-lovers.<\/p>\n