Photoshop在网站建设中的应用

摘要：在Internet迅猛发展的今天，网站的数量和规模迅速发展。在制作网站过程中Photoshop是必不可少的网页图像处理软件。在设计“京东商城网” 电子商务网站中，使我明白虽然可以用Dreamweaver和Frontpage等网页创作工具来完成，但是最方便的创作方式，还是使用Photoshop这样的专业图形图像处理软件。Photoshop具有极其强大的功能，在图像、图形、文字、视频等等方面都有涉及。使用Photoshop制作完成“京东商城网”整体界面效果后，再进行优化和切片，使其达到了更好的网页浏览效果。有效的运用Photoshop能在网站建设及后期发展中起到重要作用。

关键词：Photoshop 网站 设计 京东商城网

Photoshop在各个领域里应用非常广泛，其功能非常强大，它可以将图片、视频剪辑、图形以及美术作品结合在一起，并进行处理，使之产生各种唯美甚至超乎想象的滤镜特效。在很多行业以及我们的日常生活中都需要使用到它。因此，在网络高速发展的今天，学会如何使用Photoshop软件就非常有必要了。

我校以“京东商城网”为例为学生讲解Photoshop在网站建设中的布局与应用，“京东商城网”是一个典型的电子商务网站系统，在现实生活中应用非常广泛，它的定位清晰，受众明确。电子商务类网站需要提供更多的图片信息，各功能在实际工作中经常用到，Photoshop的布局应用也很有代表性。下面，就“京东商城网”为例，谈一谈Photoshop在网站建设中的应用。

一、Photoshop在网站建设中的作用

1.布局灵活

在设计“京东商城网”过程中，Photoshop里面的图层起到了不可或缺的作用，每层可以放置不同的元素，图层之间可以相互链接，也可单独存放，每个图层上的图像位置可以随意挪动而不影响其它图层的图像位置。如此灵活的功能，完全可以让我们随心所欲设计而不受任何约束，而Dreamweaver等软件给我们提供出自由度降低很多，其效果也会大打折扣。

2.修改方便

“京东商城网”网站建设前期首先需要在Photoshop中做出效果图和同学们一起研究。一般情况下，一次构思出的效果满意率非常低，总会提出修改意见，而且还会不断地提出修改方案。这时我们就可以利用Photoshop的强大功能将我们研究出的最佳方案方便地进行修改和优化，直到达到满意的效果为止。

3.可以加快浏览速度

在设计“京东商城网”的过程中，我们发现一个设计不美观不规范的网站是没有生命力，然而一个打开、下载速度慢的网站也是没有存在的价值。所以，使用Photoshop设计“京东商城网”时，网页经过裁切后体积相对要小得多，相同的元素因为其格式变化也会大大提高下载速度，因此Photoshop就成了提高速度，提高点击率的制胜法宝。

二、Photoshop在网站开发中的应用

以我校设计的“京东商城网”为例。首先要明白运用Photoshop设计的网站是各个网页的整体效果呈现。网站制作中对图片的精准度要求很重要，图片过大会被压缩扭曲，导致图片不清晰，太小会显得不美观。建立图层组是很重要的，制作一个页面会有很多层，如果都放在一起，杂乱无章，也影响工作效率。

在设计“京东商城网”系统中，主页包括LOGO，标题栏，广告栏，文字等，如果放在同一个文件里面会有非常多的图层，可以先制作好各个部分，然后组合到一起。在主页设计时应考虑到：“图片”适当地插入网页中可以起到画龙点睛的作用：“文字”与“背景”的合理搭配，这样可以使文字更加醒目和突出。

1.网站LOGO的设计

LOGO的应用领域非常广泛，无论是平面媒体还是电视广告，无论是互联网上还是互联网外都能见到它。因为它代表着企业的形象，所以它起到宣传企业形象、加深人们对企业印象的作用。拥有一款优秀的LOGO，可以使品牌视觉形象如虎添翼，加快企业的发展步伐。

“京东商城网”的LOGO包含了自己的名称和网址。起初制作的时候色调上搭配很不协调，放到网页中显得很突兀。而且我们网站的LOGO是以蓝颜色为主的，要想让其信息跟蓝色颜色不冲突，我想只能用蓝颜色，但是如果整体呈现这种颜色是很不明显的。后来将部分位置改用黄颜色，这样即没有改变原来的LOGO，又达到了协调的目的。

2.标题栏的设计和制作

一个网页版面除了头、底要特别制作外，中间部分应该考虑制作标题样式，统一风格。还要考虑表头背景、一些常用的边框等。“京东商城网”是典型的B2C网站，通栏用来展示热销的商品、新上市的产品及推荐的产品，可以通过品牌通道迅速到达二级域名。右栏用于部分商品讯息展示。在制作标题栏的时候，放个简单的小按钮会更加增色。制作标题栏最好将其设计成立体效果。

3.图片的处理

网站不能只用文字，那是枯燥乏味的，必须在页面上适当地添加一些图片，增加可看性。图片不仅要好看，还要在保证图片质量的情况下尽量缩小图片的大小，另外，网页中最好对图片添加注解，当图片的下载速度较慢，在没有显示出来时注解有助于让浏览者浏览的方便，很有必要为图片添加一个注解。这是一个小地方，却能体现一个网页的制作水准。

根据“京东商城网”网站的需要，图像处理要简单化，如把一副图像裁剪为合适的尺寸。网站中商品的图片最重要的是突出商品，因此需要对图片明暗进行调整，压缩图片的大小，尽量减少对网页传输速度的影响。

4.特殊字体的应用

在网站制作中，特殊字体的运用是非常重要的。使用不同的字体，颜色可以吸引目光，对于希望客户快速了解的信息，可以适当变大或者更改颜色。在图片制作中我们对特殊字体的使用较多。用较大且突出的字让客户迅速了解信息。

5.网页背景的应用

图像的另一个重要应用是作为网页的背景。网页的背景并不一定要用白色，选用的背景应该和整套页面的色调相协调。我校设计的“京东商城网”网站背景并没有特别的要求，是白色，这样显得更加明快。

三、Photoshop在网站后期中的应用

Photoshop在网站后期的处理中并不需要太大的调整，通常都是用来进行小地方的调整。更新网站图片，制作新商品图片等。

总之，在使用Photoshop设计的“京东商城网”电子商务网站过程中，我学到了很多，工作、生活上都得到了很大的提高。也让学生更加明了LOGO的含义，丰富了自己对不同图片、内容设置不同字体，不同版面运用不同动态效果，制作整体布局的经验。在此过程中我们碰到很多问题，从最初的无法很好的对网页进行布局，不知道网页布局应注意的问题，到如今我们已经能合理搭配，并开始注重细节的表现，经常交流经验，在设计中不盲目的制作。在“京东商城网”制作的过程中，又一次加深了我使用Photoshop设计网站的教学能力。

参考文献：

【1】《Photoshopcs3中文版高级实例教程》 方晨著 上海科学普及出版社 2008.6

【2】《使用Photoshop设计网站》 北京阿博泰克北大青鸟信息技术有限公司著 科学技术文献出版社 2008.5

【3】《综合项目实战》 北京阿博泰克北大青鸟信息技术有限公司著 科学技术文献出版社 2008.5