Tutorials

How to Make a Siri Icon in Photoshop

advertisement

Siri is one of the greatest technology inventions in our age. The technology that once could only be seen in sci-fi movie now becomes a reality. We can do things like send a massage, scheduling, phone call and much more using voice command; even we can communicate like the way we talk to a person with Siri. Isn’t that really cool?

So, this cool thing is really inspired us to make this tut. In this tut we are going to make the Siri icon. Just like our previous tutorials, we will make this icon as re-sizable as possible so you can adjust it to any size you want.
You need at least Photoshop CS3 to follow this tutorial, if you’re already have one then let’s get started.

Final Result

Siri Icon Final

Step 1

As we have done previously in previous tutorials, we need to create our project file first and in this tut we create a new file (Ctrl+ N) with dimension of 400x300px (300dpi).
Siri Icon - Step 1

Step 2

We need a linen texture for the background which we can download it here for free. After downloading it, place the texture in the project file.
Next create a circle shape using Ellipse Tool (U) with diameter of 180px (more or less), name this shape “circle base”.
Siri Icon - Step 2

Step 3

Now we add the circle some layer styles. These styles will make the circle looks like a metal.
Siri Icon - Step 3
First, add a Gradient Overlay using Angle gradient style.

Siri Icon - Step 3a
After that, add Inner Shadow style.

Siri Icon - Step 3b
This is how the “circle base” is going to look like, after adding the styles above.

Siri Icon - Step 3c

Step 4

To make the circle base a bit more metal realistic, we will add some other details by copying the circle layer and convert it into Smart Object. Then, add these following layer Filters:

Step 4.1: Noise Filter

Go to Filter > Noise > Add Noise menu. Set the noise value to about 10%.
Siri Icon - Step 4

Step 4.2: Radial Blur

Go to Filter > Blur > Radial Blur menu. Set the blur value to about 17 with Good quality.
Siri Icon - Step 4a

Step 4.3

Now select both circle and group (Ctrl/Cmd+G) them together, then create a circular selection by holding Ctrl/Cmd key and click one of the circle layer at the same time. After that, apply layer mask in the group.
Siri Icon - Step 4b

Step 4.4

Convert this group into Smart Object and add Drop Shadow.

Siri Icon - Step 4c
And this is the end result would look like.

Siri Icon - Step 4d

Step 5

In this step, create another circle shape that is slightly smaller than the first circle, we name this shape “circle (depth)” or name as you want. Then, add Inner Shadow on it.
Siri Icon - Step 5

Siri Icon - Step 5a

Step 6

In this step we will create another circle shape (again) using Ellipse Tool (U), this circle is slightly smaller than the second one we have created before in Step 5, we name this layer circle (top) / top circle.
Siri Icon - Step 6

Step 6.1

Add some styles on this circle, like the first circle. So, in this step we repeat the same step we’ve done in Step 3-4.
And since the Gradient style that we are going to add to this circle is exactly the same as the first one, so we only do copy its style by right-click the “circle base” and select Copy Layer Styles then right-click the top circle layer and select Paste Layer Styles.
Siri Icon - Step 6a

Step 6.2

Duplicate this “top circle” layer and convert it to Smart Object, by right-click on the layer and select Convert to Smart Object. We rename this layer “top circle (textures)
Siri Icon - Step 6b

Step 6.3

Then, go to menu Filter > Noise > Add Noise, give about 10% for the noise value. After that, go to menu Filter > Blur > Radial Blur, and slide to 17 for the Blur amount.
Siri Icon - Step 6c

Step 6.4

(see no. 2) Select the two top circles, group (Cmd/Ctrl+G) them, hold Cmd/Ctrl key and click to one of the circle then apply layer mask on the group.
Siri Icon - Step 6d

Step 6.5

Convert this group to Smart Object and add Drop Shadow on it.
Siri Icon - Step 6
This is it, let’s take a look the result for a while.
Siri Icon - Step 6e

Step 7

From this step, we are going to make the Microphone.
Firstly, we create the mic handler, and since we want this icon to be resizable we will make this mic handler in custom Shape.
Add a rectangular shape in our project file and remove the vector mask from it. Set the layer Fill value 90%. This will help us to draw our microphone later. (See the screenshot below)
Siri Icon - Step 7

Step 7.1

Now go to Paths tab (this tab by default is in the right side of Channels tab), and create a new path layer, the same by creating a new layer in the Layers tab
Siri Icon - Step 7a

Step 8

