恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
PS教程!天气炎热,我们来想个办法降降温
0.0°
2017-08-06 好文转载 教程 原作者: P大点S微博 举报 4589 18 40 0

UI设计之PS教程,手把手带你绘制出雅致洁白的写实风格效果的空调

天气一天天的热了,今天,带着大家做个空调降温消暑。教程不难,可以帮你熟悉图层样式的运用,源文件已打包,想要的可以看完后找我一起来练个手!

新建文档,这里我用的尺寸是800*600像素,我做了一个渐变的背景。Image title

用圆角矩形工具画一个圆角矩形,我用的尺寸是650X200像素,圆角角度上面为20,下面为40。Image title

给这个圆角矩形添加一个图层样式,我将用这个圆角矩形来当作空调的主体部分。Image titleImage titleImage titleImage titleImage title

复制一层圆角矩形图层,置于下层,将填充修改为0,添加一个投影图层样式,我们来加强一下投影效果。(如果有用CC2015版本的童鞋,可以直接添加第二个投影样式,为了照顾使用低版本的朋友,这里的截图及操作,我们都将使用低版本的做法。)Image titleImage title

在渐变背景上层,新建图层,载入圆角矩形选区,填充黑色,执行一个动感模糊,配合蒙版,根据我们渐变背景的光源方向,涂抹掉不该出现的部分,将图层混合模式更改为正片叠底,调整不透明度,再一次的增强阴影效果。增强阴影效果我用了两个图层,操作是一样的操作,更改的只是动感模糊的距离和图层不透明度。Image title

用矩形工具画一个矩形,并调整锚点,使之成为梯形,我们来制作空调出风口的底面。Image title

下面,我们来制作出风口的立体面,同样的用矩形工具画一个矩形,并调整锚点,使之成为梯形,复制一个路径,调整锚点缩小一点,减去,然后为这个图层添加一个图层样式。Image titleImage titleImage titleImage titleImage title

我复制了一层出风口立体面的图层,删除掉了上一步中减去的那个路径,将图层的填充设置为0,添加了一个图层样式,我想用这个样式来增强立体面的效果。

接下来,我们来画出风口叶片,同样的还是用矩形工具画一个矩形,并调整锚点,使之成为梯形,添加一个图层样式。Image titleImage titleImage title

为了更加的真实一点,我决定给叶片与出风口立体面接触部分添加一个阴影,我复制了一层叶片图层,将填充更改为0,添加一个黑色的外发光(这里我是用外发光来做阴影,不要被样式的名称被唬到了,内发光外发光并不是只能发光,它也可以用来做阴影,甚至渐变,也不算事)。当然,我只是想给接触部分阴影,其余部分不改变,所以我在图层样式的混合选项中勾选了图层蒙版隐藏效果选项,然后给这个图层添加了蒙版,用画笔涂抹掉了非接触部分。Image titleImage titleImage title

我用直线工具画了两条#cdcdcd颜色的直线,并添加了投影图层样式。Image titleImage title

接下来,画个#d8d8d7颜色的矩形,运用CTRL+ALT+SHIFT+T,你将很容易得到如下形状。Image title

为这个条纹状添加一个图层样式。Image titleImage titleImage titleImage title

我在左下角添加了一个按纽,画一个圆角矩形,添加图层样式。Image titleImage titleImage title

打上按纽的文字,ON,设置颜色为#afafaf,添加图层样式。Image titleImage title

那个显示屏,我想不用说了吧!Image title

大功告成!我们的最终效果!Image title

这篇图文教程有点长不知道能有几个人看完呢,看完的话如果有兴趣记得加一下群拿素材包哦~(进群记得备注一下:拍拍)Image title

更新:2017-08-06

收藏

18人已收藏

UI设计那些事

UI设计学习资源分享群:659929486

  • 126

    作品

  • 363

    粉丝

  • 2

    关注

  • PS+AI教程:2.5D风格APP引导页制作,简单易上手
  • PS教程:环太平洋电影海报合成案例讲解
  • PS教程:网页设计之2.5D风格网站登录页面制作
  • PS教程:手机创意海报 初级合成案例分享

    猜你喜欢

      2017-08-06 好文转载 教程 原作者: P大点S微博 举报 4589 18 40 0

      PS教程!天气炎热,我们来想个办法降降温

      0.0°

      你确定要举报PS教程!天气炎热,我们来想个办法降降温

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      40
      18
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录