Photoshop打造超酷春天背景网页布局Word文档格式.docx
- 文档编号:460690
- 上传时间:2023-04-29
- 格式:DOCX
- 页数:22
- 大小:3.16MB
Photoshop打造超酷春天背景网页布局Word文档格式.docx
《Photoshop打造超酷春天背景网页布局Word文档格式.docx》由会员分享,可在线阅读,更多相关《Photoshop打造超酷春天背景网页布局Word文档格式.docx(22页珍藏版)》请在冰点文库上搜索。
一个版面,少则几十层,多则上百层,不分开图层组管理就很乱,影响工作效率,更影响多人合作。
c、制作的时候最好尽量把文字内容也放上去,可以更接近实际效果,等切图的时候隐藏这些图层。
d、标题样式。
一个版面除了头、底要特别制作外,中间的部分应该考虑制作三种标题样式:
左栏、右栏、通栏,也可以统一风格。
还要考虑表头背景、一些常用到的边框等。
笔者喜欢把许多的边框样式用js作了一个样式包,随时调用,而标题样式我是使用flash来做的一个样式,使用不同的参数调用,就可以有不同的样式和颜色,改版的时候就改一个js文件和flash文件,做版面的时候会节省一些时间。
e、常用的按钮样式。
常用的按钮其实不用在版面制作的时候做的,可以找回原来的按钮图片一个一个修改。
f、特殊字体的使用。
不管是链接还是内容,笔者都主张尽量使用样式表来控制字体样式,确实要用到不常用字体的可把文字制作成图片,这一类的图片要适当使用,因为使用了图片,对搜索引擎的访问是无益的。
g、像素图。
尽量使用像素处理,例如一些边框、小图标,会使图片的字节数大大减少,显示快,容易透明处理。
3、切图(即切片):
切图要在FW、Imageready或直接在Photoshop中完成,通常是先要把完稿的作品保存,最好还要做一个备份,然后跳转到Imageready工作。
a、有些人切图时要合并图层,这是没有必要的,图层合并了,以后修改和编辑都麻烦,而且有时候切图还要按一些图层的大小定位来做,例如要切出一个468x60的广告横标,你可以把这个横标的图层载入选定区域(loadselection),然后从菜单select把选定区域转换成切片(createslicesfromselection)。
b、不要把整个版面同时切图。
一般来说,头部的色彩很丰富,而中间和底部的色彩比较少。
例如一个版面头部的切片,调色板可能要256种颜色,而中间和底部只要18色就能搞定,如果同时切片,就变成同一个调色板,中间的部分也使用了256色,就会使文件大小增加,但如果折中,让头部256色减少为128色或32色,又会影响效果。
所以要分别处理,方法是在PS中分别选择头部、中间(中间有时候还可以分出几个板块)、底部,裁切,另存为几个不同文件,然后切图。
c、切图要考虑清楚,你准备使用图层来定位还是使用表格来定位,不同的html图片分割是不同的。
例如新阳江网站的两边灰色框,如果使用图层定位来做,背景图只要切一个高1像素宽791像素的背景图,而如果使用表格定位,就要切出左边背景和右边背景。
d、用gif还是用jpg:
在同一个文件中切图,Photoshop是允许不同的切片使用不同的文件格式的,但gif格式和jpg格式结合的地方,有时候肉眼都能可能看出颜色的差别,所以同一部分的切图最好使用同样的格式。
颜色较少、较单纯的图片,文字图片,从矢量图转过来的小图标、边框背景等图片,一般用gif格式比较好,文件小,颜色不失真。
摄影图片、三维软件做出来的彩色立体文字,一般用jpg格式。
如果切片是准备做flash用的,文字部分和矢量图标等就不用了,在flash中使用字体和矢量图比做成位图占用的字节小,动画效果更流畅。
e、有链接的图片:
有链接的图片处理方法很多,你可以每个链接切一个图片,也可以切一个大图,在网页编辑器里面编辑的时候添加链接热区。
现在更好的做法是使用文本链接,把图片变成背景就行了。
图片链接还可以用flash来做,可以有很酷的动态效果,切一个大图,倒入flash文件中作为背景层,上面添加透明按钮就可以了。
要注意的是flash里面的图片,可能会与页面其他图片的色调有些差异,位置也有一个像素的位移,一定要小心处理。
使用了图片或flash作链接,对搜索引擎支持都不大好,作为补救措施,你可以在页面其他内容使用一些文本链接引导搜索引擎找到这些页面。
二、用Photoshop制作网页模板
用PS制作网页模板,应该说灵活性非常大。
绝大部分PS的技巧都可以用到这里,只要不违背网页制作的一些基本原则,你可以尽情地创作。
本节我们只给出一些实例,希望通过这些例子,大家能掌握好用PS制作网页模板的一些基本技法。
实例1:
Photoshop打造春天背景的网页布局
任务:
制作如下图所示的网页布局。
步骤:
1、新建立一个淡蓝色背景的文档,并且使用矩形选区制作一个区域,填充为蓝色。
2、背景色设置为白色,然后执行分层云彩滤镜。
3、设置画笔:
4、设置前景色为#158223,背景色为#ADE48C,绘制一些草的图形。
5、使图形比较真实,你可以多绘制一些。
6、将多余的一些删除掉。
7、复制草的图层,然后将图层模式改为正片叠底,效果如下。
8、设置草这层的色相为-24,进行一下高斯模糊,设置半径为1.2。
9、绘制一个圆形选区,填充为黄色,然后进行羽化,半径为9:
10、用自由变形工具绘制黄色的蝴蝶,然后绘制一选区,设置前景色为亮黄色,背景色为暗黄色进行线性渐变填充:
11、多复制蝴蝶层几次,适当调整亮度和对比度,效果如下:
12、创建一个长的矩形选区,按Ctrl+J复制一层,然后调整使之变暗一些:
13、然后制作一个暗一些的矩形区域,你就可以任意设置输入一些内容了:
实例2:
Photoshop简单酒吧网页制作实战
制作一酒吧的简单网页,最终的效果图如下:
1、选择文件>
新建(CTRL+N),在对话框里设置参数。
如图1。
2、新建一图层,现在先从背景开始,首先设好渐变的颜色(这里我们用红色和黑色作为背景色,颜色可以根据自己的喜好调定。
)在图中按住shift+鼠标左键向下做直线拉伸。
3、设好背景颜色后,用加深和减淡工具进行编辑,带点布纹的感觉。
4、在用选框工具(快捷键m)在右上角框选出相应的范围后,按住ctrl+j单独拷贝一个图层。
在对它进行样式的编辑,参数如下图。
5、选择图层2,用上面一样的方法,框选出相应的范围后,按住ctrl+j单独拷贝一个图层。
在对它进行样式的编辑。
6、接着要开始对刚才框选编辑后的图层进行加深减淡的处理。
7、新建图层5,现在对图象进行修饰,用框选工具选取适当范围,如下左图所示填充(R、G、B)=(255,2,252)。
再双击图层5进行样式编辑。
参数如下图中的右图。
8、将此图层的透明度调到百分之40。
9、新建一图层,选取范围后填充(R,G,B)=(255,2,252)。
进行如下图所示的样式编辑,再将此图层的透明度调到0。
10、输入文字,如本例为“黑瞳迪吧”,输入其他必要的文字。
11、对字体进行加工处理,主题黑瞳进行修饰,双击图层到样式里编辑。
参数如下图,将此图层的透明度调到0。
12、找个一些相关的图片放入(但要符合你给予的主题,可不要随便找一些图片哦。
),在将图片放到样式里编辑。
如图:
13、如果觉得还不够的话就再加一点小修饰,如最终效果图中的右下角。
但要注意不要过多,并可以适当地调整透明度。
三、Photoshop打造网页相册
如下图所示的这种网页相册在个人网站中极为常见,当点击缩略图时对应的图片就在大图处显示出来。
用通常的静态网页制作方法做这样的相册很烦琐,要手动去处理众多的图片、把它们统一裁减、然后一张张地放到制作好的表格里去的话,工作很大。
其实用PhotoshopCS其实很容易实现这样的网页相册。
注意:
这里所说的PhotoshopCS要用完整安装版的,目前流传的绿色版、精简版好像都把这个功能“精简”了。
操作步骤如下:
1、
图片收集
首先准备好自己中意的图片,在“我的文档”新建文件夹命名“原始”,把这些图片放到文件夹内,再在“我的文档”里建立一个文件夹命名为“像册”作以后生成相册用。
2、
WEB照片画廊的设置
步骤1:
整理好要制作成网页像册的图片,打开PHOTOSHOPCS点“文件——自动——WEB照片画廊”。
步骤2:
完成步骤1后会弹出对话框:
步骤3:
详细的设置—样式部分。
这里的“样式”就是PS自带的网页像册的样式,一共有8种样式,更多样式还可以去PHOTOSHOP网站上去下载。
这八种已有的网页相册样式分别有:
步骤4:
本例选择了“居中桢1—基本”这个样式来给大家讲解(其他形式大家可以参考本例自行练习),接下来就是源图片的选择了。
点“源图象—使用”这里让你选择你要做网页像册的图片,点“浏览”,选择“我的文档”里的“原始”文件夹内的图片;
在“浏览”的下面有“目的”,就是说自动生成的网页像册要放到什么地方,我们选择“我的文档”里的“像册”文件夹。
步骤5:
点“选项”会有“常规、横幅”等6种样式,在这里,我们选择“横幅”,如果有兴趣的话,你也可以多做几次尝试,选者自己最喜欢的样式。
网站都是有名称的,接下来在“网站名称”写上自己喜欢的名称、摄影师以及相关信息,时间这一栏PS是根据你电脑的本地时间来决定的,所以你要修改成你拍摄这些照片的时间。
步骤6:
完成以上的设置后,如果你的图片比较多的话,建议关闭一些程序减少系统资源的占用,然后点对话框右上角的“好”,这个时候PS就开始“发疯”似的将你要做成网页像册的照片进行裁减处理,图片多的话会需要一段时间。
步骤7:
当PS处理完这些图片后,会有片刻的停顿,之后会自动弹出已经做好的网页像册,来看看效果。
如下图所示。
利用PS这个实用的小功能,即使不会HTML语言、不懂得网页制作软件,照样能做出不错的网页像册,点左边的小图,在右边就会出现大图,在照片比较多的情况下,是比较方便的。
如果你懂得网页制作的话,可以用DW或FP自己更换PS自带样式的颜色和布局等等。
下面来看一下PS都生成了些什么文件,打开名字为“像册”的文件夹,Image是装中图的文件夹;
THUMBNAILS是放置略缩图的文件夹;
UERS……这个文件是配置文件;
INDEX是这个网页像册的主页,想看图片的话,双击它就可以;
PAGES是所有图片的内嵌文件。
如果你有网站空间的话,将下面的6个文件及文件夹上传到空间里,就可以和好朋友们一起分享快乐,毕竟这是自己做出来的网页像册,相比大网站提供的像册服务更有意义。
四、模板的使用
如果你熟悉PS但不会网页制作工具,是不是不能做出精美的网页呢?
答案是可以的,我们用PHOTOSHOP的“保存图片的WEB功能”就可以轻松实现。
不会画表格?
可以在PS上做表格,总之自己想象中的网站是什么样的、什么颜色的、什么风格的等等,我们像前面介绍的一样把这些想法当一张效果图制作出来,裁剪好,只需要一个步骤,PS就会帮我们自动生成一个网页,并且无需懂得HTML代码。
另外,网上有大量精美的PSD格式的网页模板,你可以直接修改后再切图生成网页。
下图是一个小型个人网站模板的例子,当然不论什么样的模板,步骤都是一样的,要做到举一反三。
首先,我们要根据自己的需要对模板上的文字进行修改、删除和增补。
也可以对已有图片作相应处理。
观察效果图我们可以看出,该效果图总体上分三行一列:
最上面标题为一行;
中间的内容部分为一行;
最下面的相关信息为一行;
整体为一列;
细分的话最上面一行又可以分为三列;
中间内容部分可以分为两列;
最下面相关信息部分又可以分为两行。
整体的布局应该如下图:
布局分布出来以后,一些制作网页的老手会开始启动网页制作工具勾画表格了。
那我们初学者要做什么呢?
下一步就要用PS的图片功片功能,根据图3的布局分布样式,对网页效果图进行切片处理。
1、打开模板,选择切片工具,这个时候鼠标就会变成裁纸刀的样子。
2、为了切片的精确进行,在切片开始前按CTRL+R打开标尺,图象周围就会出现标尺为裁减提供参照。
按照布局分布,对效果图进行裁剪。
如图。
需要注意的是,在裁剪效果图之前要确定好哪些地方需要进行预留,比方本效果图上的“草原部分”是预留给文字内容的,而旁边的“石板”是预留给文字标题的,这两个部分是要进行嵌入式框架处理的。
3、适当调整一下各个切片之间的匹配问题,确认无误后,点菜单“文件—储存为WEB所用格式”。
在之后的弹出对话框中,让选择图片质量。
因为图片质量过高的话,影响网页的浏览速度;
图片质量过低的话就会色彩失真影响美观。
这里要点四联显示,PS会自动给出四种不同颜色,选择又不太大又没有明显失真的样式。
下图上显示我们可以发现第2种是最符合网页图片要求的,所以在确认没问题后点“储存”选择好储存位置,会提示“储存的某些文件为包含拉丁字符,可能会与某些浏览器不兼容”不用管它,点确定。
之后PS就自动生成了一个网页,网页的名字和效果图的名字一致。
4、浏览器中的效果。
如图8
上面的办法不仅可以用来切模板,也可以用来切网站的屏幕拷贝,还可以用来切大的图片。
有些同学会问,在浏览器中的效果和效果图一致,为什么还要费劲将其裁剪呢?
这是因为一张整的效果图大小可能在200K或更高,浏览器下载就会变慢,要知道访问速度太慢的网站是会被浏览者放弃的,所以要把整图裁剪成小块,加快下载速度;
其次,网站是要进行更新的,根据布局裁剪在以后的更新过程中会很方便的。
切片不仅可以用Photoshop,也可以用Fireworks,初学者建议用后者。
切片完成后一般应使用网页工具进一步“深加工”,具体的我们将在“实训篇”中介绍。
仅供个人用于学习、研究;
不得用于商业用途。
Forpersonaluseonlyinstudyandresearch;
notforcommercialuse.
Nurfü
rdenpersö
nlichenfü
rStudien,Forschung,zukommerziellenZweckenverwendetwerden.
Pourl'
é
tudeetlarechercheuniquementà
desfinspersonnelles;
pasà
desfinscommerciales.
толькодлялюдей,которыеиспользуютсядляобучения,исследованийинедолжныиспользоватьсявкоммерческихцелях.
以下无正文
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Photoshop 打造 春天 背景 网页 布局