制图心情坊

制图心情坊 

【学堂】-新手第二课:图片的大小与裁剪

收藏
分享到:

楼主爱妹妈 2010-05-17 13:37:26 引用

aimeigf

     关于图片的大小与裁剪,我们自己用数码相机拍摄的照片要上传到论坛上或是制作到网页中,就需要用到这方面的知识了。


【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理

  先打开一张图片。就看这一张吧。色彩很漂亮的风光照片。看上去这张照片并不大。其实这是我在制作网页的时候强行缩小的。所以说图片的真实大小,仅凭眼睛看是看不出来的。我们必须要知道它的具体尺寸。这有两个办法:
第一个办法是下载图片:在网页上,用右键点"图片另存为",就可以把图片保存在自己的电脑中。然后就可以看到这张图片的尺寸大小与文件量大小了。
第二个办法是:点一下图片,让它变成最大,然后用右键点一下图片,再点"属性",可以看到一张图片的尺寸大小与文件量的大小。如这张图片的原图是800*568,它的文件量大小是447k。我们可以用PHOTOSHOP来改变它的长与宽,并改变它的文件量,以适应网页与论坛的需要。知道了原图的尺寸,我们就可以避免马赛克的出现。一张图片,如果放大到了超过它的原先尺寸,它就会出现马赛克。以后在制作FLASH时的时候就可以避免了。另外,有些图片需要进行选题与裁剪,让它更加突出主题,更加精练。这些就是我们今天所要学的内容。
  现在我们打开PS,打开这张图片。现在我们所看到的图片也不是它的真实大小,而是PS调整的适当的工作面显示大小。上面写着50%,只是一半。如果是百分之百的话,就要有四张拼起来那么大。它的真实大小如果在800*600的电脑屏幕上来,会占满整个屏幕,就是一张屏幕保护图片。(以下显示的图片,都是在PS中的工作图片,真实大小,没有进行网页的强行缩小)
一、裁剪图片:
  先来学习如何裁剪图片。点工具栏左下第三个工具"裁剪工具"。
【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理

然后到图上,按下鼠标,在我们需要留下的画面上划出一个矩形后松手。这时,我们可以看到:矩形之外的画面变暗了,变暗的部分是将要裁去的画面。

【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理

这个矩形框我们已经熟悉了,它就是调整框。我们可以移动那些小方块进行调整,还可以把矩形框旋转,直到满意为止。现在我们要考虑的只是画面的精练与美观,长与宽的比例,而不必考虑它的尺寸大小与文件量的大小。这方面过后我们会再进行处理。当你对画面满意后,就可以按下工具属性栏最右边的"对勾",(也可以在图片内双击鼠标。)

【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理

图片就裁剪成功了。我们要的部分即矩形框内的画面被留下来了,其它部分就消失了。图片就成了下面这个样子了。

【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理
是不是比先前更精练,更有纵深感呢?这只是各人的艺术眼光不同而已。先前是突出山与石,现在是突出蓝天与道路了。
  那么,现在的新图的尺寸又是多少了呢?接下来我们继续进行处理。

二、处理图片的长与宽尺寸大小:
  打开菜单"图像"下的"图像大小"。出来一个对话框。

【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理

(注意:上面所写的"像素大小:642k"不是文件量的大小。"文档大小"也不是文件量的大小,因为这里面还有一个图片像素分辨率的问题,与屏幕显示分辨率的问题,这里所指的是打印机打印的情况。这些,我们都可以不去管它,我们只以像素值来衡量。如大多数的FLASH制作的尺寸是550*400。我们可以用这个尺寸也推断图片的真实大小。)
现在我们看到这张图是440*498像素。这正是经过裁剪后的图片的真实大小。而裁剪前的图片是800*600,近一半大小。
  不过,现在我们所看到的这个经过裁剪的新图也不是它的真实大小,还是在PS中的工作区显示大小。 看一张图片是不是真实大小,只要看图片上边沿的文件名@后面是不是100%就可以了。
  现在,我们要把这张图片的长与宽缩小。从这个对话框上,我们可以看到现在的尺寸是440*498。一般我们总是把图片缩小为好,而不是放大。因为放大会影响到画面的质量。同时也尽量把长与宽按比例地缩小,这样才不会失真。这就是要在"约束比例"前打上勾。假定你想把你的图片的宽度缩小到220像素,就把原来的440改成220,高度就不必填了,然后按"好"。图片就会按比例缩小。成了这个样子。
