当前位置:必发365手机版 > 新闻中心 > Photoshop制作质感的网页PNG标签教程,简单制作一

Photoshop制作质感的网页PNG标签教程,简单制作一

文章作者:新闻中心 上传时间:2019-09-20

步骤4:为折痕添加细节

图片 1

图片 2

第二天

图片 3

图片 4

快速隐藏控制面板:shift+tab

交集:将2个图形相交区域保留,其余区域删除掉;

使用椭圆工具在标签形状上半部画一个椭圆,覆盖住标签的上部及左右边。复制标签粘贴在前面。选中一个标签形状和椭圆,然后取交集并扩展。创建出发光区域形状。

标签上加上图标和文字更酷炫!试一试吧!加点不同的颜色,形状或别的什么玩意儿。如果懒得麻烦又需要标签图标,可以在iStock上买得到。

去除所有描边,按钮就做好了。

十一、邮件展示:

1.使用正圆图形工具:设置描边,并将描边改为虚线,然后调整相应参数;

2.将许仙复制并旋转成适合的角度,再更改颜色;

3.重复2动作;

4.绘制正圆图形将描边加大填充为灰色;

5.再次复制正圆并将其缩小至虚线内并更改颜色;

6.绘制圆形矩形在旋转45度,并复制2个更改颜色;

7.将3个圆角矩形进行镜像;

8.绘制校园形,将颜色更改为黑色-黑色透明的径向渐变,并与2组圆形矩形编组;

9.复制虚线内圆形,并置顶,然后再加选圆角矩形组,并单击鼠标执行剪切蒙板;

10.绘制圆形并将颜色更改为黑色;

如果以上步骤过于简洁。请参阅《发光按钮》的步骤3.

图片 5

步骤1

九、绘制锁图标

1.选择圆角矩形绘制圆角矩形,并选择偏移路径(对象-路径-偏移路径-参数为负),执行减去顶层;

2.绘制圆角矩形与前面的图形下半部分重合,执行减去顶层,得到锁柄图形;

3.绘制圆角矩形与锁柄下部分区域相交,执行水平居中,并执行差集;

4.绘制3条细圆角矩形并与锁身区域执行减去顶层;

5.绘制圆形与矩形,并执行水平居中,并执行联集得到锁孔区域;

6.选中锁身与锁孔区域,单击锁身(作为参考图形),然后执行水平居中;

7.执行减去顶层,得到锁图形;

图片 6

现在为折痕添加一些深度,选中折痕形状填充线性渐变。第一个颜色样本取白色,第二个取20%的黑,然后去除描边。调整渐变的时候,从折痕形状的中间开始拉,按住Shift,以45度角拖拽到折痕的右下角。

以CMYK模式新建一个文件(色彩模式以后更改)。使用矩形工具(m)建立一个矩形,使其与你需要创建的按键尺寸大致相同。如果需要,可以以合适的数值,使用 滤镜-风格化-圆角 使矩形圆角化,我用的值是0.125。(译者注:搞不清楚老外为什么总爱用滤镜创建圆角,干嘛不直接用圆角矩形工具,难道AI的早期版本没有圆角矩形工具?)

七、绘制圆形垃圾桶图标

1.使用圆形矩形绘制桶身,再绘制稍大图形并与圆形矩形执行减去顶层命令;

2.使用同样的方法得到垃圾桶盖;

3.绘制3个细图形并与桶身减去顶层;

图片 7

  1. 选中发光区域的形状并创建线性渐变,第一个颜色样本取20%的兰绿,第二个取100%。
  2. 使用渐变工具调整渐变。
  3. 去除描边。
  4. 选中标签形状填充渐变,第一颜色样本取100%兰绿,第二取100%兰绿和50%紫红。
  5. 使用渐变工具调整渐变。
  6. 去除描边。

使用渐变工具调整渐变。去除描边。

图片 8

三、绘制齿轮

1.选择圆角矩形工具并设置圆角半径参数(拖拽绘制不放开时,上键:加圆角度数,下键:减圆角度数,左键:正圆角矩形,右键:正矩形);

2.选择旋转工具并执行复制旋转(在图形为选框模式下,选择旋转工具,双击展示弹窗,在弹窗中设置旋转度数执行复制旋转);

3.重复执行上次操作,直到达到效果后,将所有图形执行联集;

4.绘制正圆形并放置在同心位置(正圆:shift+移动【不松手时按住空格键表示冻结】,两图形同心:借助智能参考线【若智能参考线实效不展示中心点提示:则取消对齐网格/像素预览,还失效:按下ctrl 键】,将鼠标移至正圆中心点,移动到之前图形,显示中心点时表示同心);

