推荐阅读

Illustrator设计扁平化风格的职业角色图像
在本教程中,我们将制作一套平面风格的肖像,描绘不同职业的人。这样的头像可以被用来当作社交网络的头像,或者是你个人网站的设计素材(描绘不同的职业类型)。你还可以用这种方法制作自己的扁平化肖像,用作你自己的商业名片。现在让我们开始我们的教程吧。Adobe Illustrator的几何形状工具在制作矢量图形方面非常棒。我们通过接下来详细的教程发现新的使用技巧和窍门。(路径查找,裁剪和蒙板工具以及其他的一些AI功能)即使你是刚入门的新手,也可以很轻松的使用这个教程完成上面的肖像画。赶紧跟随教程制作起来吧。先看看效果图(一)制作一个建筑工人的扁平化肖像画第一步:我们将开始我们第一个任务的头像,我们使用矩形工具(括号内为快捷键,以下同。矩形快捷键为M)制作一个65*80像素浅粉色皮肤色调的矩形,保持矩形选中状态。去对象>路径 >添加锚点。你将会注意到每一个矩形的边上上出现了新的锚点。第二步继续使用对象>路径 >添加锚点。为矩形的每个边在增加更多的两个点。 我们不需要用上面的锚点,,所以我们删除它们。用直接选择工具(A)选中需要删除的左边和右边倒数第三个点(左右各一个)然后在顶部的控制面板里,点击删除已选中锚点工具按钮。

2018淘宝店铺装修教程之基础旺铺全屏无缝实现方法!
本站改版上线以来,淘宝店铺装修方面的文章一直没有着手写,虽然之前在笔者另外的两个网站上写了有小一千篇装修教程,但在本站却无从下手,想从另外一个角度出发,分享装修思路,以及能够给朋友们带来便利性的工具和代码。本篇讲解基础旺铺全屏海报的三种装修方法,选择一个自己适合或者喜欢的,更容易提供工作效率以及在枯燥的装修中找寻点滴快乐。 1、下图中是笔者总结的全屏代码,适合基础旺铺和专业版旺铺,代码并不复杂,即使没有html基础也没关系,只需要修改数值,替换产品链接和产品图片链接即可。 2、笔者把需要修改的地方改为中文,一是可以直观看明白意思,另外一个是可以方便替换,下面解读一下代码的意思:因为是全屏无缝代码,所以模块高度与海报图高度有20的差值。举例:【模块高度】580【海报图高度】600【产品链接】https://item.taobao.com/item.htm?spm=a1z10.1-c.w5003-18396994491.1.5ad574c730Kbum&id=44467511416&scene=taobao_shop【图片链接】http://gdp.alicdn.com/imgextra/i1/91049940/TB2tRmdveOSBuNjy0FdXXbDnVXa_!!91049940.jpg <div data-title="taoxuemei.com 基础全屏代码" style="height:模块高度px;"> <div class="most-footer footer-more-trigger" style="left:auto;right:auto;width:950px;height:模块高度px;top:auto;padding:0;border:none;z-index:1;background:none;"> <div class="most-footer footer-more-trigger" style="left:-485px;top:-20px;width:1920px;height:海报图高度px;border:none;padding:0;background:none;"><a href="产品链接"> <img src="图片链接" /> </a></div></div></div> 3、复制上面的代码,进入淘宝装修后台,添加自定义内容模块,然后进入编辑界面,弹出的编辑器界面上,点击第一个【源码】按钮,然后单击鼠标右键,弹出的下拉菜单中点击【粘贴为纯文本】,之后按照上面第二步里面介绍的方法,替换文字为数值或者链接,然后再次点击【源码】按钮,可以看到图片点击确定查看效果。 如果手动修改代码搞不定,那么可以选用在线全屏代码生成工具,此类网站较多不在这里推荐,可以百度搜索一下,相比代码修改,此类工具提供图形化界面,只要按照提示填充链接即可,有些还可以做成 全屏热点、全屏无缝的代码,获取代码之后,还是要回到淘宝装修后台,编辑自定义内容模块添加代码即可。 如果你对上面两种方式还是不满意,还是感觉麻烦,就是不想接触代码,那么可以使用基础全屏模板,不过需要购买之后才能用,图形化的操作,不用接触代码,设置完成后,用客户端自动按照到淘宝店铺即可。 注册网址:http://www.taoxuemei.com/tao/276.html 注册之后送一套模板,登录之后咨询客服购买以及使用问题。 根据自己的需求和实际情况,选择适合自己的方式方法,使用代码一些数值需要调试的,比如【style="left:-485px;】,这个485是需要根据实际来调整,可能是585,也可能是685。基础版旺铺的装修,其实是比较麻烦的了,因为很多数值需要调整(淘宝对于css的限制,导致很多类不能直接修改),后期维护太麻烦。 笔者建议使用4y4基础全屏模板,有个模板直接替换图片,不用接触代码,相对而言简单多了。如有疑问可以在文章下方留言,笔者会及时回复你的。

