天民博客

欢迎光临.多谢指教!

日志

关于我

天民

(1)对圈子邀请表示感谢,未能加入的希圈主谅解! (2)对您的光临,留言,点评在此表示感谢,未能及时回帖表示歉意! (3)凡属下类帖必复---即"有问必答","有需必助",

文章分类

全屏大图音画制作方法与步骤

2010-05-10 10:00:19| 分类：默认分类 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

全屏大图音画制作方法与步骤 <转帖>

音画分为以下几种类型：

第一种：框图音画。主要通过html语句实现多层图框，在图片上附加透明flash美化，配音乐。

第二种：特效音画。主要通过一些特效代码，实现图片动态效果，近似动画场景，配音乐。

第三种：大图音画。通过photoshop制成大图，将其进一步制成网页，再附加透明flash美化，配音乐。

第四种：电子杂志。使用制作杂志的软件，将图片编辑成册，透明flash以及音乐，用软件可导入自动生成。

第五种：单幅音画。一般高度低于3000的大图音画，可视为单幅音画。

从音画的发展来看，由于前两种具有以下特点，对制作者来说，既不易于掌握，又比较费心劳神，所以现在已很少有人使用。

1、框图音画对代码要求非常严，构建层层框架的代码，常因错一个字符就会乱码，无法正常显示。

2、特效音画对代码要求更严格，代码的编排以及相应处图片的更换，都需要细心和耐心，若有字符错误，也是无法正常显示。

现在网络流行的音画作品，后三种居多，因它们具有易操作，易掌握的特点，没有繁琐的代码编排，只需熟练使用软件便可，但也有相应的难点。

1、必须会使用photoshop，因为制作图片和实现网页都要借助于它。

2、photoshop功能较强大，要完全掌握并非易事，不过循序渐进，图片制作水平提高了，制作出的网页也会更美观。

第一步用photoshop软件制作大图

1、首先打开photoshop，选择“文件”下拉菜单中的“新建”。

2、在“新建”对话框中，设置宽度（自定尺寸），高度（自定尺寸），分辨率（72），颜色模式（RGB），背景内容（透明色）。

注：宽度和高度，一般用像素作单位。分辨率单位为像素/英寸，颜色模式选择8位就可以。

在此对话框的“高级”里，还可以设置“颜色配置文件”和像素长宽比，可分别设置成prophoto RGB 和方形。

这些设置都完成了，为了以后制图方便，可以点击“存储预设”保存。

3、制做图片，自由发挥。（具体步骤略）

4、图片做好保存时，最好是psd格式，便于各图层修改。

5、由于图较大，不便于上传到网上，也不易打开，所以必须使用切片工具，将其切割成一些小图。

6、选择photoshop“文件”下的“存储为web所用格式”，将大图自动生成为html网页。

7、为了网页的像素品质高，存储为网页格式时，一些相关设置必须注意，在“存储为web所用格式”对话框中，具体参数设置如下：

A、预设：优化的文件格式（jpeg），压缩品质（最佳），“连续”“ICC配置文件”处打勾，品质（100），模糊（0），杂边（无）。

B、图像大小：品质选择“两次立方（较平滑）”

8、存储为网页格式时，出现“将优化结果存储为”对话框，参数选择如下：

A、文件名：自定，后缀为html

B、保存类型：HTML和图像（html）

C、设置：背景图像

D、切片：所有切片

9、保存后，会出现html文件和images文件夹，images文件夹内所有图片都是切割好的图片，用于html文件调用。

注：一定要先将大图切割，再进行存储为网页这一步。

第二步用frontpage软件制作网页

1、首先用frontpage打开你用photoshop存储而成的网页。

2、在代码<title>******</title>中，把星号换为自己为音画网页取的名字。

3、在这段代码 <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 中，把颜色代码#FFFFFF(网页背景色)换成自己需要的颜色代码。

4、为了音画的美观，可以在<title>******</title>后面加上滚动条代码：

<STYLE>

BODY