5.执行拷贝正圆后执行联集;

6.将拷贝的正圆原位粘贴并按中心点缩小(等比例放大缩小:shift+移动,靠中心点为参照:alt);

7.执行减去顶层(减去顶层:【切换至移动选框,框住所有图形】路径查找器-减去顶层);

图片 9

我不知道 web 2.0 风格将会风行多久。这些闪闪发光的图标看去很炫,制作起来也容易,却不知能否持久。一方面,它代表着当前的流行趋势;另一方面,它又体现着对新技术新风格的探索。无论如何,大众对 web 2.0 风格依旧需求强烈,因而写篇制作一流 web 2.0 风格标签的教程很有必要。

如果以上步骤过于简洁。请参阅《发光按钮》的步骤3.

效果图

四、咖啡杯

1.选择圆角矩形工具绘制圆角矩形绘制杯身(绘制剪切的矩形用于减去顶层后杯身顶部为直角);

2.再次绘制圆角矩形绘制杯炳,使用对象-路径-偏移路径-设置位移为负,再减去顶层得到镂空的圆角矩形(再裁剪为杯炳状);

3.杯身及杯炳联集;

4.选择钢笔工具绘制热气(绘制好路径后,可选择“直接选择工具【选择工具右边的白箭头工具】”进行再次微调);

图片 10

步骤1:创建标签和折痕形状

使用圆角矩形工具创建一个圆角方形。接着再创建一个稍小一点的圆角方形。使用选择工具,抓住第二个方形的一角,按住Shift旋转45度。把第二个方形放在第一个方形的右下角,放在需要做折痕的地方。复制两个方形粘贴在前面。选中原先制作的方形和原先旋转的方形,使用交集并扩展形状,创建出折痕形状。把复制出来的那两个方形选中,使用减去顶层并扩展,创建出标签。现在选中折痕抓住一角,按住Shift旋转180度。

接下来要做的是让发光区域的渐变看上去象是一个按钮。这一次,使用浅一点的100%蓝绿和其它颜色的100%蓝绿以及50%的紫红。选中发光区域,使用渐变工具(g),从发光区域的底部向上拖动直到区域的顶部。

(注:文中的 “移动” 均表示:鼠标拖拽移动)

现在为折痕添加一些深度,选中折痕形状填充线性渐变。第一个颜色样本取白色,第二个取20%的黑,然后去除描边。调整渐变的时候,从折痕形状的中间开始拉,按住Shift,以45度角拖拽到折痕的右下角。

步骤2:创建发光部分形状

这一步我们来建立按钮的发光区域,用矩形工具(m)在按钮形状的下方一半的地方,再拉出一个矩形,新矩形比按钮形状的左右边及底边都稍长一些,它的位置差不多应该在按钮的中下部。复制(ctrl+C)按钮形状,粘贴在上方(ctrl+F)。选择要发光的部分和按钮的副本,取这两部分的交集,然后点扩展交集(路径查找器里的最右边的一个按键)。

六、绘制图标底座

1.绘制正圆形,对图形填充渐变色(配合渐变面板 common+F9),执行线性渐变;

2.复制圆形并缩小,再对其旋转180度;

3.再次对圆形复制并缩小,再对其填充渐变色,执行径向渐变;

4.再复制圆形并缩小,然后使用钢笔绘制波浪形图形并与中心最小圆执行减去顶层操作,并将其渐变色改为线性渐变再调整不同明度;

使用圆角矩形工具创建一个圆角方形。接着再创建一个稍小一点的圆角方形。使用选择工具,抓住第二个方形的一角,按住Shift旋转45度。把第二个方形放在第一个方形的右下角,放在需要做折痕的地方。复制两个方形粘贴在前面。选中原先制作的方形和原先旋转的方形,使用交集并扩展形状,创建出折痕形状。把复制出来的那两个方形选中,使用减去顶层并扩展,创建出标签。现在选中折痕抓住一角,按住Shift旋转180度。

图片 11

步骤 3

八、绘制好友图标

1.选择圆角矩形工具绘制正圆形成头部;

2.再绘制一个椭圆,另再绘制一个椭圆与前一个椭圆相交,保证交集部分为身体的形状,执行交集裁剪;

3.执行联集,并复制人物图形并将其缩小;

4.选择稍小人物图形执行偏移路径(对象-路径-偏移路径-参数为正);

5.加选稍大人物图形执行减去顶层操作,得到带空隙的2个人物图标;

