飞鱼的声纳

作者：Daniel Lopes

自从Web2.0冲击互联网以来，页脚就变得比以前任何时候都显得重要了，出现了许多非常漂亮的页脚设计。在这个教程中，我将会教给你如何在Photoshop中创建一个简洁、光滑的网站页脚。

页脚

这就是我们将要创建的页脚。点击下面的截图查看原图。

第1步

和液体感的页首和页脚一样，渐变通常是web2.0设计风格的标志。在这个教程中我们将使用到一组模拟3D材质的渐变文件包。你可以从excellent Deziner Folio得到这个文件包。点击这里下载渐变文件包。

第2步

在Photoshop中创建新文档。我自己创建了一个大的文件，1440像素X900像素大小（以适应我的17英寸显示屏的笔记本）。当然，实际上你的页脚不应该这么大，虽然它可以很好的模拟出当你的浏览器窗口被拖拽后的情况。

选择一个背景颜色，在我的这个例子中，背景色是一个简单的从#b0b0b0到#e1e1e1的渐变色。按住Shift键，创建一个垂直的从上到下的渐变。

第3步

你将要创建什么样的布局在网页设计中是非常重要的。也就是在流式布局（可以自适应浏览器大小的布局）和固定宽度布局（在web2.0风格的网站中固定宽度布局经常会是居中的）之中作出选择。我们的这个页脚将会是一个固定宽度布局的页脚，大小为760像素X420像素。这个尺寸会保证即使在800像素X600像素大小的屏幕上，也叫也会正确的显示出来。

如下所示使用网格来你的网站的大小。注意如果你想创建一个适合于1024像素x768像素屏幕大小的布局，那么将你的网格定义在955像素X600像素的区域。

第4步

虽然我们的页脚是固定宽度，我们仍然希望页脚能够填满整个页面。为了实现这个目的，我们会用到我在Photoshop中制作的仿金属材质的图案。点击这里下载此图案。在Photoshop中打开这个图片，选择编辑>定义图案，为图案命名。

现在创建一个新的文档，1440像素宽，86像素高，选择编辑>填充命令，选择我们刚才创建的图案。全选（Ctrl+A），然后将图片剪切、粘贴到我们的第一个文档的底端，我们将会得到如下的结果。

第5步

现在是时候使用第1步中那漂亮的渐变文件包了。创建一个新的图层，使用矩形选区工具（M）创建一个100%文档宽度的，21像素高的选区。选择渐变工具（G）,然后选择一个漂亮的渐变，我选择的是”Black 5-Gloss”，现在按住Shift键在矩形选区内画一条垂直的线，创建这个渐变。

将创建好的形状移动到第4步中创建的形状的上方。你应当得到和下图显示的图片类似的结果。

第6步

现在我们给第5步创建的图层添加上阴影效果。

第7步

将前景色设置为#545557，背景色设置为#1e211f。在第4步创建的图层下创建一个新的图层。使用选区工具选取第4步图层的内容。选择渐变工具，选择第一个渐变（前景和背景色的结合），按住shift键，在选区上画出一个垂直的渐变。现在选择第4步的图层，将图层混合模式更改为正片叠底。

第8步

在所有图层上方创建一个新的图层，在参考线中间画一个颜色为#dfdfdf的圆角矩形。在图层上右击，点击混合选项，给矩形创建一个投影效果。然后在效果图层上右击，选择创建图层，这样会将投影效果分离为一个单独的图层。

现在你已经有了矩形图层和阴影图层，移动并且改变阴影的大小直到得到如下图的效果。你可以按下Ctrl+T来调出变换工具，然后右击，选择透视，向内拖拽顶部的两个手柄。也可以将阴影向下方移动，使用柔软画笔的橡皮擦工具将上方边缘的阴影擦掉。

第9步

最后添加文字、版权信息和你的logo完成设计。

第10步

为了在html文件中使用页脚，只需将文字移除（文字将会在html中添加），如下图所示剪切背景图片，然后将其粘贴到一个新的文件中。就像在Photoshop中那样，这个图案将会在CSS文件中使用背景图片属性来实现。这就是为什么我们要将图片剪切到这么小，为的是以小的文件得到更好的效果。

要剪切页脚只需要在参考线内选择图片的内容，然后将其剪切并粘贴到一个新的文件中。

