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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
【D5】屁S从入门到UI-工具
0.0°
2016-10-17 原创文章 教程 举报 3140 14 21 0

PS入门系列教程,针对UI,

D5工具,有任何问题请【留言】Or 加Q群【438966865】

Image title

Next time到啦~说好的简单点的打开方式来啦~
Image title

别着急哈~咱们先补一下昨天没说的~关于字体~
字体呢,分为【衬线字体】【非衬线字体】,区别呢?看图:
Image title【Serif 衬线字体】在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。红色标出来的地方,其实用作中文呢,就是书法里面的顿笔~
衬线字体强调每一个字母,容易识别。每个字母笔画的开始和结束都做了交代,因此易读性好,多用于印刷、Banner、海报等。


【Sans-serif 无衬线字体】没有这些额外的装饰,而且笔画的粗细差不多。
非衬线字体强调单词,比较醒目。适合排版,易于换行阅读的识别性,避免发生行间的阅读错误,多用于电子设备、UI设计等。

两个字体很好区分,也很容易理解,在此就不举更多的栗子啦~



接下来,咱们继续讲【钢笔】
选择钢笔工具:
Image title

选项栏如下:【路径】【合并形状】
Image title


【绘制直线】
Image title在画布中任意点击,即可绘制线段,点击的位置即为【锚点】
按住Shift键点击,可绘制规整直线,∠45°整数倍;
绘制完成后可建立选区、形状。


【绘制曲线】
Image title

鼠标点住拖动,即可生成曲线锚点,可以看到一个点有两个“把儿”,就是手柄,可以控制曲线方向的。手柄越短曲率越小,手柄越长曲率越大
不难看出,中间的曲线其实是两个锚点的手柄控制的,所以很好理解,前面的锚点会影响后面的曲线。想要后面的曲线不受影响,需要按住键盘Alt键,点击一下前面的点,就会删掉影响后面曲线的手柄,这样生成的曲线会有一点不平滑,有个转折角,尖尖的。

【调整路径】
Image title

【添加锚点工具】两种方式:一,点击添加,会有手柄,但是曲线整体不动;二,点住拖动添加,会有手柄,会改变两侧曲线;
【删除锚点工具】删掉锚点容易变得很奇怪,要后面继续调整~
【转换点工具】这个非常非常有用:一,点击锚点,会切换直角锚点OR曲线锚点,即有没有手柄;二,点住召唤出手柄的点,可以调整手柄改变曲线;三,可以单独控制手柄。

以上方式是调整锚点手柄的,如果要调整整条曲线、锚点位置,还要配合【路径选择工具】
Image title


钢笔的使用基本就是上面列出来的几点,在举栗子之前,想说一个原则:
绘制曲线锚点的数量越少越好。
一方面,曲线会平滑些;另一方面,容易修改~


那么应该要少到什么程度?
两点之间,可以生成两种形态的平滑曲线:C 或者 S
Image title

然而新手没必要去着急追求点少,长期练习熟练运用之后就马到功成了~

还记得昨天的尺规作图吗?今天还用它做例子~但是今天不让你用布尔运算啦,咱们用钢笔试试~


Step1.描兔头:
Image title


Step2.兔子耳朵:
Image title


Step3.领结:太小,用了放大工具,不明白的没关系,下节会讲~
另外说明两点:双击形状图层可以改变颜色;圆角矩形半径最大时是胶囊形状~
Image title


Step4.眼睛,合成:用到了之前讲的一些东西哦~
1.Ctrl加选多个图层,Ctrl+e合并图层,然后在合并形状组件;
2.建立文字X,Ctrl+t变化大小,摆在合适的位置,变黑色;
3.合并两个图层,确保X为顶层形状,减去顶层形状。
Image title


最后,做一些微调,一只没吃药的师父就出现啦~
Image title基本就是这样~

给大家推荐一个钢笔练习的网站,还不错:http://bezier.method.ac/


-总结-
然后是作业,今天的作业就是把昨天尺规作图的那个LOGO或Icon用钢笔描一遍~哈哈~
机智如我~
至此,已经完成了一半的教程,重点内容都已经讲到了,你有没有感觉自己已经可以用一用PS了呢?
我们相约在下节~



更多内容:关注微信公众号UIDX,或加Q群438966865

以上内容为爽Yy原创,如需转载请帮忙打个广告

Image title

点个支持一下呗~


更新:2016-10-17

收藏

14人已收藏

  • 10

    作品

  • 417

    粉丝

  • 2

    关注

  • 【番外1】屁S从入门到UI-切图初级
  • 【D10】屁S从入门到UI-蒙版&动作
  • 【D9】屁S从入门到UI-快捷键
  • 【D8】屁S从入门到UI-图层

    猜你喜欢

      2016-10-17 原创文章 教程 举报 3140 14 21 0

      【D5】屁S从入门到UI-工具

      0.0°

      你确定要举报【D5】屁S从入门到UI-工具

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年10月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      21
      14
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录