Photoshop在网页美工设计中的应用分析

    何露露

    摘 要：随着网络信息技术的不断发展，人们对网页的要求也在逐渐提升。传统的网页设计中存在的弊端很多，主要表现为色彩的搭配不当等。设计方式合理得当则能够吸引更多用户的眼球，而Photoshop的图片处理功能则必不可少。文章以传统网页设计中存在的问题作为出发点，对Photoshop在网页美工设计中的应用进行分析。

    关键词：Photoshop；网页美工；设计；应用

    在信息化的时代，越来越多的人已经无法脱离开网络平台。在大多数时间里，我们都会利用网络进行新闻热点与信息的浏览。比起传统的信息阅读方式，人们更重视网页的布局与整体结构是否得当。只有做出精美的网页美工设计，才能够使网站的经济效益增加，令大多数的用户予以接受。

    1 Photoshop在网页制作中的应用

    1.1 网站图标制作

    网站想要吸引用户的注意，就必须以鲜明的形式呈现在大众的面前。而图标则是其鲜明性、突出性的代表。同时，图标也是一个网站的整体核心部分，它作为形象标识，必须能够让用户一眼看出其中的用意所在，并且以简约、大方的形式呈现在用户的面前。以“腾讯印象”的图标制作为例，它主要是以两个小企鹅为图像，在画面中以手拉手的形态走出。图标的整体布局是从英文的结构出发，印象可以用“image”表达出来，其中的子母“m”就代表了两个共同牵手的企鹅。并且两只可爱企鹅以大小形态相同的方式制作出来，更能够形象生动地为用户传达腾讯印象的含义。在网站的字体制作上，腾讯网以外延方式加入泡泡的形式引入文字，代表了人与人之间的语言沟通。再如，“人人网”在设计当中也是非常独特的，我们都知道它的主要功能是在扩展交际圈的基础上实现好友之间的交流。在人人网中，用户可以与熟悉的人分享此刻的心情，上传一些照片。所以，在图片的制作当中，充分体现了这一目标。从这两个例子中我们也可以看出，网站图标制作的好处与特点。在图标的形成中，主要运用了Photoshop中的测量工具功能。其中的铅笔工具主要测量图标的尺寸，根据图样的大小进行调整，利用此工具先在模板上绘制出“矢量图”，也就是图标的基础框架，再沿着模板中所形成的调制路径进行复制。这种方式制作出来的图标不仅大小适宜，并且形象也更加鲜明生动[1]。

    1.2 网页中颜色的搭配

    颜色的搭配也是Photoshop中一个比较重要的功能。颜色选择得当可以使整个网页看起来更加和谐，并且形式更加融洽。在網页的美工设计中，Photoshop应用也非常广泛。首先，在图片软件的处理顶层有便捷的色彩搭配形式。设计人员可以根据自己的需要对图片的元素与环境进行整体确认。将单独的图片进行区域划分，以结构调整的方式进行颜色的整体化布局。另外，还设计人员还可以将一个图片进行层次划分，在每个层次的独立部分进行色彩调整。这样，设计人员可以在整体布局的情况下看到相对全面的颜色空间。另外，Photoshop功能中还有一个搭配方式分析的系统，如果颜色得当，系统则会静止不动。如果颜色搭配得太过突兀，系统会进行自动化调整与转换。最后，网页的色彩保护功能也是Photoshop中所独有的。它主要是根据系统的相关指令进行调整。设计者可以在色彩板之中进行随意调制，色彩板会给予设计者不同的颜色搭配模板，其中不同方式的搭配手段操作系统的提示规则也是不同的[2]。

    1.3 网页背景图片的制作

    网页背景图片的制作也是美工设计中的一个重要方向。设计者首先进行图片选择，在制作表格中进行单元编辑。以每个单元格为中心，将图片进行逐一列举。在Photoshop的选择当中，有图案的自定义编制功能。设计人员可以任意选择一张背景，在“编辑”目录上进行填充。填充的作用主要是使图片更有立体感和动态感。“帧动画”的用途是Photoshop主要部分之一。简单来说，就是设计者为了使网页更加丰富，对多幅图片进行选择。软件的功能是将这些图片进行最佳状态组合，以不同的形式呈现在设计者的面前。设计者可以选择出一种最为直观的组织形式予以呈现。另外，图片的组合状态一般容量都较大，设计师可以进行“GIF”的格式转换，既不占用文件空间，又能够以较为稳定的状态呈现在用户的面前。从网页背景的细致化角度来说，Photoshop软件还可以对图片的边缘进行修改，以调整页眉与页脚的形式进行细化。页眉页脚的设置得当可以使整个页面看起来更加有质感，并且也更利于图片的修改与完善[3]。

    1.4 调整网页速率

    速率的调整也是Photoshop软件中的一项强大功能。它能够使网页以更加精美的形式呈现在用户的面前。首先，在高速的社会发展下，人们最不喜欢的就是等待。而速率调整正是为用户解决这一实际问题，使他们能够快速地浏览信息。例如：图片越大，打开的过程也越慢。在Photoshop系统的支持下，图片能够根据网速的大小进行适当的调整，对内容进行统一化设置。用户在浏览信息时，只要将相关链接点击，就可以了解信息中所出现的内容。另外，Photoshop软件还有色彩删减的功能，它能够以图片和画面的整体性作为出发点，将边缘的一些无用色彩切换掉，使图片的体积相对减少，并且能够保留图中网页中的重点。以web为其主要的存储方式。在图片的有效整合上，一般用Dreamweaver完成切片。如果图片被相对放大，那么文字所占用的空间就会相对减少，但清晰度则会更强。另外，也可以将某一网页以“缩放”的形式呈现出来，这样运行的速度也会有所提升。

    1.5 网页中背景底纹的制作

    背景底纹的制作能够令网页看起来更加丰富多彩，使用户能够更清晰地了解到图片与文章的实际内容名与要求。设计者在对背景底纹进行处理时，可以利用Photoshop软件的制作程序进行设定。首先，软件内部有色彩过滤器的功能，设计者选择出一个图片作为网页的背景，以它的底纹颜色作为核心，进行标准化配置。过滤器的作用是使图片在平移的过程中进行底纹色彩调配。以“右上方”为平移中心，以“半幅图画”为目标体，保持整个画面重叠的基础上进行调试，并且在环绕的状态下予以区分。设计者在工具箱内进行整体化选择，利用图片的对称性进行工具化分割。分割过程中要沿着两端平面进行移动，以水平或者是垂直的状态予以平移。最后，将分割后的图片进行复制，将两个部分整合在一起。将图片的上下左右4个角进行无缝连接，以Photoshop软件中的自动顺连的方式进行设定，使图片的边界能够更加清晰地连接到一起，达到彻底融合的效果。这种方式也可以称为“图片边界化”，能够使底纹更加紧密地联系在一起。实现边缘的过度与消化，使图片以方块拼接状呈现在设计者的面前。在底纹色彩设置成功后，设计者如果要加入一些艺术文字，可以在Photoshop中的标题添加功能处进行处理，在每一层图片上都加入适当的解释，并在两旁设置动态场景。这样的好处是可以进行图片与文字的及时修改与自动切换。

    2 Photoshop在网页设计中的优势

    2.1 灵活性强

    Photoshop作为一种网页设计的美工化软件，能够实现设计工作的灵活性与自如化。在图片的设计上，操作者可以按照网页的实际比例进行规划，适当地对图片层次进行划分，对大小进行整合。并且如果两幅图片的适用性不是很强，设计者可以在整体画面的质感不受影响的情况下进行元素的增减。另外，Photoshop软件还可以实现图片的动态化过程，实现结构布局的重置。用户可以根据图片的层次划分进行相关的链接状态查看。

    2.2 可修改性强

    在传统的设计过程中，如果出现图片大小不得当或者是文字与图片不符的状况要将整体网页进行重置。而Photoshop软件的设计上则可以体现强大的可修改性。设计人员如果对网页图片的某一部分不满意，可以根据图片中所划分出来的位置与层次，进行分阶段、有目标性的改进。例如：在一个网页设计当中，设计者觉得艺术字与图片的颜色搭配不是非常理想，他们可以单独对特定的文字进行修改即可，点入对应的链接，对原有图层进行重新设计。

    2.3 为浏览者提供了更多的方便

    在Photoshop软件的应用中，浏览者不必再担心浏览的时间问题，网页设计工艺的美化能够使得设计页面的主题更加鲜明，中心更加突出。它使颜色与图片以及文字的关系进行合理化的调试，使内容更加直观与具体地表现出来。多元素合理化的组合使得浏览者不再处于应接不暇的状态，他们可以深入到网页主体部分当中，并且以“链接”发送的形式给予他们更多、更全面的选择空间。

    3 Photoshop网页设计的原则

    在利用Photoshop对网页进行设计时，设计者也应该在以下几个方面予以关注。第一，设计初期的网页比例调配非常重要。设计者如果用一般的文档形式进行保存，就要注意分辨率的大小与像素的高低；其次，在网页图片的格式化转换过程中，应该注意以图片的大小为标准，选择相应的体积可容纳格式；最后，设计者要注意网页结构的划分，要按照Photoshop软件中的标准参照线进行区分，分割线上呈现的是主要内容，分割线下可以加一些辅助性元素。