{SCROLLBAR-FACE-COLOR: #d7c9e2;

SCROLLBAR-HIGHLIGHT-COLOR: #d7c9e2;

SCROLLBAR-SHADOW-COLOR: #6f6ba6;

SCROLLBAR-3DLIGHT-COLOR: #d7c9e2;

SCROLLBAR-ARROW-COLOR: #d7c9e2;

SCROLLBAR-TRACK-COLOR: #d7c9e2;

SCROLLBAR-DARKSHADOW-COLOR: #d7c9e2;

SCROLLBAR-BASE-COLOR: #d7c9e2}

</STYLE>

同样，这段语句中的颜色代码#d7c9e2（滚动条颜色），可以根据自己音画的色彩更换。

5、由于网页是用photoshop自动生成代码的，所以图默认是左对齐。找到这段代码语句

<table id="__01" width="1000" height="600" border="0" cellpadding="0" cellspacing="0">，在它的前面加一句<div align="center">即可使图居中。这一步也可以不做。

6、进行到这一步，再加上音乐，简单的音画就基本完成。

7、为了音画更具感染力，有的人点缀一些透明flash。添加flash效果的代码语句，可全屏添加，可单图添加。由于大家使用的电脑不尽相同，常因分辨率不同，而使全屏代码添加的flash出现一定的偏差，建议用单图添加flash。具体根据音画实际情况而定，这里不作详解。

第三步用ftp软件上传网页

1、首先要有稳定的空间，能上传自己的音画。网络有很多免费空间，一些论坛也提供个人空间，自己也可购买一个空间。

2、使用ftp上传自己的音画，到自己的个人空间。

3、根据空间的音画存放路径，找出自己的音画网址。

为了便于学习，这里提供几个网址：

第四步网站（论坛）发布音画

1、使用以下代码发布音画：

<p align=center><A href="音画网址" target=_blank ><FONT color=#f70968 size=6>点击全屏观看</FONT></A></P><BR><BR>

<DIV style="LEFT: -215px; WIDTH: 1000px; POSITION: relative; TOP: 80px"><IFRAME marginWidth=0 marginHeight=0 src="音画网址" frameBorder=0 width=1000 scrolling=no height=600>

</IFRAME></DIV><BR><BR><BR><BR><BR><BR><BR>

语句中相关数据，可根据论坛的具体情况进行调整，使音画居中，文字颜色和谐。语句中的高度和宽度数据，可根据自己的音画进行调整。“音画网址”处，填写自己音画的网址。

2、论坛发贴时，注意要选择在html模式下进行编辑，普通模式下编辑发出的只是代码。用这段html代码发贴时，不能有字符错误，否则会无法正常显示音画。

直接使用图片拼合代码制作大图音画

一个好的大图音画作品的制作，图片是作品的灵魂，好的作品主要看图片处理的艺术效果，但由于制作出来的图片过于大，在发表以后很难打开，那么就要把做好的大图片音画作品进行若干份的切割。经过切割以后的图片发表以后，就可以很快地在网站打开。

经过切割的若干份图片，需要用到HTML语言，也就是我们常说的代码了。以下是大图音画作品拼合的使用代码。以8张图片插入为例：

<TABLE style="LEFT: -120px; WIDTH: 1000px; POSITION: relative; TOP: 0px" cellSpacing=0 cellPadding=0 width=1008 align=center border=0>

<TBODY>

<TR>

<TD><IMG height=图片高度 src="第一张图片网址" width=1000></TD></TR>

<TR>

<TD><IMG height=图片高度 src="第二张图片网址" width=1000></TD></TR>

<TR>

<TD><IMG height=图片高度 src="第三张图片网址" width=1000></TD></TR>

<TR>

<TD><IMG height=图片高度 src="第四张图片网址" width=1000></TD></TR>

<TR>

<TD><IMG height=图片高度 src="第五张图片网址" width=1000></TD></TR>

<TR>

<TD><IMG height=图片高度 src="第六张图片网址" width=1000></TD></TR>

<TR>

<TD><IMG height=图片高度 src="第七张图片网址" width=1000></TD></TR>

<TR>

<TD><IMG height=图片高度 src="第八张图片网址" width=1000></TD></TR>

</TBODY></TABLE>

<EMBED src=此处加入音乐地址 hidden=true type=audio/mpeg loop="true" autostart="true"></EMBED>

代码使用说明：

1、代码的起始部分：

TABLE style="LEFT: -120px; WIDTH: 1000px; POSITION: relative; TOP: 0px" 对大图音画贴的发贴是个关键。其属性如下：

LEFT: -120px; 定位网页整体的左右位置，俗称为横坐标。给出的数值越小，它越向左偏移，给出的数值越大它就越往右移动。

WIDTH: 1000px；表示的是整体网页的展示宽度，因为通常情况下电脑屏幕的展示宽度为1024像素，因此目前所制作的图片最大宽度设置为1000px。

POSITION: relative 表示为设定网页相对以本文档面显示。

TOP: 0px 表示为边框距顶部的距离。通常情况下设置为0。数值给的越大，它越往下移动。

2、图片插入代码：

<TR>

<TD><IMG height=图片高度 src="第一张图片网址" width=1000></TD></TR>

表示为每层图片的插入。

在图片插入这组代码中，只需要在每层图片的地方替换进去经过切割的图片地址就可以，但一定要注意图片的顺序不能弄错。如果替换的图片没有这么多，可以在替换完所有图片以后，把多余的图层代码删掉即可。如果不够用，也可以对图层进行复制，然后再粘贴进去。图片高度和宽度根据图片实际尺寸写入。

3、音乐插入代码：

<EMBED src=此处加入音乐地址 hidden=true type=audio/mpeg loop="true" autostart="true"></EMBED> 可以插入MP3、WMA格式。

大图音画中FLASH动画拼合代码的使用

学会大图音画的拼合后，那么动画的拼合相对来说就很容易了，只要将插入图片的地方替换成FLASH的地址即可。

FLASH动画拼合和大图音画的拼合方法基本相同，其代码以8张图片插入为例：

<TBODY>

<TR>

<TD>

<P align=center><EMBED src=第一个FLASH动画网址 width=FLASH宽度 height=FLASH高度 type=application/octet-stream wmode="transparent"></P></TD></TR>

<TR>

<TD>

<P align=center><EMBED src=第二个FLASH动画网址 width=FLASH宽度 height=FLASH高度 type=application/octet-stream wmode="transparent"></P></TD></TR>

<TR>

<TD>

<P align=center><EMBED src=第三个FLASH动画网址 width=FLASH宽度 height=FLASH高度 type=application/octet-stream wmode="transparent"></P></TD></TR>

<TR>

<TD>

<P align=center><EMBED src=第四个FLASH动画网址 width=FLASH宽度 height=FLASH高度 type=application/octet-stream wmode="transparent"></P></TD></TR>

<TR>

<TD>

<P align=center><EMBED src=第五个FLASH动画网址 width=FLASH宽度 height=FLASH高度 type=application/octet-stream wmode="transparent"></P></TD></TR>

<TR>

<TD>

<P align=center><EMBED src=第六个FLASH动画网址 width=FLASH宽度 height=FLASH高度 type=application/octet-stream wmode="transparent"></P></TD></TR>

<TR>

<TD>

<P align=center><EMBED src=第七个FLASH动画网址 width=FLASH宽度 height=FLASH高度 type=application/octet-stream wmode="transparent"></P></TD></TR>

<TR>

<TD>

<P align=center><EMBED src=第八个FLASH动画网址 width=FLASH宽度 height=FLASH高度 type=application/octet-stream wmode="transparent"></P></TD></TR>

</TBODY></TABLE>

<EMBED src=此处加入音乐地址 hidden=true type=audio/mpeg loop="true" autostart="true"></EMBED>

这里提供的音乐插入代码是支持FLASH格式的，可以插入MP3、WMA格式。

评论这张

转发至微博

阅读(1907)| 评论(25)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_080069082084087068086082084095086085085074080095095075',
              blogTitle:'全屏大图音画制作方法与步骤 ',
              blogAbstract:'<DIV\>  <TABLE borderColor=\"#000000\" cellSpacing=\"0\" cellPadding=\"0\" bgColor=\"#000000\" border=\"15\" \>  <TBODY\>  <TR\>  <TD borderColor=\"#ffffff\" cellpadding=\"0\"  cellspacing=\"0\"  border=\"1\"  \>  <DIV style=\"FONT-SIZE: 16px;\"  \>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT face=\"宋体\" color=\"#ffffff\" size=\"4\" \><STRONG\></STRONG\></FONT\> </P\>  <P style=\"TEXT-INDENT: 2em;\"  \></P\>  <CENTER\><FONT face=\"隶书\" color=\"#ffffff\" size=\"6\" \><STRONG\>全屏大图音画制作方法与步骤</STRONG\></FONT\></CENTER\>  <CENTER\><FONT face=\"隶书\" color=\"#ffffff\" size=\"5\" \><STRONG\><转帖></STRONG\></FONT\></CENTER\>  <P\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT face=\"宋体\" color=\"#ffffff\" size=\"4\" \><STRONG\></STRONG\></FONT\> </P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT face=\"宋体\" color=\"#ffffff\" size=\"4\" \><STRONG\>音画分为以下几种类型：</STRONG\></FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT face=\"宋体\" color=\"#ffffff\" size=\"3\" \></FONT\></P\></DIV\></TD\></TR\></TABLE\></DIV\>',
              blogTag:'',
              blogUrl:'blog/static/23494998201041010019659',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1316880338771,
              publishTime:1273456819659,
              permalink:'blog/static/23494998201041010019659',
              commentCount:25,
              mainCommentCount:25,
              recommendCount:4,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'(1)对圈子邀请表示感谢,未能加入的希圈主谅解!\r\n(2)对您的光临,留言,点评在此表示感谢,未能及时回帖表示歉意!\r\n(3)凡属下类帖必复---即\"有问必答\",\"有需必助\",',
              hmcon:'0',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/23494998201041010019659">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

天民博客

导航

日志

全屏大图音画制作方法与步骤

历史上的今天

最近读者

热度

评论

页脚