思维 » 教程 http://blog.acmind.com Acme of Mind Mon, 19 Apr 2010 02:23:51 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 用Photoshop设计一个小型、现代的产品主页并由psd转换成XHTML/CSS模板 http://blog.acmind.com/archives/1686 http://blog.acmind.com/archives/1686#comments Fri, 11 Dec 2009 01:17:41 +0000 笑谈 http://blog.acmind.com/archives/1686 clip_image001

这个Photoshop web设计的教程中，我们将学习设计一个整洁的具有现代气息的web站点。这是设计和HTML/CSS模板转换系列教程的第一部分。

第一部分: 用Photoshop设计一个小型、现代的产品主页

预览

以下是我们将要一些设计的页面预览，点击图片可以放大。

clip_image002

建立一个新的Photoshop文档

1 首先在Photoshop中新建一个文档（Ctrl+N），大小为1200 x 1200像素，背景设为透明。

clip_image003

设置头部背景

2 使用矩形选定工具在透明的背景上画出一个矩形，矩形大小：1200px ×120px

clip_image004

3 使用油漆桶工具（G）用任意颜色填充头部刚才选定区域。点开图层样式对话框，用以下设置来增加一个渐变叠加效果。

clip_image005

完了，应该出现以下效果：

clip_image006

创建内容部分的背景图层

4 现在我们将要创建图层内容区域的第二部分背景。把前景色设为#00315C，背景色设为#001B32。选择矩形框选定工具（M）选定剩下的透明图层；选定后，选择渐变工具（G）,然后设置渐变类型为径向渐变。

clip_image007

5 设定好渐变工具（G）后，从顶部的中间垂直的拖动到画布的4/1大小左右。

clip_image008

添加参考线

6 现在我们需要一些参考线保留出宽度为850px的中间内容部分。选择视图 > 新建参考线。在新建参考线对话框中输入175px，取向选择垂直。这样一个画布左边的参考线就做好了。

clip_image009

7 重复6的步骤，创建另外一条垂直参考线，不过这次输入1025px (175px + 850px = 1025px)。这样一个850px宽、居中的区域就做好了。

clip_image010

设计头部区域

8 选择横排文字工具（T），然后对其左边参考线边沿添加上页面标题和标语。

clip_image011

9 在标题文本图层下面创建一个新图层，选定矩形选框工具（M），在头部选取出一个区域。宽度必须填满1200px，高度大概在60px左右。

clip_image012

10 用白色（#FFFFFF）填充（G）选定区域，然后在图层面板中设置透明度为25%。效果如下。

clip_image013

创建导航

11 选择横排文字工具（T），字体大小设定为11-12px左右。然后在标题和标示右边加入导航文字；没菜单项之间留出等宽的边距。

clip_image014

12 在每个菜单项之间使用矩形选框工具（M）做一个1px宽的分割线；长度跨越整个头部。用#CECECE颜色填充（G）这1px的线条。效果如下图。

clip_image015

13 现在，我们在每个菜单项中加入鼠标悬停动态效果（hover）。我已经给其中一个菜单项加入颜色表示鼠标悬停时的效果。使用多边形套索工具（L）按住shift，创建一个三角形，以保证每条线都是直的。

clip_image016

14 用#00315C这个颜色填充选定的三角形区域

clip_image017

创建欢迎区域

15 选择横排文字工具（T）,加入一些欢迎标语；同样左边距紧贴左参考线，然后在上面的页面标题和下面的欢迎文本中留出一定的空间。文本下面加入4个蓝色的列表图标。这个图标是 Function Icon Set 里面的（文件名是circle_blue.png）。

clip_image018

16 在欢迎文本的右边将插入一个欢迎图片；我这里使用的是Six Revisions网站界面裁图。裁剪你的图片，去掉不需要的部分。图片准备好之后，通过编辑 > 变换 > 透视 改变图片的视角。

clip_image019

17 选择椭圆选框工具，然后在欢迎图片下方画一个椭圆。

clip_image020

18 用黑色（#000000）填充（G）椭圆选定区域。

19 然后设置区域图层透明度为35%。

20 然后使用滤镜 > 模糊 > 高斯模糊这个椭圆，设定模糊半径为1到2px。

clip_image021

21 把欢迎图片和下面的阴影再复制一份，然后把它们拖动到原图片的下面。

