Photoshop 网页设计 同色调的不同风格网站

Photoshop 网页设计 色彩模式转换

为了在不同的场合正确输出图像，有时需要把图像从一种模式转换为另一种模式。Photoshop通过执行【图像】|【模式】命令，来转换需要的颜色模式。这种颜色模式的转换有时会永久性地改变图像中的颜色值。例如，将RGB模式图像转换为CMYK模式图像时，CMYK色域之外的RGB颜色值被调整到CMYK色域之内，从而缩小了颜色范围。

技巧

由于有些颜色在转换后会损失部分颜色信息，因此在转换前最好为其保存一个备份文件，以便在必要时恢复图像。

在将色彩图像转换为索引颜色时，会删除图像中的很多颜色，而仅保留其中的256种颜色，同时产生一个表格。如图1-18所示，是许多多媒体动画应用程序和网页所支持的标准颜色数。只有灰度模式和RGB模式的图像可以转换为索引颜色模式。由于灰度模式本身就是由256级灰度构成，因此转换为索引颜色后无论颜色还是图像大小都没有明显的差别。但是将RGB模式的图像转换为索引颜色模式后，图像的尺寸将明显减少，同时图像的视觉品质也将多少受损。

图1-18 【索引颜色】对话框

提示

如果将RGB模式的图像转换成CMYK模式，图像中的颜色就会产生分色，颜色的色域就会受到限制。因此，如果图像是RGB模式的，最好选在RGB模式下编辑，然后再转换成CMYK图像。

Photoshop 网页设计 色彩三要素

色彩可分为无彩色和有彩色两大类。前者如黑、白、灰，后者如红、黄、蓝等七彩色。自然界的色彩虽然各不相同，但任何有彩色的色彩都具有色相、亮度、饱和度这三个基本属性，也称为色彩的三要素。

1．色相

色相指色彩的相貌，是区别色彩种类的名称。是根据该色光波长划分的，只要色彩的波长相同，色相就相同，波长不同才产生色相的差别。红、橙、黄、绿、蓝、紫等每个宇都代表一类具体的色相，它们之间的差别就属于色相差别。当我们称呼到其中某一色的名称时，就会有一个特定的色彩印象，这就是色相的概念。正是由于色彩具有这种具体相貌特征，我们才能感受到一个五彩缤纷的世界。如果说亮度是色彩隐秘的骨骼，色相就很像色彩外表华美的肌肤。色相体现着色彩外向的性格，是色彩的灵魂。

色性指不同色彩产生的相对冷暖感觉，这种冷暖感觉是基于人类长期生活积淀所产生的心理感受，如图1-5所示，红黄搭配有热烈感，蓝绿搭配则具清凉感。

图1-5 不同色相的网页

如果把光谱的红、橙黄、绿、蓝、紫诸色带首尾相连，制作一个圆环，在红和紫之间插入半幅，构成环形的色相关系，便称为色相环。在六种基本色相各色中间加插一个中间色，其首尾色相按光谱顺序为：红、橙红、橙、黄、黄绿、绿、青绿、蓝绿、蓝、蓝紫、紫、红紫，构成十二基本色相，这十二色相的彩调变化，在光谱色感上是均匀的。如果进一步再找出其中间色，便可以得到二十四个色相，如图1-6所示。

图1-6 十二色相环与二十四色相环

2．饱和度

饱和度是指色彩的纯净程度。可见光辐射，有波长相当单一的，有波长相当混杂的，也有处在两者之间的，黑、白、灰等无彩色就是波长最为混杂，纯度、色相感消失造成的。光谱中红、橙、黄、绿、蓝、紫等色光都是最纯的高纯度的色光。

提示

纯色是饱和度最高的一级。光谱中红、橙、黄、绿、蓝、紫等色光是最纯的高饱和度的光；色料中红色的饱和度最高，橙、黄、紫等饱和度较高，蓝、绿色是饱和度最低。

Photoshop 网页设计 实例——设计工作室网页Banner制作

