1.2 软件必备知识

1.2.1 了解Photoshop

• 为何首选Photoshop设计网页界面

设计网页界面的工具多样，如Sketch、Photoshop、Illustrator、InDesign等，还有类似Wix的线上平台。那么对于网页设计，到底什么样的工具更高效、更有优势呢？笔者推荐Photoshop，那么就让我们一起来了解为什么这款软件能脱颖而出。

第1点：与前后端开发人员更好地协作（重中之重）。如图1-1~图1-4所示，从软件界面中可以清晰地看到各种参数。

第2点：不需要编写代码即可设计网页效果和概念图。

第3点：能够快速导出网页所需要的资源和素材。

第4点：适配不同设备的屏幕尺寸，如图1-5所示。

第5点：方便展示不同的Web改编版本，如图1-6所示。

第6点：基本的原型准备，如图1-7所示。

第7点：能够通过视觉传达直观地获得用户反馈，找出设计缺陷，展示设计效果。

第8点：能够更方便地处理网页所需要的图片、图标、特效和字体。

第9点：代表了一种新的工作流程的升级和演变。

• Photoshop CC版本的优势

有的人比较懒，或者不想接受新事物，不想学习新功能，甚至很多年过去了还在使用老版本的Photoshop，但是每一款软件升级都会有它的必然趋势和优势。作为一名设计师，我们不能将“趋势”丢于千里之外，软件趋势、市场趋势、设计趋势、技巧趋势，这些都是需要我们发现并接受的。使用高版本的Photoshop，不仅仅能够提高我们的工作质量和效率，还能够改善我们的思维方式，养成好的设计习惯。下面，我们来看看较高版本Photoshop的一些容易被忽略的技巧。图1-8所示为Photoshop CC 2017的初始界面。

第1点：支持不同设备分辨率选择，提高准确性，如图1-9所示。

第2点：支持字体收藏选项，极大地提高设计效率，如图1-10所示。

第3点：更加稳定地支持矢量图svg格式直接导出，如图1-11所示。

第4点：默认附带更强大的参考线网格系统，避免出现新版本软件不支持常用网格插件的问题，如图1-12所示。

第5点：可以智能识别并匹配图片字体，如图1-13所示。

第6点：可以建立多个画板，简化设计过程，加强对比，如图1-14所示。

• 需要熟悉并掌握的Photoshop CC工具和技巧

以下列出了学习本书所必须掌握的Photoshop基本功能和常用的一些工具，就不做截图介绍了，大家很容易通过其他渠道找到和学习这些基本功能，本书只是点到为止。希望基本功不够扎实的读者按照下面列出的内容进一步学习。

· 熟悉Photoshop面板，以及菜单栏、属性栏、工具栏的位置和名称。

· 熟练使用形状工具。

· 熟练使用颜色填充、选区工具。

· 熟练使用钢笔工具。

· 熟练使用图层、图层选项和图层的混合属性。

· 熟悉图层叠加模式。

· 熟练使用蒙版和调节层。

· 学会使用参考线和参考线网格。

· 熟悉Web图片格式的输出。

· 熟悉压缩PNG图片的方法（Mac：ImageAlpha；Windows：PNGoo）。

· 熟悉文本工具及其属性，包括字符样式、段落样式的使用。

· 熟悉字体属性面板。

· 熟悉对齐工具的使用方法。

· 熟悉色板的新建和使用。

· 熟悉自定义填充形状的使用。

· 熟悉基本的画笔工具的调节和使用。

· 熟悉基本的饱和度、色阶的调节。

· 熟悉快速选择当前图层的技巧。

· 熟练使用快速切换文本工具大小写的快捷键（【Ctrl+Shift+K】键）。

· 熟悉其他常用快捷键，学会自定义快捷键、自定义工作面板，提高设计效率。

1.2.2 切图技巧

Dreamweaver一直受开发者青睐，它具有非常强大的功能和扩展性，给前端和后端开发人员提供了很多便利。我们创作设计稿，都需要考虑如何与Dreamweaver协作，如何切图以供Dreamweaver使用。这部分我们将分别讲解Photoshop和Dreamweaver两个软件的切图技巧。

• 使用Photoshop高效切图

网页界面，单独来看它是不具备商业价值的。任何网页都是需要浏览器或其他设备来供用户浏览和使用的，因此UI设计师应该时刻考虑与前端的协作问题，考虑设计是否适合切图、是否利于开发和扩展、是否适合响应式。