22 位置拖动好之后，使用高斯模糊下面的裁图，半径为1px。

clip_image022

创建水平3D分割线

23 选择矩形选框工具（M）层叠的创建两个1px的线条；宽度为850px，从左参考线到右参考线。你可以将两个线条放在同一个图层。

24 分别使用颜色#000D19和#003461填充这两个线条。

clip_image023

25 选择椭圆选框工具（M）然后在分割线上面画出一个椭圆。

clip_image024

26 使用黑色（#000000）填充（G）选定区域，加上2到3px的高斯模糊。然后使用矩形选框工具删掉分割线上半部分，这样就剩下了半个椭圆。

clip_image025

27 将这两个图层合并（Ctrl+E），然后添加一个图层蒙版（点击图层面板上的“添加图层蒙版”按钮）来合并图层。

28 使用渐变工具（G）,渐变类型为对称渐变，前景色设为白色（#FFFFFF）,背景色设置黑色（#000000）。

clip_image026

29 拖动对称渐变，从分割线中间向两边拖动，从而产生中间向两边淡入效果。

clip_image027

设计内容区域

30 选择横排文字工具（T）在3D分割线下方，右分割线的左边加入任意的文字标题和段落。

clip_image028

31 使用圆角矩形工具（U）在内容文本区域的左边创建一个圆角矩形；半径设为10px（默认情况下背景是10px）。

clip_image029

32 路径画好之后，选择钢笔工具（P），右击矩形内部，选择建立选区。

33 设置前景色为#00315C，背景色为#001B32 ，然后选择渐变工具（G），渐变类型为径向渐变。

34 从顶部把渐变拖动到中间，和我们绘制背景方法相同。效果如下图。

clip_image030

35 现在需要给圆角矩形图层加入投影、内阴影和描边的图层样式（双击图层面板上面的图层，打开图层样式对话框）。设置如下。

clip_image031

clip_image032

clip_image033

36 使用多边形套索工具（L），然后在矩形上面做一个三角形的选区。

clip_image034

37 剪切并复制选区到一个新图层，一般这样做将会丢失掉选取的图层样式，所以在这之前我们必须给右下角图层重复添加一次样式。

38 通过编辑 > 变换 > 旋转给边角图层翻转180度；

clip_image035

39 加入一些任意文字以完成内容框的绘制。

clip_image036

创建页脚区域

40 选择圆角矩形工具（U）在也叫拖动出一个圆角矩形。

clip_image037

41 使用任意颜色来填充这个圆角矩形选区，选区加入如下样式的渐变叠加效果。

clip_image038

42 最后，加上页脚信息就大功告成了。

clip_image039

完成

第二部分: 将小型、现代的产品主页由psd转换成XHTML/CSS模板

点击下面的图片将会看到本次制作的 demo 的效果。

clip_image041

创建文件结构，准备文件

1 在桌面上创建新的空目录，取名portfolio。

2 在portfolio目录下面继续创建images目录用于存放图片。

3 接下来创建两个空文件 styles.css和index.html

clip_image042

4 用你最喜欢的文本编辑器打开index.html，我将在本教程中使用Adobe Dreamweaver。

5 在文档的<head>标签加入对styles.css的链接。可以使用如下代码：


<link href="styles.css" rel="stylesheet" type="text/css" />

clip_image043

页面分区

以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。

clip_image044

6 我们将从在浏览器中居中、包含整个文档的主容器开始（也被称之为外壳（wrapper））。在容器内部内的5个div将组成一个完整的页面：这些div是：#top,

#welcome, #sidebar, #content 和 #footer。

HTML代码如下：


<!--CONTAINER STARTS-->
<div id="container">

	<!--HEADER/NAVIGATION STARTS-->
	<div id="top">

	</div>
	<!--HEADER/NAVIGATION ENDS-->

	<!--WELCOME AREA STARTS-->
	<div id="welcome">

	</div>
	<!--WELCOME AREA ENDS-->

	<!--SIDEBAR STARTS-->
	<div id="sidebar">

	</div>
	<!--SIDEBAR ENDS-->

	<!--CONTENT STARTS-->
	<div id="content">

	</div>
	<!--CONTENT ENDS-->

	<!--FOOTER STARTS-->
	<div id="footer">

	</div>
	<!--FOOTER ENDS-->

</div>
<!--CONTAINER ENDS-->

