66.尚硅谷_HTML&CSS基础_ps的基本操作.avi原创

这几个这个包括浮动啊，包括我们核模型的，我们这个准备工作，就算是给他，就是这这些东西都给他说完了啊说完了接下来呢，诶我们来，嗯先下边呢，我们要做这么一个小的一个练习，这练习也比较简单，就是直接从我们这个上规谷官网上截的这么一个小图，那现在我们需要什么呢？需要通过我们的这个，呃，HMR和CS都把这图给它干嘛呀，给它转换成一个什么呀，网页啊，给它转成网页，那在对这个图进行操作之前呢，其实我们要想把它转成网页，我们先干嘛呀？诶其实我们最要做的一事，你比如说我需要去测量一下，对吧？诶我需要量这个图到底什么呀，多大个，哎，我需要知道我这个字体到底是多大个，我需要知道他们之间这个什呀，行间距到底是多大个这些东西是不是都得去测量啊，那这个测量方式也很多，比如说最简单的，我可以直接用什么呀，用截图工具去量，用截图工具量，但是我们说了用这个工具去量呢，它有它它没有。

比较麻烦，比较麻烦，那所以我们最常用的还是用什么呀？诶用我们的这个我们的这个Photoshop啊呢，已经发给大家了，那待会儿大家自己呢去去装一下，我们这装起来也比较的比较的简单直接就是什么呀，下一步下一步下一步就OK了啊没有什么，没有什么技术含量，你直接装进行了，在我们这个工具里边给大家提供了Photoshop，你装完了以后呢，诶打开以后呢，诶应该是一个类似于这样的界面，我们来简跟我这个不太一样，我这跟你的版本不太一样啊，但是呢，操作起来都是差不多的啊，都是差不多的，我就拿我这给你演示的，咱们先说一下我们这个PS一个基本使用，你装完我们要第一个事儿，我们要完成的第一个工作是什么呢？我们的默认单位，它不是什么呀，不是像素，而是英寸还是厘米之类的那么那么一个东西，那所以那我们网页用的什么单位呀，用像素，那你单位要不统一，导致你的网页你能不能做呀，不能做，你这量出是厘米，你要用像素，那你怎么整，所以我们先得干嘛呀，先得统一。

以我们这里边什么呀单位，我要把我们这个默认的单位改成像素，怎么改，鼠标在这儿右键有一个什么呀，界面选项啊，界面选项点开以后我们来看有一个什么呀，单位与标尺啊，单位标尺点开它我们来看这这有两个，诶标尺改成像素，文字改成像素啊，文字改成像素，其他的都都不用管它了，只要把这两个改成像素就OK了，然后你点确定诶就OK了啊就OK了，然后后我们来说一下这个怎么用，那打开呢，无非是干嘛的呀，是不是就整这图片里呀，诶我们要把这图片干呢，拖到这个软件里，诶一打开我们图片基本上就是这样一个界面，那我们这里边来说一下啊，那我们说了这个对于我们来说，它并不是我们需要的什么呀，一个主要的一个技能，在公司工作的时候，一般公司会有什么呀，会有美工啊，你的什么呀，哎，你的切图啊，你这些什么呀，图片的这个截取啊，这些东西都干嘛呀，一般来讲。

都是由什么呀，都是由美工来完成的啊，都应该是由美来完成的，诶也就是说你想要这个图片，妈呀，你跟美工说我要这个图片要多大个儿，你给我截完了拿过来就用就完事了，但是我们这里边为什么还要讲，诶那就是什么呀？诶避免你单位什么呀，没有美工，诶你单要没有美工你又不用，不会用，那是不是就傻了呀，诶傻了，所以这里边呢，诶我们要会一些什么呀，基本的操作，也就说即使没有美工，最简单的一个截图，最简单的对网页一个测量，我们也要能干嘛呀，可以完成啊，可以完成，所以这里边我们说的所有操作都是一些什么呀，最基本的一个操作啊，最基本的一个操作，那现在我们来说一下怎么去操作，那首先来看这这里边呢，我们看最上边有这么一个东西，这叫什么呀？呃，这叫做我们这个标尺，包括上边有一个，呃，这么一个标尺，还有左边左侧也有一个标尺，这个标尺呢，可以通过它去看我们这个图整个一个，呃大小可以做一个参。

