【H2O2|全栈】关于Photoshop | PS(4)

发布于:2024-09-19 ⋅ 阅读:(15) ⋅ 点赞:(0)

PS的一些杂谈(亖)

目录

PS的一些杂谈(亖)

前言

准备工作

图形工具

基本属性

混合选项

形状图层 

文字工具

基本属性

进一步变化文字

组和图层

UI设计案例 

预告和回顾

后话


前言

这一篇博客我将会写一下图形工具和文字工具有关的内容,涉及到锚点调节路径、自由变换和混合选项等内容。在本篇博客看完之后,是可以设置一些简单的LOGO和UI图标的。

我的博客的内容都是一篇一篇内容相连的,所以对PS使用不熟悉的朋友,可以点击我的主页,里面有很多其他的和PS有关的博客,可以从最基本的、核心的使用方法开始往后看。

文笔不是很好,将就看吧(捂脸)。

准备工作

软件:【参考版本】Adobe Photoshop 2021

案例(部分)【网络图片,如有侵权请联系删除】

 

 参数:

  1. 背景大小:1920*1080(像素)
  2. 分辨率:72(高了有点卡)
  3. 颜色:绿色#4ac93f,橘色#efad0d,黑色#000000

图形工具

在左侧工具栏里,找到图形工具,右键打开菜单栏,可以看到如下菜单:

由图形工具绘制出来的图形,就是形状

绘制矩形、圆形的快捷键操作和之前的矩形选区、圆形选区操作是类似的。比如按住Shift(或Shift+Alt)依旧是绘制正方形和正圆形。

基本属性

下面演示矩形工具的基本使用。使用矩形工具,随便绘制一个矩形:

在右侧的图层选项卡里,可以看到矩形工具创建了一个全新的矩形图层。

图形图层和一般的图层是有一定差别的,这个后面会说。

回到矩形本身上来,可以看到矩形的边界上有方形的锚点,内部有圆形的锚点。

拖动边界中点的锚点,可以单独调节矩形的宽和高:

拖动四角上的锚点,可以同时调节矩形的宽和高:

四角锚点还可以实现等比例缩放,快捷键是按住Shift。 

中间的圆形锚点可以调节四角的弧度,即变成圆角矩形:

在上方的选项栏中,可以选择填充颜色和边框宽度,设置为无色将不可见。对于特定大小,也可以使用W和H两个选项来调节。

注意,PS中快捷调节尺寸的方式是将鼠标悬浮在选项上,用鼠标直接左右拖动。

比如鼠标悬浮在W字样上,向左拉之后:

看到W和H中间的那个锁链形状的东西了吗,选中后将等比例变换(锁定宽高比)。

在这里还可以选择描边类型:

在右侧的属性选项卡中,也可以调节比例,还可以调节图形左上角元素的坐标

在属性-外观选项里,可以单独调节或整体调节四角弧度

混合选项

如果想进一步调节矩形的视觉效果,只调节基础的属性是完全不够的,需要使用到混合选项

工具栏中选择形状工具,右键形状,选择混合选项:

然后就可以看到这样一个选项窗口:

描边可以在原边框的基础上,向内部外部或者以边框为轴线向两侧扩充(居中)。

结构里的混合模式暂时选择正常即可。

不透明度可以自行调节,如果要做一个半透明的底部图层,就可以调节该选项。

填充类型可以选择颜色,还可以使用渐变、图案等。

窗口的最右侧可以看到调节后的效果预览

还可以调节矩形的内阴影。在角度中可以选择阴影的方向,比如我选的-42度就是在右下角。

距离可以调节阴影的宽度

阻塞可以调节阴影的边界模糊程度

大小可以调节阴影向内延伸占据的区域。

杂色选项可以使边界具有粒子效果。

调节内发光和调节内阴影是类似的,只不过不能调节角度。

可以调节内发光的颜色。

可以调节内发光的方式,有两种——柔和精确

可以调节内发光的位置,有两种——居中边缘。居中可以实现从中心区域向外扩散发光。

内发光调节角度的功能被拆解到了光泽之中:

外发光和内发光类似。

颜色叠加可以整体覆盖一层颜色,最好调节一下透明度,否则下面的颜色就完全被覆盖了。

渐变叠加和颜色叠加同理。图案叠加可以叠加一些预设的图案上来。 

投影可以在原形状下面叠加一个一样的形状,就像影子一样。

形状图层 

在右侧的图层选项中,可以看到形状图层和普通图层的区别。形状图层下方显示了图层设置的样式效果。

想让形状图层变为普通图层,可以右键点击图层,可以看到这两个选项:

栅格化图层可以保留形状的效果,栅格化图层样式则可以进一步将效果格式化。

 

形状图层不能和其他图层合并,这也是它为什么需要转为普通图层。 

文字工具

在左侧工具栏中,找到文字工具,右键下拉菜单如下:

使用文字工具,在任意位置单击,输入文字内容,自动创建文字图层

图层名称默认与输入内容一致,点击文字图层的选项卡生效:

基本属性

变换中设置长宽、坐标的设置和图形工具类似。

字符里可以调节字体、字体大小、文字竖直方向和水平方向的间距等。

段落和文字选项可以设置文字对齐效果和本身的下划线、上标等效果。

在上方的属性卡中,来看下面几个选项:

“浑厚”是字体的样式,有下面几种选项,可以调节文字的粗细

倒数第二个选项可以调节文字颜色。

最后这个选项,打开的窗口如下:

该选项可以调节文字的特殊变形,主要是一些预设的效果。比如拱形效果如下:

进一步变化文字

在生活中,我们常常会看到很多艺术字,比如上面的一路向北案例。

显然,利用变形文字功能无法满足我们特殊的需求,这个时候就需要使用别的方法来调节文字了。

右键文字图层,看到这几个选项:

选择转换为形状。 

放大之后,可以看到刚才的文字周围出现了很多锚点

利用这些锚点,我们就可以像使用弯度钢笔工具一样,通过调节各个锚点的位置来调整文字的具体样式。

对于多余的锚点,可以右键直接选择删除。同样的,对于缺少的锚点,可以右键选择添加。

锚点可以自动吸附到辅助线上,调节时不要忘了利用到辅助线。

实质上,现在的文字已经不是原本的文字,而是一个形状了,因此图形工具的混合选项也同样有效。

组和图层

我们目前使用移动工具移动图层时,默认都是选中当前图层的。

但是,当我们的图层比较多的时候,比如我们的小图标已经做完了,想要整体移动这个小图标的所有图层,这个时候就涉及到的概念了。

在图层里,选择这个小图标新建组:

直接拖动图层,可以直接把图层分到指定组中:

这样一来,我们就可以直接移动一个组的内容了。需要在移动工具的上边栏里,选择组:

UI设计案例 

小图标设计的案例psd文件我已经上传了,一路向北的案例怕侵权所以就不放了,有需要的可以下载下来看看。

预告和回顾

PS | UI设计入门 系列的博客到此就暂时告一段落了,后面的内容将在未来在进阶篇的专栏中更新,敬请期待。

对UI设计感兴趣的朋友,可以订阅我的专栏,我会不定期修订其中的内容:

专栏 | UI设计入门icon-default.png?t=O83Ahttp://t.csdnimg.cn/rAUAe

后话

笔者也是一个刚刚接触全栈的小白,对于这些东西也是才会使用不久。关于这篇博客,主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。

【H2O2】


网站公告

今日签到

点亮在社区的每一天
去签到