天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件频道 > 设计在线 > 美工教室 > photoshop>软件应用>Photoshop教程:苹果IPhone UI设计

Photoshop教程:自己动手设计苹果IPhone UI

天极网软件频道2009-08-12 00:01我要吐槽

  精彩文章推荐:

  Photoshop经典教程:美女瞬间变成老太婆

  Photoshop教程:美女真人照片改为手绘效果

  Photoshop教程:美女照片变唯美仿手绘效果

  Photoshop经典教程:调出色彩MM和通透皮肤

更多相关新闻请点击>>

  很多人都喜欢苹果IPhone手机的操作界面,这里我们教大家用Photoshop来设计苹果IPhone UI。

Photoshop教程:自己动手设计苹果IPhone UI

图为:IPhone UI效果图

  1.新建如此大小文件

Photoshop教程:自己动手设计苹果IPhone UI

图为:新建一个文件

  2.路径工具Photoshop教程:自己动手设计苹果IPhone UI,设置圆角Photoshop教程:自己动手设计苹果IPhone UI,画出如下形状;

Photoshop教程:自己动手设计苹果IPhone UI

图为:画出的轮廓

  3.加蒙版至顶层;

Photoshop教程:自己动手设计苹果IPhone UI

图为:添加蒙板

  Photoshop教程:自己动手设计苹果IPhone UI白色前景,黑色背景;

  4.图层样式设置如下:

Photoshop教程:自己动手设计苹果IPhone UI

图为:设置图层样式

  效果如下:

Photoshop教程:自己动手设计苹果IPhone UI

图为:设置图层样式后的效果图

  5. 新建层 Ctrl+鼠标点击图层渐入选取 选择修改>>收缩2px;

Photoshop教程:自己动手设计苹果IPhone UI

图为:新建一个图层

  填充黑色效果如下:

Photoshop教程:自己动手设计苹果IPhone UI

图为:填充后的效果

  6.图层样式设置如下:

Photoshop教程:自己动手设计苹果IPhone UI

图为:图层样式设置

  现在效果如下:

Photoshop教程:自己动手设计苹果IPhone UI

图为:设置图层样式后的效果图

  7.路径工具圆角Photoshop教程:自己动手设计苹果IPhone UI

  画出如下图形:

Photoshop教程:自己动手设计苹果IPhone UI

图为:效果图

  填充黑色;

Photoshop教程:自己动手设计苹果IPhone UI

图为:填充黑色后的效果图

  8.圆角路径工具 圆角40画出如下图形 并设置图层样式如下:

Photoshop教程:自己动手设计苹果IPhone UI

图为:设置圆角后的效果图

Photoshop教程:自己动手设计苹果IPhone UI

图为:参数设置

  9.继续新建层,填充白色如下,再新建层,填充黑色如下:

Photoshop教程:自己动手设计苹果IPhone UI

图为:新建图层并填充白色

Photoshop教程:自己动手设计苹果IPhone UI

图为:填充黑色后的效果图

  10.如图选择如下区域,设置图层样式;

Photoshop教程:自己动手设计苹果IPhone UI

图为:选择区域

Photoshop教程:自己动手设计苹果IPhone UI

图为:设置图层样式

  11.其他几个部分依次如此;

Photoshop教程:自己动手设计苹果IPhone UI

图为:其它部分设置

  12.最后底部效果设置如下:

Photoshop教程:自己动手设计苹果IPhone UI

图为:底部效果设置

Photoshop教程:自己动手设计苹果IPhone UI

图为:底部效果图

  13.移入按钮图层 【完成】。

Photoshop教程:自己动手设计苹果IPhone UI

图为:移入按钮前的效果图

Photoshop教程:自己动手设计苹果IPhone UI

图为:最终效果图

作者:佚名责任编辑:王健)

请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]