好哎，那这个标尺怎么出来CTRL2啊CTRL2，诶CTRL2出来再按CTRL干嘛呀隐藏再按干嘛呀出来，诶这是我们这个CTRL2，我们这个标尺，然后说还有一些快捷键，我们来说，比如说现在这个图我们搁这看着可能干嘛呀，它是比较小啊，诶有时候需要这个图是不是放大一点啊，哎，放大怎么办呢？诶直接摁着这个outt，然后干嘛呀摁着你的滚轮，它就可以放大，可以缩小，然后在这儿可以显示我们当前的一个什么呀，比例表示现在是什么呀，我原图的200多倍啊，不是不是200多倍是吧，是两倍多啊，两倍多是百分之，哎200多啊，200%多啊，诶你可以一直去放大啊，可以一直去放放，你看你放大完了就看到这什么呀，这是不是就一个像素一个像素的了，诶每一个方块都是什么呀，一个像素啊，每一个方块都是一个像素，然后你可以摁什么呢？CTRL1，诶CTRL1表示什么呀，恢复到。100%啊，CTRL1恢复到100%CTRL0CTRL0什么呀，适应你的这个什么呀，屏幕大小啊，适应你这个屏幕大小，CTRL1CTRL0CTRL一百分之百CTRL0，适应你这个屏幕大小，这是一个，然后还有一个我们最常用的一个工具是什么呢？诶我们这个矩形选择框，诶那这个工具我们是来干嘛的呢？那假设我们现在说，那你看我这是不是有这么整个。

这么一个图啊，那这么一个图，我在页面里做的时候，实际上它整个是一个什么呀。我们是不是就可以放一个div啊，那既然是个div我们来看了，那这div就一定有一个什么呀，有一个高度，是不是还有一个宽度啊，诶那它这个高度是多少，它这个宽度有多少，那这会儿我们就需要干嘛呀，是不是对它进行一个测量啊，那这怎么量呢？就需要用到了我们这个矩形这个诶选择工具，那我们来看直接选中它，然后干嘛呢？在这个图片里拖，你发现拖出来干嘛呢？是不是就拖出来这么一个虚线的一个小框啊，诶虚线上的一个框，然后呢，那比如说我想量这个整个div，我就可以买呀，把这个框整个从左上角一直拖到什么呀，右下角是不是用我这个虚线框板整个这个这个div给它圈起来啊，诶圈起来以后，我们要想知道这框多大怎么办呢？诶你可以点一下你的快捷键F8会出现一个信息，你看这出来一个什么呀，W302H473W表示什么呀？哎，Y是302的像。

素，诶高度是一个什么呀，473个像素，当然我这量的不准，其实你会发现我们来看看放大一点，你看我这是多出了一个像素啊，哎，这多出了一个像素，那包括我们来再看，应该这边应该也多出来一个像素。是不是也多出一个像素呀，所以它的实际宽度应该是300啊，实际宽度应该是300，所以这里边我们会发现什么呀，我们直接通过这个矩形框就可以量任何一个任意一个区域大小，比如说我想这拖一宽，你看我这块拖的同时，它就是不是给我出来大小了呀，47乘以37，如果你没有这个给它关，哎，涂完了以后直接F8就可以出来，你现在看我这框是多少，195乘以一个什么呀，36啊，195乘以36，那这里边注意，如果你这个NF8出不来，你可以干嘛呀？诶你直接点一下这个叹号干嘛呀，也能出来啊，直接点一下这个叹号它也能出来，那你摁F8出不来的原因是什么呀？原因可能是因为你装了这个有道这个呀词典，有道词典有一个快捷键，应该是那个屏幕取词，那个快键也是什么呀，F8，所以你会发现你摁F8干嘛呀，有道有反应了，但是你的干嘛呀没反应，那你这块呢，就是我们那个快捷键冲突了，那这块你就可以将有道那个干嘛呀快捷键给它取消。

怎么取消点击我们这个有道，这右键有一个什么呀，软件设置，软件设置这有一个划叫做曲词华磁，诶它有一个什么呀，开关热键，你把这个热键给它改成无就OK了啊，改成无就OK了啊，这是一个好，然后接着我们来说这个矩形选择框，矩形选择框你选中这个框以后呢，你发现什么呀，这实际上有四个选项，这是一个，这是一个，这是一个，是不是一共有四个呀，诶我们说默认是第一个就直接拖出来，就是一什么呀，就是一个矩形的一个框，你拖多大就是什么呀，就是多大啊就是多大，然后说当你选中第二个的时候，你看啊，我选中第二个还是我第一次搓的时候，效果其实什么样是一样的，但是你看啊，我在第二次搓的时候，你看。

诶，你看我第一次拖那框消失了吗？没有消失，第一次那是不是也在呀？诶然后你发现什么呀，他是不是把我两次托那个框给合并了呀，哎合并了，但是如果要选的是第一个，你干嘛呢？你第一次拖出来了，第二次拖第一个是不是就没了呀？诶而第二个我选中一个拖出一个框，然后你看我多次拖这框，他们最后是不是合并成。一个呀，哎，那这个的好处就是什么呀，有了它以后，我就可以同时选中多个部分，比如说我这一次诶拖完了，我觉得好像选少了干嘛的。

