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

梅雪争春

梅须逊雪三分白 雪却输梅一段香

 
 
 

日志

 
 

【ps教程】ps大图音画教程  

2010-07-01 07:25:59|  分类: ps教程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

引用

玫瑰夫人【ps教程】ps大图音画教程之四

 

【ps教程】ps大图音画教程之四

 

【博客装饰】教您制作自己的播放器 - 玫瑰夫人 -

 

现在的音画已经很少用多层表格嵌套来实现各式边框效果,很多人都运用Photoshop(简称PS)

图片处理程序来做大图,作为音画的主背景(很多文字、小图、边框样式都融合在这个大图上中),

再加一些透明flash点缀,加上音乐播放器,就成为一个很大气的音画。但由于整张大图在网上

传输很慢,所以往往要切割成很多张小图,加快传输显示,再在读者浏览器上还原成大图,

ps的图片处理功能很强大,又具备切割图片,并自动生成html文件的功能,给用PS做大图音画

带来很大方便,下面简单介绍一下制作过程

做大图音画,如果整个大图传上来,文件大了不说,网友们肯定等N久才能看到全图。

所以切分图片是必须的.打开大图,点切片选取工具,设置如下图:

【ps教程】ps大图音画教程之四 - 玫瑰夫人 -

【ps教程】ps大图音画教程之四 - 玫瑰夫人 -

然后存储为Wep所用格式,设定保存图片的类型和品质;

保存(保存类型为HTML和图像),系统会自动生成网页;设置如图:

【ps教程】ps大图音画教程之四 - 玫瑰夫人 -

保存下来的图片和网页可以直接上传,无需再做代码编辑,

即使对代码不熟悉的人,用起来也很方便。如果需要增加背景或者边框,

只需把源文件复制粘贴上也就可以了,

简单、方便

在原来图片所在文件夹中会自动生成一个“Image"文件夹的一个html文件。如下图:

把这个自动生成的文件夹及html文件上传到网络某一空间上,再用网页引用代码:

<iframe frameborder=0 width=1000 height=2400 marginheight=0 marginwidth=0 scrolling=no src="html文件网址"></iframe>,发到论坛或其他网站即可。当然,自动生成有html文件只是用html把切割成碎片的大图,还原显示,如果要加透明flash和音乐播放器,还得再改html文件后再上传。

用ps的生成输出,自动生成html文件,少了我们编写图片显示代码的麻烦。很是省力。

朋友可以多多练习。

做单幅音画也可以用此方法生成html文件,与图片切割与否无关,再说图片切割后,

传输更快,还是切成较小几块为宜

===

定位大图音画制作方法

首先我们来看一下展示:

请点击浏览:最美的距离

1:我们先看一下全部语言代码

<TABLE id=table1 style="LEFT: -150px; WIDTH: 980px; POSITION: relative; TOP: 0px" cellSpacing=45 cellPadding=0 align=center background=http://bbs.680.cn/UploadFile/2005-10/20051017202357388.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE id=table1 style="LEFT: 0px; WIDTH: 980px; POSITION: relative; TOP: 92px; HEIGHT: 516px" borderColor=#ff9900 height=516 cellSpacing=4 cellPadding=6 bgColor=#000000 border=8>
<TBODY>
<TR>
<TD>
<TABLE style="WIDTH: 733px; HEIGHT: 760px" height=760 width=733 background=http://lhsz.viptwo99.25idc.com/冰/最.jpg border=0>
<TBODY>
<TR>
<TD>
<P></P>
<P align=right></P></TD></TR></TBODY></TABLE></TD>
<TD width="30%">
<MARQUEE scrollAmount=1 scrollDelay=100 direction=down behavior=slide width=170 height=770>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=up behavior=slide width=170 height=770><FONT style="FONT-SIZE: 12pt; FILTER: shadow(color=#333333,direction=180); WIDTH: 400%; COLOR: #ff9900; LINE-HEIGHT: 150%; HEIGHT: 648px"><B>
<P>最美的距离<BR>不是<BR>生与死<BR>而是<BR>我就站在你的面前<BR>而你却不知道我爱你<BR><BR>最美的距离<BR>不是<BR>我就站在你面前<BR>你却不知道我爱你<BR>而是<BR>明明知道彼此相爱<BR>却不能在一起<BR><BR>最美的距离<BR>不是<BR>明明知道彼此相爱<BR>却不能在一起<BR>而是<BR>明明无法抵挡这种思念<BR>却还得故意装做<BR>丝毫没有把你放在心里<BR><BR>最美的距离<BR>不是<BR>明明无法抵挡这种思念<BR>却还得故意装做<BR>丝毫没有把你放在心里<BR>而是<BR>用冷漠的心对爱你的人<BR>掘了一条无法跨越沟渠</P></B></FONT></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>
<DIV></DIV></TD></TR></TBODY></TABLE>
<EMBED src=http://xiuxiu1024.16789.net/s-helpSite/domName/xiuxiu1024/2007211493278186.wma hidden=true type=audio/mpeg autostart="true" loop="true"></EMBED><P><EMBED style="RIGHT: 0px; WIDTH: 1000px; POSITION: absolute; TOP: 700px; HEIGHT: 650px" align=left src=http://zy1209.go3.icpcn.com/flash1/228768_10205207.swf type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>
<P>
<P><EMBED style="RIGHT: 0px; WIDTH: 1000px; POSITION: absolute; TOP: 700px; HEIGHT: 650px" align=right src=http://zy1209.go3.icpcn.com/flash1/11.swf type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>
<P><EMBED style="RIGHT: 0px; WIDTH: 1000px; POSITION: absolute; TOP: 600px; HEIGHT: 450px" align=right src=http://zy1209.go3.icpcn.com/flash1/11.swf type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> </P>