【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理
现在的尺寸是220*249。是前面的一半大小。 现在你如果把图片保存起来,它的画面不变而长与宽都变小了,文件量自然也变小了。你就可以这样用到网页或FLASH上去了。这样的做法是最经济的了,比网页强制缩小显示要节省很多的文件量。

三、观看图片的真实大小:
  在这么小的画面上工作,肯定是不行的。现在我们先来看看它的真实大小。点一下"缩放工具"(就是放大镜)。
【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理 
然后在"工具属性栏"上,点一下"实际像素",【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理

就会把图片放大,这是它的真实尺寸大小了。我们看到在图片的上边线有"文件名100%"。这是观看一张图片真实大小的办法。220*249的图片的真实大小正是这么大。(见下图)
【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理


四、在工作区放大缩小图片:
  真实大小我们是看到了,但是还不能满意于此。因为,假如一张图片的真实大小很大很大,超出屏幕那么大,我们怎么工作呢?或者假如一张图片极小极小,几乎看不清楚,又怎么工作呢?为了工作的需要,我们还是得把它们放到适当的大小。这只是为了操作方便,丝毫没有改变图片的任何性质,这一点跟前面的裁剪或是改变尺寸是完全不同的两回事。只做绘图显示用。
  比如这张220*249的图,我们操作的时候嫌小,你仍可以点中"缩放工具",用鼠标去拉它的右下角,把画布(浅灰色的部分是工作区,也称画布)拉大,一直拉到满意的大小。
【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理

现在拉到上面这个样子。现在再去点属性栏中右边的"满画布显示",这时,图片就会放大到充满画布。但是画布也会做一定的调整,这是软件认为这样是最合适的工作面大小。如果你要再自行调整,可以再把画布拉大,然后用放大镜进行调整。现在方便了我们观察与操作了。现在的放大比是171%。有一点儿马赛克出现了。
【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理

关于工作区中图片的缩放手法还有好多,今天先介绍这种最实用的办法。就是先确定画布的大小,然后按"满画布显示"。其它的办法以后碰到了再说。


五、控制图片文件量的大小:
  现在来说说文件量的大小。有些论坛只允许上传100k的图片,有些论坛可以上传200k的图片。所以,一定要控制我们制作的图片的文件量。当图片处理完了之后,要保存起来。你可以点菜单"文件"下的"存储为WEB所用格式"。会弹出一个操作图。

【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理

左边是原图,右边有各种选项。先看"品质"。现在是100%。我们看到在左边图的下面有这么一栏:79.04k。


【兴趣班课程】新手教程 第三课:照片裁剪和照片大小处理

这就是它在质量最好的时候,文件大小是79.04k。如果想要文件量再小一点,这是需要牺牲画面质量的。你可以把"品质"改为70%,这时再来看文件量,它变成了37.53k了。(这两者是不成比例的。)这样,我们就可以控制文件量的大小了。(文件量下面的100%是观看图片大小的,不会改变图片的本身。)
  好了,今天的课内容够多的了。我们学了五个方面的内容。现在我们知道如何来裁剪与控制图片尺寸的大小与文件量的大小了。在数码相机的拍摄中,我们可以设定照片的大小,如2048*1760,1600*1200,1200*960,640*480等等。有时拍出来的照片的文件量高达1兆。这么大的照片是没办法上传到网页或论坛上的。(一般500*450左右比较合适,文件量控制在100k左右比较好。)现在用PHOTOSHOP,我们就可以自由的选择制作了。

