利用PhotoShop制作网站内容框

查查

<P>在本例教程中我们将学习如何制作如下网页内容框。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813203837284.jpg"></DIV>
<P></P>
<P>1. 建立<STRONG>275像素</STRONG>&nbsp;X <STRONG>300像素</STRONG> 的画布。 </P>
<P>2. 使用矩形工具绘制一矩形，图层 &gt;&gt; 图层样式 &gt;&gt; 渐变叠加。 </P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813203905465.jpg"></DIV>
<P></P>
<P>3. 得到如下效果。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813203910438.jpg"></DIV>
<P></P>
<P>4. 添加“描边”效果。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813203912128.jpg"></DIV>
<P></P>
<P>5. 得到如下效果。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813203939499.jpg"></DIV>
<P></P>
<P>6. 按下 Ctrl 并点击矩形层获得选区，创建新的图层并填充颜色（<STRONG>#333333</STRONG>）。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813203943862.jpg"></DIV>
<P></P>
<P>7. 图层 &gt;&gt; 图层样式 &gt;&gt; 描边。位置“外部”，填充方式“渐变”。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813203950159.jpg"></DIV>
<P></P>
<P>8. 得到如下效果。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813203958573.jpg"></DIV>
<P></P>
<P>9. 创建新的图层，并绘制另一个矩形，图层 &gt;&gt; 图层样式 &gt;&gt; 渐变叠加。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204002325.jpg"></DIV>
<P></P>
<P>10.&nbsp;调整该矩形的位置和大小，得到如下效果。 </P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204007852.jpg"></DIV>
<P></P>
<P>11. 重复步骤 9。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204008607.jpg"></DIV>
<P></P>
<P>12.&nbsp;调整矩形位置和大小得到如下效果。 </P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204011303.jpg"></DIV>
<P></P>
<P>13. 绘制另一个矩形并填充颜色（<STRONG>#A2A3A7</STRONG>），图层 &gt;&gt; 图层样式 &gt;&gt; 内发光。 </P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204014764.jpg"></DIV>
<P></P>
<P>14.&nbsp;调整矩形位置和大小得到如下效果。 </P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204024303.jpg"></DIV>
<P></P>
<P>15. 绘制最后一个矩形，图层 &gt;&gt; 图层样式 &gt;&gt; 渐变叠加。 </P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204025328.jpg"></DIV>
<P></P>
<P>16.&nbsp;调整位置和大小得到如下效果。 </P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204030239.jpg"></DIV>
<P></P>
<P>17. 图层 &gt;&gt; 图层样式 &gt;&gt; 描边。位置“外部”，填充方式“渐变”。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204031596.jpg"></DIV>
<P></P>
<P>18. 图层 &gt;&gt; 图层样式 &gt;&gt; 斜面和浮雕，样式“内斜面”。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204035694.jpg"></DIV>
<P></P>
<P>19. 得到如下效果。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204045107.jpg"></DIV>
<P></P>
<P>20. 栅格化图层，利用矩形选框工具建立如下选区。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204047301.jpg"></DIV>
<P></P>
<P>21. 删除选区。</P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813204049340.jpg"></DIV>
<P></P>
<P>22.&nbsp;输入文字信息，一个据有层次感的网站内容框就制作完成了。 </P>
<P>
<DIV align=center><IMG class=resourceimage alt="" src="http://www.cgfancy.com/Article/UploadFiles/200608/20060813203837284.jpg"></DIV><BR><script language="JavaScript" src="http://www.16xx8.com/bbs/10.js"></script><BR>