how to create an iphone app icon using photoshop cs6–tricky-photoshop

7
16.08.2013 01:06 AM How to create an iPhone app icon using Photoshop CS6–Tricky-Photoshop Page 1 of 7 http://www.tricky-photoshop.com/how-to-create-an-iphone-icon-using-photoshop-cs6tricky-photoshop/ Create an iPhone App Icon using Photoshop Hello guys I am Vaibhav and in this tutorial I am going to show you how to create cloud icon for your website. Last time I discussed about Creating RSS Icon using Pho- toshop which is highly recommended for graphic designers. For this tutorial what I m going to to do is to create a rounded rectangle then I’ll add some layer styles and to achieve the desired effect. It’s an easy tutorial and will not take more than 10-15 minutes. I am going to use Rectangular Tool, Custom Shapes, Layer Styles etc. My Final Work STEP 1 Lets start. Open your PS and press ctrl+N/cmd+N to create a new file. Change the file name as “iPhone Icon”. Change the width and height with 1000 by 1000 pixels which is more than enough for an iPhone icon. Set the resolution as 300 pixels per inch and leave the other field unchanged. I have written a whole tutorial on Creating a New Document in Photoshop and you should check out that tutorial if you are a beginner.

Upload: dnotice

Post on 25-Dec-2015

7 views

Category:

Documents


3 download

DESCRIPTION

How-to

TRANSCRIPT

Page 1: How to Create an iPhone App Icon Using Photoshop CS6–Tricky-Photoshop

16.08.2013 01:06 AMHow to create an iPhone app icon using Photoshop CS6–Tricky-Photoshop

Page 1 of 7http://www.tricky-photoshop.com/how-to-create-an-iphone-icon-using-photoshop-cs6tricky-photoshop/

Create an iPhone App Icon using Photoshop

Hello guys I am Vaibhav and in this tutorial I am going to show you how to createcloud icon for your website. Last time I discussed about Creating RSS Icon using Pho-toshop which is highly recommended for graphic designers. For this tutorial what Im going to to do is to create a rounded rectangle then I’ll add some layer styles andto achieve the desired effect. It’s an easy tutorial and will not take more than 10-15

minutes. I am going to use Rectangular Tool, Custom Shapes, Layer Styles etc.

My Final Work

STEP 1

Lets start. Open your PS and press ctrl+N/cmd+N to create a new file. Change the filename as “iPhone Icon”. Change the width and height with 1000 by 1000 pixels whichis more than enough for an iPhone icon. Set the resolution as 300 pixels per inch andleave the other field unchanged. I have written a whole tutorial on Creating a NewDocument in Photoshop and you should check out that tutorial if you are a beginner.

Page 2: How to Create an iPhone App Icon Using Photoshop CS6–Tricky-Photoshop

16.08.2013 01:06 AMHow to create an iPhone app icon using Photoshop CS6–Tricky-Photoshop

Page 2 of 7http://www.tricky-photoshop.com/how-to-create-an-iphone-icon-using-photoshop-cs6tricky-photoshop/

STEP 2

Now grab rounded rectangle tool from the tool panel. You can also press Shift+Uagain and again until it comes.

Now in the option bar, make sure the mode is shape.

Now drag and drop the mouse cursor from the top left end to the bottom right end tomake a rounded rectangle.

Once you have drawn the rectangle, press F7 for the layers palette. Right click on therounded rectangle layer 1 that is the layer which contains rectangle and then click onrasterize. When we make an vector diagram in Photoshop then we wouldn’t be ableto edit it until we rasterize it. That’s why I clicked on rasterize.

Once you have rasterized the angle then your half work is done. Now you just needto do some finalization.

Page 3: How to Create an iPhone App Icon Using Photoshop CS6–Tricky-Photoshop

16.08.2013 01:06 AMHow to create an iPhone app icon using Photoshop CS6–Tricky-Photoshop

Page 3 of 7http://www.tricky-photoshop.com/how-to-create-an-iphone-icon-using-photoshop-cs6tricky-photoshop/

STEP3

Afterthat Iam go-ing toadd

gradient to my rectangle. To do that first Ineed to change my background and fore-

