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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
3分钟学会“抖音”效果
0.0°
2018-01-18 原创文章 教程 举报 38214 294 329 42

最近抖音短视频画风炫酷不断刷屏,很多小伙伴玩到停不下来,这种潮流的大风怎么会少了像素妹!谁还不是时尚弄潮儿咋滴?

让像素妹来教你!即使你不是设计师,对平面设计也一无所知,仍然能够轻松设计出这种故障画面特效!用PS简单三步就能弄出这种酷炫故障特效,赶快举起你们的双手,动!起!来!先上完成图


Image title



第一步,制作图标背板

1.打开PS,ctrl+n新建一个1024*1024,分辨率为72,背景为白色或者透明的文件;

Image title

2.用圆角矩形工具画一个1024*1024像素的正方形,画的时候按住shift,画出来就是正方形,圆角改为250像素,颜色色值改为“140b18”,如下图所示;

Image title

3.绘制一个772*772像素,色值为“400d28”的圆形,同样,按住shift可以画出正圆,在属性里把羽化值改为188像素,如下图所示。Image title

到这里,图标的背板就绘制完成啦~



第二步,绘制音符

画之前先观察一下,看起来音符下面是一个圆环,减去了一部分,最上面的小尾巴还是圆环的一部分,然后中间是用矩形连接起来的,让我们来动手试一下看是不是这样的。


1.绘制圆环

(1)先绘制一个484*484的正圆,颜色填充为“fe1955”,再执行ctrl+c,ctrl+v,原地复制一个;

(2)按ctrl+t变形,接着按住shift+alt键,再往里缩小,这样可以做出同心圆,尺寸缩小到216*216像素;

(3)shift+a调出小黑工具选中刚才画好的216*216像素的小圆,把工具栏中的布尔运算里的“合并形状”,改为“减去顶层形状”,这样圆环就做好啦!(注意:只有形状在一个图层中才能使用布尔运算)如下图所示。

Image title

Image title

2.绘制矩形

(1)使用小黑工具选中一下刚才画好的圆,哪个都可以,ctrl+r调出标尺,从标尺中拉出一条参考线,对齐选中的圆上出现的锚点,如下图所示;

Image title


2)选中矩形工具,开始画之前按一下shift,在画的时候再松开,这样可以跟刚才的圆环画在一个图层里,(如果不小心没有跟之前的圆环画在一个图层里,可以shift+v,切换到选择工具,然后选中圆环的图层,按住shift再点击矩形的图层,选中两个图层后ctrl+e,合并成一个图层)绘制一个134*519的矩形,底部对齐刚才拉的参考线,如下图所示。

Image title


3.绘制音符的“小尾巴”

(1)拉一条参考线在刚才画好的矩形顶部,然后绘制一个630*630像素的正圆,同样绘制之前要按住shift跟之前画好的形状画在一个图层内。用小黑工具移动它,让它的锚点跟参考线对齐,接着,用之前绘制同心圆的方法绘制一个362*362像素的同心圆,再拉出一条参考线对齐圆纵向的锚点,如下图所示;

Image title

(2)选中矩形工具,开始画之前按住alt键,这样就执行了布尔运算中的“减去顶层形状”,绘制一个716*260的矩形,矩形底部对齐参考线,把圆环多余的部分减去;ctrl+c,ctrl+v复制一个画好的矩形,按ctrl+t,鼠标右击,选顺时针旋转90度,把旋转好的矩形左侧对齐纵向的这条参考线,如下图所示。

Image title

4.减掉最下面圆环多余的一部分。选中矩形工具,还是开始画之前先按住alt,执行布尔运算中的“减去顶层形状”,绘制一个70*294像素的矩形,右侧跟之前画好的矩形对齐,底部跟最下面那条参考线对齐,效果如下图。

Image title

这样音符就画完啦~都是用规则的形状来画,再用布尔运算切出来,整个图标非常严谨,规整。


第三步,制作酷炫故障画面特效

终于到这一步啦,不要眨眼哦,接下来就是见证奇迹的时刻~

1.shift+v切换到移动工具,按住alt键拖拽刚才画好的音符复制出来一个,在移动工具下按住alt键拖拽,是分图层复制,给复制好的新的图层的音符填充颜色色值改为“24f4ee”,往上往左分别移动32个像素,如下图;

Image title

2.把移好的这个绿色音符的图层混合模式从“正常”改为“线性减淡(添加)”,如下图所示。

Image title

Image title



到这里“抖音”的整个图标就都做好啦,看似很复杂的效果做好只需1分钟,学会只需3分钟,是不是特别简单?学会了这个效果,以后不管是做banner还是插画,或者logo,都可以运用,分分钟酷炫到飞起~


最后,希望大家空闲时间可以多多练习,要知道,技巧不是捷径,练习才是!









更新:2018-01-18

收藏

294人已收藏

新像素教育

2021全日制UI训练营名额预约中 官网:uixxs.com

  • 109

    作品

  • 2499

    粉丝

  • 7

    关注

  • 近期学员作品展示
  • UI设计培训毕业班作品展示
  • 如何在UI界面设计中创建完美颜色
  • 新像素最近毕业班学员作品

    猜你喜欢

      2018-01-18 原创文章 教程 举报 38214 294 329 42

      3分钟学会“抖音”效果

      0.0°

      你确定要举报3分钟学会“抖音”效果

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年01月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      329
      294
      42

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

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

      登录

      手机号

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

      登录
      第三方账号登录