图片 12

使用渐变工具调整渐变。去除描边。选中标签形状填充渐变,第一颜色样本取100%兰绿,第二取100%兰绿和50%紫红。

步骤2

图片 13

步骤2:创建发光部分形状

图片 14

我使用颜色面板混合颜色,但是使用拾色器会更舒服些,原理是一样的,

十、苹果图标

1)苹果身

1.使用钢笔工具绘制,借助网格工具(视图-透视网格-显示网格,并选中:视图-对齐网格)描点;

2.使用钢笔工具下的添加描点工具(或者:选中描点,按住 Alt 键 转换为添加描点工具),拖拽使之前的点变圆滑;

3.苹果蒂端变浅效果,则使用 直接选择工具(白箭头工具),借助上下键 移动描点;

4.去除网格工具,填充苹果身颜色(径向渐变);

5.使用椭圆工具减去顶层,获取被咬掉的苹果身;

6.使用偏移路径,绘制苹果身的边线(线性渐变色,并设置偏移度30度);

2)苹果身边线

7.复制外苹果边图形,选中整个苹果身,隐藏图形(隐藏选中的对象:common+3);

8.原位粘贴到对象的后方(common+B),并设置偏移度归0;

9.复制8中的图形,原位粘贴(common+F),借助上下键移动位置;

10.使用混合工具,依次选中2个图形,设置混合参数,得到混合后的图形;

11.显示被隐藏的对象(显示被隐藏的对象:common + 3 + Alt),得到苹果身;

3)苹果叶

12.使用椭圆工具绘制苹果叶,并借助描点工具(钢笔工具-描点工具)调整椭圆的2端为尖端;

13.调整苹果叶的渐变色(一暗一亮)、偏移角度,并参照苹果身的步骤,设置带边框等的苹果叶;

14.苹果叶图形编组,并移动到苹果蒂相应位置;

4)苹果身高光

15.苹果身内图复制原位粘贴,并借助钢笔工具(添加锚点、删除锚点,按住Alt键调整手柄得到图形)设置高光等效果;

16.再次设置高光,若与之前高光图的锚点出现重复导致无法删除,则将当前的图置于顶层以避免重复锚点操作(或选择钢笔工具-删除锚点)。

17.将图形整个编组(苹果身+叶子),缩小;

5)苹果倒影

18.使用旋转工具(旋转工具-镜像工具),水平镜像(水平-复制),并借助上下键移动到相应位置,形成倒影图;

19.选中倒影,选中透明度工具-制作蒙版(点击制作蒙板-取消剪切状态【剪切:不透明,否则:透明】);

20.选中蒙版(透明度工具栏-选中蒙版),选择矩形工具,绘制比蒙版稍大的图形,并设置黑白渐变,得到渐变的倒影;

21.选中倒影(透明度工具栏-选中倒影),修改透明度(透明度30%),得到渐变透明的倒影;

6)苹果身&倒影的虚影

22.选择椭圆工具,在苹果底端绘制椭圆虚影;

23.对椭圆虚影进行模糊(效果-模糊-高斯模糊),并进行高斯模糊调整参数(窗口-外观-调整高斯模糊参数值),得到底端虚影;

图片 15

锁定当前对象:Common + 2;

取消锁定当前对象:Common + 2 + Alt;

提示

使用以下步骤制作发光效果

现在添加渐变:这里是制作发光的精华部分了。首先在渐变面板里选择线性渐变,在按钮形状里拉出一个渐变。点击渐变里的第一个颜色样本,在颜色面板里把颜色改为20%的蓝绿。可能须点击颜色面板顶部右方的选项来改变CMYK色条。接下来,点渐变面板中的另一个颜色样本,改为100%的蓝绿。选中按钮形状,使用渐变工具(g),从按钮形状的顶部向下拉出渐变直到发光形状的上部。

图片 16

这一步简要解释一下使用渐变创建发光效果,如须进一步说明,请查询旧贴《不使用混合和透明制作发光按钮》的步骤3.使用以下步骤制作发光效果

最终效果图

图片 17

二、绘制邮件信封

1.选择多边形工具将边数设置为3(上下键为增、减多边形边数操作,或者右击选择边数设置);

2.复制三角形并旋转180度(按住shift旋转为45度/次);

3.对顶层三角形进行拷贝(复制:ctrl+c);

4.将2个三角形重叠并执行路径查找器-减去叠层(减去2个图形重叠部分:路径查找器-减去叠层);

5.将之前拷贝的三角形粘贴出来(原位粘贴:ctrl + F);