在Dreamweaver MX中应用“占位图形”
“占位图形”顾名思义是在准备好将最终图形添加到 Web 页之前使用的临时图形。使用它可以在没有理想的图形的情况下先行制作Web页面――在需要使用图形的地方插入一个占位图形先“占领”着“地盘”。 一、插入占位图形 将光标定在需要插入图形的地方;选择:插入>图像占位符即出现图像占位符对话框,如图: 设定好各项参数后点击“确定”即将占位图形插入到了页面中,如图: 上面显示了名称和大小。察看源代码发现增加了一个包含空 src 属性的图像标签。 二、替换占位图形 1.当页面设计好以后,我们就需要使用正确的图形来替换到占位图形。在用DreamweaverMX(简称Dreamweaver MX)中选中占位图形并打开属性面板,点击“创建”按钮。则Dreamweaver MX就会启动FireworksMX(简称Fireworks MX)并自动建立好一个和占位图形同样大小的空白画布等待图形设计师的“操刀制作”。

Photoshop教程:模拟变形金刚壁纸
PS打造变形金刚壁纸。先看一下最终效果: (1)自己动手制作变形金刚壁纸 (2)在photoshop视图中新建一800×800象素的图纸,选择渐变工具绘制黄色到蓝色的渐变效果,如图所示。 (3)选择菜单“滤镜>风格化>凸出”,弹出凸出对话框,设置类型为“块”,“大小100象素左右”,“深度100”,“随机”。 (4)选择菜单“滤镜>艺术效果>塑料包装”以默认设置确定。 (5)选择菜单“滤镜>扭曲>旋转扭曲”
最新发布

Fireworks制作超酷金属字
如例图所示的这款金属字是否给你一种镏光溢彩的感觉呢?如果你回答No,我只好就此Stop了,呵呵。好了,废话不多,我们一起开始吧!看看到底如何制作出这样一款超酷的金属字效果来。 本节要点:重点掌握Effect(效果)命令中Adjust Color--Curves效果命令和Hue/Saturation效果命令的使用方法! 第一步、 新建文件,文件的大小为300*100像素,背景色采用白色。为了突出效果,建议你先不要采用其他色彩的背景色,等我们学习完毕,你自己重新开始时,再用其他的颜色来试验也不迟。 第二步、 选取工具箱的Text Tool(文字工具),在编辑区点击,在随后弹出的文本编辑器中输入文字,这里输入的是“金属字”三个字,字体采用的是“方正超粗黑简体”(尽量选用较粗的字体);字体的颜色为黑色;字号为91pt大小;字体边缘效果选择Smooth Anti-Alais(平滑边角)。其他的选项保持默认值即可。设定完毕,编辑区应该如图01所示: 图01 输入文字后的编辑区 第三步、 这一步,我们要调整文字的填充颜色。选中编辑区的文字对象,打开Fill(填充)面板,将文字的填充方式由原来Solid(单色填充)变为Linear(线性填充),点击颜色列表旁边的Edit(编辑)按钮,对渐变色进行编辑,从左到右的颜色排列顺序为“#CCCCCC--#000000--#CCCCCC”,具体设定请参考图02。(注意:文字的填充颜色设定很关键,如果你采用其他的颜色打牌方案的话,效果就不一定如我们所愿了,不过,你可以自行试验) 图02 对文字的填充色进行调整 第四步、 设定完毕后,文字的填充色已经发生了变化,由原来的单色填充变成了从左向右的渐变色填充,如图03所示: 图03 由左向右的填充方式 第五步、 调整文字渐变色的方向。选定文字对象,选取工具箱的油漆桶工具,在文字对象上方由上向下拖动油漆桶,这样,文字的颜色渐变方式就由从左向右填充变为了从上到下的填充。如图04:

Fireworks打字动画效果的实现
很长时间以来,总是有人在探讨在FW中如何制作打字效果的动画这个问题。大部分的朋友认为,使用FLASH可以轻松的实现这一种效果,但在FW中似乎要困难些,好像除了一帧一帧的累加以外,就没有更好的办法了。原来也是一直这么来理解的,但是今天无意中找到了一种在FW中实现打字动画效果的更好的方法,请随我来: 【打字动画效果图】 第一步:打开FW,新建一个文件 ,文件的大小为140x20像素,背景色自定,这里采用了黑色。 第二步:选取工具箱中的Text Tool(文字工具),在编辑区输入你想要出现打字效果的文字,这里我们输入了“风云设计眼欢迎您的到来”;字体采用“宋体”;字号采用12Px;颜色自定;字体边缘效果选择“No Anti-Alias”;对齐方式采取默认的左对齐方式。 第三步:选中编辑区的文本对象,执行快捷键“Ctrl+Shift+D”,原地复制相同的一个文本对象,然后打开Fill(填充)面板,将复制的文本对象的颜色做一改变即可,然后向任意方向移动1像素的距离,调整好的效果图如图01所示: [注:]此步骤可以略去,直接进入下一步,如果你不需要对文字对象做改变的话! 图01 在编辑区输入相关文字 第三步:选中文字所在的层,点击层面板右上角的弹出菜单按钮,在随后出现的弹出菜单中,执行“Share This Layer”(共享这一层)命令,将文字所在层变为共享层,如图02所示。 图02 共享文字所在层

