PS設計iPad Interface教程

　　Photoshop has some powerful tools to help you create gorgeous interfaces. In this tutorial, we will demonstrate how to create a clean iPad interface using Photoshop’s powerful toolbox. Let’s get started!

　　Step 1

　　Create a new file. Set Width to 768 and Height to 1024 and the resolution to 132 PPI.

　　Step 2

　　Make a new Group and name it Background. Inside that group create a new layer and fill it with #c2c2c2 and apply the Layer Styles. Make another layer, fill it with any color that you like than go to Filter > Noise > Add noise and set the Amount to 400%, Distribution to Uniform and check the Monochromatic box. Set the blending mode for the layer to Soft light and the Opacity to 14%.

　　Step 3

　　Create a new Group and name it Side Button. Using Rectangular Tool (U) make a rectangle shape just like the one in the example. Set the fill color to #636363 and apply the Layer Style. Now take the Rectangular Tool (U) and make another rectangle shape, this time a little smaller than the previous one and set the fill color to #cfcfcf afterwards apply the Layer Styles.

　　Step 4

　　Using Horizontal Type Tool (T) set the font to Myriad Pro (standard font) / Bold and the size to 14 and type the number 1 in the center of the shape. Apply the Layer Style and duplicate the Side Button Group like in the example and change the text number of each shape.

　　Step 5

　　Now make a new Group and name it Action Button. Using Rounded Rectangle Tool (U) set the radius to 5px and make a shape like the one in the example. Set the fill color to #3d3d3d and apply the Layer Style. Make a smaller shape using Rounded Rectangle Tool (U), set the fill color to #d7d7d7 and apply the Layer Styles.

　　Step 6

　　Using Pen Tool (P) we will make the symbol. Draw a triangle and set the fill color to #696969, apply the Layer Styles and duplicate the shape like shown in the example.

　　Step 7

　　Make ten more buttons following Step 5 and leave an open space for the pressed version of the buttons. Using Rounded Rectangle Tool (U) you will make another shape in the space left between buttons. Set the color to #2c2c2c and apply the Layer Style. Now make another shape using Rounded Rectangle Tool (U) this time a little smaller, like the one in the example and apply the Layer Styles.

　　Step 8

　　Using Rectangular Tool (U), Ellipse Tool (U) and Custom Shape Tool (U) draw the following shapes. Set the fill color to all shapes to #696969 except to the play symbol which we will color in #0b709a. To all the shapes colored with #696969 apply the first set of Layer Styles and to the play symbol apply the last set of Layer Styles.

　　Step 9

　　Create a new Group and name it Sliding Switch. Using Rectangular Tool (U) make a shape like the one in the example. Set the fill color to #d4d4d4. Now using Rectangular Marquee Tool (M) make two selections like the ones in the example. Select inverse the selection and Add a Layer Mask. Apply the Layer Style.

　　Step 10

　　Make a new Layer and transform it in a Clipping Mask. Using Rectangular Tool (U) make a shape like the on in the example and set the color to #2c2c2c and apply the Layer Style. Now to work on the details. Make a new Group and name it Details. Using Rectangular Tool (U) make a small square like the one in the example. Set the Fill to 0% and apply the Layer Style. Duplicate the layer as many times as neede to get a similar result like the one in the example. Set the Opacity of the Details Group to 50 % and we’re done here.

　　Step 11

　　After creating a new layer and transforming it into a Clippin Mask, use Rectangular Tool (U) and make a shape like the one in the example. Set the fill color to #484848 and apply the Layer Styles. Create a new layer and using Horizontal Type Tool (T) set the Font to Myriad Pro (standard font) /Bold and font size to 14 pt and write the numbers 02, 04 and 06 exactly like in the example and apply the Layer Styles. Make another layer and transform it into a Clippin Mask. Create another shape lik the first one, Filter > Noise > Add noise and set the Amount to 400, Distribution to Uniform and check the Monochromatic box. Set the Opacity level to 5% and move to the next step.

　　Step 12

　　Create a new Group and name it Display. Using Pen Tool (P) draw a shape like the one in the example, reduce the Fill to 0% and apply Layer Styles.

　　Step 13

　　Using Pen tool (P) make another shape and set the color fill to #49c1ff and apply the Layer Styles. Create a new layer, fill the layer with any color that you like, go to Filter/Noise/Add noise and set the Amount to 400%, Distribution to Uniform and check the Monochromatic box. Transform the layer in a Clipping Mask and set the blending mode for the layer to Soft light and the Opacity level to 14%.

　　Step 14

　　After downloading LCD Font use Horizontal Type Tool (T) and with different font sizes write down a text like in the example. Set the color to white #ffffff and apply to all 3 text layer the Layer Style. Now using Custom Shape Tool (U) load Web shapes from the librabry and use the indicated shapes shown in the example. Apply the Layer Style and we’re done.

　　Step 15

　　Now, using Rectangular Shape Tool (U) draw 60 white #ffffff rectangles like in the example. Change the color to some of them to #7f7f7f and apply the Layer Style. Put all those layers in one group and name it Indicators. Now using Pen Tool (P) set to paths make a selection just like the one in the example, select inverse and add a mask to the group.

　　Step 16

　　You will have to follow the exact steps from Step 12 to Step 15 to mirror the Display in the right side of the UI. You can play around, get creative about it, as it is one of the most important things while designing.