模板背景切片

7 在我们把各个div转成代码之前，我们首先在页面中加入背景。用Photoshop打开PSD文件，用矩形选框工具（M）选定头部/导航和背景的一点区域；选定的宽度可以只有1px

（因为我们将会在后面使用css来水平重复它）。

clip_image045

8 在选定区域的底部，用滴管工具（I）记录下色彩的16进制值。

9 选定好之后，点编辑 > 合并拷贝，创建一个新Photoshop文件（Ctrl+N），然后将选定区域复制到新文档中。通常新建Photoshop画布长宽是剪切板中选定区域的大小。如果不是，请确保他

们是一致的。

10 在新Photoshop文档中，点文件 > 另存为 web 和设备所用格式（Alt+Shift+Ctrl+S），选择PNG-8格式，保存文件为background.png，保存在images目录下。

将背景转成代码

11 现在我们已经将背景图片从Photoshop中切片出来，我们可以开始写代码了。打开CSS文件（styles.css），然后写入以下代码：


* {
	margin: 0px;
	padding: 0px;
	border: none;
}
body {
	background-image: url(images/background.png);
	background-repeat: repeat-x;
	background-color: #001b32;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #c8c8c8;
}
#container {
	margin: auto;
	width: 850px;
}

让我们来仔细的分析一下样式代码。

首先我们将所有元素的margin，padding，border的值归零以避免跨浏览器的兼容性。我们这个用到的是*选择器。

接下来，我们样式化 body 元素；我们将 background.png 设置为背景，通过 repeat-x 使它水平重复。同样把背景色设置为深蓝（#001b32）。

最后，我们把#container的margin设置为 auto 让布局居中，并且设置宽度为850px。

Logo和站点名的切片

12 现在我们接着制作模板的logo和站点标题。使用矩形选框工具（M），选定站点的标题和标示文本（以下图为参考）。

clip_image046

13 就像处理 background.png 一样，复制这个区域到新文档，然后保存为title.png放在images目录。

和站点名转换成代码

14 我们转到HTML文档中，在#top这个div里面我们创建一个新div，ID为title。

15 在#title div里面，加入<h1>元素来放置我们的站点名；同样需要创建一个超链接（<a>）链接到站点主页。对于这个模板，我们仅把href属性的值设为#，如果需要在实际中使用这

个模板，你可以用反斜杠（/）来代替#。

HTML代码如下：


<!--HEADER/NAVIGATION STARTS-->
<div id="top">

	<!--WEBSITE TITLE STARTS-->
	<div id="title">
		<h1><a href="#" title="Your Website Name">Your Website Name</a></h1>
	</div>
	<!--WEBSITE TITLE ENDS-->

</div>
<!--HEADER/NAVIGATION ENDS-->

16 现在我们转向样式表。样式化#top区域元素。代码如下。


#top {
	float: left;
	width: 850px;
	height: 119px;
}
#title {
	float: left;
	width: 278px;
	height: 74px;
	padding-top: 45px;
}
#title h1 {
	display: block;
	float: left;
	width: 278px;
	height: 74px;
	text-indent: -9999px;
}
#title h1 a {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(images/title.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

让我们来仔细分析一下上面的代码。

首先我们需要将#top浮动到左边，然后给定一个固定的宽度和高度。

宽度应该和#container等宽，850px，高度应该和浅灰色区域等高，119px。

clip_image047

接下来，我们使用一种CSS背景图片替换的技术使用text-indent方法。我们将#title h1

里面的文字向左缩进-9999px，将文字推出了浏览器的可视区域。这个技术对于屏幕阅读器的可访问性和搜索引擎优化都有好处。

导航转换成代码

17 在#top里面，#title下面我们创建一个ID为navigation的div。在#navigation里面增加一个无序列表，class值设为nav-links。以下

是#navigation的代码段。


<!--NAVIGATION STARTS-->
<div id="navigation">
	<ul>
		<li><a href="#" title="home">home</a></li>
		<li><a href="#" title="about">about</a></li>
		<li><a href="#" title="portfolio">portfolio</a></li>
		<li><a href="#" title="contact">contact</a></li>
	</ul>
</div>
<!--NAVIGATION ENDS-->