我说可以接着选呀，哎，我觉得可能还少干嘛呀，我再接着选他干嘛呀，他把我每次选一个部分是不是都给我加到一起了呀，哎，给我加到一起啊，这是我们说第二一个第二个功能，然后再来看第三一个框，第三一个框和第二个呢，诶正好相反，有点有点像，我们来看什么效果啊，哎，那这里边我们来看，现在我这也脱了一框，你会发现什么呢？第一个框消没消失没消失，那你来看着啊，我当我第二个框和我第一个框它们之间是不是有一个什么呀，交集的吧，哎，有一个相交的一个部分，我们来看效果啊，总体。完了，是不是香蕉那一部分就没了呀？哎，香蕉那部分没了，同理，这一块你看我这是不是也有一个。香蕉这部分呀，哎，我这一撒手是不是也没了呀，哎也没了啊，所以这个第三个什么效果呀，它可以去删除，也就说它可以把你这个相交的部分给你去删掉，而我们第二个是干嘛呀，是给你是不是加一块啊，诶给你加一块，而我们第三个叫什么呀，把你相交的部分给你删除掉，那它什么好处啊，假如说你这不小心圈你像这。

我是不是多圈了几个像素啊，诶可以干嘛呢？哎，通过这块。诶是不是把这多余的相当给切了呀，哎，切了啊，所以这一块我们方便我们去修正，然后还有一个最后一个，最后一个呢，诶就更简单了，第三个是相交部分给你干嘛呀，删掉，而最后一个呢。哎，只保留什么呀，相交的部分啊，它只保留相交部分，不相交部分管啊就不要了啊就不要了，这是我们说这四种，诶四种矩形框我们用的都会比较比较多啊，比较多四种大会熟悉一下，这是一个，然后还有就是还有什么呀，还有就是我们这个辅助线啊，辅助线也就是说我们去写网页的时候，经常需要干嘛呀，往网页里拖一些这种辅助线，帮助我们去测量，那怎么拖辅助线，我们来看一下诶直接把鼠标放在什么呀，标尺着标尺上往下一拖，诶你看是不是出来一根线呀，哎，你想放哪，比如说放到这一撒手，这是出一根线呀，哎，那这同样左侧也可以干嘛呀。

诶也可以拖，你看是不是又拖出一根来呀，哎，再拖干嘛呢？哎也可以拖，再往下是不是也可以拖呀，哎从这个可以拖出什么呀，水平的，还有这个垂直一个水平线，拖水平线的帮好处是什么呀？就是可以帮助我们去测量啊，帮我们来看整个网页一个构图啊，方便我们操作的，那有的时候你会发现辅助线多了以后，页面会有点什么呀，有一点乱，我可以用什么呀？CTRLH，诶可以隐藏这个辅助片，再用CTRLH干嘛了就出来了，诶这辅助片如果你不想要了，选中这个拖拽这个，哎往这个干嘛呀，可以给他。往回拖，诶可以给它往回拖啊，可以给它扔回去啊，可以扔回去，这是我们说这个辅助线，然后还有的工具呢，其实这些都是我们最常用的了，还有的工具就是什么呀，有的时候我们需要对这个屏幕进行一个取色，比如说我这有一个字体，我是不是需要这个是什么颜色呀？诶我要知道它什么颜色，那怎么知道啊，来点这儿，我们这有一个浅景色，直接一点它出来这么一个叫什么呀，石色气，诶你想取哪儿，比如说我想取这个夜这个字儿的颜色，我这一取走你，诶出来一个什么呀，83006F，这就是这个字的颜色，比如说我想取这个这个字的颜色，我一取是什么呀？F4个零，其实就是一个什么呀，红色，比如说想取这块颜色，我这一取是因什么呀？诶F1F1F1想取哪颜色你就直接点哪去取就OK了，如果觉得小你可以干嘛，比如说取这虚线好像有点不方便取，摁着卡out给它干嘛呀？诶你现在给它关上摁着out给他。

放大一点，诶，然后你再去取是这么一个DE3个D一个九，这么一个颜色啊，这么一个颜色，好这个呢，是我们说的的一个简单操作，但是对于我们现在来说，关键的地方你就上来，别忘了把什么呀，把单位给它改了，其他的呢都好说啊，其他都好说好，那这一块呢，简单操作呢，我们先介绍这么多啊，然后咱们一边用在一边去学啊，一边用在一边学。