-
Adobe Fireworks CS5中文教程
pdf格式 -
- 软件大小:7.7M
- 软件语言:中文
- 软件类型:国产软件 / 图形图像
- 软件授权:免费软件
- 更新时间:2018-12-30 18:05
- 软件等级:
- 软件厂商:adobe
- 应用平台:WinAll, WinXP
- 软件官网:https://www.itmop.com/
相关软件
Fireworks CS3汉化版绿色版
91.6M/中文/10.0
Fireworks Library.dll官方版
2.0M/中文/10.0
Fireworks MXv7.01 简体中文破解版
30.5M/中文/10.0
macromedia fireworks 8v8.0.0.777 中文精简
17.2M/中文/10.0
Macromedia Fireworks 8免费版v8.0 简体中文
88.3M/中文/10.0
软件介绍人气软件精品推荐相关文章网友评论下载地址
-
adobe Fireworks cs5教程使用Fireworks(以下简称FW)进行图标设计主要要留意两点:一是FW专注于web设计,不适合创造一些过于复杂的PS效果,请期待FW CS5的ps滤镜;二是FW的编辑方式类似于AI,如果您习惯于工作在PS类的像素着色环境下,请华丽的飘过。
接下来进入正题,我们拿一个比较标准的图标来临摹做说明,这样可以方便您理解。
adobe fireworks cs5入门教程
下图是国内知名的eico design所创作的一套图标,我们要临摹的对象就是图中被框住的信封图标。事先说明一下,因为教程的主题,我们会对这个图标加入一些细节,因此我们的最终临摹结果会与原图不太一样。
Step 01
把需要临摹的图标剪下来作为参考,锁定图层。我这里FW的路径面板是从Fireworks CS4中提取的,不过对接下来的操作都无影响,因为我使用的全是CS3包含的功能。
Step 02
用Rounded Rectangle工具画出一个和样图相仿的圆角矩形,使用四个圆角控制点调节好圆角的半径,然后按下Ctrl+Shift+G把图形打散。 随后把第一个圆角矩形复制一份,用白色箭头工具往四个方向移动一像素,制作出如图所示的两个圆角矩形(注意用白箭头处理好圆角处的八个节点,它们是要对齐的)。
我们不能用Stroke去给矩形加外边框,因为虚边会把你给搞死。如果你用Rounded Rectangle工具画出来的圆角矩形已经出现了非Stroke虚边,那就把节点打散后,用黑色箭头工具选中那个Path,点击路径面板的Round Points to Pixels把路径的所有节点归位到像素交点(也可以用白色箭头工具选中某个节点单独进行归位)。
Step 03
把大的圆角矩形复制一份放到最顶层,用白色箭头配合Shift+方向键得到一个倒三角,随即复制一份,上面的倒三角用Linear填充渐变;下面的倒三角实心填充褐色,并设置1px羽化。
Step 04
用白色箭头选中途中所示那些节点,然后用键盘的方向键往下挪两个像素,这样使信封看起来长一点(因为这里单个图标不受整体风格约束)。
Step 05
把之前画的渐变填充倒三角作垂直翻转,复制一份摆放好,它们的位置关系如下图所示。两个倒三角上下相隔1px多一点。可以用白色箭头工具选择深褐色倒三角上方的四个节点,以鼠标拖动的方式配合辅助线挪动把节点往上挪0.3~0.5个像素,这样可以让深褐色的先显得不那么虚(再一次重申,尽早打消用Stroke作边线的念头,这里不是photoshop)。
Step 06
留意样图的图标上方有一道高光,而且不是常见的单像素放射高光(大约为两个像素的高光处上面的1px高光要亮于下面的1px),因此可以考虑用Ellipse这种椭圆形的放射性填充达到这种效果。
我们选中并复制最底的圆角矩形两次,移动位置后得到两个上下相隔2px的圆角矩形,用两个矩形路径相减的方法得到一个新的路径,对其进行Ellipse填充(白色0-100透明度),最后把这个高光路径的叠加方式设置为Overlay。
Step 07
底部加个1px高光。
Step 08
现在的结果如下图,先歇一会儿,喝口茶,接下来我们进行细节的添加。
Step 09
暂时把背景改成白色,我们可以看到之前一个倒三角因为使用了羽化,有一些像素从信封两边溢出了一点。
这里有两种方法可以对这些像素进行处理,一是Flatten为Bitmap,二是保留路径的前提下做遮罩,我偏向于后者,因为这样保留了路径,以后如有需要可以进行再编辑,操作如下图所示:
Step 10
我们回到深色背景,有没有感觉到信封的两边显得有点平?我们用一个Bars或者Radial填充来加点效果上去。
Step 11
接下来为信封的上下三角形加单像素高光,因为之前已经反复讲过路径相减(Punch Path,您可以在Modify – Combine Paths菜单下找到它)的操作,这里不再作说明,如下图:
Step 12
同理给下面的三角形加高光。
Step 13
因为背景是比较深的颜色,我们可以考虑加个发光。这里我们不去用FW的投影或发光滤镜,还是用Path,为什么?因为比较好控制,个人喜好吧。我们可以做一个比信封底层的圆角矩形上下左右多1px的新圆角矩形,不羽化,透明度30。
Step 14
再在加一道1px高光在下面。
Step 15
至此图标基本完成,下面进入润色阶段。我们把所有图层全选“复制”一份,然后迅速按下Ctrl+Alt +Shift+Z把图层平面化为位图,然后设置叠加方式为Overlay,透明度60,这样就会发现图标的饱和度、对比度被提高了,这是我个人比较喜欢的快速润色的方法,但并非任何时候都适用,某些时候你必须手动用FW自带的滤镜去调曲线、对比度、饱和度等参数。
Finish 最终效果(其实信封下方的三角我也用路径加了Path作为投影,写完了才发现,我就不再折腾了……)
这篇用fireworks进行图标刻画设计细节教程已结束,希望大家看完之后,会有一定的启发和帮助!
-
更多>>软件截图
推荐软件
-
更多+厂商其他下载电脑软件安卓应用安卓手游苹果应用苹果手游MAC
Adobe Acrobat 8 Pro 注册机 53KB
下载/英文/14Adobe Photoshop 2022特别版 2.86G
下载/中文/103v23.2.0.277ACR14.2 免费版Adobe Photoshop CC 2015 852M
下载/中文/4v16.1.2 中文免费版Adobe Audition CS 5.5 56.7M
下载/多国语言[中文]/1绿色精简版Adobe Media Encoder 2022中文特别版 948M
下载/多国语言[中文]/2v22.6.0.65 安装版Adobe Photoshop CC 2020(ps2020) 1.80G
下载/中文/10v21.0.1 简体中文版Adobe Premiere Pro CC 2019精简版 800M
下载/中文/4v1.0.0 中文绿色版Adobe Illustrator CS6 64位 251M
下载/中文/6绿色简体中文版
Photoshop Express高级专业版图片编辑处理软件 131.8M
下载/中文/0v8.9.22 安卓汉化版Adobe Photoshop Lightroom 手机版免登录版 116M
下载/中文/0v8.0.1 安卓版lightroom cc 2022手机版 116M
下载/中文/0v8.0.1 安卓版lightroom移动版中文版 254.0M
下载/多国语言[中文]/1v8.0.1 安卓版手机lr软件 59.9M
下载/中文/1v8.0 安卓版photoshop手机最新版2022 154M
下载/中文/1v8.5.990 安卓中文版Adobe Acrobat Reader Pro手机解锁专业版 84.9M
下载/中文/3v22.4.0.22039 安卓版Adobe Sign 47.3M
下载/多国语言[中文]/0v3.9.0 安卓版
adobe photoshop手机版ios 344M
下载/中文/1v22.36.0 iPhone官方版Adobe Sign苹果版 118.9M
下载/多国语言[中文]/0v3.27.2 iPhone版adobe Xd苹果版 87.7M
下载/中文/0v50.2 iPhone版
adobe lightroom for mac 1.51G
下载/中文/0v10.3.0 安装完整版adobe camera raw mac 中文版 567M
下载/中文/4v13.1 官方版Adobe fireworks cs6 for mac 汉化版 627.2M
下载/中文/1简体中文版Adobe lightroom2018mac破解补丁 8.9M
下载/中文/3Adobe lightroom classic mac破解版 1.17G
下载/中文/1v7.0 中文版Adobe Photoshop CC 2019 for Mac 1.80G
下载/中文/0v20.0.4 中文免激活版Adobe Flash Player for Mac OS X 14.9M
下载/中文/3v23.0.0.207 官方最新中文版Adobe Reader XI for mac 145.8M
下载/中文/0v11.0.11 苹果电脑版
其他版本下载
精品推荐网页三剑客Fireworks
- 更多 (97个) >>网页三剑客网页三剑客是Dreamweaver,Fireworks,Flash三款软件的简称,从事网页设计工作的朋友应该非常熟悉,基本上最开始都是从网页三剑客教程开始学习,然后开始慢慢会用的。其中Flash是做动画的,Dreamweaver制作网页的,F
MP Flash(dreamweaver插件)14KB
/中文/1Dreamweaver MX200463.2M
/中文/4Macromedia Dreamweaver 860.0M
/中文/2网页设计与网站架设--CD1332.0M
/中文/1Adobe Dreamweaver CS5412.9M
/中文/5Adobe Fireworks CS6186.6M
/中文/6dreamweaver cs6绿色中文版144.7M
/中文/4网页三剑客8.0284.5M
/中文/4烟花模拟器3D手机版(Fireworks Simulator 3D)312M
/中文/2Adobe Dreamweaver CS5 注册机61KB
/中文/6
- 更多 (24个) >>FireworksFireworks软件是一款功能实用、操作简单的图形制作和编辑软件,拥有强大的图形编辑功能,包括图像的创建编辑、优化、原型构建、web设计开发、滤镜效果、智能缩放、多页操作等多种实用功能,同时软件还可以和Adobe其他
Adobe Fireworks CS6186.6M
/中文/6网页三剑客8.0284.5M
/中文/4烟花模拟器3D手机版(Fireworks Simulator 3D)312M
/中文/2烟花模拟器(Fireworks Simulator: Realistic)2G
/中文/13Fireworks CS3汉化版91.6M
/中文/1Adobe Fireworks CS393M
/中文/1Adobe Fireworks CS4 Extended精简版78.5M
/中文/1Adobe Fireworks CS5精简版94.5M
/中文/2Macromedia Fireworks 8免费版88.3M
/中文/3Macromedia Fireworks MX 200434.1M
/中文/1
相关文章
-
下载地址
-
Adobe Fireworks CS5中文教程 pdf格式
-
-
查看所有评论>>网友评论
-
更多>>猜你喜欢