给无序列表设定一个nav-links的类主要目录是为了在链接CSS的时候不会影响到页面上的其他无序列表。需要注意的是，最后一个列表项加入borderx2的类，意为“边框乘2”；因为导航中的列表项都有一个分割线，我们需要给最后一样的左右都加上一个1px的边框（也就是边框乘2）。

悬停指示器切片

18 在给导航加入CSS样式之前，我们得首先把小小的悬停三角形切片。到Photoshop中使用矩形选框工具（M）选定这个三角形，复制透明背景的新文档，保存为images目录下的

nav_hover.png。

clip_image048

导航样式化

19 现在该是给导航加入CSS代码的时候了。使用以下代码。


.nav-links li a {
	float: left;
	width: 120px;
	height: 68px;
	text-decoration: none;
	text-transform: capitalize;
	color: #666666;
	font-size: 12px;
	text-align: center;
	padding-top: 51px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #cecece;
}
.nav-links li a:hover {
	color: #00284a;
	background-image: url(images/nav_hover.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}
li.borderx2 {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #cecece;
}

首先，为了让列表项挨个的显示，我们将它们向左浮动。然后给他们固定的宽度高度，使他们之前的空间均衡。然后通过给text-decoration值none来去掉超链接默认的下划线。

然后给每个列表项一个1px、灰色的左边框。

然后通过:hover伪类来样式化悬停效果。当鼠标悬停时，我们将列表项的背景设为nav_hover.png。

最后解决最后一个列表项右边没有分割线的问题，需要给.borderx2类声明一个border属性。

创建欢迎区域

欢迎区域会被分割成两个部分，左边(#welcome-text)和右边(#welcome-image)。

clip_image049

20 在index.html的#welcome div中加入两个新的div，一个ID为welcome-text，一个ID为welcome-image。我们会在切片完成后将两个div填充上内容。

欢迎图片的切片

21 转到PSD文件，关闭除了有渐变效果深蓝背景的其他所有图层（点击图层左边的眼睛图标）。

22 使用矩形选框工具（M）选定一个宽度不超过850px的矩形，可以通过第一部分的设定好的参考线来选定。

clip_image050

23 将这个深蓝背景转成web图片content_background.png，放在images目录下。使用同样的方法，关闭除了欢迎图片图层的其他图层，切片蓝点和欢迎图片（见一下参考）。

clip_image051

clip_image052

新区域的HTML类似如下。


<!--WELCOME AREA STARTS-->
<div id="welcome">

	<!--WELCOME TEXT STARTS-->
	<div id="welcome-text">

	</div>
	<!--WELCOME TEXT ENDS-->

	<!--WELCOME IMAGE STARTS-->
	<div id="welcome-image">
		<img src="images/welcome_image.png" alt="Welcome..." />
	</div>
	<!--WELCOME IMAGE ENDS-->

</div>
<!--WELCOME AREA ENDS-->

24 在#welcome-text div中文名增加一些欢迎文字。使用<h2>标签给欢迎文字增加标题，然后在以下添加无序列表。

25 在#welcome-image中添加欢迎图片（本案例添加的是Six Revisions的网站裁图）。

合起来，HTML代码如下。


<!--WELCOME AREA STARTS-->
<div id="welcome">

	<!--WELCOME TEXT STARTS-->
	<div id="welcome-text">
		<h2>welcome to <span>yourwebsite!</span></h2>
		<p>Lorem ipsum dolor sit amet, consectetur[...]</p>
		<p>Proin fringilla nunc lorem, in sollicitudin orci. Sed ut eros ligula.</p>
		<ul>
			<li>Lorem ipsum dolor sit amet...</li>
			<li>Lorem ipsum dolor sit amet...</li>
			<li>Lorem ipsum dolor sit amet...</li>
			<li>Lorem ipsum dolor sit amet...</li>
		</ul>
	</div>
	<!--WELCOME TEXT ENDS-->
	
	<!--WELCOME IMAGE STARTS-->
	<div id="welcome-image">
		<img src="images/welcome_image.png" alt="Welcome..." />
	</div>
	<!--WELCOME IMAGE ENDS-->

</div>
<!--WELCOME AREA ENDS-->

样式化欢迎区域

26 现在样式化欢迎区域。复制以下代码到CSS中，后面有对代码的解释。


#welcome {
	float: left;
	width: 850px;
	background-image: url(images/content_background.png);
	background-repeat: no-repeat;
	height: 326px;
	padding-top: 40px;
}
h2 {
	text-transform: uppercase;
	color: #ffffff;
	font-size: 16px;
	margin-bottom: 15px;
}
.heading-color2 {
	color: #9a9a9a;
}
#welcome-text {
	width: 406px;
	line-height: 18px;
	padding-top: 50px;
	float: left;
	text-align: justify;
}
#welcome-text {
	margin-bottom:10px;
}
.list li {
	text-decoration: none;
	background-image: url(images/bullet.png);
	background-repeat: no-repeat;
	list-style-type: none;
	float: left;
	width: 180px;
	padding-left: 20px;
	margin-top: 10px;
	background-position: left center;
}
#welcome-image {
	float: right;
	height: 326px;
	width: 427px;
}

让我们来详解一下上面的代码。首先，我们通过background属性（content_background.png）给#welcome加入渐变背景，并且是不重复的

（repeat: no-repeat）。让后给这个div一个固定的宽度高度；宽度为模板内容宽度（850px）,高度为欢迎图片的高度（236px）。

通过text-transform属性让<h2>内的文字大写。将‘yourwebsite’包裹在class为heading-color2的span中，赋予其不同的颜色。

无序列表加入类list，然后把背景设置为bullet.png，通过list-style-type设为none去掉默认列表项前面的圆点。

最后，为了让#welcome-image在#welcome-text的右边显示，我们将其向右浮动，给定固定的宽度（在浮动元素中常用）。同样给welcome_image.png一个固

定的宽度高度值。

3D分割线切片

27 对于3D分割线，我打算通过加入类为separator的div，可以实现复用。使用矩形选框工具（M）选定区域宽度不能大于850px，高度不能超出3D分割线本身的大小。

clip_image053

28 用之前的方法将选区存为images目录下的separator.png。

3D分割线转换成代码

29 对于分割线的HTML和CSS相当简单。在index.html中#welcome下面插入div。将&nbsp;放入.separator的div中。


<!--WELCOME AREA ENDS-->

	<!--SEPARATOR STARTS-->
	<div>&nbsp;</div>
	<!--SEPARATOR ENDS-->

30 CSS文件中加入如下代码。


.separator {
	background-image: url(images/separator.png);
	background-repeat: no-repeat;
	float: left;
	height: 17px;
	width: 850px;
	margin-top: 20px;
	margin-bottom: 20px;
}

我们将.separator的background-image设定为separator.png。给定宽度850，然后向左浮动。height值等于separator.png的高度。然后给顶部和底部

margin设为20px，让它们彼此之间有一定的间歇。

侧边栏切片

31 对于侧边栏，我们仅需要侧边栏框。这个教程中侧边栏框大小是固定的，但是如果需要可以很容易的扩展（这部分叫给大家自己完成）。使用矩形选框工具（M）选定这个侧边栏框；我的

选定范围是259 x 259px.

clip_image054

32 存为images目录下的contentbox.png。

33 使用矩形选框工具，设定宽度为1px，高度为2px。选定文字之间的分割线部分。

clip_image055

32 和往常一样，存为images目录下的divider.png 。选定很小是因为下面将通过CSS将其水平重复。

编写侧边栏HTML代码

35 在.separator层下面，是我们的#sidebar，将<h3>作为侧边栏标题。然后给无序列表加入类sidebar-list使样式可以自定义。


<!--SIDEBAR STARTS-->
<div id="sidebar">
	<h3>lorem ipsum dolor</h3>
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
		<li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
		<li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
	</ul>
</div>
<!--SIDEBAR ENDS-->

通过CSS样式化侧边栏

36 CSS中加入如下代码


#sidebar {
	float: left;
	height: 209px;
	width: 219px;
	background-image: url(images/contentbox.png);
	background-repeat: no-repeat;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 20px;
}
h3 {
	text-transform: uppercase;
	color: #ffffff;
	text-align: center;
	margin-bottom: 20px;
	font-size: 12px;
}
.sidebar-list li {
	list-style-type: none;
	margin-top: 10px;
	padding-bottom: 10px;
	background-image: url(images/divider.png);
	background-repeat: repeat-x;
	background-position: bottom;
}

我们给#sidebar和contentbox.png一样的宽度高度。然后向左浮动，保证内容居左。同样设定background-image为contentbox.png。

通过text-transform将h3文字大小，通过text-align让文字居中。

