网站建设

网页设计打造震撼立体字效果(上)

来源:上海网站制作 点击:次 日期:2015-05-01

6-way-create-astonishing-fonts-1

协策网络(上海网站设计)按:图层样式能有多强大?今天 给同学们实例演示一遍,过程不难,重点是图层样式的巧用。截图界面全中文,步骤清晰,即使是新手也可以迅速get 起 ,跟着至成科技一起学>>>

一、设计构思

首先说明下,这张背景图协策网络也忘记了是从哪里下载到的…当时看到以后就总觉得少点什么,然后就想可不可以利用这张素材快捷的做一张合成图,于是就有了现在酱紫的效果,至于这个数字嘛,强迫症患者不必纠结你想做哪个就做哪个。我们把素材裁剪为1920*1080,为制作字效做准备。

同学们另存图片即可。

20150314_1029 

二、设计字效

然后我们就来制作字效,首先当然是在画布上打上文字了,在这里要注意的是尽量选一些艺术字体,这样做出来的效果比较好些,我这里用到的字体为“Matura MT Script Capitals”,可自行百度搜索下载,然后再结合自由变换工具(Ctrl+T)把透视处理好。

20150314_1030

为了体现其厚度,我们采用不断向新方向复制图层的办法实现。具体操作为:

  1. 首先选中文字图层并按住“ALT”键不放
  2. 不停地来回按键盘的“↑”“→”
  3. 注意适当的调整方向,可多多尝试。
  4. 将复制出来的图层合并为一个图层并放在文字层下面。

20150314_1031

下面就要为文字添加效果了,在这里有两种做法:

1.将“文字层”“厚度层”分别添加不同的图层样式,然后再用画笔对整体进行减淡加深即可。

2.把“厚度层”用钢笔工具分解,分为“上层”“右上层”“右下层”,然后再分别设置图层样式,推荐此种。

5520150429

“文字层”图层样式

20150314_1033 20150314_1034 20150314_1035 20150314_1036 20150314_1037

“上层”图层样式

20150314_1038 20150314_1039

“右上层”图层样式

20150314_1040 20150314_1041

“右下层”图层样式

20150314_1042 20150314_1043 20150314_1044 20150314_1045

这就是设置后的效果图,注意以上参数仅供参考,大家要多多尝试才行。然后这里就要说下为什么要用第二种的方法,具体优点如下:

  1. 可以单独设置每个面的渐变效果
  2. 可以直接为其添加质感
  3. 你可以用第一种方法试试,然后对比两种方法的效果图看看

20150314_1046

三、添加高光

下面我们来为字效添加高光,普遍的做法是叠加高光素材,在这里桂桂也是采用了此种方法,而且还做了一个镜头光晕效果,具体做法是:

叠加高光的做法: 将高光素材的图层模式改为“滤色”,然后适当调整不透明度即可。

光线素材:《14套PS顶级光效笔刷打包下载》

镜头光晕的做法:

  1. 新建图层并填充黑色,右键转换为智能对象。
  2. 打开滤镜-渲染-镜头光晕,设置参数。
  3. 图层模式改为“滤色”,如果想要修改效果,双击打开智能对象即可快捷修改。

20150314_1047

     以上【 网页设计打造震撼立体字效果(上) 】的内容由协策网络公司(http://www.580plan.com/)为您提供,本文网址: ,转载请注明出处,更多有关上海网站建设,网站优化、微信网站制作(微官网)、手机app开发、商业摄影、企业宣传片制作、400电话、电商代运营等互联网应用服务都可以联系我们。热线:51085186或致电18018609689王经理。

     协策网络公司每天都会不定时更新有关网站建设以及网络营销推广的文章,希望对您有用。


广告1

网站首页
关于协策
协策活动

联系协策

拨打电话 在线QQ 在线咨询 联系地址