学习网页制作的朋友,在学习别人制作的网页时,经常会看到下面的这张图片:
图一
上面的图片是网页设计师将一个页面的图片集中到一张图上,然后根据网页内容的需要调取图片某一处的图标,那么如何确定这一张图片上的某一位置呢,用photoshop轻松确定,当然高手可能会有更加好的简单的方法,但我是用这一方法的,下面就开始说一下如何去做:
一、用photoshop打开上面的图片,我们可以查看该图片的尺寸是:高度是288像素,宽度是108像素。知道了他的尺寸,我们就可以按ctrl+a全选(见图二左侧图),然后点击菜单栏的-选择-变换选区(见图二右侧图)。
图二
二、我们点击菜单栏下面的这一个图标
,将方位点选到右下角,这样我们就看到了X、Y、W、H这四个参数。分别是:108.0px、288.0px、100%、100%,这就是整个图片的参数,下面我们要做的是确定某一处的参数,见图四,我们来确定一下箭头所指的图标的位置,用鼠标拖动下面的小方框,一直移动到那个图标的上方,
我们看到了X、Y、W、H这四个参数。分别是:108.0px、145.0px、100%、50.3%,那么这就是我们需要的参数了,也就是我们要的图标的起始位置了,有像素数,也有百分数,在制作网页时,你用像素也可,用百分数也行呀,呵呵。
我们可以再试着,拖动一下右边的小方框,看看这四个参数的再变化
我们看到了X、Y、W、H这四个参数。分别是:70.0px、145.0px、64.8%、50.3%,是不是很简单的就取得了起始位置呢?下一步就是在网页中应用图片了。
由于文笔太差,有不明白的地方,可以留言……
本文欢迎转载,转载请注明出处:站长学习网-www.zxx6.com。
时间: 2024-09-17 04:22:28