现在我们来分析一下代码在各部位的作用

1:大图音画的起始代码

<TABLE id=table1 style="LEFT: -150px; WIDTH: 980px; POSITION: relative; TOP: 0px" cellSpacing=45 cellPadding=0 align=center background=http://bbs.680.cn/UploadFile/2005-10/20051017202357388.jpg border=0>
<TBODY>
<TR>
<TD width="100%">

分析:

LEFT: -150px;调整网页整体的左右位置,负数越大向左,反之。

WIDTH: 980px 整体网页的宽度,为980像素

TOP: 0px 边框到顶部的距离为“0”

cellSpacing=45 边框的宽度,可以为“0”

background= 等号后面加背景图片网址

2:边框语法代码

<TABLE id=table1 style="LEFT: 0px; WIDTH: 980px; POSITION: relative; TOP: 92px; HEIGHT: 516px" borderColor=#ff9900 height=516 cellSpacing=4 cellPadding=6 bgColor=#000000 border=8>
<TBODY>
<TR>
<TD>

3:图片展示语法代码

<TABLE style="WIDTH: 733px; HEIGHT: 760px" height=760 width=733 background=http://lhsz.viptwo99.25idc.com/冰/最.jpg border=0>
<TBODY>
<TR>
<TD>
<P></P>

4:大图起始,边框,图片的休止语法代码

<P align=right></P></TD></TR></TBODY></TABLE></TD>
<P align=right>代表居右

5:右边表格的大小

<TD width="30%">  文字展示的空间宽度,百分比越大右边越宽。

6:设置文字展示语言属性

<MARQUEE scrollAmount=1 scrollDelay=100 direction=down behavior=slide width=170 height=770>

7:设置文字运动的语言属性

<MARQUEE scrollAmount=1 scrollDelay=100 direction=up behavior=slide width=170 height=770><FONT style="FONT-SIZE: 12pt; FILTER: shadow(color=#333333,direction=180); WIDTH: 400%; COLOR: #ff9900; LINE-HEIGHT: 150%; HEIGHT: 648px"><B>
<P>最美的距离<BR>不是<BR>生与死<BR>而是<BR>我就站在你的面前<BR>而你却不知道我爱你<BR><BR>最美的距离<BR>不是<BR>我就站在你面前<BR>你却不知道我爱你<BR>而是<BR>明明知道彼此相爱<BR>却不能在一起<BR><BR>最美的距离<BR>不是<BR>明明知道彼此相爱<BR>却不能在一起<BR>而是<BR>明明无法抵挡这种思念<BR>却还得故意装做<BR>丝毫没有把你放在心里<BR><BR>最美的距离<BR>不是<BR>明明无法抵挡这种思念<BR>却还得故意装做<BR>丝毫没有把你放在心里<BR>而是<BR>用冷漠的心对爱你的人<BR>掘了一条无法跨越沟渠</P></B></FONT></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>
<DIV></DIV></TD></TR></TBODY></TABLE>

8:插入背景音乐

<EMBED src=http://xiuxiu1024.16789.net/s-helpSite/domName/xiuxiu1024/2007211493278186.wma hidden=true type=audio/mpeg autostart="true" loop="true"></EMBED>

9:插入定位透明FLASH语言

