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

认识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”键不放然后按“-”减号键即可不断缩小所打开美工图

3、拖动美工图

按住“空格键”不放时鼠标会变成手掌一样图标，这个时候鼠标点击不放移动即可拖动整个网页美工图

4、全屏与固定屏幕模式

将网页美工图转为不固定拖动范围，英文小写输入情况按“F”字母键，切换，可以三种模式互转

Photoshop之CSS切图时常用工具

Photoshop切图时常用工具,CSS div制作前PS软件常用工具介绍。

1、移动工具

ps移动工具截图" />

ps 移动工具截图

常用于选中图层对象使用，移动选中图层对应内容(图片或文字图层)在美工图位置

2、切片工具

ps切片工具截图

切片工具，是切图最重要的工具，在美工图上直接可以画好要切出的图片区域，最后即可导出为可以使用CSS布局的图片素材。

3、切片选择工具

ps切片选择工具截图

切片选择工具其实是与切片工具对应，在一个美工图中，使用切片工具会切出很多切片区域，但是要修改或选择以前切片划分好的切片这个使用就只能使用切片选择工具才能选中对应切片区域进行选择或修改。

4、前景色

前景色

两个正方形一样是方块，浮动最上面为前景色。前景色可以使用快捷键“alt+del”组合键，填充对应虚线选区或图层。

5、背景色

ps背景色工具截图

两个正方形一样是方块，靠后为背景色。背景色可以使用快捷键“ctrl+del”组合键，填充对应虚线选区或图层。

6、字体工具

ps字体工具截图

字体工具可以点击后在设计图上直接点击后输入文字，文字可以改变字体大小、字体、加粗、斜体等美化效果。