查看完整版本: 手机产品设计Create a Mobile Phone[高级教程][极详细][翻译]

手机产品设计Create a Mobile Phone[高级教程][极详细][翻译]

[url=http://psdtuts.com/][Via][/url]     [color=darkred][b]  由会员[url=http://www.iconfans.com/Royal]Royal[/url]翻译（30%）、[url=http://www.iconfans.com/space-uid-4862.html]rotApple[/url]翻译（70%）！在此感谢！[/b][/color][size=2][color=black]（目前已翻译完成！）[/color][/size]


转载一篇关于手机产品设计的教程。其实我觉得这个跟做一个复杂图标是一样的。里面很多效果的设计方法完全可以应用到图标设计中去。
另外论坛还有很多优秀的英文文章等待翻译，如果有英文好的朋友愿意给大家翻译，请发论坛消息给我。:)

[attach]2782[/attach]
[b][size=4]Create a Mobile Phone Styled Like the HTC Touch DiamondIn[/size][/b]
[b][size=4][color=darkgreen][font=宋体]利用[/font]Photoshop[font=宋体]制作一个[/font]HTC Diamond[font=宋体]手机[/font][/color][/size][/b]

[color=darkred][/color][url=http://psdtuts.com/category/drawing/][color=darkred]Drawing[/color][/url][color=darkred] by [/color][url=http://psdtuts.com/author/constantin/][color=darkred]Constantin Potorac[/color][/url][color=darkred]
[/color]
I must admit that there is no other love for me rather than the iPhone but when I first saw the HTC Touch Diamond mobile I was amazed because it looks so good. It looks so good that I decided to write a tutorial to show you how I made it. This will be a long tutorial so go get some coffee for this.

[color=darkgreen][font=宋体][size=3]我必须承认，除了IPHONE，我别无所求，但是，当我第一次看到HTCDiamond的时候，我感到惊讶，因为它看是多么的好。所以，我决定写一个教程，教程的内容是制作一个HTCDiamond。不过制作的过程非常漫长，推荐您泡杯咖啡。[/size][/font]
[/color]
[b][size=4][color=darkred]Final Image Preview   [/color][/size][/b][font=宋体][size=4][color=darkred][b]最终效果图[/b][/color][/size][/font]
Before we get started, let's take a look at the image we'll be creating. Click the screenshot below to view the full-size image. As always, the layered Photoshop file is available via our PSDTUTS Plus membership.

[font=宋体][color=darkgreen]在开始制作之前，我们来看一看在效果，我们将创造图片中的效果。点击下面的截图，以查看完整大小的图片。分层一直是我们的惯例。[/color][/font]


[attach]2783[/attach]

【马上开始~~分几部分发出~】

[size=4]Step 1[/size]
Let's start by making a new white document at 1000px by 1000px.

[color=darkgreen][font=宋体]新建一个空白图像，背景白色，大小为[/font]1000*1000[/color]

[attach]2785[/attach]



[size=4]Step 2[/size]
Now we'll make the base of the phone. Using the Rounded Rectangle Tool (U) set to 20 pixels, make a shape as shown below.

[color=darkgreen][font=宋体]现在，我们将做出该手机的主体。使用圆角矩形工具（快捷键U），直径设置为20像素，画出一个形状，如下图所示。[/font]
[/color][attach]2786[/attach]



[size=4]Step 3[/size]
Next using the same tool you need to hold down the Alt button before you start making a shape. This will extract from the first shape you made. Also, use the rulers and grid to help set the shape of the phone. When you're done name the shape "Phone shape 1."

[color=darkgreen][font=宋体]您需要按住[/font] Alt [font=宋体]的按钮，注意用上一步所用到的工具绘制。[/font] [font=宋体]这将从第一个形状所提取的。[/font] [font=宋体]此外，使用标尺和网格来帮助定位电话的形状。[/font] [font=宋体]当您完成时，请将形状重命名为[/font]"[font=宋体]电话形状[/font] 1"[font=宋体]。[/font][/color]
[attach]2787[/attach]



[size=4]Step 4
[/size]Next you need to duplicate this layer, fill the copy with #5b5b5b, and name it "Phone shape 2."

[color=darkgreen][font=宋体]接下来需要复制此层，填充[/font]#5b5b5b [font=宋体]，并将其命名为电话形状[/font]2[/color]
[attach]2788[/attach]



[size=4]Step 5
[/size]Enter the Blending Options by double-clicking in the "Phone shape 2" layer and enter the settings shown below. You can experiment, but I personally like those settings.

[color=darkgreen][font=宋体]双击[/font]"[font=宋体]电话形状[/font] 2"[font=宋体]并设置样式（我根据个人的喜好设置，您可以进行适当的更改）[/font][/color]
[attach]2789[/attach]

[size=4]Step 6
[/size]Make a new layer and name it "light." Then Ctrl + Click on the "Phone shape 2" layer thumbnail to make a selection. Then using the Rectangular Marquee Tool (M), take out some of the selection.

[align=left][color=darkgreen][font=宋体]使新图层，并将其命名高亮。[/font] [font=宋体]然后[/font] Ctrl+ [font=宋体]单击[/font]"[font=宋体]电话形状[/font] 2"[font=宋体]层的缩略图，进行选择（创建选区）。[/font] [font=宋体]然后使用使用[/font]Marquee [font=宋体]工具[/font] (M)[font=宋体]，进行一些选择。[/font][/color][/align]
[attach]2790[/attach]




[size=4]Step 7[/size]
Create a linear gradient using the Gradient Tool (G) set to white and transparent. Then drag and drop from up to down to achieve something similar to below.

[color=darkgreen][font=宋体]创建一个图层，使用渐变工具[/font] (G) [font=宋体]设置为白色和透明的线性渐变。[/font][font=宋体]然后从填充，就像下面一样。[/font][font=宋体][size=12pt][/size][/font]
[/color][attach]2791[/attach]




[size=4]Step 8[/size]
Using the Eraser Tool (E) set to 0% Hardness, start erasing some of that light, as shown below.

[align=left][color=darkgreen][font=宋体]使用橡皮擦工具硬度设置为[/font]0[font=宋体]％[/font] [font=宋体]，开始擦除，如下图所示。[/font][/color][/align]
[attach]2792[/attach]


[b][size=4]Step 9[/size][/b]
Make paths at the bottom of the phone using the Pen Tool (P).

[font=宋体][color=darkgreen]用钢笔在底部绘制一个路径 。[/color][/font]

[attach]2793[/attach]

[b][size=4]Step 10[/size][/b]
Next you need to make a new layer and name it "light 2." Set your Brush to 1 pixel and also make sure the foreground is white. Grab the Pen Tool, right-click on the screen, and chose Stroke Path. Make sure you select the Brush from the list and also the Pen Pressure must not be checked. Than click OK. Lastly, you will need to delete the path so you can see the stroke.

[align=left][color=darkgreen][font=宋体]接下来您需要进行新的层并命名[/font]"[font=宋体]高光[/font]2"[font=宋体]。[/font][font=宋体]您的画笔设置为[/font] 1 [font=宋体]个像素，并还确保前台是白色。[/font][font=宋体]将画笔工具，右键单击屏幕和选择[/font] Stroke [font=宋体]路径。[/font][font=宋体]确保从列表中选择，笔刷也不必须检查画笔压力。[/font][font=宋体]单击确定。[/font] [font=宋体]最后，您将需要删除路径，[/font][font=宋体]就象下图。[/font][/color][/align]
[attach]2794[/attach]


[b][size=4]Step 11[/size][/b]
Erase the ends of the stroke. Then go to Filter > Blur > Gaussian Blur, and select a radius of 0.7 pixels.

[align=left][color=darkgreen][font=宋体]删除端点。[/font] [font=宋体]然后转到滤镜[/font] >[font=宋体]模糊[/font]> [font=宋体]高斯模糊[/font] [font=宋体]并选择[/font] 0.7 [font=宋体]像素的半径范围。[/font][/color][/align]
[attach]2795[/attach]

[size=4][b]Step 12[/b][/size]
The next steps you'll need to do are to repeat the same lightning effect for all the sides. We also changed our background color to black. Follow the images below.

[align=left][font=宋体][color=darkgreen]接下来的步骤，您需要做的是重复同样的闪电效果，改变了背景颜色为黑色。按照下面的图片。[/color][/font][/align]
[attach]2796[/attach]
[attach]2797[/attach]

[b][size=4]Step 13[/size][/b]
We're done with this part of the phone. You should move it into a new folder and name it >Exterior side.> Now it's time to make the interior. First, I'll make a new folder and name it >Interior side.> In this folder make a new folder and name it >bottom side.> This is where the buttons will go. Then using the Rounded Rectangle Tool (U), make a shape as I did.

[color=darkgreen][font=宋体][size=3]我们正在做这部分的手机。移动到一个新文件夹，并将它命名为>外侧。 > ，现在的时间，制作内部。首先，我将作出一个新的文件夹，并将它命名为>内部。 >在此文件夹中作出新的文件夹，并将它命名为>底部。 > ，[/size]这是按钮。然后使用，圆角矩形工具[/font] (U)[font=宋体]，[/font][font=宋体]就象下图[/font][/color]
[attach]2798[/attach]



[b][size=4]Step 14[/size][/b]
Subtract the upper part of the shape, using the Rectangle Tool (U).

[color=darkgreen]使用矩形工具减去形状的上部.
[/color]

[attach]2799[/attach]
[size=4][b]Step 15[/b]
[/size]Double-click on the layer to enter the Blending Options, and use the settings below.
[color=darkgreen]双击图层进入混合设置, 并使用以面的设置.
[/color]

[attach]2800[/attach]


[b][size=4]Step 16[/size][/b]
Next you need to make some more lights on this shape. You'll do this just as you did in Step 9, but this time you'll use the Line Tool (U).
[color=darkgreen]下面你要在这个形状上增加更多光线, 你可以和你在第9步已做的那样来做, 不过这次你需要使用直线工具.
[/color]

[attach]2801[/attach]

[b][size=4]Step 17[/size][/b]
This part of the phone is finished. Now we need to make the buttons. First make a new folder and name it "Button." In this folder, you need to make a black rounded shape using the Ellipse Tool (U). As you can see, I have used the Grid because I want the buttons to be centered.

[color=darkgreen]到这一步手机已完成, 现在我们需要创建那些按钮, 先创建一个新图层夹(其实是图层, 这老兄喜欢把图层叫folder, 我晕. 我后来才发现的, 如下雷同!!)并命名为"Button". 你需要用椭圆工具创建一个黑色圆形(快捷键U), 如你所见的, 我使用了网格线因为我想让那些按钮被居中.

[/color]
[attach]2802[/attach]



[b][size=4]Step 18[/size][/b]
Use the settings shown below for the Blending Options of this layer.

[color=darkgreen]给这个图层增加如下的混合设置.
[/color]
[attach]2803[/attach]



[b][size=4]Step 19[/size][/b]
Make a new circle, but this time make it a little smaller. When you start making the circle start from the middle of the other circle, hold down the Alt + Shift buttons and drag. This will help you make the circle perfect and in the right position.

[color=darkgreen] 创建一个新圆, 不过这次要让它小一点, 当你要在另一个圆的正中创建一个圆时, 按下ALT+SHIFT按键并拖动, 这将帮你创建圆到正确的位置.
[/color]
[attach]2804[/attach]

[b][size=4]Step 20
[/size][/b]Again, change the Blending Option Settings to match those shown below.

[color=darkgreen]再次打开混合设置并设置如下.
[/color]
[attach]2805[/attach]



[size=4]Step 21
[/size]Make a new layer above the circles. Call it "Shine 1." Using the Gradient Tool (G) set to Radial Gradient and to white, click and drag as I did.

[color=darkgreen]在圆的上面创建一个新图层, 命名为"Shine 1", 使用渐变工具(快捷键G)并设置为放射渐变白变(白变渐变到透明, 他这没写), 点击并拖动出一个白色渐变 (他写的是点击并拖动就像我做的那样).
[/color]
[attach]2806[/attach]

[b][size=4]Step 22[/size][/b]
Now you'll need to mask the light to show only into the button. Next set the layer to Linear Light with 34% Opacity.
[color=darkgreen]现在你需要遮住那个光让它只显示在按钮里, 下一步设置图层为34%透明度的线性光.
[/color]
[attach]2835[/attach]

[b][size=4]Step 23[/size][/b]
Make a new layer and name it "Shine 2." Make a selection as I did using the Elliptical Marquee Tool (M). Fill the layer with white, mask it so that it will be visible only on the button, and set it to Soft Light with 70% Opacity.
[color=darkgreen]创建一个新图层并命名为"Shine 2". 使用椭圆选区工具(M)如我那样创建一个选区, 并用白色填充, 遮住它以便只让它显示在按钮上, 并设置为70%透明度的柔光.
[/color]
[attach]2836[/attach]


[b][size=4]Step 24[/size][/b]
Using the Pen Tool (P), make a path. Set the Brush to 2 pixels with a Hardness of 100%. Grab the Pen Tool (P) and make a Stroke. Again, make sure you make the Stroke to white.
[color=darkgreen]使用钢笔工具(P)创建一个路径, 设置笔刷为100%硬度,2像素, 然后描边(他写的是抓住钢笔工具并制作一个描边). 确定你创建的描边是白色的.
[/color]
[attach]2837[/attach]

[b][size=4]Step 25[/size][/b]
Using the Eraser Tool (E), erase the lower part of the line a little to make it fade.
[color=darkgreen]使用像皮擦工具(E), 擦除线的下部一点点以让它溶入.
[/color]
[attach]2838[/attach]


[b][size=4]Step 26
[/size][/b]Set the stroke to 70% Opacity. Make a new layer and draw a white spot. Go to Filter > Blur > Gaussian Blur and chose an 18.5% setting. Next set the layer to Soft Light.
[color=darkgreen]设置线的透明度为70%. 创建一个新图层并画一个白块, 使用滤镜 > 模糊 > 高斯模糊并选择18.5%. 然后下一步设置图层为柔光.[/color]
[attach]2839[/attach]

[b][size=4]Step 27[/size][/b]
You're done with the round button. Now we need to make the touch buttons. First, make a new folder above the button folder and name it "signs." Make a round shape and add the settings shown below. Also, set it to 20% Opacity.
[color=darkgreen]你已完成了圆形按钮, 现在我们要创建触摸按钮, 第一步, 在按钮夹的上面创建一个新图层夹, 命名为"Signs". 创建圆形形状并添加如下的设置, 另外, 设置它为20%透明.
[/color]
[attach]2840[/attach]


[b][size=4]Step 28[/size][/b]
Next you need to add these shapes. I have made them using the Line Tool (U) and the arrows I took from the Custom Shape Tool.
[color=darkgreen]下面你需要增加这些形状, 我已经使用线工具(U)创建了它们, 那些箭头我是从自定义形状工具里拿来用的.
[/color]
[attach]2841[/attach]



[b][size=4]Step 29[/size][/b]
The next shapes we'll make again using the Pen Tool (P) and the Line Tool (U). Also, use these setting for all of them.
[color=darkgreen]下一步的形状我们将再次使用钢笔工具(P)和线工具(U)创建, 另外, 使用下面的设置应用到全部这些形状上.
[/color]
[attach]2842[/attach]



[b][size=4]Step 30[/size][/b]
We are finished with the lower side of the phone. Next we need to make the upper part. Here you need to make a new shape using the Rounded Rectangle Tool (U) set to 10%. Also, you need to fill it with #626262. Then subtract a side of the upper part. Review the image below to know how much you need to subtract.
[color=darkgreen]我们已完成了手机的下部. 下面我们需要创建上部. 现在你需要使用圆角矩形来创建一个新形状并设置为10%(????我觉得应该是角的圆度为10). 另, 你需要用#626262填充它. 然后减去下部(他写的上部的一面). 预览下下面的图片然后你就知道要减去多少了.
[/color]
[attach]2843[/attach]

[b][size=4]Step 31[/size][/b]
Set the Blending Options for this layer, as shown below.
[color=darkgreen] 给这层设置混合设置, 如下所示.[/color]
[attach]2844[/attach]



[b][size=4]Step 32[/size][/b]
Make a new layer and name it shine. You need to first make a selection as below. Than you need to subtract a part of the selection where the two sides meet. Now you need to use the Gradient Tool (G) to fill the layer with white.
[color=darkgreen]新建一个图层并命名为"Shine", 你需要先创建一个如下的选区, 然后减去上下两个面相交的地方, 现在你需要使用渐变工具(G)以白色到透明填充该层.
[/color]
[attach]2845[/attach]

[b][size=4]Step 33[/size][/b]
Next you make a random path with the Pen Tool (P). Now that you have the path you need to mask the light over the phone and set the layer to 50% Opacity.

[color=darkgreen] 下面你需要用钢笔工具(P)创建一个随意的路径, 现在你需要遮住超过电话区域的部分, 并设置图层的透明度为50%.

[/color]

[attach]2846[/attach]


[b][size=4]Step 34[/size][/b]
Next we recreate the logo using the Pen Tool (P), or design your own logo.

[color=darkgreen]现在我们用钢笔工具(P)重新创建LOGO, 或者设计你自己的LOGO.
[/color]
[attach]2847[/attach]



[b][size=4]Step 35[/size][/b]
Now make a new folder and name it "screen." In this folder, make a new shape using the Rectangle Tool (U). Also, use the settings below for the Blending Options.

[color=darkgreen]现在创建一个图层夹命名为"Screen", 在这个夹里用矩形工具(U)创建一个新形状(我想应该在夹里先新建一层吧, 汗,他没写). 使用如下的混合设置来设置该图层.
[/color]
[attach]2848[/attach]



[b][size=4]Step 36[/size][/b]
Make another folder over this one and name it "camera." Make a new round circle and fill it with #111111. Next apply the settings below.

[color=darkgreen]创建另一个图层夹(我想作者老兄喜欢把图层叫做文件夹.. 我晕.)并命名为"Camera", 创建一个新的圆形并以#111111填充, 并应用如下的设置.
[/color]
[attach]2849[/attach]


[b][size=4]Step 37[/size][/b]
Duplicate the layer, fill it with #222222, and use the settings below for the Blending Options. Also, set the Fill to 0%.

[color=darkgreen]复制该层, 填充为#222222, 并使用如下的混合设置, 并将填充(透明度下面那个)设置为0%.
[/color]
[attach]2850[/attach]

[size=4][b]Step 38[/b]
[/size]Make a new circle and fill it to #222222. Also, for the Blending Options apply the settings shown below.

[color=darkgreen]创建一个新圆并填充为#222222, 应用如下的设置.[/color]

[attach]2851[/attach]



[b][size=4]Step 39[/size][/b]
Again, make another circle and fill it with #3b3b39. Now you need to subtract some of that circle. Use the Elliptical Tool (U) for this. Also, use the settings below for the Blending Options.

[color=darkgreen]再次创建另一个新圆形, 并填充为#3b3b39, 现在你需要使用椭圆工具将圆减去一些, 另外, 应用如下的混合设置.

[/color]

[attach]2852[/attach]



[b][size=4]Step 40[/size][/b]
Next you need to make another circle. This time fill it with black.

[color=darkgreen]下一步你需要创建另一个圆, 这次填充它为黑色.
[/color]

[attach]2853[/attach]

[b][size=4]Step 41[/size][/b]
Make a new layer over the black circle from Step 40. Using the Brush Tool we
will make two little spots to make this camera look real. You need to use two
different colors for this: #47307a and #1a3327.

[color=darkgreen] 在第40步的黑圆上创建一个新图层, 我们将使用笔刷工具创建两个小圆点以让它看起来像真的摄像头一样, 你需要使用两个不同的颜色: #47307a, #1a3327.
.
[/color]

[attach]2889[/attach]

[b][size=4]Step 42[/size][/b]
Repeat Step 39, but this time make a smaller circle. Also, use the color
#3b3b39. Set the layer to 40% Opacity and use the settings below for the
Blending Options.

[color=darkgreen] 重复第39步, 不过这次创建一个小一些的圆, 另外颜色也要用#3b3b39, 设置图层透明度为40%, 并使用如下的图层样式.
[/color]

[attach]2890[/attach]

Step 43
Next make another white layer that you'll Blur and change the Opacity to 5%.

[color=darkgreen] 这步创建另一个白色图层, 并模糊它, 再将它的透明度设置为5%.
[/color]

[attach]2891[/attach]

[b][size=4]Step 44[/size][/b]
Make another folder and name it "speaker." In here create a new shape using
the Rounded Rectangle Tool (U). Make sure it's set to 10 pixels.

[color=darkgreen] 创建另一个图层夹(又来了)并命名为"Speaker". 在这里使用圆角矩形工具(U)创建一个新形状. 圆角大小为10px.

[/color]

[attach]2892[/attach]



[b][size=4]Step 45[/size][/b]
Insert the Blending Options shown below into the layer.

[color=darkgreen] 插入如下的图层样式给该图层.
[/color]

[attach]2893[/attach]




[b][size=4]Step 46[/size][/b]
Create a new layer and name it "pattern." To make the speaker pattern I have used the same technique Fabio used in one of his tutorials [url=http://psdtuts.com/interface-tutorials/creating-a-cool-brushed-metal-surface-in-photoshop/][color=#ae0000]Creating a Cool Brushed Metal Surface in Photoshop[/color][/url] (it's from Step 3 of that tutorial). The only difference between this pattern and the one from that tutoiral is that this one is black and also the dots are closer together. Do not use the Blending Options from that tutorial though, as you'll not need it.

Once the pattern is created, mask it so that it will be visible only on the speaker.

[color=darkgreen] 创建一个新图层并命名为"Pattern", 我使用了一个Fabio在他的一个教程《在PHOTOSHOP中创建一个磨砂金属表面》中使用过的同样的一个技术来创建喇叭的图案(在那个教程的第三步), 唯一这个图案和他的教程中的不同的是这个是黑的并且点与点之间更近. 不要通过那个教程使用图层样式, 因为你不需要.
[/color]

[attach]2894[/attach]


[b][size=4]Step 47[/size][/b]
Next make a shape similar to those shown below. Use the settings shown for the Blending Options as well.

[color=darkgreen]创建如下所示类似的形状, 也一样的, 使用如下的图层样式.[/color]

[attach]2895[/attach]

[b][size=4]Step 48[/size][/b]
Make a new layer similar to the other one, but this one will be a little smaller. Fill it with this color #d7d7d7. Also, use the settings below for the Blending Options.

[color=darkgreen]创建一个类似的另一个新图层, 不过这个将会小一点, 填充它为#d7d7d7. 另使用如下的图层样式.
[/color]

[attach]2896[/attach]

[b][size=4]Step 49
[/size][/b]The mobile is almost finished. What we'll do now is make a nice texture. Make a new layer and name it "Noise." Within this layer, make a new layer and fill it with white. Go to Filter > Noise > Add Noise and use the settings shown below. Also, set the image to Multiply with a 20% Opacity.
In the end, you'll need to make a selection of only the exterior part of the phone and mask the noise. This is so it will be visible only on this part.

[color=#006400]电话已差不多被完成了. 现在我们要做的是创造一个漂亮的材质, 创建一个新图层, 命名为"Noise". 在这层里面(这里我觉得应该是图层夹), 创建一个新图层, 并填充为白色, 应用滤镜 > 杂色 > 添加杂色并使用如下的图层样式, 另设置图层混合模式为叠加(Multiply我不知道是不是叠加-_-#), 并设置透明度为20%.

最后, 你需要创建一个只有电话外部的选区并遮住杂点(就是做好选区然后加个蒙板), 那么它将只显示该部分.
[/color]

[attach]2897[/attach]


[b][size=4]Step 50[/size][/b]
Repeat Step 49, but this time you'll make it for a different part of the phone. Follow the images below to understand how to make the selection.

[color=#006400]重复第49步, 不过这次你要创建电话的另一部分, 跟着如下的图片做, 以明白该创建什么选区.
[/color]
[attach]2898[/attach]


[b][size=4]Step 51[/size][/b]
The last step is all about adding some more lights on the phone. Follow the images below and you'll understand. For the next shapes change the Opacity to 10% and lower.

[color=#006400]这最后一步所有的都是关于在电话上增加一些光, 如下图片你会明白怎么做, 把下一个形状的透明度改为10%或更低.(这句我不知道他想说什么...).
[/color]
[attach]2899[/attach]


[b][size=4]Finishing the Phone[/size][/b]
Add some personal branding to the phone. I added my logo and a small PSDTUTS banner.

[color=#006400]在电话上增加一些个人标志, 我增加了我的LOGO和一个小的PSDTUTS横标.
[/color]
[attach]2900[/attach]




[b][size=4]Step 52[/size][/b]
Now that we have finished the mobile phone we need to make a nice and attractive background. This part will be all about making a great advertisement for the product.
First you'll need to move your phone to a bigger document (My size is 2215x1510) and fill the document with black.

[color=#006400]现在我们完成了电话, 我们需要创建一个吸引人的漂亮背景, 这步分全部是关于创建一个棒的产品广告. [/color]
[color=#006400]首先我们需要移动你的电话到一个大的画布(我的尺寸是2215x1510), 并填充文档背景为黑色.
[/color]
[attach]2901[/attach]


[b][size=4]Step 53[/size][/b]
Next we duplicate this phone twelve times and arrange them one behind each other. Also, keep in mind that as the objects are further away they get smaller. This is the rule of perspective that you need to keep in mind. Also, as you can see I have changed the image inside each phone. I found the images over at [url=http://www.sxc.hu/][color=#ae0000]SXC[/color][/url].

[color=#006400]复制这个电话12次, 并排列它们一个一个相互在后面, 另, 请紧记物体越深层它们便越小, 这是你必须紧记的透视规则, 如你所见的我改变了下面图片中的每个电话, 我在SXC上找到了这些图片(他说的应该是屏幕上的装饰图片).[/color]
[attach]2902[/attach]

[b][size=4]Step 54[/size][/b]
For all the phones you just created, you need to add a shadow. Use the settings below for the Blending Options.

[color=#006400]给你刚创建的所有电话增加投影, 使用如下的图层样式.
[/color]
[attach]2903[/attach]



[b][size=4]Step 55[/size][/b]
Now you need to add a shadow for the first phone too. Let's use a different technique. Make a black shape that is similar to the phone.

[color=#006400]现在你需要给第一个电话增加投影, 让我们使用一个不同的技术! 创建一个和电话形状类似的黑色形状.
[/color]
[attach]2904[/attach]

[b][size=4]Step 56[/size][/b]
Move the shape in the back of the phone. You do this by moving the layer you just created beneath the "phone" layer. Into the Blending Options you need to use the settings shown below.

[color=#006400]移动这个你刚创建的图层到电话图层之后, 并使用如下图层样式.

[/color]
[attach]2905[/attach]


[b][size=4]Step 57[/size][/b]
Next we'll make the reflection for each phone. You do this by first duplicating all the phones and moving them upside down.

[color=#006400]这步我们将给每个电话创建倒影: 复制所有电话移动并垂直翻转.
[/color]
[attach]2906[/attach]



[b][size=4]Step 58[/size][/b]
Now don't simply set them all to a low Opacity. In this case you need to change some settings in the Blending Options. The thing is that each reflection will have different settings.
Set the Color Overlay to black on all of them. Next you need to lower the Opacity for each one. You will start with the two smallest phones (80%). Then continue with the rest of them 70%, 60%, and make the rest 50%.

[color=#006400]现在不仅仅只是为它们设置一个低的透明度, 在这情况下你需要在图层样式里改变一些设置, 也就是每个倒影都有不同的设置.
为所有电话设置"颜色叠加"为黑色, 下一步你需要给每个电话降低透明度, 你会从最小的两个电话(80%)开始, 然后继续为剩下的设置为70%, 60%, 和设置剩下的其它为50%.
[/color]
[attach]2907[/attach]




[b][size=4]Step 59[/size][/b]
Make a new layer on top of all the other layers. Make a selection as I did by Ctrl + Clicking on each phone's thumbnail.

[color=#006400]在其它所有图层上面创建一个新图层, 和我用CTRL+在每个电话的略缩图上点击一样创建一个选区(我想你掉了SHIFT吧...把SHIFT也按住!!).

[/color]
[attach]2908[/attach]


[b][size=4]Step 60[/size][/b]
Now using the Gradient Tool set it to black and transparent. Then make a nice gradient. Also, set the gradient to Soft Light.

[color=#006400]现在使用渐变工具设置它从黑色到透明, 然后创建一个漂亮的渐变(是从下到上拉渐变), 另, 设置这个渐变为柔光.
[/color]
[attach]2909[/attach]




[b][size=4]Step 61[/size][/b]
Next you need to make a new layer and place it between the phones and the reflections. Go to Filter > Render > Clouds.

[color=#006400]这步你需要创建一个新的图层并把它放到电话层和倒影层之间, 应用滤镜 > 渲染 > 云彩.
[/color]
[attach]2910[/attach]



[b][size=4]Step 62[/size][/b]
Next go to Filter > Blur > Motion Blur and use the settings shown below. Then set the layer to Soft Light. You'll be able to see a nice effect over the reflections. This makes the surface look shiny.

[color=#006400]应用滤镜 > 模糊 > 动感模糊并应用如下设置, 然后设置图层为柔光, 你将会看到一个漂亮的效果在倒影层上. 这让表面显得有光泽.
[/color]
[attach]2911[/attach]

[b][size=4]Step 63[/size][/b]
Make a new layer over the one we just worked on. While using the Gradient Tool, again set it to black. In this step, we'll simply hide some of the reflections with the gradient.

[color=#006400]在我们刚刚制作的图层上创建一个新图层, 使用渐变工具, 再次设置它为黑色, 在这步, 我们仅仅用渐变隐藏倒影的一部分(这步也就是把倒影拉个渐变搞个消失).
[/color]
[attach]2912[/attach]



[b][size=4]Step 64[/size][/b]
Make a new layer and move it to the back, but over the black background, and name it "Clouds." Again, you need to some clouds. Go to Filter > Render > Clouds to apply them.

[color=#006400]创建一个新图层并移动它到后面, 但在黑背景的上面, 并命名为"Clouds". 你需要再加点云,  应用滤镜 > 渲染 > 云彩.
[/color]
[attach]2913[/attach]


[b][size=4]Step 65[/size][/b]
Add a Layer Mask to this layer by simply clicking the Layer Mask button in the Layers Palette. Fill the mask with black. Then using the Gradient Tool, set it as white to transparent and Radial. Remember, you need to let some of the clouds show through.

[color=#006400]通过点击图层面板的蒙板增加一个蒙板并遮照该层, 填充蒙板为黑色, 然后使用渐变工具, 设置渐变为径向渐变白色到透明, 请记得, 你需要让一些云穿过来可见.
[/color]
[attach]2914[/attach]




[b][size=4]Step 66[/size][/b]
The last step is to make a new layer over these clouds and fill it with white. Go to Filter > Noise > Add noise.

[color=#006400]最后一步是在这些云上创建一个新图层并填充为白色, 应用滤镜 > 杂色 > 添加杂色.
[/color]
[attach]2915[/attach]

[b][size=4]Step 67[/size][/b]
Here is an important step that most of you might not know. Place your mouse between the "clouds" and this "noise" layer. If you press the Alt button while the mouse is between two layers, you'll see the mouse changing. While holding the Alt button, simply Click once with the mouse. This technique is similar with the masking, but it will mask the noise to show only over the layer you just linked it to.

[color=#006400]最后一步是在这些云上创建一个新图层并填充为白色, 应用滤镜 > 杂色 > 添加杂色.
[/color]
[attach]2916[/attach]



[b][size=4]Step 68[/size][/b]
Set the Noise layer Opacity to 51% and Multiply.

[color=#006400]设置"Noise"层透明度为51%, 混合模式为叠加(Multiply应该是叠加).
[/color]
[attach]2917[/attach]


[b][size=4]Step 69[/size][/b]
Set the Clouds layer to 30% Opacity.

[color=#006400]设置"Clouds"层透明度为30%.
[/color]
[attach]2918[/attach]

[b][size=5]Final[/size][/b]
When you are finished with the design just save a JPG and play with the Levels, Colors, and maybe add more effects to it depending to your taste. I hope you learned something from this tutorial.

[color=#006400]当你完成设计, 可保存为JPG并调整Levels(不知道怎么翻这个Levels), 颜色, 或增加更多的效果, 这取决于你的口味. 希望你能从本教程中学到一些东西.

[/color]

:) :)
手机产品设计的教程!!!!
看了一定会有很多启发。

英文的？？
哇，启发会更多些。:lol :lol

不错了  受益匪浅:lol :lol :lol :lol

喜欢，先顶一下，然后慢满看....................

太强大了，喜欢这样的教程
.................................................

厉害厉害，受教了，这样的教程才能算是教程

嘿嘿，不错，暑假的时候画过NOKIA的一手机，方法和这个差不多。HOHO。

非常棒的教程，可是我Step 20做不出一样的效果，找不到问题在哪:cry:

累人啊。。。翻译了一半，先传上来

[font=宋体]利用[/font]Photoshop[font=宋体]制作一个[/font]HTC Diamond[font=宋体]手机[/font]
[font=宋体]绘制：[/font]Constantin Potorac
[font=宋体]编译：[/font]Royal
[font=宋体]原文地址：[/font][url=http://www.iconfans.com/viewthread.php?tid=1643]http://www.iconfans.com/viewthread.php?tid=1643[/url]
[align=left][font=宋体][size=12pt][/size][/font] [/align][align=left][font=宋体][size=12pt]我必须承认，除了IPHONE，我别无所求，但是，当我第一次看到HTCDiamond的时候，我感到惊讶，因为它看是多么的好。所以，我决定写一个教程，教程的内容是制作一个HTCDiamond。不过制作的过程非常漫长，推荐您泡杯咖啡。[/size][/font][/align]
[align=left][font=宋体][color=darkred][b]最终效果图：[/b][/color][/font]
[font=宋体]在开始制作之前，我们来看一看在效果，我们将创造图片中的效果。点击下面的截图，以查看完整大小的图片。分层一直是我们的惯例。[/font][font=宋体][size=12pt][/size][/font][/align]


[font=宋体][font=Helvetica][b][size=4]Step 1  [font=宋体][color=darkgreen][size=2]第1步[/size]：[/color][/font][/size][/b][/font][/font]
[font=宋体]新建一个空白图像，背景白色，大小为[/font]1000*1000


[font=宋体][font=Helvetica][b][size=4]Step 2  [font=宋体][color=darkgreen][size=2]第2步[/size]：[/color][/font][/size][/b][/font][/font]
[align=left][font=宋体][size=12pt]现在，我们将做出该手机的主体。使用圆角矩形工具（快捷键U），直径设置为20像素，画出一个形状，如下图所示。[/size][/font][/align]
[align=left]
[font=宋体][font=Helvetica][b][size=4]Step 3  [font=宋体][color=darkgreen][size=2]第3步[/size]：[/color][/font][/size][/b][/font][/font]
[font=宋体]您需要按住[/font] Alt [font=宋体]的按钮，注意用上一步所用到的工具绘制。[/font] [font=宋体]这将从第一个形状所提取的。[/font] [font=宋体]此外，使用标尺和网格来帮助定位电话的形状。[/font] [font=宋体]当您完成时，请将形状重命名为[/font]"[font=宋体]电话形状[/font] 1"[font=宋体]。[/font][/align][align=left][font=宋体][/font][/align][align=left][font=宋体][/font][/align]

[font=宋体][font=Helvetica][b][size=4]Step 4  [font=宋体][color=darkgreen][size=2]第4步[/size]：[/color][/font][/size][/b][/font]
[/font]
[font=宋体]接下来需要复制此层，填充[/font]#5b5b5b [font=宋体]，并将其命名为电话形状[/font]2
[align=left][font=宋体][size=12pt][/size][/font][font=宋体][size=12pt][/size][/font][/align][align=left][font=宋体][size=3][/size][/font][/align]

[font=宋体][font=Helvetica][b][size=4]Step 5  [font=宋体][color=darkgreen][size=2]第5步[/size]：[/color][/font][/size][/b][/font][/font]
[font=宋体]双击[/font]"[font=宋体]电话形状[/font] 2"[font=宋体]并设置样式（我根据个人的喜好设置，您可以进行适当的更改）[/font]
[font=宋体][/font]
[font=宋体][/font]

[font=宋体][font=Helvetica][b][size=4]Step 6  [font=宋体][color=darkgreen][size=2]第6步[/size]：[/color][/font][/size][/b][/font][/font]
[align=left][font=宋体]使新图层，并将其命名高亮。[/font] [font=宋体]然后[/font] Ctrl+ [font=宋体]单击[/font]"[font=宋体]电话形状[/font] 2"[font=宋体]层的缩略图，进行选择（创建选区）。[/font] [font=宋体]然后使用使用[/font]Marquee [font=宋体]工具[/font] (M)[font=宋体]，进行一些选择。[/font][/align]
[align=left][font=宋体][size=12pt][/size][/font][font=宋体][size=12pt][/size][/font][/align]
[align=left][b][size=4]Step 7  [/size][font=宋体][color=darkgreen][size=2]第7步[/size][size=4]：[/size][/color][/font][/b]
[font=宋体]创建一个图层，使用渐变工具[/font] (G) [font=宋体]设置为白色和透明的线性渐变。[/font][font=宋体]然后从填充，就像下面一样。[/font][font=宋体][size=12pt][/size][/font][/align]
[align=left][font=宋体][size=12pt][/size][/font][font=宋体][size=12pt][/size][/font][/align][align=left][font=宋体][size=3][/size][/font][/align]
[b][size=4]Step 8  [/size][font=宋体][color=darkgreen][size=2]第8步[/size][size=4]：[/size][/color][/font][/b]
[align=left][font=宋体]使用橡皮擦工具硬度设置为[/font]0[font=宋体]％[/font] [font=宋体]，开始擦除，如下图所示。[/font][/align]

[align=left][font=宋体][size=12pt][/size][/font][font=宋体][size=12pt][/size][/font][/align][align=left][font=宋体][size=3][/size][/font][/align][b][size=4]Step 9  [/size][font=宋体][color=darkgreen][size=2]第9步[/size][size=4]：[/size][/color][/font][/b]
[align=left][font=宋体][size=12pt]用钢笔在底部绘制一个路径 。[/size][/font][/align]
[align=left][font=宋体][size=12pt][/size][/font][font=宋体][size=12pt][/size][/font][/align][align=left][font=宋体][size=3][/size][/font][/align]
[b][size=4]Step 10  [/size][font=宋体][color=darkgreen][size=2]第10步[/size][size=4]：[/size][/color][/font][/b]
[align=left][font=宋体]接下来您需要进行新的层并命名[/font]"[font=宋体]高光[/font]2"[font=宋体]。[/font][font=宋体]您的画笔设置为[/font] 1 [font=宋体]个像素，并还确保前台是白色。[/font][font=宋体]将画笔工具，右键单击屏幕和选择[/font] Stroke [font=宋体]路径。[/font][font=宋体]确保从列表中选择，笔刷也不必须检查画笔压力。[/font][font=宋体]单击确定。[/font] [font=宋体]最后，您将需要删除路径，[/font][font=宋体]就象下图。[/font][/align]

[align=left][font=宋体][size=12pt][/size][/font][font=宋体][size=12pt][/size][/font][/align][align=left][font=宋体][size=3][/size][/font][/align][b][size=4]Step 11  [/size][font=宋体][color=darkgreen][size=2]第11步[/size][size=4]：[/size][/color][/font][/b]
[align=left][font=宋体]删除端点。[/font] [font=宋体]然后转到滤镜[/font] >[font=宋体]模糊[/font]> [font=宋体]高斯模糊[/font] [font=宋体]并选择[/font] 0.7 [font=宋体]像素的半径范围。[/font][/align]


[b][size=4]Step 12  [/size][font=宋体][color=darkgreen][size=2]第12步[/size][size=4]：[/size][/color][/font]
[/b][align=left][font=宋体][size=12pt]接下来的步骤，您需要做的是重复同样的闪电效果，改变了背景颜色为黑色。按照下面的图片。[/size][/font][/align]

[align=left][font=宋体][size=12pt][/size][/font][/align][b][size=4]Step 13  [/size][font=宋体][color=darkgreen][size=2]第13步[/size][size=4]：[/size][/color][/font][/b]
[align=left][font=宋体][size=12pt]我们正在做这部分的手机。移动到一个新文件夹，并将它命名为>外侧。 > ，现在的时间，制作内部。首先，我将作出一个新的文件夹，并将它命名为>内部。 >在此文件夹中作出新的文件夹，并将它命名为>底部。 > ，[/size][/font][font=宋体]这是按钮。然后使用，圆角矩形工具[/font] (U)[font=宋体]，[/font][font=宋体][size=12pt][img=16,16]file:///D:/DOCUME~1/Dream/LOCALS~1/Temp/msohtmlclip1/01/clip_image005.gif[/img][/size][/font][font=宋体]就象下图[/font][/align]
[align=left][font=宋体][size=12pt][/size][/font][font=宋体][size=12pt][/size][/font][/align]
[align=left][font=宋体][size=12pt][/size][/font][/align]




[align=left][font=宋体][size=12pt][/size][/font][/align]

谁提供个PSD~~~~凑字数凑字数凑字数凑字数

box发的东西总是很吊人胃口！:hug: :lol

非处棒哦 感谢楼主哈... 收藏了 ....学习学习!

box老爷我爱死你了，还给翻译了。我顶你，再吧网页弄下来:kiss: :kiss:

期待翻译完成··················

:P :P :P :P :P :P :P :P

后面的没翻译了。。。

后面的没翻译了。。。

好棒啊.   而且非常的详细.  可以说把这个自己做出来后, 会学会很多细节方面的处理. 不错, 收藏了.
哈哈.英文翻译的有点慢, 不过我看英文就行了. 不用等你的翻译. 哈哈.:lol