选择存储>存储为网页和设备命令来保存这两张图片。然后选择JPG格式和合适的品质。JPG格式和PNG格式都是存储图片的很好的格式，他们可以保存很多的颜色。GIF格式最好用于颜色简单的图片。这种不同的用法是由于不同的算法得来的。

最终的页脚

这样就完成了一个漂亮的页脚元素！想要查看更多不同的页脚设计，点击Thiuven的这篇文章：35个漂亮的页脚设计。

原文：How to Create a Simple & Sleek Web 2.0 Site Footer

最终图片预览

教程细节：

程序：Photoshop CS4

难度：中等

估计完成时间：60分钟

先来看一下我们将要创建的网站设计。

所需要的素材：

下载破旧材质

下载无缝的木头材质

花朵图片

树叶图片

第1步

在这个教程中，我们将用到一些商业图片来创建这个有质感的网站布局。首先让我们创建一个1000像素X1000像素大小的文档。

第2步

从Grafplus.com下载无缝的木头材质。这里是下载地址：下载无缝的木头材质。在Photoshop中打开”texture-small.jpg”图片，然后选择编辑>定义图案。给图案命名，点击确定。现在将图片关闭掉。

第3步

选择背景图层，按下Ctrl+J，这个快捷方式将会复制背景图层。选择新复制的图层，然后选择图层>图层样式>图案叠加，使用之前你创建的那个图案。

第4步

使用矩形工具创建一些不同颜色的垂直条纹。

第5步

按下Ctrl键，在图层调板中点击每一个形状图层，将这些条纹图层都选择上。

第6步

当所有形状都选择上以后，按Ctrl+E键（这个快捷方式会将所有的图层合并成一个图层），将图层混合模式更改为颜色渐淡，不透明度值更改为40%-50%之间。

第7步

现在添加上另外一张图片。再次访问grafplus，下载破旧风格的图片。将这个图片放置在文件的最顶层。选择文件>置入命令，选择这张图片。

第8步

确保你选择了这个图层，然后应用一个简单的投影。图层>图层样式>投影。

第9步

使用矩形选区工具作出如下的选区。

第10步

确保你已经选择上了破损材质的图层，然后按Ctrl+J键（此快捷方式将会通过剪切）。选择新图层，将图层旋转180度（编辑>变换>旋转180度）。使用移动工具将新图层放置于所有图层的上方。然后添加上你的Logo。在这个教程中，我使用的文字是”PSDtuts+”。

第11步

将Logo的图层混合模式更改为颜色加深。

第12步

使用相同的技术切割一些按钮和页脚。结果如下：

第13步

如果你想创建一个不同颜色的特别的按钮，你需要选择该按钮所在的图层，然后按下Ctrl+U调出色相/饱和度对话框，勾选色彩化选择框，然后向左或向右移动滑块来得到你想要的结果。

第14步

在右边，使用矩形工具创建一个白色的形状。

第15步

使用线条工具在白色形状上面创建一些细线条。线条使用的颜色是#d3d1d2。

第16步

在图层面板中选择白色形状图层和线条图层，然后按Ctrl+E合并图层。选择橡皮工具，使用小一些的，圆形的画笔删除图层中的一部分使其看上去像是一张真实的纸。

第17步

添加下列图层样式。

第18步

使用水平文字工具添加一些文字。我使用的字体是Myriad Pro（你可以在windows 7和Vista中找到这种字体）。

第19步

现在在网页中间添加另外一张图片，在图片的右边添加两个箭头。箭头的形状你可以在自定义形状中去找。

第20步

在PSD Plus源文件中，你会找到两张商业图片。当然如果你不是我们的会员，你可以在网上搜索同样的图片。第一张是一片树叶，第二张是一朵红花。在Photoshop中打开这两张图片，去除背景。两张图片都有大概4000像素分辨率的品质，你可以使用魔术橡皮工具或其他你喜欢的方法去除背景。

第21步

将树叶图片放置于白纸的下面，网页的右边。

第22步

将树叶图层复制几次，如图所示将这些树叶以不同的位置摆放。

第23步

最后一步将红花放置在绿叶的上方。

最终结果

这里是最后的结果。祝你在创建这个有质感的页面布局时愉快！

原文：How to Make a Highly-Textured Site Layout in Photoshop

在这个Photoshop教程中，你会学习到如何制作一个有真实触感的木箱子。