Select Ellipse Tool (U) in the Toolbox, then change its mode to Paths & Add to path area (+) from the Tool Options Box (see the screenshot below).
Create a circle path with a diameter of about 60px.
Siri Icon - Step 8

Step 8.1

Now change the Ellipse Tool mode to Subtract to path area (-). Create another circle the is slightly smaller than the previous one (Est. 45px diameter). Align these circles path to be centered both vertically and horizontally.
Siri Icon - Step 8a

Step 8.2

In this step, select Rectangle Tool (U) in the toolbox. Keep the mode to Path and Add to path area (+) in the Tool Options Box.
Then create four rectangular paths as seen on the following screenshot.
Siri Icon - Step 8b

Step 8.3

Still with the Rectangle Tool (U), now change its mode to Subtract to path area (-).
Then create another rectangle shape, place it between the two (No. 1 & 2) rectangular shapes we’ve created before. (See the screenshot)
Siri Icon - Step 8c

Step 8.4

We’ve done drawing our path, and then we make this path into a custom Shape, so that we can select it through Shape library.
Go to Edit > Define Custom Shape, name the shape to mic handler and click OK. After that, we go to Tool Options Box and
make sure you have selected Custom Shape Tool (U), in the Toolbox. Our custom shape should now be in the Shape Library.
Siri Icon - Step 8d
Select our custom shape, and create one.

Step 9

It’s time to add some Layer styles on it. Start by adding Inner Shadow.
Siri Icon - Step 9
And Gradient Overlay

Siri Icon - Step 9b

Siri Icon - Step 9a
OK, now let’s take a look the result.

Siri Icon - Step 9c

Step 10

After creating the handler now it’s time to make the head. Select Rounded Rectangle Tool (U) in the Toolbox, change its mode to Shape layers in the Tool Options Box, and set its radius to 25%.
Create one, and place it above the mic handler.
Siri Icon - Step 10
Then, we add Inner Shadow on it.
Siri Icon - Step 10a

Step 10.1

To add the details in the mic head, create another rounded with 25px rounded radius that is slightly smaller from the previous one.
Siri Icon - Step 10b
Then let’s add some layer styles for the details.
Add Drop Shadow

Siri Icon - Step 10c

