Siri Icon

Create the Siri Icon in Photoshop

On October 4th, Apple introduced the iPhone 4S with it’s integrated voice system, Siri. The first thing that caught my eye, was of course it’s icon. Let me show you how I made a similar icon in Photoshop!

Siri Icon in Photoshop

For you lazy ones, if you want to skip the tutorial completely, you can download the PSD by sharing this post below!

You’re free to start off with any size document that you wish. I chose to start with a 512x512 document, which is standard for icons, at the moment. This will probably be bumped up to 1024×1024 someday. We’re going to start off by creating the microphone in the middle.

The first shape we’ll create will the be mic ‘stand’. Start off my grabbing your Rounded Rectangle Tool from the Tools on the left, and set the Radius to 100px on the Options Bar at the top of your workspace. This will ensure we’re left with nice rounded corners. Draw out a shape in the middle of the document, like the one below.

Once that’s one, we need to subtract a section from the middle. On your Options Bar, choose the Subtract from shape area button (), then drag out another 100px Rounded Rectangle on top of the previous one, making sure to leave a nice ‘edge’ to it, like you see below.

Now the top of the stand doesn’t look right. We need the edges to be flat. To do this, switch to the Rectangle Tool, and making sure to keep the Subtract from shape area button selected, drag out a rectangle over the edges to flatten them out.

Good. That part is done. Now for the bottom rectangles, we can simply add two rectangles onto our current shape. On the Options Bar, select the Add to shape area button, and drag out two rectangles. One vertically, and one horizontally. You should have something that looks like this:

Good! Now that the shape of the stand is complete, let’s add some Layer Styles. We’re going to add a Drop Shadow, Inner Shadow, and a Gradient Overlay. The settings for all three are below.

Perfect! We’ve dealt with the mic’s stand, now let’s create the mic itself. This piece will consist of a few elements. The rounded shape, the ‘dots’ and the shines. Let’s start with the shape of the mic.

To create the shape, we’re going to use the same Rounded Rectangle that we used earlier with the same 100px Radius. Make sure you select the Create new shape button, then draw out a Rounded Rectangle in-between the stand. You should have something like this:

As for the Layer Styles of this layer, we’re going to keep it simple. A Gradient Overlay. The settings are below.

The pattern

You could manually go through and add each dot, which would be a tedious task, or we can create a pattern that will do the job for us! Let me show you the second way!

– Create a new document with the dimensions 12px x 12px and a transparent background.
– Using a 7px hard brush, place a white dot in the center of this document.
– Save the pattern using the Edit > Define Pattern feature.

Applying the pattern:

Back in our icon’s document, create a new layer in your Layer’s Panel. You can also use the Command+Shift+N (Mac) or CTRL+Shift+N (PC) shortcut as well. Once the new layer is created, turn your mic’s shape into a selection, by holding Command/CTRL and clicking on the shape’s thumbnail. You should see ‘marching ants’ running around the mic.

Now that the selection is created, we should give it a bit of breathing room. Head up to Select > Modify > Expand and use a value of 5px. This will allow us to adjust our pattern if we need to. We’re ready to fill it in! Grab your Paint Bucket Tool from your tools on the left, and on your Options Bar at the top, change Foreground to Pattern (). Now you have the ability to select your newly created pattern from the dropdown.

Once the pattern is selected, click anywhere inside your selection. You should see it fill with a load of dots!

Now you’ll probably notice a few things. They’re not centered, and there are some dots that spill off the shape. This is why we expanded the selection a touch. We can simply move the dots left or right in order to center them inside the mic. As for the dots that spill off the shape, we can simply grab our Eraser and remove the dots that spill over, and you can also remove a few in order to create a ‘curved’ look at the top and bottom.

Once you’re happy with the look of the dots, let’s move onto their Layer Styles. Because there’s a section of ‘light’ dots, and ‘dark’ dots, we’re going to duplicate our dots layer. One for the light, one for the dark. With your dots layer selected, use the Command/CTRL+J shortcut key to duplicate. You should be left with two identical layers of dots. Go ahead and hide one of the layers in the meantime.