Fireworks一款立体字的制作
教程源文件下载(在下面的图片上右击另存为即可) 我们已经学习过好多种立体字的制作方法了,不管是哪一种立体字的制作,都要有一个中心在里面,那就是力求体现出立体的效果,开始本教程的学习之前,请大家先看看下面的立体字的效果图,如果您不管怎么看都不象是立体字的话,哪就不必后面的学习了~~ :) 呵呵~~~ 请看具体的操作步骤: 1、打开FW,新建一个文件,文件的大小为300*100像素,背景色自定,我们在例子中采用了紫色(#663399)。 2、选取工具箱的文字工具,在编辑区点击,在弹出的文字编辑框中输入相关文字,这里输入的文字为“3D text”,字体为“Arial Black”,字号为60大小,字体采用加粗模式,颜色可以自定,设定完成后,编辑区的文字对象如下图所示: 3、接下来我们要对文字的填充色进行调整。选定文本对象,打开Fill(填充)面板,进行相关设定。将填充方式设为Linear(线性渐变填充),填充的方案选择“White,Black”,其余选项保持默认值不做更改,具体的设定请参考下图: 4、此刻编辑区的文本对象应该如下图所示: 5、好了,我们需要对文字的填充方式进行一下调整,点中文字,会出现颜色调节手柄(有关颜色调节手柄的相关知识,我们在《模拟条形码制作》的一文中有过简要讲解,请参阅),调节正方形的手柄,向下方旋转,使其和圆形手柄在垂直方向上位于同一条直线上,然后拖动圆形手柄到文字对象的中心部分,请看调整后的文字对象及其调节手柄的演示图:

Fireworks稚幼体字体效果制作
首先回顾一下,在前面的学习中,我们学习了模拟条形码的制作。很多朋友反映不能拉出条形码的效果,提醒各位一点的是,一定要将正方形的调节手柄拉到和圆形的调节手柄处于同一条直线上才能出现预期的效果,如果你不知道两个调节手柄是否已经处于同一条直线上,可以预先从上侧的标尺栏拖出一条水平的辅助线来作为调节的参照物,这样调节起来可能要方便一些了。如果你对于辅助线的概念或者如何拖动辅助线的方法还不太了解的话,可以参考这里的文章,希望能够对你有些帮助。本节我们要学习的内容是制作一款字体效果:稚幼体,请先看示例图: 首先需要声明的是,这种字体效果我们没有使用任何现成的字库字体,现在我们要做的是来模拟这种字体效果,如果你需要真正的这种样式的字体,需要下载相应的字库进行安装才可! 1、打开FW,新建文件,文件的大小、背景色自定义。 2、选取工具箱的文本工具在编辑区点击,在弹出的文本编辑框中输入相关文字,请注意,既然是模拟制作稚幼体,我们还是输入中文为好,任意输入文字,字体选择“楷体”;字号配合编辑区的大小进行设定,尽量采用大字号,这样效果明显些;颜色自定,编辑结束后,编辑区如下图所示: 3、选中编辑区的文本对象,执行菜单命令“Text--Convert to Paths”,这样就将文本对象转化为路径对象,这一步是比较关键的步骤,因为后面的操作主要就是对路径对象的操作。执行该命令后,层面板上的变化告诉我们,路径转化已经成功,如下图: 4、接着,在文本对象被选定的情况下,执行菜单命令“Modify--Join”,这样就将多个路径对象组合成为了一个路径对象,以便于我们后面的操作,编辑区对象如下图所示: 5、好了,产生我们所要的效果的一步到了,同样,选定编辑区的路径对象,执行菜单命令“Modify--Alert Path--Simplify”,会弹出对话框如下:

Fireworks中螺旋运动字的制作
1.新建一个450*150,背景色为黑色的文件. 2,适当地拖出几条辅助线,用工具栏中的钢笔工具,在编辑区画出波浪形,如图(图1) 双击图层面板上的这图,另命名为a.3,用工具()在编辑区拖画出一方形,大小如图(图3). 在图层面板上双击这方形图,另命名为b4,编辑方形,打开fill面板,渐变为线形渐变linear,进行如图设置(图4), 选中油漆桶工具(),对方形从上到下渐变.结果如图(图6) 5,选中渐变填充好的方形,edit-----clone,克隆出四个同样的方形,把它们依次命名为c,d,e,f.按从左到右的顺序排成直线.因为此刻它们都在a之上,所以a层现在看不到.结果如图(图7)

Fireworks制作透明字
有次看到别人在论坛发的贴子,说透明字只能在photoshop中做到,而在fireworks中却办不到。不是办不到,只是此人没有想到而已。其实在fireworks中制作透明字不难,下面就让我们动手操作一遍吧。 1、打开一张图片,用文字工具输入文字。这里为了让大家看得清清楚楚,明明白白,真真切切,特用字号为250,字体为综艺繁体,输入的字为“思”,填充色为黑色。你也可以用别的字体和字号。 2、把文字打散,选中文字,Texe>Convert to Paths,将文字转换为路径。然后再Modify>Ungroup,将文字解组。此时的文字可以任意编辑了。为了不让大家在学习过程中看得晕头转向、摸不着头脑,我们把这文字层重新命名为text1 3、选中text1文字,Edit>Colne,把克隆出来的文字重新命名为text2。选中text2文字,在电脑键盘上的右方向键上按三下,然后在下方向键上三两下。(每按一下,文字向相应的方向移动一个象素)。再选中text2,Edit>Clone,把克隆出的来文字重命名为text3。选中text1,Edit>Clone,把克隆出的文字重命名为text4. 4、大家是不是克隆几次后有些发晕了?:)。选中text3,把它拖放到text1层之下。此时,text2和text3层是移动了象素的文字层,大家要清楚。此时各层的关糸如图。 5、按住Shift键,同时选中text2和text4,Modify>Combine>Punch。再同时选中text1和text3,Modify>Combine>Punch。 6、把text2和text4punch后的图层重命名为text5,把text1和text3Punch后的图层重命名为text6。如图。