ground color. To change that click on the foreground color on the left panel. In thecolor editor dialogue box change the color to #721111. Click OK.

Now press X to swap your backgroundcolor with the foreground color. Againclick on foreground color(previouslybackground) thumbnail. Change thecolor code to #b82727. Press OK.

STEP 3

Now press F7 for the layers palette.Press and hold ctrl/cmd and then click

on the layer thumbnail of the roundedrectangle 1. Notice that the cursor haschanged as show below once you aregoing to click on the layer thumbnailwith presses ctrl/cmd key then you This will select the rectangle out of thewhole document.

Now you can see that your rectangle isselected only. Now select gradient from the left panel. You can also press shift+Gagain and again until it comes.

Page 4: How to Create an iPhone App Icon Using Photoshop CS6–Tricky-Photoshop

16.08.2013 01:06 AMHow to create an iPhone app icon using Photoshop CS6–Tricky-Photoshop

Page 4 of 7http://www.tricky-photoshop.com/how-to-create-an-iphone-icon-using-photoshop-cs6tricky-photoshop/

In the top panel changethe mode to fore groundto background andchange the style to radialgradient.

Press and hold the shift button for the straight line. Now from the bottom to the mid-dle, drag and drop the mouse cursor to apply gradient.

STEP 6

Now its time to add some reflection to ouricon. From the left panel select the ellipti-cal marquee tool.

As our rec-tangulararea is stillselected sochange themode ofelliptical

marquee tool to intersect with selection.You can find this option in the top panel.

Now drag and drop the elliptical marquee tool asshown below. You can also change the direction of

marquee tool while in the middle of drawing by holding ‘’spacebar” and then ad-

Page 5: How to Create an iPhone App Icon Using Photoshop CS6–Tricky-Photoshop

16.08.2013 01:06 AMHow to create an iPhone app icon using Photoshop CS6–Tricky-Photoshop

Page 5 of 7http://www.tricky-photoshop.com/how-to-create-an-iphone-icon-using-photoshop-cs6tricky-photoshop/

just the mouse accordingly.

Once you have drew the selection thenyou may have noticed that only thatarea is selected which one lies in the in-tersection of both of the selections.

STEP 7

Now create a new layer by pressingctrl+shift+N/cmd+shift+N. You canalso go to layer>new>layer.

Now once again select the gradient aswe did in step 5. Press D to reset yourforeground and background color thenpress X to swap your foreground colorwith the background color. Now you

have white as your foreground color.

Change the mode of the gradient to fore-ground to transparent and this time I amgoing to work with linear gradient rather then radial gradient.

It’s timeto con-tract ourselection.Go to se-

lect>modify>contract and then set thepixels as 10. Press OK.

Now drag and drop the gradient from the middle of the icon to the top of the icon.

STEP 8

Page 6: How to Create an iPhone App Icon Using Photoshop CS6–Tricky-Photoshop

16.08.2013 01:06 AMHow to create an iPhone app icon using Photoshop CS6–Tricky-Photoshop

Page 6 of 7http://www.tricky-photoshop.com/how-to-create-an-iphone-icon-using-photoshop-cs6tricky-photoshop/

Press ctrl+D/cmd+D to deselect the se-lection. Reduce the opacity of the layerthat we created in step 7 to give the re-flection more realistic effect.

Now press F7 for the layer palette.Click on the add adjustment layerwhich is at the bottom of the layer pal-ette.

Now clickon beveland em-boss.Changethe styleto embossand tech-nique tosmooth.

Increase the depth to 297%, size to 46pxand the soften to 16px. Press OK.

FINAL

Page 7: How to Create an iPhone App Icon Using Photoshop CS6–Tricky-Photoshop

16.08.2013 01:06 AMHow to create an iPhone app icon using Photoshop CS6–Tricky-Photoshop

Page 7 of 7http://www.tricky-photoshop.com/how-to-create-an-iphone-icon-using-photoshop-cs6tricky-photoshop/

And you are done here. Read my next tutorial where I’ll be Creating Instagram Nash-ville, 1977 and Vintage Look in Photoshop. Thank you for reading this article. Hope-fully we’ll meet again in four days.