How to Create a iPhone Style Icon - Photoshop

Hey you guys, Gerry Button here for Iceberg Creativity, and you know I’ve been down the dam the last few days. I have a headache and migraine and toothache you know it’s been pretty bad for me. So I haven’t had a chance to sit down and do tutorials for you guys. So now that I’m feeling a little better and I could actually speak without being in pain I figured I’d write a tutorial and by popular demand I will be doing a Photoshop tutorial on how to make your very own iPhone icon.

Now, this is a somewhat of a step-by-step help you out kind of thing. You will be learning how to make this icon but it’s also showing you the basis on how to make your own icon. You know a little steps involved, isn’t that 100% accurate but it will definitely get you started so are you ready? Let’s get started.

Begin by opening up Photoshop if you haven’t already. All I got it here open up my document and ready to go. You see have my camera is already loaded, no worries I’m just using a standard 800/600 canvas for this tutorial so if you want to follow on to the tee that’s what size I’m using.

Okay, we’re going to make a new layer and we’re going to rename this layer icon base, so it’s easy to manage all our files in here. You got to grab your shake tool down here is a sort of rectangle. And now up here change the options that you’re using. The rounded rectangle tool, make sure you have fill pixels instead of shape layer selected. This is just easier to work with.

Now this means you can’t go back and really edit the shape but that’s okay. Now one final thing to do before we start is change the radius right here to 30 instead of 10, 30 looks more accurate than 10 when we’re making an icon for an iPhone or an iPod touch.

So now what we’re going to do is we’re going to hold shift on your key board and just drag a selection until you get something that looks similar to the base of an icon for an iPhone so something like this. Now it comes on to add the effects and all the colors to this, so hit V on your keyboard. Actually no, hit G on your keyboard to bring up your gradient tool. If your gradient tool is not selected just hold over here and change the paint bucket tool to the gradient. It’s pretty standard how to do that.

Now, you can see I have a blue, dark blue to light blue gradient matte. This is pretty easy to do so I’m just going to go back to my default gradient. I want to double click right here. I want to go to a dark blue and it’s too dark, it’s too dingy, that’s fine. And go here and then just simple like that and then there’s a gradient. And to add it up here you just call it whatever you want. I will call it New Blue and then hit the new button and you see gradient appear right here and then just click okay.

Now the gradient you just made is ready to use, come and click the thumbnail icon in the layers palette for the icon base layer. So we get a nice a Marquee Selection around the layer or the shape. And with the gradient tools still selected, drag from the bottom corner up to the top. I should add that you should also be using a radio gradient and not linear. You can use linear if you want but for the purpose of the tutorial please stick with me and just use the radio gradient.

Now we’re going to add the actual shine to the icon. To do this, hit M on your keyboard to bring up your selection tool, your marquee selection, just click away to turn on the selection that you made making the gradient. Create a new layer and for obvious reasons call it shine or you can call it glow or metal or whatever you want to call it, hold down on the marquee tool option, so you will get this box to appear to change it from rectangle marquee tool to elliptic marquee tool.

Make sure you have no feather. You don’t want to feather with this. Now on the new layer, make a selection towards the top so it comes down quarter of the icon like that and then get gradient tool by hitting G on your keyboard. From the dropdown I mean you choose the black radiant that fades from black to nothing and turn it off.

Now we want this to be white so just hit “X” on your keyboard and you’ll see it changes to white that’s because you change the default color from black and white to white to black. Now with the gradient tool selected, from the bottom of the selection to the top just drag until you get this. Okay, and then turn off your marquee selection. Now if you want you can leave this by default but what I’d like to do to make it look more colorful is I like to change up the blending modes.

So to get it the way I want, I want to change the blending mode to overlay and it will going to bring your passage on to say for example 50% works really well. Now we’re going to add the shapes and this actually looks like there could be an application behind this icon. This is pretty standard guys. You can use any kind of logo or shape you want. You can import a picture. You can make something in little shader or 3D and just bring it in here and make it thin around the actual icon.

This is the shape I want to be using. I made it with the Default shapes that you can get in Photoshop and we’re just going to touch it up a bit so it blends a bit better with the color scheme you have going for this icon.

So what you got want to do is duplicate it by hitting command J, renaming it to whatever you want. I’m going to call this one Aero Blur, the original is called Aero. I’m going to bring the original one and make sure it’s on top. So Aero Blur is on the bottom, change the blending mode to Aero the default icon that’s not being blur to overlay.

Now the second one also put it on overlay but changes it’s blending mode to 50% and then go to filter blur, Gaussian blur and make it about 5 and then hit Okay, and then add a bit of player to this and depths. Hit command I to invert the color. Now, this is not finish, it still blends way too much so we’re going to do one final little thing to fix this. Start by making a new layer and renaming it gradient.

Next, hold command and click the default icon shape, not the one with the blur, so you’re going to select around your icon that you’ve made or used. On the gradient layer, get you’re tool out, go to your gradients, select the drop down menu so you will see this option and I’m going to use something in pastels. You can use any gradient to achieve this, but I want to use this method. So just choose this purple gradient. Now as I said, I’m doing this my own way. This is not so much how you would do it, just bear with me.

And now make sure you’re on linear gradient and make a selection from the bottom corner up to the top. So you will get this, hit M on your keyboard to get your marquee selection and just turn off the selection and now change the blending mode to this color gradient to overlay.

Now this will even out the colors and that’s pretty much all there is to it, guys. You can all a lot more to this if you want. You can change the way the icons blend. You don’t even need to do all the blending effects I did. I just did this to show you how to get yourself started for making and iPhone icon.

It’s not really advanced but it sometimes it might confuse people on how this is done. Guys, thanks for watching.