Photoshop在网页设计中的应用与方法

现在已经进入数字化信息时代，随着网络的飞速发展，人们的生活逐渐迈向了新时代，无法想象，哪天没有了网络会怎样，呵呵，开个玩笑了，网络只会一天比一天精进，所以网络知识的普及是必须的！

1、图像局部截取和图像尺寸调整

---

做网页设计时经常要用到的某张图像一部分，这就需要截取图像的局部。图像局部截取的方法很多，但使用Photoshop操作起来更方便。具体操作步骤如下：

（1）在Photoshop中打开原始图像；

（2）在工具栏中选择相应的选区工具，如矩形选框工具或椭圆选框工具，在图像上需要截取的局部建立选区。为了截取更精确，通常在选择选区工具以后，在工具选项栏中“样式”里设定选区的尺寸，如“固定大小”，并设定宽度和高度值，这样单击图像就可以建立固定尺寸的选区；

（3）建立好选区后，可以将鼠标按住选区内部拖拽移动选区位置，使截取的内容符合需要；

（4）单击菜单“编辑-拷贝”或者我们熟悉Ctrl+C复制选区内容；

（5）单击菜单“文件-新建”或按下快捷键Ctrl+N新建画布，此时画布的尺寸默认就是选区的尺寸，单击菜单“编辑-粘贴”或按下快捷键Ctrl+V将选区内容粘贴到新画布中；

（6）在新文件图像中根据需要进一步操作，如添加文字等，最后将新文件保存。
注：图像尺寸的调整也是网页设计中的常用操作，网页中的图像文件大小在保证清晰度的情况下应该尽量小，不然会影响网页打开速度，所以页面中用到的图像都有调整到相应尺寸。在Photoshop中打开图像，单击“图像-图像大小”菜单或者Ctrl+Alt+I进行尺寸修改，调整完后保存即可。

2、透明背景图像的制作

---

有些图像放在网页中需要背景透明才能达到效果，比如在已有背景色的区域放置一个图像，这个图像只有背景透明才能融合在区域中。在Photoshop中制作透明背景图像可以通过以下步骤来操作：

（1）在Photoshop中打开原图像，使用选取工具将需要保留的图像部分选中，如果原图像背景色单一，可以使用魔棒工具很方便地选取背景色，然后单击菜单“选择-反向”反向选中需要保留的部分；

（2）单击菜单“编辑-拷贝”或按下快捷键Ctrl+C复制选区内容，单击菜单“文件-新建”或按下快捷键Ctrl+N新建画布，注意新建画布的“背景内容”项选择“透明”；

（3）单击菜单“编辑-粘贴”或按下快捷键Ctrl+V将选区内容粘贴到新画布中；

（4）按下快捷键Ctrl+T适当调整粘贴内容的尺寸，调整完后按回车键，还可以使用移动工具调整内容的位置；

（5）单击菜单“文件-存储”或按下快捷键Ctrl+S保存为gif或png格式文件。

3、图像融合

---

图像融合是指将两张或更多的图像合成一张图像，这个操作在网页设计中也经常用到，比如给网页做个banner图像或背景图像等，下面以两张相同高度图像拼接融合为例来说明操作过程，基本步骤如下：

（1）在Photoshop中打开第一张图像，然后使用移动工具将第二张图像拖进来并调整到合适的摆放位置；

（2）如果两张图像的色调不太一致，可以对色相、饱和度等属性进行调整；

（3）选择第二张图像所在图层，建立蒙版，选择渐变工具从两张图像的结合处拖拽形成黑白渐变，再适当调整不透明度。

4、图像倒影和阴影制作

---

图像倒影效果在网页中也很常见，倒影不仅增强图像的立体感觉，也使得图像表现力更强。倒影效果一般分为平面倒影和立体倒影，平面倒影的制作可以通过以下步骤实现：

（1）在Photoshop中将需要做倒影的素材导入文档，按下快捷键Ctrl+J复制该图层；

