To the users of Photoshop software for detailed analysis to share the rapid design of an iOS application icon to make a tutorial.
Before you start, prepare an iOS app icon template that you can download from iOS icon template or app Icontemplate (I'm using the latter footage).
My computer screen shows only a large 1024px icon, I think this template to do a reference on it.
You can crop the application icon template, keep only the 1024px icon, or work on the remaining elements on the template.
Step 1: Create the basic shape of the iOS application icon
First create a new layer and fill the background color, the reference color value is #acced6.
Next, add a mask to the color layer so that it renders the outline of the icon. Technically this step can not be, because the upload image, Apple will automatically help you cut round corners.
However, for better visual effects, I recommend using masks.
How do you do that? When you hold down the command (MAC user) or CTRL (Windows user) key and click the icon template layer, the color layer appears in a selection.
Then click on the Mask icon at the bottom of the layers panel to create the mask.
Click the right mouse button on the color layer and select the blending option in the pop-up menu. Let's add a weak gradient to it. The starting and ending color values for the gradient are #acced6 and #7cbece respectively.
The gradient style selects a linear gradient, with an angle of 135 degrees, which renders a light blue gradient effect from the upper-left corner to the lower-right corner.
If the two color sequences are reversed, the adjustment angle is 135 degrees or 315 degrees.
Step 3: Create an inner circle
The white circle in the middle of the icon is an important part of the entire icon design, and we can draw a circle using the iOS icon grid: Using the Ellipse tool (U) to create a positive circle with a width of 890px.
In the property panel, you can resize it to align with the grid.
Step 4: Add a layer style to the circle
Add layer styles such as strokes, shadows, and gradients to a shape layer.
The gradient of the circle is relatively simple, and the gradients are #ffffff and #d9d9d9.
Gradient styles Select a radial gradient. To make the center of the circle appear slightly brighter, a white to light gray gradient from the centre to the edge is set to 150%.
The stroke of the circle is bold, the stroke position is selected internally, the reference value of the stroke size is 30px, and the fill type selects the gradient.
The color of the gradient is lighter than the background of the icon. The starting and ending color values are #d1e4e8 and #a9deeb, and the gradient angle is set to-45 degrees, showing a dark blue gradient from the top of the light blue to the bottom.
The inner shadow here is actually a white high light, and you can also use the inner glow style. Set the blending option to normal with a distance of 0. Set the size to 70.
(Note: The original text here is 140px, but does not match the parameters on the screenshot, so the translator temporarily changes the parameter to 70px)
Finally, add a projection to the circle, so that the stroke looks clearer, also can make the entire circle in the blue background to see also very obvious. Set the opacity of the shadow to 10%,
The distance is set to 0, the size is set slightly larger, and my reference value is 55.
The effect is shown in the following illustration:
Step 5: Add a pencil icon
We added an icon based on the previous step, and I chose the pencil icon. You can search for the icon you want in Sliceberry or the Noun project. Because the icons we make are 1024*1024 specs,
So be sure to choose the big icon.
Import the icon into your PSD file and resize it. If you use a pencil icon that is as big as mine, you need to shrink it to 1/2. You can use the iOS template to control the icon within the circle.
In order for the icon to be perpendicular to the horizontal line, you need to rotate it 62.32 degrees. Press the T key while pressing the command (MAC user) or the CRTL (Windows user) key,
Enter a value of 62.32 in the top window next to the small triangle icon. (You can also skip the spin icon step)
Step 6: Add a layer style to the pencil layer
Finally to the icon to make the final step, let's add the gradient overlay and the inner shadow.
Open the blending options for the layer, select the gradient overlay, and the color value parameter is the same as Step 2, the starting and ending color values are #acced6 and #7cbece respectively. The gradient effect is rendered diagonally,
Angle set to-45 degrees, starting from the light blue in the upper left corner, to the lower right corner of the dark blue end.
This is the last small step in this tutorial. Add an inner shadow to the pencil layer to make it look a bit thick. The inner shadow other parameters are unchanged, only reducing their transparency, the reference value is 15%.
This is because the whole icon uses bright colors, so let's make it feel a little bit shaded.
The icon is here to make the finished. The goal of this tutorial is to show you how the beautiful iOS app icon is made, the process is not that complicated, and the final effect looks great,
You can use this method to try to make other icons.
Well, the above information is small compiled to you photoshop this software users of the detailed rapid design of an iOS application icon of the production of a tutorial to analyze the entire content of the share, you see the users here are now very clear how the production method, Then you will go to the small series of tutorials to make their own.
