当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > photoshop 制作手机UI教程

Photoshop
Photoshop 偏暗的人像快速磨皮及润色
photoshop 外景人物的简单磨皮及嫩肤方法
Photoshop 巧妙的消除背景突出主体
Photoshop 制作经典的合成文字效果
Photoshop 一块光滑的褐色鹅卵石
Photoshop 粉红色的古典美女签名制作教程
Photoshop 调出外景人物图片梦幻的青色调
Photoshop 外景照片调色并加上暗角
Photoshop 快速美化人物脸部
Photoshop 绚丽的街舞动作
Photoshop 可爱的卡通雪人
Photoshop 简单的蓝色水晶按钮
photoshop 合成冲出画面的恐龙
Photoshop 偏色的古装人物转手绘效果处理方法
用photoshop给美女加上淡淡的彩妆的方法
用photoshop 合成子弹穿透物体的瞬间
Photoshop下利用滤镜制作漂亮的高光漩涡
Photoshop 精修陈年老照片
photoshop 鼠绘受伤的卡通酷哥
Photoshop 打造一把锋利的青铜剑

Photoshop 中的 photoshop 制作手机UI教程


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-12-05   浏览: 328 ::
收藏到网摘: n/a

最终效果图(友情提示:文章最后页提供PSD源文件下载):

photoshop 制作手机UI教程
效果图

  1、打开ps,新建一个文档,300px*400px,填充黑色背景,依照下图打好参考线。

photoshop 制作手机UI教程
图1

  2、新建一个图层,沿参考线做一个选区,填充上灰色,然后缩选1px,删除多余的色块,创建出边框;也可以用描边的方式来完成。

photoshop 制作手机UI教程
图2

  3、复制边框图层,选择边框内的部分,填充上背景色,此时我们便有了三个图层:

photoshop 制作手机UI教程
图3

  4、建立一个“顶部工具条”的序列,在这个序列中新建一个图层,命名“绿色部分”,选取如图矩形框,填充上白色。

photoshop 制作手机UI教程
图4

  5、对"绿色部分"添加图层样式,做"渐变叠加",设置如图:

photoshop 制作手机UI教程
图5

  6、效果如图:

photoshop 制作手机UI教程
图6

  7、使用同样的方法,新建一个图层,命名“黑色部分”,创建选区,填充白色,然后使用渐变叠加,参考设置如下:

photoshop 制作手机UI教程
图7

  8、“黑色部分”效果图如下:

photoshop 制作手机UI教程
图8

  9、将图层“绿色部分”拉到图层“黑色部分”之上,使用路径工具勾出如图区域。

photoshop 制作手机UI教程
图9

  10、按ctrl+enter 把路径转变为选区,按delete 删除选区内容,可以给左边角绿色的部分加上“内发光”效果,如图。然后用同样的方法完成右边角的制作。

photoshop 制作手机UI教程
图10

  11、接下来,做阴影效果。新建一个“绿色阴影”的图层,填充一个合适的椭圆。

photoshop 制作手机UI教程
图11

  12、对“绿色阴影”进行高斯模糊,删掉不需要的部分。

photoshop 制作手机UI教程
图12

  13、建立“头像显示栏”的序列,新建一个图层,命名“头像”,做一个圆角矩形的选区,填充白色。

photoshop 制作手机UI教程
图13

  14、对“头像”图层进行描边,颜色叠加和投影效果的添加,参数设置如下:

photoshop 制作手机UI教程
图14

photoshop 制作手机UI教程
图15

photoshop 制作手机UI教程