6.移动图形,将最终图形绘制出来;

图片 18

步骤5:扩展阅读

图片 19

图片 20

一、绘制云图标

1.选择椭圆工具绘制一个圆;

2.复制椭圆并进行变形,得到云图形(复制:Alt+移动 ,水平复制:Alt + 移动+Shift);

3.将所有图形进行联集(联集:视图-路径查找器-联集);

4.使用钢笔工具绘制一条线并将其描边加粗(钢笔工具只是绘制一条路径);

5.调出描边面板(点击工作区左上角描边)选择圆头端点;

6.复制线段(多图形复制:重复上次执行操作:Ctrl + D);

7.将所有绘制形状编组(右击-编组);

8.云图标绘制完成。

原位粘贴(当前对象的顶层):Ctrl + F;

减去叠层(减去2个图形重叠部分):路径查找器-减去叠层;

折痕看上去已经很不错了,还可以为折痕添加一个阴影以显示出立体感。选中折痕形状,按住Alt,向左下方轻轻拖动。复制标签形状粘贴在前面。选中新标签副本和折痕副本,取交集并扩展。把折痕阴影色设定为100%兰绿50%紫红。选中原始折痕形状排列到顶部。一个时髦的web 2.0 标签就做好了。

图片 21

步骤 4

五、绘制文件夹

1.选择圆角矩形工具绘制图形;

2.选择斜切工具,将圆角矩形倾斜(倾斜:按住shift+拖拽 );

3.分别绘制2个圆角矩形并执行联集并置于底层;

4.将上层圆角矩形执行:对象-路径-偏移路径-设值为正数;

5.选择后方圆角矩形和底层的图形执行减去顶层;

本教程实例由CS 3制作。但是所有CS版本都可以实现这些特效。本文仅显示Windows系统快捷键

步骤1:创建标签和折痕形状

图片 22

第一天

图片 23

调出路径查找器:Ctrl + Shift + F9;

联集:把多个对象合成一体,变成新的形状对象;

钢笔工具:贝塞尔工具,也叫贝塞尔曲线,其只是绘制一条路径;

重复执行上一步操作:Ctrl + D;

复制:Alt + 移动;

水平复制:Alt + 移动 + Shift;

加选图层:Shift + 鼠标点选;

图片 24

这一步简要解释一下使用渐变创建发光效果,如须进一步说明,请查询旧贴《不使用混合和透明制作发光按钮》的步骤3.

可以以任何方式装饰按钮。添加边框啦,文本啦,标识啦等等 。看看我提供的这些示例,只要重复步骤2和3(改变颜色很容易),你即可把发光添加到须装饰的按钮的任何部分中。不要忘了把每个对象的发光区域安排在按钮的顶部。

第三天

图片 25

原位粘贴:common + F;

原位粘贴到后方:common + B;

隐藏被选中的对象:common + 3;

显示被隐藏的对象:common + 3 + Alt;

混合工具:两个图形从颜色、形状的结合(设置混合参数:按住Alt+鼠标点击图形);

隐藏/显示网格:common + 引号(“);

图片 26

进入论坛参与讨论和交作业:

进入论坛交作业:

标签上加上图标和文字更酷炫!试一试吧!加点不同的颜色,形状或别的什么玩意儿。如果懒得麻烦又需要标签图标,可以在iStock上买得到。

使用椭圆工具在标签形状上半部画一个椭圆,覆盖住标签的上部及左右边。复制标签粘贴在前面。选中一个标签形状和椭圆,然后取交集并扩展。创建出发光区域形状。

图片 27

选中发光区域的形状并创建线性渐变,第一个颜色样本取20%的兰绿,第二个取100%。

步骤3:创建发光效果

步骤5:扩展阅读

步骤4:为折痕添加细节

备注:工具、菜单及选项的译文使用CS 5 官方中文版默认关键词,在文中加粗显示。如需转载,请注明出自PS真功夫。不足之处,敬请指正。

步骤3:创建发光效果

折痕看上去已经很不错了,还可以为折痕添加一个阴影以显示出立体感。选中折痕形状,按住Alt,向左下方轻轻拖动。复制标签形状粘贴在前面。选中新标签副本和折痕副本,取交集并扩展。把折痕阴影色设定为100%兰绿50%紫红。选中原始折痕形状排列到顶部。一个时髦的web 2.0 标签就做好了。

本文由必发365手机版发布于新闻中心,转载请注明出处:Photoshop制作质感的网页PNG标签教程,简单制作一

关键词: