注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

黑玫瑰博客

开放思维磨练一双慧眼,把这世界看远看透再看淡

 
 
 

日志

 
 
关于我

看不清的城市,迷离的心路,到哪里找一个安逸的角落,容得下我的倦意,我有不屈的斗志,却没有称心的器械.我有高尚的灵魂,却不能平伏我欲望的漫延

网易考拉推荐

《音画制作入门》  

2012-04-02 09:06:39|  分类: 博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


 

所谓音画,顾名思义就是既有"音"又有"画"的一种完美结合的作品,在欣赏画面的同时又能欣赏到动听感人的音乐,使人心旷神怡感到一种美的享受,许多朋友喜欢音画,想学但又无从下手。有人说要从学习ps入手,有人说要从系统的代码开始,其实都对。但操作复杂、功能强大的ps和诸多外文似得密密麻麻的代码却使人望而生畏。这里我给朋友们介绍一种自学音画的另类方法,即模仿、套改、完善、创新,在模仿中学习,在套改中创新。诚然,代码不懂不行,ps不学不行,只是急用先学、循序渐进,才能学得轻巧、立竿见影。这样学起来兴趣浓、入门快、作品早、记得牢,这是我作为一个初学者的体会,有兴趣的朋友不妨一步一步试试看,祝你成功。

下面先看一幅最简单的音画:


2010年06月17日 - 地狱壳子 - 壳子的博客

  这是一幅最简单的音画帖,只有一张图片,插入了一幅透明flash和一首歌曲,但这毕竟也叫音画吧,哈哈!
此音画帖的全部代码如下:
<DIV style="LEFT: 0px; WIDTH: 800px; POSITION: relative; TOP: 0px">
<table width="800" height="686" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://i44.tinypic.com/vzwnye.jpg" width="800" height="686" >
</td>
</tr>
</table>
</DIV>
<EMBED style="LEFT: 150px; POSITION: absolute; TOP: 40px" align=right src=http://hjx163.blog.enorth.com.cn/attachment/flash/446412.swf width=700 height=400 type=application/x-shockwave-flash quality="high" wmode="transparent">
<EMBED style="FILTER: xray" src="http://www.yxrxz.cn/songs/01.wma" width=0 height=0 type=audio/mpeg autostart="1" panel="0" loop="true"></EMBED>

《音画制作入门》第二节

音画帖的仿制

现以第一节中的音画为例介绍一下音画的仿制。

一.代码释义

先看如下代码:
<DIV style="LEFT: 0px; WIDTH: 800px; POSITION: relative; TOP: 0px">
<table width="800" height="686" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://i44.tinypic.com/vzwnye.jpg" width="800" height="686" >
</td>
</tr>
</table>
</DIV>
<EMBED style="LEFT: 150px; POSITION: absolute; TOP: 40px" align=right src=http://hjx163.blog.enorth.com.cn/attachment/flash/446412.swf width=700 height=400 type=application/x-shockwave-flash quality="high" wmode="transparent">
<EMBED style="FILTER: xray" src="http://www.yxrxz.cn/songs/01.wma" width=0 height=0 type=audio/mpeg autostart="1" panel="0" loop="true"></EMBED>
释义:
第一行的意思是:本帖的位置相对于版面距作0像素,距顶0像素,帖子幅宽800。
第二行的意思是:创建一个表格,边框厚度为0,与格线的距离为0,格线厚度为0,表格宽800,高686。
第五行的意思是:插入一张图片并标明了图片的地址、名称和宽、高尺寸。
第十行开始的意思是:插入一幅透明flash,有地址和宽高尺寸以及相对于版面的位置,距左150,距顶40。
第十三行开始的意思是:插入一个音乐文件,传送完毕自动播放且重复无限次。
先记住以上五个常用的句型就可以了。

二.复制并创建一个web文件