网页设计发展很迅速，各种各样的高端技术都可以运用到网页设计上，那么响应式设计自然是一个最基本的、必须满足的设计需求。现在无论设计哪种Web界面，都必须考虑不同设备不同分辨率的效果和兼容性，只顾PC的时代已经过去。但是，在项目中为所有图像创建众多不同的分辨率版本可能会是一项艰巨的任务。笔者根据自己的经验，列出了一些PSD文件与Dreamweaver协作的处理方式。

本书中讲解Dreamweaver的协作，是希望能够扩展大家的思维，能够帮助大家更好地运用Photoshop设计实用的界面，而不单纯只是设计一个漂亮的界面。当然，这并不是要求大家一定要会使用Dreamweaver，或者一定要学习编码。以下列举的几个方面，是笔者认为比较高效、准确性高的切图方式。以前我们可能会使用Photoshop自带的“切片”工具，但是其实我们需要更有针对性地进行切图。建议将以下示例中的所有重要数值整理成一个txt或word文档，以便更好地让开发者参照。

01 选中当前图层，单击鼠标右键，选择【快速导出为PNG】或【导出为】菜单项，单独导出图像，常用JPG、PNG、SVG格式，如图1-15所示。

02 使用【标尺工具】精确测量需要用到的尺寸，记录数值，如图1-16所示。

03 使用【吸管工具】取色，并记录色彩值（必要时应该记录RGB值），如图1-17所示。

04 选中当前图层，单击鼠标右键复制CSS样式，然后粘贴于文本框中，记录图1-18所示的数值，供前端开发人员使用。如果你不太清楚记录哪些数值，可以直接将代码记录下来提供给开发者参照。

• 使用Dreamweaver高效切图

前面我们使用的是Photoshop软件来获取切图信息，以下我们将使用Dreamweaver来获取PSD文件的信息。前提是我们需要将PSD文件上传到CC库中。由于我国的网速不一定能够满足每一个设计师，可能存在上传错误或无法上传的问题，但是使用Dreamveaver快速读取PSD信息的方法，还是值得大家学习了解的。

01 从菜单栏的【窗口】中打开Dreamweaver的【Extract】（提取）面板，我们可以看到官方默认的PSD演示，如图1-19和图1-20所示。

02 定位到PSD文件的图层，可以看到详细的数值信息，如图1-21所示，这些信息都可提供给前端开发人员使用。

03 上传PSD文件后即可使用提取功能，如图1-22所示。

1.2.3 文档标注技巧

在文件交接过程中，我们通常需要对设计图进行标注，配合我们的切图来帮助前端开发人员完成工作。每一个界面设计师都希望成品网站能够高度还原自己的效果图，但是往往事实并不是如此。理想很丰满，现实很骨感，这就要求设计师和开发者有更好的协作能力。

对于标注，如果单纯使用Photoshop，效率会比较低，而且很不方便。我们可以使用一些第三方软件或云平台帮助设计师进行标注。笔者推荐Assistor PS这款第三方应用，它能够兼容最新版本（CC2017）的Photoshop，而且效率极高，对于一个热衷于Photoshop的设计师来说，是最好不过的选择。Assistor PS拥有多种功能，这里我们只需要掌握它的标注功能即可，其他功能一般是直接使用Photoshop来完成。

01 首先下载并安装Assistor PS，然后打开Photoshop软件，如果成功兼容，可以看到操作面板，如图1-23所示。

02 选中一个或多个要标注的图层或文件夹，用鼠标左键单击【Size】按钮，即可标注对象的尺寸，如图1-24所示。

03 选中要标注的图层或文件夹，用鼠标左键单击【Spacing】按钮，即可标注对象到画布边缘之间的距离，如图1-25所示。

04 选中要标注的文字图层，用鼠标左键单击【Type info】按钮，即可标注文字的详细属性，如图1-26所示。

这里还介绍一种笔者自己的标注方法——使用灯箱效果来标注图片，这种标注方法也很简单，直接使用Photoshop的线条和文字工具即可，如图1-27所示。它有以下几个优势。

· 此方法适合多种人群浏览，适合与客户沟通，适合与开发者协作。

· 不影响原效果图美观。

· 可以添加交互文字、说明等，扩展性强。

· 可以用于对比不同版本的文档标注。

· 配合Assistor PS标注自动生成的图层，可以更好地标注你的设计。

学习到这里，你已经迈出了重要的一步，虽然第1章更多的是引导，但是你有没有发现，其实你已经学会了不少Web设计技巧，学会了新的思维方式和工作流程。是不是很令人开心？

基本功扎实了，你还有什么理由不继续学习？别急，本章还有几个知识点，对你在学习后面的核心内容的自我定位，以及对网页设计的目标定位有很大的帮助。前面的内容是基本功预热，那本章剩下的内容就是思想预热。