<P><EMBED style="RIGHT: 0px; WIDTH: 1000px; POSITION: absolute; TOP: 700px; HEIGHT: 650px" align=left src=http://zy1209.go3.icpcn.com/flash1/228768_10205207.swf type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>
<P>


 

【博客装饰】教您制作自己的播放器 - 玫瑰夫人 -

【ps教程】ps图文制作教程之二 - 玫瑰夫人 -

 

【博客装饰】教您制作自己的播放器 - 玫瑰夫人 -

 

 

本人有幸参加网易主办的网聚油菜力量大赛,

方便的朋友可以帮我投票!点击下面图片即可!感谢大家!

ion=all&nickName=玫瑰夫人&orderField=numB" target=_blank<

ion=all&nickName=玫瑰夫人&orderField=numB" target=_blank<【ps教程】ps图文制作教程之二 - 玫瑰夫人 -   ion=all&nickName=玫瑰夫人&orderField=numB" target=_blank<

 

 

相关链接:

【ps教程】ps抠图教程总汇  

【素材代码】玫瑰夫人网易博客素材代码总汇(1)

玫瑰夫人图文音画精选篇(1)

【播放器代码】最新播放器大全

【素材代码总汇】网易博客素材汇总模块代码

【FW教程】Fireworks制作超炫动态签名

【ps教程】教您制作图文音画

Photoshop动画教程:打造美丽春天里飞舞的蝴蝶

【ps教程】ps大图音画教程之四

【ps教程】ps图文制作教程之二

【ps教程】教您制作图文音画

【ps教程】孔雀开屏羽毛扇的制作

【ps教程】教您制作图文音画

Photoshop钢笔工具的使用详解

【ps教程】PS笔刷设置详解:效果选项

PS笔刷设置详解:异形笔刷 散布

【ps教程】窗格效果制作

PS笔刷设置详解:笔刷间距 圆度和角度 动态形状

【ps教程】ps教程总汇之六

【ps教程】大图音画教程——给初学者

【ps教程】ps教程总汇之五

【u5教程】U5制作超炫动态签名教程之三

【ps教程】ps文字特效制作教程总汇

【ps教程】ps文字特效制作教程总汇

【ps教程】ps大图音画教程之四

【ps教程】ps图文制作教程之二

用PS制作音画大图

大图分割成小图的办法

大图制作中的色阶和亮度调整

大图制作中,小图的边缘融合

 

 【音画】没有人比你更爱我   玫瑰夫人图文音画精选篇(1) 玫瑰夫人网易博客素材代码总汇(1)
 【播放器代码】最新播放器大全  网易博客素材汇总模块代码  ps美容,磨皮,抽丝,音画图文制作
 【ps教程】ps文字特效制作教程总汇  【ps教程】ps大图音画教程之四  U5制作超炫动态签名教程之三
 【ps教程】ps图文制作教程之二  超炫动态个性签名(22)  【ps教程】ps教程总汇之六
 【ps教程】ps教程总汇之五 ps教程总汇(3)——给初学者 【ps教程】ps经典教程3000例之二
 【ps教程】给图片加边框教程集合(3) 【U5制作超炫动态签名教程之三  【U5代码】U5教程模块代码
 【U5代码】U5教程模块代码 【分割线素材】精美分割线素材(27)

【分割线素材】古典分割线

 

【FW教程】Fireworks制作超炫动态签名

【ps教程】教您制作图文音画

Photoshop动画教程:打造美丽春天里飞舞的蝴蝶

【ps教程】ps大图音画教程之四

【ps教程】ps图文制作教程之二

【ps教程】教您制作图文音画

【ps教程】孔雀开屏羽毛扇的制作

【ps教程】教您制作图文音画

Photoshop钢笔工具的使用详解

【ps教程】PS笔刷设置详解:效果选项

PS笔刷设置详解:异形笔刷 散布

【ps教程】窗格效果制作

PS笔刷设置详解:笔刷间距 圆度和角度 动态形状

【ps教程】大图音画教程——给初学者

【u5教程】U5制作超炫动态签名教程之三

【ps教程】ps文字特效制作教程总汇

【ps教程】ps调色教程总汇 

【ps教程】ps溶图教程大集合

 

【博客装饰】教您制作自己的播放器 - 玫瑰夫人 -   '

 

【博客装饰】教您制作自己的播放器 - 玫瑰夫人 -

 

【博客装饰】教您制作自己的播放器 - 玫瑰夫人 -

 

【博客装饰】教您制作自己的播放器 - 玫瑰夫人 -

 

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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