您好,欢迎来到Unity之家!   unity.jb51.net 
  • 首 页
  • 你问我答
  • 当前位置:首页 > 美工设计 > UI设计 >
    Photoshop自己动手设计苹果IPhone UI
    时间:2015-05-22 08:37 来源:互联网 作者:网络 浏览:收藏 挑错 推荐 打印

    很多人都喜欢苹果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

    图为:最终效果图


    (责任编辑:雷霆风)
    免责声明:Unity之家部分内容来源于互联网,如有侵权,请联系我们,本站将立即进行处理。
    标签:Unity之家