With the visible layer active, let’s apply some Layer Styles! This will be for the ‘light’ dots. The settings are below.

Now that the Layer Styles are applied, we need to hide half of the dots. Apply a Layer Mask to this layer using the icon at the bottom of your Layer’s Panel (). Once the Layer Mask is applied, use a nice large soft black brush and paint over the top half of the dots. This should hide those from view. You should be left with something like this:

Now that the ‘light’ dots are completed, let’s unhide the second dots layer, and apply the following Layer Styles to it:

And just like we did for the light dots, let’s apply a Layer Mask to this layer, and this time, paint over the bottom half to hide the dots on the bottom. You should be left with this:

Good! Dots are done! Let’s move on to the ‘shines’ of the mic.

The Shines

The shines will be quite simple. The first shine will run diagonally down the mic. Start off by creating a new layer in your Layer’s Panel, then create a selection from the mic’s shape by holding down Command/CTRL and clicking on the mic layer’s thumbnail.

When the selection is made, grab your Polygonal Lasso Tool () from the tools on the left, and with the Option/Alt key held down, select the area that you don’t want included in the shine. When the new selection is ready, fill it with white, then change the Blend Mode to Overlay, and the Opacity to 40%.

You can also add another shine at the top of the mic. You can use the same method, but in this case, use the Circular Marquee Tool to subtract from the selection.

Fantastic! The shines are complete, along with the mic. The last thing to be done, is the circular ‘plate’ in the back, which consists of two elements.

The Plate

The first element of the Plate is simply a circle. Grab your Ellipse Tool from the Shapes Flyout on the left, and drag out a perfect circle by holding down your Shift key. When the circle is in place, apply the following Layer Styles:

Now that the back element is complete, we’re going to duplicate this layer using the Command/CTRL+J shortcut, then scale it down a touch. Use the Command/CTRL+T shortcut to enter Transform Mode, then with your Shift+Alt/Option keys held down, scale the shape inwards, to leave a nice border around the edge of the circle.

When you’ve completed the transformation, we need to cut out the center of this new circle, to create a donut style shape. On your Options Bar at the top, select the Subtract from shape area button, then drag out another perfect circle inside the new circle, again leaving a border around the edge of the inner circle, like you see below.

Now that the inner circle is complete, apply the following Layer Styles:

And just like that, we’re finished! Of course, you can change the colors as you wish, have fun with it!

  • Super cool, having used Paint.net I can say that there are far more features and effects in Photoshop can’t do this as efficiently with Paint.net. The log itself is very clever not only looking like a microphone but also like a robot’s eye (vertical eye) at the same time.

  • iz1337

    iceflowstudios

    Simple yet innovative.. thanks for the tutorial

    Was looking forward to it..

  • MarisLenss

    Awesome tutorial 🙂

  • JiříTeheeMarek

    You are SO AWESOME 😀

  • MariusSørheim

    OK, well done and all that… but i didn’t understand it.. i understand all of you’re previous tutorials like this but just don’t this one, could you plz make a video tutorial about it… Maybye more people would understand it 😉

    🙂 -Marius

  • BryceShearer

    can you post the sdd file for download ??

    thanks

  • BryceShearer

    can you post the psd file for download ??

    thanks

  • TheDsingWebRoom

    Need help over here. As a beginner of PS, when i try to fill the Mic Rounded rectangle with the dots using the paint bucket, it doesn’t let me do it, and ask me to “Rasterize my shape before proceeding” How can i fix that?. i have 2 days trying to figure out,, but can’t :B … any suggestions?

    • coldplayplayer

      Are you sure you did exactly as Howard outlined as I had no problems. So you need to:

      1. Create a new layer.

      2. With that new layer selected, hold Cmd/Ctrl and click on the shapes thumb nail.

      3. Use the Paint bucket to fill the shape.

      When you are done, you’ll see a shape of the microphone filled with white dots on the new layer. I am a photoshop newbie (but learning ultra fast thanks to Howards tutorials) but I’m guessing you don’t have the new layer selected and instead it is trying to fill the actual layer with the microphone shape on it, which you can’t do unless it is rasterized.

      I hope this might be of help and I’m sure someone who is actually a fountain of knowledge will let us both know if I’m way off track.

      • TheDsingWebRoom

        Thanks for the reply,, but yes, i follow all howard’s instructions. But, there is something i didn’t mention actually, i made the design one time, but i didn’t like some details, so i start it again, but i feel i did something messing up my settings. im not sure, but i think.

        I hope someone can give me a hand. (with my first comment)

        And i am agree with you, i am learning many things with this tuts, hope will come more and more… 😀

        Thanks!!

  • KevinHannaRahhal

    Did you use Adobe Photoshop CS5 or Adobe Photoshop Element 9?

    • TheDsingWebRoom

      @KevinHannaRahhal I’m using Adobe Photoshop CS4

  • Eggs9988

    nice written tutorial, but could you please add a video?? Would really help, and I am very basic with PS.. Thanks.

  • EricJHoagland

    Great tutorial!

    One detail that got overlooked (I labored over it for 30 minutes) is the gradient overlay offset on the mic stand… I did not know that you could drag around in the document while in the effects panel to produce the offset.

    At first I didn’t understand why my gradient was in the middle, and yours was off to the lower left, but I eventually figured it out. You may want to add that minor detail for noobs like me.

    For some reason I never got the memo about this functionality with Photoshop! ;)

  • SameedKhn

    Awesome tutorial, Howard. Just have one question – and this is just to gauge how good (or bad) I am – how long did it take you to create the icon approximately? Not the tutorial. Just the icon – from the figuring out stage to the final product.

  • MonaSama

    Thank you for this tutorial ,, i faced few problems following your step in Blending Option.. because my results were different from yours 🙁 .. But I did what I could to make it look like your results .. ^_^

    this my work http://fc01.deviantart.net/fs70/f/2011/300/e/6/mic_by_menami-d4e3cnu.png

  • JohnCotton

    I need help figuring out the second step. I can’t get it to look like the picture.

    • TheDsingWebRoom

      @JohnCotton you mean for substrac the shape??

  • Abdus Sami Sharker

    can you do tutorial on Cinemagraph?

  • Timothy McManus

    Love this tutorial

  • Terrence Kirton

    Thanks a ton your tutorial. I just love your Videos on you tube, I’ve learned a lot from you.

  • Ndiaye Sidy

    I like your videos

  • Gareth Johnstone

    mate ur a legend!

  • Mard Monazere

    can u do a tutorial on windows7 start menu logo ? thanks

  • Māris Lenšs

    Tutorial of epicness. Is there a way to share the results with you? 🙂

  • Lazar Lazarevic

    Which photoshop do ?

  • theCoDdaily

    @IceflowStudios I’ve seen that tutorial… I tried it but failed. Scrapped it, LOL.

  • Houston we have a problem: cannot use paint bucket tool to fill microphone up with dots. Howard can you do a video tutorial of this icon? I have had trouble with this tutorial. Most of your tutorials are EXTREMELY perfect. However this one lacks something.

  • Jayme McColgan

    one of my favorite!

  • Rafat Wt

    I did 🙂
    With my special touch 🙂

  • William Marler

    That may be due to it being such a brilliant tutorial.

  • David Chapon

    Thanks. I learned a lot, as usual 🙂

  • You already made an icon? You’re smart!

  • Gracy Dreamscape

    Can you make this into a video tutorial plzzzzzzz

  • That’s how Samsung did the camera icons too.
    Google Image: Galaxy S4 camera, And enjoy the video camera icon.

    i-cdn(dot)phonearena(dot)com/images/reviews/129728-image/Samsung-Galaxy-S4-Review-59-camera.jpg