00:00
还是说了一个我们这个呃图片整合,我们这么一个通过这么一个练习来讲的,我们说这么一个这个雪碧图,那实际上我们在开发中的这种东西,我们经翅经翅用到,比如说我这块有一个图片,呃图片我们比如说呢,这个这个是我直接从呃亚马逊那个网站倒下来的,叫什么呀?亚马逊SP啊,亚马逊SP,这就是我们亚马逊那个网站的这个雪碧图啊,你打开你发现什么呀,这里边给你放了是不是一堆这种,包括他这些logo啊,包括这这些小图标啊,包括他这些玩意儿啊,他不是给你放了一堆这种东西啊,嗯,那这个东西他就干嘛呀,这就是一个雪碧图,那实际上他就是将我们这一堆的图片给它整合到了一个一起,那现在我们说,那我要想用这个雪碧图,那我要怎么用啊,比如说诶咱们先说简单的,比如说我想干嘛呢,我就想在页面里显示这么一个图标,那我要怎么办,我是不是要先得在页面里定义这么一个元素啊,哎,定义这么这么一个元素啊。
01:00
来,我们这来写一个。直接写一个叫一个这个悬密图,诶,那我们这一块定一个元素,比如说我就来一个div div给它来一个class,我们叫一个这个box box1诶我就用这个来显示,那这个问题就来了,这个元素我要设置的是多大呢?这个元素我们要设置多大呢?哎,我们想要这个图多大,我这元素是多大呀,如果你这图这么大,你元素是不是就得就得这么大呀?哎,如果你图只有这么点,你元素是不是就这么点啊,所以我们这个元素要和我们这个要用那个什么呀,图片的大小应该是什么呀,是不是一样的呀?哎,一样的,所以这里边我们需要先要量一下这个这个图标的大小,那这里边呢,我们来关掉,用我们这个来量一下,直接打开方式,用我们这个Photoshop打开以后,我们要量谁呢?我们来看看我们要量的是。是不是这个图标啊,哎,它这个logo,那这里边我们要量之前呢,最好我们这块啊,先给它拖住这么一个什么呀,辅助线,把它的大小给它确定一下,那下边呢,我们来看,大概我们就给它到。
02:07
到这个位置啊,这个无所谓,因为它下边是不是都是白的呀,咱们多量点少量其实差不太多啊,我们就量到这个位置,然后左边呢,我给他量到这块呢,你你可以量到边界,但是你要注意它实际上我们如果从右边从左边开始显示的话,它这边是不是有这么一段距离啊,诶有那边距离,所以最好能让它干嘛呀,相对来说靠一个这个居中的一个位置啊,我们来看大概是多少。是是这个梁子稍微有点大,是不是这么这么宽呀,诶你把这块你给它放在这块,然后这个拖线呢,你就拖着这宽这诶那这个线就可以不要了,诶也就是说正好是把我们这个图标是不是给它放到一个靠中间这一个位置啊,诶靠中间这个位置,那现在我们再量这个图标多大个啊,有这辅助线以后我们量的时候就好量一点了,连一量量到我们这个辅助线这块,这是诶这还多量了一个像素是吧?当然其实不差这么多,咱们就咱们就可以可着这个去找这块无所谓,因为下边都是空白的啊,这个我刚才看了多少,F8宽度是一个129,高度是一个45,那所以咱们这个大小是什么呀?Y129个像素,然后高度是一个45个像素是不是就OK了呀?诶,然后我们再设置一个back。
03:21
哎,Image设置一个背景图片,把它干嘛呢?CTRLC直接给它粘过来,那我们background background image用我们这个URL,就用我们这个amazing这个SCRIPT1保存,那这个图片的好处就是我现在用不用设置偏移量不用了,为什么?因为我这图片是不是正好在左上角啊,诶正好在左上角啊,然后呢,我这一刷这不是这个页面,直接CTRL1运行,是不是正好是这个log呀,诶是正好这个logo,那这个省事,为什么呀,因为我们选了一个左上角的一个图标,但是如果我们选的不是这个图标,你怎么办呢?诶我们来看看吧,比如说我们找一谁呢。咱们找一个简单一点的,咱们就找这个购物车,诶这购物车干嘛呀,他这个是不是比较好量一点啊,或者用哪个都行啊,其实都一样,你就拿这个购物车来举个例子,那这里边我们先量一下购物车大小,我还是啊,我用辅助线先把这个大小给它干嘛呀?诶给它框出来,但是我们这个辅助线是有用的啊,给它框出来。
04:18
诶,大概这么一大个啊,我就框左上角行了,下边就不框了啊,我直接框左上角,我先量它这个大小。正合适吧,诶来F8我们来看这是一个什么呀,宽度是一个42,高度是不是一个30啊,诶所以这里边我们先定义一个div,来一个BOX2,直接复制,我们直接改一个和叫一个BOX2,宽度是一个42,高度是30,宽度42,高度30,诶是不是还是这个图片啊,但是这回就不行了,我一刷新它显示一什么安安安是吧,你看显示的正合适,显示一安是吧,挺巧,那这个玩意儿我们说为什么显示一安,哎,我们说了默认它是不是显示的是左上角啊,哎,左上角那个大小是不是正好到大概这个位置啊,所以出现什么呀,出来安这么一个效果,而我们现在要显示的是谁呀?
05:16
是不是这购物车呀,哎招购物车,那这块怎么办?我们是不是要设置我们这个偏移量啊,哎,偏移量也就是说我是不是要把它往上移啊,哎,往上移,那我们来设置我们这个偏移量,设置偏移量我们直接来一个bag的一个这个position是不是都往上移啊,那问题就来了,我这偏量设置多少啊,我水平移多少,我垂直移多少啊?哎,我们量一下啊,这块怎么量啊,我们说了我是要干嘛,我是要把这个图片移动到哪,移动到左上角了呀,说白了就是什么呀,就是把这个点移到哪来,是不是移到这来呀?哎,把这个点移到这来,所以我只需要量的是什么?这两个点之间的一个距离吧,哎,那我们来需要两个距离,一个是我们这个X,它是不是一个Y啊,我直接从这移量是不是正好这个宽是不是就是这个X,这个高是不是就这Y啊,哎这个,哎,那我们来看这个距离是看看啊这量不量体。
06:16
多了一点是吧,哎,这个玩意儿呢,就是很恶心,哎,不过他多了一像素是吧,刚才给刨一下就完了是吧,哎,我还重新拖一下,诶诶诶。哎,行了,咱们多就多了是吧,哎,正好多了一个像素,咱们给它刨就行了,宽度是一什么呀,59,那是也就什么呀,是不是,哎,是不是刨一个是58呀,也就是说我这一段距离是不是58呀,那我需要干嘛呀,我需要把这个图片往这边是不是移58,那这边一五十八是正值,是负值,哎,负值,所以第一个值我是不一个负58个像素啊,负58像素,那我们再来看,那第二个值是什么呀?哎,那我是不是要干嘛呀,我是要把它往上去移啊,哎,而我们上边这个距离是不是一个339啊,诶多了一个像素应该是33338,所以干嘛呀,上边应该往上移338个像素,那是负值是正值啊,诶也是负值,负的一个338像素保存再来看刷新走,你是不是正好是它呀,诶正好是它啊,所以注意你量这个距离的时候,实际上我们是要干嘛,我是要干嘛呀,将你要用的那个图标,将你要用的那个图片一直移动到我们整个元素。
07:33
做一个什么呀,是不是左上角啊,把它从这个位置移到这个位置,所以你知道量的是什么呀,它们这两个点之间的一个什么呀,距离,一个水平距离,还有一个什么呀,垂直距离,量完了就OK了啊,量就OK了,所以这一块你量的时候,你要想一下这个距离到底是什么啊,到底是怎么去移动的啊,这是我们说雪比图一个使用,那你要用别的,比如说你你想用这个这个图标,你是不是就可以直接往往上移,往上移这么多就行了呀,哎,往上移那么多了,垂水平方向甚至可以搏不动啊,水平方向可以甚至可以不动啊,所以这个图一定要给它使用明白了啊,一定要使用明白了,但是其实这就会带来一个问题。
08:11
带来什么问题啊,这图挺好用的是吧,但是我们想想这图它做起来是不是会有点麻烦呀,会有点麻烦,那我们实际开发中呢,一般会有什么呀?诶会有美工去帮我们去处理这个事儿啊,会有美工帮我们处理这事,但是我们要考虑一个问题是什么呀?诶如果没有美工我们怎么去做这个图啊,那我们先说啊,实际上你在网上去搜啊,你网上去搜这种什么呀,雪碧图你能搜出什么呀,一堆这种在线的制作工具,它是怎么制作的呀?你给他把图片都给他传上去,他给你咔咔咔咔传,传成一图给你干嘛呀,你再下载回来,那样是比较方便的,也是比较简单的,但是我们现在主要说的什么呀?诶那种方式我们自己是不能去掌控的,也就是我们需要什么呀,我们需要用自己去做这个水雪碧图,我们如何去制作啊,我们来学习一下怎么做呢?那咱们举个例子啊,举个例子,比如说现在我就拿我这三张图片举例子,诶我要把这三张图片干嘛呢?整合成一张图片,我要怎么做呢?那首先我们是不是要先把这三张图片都都给它打开啊,哎,都在我们这个里面。
09:12
把它关上啊,这我要给它拖拖这了,来来,我们把这个图呢,我都给它打开来,咱们按顺序吧,另一个,然后这是一个ho,一个还有一个我们这什么呀,哎,ACTIVE3个图片我们都给打开,一个是active,一个是whole,还有一个是什么呀,Link,那我们现在干嘛呀,我现在就是想干嘛呢,将我这个ho还有active都整合到我这个什么呀。Link里,换句话说,我是不是想把这两个图片是不是添加到这个图片里啊,哎,这个图片里,那这块就带来了第一个问题,那首先我们来看,我们说了有一个问题,你看我们这个画画的地方,这个叫什么呀?是不是叫画布啊,诶你会发现我这个画布是不是正好就是我这一个按钮的地方呀?诶那我们先说我这个画布容得下,容不下三个按钮容不下,所以你如果想把这两个按钮放进来,你是不是先需要调整我们这个什么呀,画布的大小啊,哎,画布的大小,那我们调整之前干嘛呢?我这先拖一个辅助线,我来放在这儿,那我们来说,那我这个辅助线来干嘛呀?来表示一个什么呀,边界啊,这是我第一张图,一个什么呀边界,那我们现在说我这图可以怎么放,我可以横着放,也可以什么呀,诶也可以竖着放,那根据你的需求自己去设置啊,自己去设计,那我们说了,那你要横着放,你需要干嘛呀,把画布弄弄宽一点吧,哎,你要竖着话,是不是给它弄高一点啊,哎,弄高一点,那我们先要说是怎么去调整这个。
10:39
什么呀,画布啊,怎么去调整来点击我们这个什么呀?诶图像有一个什么呀,叫做画布大小啊画布大小,那我们来说现在它的宽度是93,高度是一个什么呀,29,那我们是不是假如说我们需要它宽一点,我要调整谁是不是调整宽度啊?诶调整宽度,现在宽度是93,我应该调整多少合适?我是不是想放三个按钮啊,所以我是不是应该让它乘以乘以三呀?哎乘以三三九二十七三三得九,是不是279啊A279大小有了啊,这个大小我们扩设置成279就OK了,然后接下来我们要面临的一个问题是什么呀?诶我这画布你要调整大小,你是往这边变呢?你还是往这边变,你还是两边都变,你画布是不是得有一个方向啊,哎,得有一个方向,所以你看它这是有一个定位啊,我们希望图片干嘛呀,是是往往右延伸啊,哎往右延伸,所以把这个箭头干嘛呢?往后点一下,是不是这个方向是不是都冲这边了。
11:39
然后我们这个画布定完了,会自动往这个方向去延伸啊,自动往这个方向延伸,然后我这一点确定走你。是不是这块大了呀,哎,这块大了以后,那接下来我们是不是把这两张图片给请过来就行了呀,哎,但是请过来之前呢,我们先把这个位置给他干嘛呀,给他定出来,省着他这干嘛呀,哎,省它串啊,省得串去来我们来每一个按钮大小是不是都是一样的呀,我拿这个框给它框一下啊给它框一下,然后呢,咱往这一拖。
12:06
这也拖一条辅助线,诶,那现在这位置我们就定出来了,中间这个放这儿,然后右边这个是不是放这儿啊,哎,谁也别打架,然后这就简单了。回到我们这后院,点着我们这个箭头,诶摁着它不放走你,你看他是不是起来了,哎,往这儿走走。诶,来到你想要要的位置,这一撒手他是不是就过来了,诶你可以稍微的去微调一下这个位置,它还有一个辅助线给你显出来了,一撒手这是不是急了呀,然后再找我们这个active也是摁之不擦手走你。过来,然后到这儿一撒手微调一下位置是不是就OK了呀?诶你整合仨图这样,你整合十个图是不是也是这样啊?诶道理都是一样的,整合完了以后我们来文件来一个,注意是存储为web所用格式,这个图格式你就没得选了,只能用我们这个PNG24,你现在看它是不是有点白边啊,因为GF不支持复杂的透明,改成我们这个PNG24,然后我们这来什么呢?存储。
13:05
哎,存储诶写一个名,你就叫一个什么呀,诶BTN2这样一个PNNG,然后一保存,那再来看我这个图片干嘛了,是不是就整合完了呀?诶整合完了啊,那整合完了我们来看看它,诶咱们来跟他比一下吧,粘过来这个是一个9.87,这三个呢,十六点十,16.6吧,哎,你看整合完了实际上比我们这三个图片加一块都要小,那我们说他能不能用啊。CTRLC试试粘到我们这个BTN里边,找到我们刚才那个练习怎么测呀,我直接把BTN改成BTN a2是不是就行了呀,保存一运行是不是效果是一样的呀,诶效果是一模一样的啊,也可以用啊,所以你要去做这个图片整合,要去做这个雪碧图很简单,先调整画布,然后再把图片给它一张一张给它拖进来是不是行了,哎,拖进就行了啊,你自己做的这块你用的时候也会更更顺手一些,但是说实话做这东西确实有点有点麻烦啊,有点麻烦,尤其是你这个图比较多的时候啊,但是这个东西挺好玩的是吧,对,挺好玩。
14:07
来,我们来停一下。
我来说两句