这篇文章最初发表于2010年。
介绍的技巧和技术可能过时。

上周苹果平板电脑发布的消息引发了互联网世界的爆炸。命名为iPad,它将给人们访问和浏览网络的方式带来另一场革命。iPad图标将是任何网页设计师资源工具箱的合理补充,beplay足球所以,让我们启动photoshopbeplay足球,创建我们自己的详细iPad图标图形。

iPad图标

我们将要创建的图标具有iPad典型的前视图。使用苹果网站供参考,我们开始吧。

创建新文档,并使用圆角矩形工具在新层上绘制一个肖像形状。设置角半径为20px,填充为白色。

命令单击层缩略图以加载所选内容,然后转到“选择>修改>合同”并输入3px。创建一个新图层,并用黑色填充这个新选择。

双击第一层,用白色矩形打开图层样式选项。添加一个只有3倍大小的灰色内发光,以正常的混合模式。

下一步,双击黑色矩形的图层。这一次,用浅灰色添加外部辉光,同样设置为3倍的大小和正常的混合模式。

使用矩形选框工具在主体的上边缘和侧边绘制一个1px的细按钮,以表示锁定和静音开关。用一个微妙的灰色渐变填充这些。

要创建音量按钮,先画一个更厚的矩形,然后使用椭圆选框工具删除中心部分。

iPad的主屏幕通常采用充满活力的背景壁纸图案。令人惊叹的创意公地照片来自Flickr用户阿纳瓦尔迪马森恰巧合适。使用选框工具将照片裁剪到屏幕尺寸。

拖动指南以标识iPad主体的中心,然后用椭圆选框工具画一个圆。用从黑色到灰色的渐变填充这个圆,以模拟按钮的深度。

在一个新的层上,用1px大小的铅笔工具画一个正方形,然后用橡皮擦去掉四个角。将不透明度降低到25%左右以融入图标。

没有反射和光投射,苹果产品就不会完整。命令单击主体的缩略图以加载所选内容,然后用从右上角开始的白色渐变填充这个区域。减少该层的不透明度以适应并将其移动到层堆栈的顶部,以便任何基础元素都受灯光投射的影响。

在iPad主界面上。在屏幕顶部绘制一个细选择并填充黑色以重新创建状态栏。降低不透明度以允许背景显示。

使用铅笔工具绘制一个简单的电池图标,然后添加一个简单的文本元素选择。

在屏幕底部用灰色填充矩形选项,然后按Cmd-T转换。右键单击并选择透视选项,然后将顶角向内移动,形成iPad基座的基本形状。

双击停靠层以添加新的层样式。添加从深灰色到浅灰色的渐变,然后回到深灰色。将此设置为水平穿过码头。

添加一个内部阴影以表示停靠的小边缘。将选项设置为浅灰色,混合模式为“正常”。使用-90度角,1倍的距离,约27%的节流阀,尺寸为2倍。

使用笔工具在停靠处绘制平滑的流动形状。完成形状,从粗点回到起点。用白色填充,并将不透明度降低到13%左右。

命令单击停靠层以加载所选内容。按cmd-shift-i反转选择,然后从停靠反射层中删除多余部分。

现在所有的iPad界面都需要一组图标。我发现了这套很棒的苹果风格图标来自越轨的艺术设计师伊康.下载一个选择,开始在iPad屏幕上布置图标网格。

在其中一个图标上添加投影,使用大约50%不透明度的设置,2倍距离和9倍尺寸。在图层上单击鼠标右键并复制图层样式,然后将此样式粘贴到以下图标层上。

选择四个停靠图标并复制层。按cmd-e将这些层合并在一起,然后按Cmd-T转换。右键单击并选择要垂直翻转的选项,然后作为反射定位到位。添加一个图层蒙版,用软刷或渐变淡出反射,然后降低不透明度以适应。

iPad图标

这就是iPad的图标。不要忘记通过复制整个选择来添加必需的表面反射,然后翻转并放置在iPad机身的下方。

访问此下载

这一切听起来像是太辛苦了吗?好吧,你可以随时下载我在line25.com上免费发布的现成iPad图标集:为您的网站设计提供免费的苹果iPad图标集

在Pinterest上共享
没有图像。
39评论 提交 加上你的!
订阅接收spoon图形通讯beplay全方位手机移动娱乐平台

订阅我的时事通讯,成为第一个听到新文章的人

39评论

  1. 干得好,克里斯。难道你不认为你忘记了通常出现在每个苹果产品上的屏幕反射吗?D

    非常有效的教程,像往常一样。谢谢

  2. 很好的教程,克里斯,它只是为了展示创造这些东西是多么的容易。

    但不知道为什么人们会想要ipad:p

    • 我认为iPad很适合坐在沙发上看新闻等等。当然用钢笔和Mac OS X会更好,但我不认为它是为了取代你的电脑——只是作为它的一个附加物而已。

      我个人会发现下载和阅读书籍很有用——我已经没有空间放我的书了,在某种程度上,这是浪费纸张!

      • 显然你错了……iPad是一个有趣的产品笑话。我得检查一下我没有读洋葱。除了你的电脑?它的价格相当于一台中档电脑,而且功能要少得多。下载和阅读书籍,空间不足?专门的电子书阅读器,在屏幕上阅读要比在光面上阅读好得多,仍然吮吸。没有多任务,也是。

        你说的是浪费纸张?iPad是一种玻璃垃圾,铝,和硅。

        这是一个搞笑的产品,称之为“革命”是个笑话。-这是一款没有大多数平板电脑一半功能的平板电脑。

  3. iPad Dock的透明度太低,会让它变得更好!!
    尽管教程和最终的结果非常棒。
    是的,我已经下载了图标。
    :)

  4. 这是一个很棒的教程,克里斯。从开始到结束大约需要多长时间?看来你在这方面做了一些扎实的工作。

    这就是为什么人们总是回到这里来。你的教程质量很好。

  5. 本教程很棒,我学到了新东西。但我不能用钢笔工具在码头上创造出闪亮的效果,根本不工作,不过我有CS2,我想知道这是不是问题所在。

  6. 这是一个很好的教程,我喜欢学习新事物。我可以用钢笔工具在码头上创造出闪亮的效果;除此之外,我认为这是一个伟大的帖子!

  7. 你好,克里斯!感谢您一如既往的精彩指导。我在苹果网站上看到显示规格是1024 x 768像素分辨率,每英寸132像素(ppi)。这是否意味着我们为iPad设计的所有产品都需要达到132 ppi?

评论现已关闭