Photoshop 网页设计 创建网页文件

15
第4章 “字符”面板
二、使用段落面板设置段落样式
设置段落样式包括设置文字的对齐方式和 缩进方式等，不同的段落样式具有不同的文字 效果。选择“文字工具”后，将鼠标光标置于 需要设置的段落中，在属性栏中单击“切换字 符和段落面板”按钮，可打开“字符 / 段落” 面板，单击“段落”标签切换到“段落”面板。
第4章
广告字体风格
39
第4章
1. 端庄典雅
字体优美抒情，格调高雅，给人以华丽高贵之感，适用于女性化妆品等广告 主题。
2. 坚固挺拔
字体造型富于力度，给人以简洁爽朗的现代感，有较强的视觉冲击力，适用 于家用电器等广告主题。
3. 深沉浓厚
字体造型规整，具有重量感，庄严雄伟，给人以不可摇动的感觉，适用于工 程机械等广告主题。
11
第4章
七、栅格化文字
栅格化文字图层是指将文字图层转换成普通图层，在转换后的图层中能应用 各种滤镜效果，文字图层以前所用的图层样式并不会因转换而受到影响，但无法 再进行文字编辑操作。栅格化文字图层主要有以下两种方法。
1. 在 菜 单 栏 中 选 择 “ 图 层 ” → “ 栅 格 化”→“文字”命令。
选择工具箱中的 “横排文字蒙版工具”或 “直 排文字蒙版工具”，在图像中单击鼠标左键，然后输入所 需的文字后，退出文字蒙版输入状态，即可分别创建出横 向或纵向排列的文字选区。
13
文字蒙版创建文字
第4章
第 2 节 文字的字体及样式调整
字符样式包括字体、字号、颜色等属性，除了可以在属性栏中进行设置外， 还可以通过“字符”面板进行更详细的设置。段落样式包括对齐方式、间距和 缩进等，可以使用“段落”面板进行设置。
1. 针对性
字体的设计需要与所设计信息的具体内容、词义相配合，应根据宣传对象、 字体所处的环境来选择和设计，这样才能表里一致，发挥出文字感染力的最大功能。

Photoshop 网页设计网页自定义颜色
一般情况下，访问者的浏览器Netscape Navigator和Internet Explorer选择了网页的文本和背景的颜色，让所有的网页都显示这样的颜色。

但是，网页的设计者经常为了视觉效果而选择了自定义颜色。

自定义颜色是一些为背景和文本选取的颜色，它们不影响图片或者图片背景的颜色、图片一般都以它们自身的颜色显示。

自定义颜色可以为下列网页元素独自分配颜色：
●背景：网页的整个背景区域可以是一种纯粹的自定义颜色。

背景色总是在网页的文本或
者图片的后面。

●普通文本：网页中除了链接之外的所有文本。

●超级链接文本：网页中的所有文本链接。

●已被访问过的链接文本：访问者已经在浏览器中使用过的链接。

访问过的文本链接以不
同的颜色显示。

●当前链接文本：当一个链接被访问者单击的瞬间，它转换了颜色以表明它已经被激活了。

对于制作网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨，如图1-22所示网页中，主要由白色背景和蓝色、黄色、粉红色以及黑色笔触组成，能够加快浏览者打开网页的速度。

图1-22 色彩简单的网页
一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。

而为了追求醒目的视觉效果，可以为标题使用较深的颜色。

如表1-2所示为经常用到的网页背景颜色列表。

表1-2 网页背景颜色与文字色彩搭配
的颜色，使网页更具有吸引力。

Photoshop 网页设计编辑切片无论以何种方式创建切片，都可以对其进行编辑。

只是不同类型的切片，其编辑方式有所不同。

其中用户切片可以进行各种编辑，比如查看切片等；自动切片与基于图层的切片则有所限制，并且有其自身的编辑方法。

1．查看与选择切片当创建切片后发现，切片本身具有颜色、线条、编号与标记等属性，如图1-10所示。

其中发现具有图像的切片、无图像切片、自动切片与基于图层的切片等标记有所不同。

图1-10 查看切片编辑所有切片之前，首先要选择切片。

在Photoshop中选择切片，有其专属的工具，那就是【切片选择工具】。

如选择【切片选择工具】，在画布中单击，即可选中切片，如图1-11所示。

图1-11 选择切片如果要同时选中两个或者两个以上切片，那么，可以按住Shift键，连续单击相应的切片即可，如图1-12所示。

图1-12 选中多个切片2．切片选项Photoshop中的每一个切片除了包括显示属性外，还包括Web属性，比如链接属性、文字信息属性、打开网页方式等。

例如，使用【切片选择工具】选中一个切片后，单击工具选项栏中的【为当前切片设置选项】按钮，打开【切片选项】对话框，如图1-13所示。

其中，各个选项及作用如表1-1所示。

图1-13 【切片选项】对话框示。

可以输入要在所生成Web页的切片区域中显示的文本。

此文本可以是纯文本或使用标准HTML标记设置格式的文本。

3．切片的移动、划分与提升在Photoshop中，不同类型的切片可以进行不同的操作。

其中用户切片除了可以设置切片Web选项外，还可以移动其位置。

方法是使用【切片选择工具】，单击并且拖动用户切片，即可移动位置，如图1-15所示。

图1-15 移动用户切片Photoshop中的自动切片不能进行移动操作，而要想对基于图层的切片进行移动，必须使用【选择工具】移动图层中的对象，如图1-16所示。

图1-16 移动基于图层的切片Photoshop中的切片除了基于图层的切片不能进行划分外，其他两种切片均可以进行划分。

Photoshop 网页设计网页导航Banner概述
Banner是一种表现形式，以GIF、JPG、SWF等格式建立的静态或者动态的图像文件。

定位在网页中，大多用来表现网络广告内容，同时还可以使用JA V A等语言使其产生交互性、用Flash等动画制作工具增强效果的表现力，如图1-1所示。

图1-1 网页Banner效果
Banner广告有多种表现规格和形式，最开始使用的是488×60像素的标准标识广告。

由于这种规格曾处于支配地位，在早期有关网络广告的文章中，如果没有特别指名，通常都是指标准标识广告。

现在这种尺寸的Banner在如今网络中已经非常少见，几乎连门户网站上都看不见它的身影，取而代之的是和网页形成整体配比的尺寸，如图1-2所示。

图1-2 不同形式与尺寸的广告Banner
而导航Banner主要出现在门户网站以外的其他网站中，导航Banner是导航菜单与Banner的结合，主要展示与网站相关的图片与文字信息。

其中导航菜单与Banner既可以单独显示，也可以整体显示，如图1-3所示。

图1-3 单独与整体导航Banner
随着网页制作技术的提高，以及平面元素越来越多的介入，导航Banner的形状越来越多样化。

而导航Banner的形状与尺寸并不是随意设置的，而是根据所在网页中的主题与风格来决定的，如图1-4所示。

图1-4 不规则导航Banner。