（2）单击菜单“编辑-变换-垂直翻转”将翻转的图层拖至原始图层的下方；

（3）为翻转的图层添加图层蒙版，选中渐变工具并选择线性渐变，在图层蒙版上拖出渐变就产生了倒影效果。
　　阴影效果也是常用的图像效果，具体实现步骤如下：

（1）把需要做阴影效果的图层复制并建立选区，填充为黑色；

（2）按下快捷键Ctrl+T并右键单击鼠标选择“扭曲”，拖动鼠标调整阴影的形状和大小；

（3）减少阴影图层的透明度，然后单击菜单“滤镜-模糊-高斯模糊”，再把阴影图层放置在原图层的下面。

5、特殊字体的使用

---

文字是图像处理中频繁使用的元素，网页设计中的图像上通常都需要添加一些文字内容，如广告宣传语、导航文字等。文字的添加可以使用Photoshop的文字工具来完成，通常图像上的文字都采用特殊字体，而计算机中默认情况下却都不具备这些字体，这就需要我们去网上下载所需字体并安装在计算机中才能使用。举例说明，比如我们要在图像上添加一种“方正粗倩简体”的文字，很明显，计算机中默认没有该字体，我们必须进行以下步骤操作：

（1）从网上下载“方正粗倩简体”字体。可以在百度中搜索“字体下载”关键字，很多网站都提供字体下载；

（2）安装字体。下载的字体通常是一个.ttf格式的文件，直接复制该文件，打开C:WindowsFonts文件夹并进行粘贴，这样就完成了字体安装；

（3）重启Photoshop软件，可以看到字体列表中就有了新安装的字体，当然，计算机中的其他软件都可以使用这种字体。当然如果你有能力的话也可以自己设计字体，但是对一些初中级的学生来说，下载是最好的办法了，省去了很多时间，你懂的！

6、绘制网站LOGO

---

网站标志或称LOGO，它是一个网站的名片，是能够体现网站形象的一个重要元素。一个好的网站LOGO能够体现出网站的内涵并能传递给浏览者一些关于网站的理念信息。一般来说，网站LOGO的设计是很重要的，它不仅要契合网站同时也要独具个性，能吸引网站浏览者。网站LOGO可以采用Photoshop软件进行绘制，具体可以采用以下步骤：

（1）新建画布，使用钢笔工具大致勾画出LOGO轮廓路径；

（2）选择“转换点工具”，将某些直线路径转换为曲线并调整相应的弧度；

（3）选择“直接选择工具”，根据需要移动一些锚点的位置，通过曲线弧度调整逐步达到设计效果；

（4）按下快捷键Ctrl+Enter，将路径转换为选区，然后对选区进行填充；

（5）根据需要添加文字等内容并保存文档。   

7、网页绘制和切图

---

Dreamweaver等网页设计软件在图像处理方面的功能很弱，只使用该软件进行网页设计会给网页美观带来局限性，所以通常先采用图像处理软件绘制网页效果图，然后采用切图等手段转换为网页。绘制网页的工具很多，Photoshop是一个很不错的选择，方法如下：

（1）首先新建一个画布，在当前普遍1024*768以上分辨率的情况下，画布的宽度设为1002像素以内就能保证用户打开网页时不会出现水平滚动条，画布高度根据网页实际内容需要设定，接下来在新建的画布上绘制网页的界面，网页各个部分采用分层和分组，便于修改。
（2）网页绘制好后，需要利用切片工具和切片选择工具对图像进行分割，切割图像的原因是在浏览器中，一组小幅图像比单个大幅图像下载起来要快速得多，而且也便于网页在Dreamweaver软件中编辑。网页切片时一般要借助辅助线作为参考以确保切图的精确程度，网页中输入的文字部分在切图时可以先隐藏。

（3）单击菜单“文件-存储为Web和设备所用格式”来保存文件，Photoshop会自动生成一个名为images的文件夹用于存放所有图片。

8、各式线条的使用

---

