大卫PS入门教程 第三课:图片的大小与裁剪

大卫PS入门教程第三课:图片的大小与裁剪 (载入中…)

前两课算是玩了一回图片,今天可要来讲一点儿基础的理论了。别害怕,还是很好玩的,也是很有用的。就是关于图片的大小与图片的裁剪。我们自己用数码相机拍摄的照片要上传到论坛上或是制作到网页中,就需要用到这方面的知识了。

什么是切图?

1.从设计稿(PSD文件)中切出网页的素材,产出物(如.png、.jpg文件)

2.编写代码,在代码中引入图片,实现静态页面。

第三课:图片的大小与裁剪

图片 1

为什么要切图?

给网页提供图片素材,比如网页上一些漂亮的效果,无法用代码实现。

HTML:img

<img src = “images/avatar.jpg” alt=”头像”>

CSS:background

.icon{

    background-image:url(..sprite.png)

    background-position:0 0;

}

图片精灵:把网页中的小按钮小图片最终合并到一个文件里。

前两课算是玩了一回图片,今天可要来讲一点儿基础的理论了。别害怕,还是很好玩的,也是很有用的。就是关于图片的大小与图片的裁剪。我们自己用数码相机拍摄的照片要上传到论坛上或是制作到网页中,就需要用到这方面的知识了。

先打开一张图片。就看这一张吧。色彩很漂亮的风光照片。看上去这张照片并不大。其实这是我在制作网页的时候强行缩小的。所以说图片的真实大小,仅凭眼睛看是看不出来的。我们必须要知道它的具体尺寸。这有两个办法:

如何切图?

1.使用PS工具

2.使用背景图

3.图片合并方案

4.浏览器兼容

图片 2此主题相关图片如下:图片 3

第一个办法是下载图片:在网页上,用右键点图片另存为,就可以把图片保存在自己的电脑中。然后就可以看到这张图片的尺寸大小与文件量大小了。

使用PS工具

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

第二个办法是:点一下图片,让它变成最大,然后用右键点一下图片,再点属性,可以看到一张图片的尺寸大小与文件量的大小。如这张图片的原图是800*568,它的文件量大小是447k。我们可以用photoshop来改变它的长与宽,并改变它的文件量,以适应网页与论坛的需要。知道了原图的尺寸,我们就可以避免马赛克的出现。一张图片,如果放大到了超过它的原先尺寸,它就会出现马赛克。以后在制作FLASH时的时候就可以避免了。另外,有些图片需要进行选题与裁剪,让它更加突出主题,更加精练。这些就是我们今天所要学的内容。

PS首选项设置

编辑>首选项>单位与标尺,将单位都改成像素,因为css里面用到的最多的就是像素px;

图片 4此主题相关图片如下:图片 5

现在我们打开PS,打开这张图片。现在我们所看到的图片也不是它的真实大小,而是PS调整的适当的工作面显示大小。上面写着50%,只是一半。如果是百分之百的话,就要有四张拼起来那么大。它的真实大小如果在800*600的电脑屏幕上来,会占满整个屏幕,就是一张屏幕保护图片。(以下显示的图片,都是在PS中的工作图片,真实大小,没有进行网页的强行缩小)

面板

在“窗口”菜单下开启:

1.工具

2.选项

3.信息(F8)

4.图层(F7)

5.历史记录

保存工作区:窗口→工作区→新建工作区

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

一、裁剪图片:

工具

切图常用工具:

1.移动工具:选择图层及移动图层;

选项面板:自动选择勾上、选择图层

组:将相关联的图层放在一个组里方便管理。

2.矩形选框工具:选出一个矩形框,在信息面板中查看尺寸信息

3.魔棒工具:抠不规则的图形

容差:设置颜色取样时的范围,越小则取样范围越小

消除锯齿:让边缘光滑

连续:让选择的区域连续

4.裁剪工具+切片工具:裁剪画布

5.缩放工具:缩放画布

  .放大:Ctrl+加号

  .缩小:Ctrl+减号

  Ctrl+1:100%

  Alt+鼠标滚轮

6.取色器:吸取颜色

7.撤销:Ctrl+z撤销前一步,Ctrl+Alt+z连续撤销

图片 6此主题相关图片如下:图片 7

先来学习如何裁剪图片。点工具栏左下第三个工具裁剪工具。

辅助视图

在“视图”菜单下开启:

1.对齐

2.标尺Ctrl+R

3.显示>参考线Ctrl+;

(需勾选显示额外内容)

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

图片 8

admin

网站地图xml地图