1.先选定并复制上边的粉红色代码
2.打开"我的电脑"某本地磁盘,如E:盘,点击文件菜单"新建"—"文本文档",并命名为"仿制"
3.双击打开"仿制"记事本文件,点击右键—粘贴
4.在"仿制"记事本文件中点击文件菜单—点选"另存为"
5.在另存为对话框中输入文件名"太湖风景.html",保存类型选点"所有文件",在点"保存",然后关闭该记事本文件
6.双击刚生成的web文件,既可欣赏到该音画(如果听不到音乐,可点击信息栏,选点"允许阻止内容",就可听到音乐并看到falsh效果了。

三.试改

1.点击"查看"菜单,选点"源文件",打开记事本文件
2.把版面、表格和图片的宽度值(width)800改为1000(共三处)
3.在第十三行之前插入一个空行,先将第十一至十三行整体复制,贴入空行内,再把地址改贴为:
http://chunyi.vip10.flashyc.net/upload/xuesheng/yinhua/xiangfeng/yuheshui/移动的小船.swf
其位置改为距左550,距顶400,flash尺寸改为宽450,高270(尺寸及相关位置自己可调,效果满意为止)。
4.点击"文件"菜单,选点"保存",关闭该记事本文件
5.刷新或重新打开改过的web文件,点击信息栏,选点"允许阻止内容",看看其变化如何?(图面宽了,增添了一个移动的小船)至此帖子试改成功。

四.仿制与发挥

试改成功之后就可以仿制和尽情发挥了,水中可插入鱼、鸭、荷,空中可插入蜂、蝶、鸟,只要构思巧妙,位置放的合适就好。也可另换背景图片,flash以及与之相配的音频文件。当然图片也可插入多幅,只是未经溶合处理的图片显得拼合生硬,不协调,要想得到好的效果就不得不借助于ps进行加工处理了。


《音画制作入门》第三节

音画背景图的拼合

音画一般需用大图来作为背景,图幅多在800*600以上,尽管网上有不少现成的背景图片,但内容及色彩却不一定全尽人意,常常需要选择若干小图自行加工并拼合成一幅大图来使用,下面介绍一种比较简单的方法。

一.素材准备及加工

1.根据个人构思和主题从网上选择几幅如意的图片,下载或复制到本地磁盘:
 2.打开photoshop cs3,调出下载的三幅图片,然后利用裁剪工具将原图加工如下:


2010年06月17日 - 地狱壳子 - 壳子的博客
 
2010年06月17日 - 地狱壳子 - 壳子的博客
 
2010年06月17日 - 地狱壳子 - 壳子的博客
  二.新建ps空白文档
打开photoshop cs3,点击左上角的“文件”菜单,选点"新建",打开"新建"对话框,设定宽800 高1500像素,RGB颜色。
2010年06月17日 - 地狱壳子 - 壳子的博客
  然后点"确定",就新建了一幅"未标题—1"文档。(文档的尺寸可根据需要而定,此处只为演示)此文档在图层面板自动命名为背景,在图层窗口我们看到是空白的。

三.图片的拼合
步骤1: 打开素材1, 解锁,拖入背景层。刚拖入的图层被自动命名图层一,为了方便识别,我们改一下名称:在图层面板的“图层一”点右键-图层属性-弹出更改名称窗口-,改名"湖水"。如图:
步骤2:重复以上操作,将素材2拖入背景,改名为"鼋头渚"。如图:
步骤3:同样将素材3拖入背景,改名为"荷花"。三幅图拖入背景层后如图:


2010年06月17日 - 地狱壳子 - 壳子的博客
  步骤4:点击选定图层面板的"湖水",再点击"编辑"菜单—"变换"—"缩放",可调整其尺寸大小,调整完毕双击该图即可,用同样方法调整其他两幅,使三幅图的比例大小配置得当,图层的遮盖顺序从图层面板中可以看出是上层压下层,必要时可随时调整。拼合后如下图:
2010年06月17日 - 地狱壳子 - 壳子的博客

  至此图片拼合完毕

《音画制作入门》第四节

简单的溶图与调色

从第三节中可以看出,直接拼合的背景图很不理想,一是拼接的边缘十分生硬,二是色彩差异较大,不和谐,不经溶合及调色处理是难登大雅之堂的,下边就介绍一下溶图和调色的基本操作:

一.溶图

先将上面两张图片的边缘重叠(重合量根据接图需要而定),使用套索工具,在图片的边缘处画出选区,羽化20,按Delete删除。(注意:删除时要分两次进行,即在图层面板上选定上图时可删除上图选区,选定下图时才可删除下图选区)。如图:


2010年06月17日 - 地狱壳子 - 壳子的博客
  羽化并调整图幅及位置后的效果如下:
2010年06月17日 - 地狱壳子 - 壳子的博客
  羽化和调整的目的是让图片拼合过度自然,看不出边缘和拼接痕迹,这才是我们想要的效果。下面是整体效果,这里只是讲解方法,做得并不细。
2010年06月17日 - 地狱壳子 - 壳子的博客
  二.调色
拼接后如果色差较大,效果仍然不理想,或需要统一色彩。可以点击"图像"—"调整"—"去色",使图片先变成黑白色,然后再次执行"图像"—"调整"—"色彩平衡",只要滑动三个模块,就可以调出任何自己喜欢的颜色,使色彩得到统一,见下图:
2010年06月17日 - 地狱壳子 - 壳子的博客
  调色之后还可以添加其他素材,我在荷花之上添加了一个小姑娘,就称她为荷花仙子吧!记着抠图时要羽化,然后再用移动工具拖进,并放到适当的位置,见下图。
2010年06月17日 - 地狱壳子 - 壳子的博客

 

《音画制作入门》第五节

大图的分割

图片过大必然会影响打开速度,我们用PS就可以把它分割成若干份。在左侧的工具栏里有一个“切片选择工具”,右键点开,有两个选择项,选下面的“切片选取工具”如图:

 


2010年06月17日 - 地狱壳子 - 壳子的博客
  把鼠标移到画布上,右键选点“划分切片”。在弹出的窗口,设为水平划分为4片,(实际制作中可以随意划分)。如下图:
2010年06月17日 - 地狱壳子 - 壳子的博客

  现在我们看到做好的图被切割成了4份了。

《音画制作入门》第六节

ps生成文件的保存

打开菜单栏的文件,在下拉菜单中选“存储为web所用格式”如图:


2010年06月17日 - 地狱壳子 - 壳子的博客

  在弹出的存储选项窗口,设置文件类型、大小、品质:如图

 

在不损失图像品质的前提下,尽量压缩文件大小,以不超过100K为宜。各项设置好以后点“存储”,选择存储位置,【比如存到E盘】,命名为“荷花仙子”
打开E盘之后,我们可以看到两个文件,一个是web文件,一个是自动命名的images文档文件夹。
文件夹里存放的是切割好的4张图片,web文件里是网页应用的信息,点击web文件,就可以在本地浏览作品了,点击"查看"菜单,打开"源文件"就打开了记事本文件,在此代码文件中可以插入音乐代码(如第二节中所示代码的第十三行)、 flash特效(如第二节中所示代码的第十行)或其他显示代码,如此就可以上传了。


2010年06月17日 - 地狱壳子 - 壳子的博客
  

《音画制作入门》第七节

音画作品的发布

音画作品的发布可分两种情况:

第一种情况:自己没有空间的首先应当寻找或注册一个免费空间,用以上传自己 images文件夹中的相应图片。
例如 http://tinypic.com/ 就是一个免费上传图片和视频的空间,图片上传成功后就可取回地址,然后按如下几步进行:
1.打开web文件,点击"查看"菜单-"源文件",删除代码的前7行和后3行,
2.替换代码中所有图片的本地地址,如:"images/荷花仙子_01.jpg",
3.变更table行显示设置代码,如:变更前代码为:
<table id="__01" width="宽度数值" height="高度数值" border="0" cellpadding="0" cellspacing="0">

变更为:
<TABLE style="LEFT: -10px(视幅宽而定); WIDTH: 宽度px; POSITION: relative; TOP: 0px" cellSpacing=0 cellPadding=0 width="宽度数值" align=center border=0>
(注意:宽屏设置的网站发宽屏帖一般LEFT: -10px,窄屏设置的网站发宽屏帖一般LEFT: -125px)
4.根据需要插入音乐、flash特效、移动字幕等元素,经测试位置适当,显示正常后即可发帖
5.在本站发帖时如是直接复制打开web页面后的画面,可直接粘贴到文件发表的大白框中,如复制的是源代码,则要先点击大白框下面的"源代码"后。 再粘贴到大白框中,然后点一下"编辑",等画面出现后再点击"添加"按钮。如图:


2010年06月17日 - 地狱壳子 - 壳子的博客

  第二种情况:自己有空间的不但可以上传图片,也可以上传整个html文件,发布时代码如下:
<DIV style="LEFT: -10px(视幅宽而定); WIDTH: 宽度px; POSITION: relative; TOP: 0px"> <IFRAME marginWidth=0 marginHeight=0 src="已上传的网页地址" frameBorder=0 width=宽度数值 scrolling=no height=高度数值></IFRAME></DIV>

《音画制作入门》第八节

音画图的静态修饰与点缀

一幅完整、漂亮的音画作品常常需要进行多种修饰和点缀,修饰又可以分为静态的修饰(比如添加艺术边框、插图、割线、签名印章以及诗词或说明文字等)和动态的修饰(比如插入透明flash、移动字幕以及可以移动的画面等),以强化其美感,提高其欣赏性,这里先介绍一点静态修饰的常用方法:

一.边框的添加

  先把第四节中的第三幅图存储,进行如下操作(当然也可以在做背景主图之前最先做边框):
1、点击"文件"菜单--"新建",在新建对话框中设宽为1000,高为1700(为主图留边框200),然后点"确定"
2、点击"编辑"菜单--"填充",在填充对话框中可选定使用图案,点自定义图案的下拉三角,选编织(宽),再点确定,如下图所示:


2010年06月17日 - 地狱壳子 - 壳子的博客
  3、用选择工具将主图拖入,在背景图中用方向键调整好其位置
4、点一下背景图层,点击图像--调整--色彩平衡,在色彩平衡对话框中调整三个滑快设置与主图相配的色彩,然后点确定即可,见下图:
2010年06月17日 - 地狱壳子 - 壳子的博客
 

二.插图的添加

  比如要添加这幅小女子的图片,可按如下几步进行:
2010年06月17日 - 地狱壳子 - 壳子的博客
  1、单击"文件"-"打开",在打开对话框中找到所存图片的文件夹,选定所用图片,点击"打开"
2、选用磁性套索工具,设置羽化20,对比度10%,频率90,然后细心抠出所用身形,
3、点选图层1,选用移动工具将小女子拖入图中
4、点击"编辑"-"变换"-"水平翻转",然后利用方向键调整到适当位置溶入背景图中
5、如果感觉人物过于突出,可以在图层面板适当降低透明度,添加人物图后效果见:
http://star778.16789.net/index.asp?ActionX=ReadArt&NewsID=1836316

三.图案及贴件的添加

  音画帖常常需要插入一些图案或贴件用以美化作品,现以自定形状"云彩"为例,说明其用法和步骤:
1、先创建一个新图层
2、选点自定形状工具,在自定形状选项中,选点"定义的比例",如下图
2010年06月17日 - 地狱壳子 - 壳子的博客
  3、点按自定形状拾色器,点选云彩1,见下图:
2010年06月17日 - 地狱壳子 - 壳子的博客
  4、定义前景色并在图中点画便出现了云彩图形
5、使用方向键可放置到任意位置(也可也点击编辑进行随意变换),点选文字工具,可在图形中键入文字

四.文字的添加与修饰

  文字是音画帖不可缺少的元素,不管是题目、落款、诗词还是说明都离不开文字的表达,现举例说明其简单用法,比如例帖中的一首诗:“四面垂柳十里花,碧波荡漾连天涯,水天一色湖光美,荷仙抖妆似彩霞”。
1、为便于观察显现效果可适当调大主图的显示比例(如60%)并选定适当的添加位置
2、选点文字工具(横排)并设置文字选项,我这里设定为:华文行楷,36点,左对齐,显示色码#94773b
3、在图中选择适当位置和起始点点击鼠标,输入诗句,回车换行
4、点击图层菜单-图层样式-混合选项,在出现的图层样式对话框中选择"投影""外发光"及"斜面和浮雕"三项,然后点击确定,见下图:
2010年06月17日 - 地狱壳子 - 壳子的博客
当然,文字设置及图层样式中的各种选项均可自行选定,以达到不同的显示效果,此处只是简单举例而已。

《音画制作入门》第九节

音画图的动态修饰与调整

动态修饰主要是指插入一些透明flash素材,或是移动图片及字幕等,使画面动静结合,生动活泼,增加视觉效果。下面介绍一点基本方法和代码:
一、透明flash的插入(如:在天空插入四只飞翔的小鸟)
代码如下:<EMBED style="LEFT: 200; WIDTH: 696px; POSITION: absolute; TOP: 120; HEIGHT: 257px" align=right src=http://www.wosowoso.com/flash/11/2/woso7_flash_3.swf type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>

蓝色字体表示flash距左(left)200,距顶(top)120,flash尺寸为宽(WIDTH)696,高(HEIGHT)257;红色字体表示flash的地址及名称,使用时只要复制粘贴此段代码,更换flash的相应地址并调整好相关尺寸及位置就可以了。
值得注意的是由于各网站显示框架的不同,在网上发布时距顶(top)的数字需作相应的调整,否则显示结果会有一定偏差。

二、移动字幕的插入
代码如下:<DIV style="LEFT: 550px; TOP: 400px POSITION: absolute; "> <MARQUEE scrollAmount=3 direction=up width=220 height=150> <FONT style="FONT-WEIGHT: bold; FONT-SIZE: 20pt; COLOR: #94773b; FONT-FAMILY: 华文行楷" >
四面垂柳十里花<BR>碧波荡漾连天涯<BR>水天一色湖光美<BR>荷仙抖妆似彩霞<BR> </FONT></MARQUEE></DIV> 



四面垂柳十里花
碧波荡漾连天涯
水天一色湖光美
荷仙抖妆似彩霞

 
蓝色字体表示字幕距左(left)550,距顶(top)400,红色字体表示字幕尺寸为:宽(WIDTH)220,高(HEIGHT)150,移动速度为3级,移动方向向上;粉色字体表示字幕的文字为20pt,颜色为#94773b,字体为华文行楷,使用时只要复制粘贴此段代码,更换字幕所用文字,并调整好相关尺寸及位置就可以了。

三、移动图片的插入
这是一幅自抠的小船的图片,插入时代码如下:

<DIV style="LEFT: 100px; POSITION: absolute; TOP: 650px"> <MARQUEE scrollAmount=3 direction=left width=740 > <IMG height=66 src="http://star778.16789.net/domName/star778/20095225285762759.gif" width=56></MARQUEE> </DIV>
同样,使用时只要复制粘贴此段代码,更换图片地址,并调整好相关尺寸及位置就可以了。

编后语:
    本教材应几位朋友之邀而编写,仅以简单的实例为初学者引个路子而已,教材中的方法可举一反三,触类旁通,初学者可在学习过程中灵活发挥、随意变通。
    学习音画可以从摹仿和套改开始,但决不可就此止步,要作出高水平的音画作品没有ps的深厚功底和基本的代码常识是远远不够的,本人因水平有限,不妥之处在所难免,如有谬误,敬请各位朋友和老师及时指正,希望大家多提宝贵意见!。


  评论这张
 
阅读(83)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017