线条在网页设计中是不可或缺的元素，线条应用得当会使网页布局清晰、层次分明，比如曲线增强网页的灵活性和流动性，具有时尚感、飘逸感，而直线的应用则使网页显得简洁、大方和严谨，不同线条的使用会起到意想不到的效果。一般来说，网页设计中经常用到直线、曲线、虚线和立体分割线等，下面我们简单介绍一下：
（1）直线
在Photoshop中绘制直线一般有两种方法，一种是使用画笔工具或铅笔工具，根据直线粗细需要设置好主直径，按住鼠标进行绘制，如果要绘制水平或垂直直线，需要按住Shift键然后绘制。
（2）曲线
Photoshop中绘制曲线一般会用到钢笔工具、转换点工具和直接选择工具等，先用钢笔工具画出大致路径，再用转换点工具将直线变为曲线并调整弧度，如果锚点的位置需要移动，则再使用直接选择工具移动，最后得到满意的曲线。
（3）虚线
绘制虚线一般使用画笔工具或铅笔工具，根据要绘制的虚线的粗细选择画笔的主直径，然后设置画笔属性面板中的“间距”值，这样就可以绘制出虚线，如果要绘制水平或垂直虚线还可以在绘制时按住Shift键。
（4）立体分割线
优秀的网站设计在细节方面的处理都是照顾十分周全的，立体分割线看起来有一种凹进去的感觉，形成一种很好的分隔的感觉。立体分割线其实是由两条粗细均为1px的直线组成的，首先绘制一条比背景色暗的直线，然后再绘制一条比背景色亮的直线，线条色彩可选用与背景色同一色系的颜色，两条线并列排在一起，形成立体凹陷的感觉。

9、背景图片制作

---

　　在制作网页的时候，经常需要给网页设置背景图片。除了可以到网上下载背景图片外，利用Photoshop强大的功能也同样可以制作出自己喜爱的背景图案。自制的背景图像种类很多，这里以制作一种无缝图案背景为例来说明：
　　具体操作步骤如下：

（1）打开Photoshop，新建宽160、高120，背景为白色，分辨率为72像素/英寸的空白文档；

（2）在工具箱中选择自定义形状工具并找到图1中所示的形状，在画布中间绘制出该形状，绘制时可按住Shift键保持同宽高比例，然后将绘制的形状放在文档的正中间；

（3）复制形状图层，对复制的图层执行菜单“滤镜-其他-位移”命令，完成图案的位移操作。位移的“水平”和“垂直”参数值是根据图像尺寸来设置的，一般为图像“宽度”和“高度”值的一半，本例“水平”设置为80，垂直设置为60。设置完后图像如图2所示；

（4）执行菜单“文件-存储”命令，将文件存储为GIF格式的图像。打开Dreamweaver软件，将该图像以背景图片平铺在网页中，可以看到网页背景的效果。

10、按钮制作

---

按钮是网页设计中常用的元素，经常用在导航、跳转等链接位置。设计精美的按钮能让网站浏览者眼前一亮，目前网页中常用的按钮一般都带有一些立体、渐变效果，这类按钮可以大致通过以下几步来实现：

（1）在Photoshop中新建画布，绘制一个圆角矩形；

（2）双击该圆角矩形图层面板，打开图层属性窗口，单击勾选左侧“斜面和浮雕”选项，并在右侧设置相应的属性值；

（3）单击勾选左侧“渐变叠加”选项，在右侧设置渐变颜色及其他属性值；

（4）单击勾选左侧“描边”选项，在右侧设置描边颜色、粗细、位置、不透明度等属性值；

（5）选择文字工具，在按钮上添加文字并设定文字样式等。通过这些设置能做出满足一般需求的立体渐变效果按钮，更多的效果可以在图层属性里面继续设置，如内阴影、外发光等。

另外，网页中有些按钮当鼠标放上去时换成另外一个按钮，两个按钮大小一致，区别就在颜色或文字颜色上。其实第二个按钮的制作很简单，只要把第一个按钮的图层复制，修改背景色或文字颜色即可。