最后通过list-style-type取值为none去掉.sidebar-list列表项的默认圆点，然后设定background-image为divider.png，水平重复

(repeat-x)。然后给定一些margin和padding值，让他们之间留些空间。

内容区域转换为代码

37 内容区域相对简单，因为只包含了一些段落和标题。在#content层中，加入二级标题(<h2>)，然后通过span.heading-color2给第二部分的文字添加不同

的颜色。填充段落可以用lorem ipsum无意义文本。HTML代码如下。


<!--CONTENT STARTS-->
<div id="content">
	<h2>welcome to <span>yourwebsite!</span></h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
</div>
<!--CONTENT ENDS-->

内容区域样式化

38 #content层加入以下代码。


#content {
	float: right;
	width: 550px;
	text-align: justify;
}
#content p {
	margin-bottom: 10px;
}

为了让#content在右边显示，我们将其向右浮动，然后给定一个固定的宽度。不给定一个固定的高度的原因是我们想通过内部文本来控制高度。然后给<p>加入顶部

和底部margin让它们之间留有空间（因为之前我们已经将它们都归零了，这步是必须的）。

页脚切片

39 就快要结束了，让我们继续！使用矩形选框工具，大小850px × 60px将也叫背景图片选定。

clip_image056

页脚转换成代码

40 页脚很好转换成代码：我们之需要之前创建的#footer。在#footer层中，我们使用<p>加入一些版权文字。代码如下：


<!--FOOTER STARTS-->
<div id="footer">
	<p>Copyright &copy; Six Revisions - Design By Richard Carpenter</p>
</div>
<!--FOOTER ENDS-->

将页脚样式化

41 加入如下代码。


#footer {
	float: left;
	width: 850px;
	background-image: url(images/footer.png);
	background-repeat: no-repeat;
	height: 60px;
	margin-top: 40px;
	padding-top: 25px;
	text-align: center;
}

我们将#footer层的background-image属性设置为footer.png；向左浮动；通过no-repeat保证背景图的不重复。#footer宽度高度大小和footer.png相

等。然后在顶部通过margin给出一定空间。

完成！

我们做完了！谢谢阅读本教程，我很期待大家的评论和问题！如果大家做的不错，最终效果应该像这样：

（点击图片查看在线demo）

clip_image041[1]

下载相关文件

 

摘自：http://techguru.cn/design-a-minimal-and-modern-portfolio-layout-in-photoshop

]]> http://blog.acmind.com/archives/1686/feed 0 顶级抠图手法 http://blog.acmind.com/archives/327 http://blog.acmind.com/archives/327#comments Tue, 19 May 2009 04:52:06 +0000 笑谈 http://blog.acmind.com/?p=327 原图
clip_image001
先用钢笔或套索工具勾出人物的主体部分，做的时候一定要注意，蚂蚁线不要太到边缘，更不能外出，否则扣出来的效果是不理想的。 clip_image003
然后进行羽化，羽化的作用是使边缘柔和，不会显得生硬。
clip_image005
羽化值根据图像的面积的大小和所选范围的大小而设定，我这里设定为1
clip_image007
然后ctrl+j自动生成 图层1
clip_image009
我将 图层1 改为“人物主体”，目的为后来的另外几种抠图备用，使大家能一目了然。
clip_image011
关闭人物主体前的眼睛，选中背景层，回到通道。
大家注意看，蓝色通道的背景很干净，呈现单一的灰白。那么蓝通道就可以利用了。
clip_image013
将蓝通道拖到创建新通道图标按钮处，得到一个新的“蓝 副本”通道，如图所示：
clip_image015
ctrl+i将蓝副本通道反相，反相后，原来白的变黑，黑的变白了。
但由于原来白的部分不是纯白，当然反相后就不可能是纯黑了，为了将黑度增强，就必须要进行下一步的色阶调整了。
clip_image017
ctrl+L 色阶面版跳出来了
clip_image018
将中间的小三角往右拖，圆圈内的数值由原来的1变为0.88了，蓝通道显得更黑了。
clip_image019
按住ctrl 用鼠标点击“蓝 副本”通道，蚂蚁线出现了，现在的状态为选取了白色区域，我们要的就是这个白色选区了。
clip_image021
不要取消蚂蚁线，回到背景层
clip_image022
ctrl+j自动生成“图层1”，隐藏背景层前的眼睛，效果如图所示：
clip_image024
按住ctrl，用鼠标点击红圈内的按钮，在图层1的下方出现“图层2” ，随意填充一种黄色。如图所示：
clip_image026
大家看，头发边缘效果不好，显得有些灰白，用图层菜单——修边——移去白色杂边命令可清除掉。 （ 当然也可用“正片叠底”在后面的方法里我会用到的）
clip_image028
clip_image030
大家看，发丝边缘现在很漂亮了
clip_image032
让人物主体层前的眼睛出现，该层为可见。大家看，现在总的效果是不是好看了呀！
这种观察通道，选取可利用通道抠图到此完毕！
clip_image034

