[教程]-浅浮雕框的做法-[教程]

2006-11-19 14:34 | sugoosamu


  作品范例:
  (注:因眼下距此图完成之时已经历经N年,PSD档业已不复存在。是以,谨在此图基础之上,重现其中相关之技术步骤。个人人品有限,如有不尽差错之处,望回贴诸君不吝赐教! 拜谢!)

  教程适应人群:对PS和IR做图有初步了解者
  制作软件:Adobe Photoshop CS Adobe ImageReady CS
  出品者:之雨阁

  一、范例解说:
  此头像的灵感,来源于2Adv V4版(http://v4.2a-archive.com/)。对于这个网站(http://www.2advanced.com/)的风格,我是很喜欢的。头像中的很多元素,都是从这里得来的。
  工业设计的简练,用渐变工具制造出的近3D效果、浮动的文字、标题框,以及色彩的鲜明对比是这个头像的特征。对于初学者而言,可能无法掌握存在于毫厘之间的区别。不过,不必要求甚解。能在学习中思考一些东西的过程才是最重要的事。

  二、教程部分:

  ------------------Photoshop部分------------------
  1-a 打开Phogoshop,新建文件(Ctrl+N或Ctrl+双击空白区域),定义长宽为120*130像素。
  1-b 新建层,用选区工具(M),在画布上选区适当大小的长方形区域,填充前景色(754646)。
  1-c 用多边形套索(L),取45度斜角画出平底梯形。借用梯形的倒角,用选区工具移动至相应部位(在相当于1/3的位置)。删去不需要部分。(建议:为了使插页效果真实,两侧斜角必须基于同一水平线。可以先从标尺中拉出参考线,利用参考线的捕捉功能来定位)
  第一步最终效果如图:

  

  2-a 使用选区工具,在步骤1的基础上,选取适当大小的区域。使用减选功能,在接近于1/5的位置将选区分割成两块,填充白色(或其它无关颜色)。并最终将这两块区域分为两个图层。(建议:可以选取其中一块剪切、粘贴,即可生成新的图层。不过要注意必须移动到原来的位置。)
  如图:
  我在这里将小块区域定义为“图层3”,以下步骤均基于此。如图:

  

  2-b 接下来要制作小浮动条。套用步骤1-c的做法,在图层3上用梯形倒角删去不须用的右下小角。新建图层4填充粉红色(B08489),使图层3不可见。如图:

  

  2-c 制作凹陷的效果。其实这只是一个渐变的把戏而已。先用多边形套索选取出一块区域,如图:

  

  2-d 用渐变工具(G)拉出斜的渐变效果。其中,渐变色的设置为:左,位置0%,4D2A2A,不透明度100%;右,位置100%,B08489,不透明度0%;过渡滑竿保持50%的位置不变。新建一层(图层5),在上步的基础上由左上至右下拉出渐变。尽量使有色部分保持在选区上方偏左的位置。用橡皮擦(E)擦去多余的部分,切记要用有羽化边界的画笔样式。如有需要,也可以降低图层的不透明度来调出适合的颜色。效果如图:

  

  2-e 制作左上小角。用选区工具画出小三角,新建图层(图层6),填充主色(754646)。双击该层,打开图层样式,勾选斜面和浮雕。将阴影的角度和高度分别调整为70度和26度;暗调模式的不透明度改为35%,其它默认。如图:

  

  3-a 制作文字。Main和Squarecn.com字样均用04_08号像素字,样式为“无”,字体大小因PS环境或设置或各种RP条件各异而有所不同(一般小于等于10像素。但对于像素字的要求都是一样的--不抗矩齿条件下不能出现矩齿)。
  Main字样色标是:B08489;Squarecn.com字样的色标是:361414。根据插页效果以及浮动条大小可以自由设置字符间距。比如我的Main用100,Squarecn.com用的是160。效果如图:

  
  (注:教程图片因为缩小的原因,文字有些模糊。具体请参照教程样品。)

  3-b 制作另两片插页。这个就比较简单了。可以复制已经做好的插页,来做两个相同的(如图层7和图层7的副本)。将两个图层移动至适当的位置,将图层在图层面板中放置于图层1之下。关键是取色的问题--在这个教程中我用的是逐步减淡的方法来表现叠加的效果。大家也可以根据自己的理解不同来配色,这完全是自由的-_,-
  按住Ctrl点选图层1,然后分别点选图层7和图层7副本,按Delete删去不需要的部分,然后使图层2不可见。将两图层链接,用移动工具(V)下移1-2像素(可以用光标键操作)。
  (注:在这里特别要注意的是在进行1-c操作时,“选取1/3……”的效果就体现在这里。如果不是正好三份的比例的话,也可以采用我的方法,把最后面一页的颜色放得更淡些。)
  如图:

  

  3-c 制作浮雕效果。选取图层一,打开图层样式面板,选取斜面和浮雕。将结构样式设置为“枕状浮雕”;深度-100%;大小和软化均为0;阴影选区:角度和高度因为之前设置过所以不用改;暗调的不透明度为80%;高光不透明度为100%,高光模式可以是“叠加”或“强光”、“柔光”(个人认为“叠加”最好,但原始范例用的是“强光”。“柔光”则稍淡。大家可以根据配色自行选择。)。其余设置保持默认,效果如图:

  

  4-a 选取你要的素材,进行调整。如图:

  

  4-b 缩放大小,选择需要的部分放入框中适当位置。新图层(图层8)位于图层1之下。(大小和选区可以根据图层2的大小来定,具体做法是Ctrl+点选图层2使之浮动,用选区工具M,将浮动框拖动到素材文件上即可。)效果如图:

  

  4-c 做到这里,主要的步骤基本完成了。接下来要做的就是些修饰性的工作。
  打开图层8的图层样式面板,勾选内发光。将结构色换为白色(或其它适合于素材的淡色);混合模式为“叠加”(比较适合深色素材);不透明度为90%。图素大小改为8像素。
  (以上的图层样式设置均可因图而异,凭感觉而作。比如原始范例就是在外框上加投影效果,这都是殊途同归的。)
  效果如图:

  

  5-a 为做动态效果作准备。在这之前先整理一下你的图层,将暂不用的、文字类的、图片类的都放进夹子里。
  5-b 将原来的“Squarecn.com”字样的图层复制一层,并把原来的改为不可见。点选这个副本层,将之改名为“Copy 1”,用菜单命令:图层-->删格化-->文字。
  5-c 新复制一层,名为“Copy 2”。菜单命令:滤镜-->模糊-->动感模糊,角度设置为0;距离为3。
  复制Copy 2,按Ctrl+F的快捷键两次来重复之前的一步滤镜效果,然后再复制一层,再Ctrl+F……
  完成后共有从Copy 1一直到Copy 5五个图层,除了Copy 1可以在原地不动之外,从2-5可以逐次向右移2-3个像素。越模糊的图层,与前一层的距离可以更大……
  最后的图层效果如图:

  

  呼~~~喘口气,就快完成喽!存储你的文件。接下来就是IR部分了。\^0^/

  ------------------ImageReady部分------------------
  1 打开ImageReady。可以直接使用PS工具板下方的切换按钮。
  第一帧不用显示任何“Copy”层,第二帧显示Copy 5,第三帧显示copy4,第四帧显示Copy3……以此类推,第六帧显示Copy 1,并将第六帧的时间改为2秒(或3秒、4秒、5秒,不宜过长)。如图:

  

  2 生成GIF文件,隐去背景层。因为这个框没有用外发光或投影,可以放心地舍弃背景图层。成品效果如图:

  

  BTW:如果觉得文字效果不够合意,可以加深动感模糊或减少Copy层。不过,就个人认为,图层在5个左右是最好的。另外,还可以在文字层上加阴影,这样会更漂亮~~~
  总体来说,是要根据不同的素材来制作的,大家也不用拘泥于一个框子,不然,就真地掉进框子里了。希望大家都能做出自己喜欢的作品~~~~^_^v



-
.::欢迎光临我的个人日志::.