当前位置: 首页 > 图文教程 > 平面设计 > 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   浏览: 805 ::
收藏到网摘: 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教程