CSS+div网页制作PS切图攻略

作者：袖梨 2022-06-25

认识Photoshop(PS)CSS切图必用工具

Adobe PHOTOSHOP平时我们又被称为PS。

div CSS必备切图工具PS截图

多数人对于PHOTOSHOP的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用方面，实际上，PHOTOSHOP的应用领域很广泛的，在图像、图形、文字、视频、出版各方面都有涉及。

请看下面介绍：

平面设计

平面设计是PHOTOSHOP应用最为广泛的领域，无论是我们正在阅读的图书封面，还是大街上看到的招帖、海报，这些具有丰富图像的平面印刷品，基本上都需要PHOTOSHOP软件对图像进行处理。

修复照片

PHOTOSHOP具有强大的图像修饰功能。利用这些功能，可以快速修复一张破损的老照片，也可以修复人脸上的斑点等缺陷。

广告摄影

广告摄影作为一种对视觉要求非常严格的工作，其最终成品往往要经过PHOTOSHOP的修改才能得到满意的效果。

影像创意

影像创意是PHOTOSHOP的特长，通过PHOTOSHOP的处理可以将原本风马牛不相及的对象组合在一起，也可以使用“狸猫换太子”的手段使图像发生面目全非的巨大变化。

艺术文字

当文字遇到PHOTOSHOP处理，就已经注定不再普通。利用PHOTOSHOP可以使文字发生各种各样的变化，并利用这些艺术化处理后的文字为图像增加效果。

网页制作

网络的普及是促使更多人需要掌握PHOTOSHOP的一个重要原因。因为在制作网页时PHOTOSHOP是必不可少的网页图像处理软件。

建筑效果图后期修饰

在制作建筑效果图包括许多三维场景时，人物与配景包括场景的颜色常常需要在PHOTOSHOP中增加并调整。

绘画

由于PHOTOSHOP具有良好的绘画与调色功能，许多插画设计制作者往往使用铅笔绘制草稿，然后用PHOTOSHOP填色的方法来绘制插画。

除此之外，近些年来非常流行的像素画也多为设计师使用PHOTOSHOP创作的作品。

绘制或处理三维帖图

在三维软件中，如果能够制作出精良的模型，而无法为模型应用逼真的帖图，也无法得到较好的渲染效果。实际上在制作材质时，除了要依靠软件本身具有材质功能外，利用PHOTOSHOP可以制作在三维软件中无法得到的合适的材质也非常重要。

婚纱照片设计

当前越来越多的婚纱影楼开始使用数码相机，这也便得婚纱照片设计的处理成为一个新兴的行业。

视觉创意

视觉创意与设计是设计艺术的一个分支，此类设计通常没有非常明显的商业目的，但由于他为广大设计爱好者提供了广阔的设计空间，因此越来越多的设计爱好者开始了学习PHOTOSHOP，并进行具有个人特色与风格的视觉创意。

图标制作

虽然使用PHOTOSHOP制作图标在感觉上有些大材小用，但使用此软件制作的图标的确非常精美。

界面设计

界面设计是一个新兴的领域，已经受到越来越多的软件企业及开发者的重视，虽然暂时还未成为一种全新的职业，但相信不久一定会出现专业的界面设计师职业。在当前还没有用于做界面设计的专业软件，因此绝大多数设计者使用的都是PHOTOSHOP。

上述列出了PHOTOSHOP应用的13大领域，但实际上其应用不止上述这些。例如，目前的影视后期制作及二维动画制作，PHOTOSHOP也有所应用的。

PHOTOSHOP的特色：

从功能上看，Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。

图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。

图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路。photoshop提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。

校色调色是photoshop中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。

特效制作在photoshop中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于photoshop的研究的原因。

以上信息引用百度百科photoshop介绍：http://baike.baidu.com/view/2929.htm

我们推荐使用Adobe Photoshop CS 8.0版本

总结：

photoshop这里对于我们来说主要是让大家认识是网页美工制作工具，网页美工开发工具，div+css重构必备工具，一般设计的网页美工都是没有合层的是以PSD格式保存的，所以注意的是如果你用PS设计网页美工最后不要将文件图层合并，最后一PSD格式保存，以便以后的修改及切图。

PS软件在DIV CSS开发中用于做什么

Photoshop软件简称PS在DIV CSS开发中用于做什么?

在DIV CSS开发中PS软件是必不可少的软件，主要用于DIV+CSS开发时切出布局图片素材、获取宽度值、获取高度值、获取颜色值、获取padding值、获取margin值等。

在整个CSS开发PS扮演角色

在CSS DIV开发中PS软件一直是使用的，因为整个开发全程都需要PS打开美工图(常见PSD文件)，因为我们布局时所设置样式单词或样式值都需要使用PS软件获得，所以整个开发过程中CSS代码开发时软件与PS软件同时打开使用。

PS开发中得到什么?

在CSS布局中所有样式值都是从美工图上获取得到，而非猜测随意设置样式值。比如设置宽度、高度、padding、margin的尺寸值都是使用PS软件从打开美工图中使用切片工具获得，具体获得方法技巧截图DIVCSS5会在后面PS教程给出;当然网页布局中设置背景颜色、字体颜色、边框颜色等这些具体的值当然也是100%从美工图获取准确的颜色值，而非自己凭空猜测大概设置。

我们在布局CSS时，具体长度尺寸很大时候不能误差1px，颜色值也是不能有误差，不然这里误差一点那里误差一点最后制作出HTML可想而知，当然是不能使用而且不严谨。

DIVCSS5最后提示：

在开发CSS过程中随时都是开发CSS软件和PS软件都是一直同时打开，开发代码过程中需要值马上回到PS软件准确获取，当然很多都不会PS软件，不过没事其实在CSS开发中用到PS软件就那几个功能和技巧，接下来DIVCSS5会陆续为大家以图文教程方式奉献出。

PS软件CSS切图应用常用快捷键

Photoshop软件CSS切图应用常用快捷键介绍

本节DIVCSS5为大家介绍在切图时PS软件的常用快捷键，通过快捷键介绍让不会PS的您也对PS有一定应用。

1、放大美工图

ctrl+++

按住“Ctrl”键不放然后按“+”加号键即可不断放大所打开美工图

2、缩小美工图

ctrl---

按住“Ctrl”键不放然后按“-”减号键即可不断缩小所打开美工图