And Inner Glow, change the Glow color to white (#FFFFFF) with 35% opacity.
Siri Icon - Step 10d
Then we add Gradient Overlay, with color gradation from #220033 to #FFFFFF.

Siri Icon - Step 10e

Siri Icon - Step 10f

Step 11

Next we will create a (sort of) dotted texture that we typically saw in a microphone.
First create another new file (Cmd/Ctrl+N), with size of 30 by 30 px.
Siri Icon - Step 11

Step 11.1

Create a circle Shape layer in the new document, Fill with white color. Then go to Edit menu and select Define Pattern.
Siri Icon - Step 11a

Step 12

Then add Pattern Overlay on it, now our new pattern should be included in pattern library. Scale the patter 12% and change the blend mode to Overlay.
Siri Icon - Step 12
Let’s take a look the result for a while.
Siri Icon - Step 12a

Step 13

Next, we will make a glowing effect on the mic head. Create a circle shape, place in the center (see the screenshot), and set the layer Fill value to 0%.
Siri Icon - Step 13
Add Radial Gradient Overlay with color gradation from #FFFFFF to transparent, then right-click this layer and select Create Clipping Mask.

Siri Icon - Step 13a

Step 14

In this step we create the shine effect on the mic head. Well, most of Apple-made icon is always shining.
Siri Icon - Step 14
So create a white rounded rectangle (again), set 0% in its layer Fill.
Add Gradient Overlay from white (#FFFFFF) to transparent.

Siri Icon - Step 14a

Step 14.1

Next, create a (sort of) parallelogram selection, on the layer and apply a layer masking on it.
Siri Icon - Step 14c
The final appearance of the shape should now look like this:

Siri Icon - Step 14d

Step 15

When Siri are processing your conversation. Siri turning on a spinning light that indicates the loading.
So, in this step we will create this light loading indicator effect.
First, create a circle shape layer using Ellipse Tool (U) this circle has the same size of circle depth layer.

Siri Icon - Step 15
Next, add Gradient Overlay from #D73FDD to transparent.
Siri Icon - Step 15a
Duplicate this layer.

Siri Icon - Step 15b
Then, adjust its gradient setting.
Siri Icon - Step 15c

Siri Icon - Step 15d
Now let’s see the result for a while.

Siri Icon - Step 15e

Step 16

We are almost done here. But we need to add last detail on it. So, In this step we are going to create a bright sort of meteor-like light effect on this light-loading-indicator.
First, create a Rectangle shape, remove its vector mask then set its Fill value 80%. In the Paths tab, create a new path layer.
Siri Icon - Step 16

Step 16.1

Remember how to create a custom shape we’ve done in Step 8? We will do the same steps here.
Select Ellipse Tool (U) in the toolbox and in the Tool Options Box change its mode to Paths. Create a circle shape layer, which is slightly smaller than the depth circle layer.
Siri Icon - Step 16a

Step 16.2

Now create another smaller circle path this time change the pat mode to Subtract from path area (-) then align it at the bottom left of the previous circle. (See the screenshot below)
Siri Icon - Step 16b

Step 16.3

In this step, select Rectangle Tool (U), keep its mode to Subtract from path area (-) and create two rectangles as seen on the following screenshot. These rectangles will trim the circles half to the right and to the bottom.
Siri Icon - Step 16c

Step 16.4

Now and again select Ellipse Tool (U) in the Toolbox, draw a circle path right between the two circles with Add to path area (+) mode.
Siri Icon - Step 16d

Step 16.5

Go to Edit menu and select Define Custom Shape, let’s name it meteor, well, you can always name it that suit your style, this name is just optional.
Next, select Custom Shape Tool (U) in the toolbox and select our just made custom shape then draw it between the two circles.

Siri Icon - Step 16e

Step 17

Now let’s style this custom shape by adding Outer Glow, change glow color to #DA68DE
Siri Icon - Step 17
and Gradient Overlay with color gradation from #da68de to white.

Siri Icon - Step 17a
Convert this layer to Smart Object and go to Filter > Blur menu, and then select Gaussian Blur.
Siri Icon - Step 17b

Siri Icon - Step 17c

Step 18

OK, that’s a long process you may take a break for while if you need to. But we haven’t yet done with the light effect.
In this step create a circle using Ellipse Tool (U) above our “meteor”.
Siri Icon - Step 18
Change the layer fill to 0% and add white-to-transparent Radial Gradient. After that right click the circle base layer to create a circle selection and apply Layer mask.
Siri Icon - Step 18a
OK we have approached in the last step of our tutorial. The following is the final outcome of our Siri icon. Let’s take a look.

Siri Icon - Step 18b

Step 19: Additional

And technically we have done creating our Siri icon. But here I’m going to add some additional layer and element.
First I add a rectangle shape full size of the file dimension above all the layers. Add radial gradient on it with Overlay blend mode and 35% opacity.
Siri Icon - Step 19
Place the icon slight to left and we write “How can I help you?” in the right side with drop shadow layer style.
This is it, the final outcome of our tutorial.

Siri Icon Final

Download Source File

Summary

We have through a long process to make this icon, and in summary, we have learn some techniques from this tutorial like:

  • Creating a quick custom shape.
  • Creating a quick custom pattern.
  • Creating metal-like & light effect.
  • Etc.

We won’t just stop here, as we are currently setting up the next tut to complement our icons and here is the sneak peek of our next tut:

iPhone 4S with Siri

Thank you for reading and Happy Holidays.

Leave a Comment

  • Azoo

    It’s simple to look at but a bit complicated to make. lol but thumbs up to this post!

    Reply
  • Crimson Blue

    Wow! Cool tutorial you have here brother

    Reply
  • Howie Doe

    I’ve been a constant visitor of this site. It’s been amazing to learn from here :-)

    Reply
  • Jenny

    You must be very good in this field

    Reply
  • doodle

    Thank you for sharing this with us

    Reply
  • bodalulu

    You’re awesome man! Will be looking forward more posts from you.. :)

    Reply
  • Mylene

    Nice post Thoriq keep it up

    Reply
  • Hilary Pice

    Nice post Thoriq keep it up

    Reply
  • Designrshub - Design Magazine

    This tutorial is really great. Thumbs up for the person who did this.

    Reply
  • Nisarg

    Thanks…Nice tut :D

    Reply
  • J

    awesome tut. Thanks for this!=]

    Reply
  • nahid

    how do you center the shapes? Can you please explain how did you get the mic icon circles to be centered? Exact dimensions also

    Reply
  • Hernan

    wow, great work and thank you for sharing

    Reply
  • Deborah

    Gee, little parts missing!! Looks good, but hard to get exact.
    H0rse

    Reply
  • idress

    nice

    Reply
  • abusamra

    very nice…:(

    Reply
  • Abagail

    thanks,very nice~

    Reply