& & 技巧路径工具（ 钢笔工具）在PhotoShop中运用非常广泛，退底、勾形等等都少不了它。可许多人对它很难上手，初学者容易勾断线，而入门后也常为多次修改也勾不准而烦恼。现在我们就以一个实例介绍一下路径工具和退底的一些小技巧& & 一、勾图退底的“规范”动作：& & 这是原图，本例的目的就是用路径工具把“互联时代”四个字退底“挖”出来。& & 先选择路径工具(P)，起第一点时，拖出一个较短的手柄，接下来画第二点，也拖出短手柄，此时，按住Ctrl键不动，用白箭头调整接近第一点的手柄到恰当位置.& & & & & & 放开Ctrl键，以此类推往下画点& & 如碰到尖锐转折时，先按住Alt键不动，再次单击本画点.& & 即可消除向前的手柄，再按住Ctrl键不动调整后边的手柄，此时往下画时，可实现尖锐转折.& & 提醒：以上看似简单的几招，在勾图时可一次成形，准确而迅速，可称之为“规范动作”。此动作在刚开始练习时可能会比你以前还慢些，但如果不偷懒，严格按照以上步骤去做，不久你的勾图水平和速度一定会有大幅提高。& & 退底勾图，是一定要把需“掏穿”的地方勾到的，千万不要忘了& & 路径勾画最后完成如下& & 提醒：在勾图的时候，其实选择点的位置是非常重要的。一般来说，在轮廓的变化转折处要多几个点，而在轮廓平直或规范的圆弧、椭圆弧的轮廊处则要少用点，这样反而可以利用路径本身弧度的控制，来使得所勾的曲线更优美。& & 总之，在形状复杂的地方一定要多画几个点，形状单纯的地方可少画一些，这样就能勾得又快又准、事半功倍。& & 最后，按住Ctrl+回车键在Path面板单击勾的路径转成选择范围& & 二、勾图的注意事项：& & 为何容易勾断线?& & 初学者勾断线时一般是勾到一段时，就不自觉地换了其它工具（或用快捷键换了工具），再回来勾时可能已经是在勾第二条路径了。& & 所以初学者在勾路径时要注意最好不要换工具，也不要不自觉地按键盘，因为PhotoShop的快捷键非常的多，一不小心你就已经不是在用路径工具了。& & 如果万一不小心勾断了线（如图4-1），可以用如下方法接上：& & 先选择路径工具(P)，按住Ctrl键转变成白箭头，在已经勾画的路径上点击一下.& & 松开Ctrl键变回路径工具& & 在已勾画的路径的最后一个点上单击一次，即可接上& & 就可以继续往下勾了& & 细部勾图& & 细部很难用眼力直接看准的地方，一定要用Ctrl+空格框选放得很大来勾& & & & 避免退底留白:& & 在勾图时，请一定要注意，勾线的最佳位置是在图像轮廓的齿形虚化边的里侧，而不是正正在虚化边上& & 也就是说勾图时，不要正正勾在图像的轮廓线上，而是要勾得比它的轮廓要小一点点才是最好的位置！& & 这是因为PhotoShop图像轮廓边缘一般都一个虚化的范围（要特别放大才能发现），这样退的底会把这个虚化范围下显露出的背景色也一块“挖”出来了& & & & & & 所以要想图退得好，不但要勾得准，还要勾得有技巧（比实际图象小一点），这样才能退得漂亮、干净不留“白”！& & 提醒：PhotoShop中，当用白箭头（按住钢笔工具不动复选）框选路径时，是可以用Ctrl+T对路径本身进行变形操作的。& & 勾路径时，按住Shift键，可以很容易勾出水平、竖直和45度倾角的路径。& & 以上介绍的路径勾画部分不但适用于PhotoShop,对Illustrator、FreeHand等软件的路径操作也一样适用。
声明：该文章系网友上传分享，此内容仅代表网友个人经验或观点，不代表本网站立场和观点；若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
上一篇：下一篇：
相关经验教程
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.004 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益photoshop路径工具勾图、去底的方法技巧_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
photoshop路径工具勾图、去底的方法技巧
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩10页未读，继续阅读
你可能喜欢请点击图中倒立的文字
社交帐号登录如何将页脚固定在页面底部(多种方法实现)
作者：佚名
字体：[ ] 来源：互联网 时间：04-01 12:20:03
当一个HTML页面中含有较少的内容时，Web页面的footer部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，接下来为大家介绍下如何将页脚固定在页面底部，感兴趣的朋友可以了解下
作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的&footer&部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的&footer&部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，换句说，Footer部分永远沉底。如下图所示： 那么今天主要和大家一起学习如何将页脚固定在页面的底部？ 方法一 首先我们来看第一种方法，这种方法是来自于的《》。下面我们就一起来看看介绍的方法。 HTML Markup 代码如下: &div id="container"& &div id="header"&Header Section&/div& &div id="page" class="clearfix"& 页面容容部分 &/div& &div id="footer"&Footer Section&/div& &/div& 其实我们可以在div#page增加所需的内容结构，如下所示： 代码如下: &div id="container"& &div id="header"&Header Section&/div& &div id="page" class="clearfix"& &div id="left"&Left Sidebar&/div& &div id="content"&Main content&/div& &div id="right"&Right sidebar&/div& &/div& &div id="footer"&Footer Section&/div& &/div& 真正来说，实现这页脚永远固定在页面的底部，我们只需要四个div，其中div#container是一个容器，在这个容器之中，我们包含了div#header（头部），div#page（页面主体部分，我们可以在这个div中增加更多的div结构，如上面的代码所示），div#footer（页脚部分） CSS Code 代码如下: html,body { margin: 0; padding:0; height: 100%; } #container { min-height:100%; height: auto ! height: 100%; /*IE6不识别min-height*/ position: } #header { background: #ff0; padding: 10 } #page { width: 960 margin: 0 padding-bottom: 60/*等于footer的高度*/ } #footer { position: bottom: 0; width: 100%; height: 60/*脚部的高度*/ background: #6 clear: } /*=======主体内容部分=======*/ #left { width: 220 float: margin-right: 20 background: } #content { background: float: width: 480 margin-right: 20 } #right{ background: float: width: 220 } 下面我们一起来看看这种方法的实现原理： 1.&html&和&body&标签：html和body标签中必须将高度(height)设置为&100%&,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0； 2.div#container容器：div#container容器必须设置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度，不过在IE6是不支持min-height的，所以为了兼容IE6，我们需要对min-height做一定的兼容处理，具体可以看前面的代码，或者阅读了解如何解决min-height在Ie6下的bug问题。另外我们还需要在div#container容器中设置一个&position:relative&以便于里面的元素进行绝对定位后不会跑了div#container容器； 3.div#page容器：div#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值，当然你在div#page中可以使用border-bottom人水-width来替代padding-bottom，但有一点需要注意，此处你千万不能使用margin-bottom来代替padding-bottom，不然会无法实现效果； 4.div#footer容器：div#footer容器必须设置一个固定高度，单位可以是px(或em)。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个&width:100%&，让他在整个页面上得到延伸； 5.其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等。 优点： 结构简单清晰，无需js和任何hack能实现各浏览器下的兼容，并且也适应iphone。 缺点： 不足之处就是需要给div#footer容器设置一个固定高度，这个高度可以根据你的需求进行设置，其单位可以是px也可以是em，而且还需要将div#page容器的padding-bottom（或border-bottom-width）设置大小等于（或略大于）div#footer的高度，才能正常运行。 上面就是介绍的如何实现页脚永远固定在页面的底部，如果大家感兴趣可以阅读，也可以直接点击这里查看。 方法二： 这种方法是利用footer的margin-top负值来实现footer永远固定在页面的底部效果，下面我们具体看是如何实现的。 HTML Markup 代码如下: &div id="container"& &div id="page"&Main Content&/div& &/div& &div id="footer"&footer&/div& 上面的代码是最基本的HTML Code，同时你也发现了div#footer和div#container是同辈关系，不像方法一，div#footer在div#container容器内部。当然你也可以根据你的需要把内容增加在div#container容器中，如：一个三列布局，而且还带有header部分，请看下面的代码： 代码如下: &div id="container"& &div id="header"&Header Section&/div& &div id="page" class="clearfix"& &div id="left"&Left sidebar&/div& &div id="content"&Main content&/div& &div id="right"&Right sidebar&/div& &/div& &/div& &div id="footer"&Footer section&/div& CSS Code 代码如下: html, body { height: 100%; margin: 0; padding: 0; } #container { min-height: 100%; height: auto ! height: 100%; } #page { padding-bottom: 60/*高度等于footer的高度*/ } #footer { position: margin-top: -60/*等于footer的高度*/ height: 60 clear: background: #c6f; } /*==========其他div==========*/ #header { padding: 10 background: } #left { width: 18%; float: margin-right: 2%; background: } #content{ width: 60%; float: margin-right: 2%; background: } #right { width: 18%; float: background: } 方法一和方法二有几点是完全相同的，比如说方法一中的1-3三点，在方法二中都一样，换句话说，方法二中也需要把html,body高度设置为100%,并重置margin,padding为0；其二div#container也需要设置min-height:100%,并处理好IE6下的min-height兼容问题；其三也需要在div#page容器上设置一个padding-bottom或border-bottom-width值等于div#footer高度值（或略大于）。那么两种方法不同之处是： 1.div#footer放在div#container容器外面，也就是说两者是同级关系，如果你有新元素需要放置在与div#container容器同级，那你需要将此元素进行绝对定位，不然将会破坏div#container容器的min-height值； 2.div#footer进行margin-top的负值设置，并且此值等于div#footer的高度值，而且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。 优点： 结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。 缺点： 要给footer设置固定值，因此无法让footer部分自适应高度。 大家要是对这种方法感兴趣，你也可以浏览一下《》和《》，或者直接点击查看其源代码。 方法三： 实现在页脚永远固定在页面底部的方法有很多，但是有很多方法是需要使用一些hack或借助javaScrip来实现，那么接下来要说的方法三，仅仅使用了15行的样式代码和一个简单明了的HTML结构实现了效果，并且兼容性强，别的不多说，先看代码。 HTML Code 代码如下: &div id="container"& &div id="page"&Your Website content here.&/div& &div class="push"&&!-- not have any content --&&/div& &/div& &div id="footer"&Footer Section&/div& 上面是最基本的HTML Markup，当然你也可以加上新的内容，不过有一点需要注意如果你在div#container和div#footer容器外增加内容的话，新加进徕的元素需要进行绝对定位。如如说你可以在div#container容器中加上你页面所需的元素 HTML Code 代码如下: &div id="container"& &div id="header"&Header Section&/div& &div id="page" class="clearfix"& &div id="left"&Left sidebar&/div& &div id="content"&Main Content&/div& &div id="right"&Right Content&/div& &/div& &div class="push"&&!-- not put anything here --&&/div& &/div& &div id="footer"&Footer Section&/div& CSS Code 代码如下: html, body{ height: 100%; margin:0; padding:0; } #container { min-height: 100%; height: auto ! height: 100%; margin: 0 auto -60/*margin-bottom的负值等于footer高度*/ } .push, #footer { height: 60 clear: } /*==========其他div效果==========*/ #header { padding: 10 background: } #left { width: 18%; float: margin-right: 2%; background: } #content{ width: 60%; float: margin-right: 2%; background: } #right { width: 18%; float: background: } #footer { background: #f6c; } 跟前面两种方法相比较，方法三更类似于方法二，他们都将div#footer放在div#container容器之外，而且这个方法在div#container容器中还增加了一个div.push用来把div#footer推下去，下面我们就一起看看这种方法是怎么实现页脚永远固定在页面底部的。1.&html&和&body&标签：html,body标签和前两种方法一样，需要设置&height:100%&并重置&margin&和&padding&为0； 2.div#container:方法三关键部分就在于div#container的设置，首先需要设置其最小高度（min-height）为100％,为了能兼容好IE6，需要对min-height进行兼容处理（具体处理方法看前面或代码）另外这里还有一个关键点在div#container容器上需要设置一个margin-bottom，并且给其取负值，而且值的大小等于div#footer和div.push的高度，如果div#footer和div.push设置了padding和border值，那么div#container的margin-bottom负值需要加上div#footer和div.push的padding和border值。也就是说&div#container{margin-bottom:-[div#footer的height+padding+border]或者-[div.push的height+padding+border]}&。一句话来说：div#container的margin-bottom负值需要和div#footer以及div.push的高度一致（如果有padding或border时，高度值需要加上他们）； 3.div.push:在div.push中我们不应该放置任何内容，而且这个div必须放置在div#container容器中，而且是最底部，并且需要设置其高度值等于div#footer的值，最好加上clear:both来清除浮动。div.push容器在此处所起的作用就是将footer往下推。 4.div#footer容器：div#footer容器和方法二一样，不能放到div#container内部，而和div#container容器同级，如果需要设置元素和footer之间的间距，最好使用padding来代替margin值。 优点： 简单明了，易于理解，兼容所有浏览器。 缺点： 较之前面的两种方法，多使用了一个div.push容器，同样此方法限制了footer部分高度，无法达到自适应高度效果。 如果大家对方法三想了解更多可以点击或者直接从中下载代码自己研究一下。 方法四： 前面三种方法我们都不需要任何javaScript或jQuery的帮助，让我们实现了页脚永远固定在页面底部的效果，前面三种方法虽然没有使用jQuery等帮助，但我们都额外增加了HTML标签来实现效果。如果你省略了这些HTML标签，再要实现效果就比较困难了，那么此时使用jQuery或javaScript方法来帮助实现是一种很好的办法，下面我们就一起来看第四种方法，通过jQuery来实现页脚永远固定在页面底部的效果。 HTML Markup 代码如下: &div id="header"&Header Section&/div& &div id="page" class="clearfix"& &div id="left"&Left sidebar&/div& &div id="content"&Main Content&/div& &div id="right"&Right Content&/div& &/div& &div id="footer"&Footer Section&/div& 这里我们没有增加没用的HTML标签，此时你也可以随时在body中增加内容，只要确保div#footer是在body最后面。 代码如下: &div id="footer"&Footer Section&/div& CSS Code 代码如下: *{margin: 0;padding:0;} .clearfix:before, .clearfix:after { content:""; display: } .clearfix:after { clear: } .clearfix { zoom:1; /* IE &8 */ } #footer{ height: 60 background: #fc6; width: 100%; } /*==========其他div==========*/ #header { padding: 10 background: } #left { width: 18%; float: margin-right: 2%; background: } #content{ width: 60%; float: margin-right: 2%; background: } #right { width: 18%; float: background: } 这个方法不像前面三种方法靠CSS来实现效果，这里只需要按正常的样式需求写样式，不过有一点需要特别注意在html,body中不可以设置高度height为100%，否则此方法无法正常运行，如果你在div#footer中设置了一个高度并把宽度设置为100%将更是万无一失了。 jQuery Code 代码如下: &script type="text/javascript"& // Window load event used just in case window height is dependant upon images $(window).bind("load", function() { var footerHeight = 0, footerTop = 0, $footer = $("#footer"); positionFooter(); //定义positionFooter function function positionFooter() { //取到div#footer高度 footerHeight = $footer.height(); //div#footer离屏幕顶部的距离 footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; /* DEBUGGING STUFF console.log("Document height: ", $(document.body).height()); console.log("Window height: ", $(window).height()); console.log("Window scroll: ", $(window).scrollTop()); console.log("Footer height: ", footerHeight); console.log("Footer top: ", footerTop); console.log("-----------") */ //如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位 if ( ($(document.body).height()+footerHeight) & $(window).height()) { $footer.css({ position: "absolute" }).stop().animate({ top: footerTop }); } else { $footer.css({ position: "static" }); } } $(window).scroll(positionFooter).resize(positionFooter); }); &/script& 使用上面的jQuery代码，可以轻松的帮我们实现页脚永远固定在页面底部，使用这种方法有几个地方需要注意 1.确保正常引入了jQuery版本库，并正常调入了上面那段jQuery代码； 2.确保&div id=&footer&&是在body中最后； 3.确保在html,body中没有设置高度为100%。 优点： 结构简单，无需外加无用标签，兼容所有浏览器，不用另外写特别样式。页脚可以不固定高度。 缺点： 在不支持js的浏览器中无法正常显示，另外每次改变浏览器大小会闪动一下。 今天主要和大家一起探讨和学习了四种方法，用来实现Web页面脚部永远固定在页面的底，这里在着得说清楚一下，是页脚永远固定在页面的底部，而不是永远固定在浏览器窗口的底部，换句话说，就说当页面主内容没有显示屏幕高时，页脚固定在显示器屏幕的底部，但当页面内容超过显示器屏幕高度时，页脚又会跟随内容往下沉，但页脚都永远固定在页的底部。前面三种都是纯CSS实现，最后一种采用的是jQuery方法实现，四种方法各有各的利弊，大家使用时可以根据自己的需求来定夺，希望这篇文章能给大家带来一定的帮助。如果大家有更好的方法，希望能和我一起分享，如果您愿意，可以直接给我留言，我会一直和您在一起，一起学习和讨论这方面的知识。
大家感兴趣的内容
12345678910
最近更新的内容