保存png格式图片

上节课我们已经利用参考线划分出了header、body以及footer区域的布局，那么从这节课起，我们将开始为网站添加各项工具和内容。今天这节课我们就从为网站添加logo做起。

有的人可能会想，添加网站logo不就是往设计文件里加一张图片吗，简单地很。实际上，可别小瞧这么一个步骤，这里面还是涉及到很多PS的技巧和知识点的。

一般web网站所使用的logo多为png格式的透明背景的图片。

那么什么是png格式呢？png和jpeg格式有什么区别呢？今天我们也来简单讲解一下。

jpeg是最常用的图像文件格式，文件后辍名为”．jpg”或”．jpeg”，是一种有损压缩格式，能够将图像压缩在很小的储存空间，图片占用内存较少，它是有损图片的压缩，去除冗余的图像和色彩数据，获得极高的压缩率的同时展现十分生动的图像，换句话说就是用最少的磁盘空间得到较好的图片质量，这样的特性让其目前成为了主流的图像文件格式。

png即可移植网络图片形式，也是位图文件存储格式，它可以进行无损压缩，可以直接作为素材使用，因为它有一个特点:背景透明。

简单来说最明显的区别就是png格式可以保存为透明背景的图片，jpeg不可以。png是可以转换成jpeg的，但是透明像素会变成白色，而且图像信息会丢失一部分。

了解了png图片格式的特点，那么想要添加一个png格式的logo，那么首先你要学会制作并保存一个png格式的图片。

logo的制作我们在第一章的课程里已经讲过，在这里我们将直接使用之前设计的logo文件。我们将之前课程中制作的logo的源文件打开。

你会发现我们文件中有两个图层，一个是文字图层，还有一个是背景图层 。背景图层是比较特殊的一个图层，它永远在图层面板的最底层，不能调整堆叠顺序，也不能添加效果。如果我们想要对背景图层进行操作，则先需要将背景图层转换成一个普通的图层。如果我们需要将背景图层转换成普通图层则只需要双击背景图层，然后在打开的新建图层中输入一个名称，或使用默认的名称，接着点击确定按钮即可。

了解背景图层的相关知识后我们回到设计文件中来，这时候当我们把背景图层隐藏下看看有什么效果。

隐藏背景图层后可以发现，画布上的PSCAST文字后面出现了灰白像素块背景。如果PS出现这样的背景，则代表着该画布上除图像以外都是透明的。

我们现在把该显示状态下的图像导出：“文件→储存为” 将文件保存到相应的项目目录下面。

插播一个我个人的保存经验：我们在学习PS前期就要养成创建保存路径和给文件命名的习惯，不要随手保存到桌面，否则在你之后的工作中会给你带来很多不必要的麻烦。

比如导出过多的图片时你不知道某个图片导出在什么位置；导出的时候没有命名好，新导出的图片直接替换了之前的图片，导致之前的图片丢失等等情况。这些都是我之前踩过的坑，希望大家可以吸取我的经验。

我们将刚刚保存的文件命名：logo.png(后缀png是自动生成的，名称可以自定义修改)

格式选择：PNG

如果你需要导出透明的图片而背景图层没有隐藏的话，就有可能出现一个问题：即使保存图片的时候格式是png，但你的图片仍然是不透明的，如下图所示：

如何正确地保存png格式的图片这就节课就先讲到这里，大家一定要跟着实践操作一遍。

移动放置logo图片

保存好透明图片后，我们便可以将该透明png格式的logo拖拽放置到网页设计的画布里。使用移动工具或快捷键【V】选中该logo图层，然后单击鼠标将其拖拽移到 header部分的左侧。

移动工具也是我们在PS应用中经常使用到的工具，所以在这里我们需要详细介绍下：

在同一个文档里移动图像：

移动整体图像：在“图层”面板里单击要移动的对象所在的图层，使用移动工具在画布中单击并拖动鼠标即可移动所选中的图像。

移动部分图像：如果我们只想要移动图像的一部分，那么就要借助选框工具，单击选择图像图层，然后利用选框工具框选中自己想要移动的部分，接着拖动鼠标即可移动所框选的部分。

上面所说的选框工具其实还有很多种，我们可以结合自己的实际需要框选出不同形状的选区。选框类工具包括矩形选框工具、椭圆形选框工具、单行选框工具以及单列选框工具，它们都可以创建出规则的形状选区。

当然了，我们还可以使用套索工具、多边形套索工具和磁性套索工具来创建出不规则的选区，这部分的内容会随着我们不断的学习而一步步地了解。

在不同文档间移动图像：

有的时候我们需要将一个文档里的图像移动到另一个文档里，列如我们上面讲的将logo文件移动到我们设计的画布里，执行的其实就是在不同文档间移动的操作。

如图，打开01和02这两个文档，选择移动工具，将光标放在01的画面中，单击并拖动想要移动的图像logo至02文档的标题栏，停留片刻切换到02的文档中，移动到02文档画面中放开鼠标即可将该logo图像拖入到02文档里。

调整logo大小

利用移动工具放置好logo位置后，这时候如果该logo太大了我们就需要将图片进行等比缩小调整。什么是等比，等比就是在保证图像的宽度与长度保持统一的比例进行放大或缩小。

菜单栏位置：选择“编辑-自由变换”或快捷键 【Ctrl】+【T】

接着我们按住键盘【shift】键，然后在任意4个直角中选择一个进行拖拽，图片就这样被你任意地等比放大缩小了。

在PS里，图像的移动、旋转、缩放都称为图像的变换操作，这些变换功能的使用可以帮助我们改变图像现有状态从而获得我们想要的图像。变换功能在PS的学习中会经常用到，需要我们重点掌握。

菜单栏“编辑→自由变换”，下拉菜单中包含了各种变换命令。或者快捷键【Ctrl】+【T】，点击鼠标右键也可以调出各种图像变换功能。

当我们执行这些命令的时候，当前对象就会出现一个矩形框，我们将其称呼为定界框，定界框的中间位置有一个中心点，拖拽它可以直接移动对象的位置。定界框四周有控制点，拖拽控制点可以直接变换对象的形状。

以下所示即为中心点在不同位置的图像旋转效果：

有的变换效果可能暂时还用不到，但是大家不妨都动手试一试，这样便可以有个直观的感受，等到后续用到的时候可以更加得心应手。

回到设计中来，我们将logo文件等比缩小并将其放置到header区域的左上角，如下图所示：

利用移动工具和自由变换功能调整放置好logo后大家有没有觉得还差一步操作呢？给大家5秒钟思考时间！

5

4

3

2

1

时间到～这个时候应该保存下PS文件【Ctrl】+【S】，切记随时保存！

知识点总结：

1、了解PNG透明格式的图片，并学会保存。

2、在网站里添加PNG格式的图片并移动调整图像的大小。

大家可以顺着我的总结点回顾一下相关的操作，回顾的过程中记得顺便复习一下相关快捷键的使用，当你养成使用快捷键的习惯后会对今后的PS操作产生很大的帮助！