根据网站的主题来设计网页Banner，本案例是一个设计工作室网站，如图1-58所示。依据题目名称设定整体风格，画面比较柔和。Banner的背景以一种纸张的纹理而出现，在背景上绘制有一片灰色的墨迹水印效果，彩色图案与黑白色图案结合，蕴含一种诗意味道。

图1-58 设计工作室Banner 操作步骤：

（1）新建一个【宽度】和【高度】分为1000和250像素，10%灰色背景文档。执行【滤镜】|【纹理】|【纹理化】命令，打开【纹理化】对话框，设置【纹理】为“画布”，设置参数，如图1-59所示。

图1-59

添加纹理效果

（2）新建“图层1”，填充蓝色（#ABD5CF），单击【图层】面板下的【添加图层蒙版】按钮，对图层添加蒙版。在蒙版处于工作状态下，使用黑色【画笔工具】，设置【硬度】为0%，在画布中央进行涂抹，如图1-60所示。

图1-60 擦除部分图像

提示

在进行涂抹时，根据实际情况。随时更改画笔的【不透明度】和【画笔大小】，以达到涂抹后图像在过渡边缘均匀和谐。

（3）打开“墨迹”图片素材，使用【魔棒工具】，设置【容差】为30像素，在画布白色出点击建立选区。按Ctrl+Shift+I快捷键，反选选区。新建“图层1”，将选区填充土黄色（#D1b57A），取消选区，如图1-61所示。

图1-61 绘制图形

（4）使用【移动工具】，将图像放置到Banner文档中，命名图层为“墨迹”图层。按Ctrl+T快捷键，对图像进行缩小变换，并按Enter键结束变换，如图1-62所示。

图1-62 放置图像

（5）按住Ctrl键，单击该图层缩览图，载入选区。执行【选择】|【修改】|【扩展】命令，设置【扩展量】为5像素，如图1-63所示。

图1-63 建立选区

（6）新建图层“墨迹1”，填充土黄色（#D1b57A），设置【不透明度】为30%。如同（2）步骤操作，对“墨迹”添加蒙版后在图像边缘进行涂抹，如图1-64所示。

Photoshop 网页设计 实例——网站标志制作

对于一个追求精美的网站，标志更是它的灵魂所在，即所谓的“点睛”之处。一个好的网站标志往往会反映网站的某些信息，而设计网站标志往往以所在网站的风格为依据，要么与网站风格相统一，要么使用鲜艳色彩，使其在网页中更加突出，如图1-79所示。

图1-79 设计工作室网站操作步骤：

（1）新建一个【宽度】和【高度】分别为1100和800像素，白色背景文档。新建“图层1”，使用【椭圆工具】。设置W为420像素；H为320像素，建立椭圆路径。使用【转换点工具】和【路径选择工具】，调整路径，如图1-80所示。

图1-80 建立路径

（2）按Ctrl+Enter快捷键，将路径转换为选区。填充任意颜色，取消选区。双击“图层1”，打开【图层样式】对话框，启用【渐变叠加】命令，设置参数，如图1-81所示。

图1-81 添加渐变效果

（3）按住Ctrl键，载入“图层1”选区。执行【选择】|【修改】|【收缩】命令，设置【收缩量】为15像素。并选择【选框工具】将选区向左和向上各移动7个像素，如图1-82所示。

图1-82 建立选区

（4）新建“图层2”，将选区填充任意颜色。取消选区，启用【渐变叠加】样式，添加渐变效果，设置参数，如图1-83所示。

图1-83

添加渐变效果 （5）使用【钢笔工具】，建立路径。新建“图层3”，将路径转换为选区，填充白色。单击【图层】面板下【添加图层蒙版】按钮，在蒙版处于工作状态下，执行黑白渐变，如图1-84所示。

图1-84 添加高光

（6）新建“图层4”，使用【钢笔工具】，建立路径。按照上述（2）操作，启用【渐变叠加】样式，设置参数，如图1-85所示。

图1-85 绘制图形

（7）载入“图层4”选区，新建“图层5”。按照上述（3）和（4）操作，建立选区，使用【渐变叠加】样式添加渐变效果，设置参数，如图1-86所示。

图1-86 添加渐变效果