第二抠

教程名是“一图五抠”，第一抠完了，现在进行新的第二抠了
假如“蓝通道”同红、绿两通道一样，背景部分是花的，而不是单一的灰白怎么办呢？
我现在以绿通道为例，来做个示范。
clip_image013[1]
同样，复制绿通道为“绿 副本”，然后ctrl+i反相
clip_image036
将图放大观察，背景部分有明显的灰色块。
如过用色阶来加深绿副本通道，若为了使背景够黑加深过多，会损失发丝。所以在进行色阶调整前先用画笔工具往背景上涂抹黑色。
clip_image037
现在背景比较黑了。大家注意，要涂抹整个背景。
clip_image038
ctrl+L色阶调整，如图：
clip_image040
按住ctrl，用鼠标点击“绿副本”通道，蚂蚁线出现了
clip_image041
保持蚂蚁线不取消，回到背景层
clip_image042
按ctrl+j出现“图层1”如图所示：
clip_image043
按住ctrl，用鼠标点击红圈处，在图层1的下方出现“图层2”，填充黄色，效果如图所示：
clip_image045
大家看上图，同样是发丝边缘不美观。
我这次将图层1的模式设定为“正片叠底”，注意看红色椭圆里的内容。
大家看效果立即好起来了。
（当然大家也可象第一抠里那样将图层1移去白色杂边）
clip_image047
让“人物主体层”前的眼睛出现，该层为可见。大家看，效果也不错了。
第二抠到此完毕！
clip_image049

第三抠

接下来进行第三抠，用“抽出”抠图
复制背景层为“背景副本”
clip_image051
clip_image052
这是抽出面版了，注意我用红色椭圆圈住的几个地方。
用边缘高光器工具在人物头发上涂抹一层绿色（涂抹其它颜色也可以），强制前景色为“黑色”，（黑色是怎样来的呢？用鼠标双击默认的白色，就会跳出拾色器，颜色应有尽有了）。
设置完后点按“好”
clip_image054
回到“背景副本”层，效果如图所示：
clip_image056
让“人物主体层”前的眼睛出现。该层为可见。大家看，效果也不错！
第三抠到此完毕！
clip_image058

第四抠

现在进行第四扣，色彩范围抠图
将前景色设定为“黑色”，注意我用红圈圈住的地方。
clip_image060
clip_image061
不用更改任何设置，直接点按“好”
clip_image062
蚂蚁线出现了
clip_image064
ctrl+j出现“图层1” 效果如图所示：
clip_image066
在图层1的下方新建“图层2”，填充黄色，效果如图所示：
clip_image068
将图层1移去白色杂边
clip_image069
将“人物主体层”为可见，让前面眼睛出现。显示效果如图所示：
第四抠到此完毕！
clip_image071

第五抠

最后进行第五抠了，直接使用“正片叠底”
复制蓝通道为“蓝 副本”
clip_image073
ctrl+L色阶调整，这回三角滑块是向左方向拉的，使蓝副本通道里的黑白更为分明，注意输入色阶值的变化。
clip_image075
选中“蓝副本通道”，ctrl+a 全选，然后ctrl+c复制
clip_image077
回到图层，新建图层1，将刚才的复制粘贴到图层1，效果如图所示：
clip_image079
在图层1的下方新建“图层2”填充黄色，然后将“图层1”设定为“正片叠底”（注意红色椭圆里的内容）。效果如图所示：
clip_image081
让人物层前的眼睛出现，该层为可见。大家看，效果也是不错！
第五抠到此完毕！
到此整个教程的抠图结束了！
clip_image083

 

摘自：http://baike.360.cn/4048444/7705920.html

]]> http://blog.acmind.com/archives/327/feed 0