Fireworks制作字体遮罩动画
1、画一幅图像(或调用一幅位图)留作为Mask字体的底层动画用。 2、把上一步骤的图复制/粘贴2次,然后把3幅图合并,这样会使动画更加连贯。 3、选中这幅图,然后Insert-->Convert to Symbol(或F8), 然后选择Animation,将它定义为动画.在动画参数设置里只要填Frames播映的桢数就可以了,我们在Frames那里填10。 4、选中箭头所指的红点,向右拖动。 5、拖动后,调整好位置,使最后一桢的图案与第一桢相同。 6、在Frames面板里选取第一桢,回到第一桢继续下面的步骤。 7、新建一个图层,然后输入文字。 8、同时选中图案与文字,Modify-->Mask-->Group as Mask。 9、选中动画,然后在Layers面板里点击图中箭头所示,把遮照之间的关系取消;然后选取字体,选取字体后Object面板会出现两个选项,选path Outline(箭头所指),选好后在Layers面板里恢复遮照之间的关系。 10、遮照文字动画做好了,按Play看看吧.再整理一下位置与播放的速度会得到更佳的效果。

巧用Style制作立体感文字
大家都知道利用FireworksMX内置的bevel滤镜可以制作出文字的立体效果,但是这样调试起来很麻烦。而利用Styles的方法就简单了。 1.打开FwMX新建一文件,大小任意。将画布颜色设为:#729CFE 2.利用Text Tool在画布上拖画出一个文本框。选择菜单栏上的Text>Editor调出Text Editor对话框,输入文字“梦想瞬间”(这个方法解决了在画布上不能输入中文的BUG)颜色任意设置。 图1: 3.选中文本框,按Shift+F11调出Styles面板。点选Style 30应用该样式(图2), 此时的文字应该和图3所示的样式差不多(如果字体大小变化了,请自己调整好) 4.选中文本框,在Properties面板中将轮廓颜色设为透明;将字体填充颜色设为#729CFE。如图4:

用Fireworks 制作旋转文字动画
Fireworks与Dreamweaver、Flash一起合称网页制作三剑客,可是如果我们没有学会很好地利用它,那就与未出鞘的宝剑一样,难见光芒。所谓万事靠积累,只有多学多练才能让剑客真正发挥威力。今天就让我们来看一下如何利用Fireworks 4.0制作一个旋转文字的小动画,希望能对您有所帮助。 1、建立新文件: 启动Fireworks 4.0,按Ctrl+N键新建一个工作区,设置工作区宽度(Width)为400,高度(Height)为300,颜色为黑色,其余依照默认值。 2、输入文本图形: 首先单击文本工具(就是那个“A”),设置参数如下:字体为“华文行楷”,大小为“20”,颜色为“红色(#FF0000)”,其余的不用管它。然后在文本栏里输入文字,单击OK按钮。用箭头工具选择并移动文本到工作区稍微靠上的位置,接下来在Windows→Effect面板中选择ShadowandGlow→Glow(发光)选项,设置具体参数如下:宽度为2,柔化度为1,颜色为黄色(#FFFF00),透明度为100%。此时文本效果如图1所示。 图1 3、制作文本图形的分布路径: 首先取消对文本图形的选择,然后单击椭圆形工具(找不到?按矩形选择工具两秒钟看看会不会出现!),在Stroke和Fill面板中均选择None。按住Shift键在画布中画一个标准的圆形。按Ctrl+A键,或者单击箭头选择工具,按住Shift键分别点击文本图形和圆形,从而将二者全部选定,单击Text→AttachtoPath选项或者按快捷键Ctrl+Shift+Y,是不是看到文本图形乖乖地沿着路径进行了分布呢?哈哈,先不要得意的太早,路漫漫其修远兮……如果你看到的文本图形并未分布均匀的话,那么请用鼠标左键双击文本图形,在弹出的文本参数对话框中修改AV的值,直到文本图形沿路径均匀分布到令你满意的状态为止。