第一步：创建一个新的文档

在Photoshop中创建一个300X300像素大小，白色背景的文档。你可以改变文档的大小，但是要保证高度和宽度之比为1:1。

小贴士：使用图层组可以将一组图层放在一起便于一起移动和更改大小。这样避免了对多个图层进行移动和更改大小的操作的单调性。

第二步：创建正面

创建一个新的图层组（将其命名为”Front-Face”）。在图层组中，创建一个新的图层（将其命名为”Front”），选择矩形选区工具，作出如下图的选区，并将其填充为黑色。

选择图层>图层样式>混合模式命令，并使用如下设置：

按住Ctrl键，点击”Front”图层将其载入选区，然后选择选择>编辑>平滑命令，选择3个像素，点击确定。按下Ctrl+Shift+I反选选区，然后点击Delete。

按住Ctrl键，点击图层，选择选择>编辑>收缩，键入25个像素点击确定。创建一个新的图层（命名为”Front-Etch”），将选区填充为黑色。给新创建的图层应用混合选项，使用如下设置：

第三步：创建木纹材质

创建一个新的图层（命名为”Texture”），将其填充为白色。选择滤镜>杂色>添加杂色，应用如下设置：

选择滤镜>模糊>动态模糊并且应用如下设置：

选择”Texture”图层，按住Ctrl键，点击”Front”图层，按下Ctrl+Shift+I键，按下Delete。这样，超出”Front”图层的材质部分就会被清除掉。

在图层仍然被选择的情况下，按下Ctrl+L键，应用如下设置：

将图层混合模式更改为柔光，透明度降低为30%。

第四步：给正面增加细节

创建一个新的图层（命名为”Line”），使用矩形选区工具，如下图那样画一个2个像素宽的垂直线条：

按下Ctrl+T，逆时针方向将线条旋转45度。将线条移动到”Front”图层的左上方。在图层面板中，将”Line”图层放置于”Front-Etch”图层下方，结果看上去应该是这样：

打开混合选项，应用如下设置：

复制图层（Ctrl+J），选择编辑>变换>垂直翻转。将复制好的图层向下移动，直到它的边缘和”Face”图层的左下角对齐。

你可能注意到复制的图层不像它在上方时候那样颜色上能很好的融合，要解决这个问题，打开混合选项，应用如下设置：

复制那两个线条，将它们水平翻转并向右移动，这样你会得到如下的结果：

第五步 进一步给正面增加细节

选择形状工具，在画布的任何地方画一个小的圆圈。打开它的混合选项使用如下设置：

复制此图层（Ctrl+J），然后将这两个圆圈移动到如下位置：

复制这两个圆圈，将它们移动到另外的三个角上。

创建一个新的图层（命名为”Ridges”），作出两个像素宽的水平选区，将其填充为黑色。确保线条要比”Face-Etch”图层的两端短两个像素。

按住Ctrl键点击此图层，将选区向下移动20个像素（按下Shift+Down两次），将选区填充为黑色，重复做出7条这样的水平线条。

打开混合选项使用如下设置：

第六步 给正面增加箭头标志

使用钢笔工具，作出如下箭头形状：

将箭头图层放置于”Texture”图层和”Ridges”图层下方。将其混合模式设置为叠加，不透明度降低为45%。

第七步 给底部增加阴影

创建一个图层（命名为”Shadow”），在图层面板中将它放置于所有图层的下方。将选区填充为6个像素厚的黑色，比正面要略宽一些。

选择滤镜>模糊>高斯模糊，输入2个像素，点击确定。现在选择滤镜>模糊>动感模糊，输入：角度=0，距离=30像素，现在的结果如下：

第八步 创建顶部

创建一个新的图层组（命名为”Upper-Face”），创建一个新的图层（命名为”Up”），如下所示那样画出一个矩形，填充为黑色：

你可以使用网格将其对齐，接下来，选择编辑>变换>透视，点击并且向内拖拽”Up”图层上方的其中一个角，得到的结果如下：

按住Ctrl键，点击图层，选择选择>编辑>平滑，输入3个像素点击确定。按下Ctrl+Shift+I反选选区，点击Delete键。打开它的混合选项，使用如下设置：