(内容摘自大卫PS入门教程)

 
下面是复习题:(要在作业本上回答哦)
1、怎样从网页上知道图片的长与宽以及文件量的大小?
2、为什么有些图片会出现马赛克现象?
3、怎样使用裁剪工具?
4、在PS中怎样才能知道图片的长与宽?
5、怎样把图片的长与宽按比例地放大或缩小?
6、怎样才能看到图片的真实大小?
7、工作时,怎样做才能把图片迅速地放置到最合适的大小?
8、如何控制图片的文件量?

 
所有作业请一式两份,一份在教程后跟贴,一份放在作业本里。
 
 
-----------------------------------------

常见问题请先查阅【学堂】-新手小帮助另有疑问可发专题贴 【问答】,把问题完整的写下来,以便回答。

【问答】-如何更改图片大小? 

【问答】-抽丝的时候这步不太明白?

2010-06-30 15:43:37eenn2 作第3编辑送花 [1]

沙发蚊子。 2010-05-17 13:43:36 引用

tziwen

先占位。。。吐舌頭

藤椅滴嗒 2010-05-17 13:58:21 引用

spatmm

buco

板凳滴嗒 2010-05-17 13:58:51 引用

spatmm

爱妹妈非常强大啊

报纸余子轩 2010-05-17 15:24:41 引用

iyuzixuan

粗略地学习了一下,有空了认真来学。

地板蚊子。 2010-05-17 18:09:45 引用

2010-05-17 18:24:15tziwen 作第1编辑送花 [1]

7楼爱妹妈 2010-05-18 10:06:20 引用

aimeigf

蚊子第一个交作业哟,送朵花花{#emotions_dlg.ntz_9}

 

8楼蚊子。 2010-05-18 11:57:53 引用

tziwen

妹妈的花儿有分量的,哈哈,{#emotions_dlg.ntz_24}

9楼天空中的雲朵 2010-05-20 15:27:23 引用

hongxiaodou

一下发了两,删了这,留着下一个。

2010-05-20 15:30:53hongxiaodou 作第2编辑送花 [0]

10楼天空中的雲朵 2010-05-20 15:27:25 引用

hongxiaodou

来交作业啦。大小240*302

11楼蚊子。 2010-05-20 16:41:21 引用

tziwen

给同学送花,嘻嘻,做得很好。

12楼宝贝欣洋 2010-05-21 19:00:25 引用

MYBABYYANGYANG

来学习了!有空就交作业!

13楼宝贝欣洋 2010-05-21 19:01:24 引用

MYBABYYANGYANG

我怎么看不到图片啊

14楼蚊子。 2010-05-21 19:06:12 引用

tziwen

我这边可以看到哦

15楼爱妹妈 2010-05-21 22:15:57 引用

aimeigf
宝贝欣洋于2010-05-21 19:01:24写道:

我怎么看不到图片啊


亲可以换个时间段再打开看看.图片是外链的,如果依然看不到,那我再抽时间重新上传.

 

16楼爱宝宝贝 2010-05-22 04:14:26 引用

liuziyangkuailechengzhang

 

 

原图:大小1000X750像素

裁剪后:

调整大小:600X450

放大图片,出现马赛克

17楼蚊子。 2010-05-22 13:25:29 引用

tziwen

起得真早啊!!

04:14:26

 

18楼爱妹妈 2010-05-22 15:26:28 引用

aimeigf
蚊子。于2010-05-22 13:25:29写道:

起得真早啊!!

04:14:26

 

有可能是这么晚都没睡呢!

 

19楼爱宝宝贝 2010-05-23 12:45:27 引用

liuziyangkuailechengzhang
爱妹妈于2010-05-22 15:26:28写道:
蚊子。于2010-05-22 13:25:29写道:

起得真早啊!!

04:14:26

 

有可能是这么晚都没睡呢!

 


对了        是没睡觉     昨晚也是如此  必须要完成作业的哦     白天没时间 

20楼蚊子。 2010-05-23 14:08:17 引用

tziwen

不行,以后不能这样了,先睡觉再说,作业第二。

   1 2 3 4    共有记录数:68

用户中心

欢迎您,育儿网游客
快速登录后可以创建和加入圈圈。如果你不是育儿网注册会员,请马上注册

邀请好友

复制圈子地址发给好友

精品话题