按住Ctrl键，在图层上点击，选择选择>编辑>缩小，输入15个像素，点击确定。创建一个新的图层（命名为”Up-Etch”），将选区填充为黑色。将图层向上移动6-7个像素。打开它的混合选项，使用如下设置：

第九步 给顶面增加木头质感

从”Front-Face”图层组中复制”Texture”图层，将它移动到”Upper-Face”图层组中。将它放置于其它两个图层的上方。将超出”Up”图层的”Texture”图层部分清除掉。你会得到类似于如下这样的结果：

第十步 给顶面增加细节

如同在正面所做的那样给顶面增加脊线、线条、钉子等细节。使用相同的图层样式后得到如下结果：

在这里，给脊线和对角线使用1个像素宽的线条，钉子要使用更小的圆圈。

第十一步 最后的调整

要做最后的调整，点击”Front-Face”图层组，选择图层>新调整图层>色阶，调整为你喜欢的样子。

在色阶之外，我还使用的色彩平衡图层，最后的结果如下：

希望你能喜欢这个教程。

下载PSD文件

原文：How To Design a 3D Wooden Box in Photoshop

2009年我主要做了这么几件事：

1、到单位上班，完成单位的各项工作。

2、要个小Baby。到今年开春的时候，我就要当爸爸了！（不可思议的感觉）

3、买了房子，完成装修。从去年的11月份到今年的1月，三个月的时间，除了上班，剩下的时间基本上都花在了房子的装修上，到目前为止基本上已经完成了装修的所有工作。

4、保持了一定的身体素质。通过跑步、跳绳、游泳和简单的力量训练，没有让身体素质下降得太快。

5、做了两个wordpress主题，Early Spring和DeepBlue。第一个主题很不成熟，无人问津。第二个主题还有一定的下载，算是完成了工作。但是在兼容性上出了很多问题，经过我不断的修改，现在基本稳定下来了。

6、完成《飞鱼的声纳》的日常更新工作。今年一年共完成了138篇博客的更新，平均不到3天更新一篇，这个数字还不错。

2010年我的主要任务是：

1、认认真真完成单位的各项工作。

2、写6篇让自己满意的关于工作的文章。

3、照顾怀孕期间以及坐月子期间的媳妇儿，让她每天开开心心的。

4、搬家。

5、在家附近的健身馆办一张年卡，坚持每天锻炼。

6、完成6个让自己满意的wordpress主题。

7、保持一星期两篇文章的博客更新频率。

8、学习英语和韩语。

也就是说，“不要在有颜色的背景上使用黑色的阴影。”在我学习设计的每一各阶段，我都要学到这一点。例如，在Photoshop中添加投影作为图层样式时，不要只是选择黑色或者灰色，最好从背景中取一个颜色，通过调整不透明度把它调暗，直到它看上去像是阴影一样。这是因为在现实中阴影并不是黑色的。它们是在其之上的任何东西的更暗的版本，因为那里光线要少一些。查看下面图片中的阴影，如果你试着重新做出这个阴影的效果，那么我觉得任何不透明度的黑色看上去都不会很好。

 

由于在我们的CSS工具箱里有了RGBa，我听说和看到大家给背景和阴影使用调整到黑色的方法（例如，rgba(0,0,0,0.5)）。这种做法的原因是这样：“由于透明度的原因，阴影的颜色将会混合着背景色”。是的，的确是这样，但是它也会混合着黑色，并非是单纯背景色的更深的调子的版本。

我听说Dan Cederholm在An Event Apart和Bulletproof Web Design教授这种方法。Meagan Fischer最近在教程里也使用了黑色作为阴影颜色，因此我并非否定他们的方法。因为黑色可以在任何背景色上显示出相同的效果，而有色调的阴影只能在那个色调上应用。

我的观点是，如果你想要改变背景颜色，那么你也要在CSS中作出更改。因此如果你那样做的话，不妨也改变一下阴影的色调。如果你无法掌控文字或者盒模型的阴影是什么样，使用黑色。如果能的话，使用有色调的阴影。

查看示例

译者注：

RGBa代表Red Green Blue Alpha。也就是RGB再加上Alpha，是通过给每一像素多分配一部分空间来存储透明信息，从而实现真透明效果。更多的解释见维基百科。
rgba(0,0,0,0.5)这个值的前三个数字0,0,0代表黑色，最后一个数值0.5代表透明度，也就是半透明的效果。

原文：Don’t Use Black for Shadows