今天彬Go要向大家推荐一些非常棒的网页设计类教程网站，这些网站都会经常更新一些优秀且高质量的Web界面设计教程。如果你热爱网页设计并且经常搜集各种界面设计教程，那么你一定要把下面这些网站收藏起来。

您还可以参考以下网页设计相关教程及资源:
《Web UI 设计(网页设计)命名规范》
《30个运用纸类元素网页设计的创意实例欣赏》
《2008年最佳Web设计/前端开发技巧、脚本及资源总结》
《精选31个网站界面设计实践教程》

1.PsdVibe

2.HV-Designs

3.SixRevisions

4.AdobeTutorialz

5.GrafPedia

6.TemplateTuts

7.WebDesignDev

8.PSD Tuts

9.Web Tint

10.PSD Tempate

11.Webitect*

12.MonsterTuts

13.PSDCore

14.WebDesignLibrary

15.Talk-Mania

16.PSDFan

17.PSD News Box

18.2Photoshop

19.TutorialTab

20.ToxicLab

21.AlfoArt

22.InsanelyArt

留意更新

订阅彬Go以查看网页设计最新教程及资源。

　　今天暴风彬彬将和大家一同分享一些如何使用现有的Photoshop形状和笔刷创作你自己的云隙阳光效果，然后会为大家展示15个使用了云隙阳光效果的漂亮的网站实例。

您还可以参考以下网页设计相关资源:
《精选2008年最佳设计素材资源&灵感》
《220个漂亮的免费Photoshop图层样式下载》
《精选30个免费高品质PSD源文件》
《网页设计必备的10套漂亮图标集》 

云隙阳光效果Photoshop教程及相关资源

云隙阳光Photoshop教程:

点击这里查看嵌入的视频。

Photoshop云隙阳光笔刷:

Photoshop云隙阳光形状:

使用云隙阳光效果的漂亮网站实例展示

1. No Milk Today

2. That Indie Dude

3. SMS Parking

4. Yo Vivo en Vigo

5. i Menestrelli di Graelion

6. Ciclismo Urbano

7. The Relevant Elephant

8. Future of Web Design New York

9. Jared Campbell

10. Kindle

11. Morgan Hayes

12. SR28

13. Phizz

14. Glass Hills

15. Poll Daddy

　　彬Go会在今后继续更新一些关于最新网页设计流行趋势的教程和资源，欢迎订阅本博客来及时浏览本博客的最新教程及资源。

英文原文:Web Design Trends: Sunbursts and Sun Rays
翻译原文:网页设计新趋势:云隙阳光和光线效果(暴风彬彬)

转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/web-design-trends-sunbursts-sunrays-photoshop.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

　　Photoshop图层样式一直是一种很常用的提高平面/网页设计效率的工具。今天暴风彬彬向大家推荐220个Photoshop图层样式，可以说是对网页设计有很大的帮助，可以大大提高工作效率。你可以将它们应用到标题栏、导航栏等需要各种质感的网页设计区域。其中有很多图层样式是很适合当今Web2.0时代的应用的，还等什么，快收藏起来吧！

点击这里下载

使用方法:将后缀为 .ASL的文件导入Photoshop中即可。

　　如果您有其它更好的参考手册，欢迎留言分享。

　　彬Go会经常更新前端开发/网页设计等相关技术及教程文章，欢迎订阅本博客来及时浏览本博客的最新教程及资源。

　　前几天暴风彬彬在译言看到一篇关于如何设计网页的译文，教程以Step By Step的方式详细的讲解了如何从无到有设计一个时尚的网站页面，设计工具使用Photoshop，读者既能学到网页设计的一些理念有能学到一些Photoshop的网页处理技术。即使是网页设计高手，也能从中领略到当今国外比较流行的Web设计风格及元素。该教程分为设计成效果图和使用XHTML及CSS制作成网页两部分，以下是设计教程部分。感谢maidoumao的辛苦翻译。

      在本教程中，我们使用简洁细瘦的字体，配上优美的背景图片，经过精心排布的空间布局，设计一个高档的网页。

      当你看完本教程，你再去看看我们的姐妹站点NETTUTS，然后跟着做，这样我们就用简洁的HTML代码实现设计。来吧，让我们开始！

　　大家好！我在数年前通过阅读Photoshop教程开始进入设计领域，而后创建了PSDTUTS。我希望这个站点可以帮助和鼓舞其他人！除了PSDTUTS之外，我还在一家叫做Envato的大公司里做了很多不同站点，完成了很棒的项目。

前端设计

　　首先我们开始设计。（点击下图可见大图）

　　一个优雅的设计可能符合设计者的文件夹类型站点的需求，但是可能要根据各种各样的原因而改变。这一切取决于要有良好的版面，结构化的布局以及具有视觉吸引力的背景。

　　设计真正的力量在于向您展现如何在保持设计简洁的同时并完成。在教程中Photoshop部分的最后，我将向您展示如何轻易地更换背景和字体，并阐述这样设计良好效果的原因。

　　结构很简单：横向菜单，主标题面板和内容区。尽管是设计主页，你也可以想象一下内部页面可能也就是具有不同的主题面板和新的内容区。出于简洁的考虑，我们将只讲解主页的设计。

第一步

　　首先新建一个文档。我创建的是宽1100px高1100px的文档。这个文档可以用于宽为1024px的站点，仍然还有空间去决定在可视区域之外如何布置，这样在更大屏幕下也很好的适应。

　　现在第一步先创建一个美观抽象背景。我们使用从#1b204c到#472373这两种颜色按照线性递减绘制背景。

第二步

　　现在我们要一个吸引眼球的背景，足够抽象到不会干扰人阅读文字。很走运，在GoMedia’s Arsenal站点里有一张很棒的免费水彩图片，点击“freebie（免费赠品）”区，你就能找到两张水彩图片；我们要的是绿色那张。

　　现在这样很开心了，你按下CTRL+I将图片反置，会在黑色为底的背景上呈现漂亮的粉紫色，这样就更酷了！

第三步

　　现在把处理过的水彩图片拷贝到主画布上，按下CTRL+T键，将其调整到适当大小。这里我们要将右边淡化为黑色（这样在后面我们可以更方便地编辑我们的HTML代码）。另外，我们也不想在竖直方向过长，因此最好擦掉一些超出的地方。选取一个画刷，选用黑色擦去底下部分。

　　注意最好选取带有一些纹理的画刷，这样擦去部分不会显得很明显。如果你向下滚动画刷列表，有一个Photoshop自带的像图例中的画刷。这个画刷也能用，当然你可能有其他更漂亮的画刷，用起来更加自如。

　　你选中以后，在右边和底下区域黑色填充，这样这层就覆盖在整个画布上了。

第四步

　　现在将水彩图层的透明度减少到70%左右，将覆盖模式设置为混合模式。这样一些颜色头出来显得更加美观。

第五步

　　现在在水彩图层之上再新建一个图层，然后从下至上从黑色到透明做线性递减绘制，这样基本上整个画布到底部就褪化为黑色了。

第六步

　　下一步在两个新图层中，绘制一组白色到透明的光线梯度，逐步扩大。将这些设置为覆盖，最外圈和最小圈的透明度分别设置为40%和100%。

　　基本上你应该在图像上做高亮设置，显得更多的纹理。

第七步

　　现在就是最后完工的背景了。深色、抽象，颜色也相当别致。当然一般来说粉色可能不是你的最爱，如果这样的话，在顶层图层上再加一种颜色图层做调整。我比较喜欢粉紫色，我就这么干了！

第八步

　　现在我们创建一个新图层，加上一个“图标”。我本来没有打算做它，因此我决定只是放一些文字做我的图标。因为这个教程一半在PSDTUTS，另一半在NETTUTS，我就写“psd vs net”几个简单字而已。

　　这里我用的字体是Egyptian505 BT粗体和Egytian505 LT BT Light（这个字体更淡的版本我用在‘vs‘上了）。要让‘vs’抬起来一些，可以在字体面板的基线控制（在下面第二幅图里展示）。

　　最后还要给文字加上一点淡淡梯度重叠和1个像素的内部白光。

第九步

　　现在这一步打开标尺（按下CTRL+R）绘制一组引导线。分别在50px,320px,610px,900px分别绘制四条线将页面划分为三栏。至少这些是我已经用过的数值。看看我的屏幕截图，我才发现第三条线已经出界了。。。哦！

　　反正我已经所有元素放入空间里去了。但是如果要做多重页面，可能就按照其他方式用网格。像这样只是设计主页，我打算用一次这三栏——一会儿以后。

第十步

　　来，现在我们绘制第一个黑色方框。保持标尺和引导线打开状态，新建一个图层从一边到另一边绘制一个方形选取框。用黑色填充，再将透明度设置为80%，右键点击图层选择混合选项。点击“比划”，然后在外边加1px的白色笔画，设置为重叠模式。这样边界看起来更酷，黑色盒子看起来更锐利。

第十一步

　　现在复制方框所在图层，按CTRL+T调整方框大小，保持宽度不变，高度变短（如下图所示）。这就是我们的浏览框。

　　将透明度设置为40%，填充设置为50%。这样这个方框看起来更淡，给两个方框添加了一些深度感，让人觉得主次分明，有所侧重。

　　这种两个方框的对比方式可以很好用来表现元素之间的视觉差异。用户浏览该页面，我们首先想让他们看到大块信息，然后才是浏览栏。将其淡化处理意在告诉用户这部分并不是要想突出的地方，可以稍后再看。

第十二步

　　来，我们现在加上一些文字。这里我仍给大标题使用Egyptian Light字体（在最终的HTML代码中这里是一幅图片），菜单栏使用Arial字体（这里将是HTML文字链接）。

　　这里给出关于字型的一些建议。这样的设计很大程度上取决于我们使用一种简洁字型。漂亮大方的文字显得非常大气，同时它是一种细瘦字型，因此看起来十分优雅。

　　如果你在寻找一个高端设计外观，细瘦经典的字型必不可少。当我第一次看到Helvetica超幼体的时候，我记得疯狂地将它应用到所有设计中，设计看起来的确既简洁又高档。

　　另外，Egyptian这种特别字体具有非常笔直的衫线，又有一种方形感觉，看起来很酷（我的感觉）。

　　还有其他很多很棒的字体可以使用。但是一般来说要用一些更为经典的字体。换句话说，除非你确定知道你的需求，否则最好还是不要使用那些样子奇怪的字体——比方说一些看起来具有未来派的字体。实际上一个有效总体原则就是除非你自信满满，否则还是选择一些更为普通的字体。

　　另外一种用在这里效果非常不错的字型是那种位技术——看起来像是Chris Garrett Media用的字体。我也不知道这是什么字体，或者这种类型的字体叫什么，不过非常简洁。也许一个热心的印刷达人在评论里告诉我们的。

第十三步

　　不管怎样，看完Chris Garrett Media的站点之后，我决定给字体上再加一个梯度覆盖，增加一些亮光，这样看起来更酷。你在下面可以看到，这里我们正在添加一个从黑到白的梯度覆盖，在覆盖模式下淡化一点。

第十四步

　　现在我们再画一个大黑框作为内容区。实际上你可以复制先前的涂层，然后做一些调整。

　　这样我们就实现下图所示的样子了。看起来相当酷吧!!

第十五步

　　现在我们在内容框里加一些假内容。这里我还是给大多数文字用Arial字体，但是标题没用Egyptian，我用了Georgia字体。Georgia没有那么优雅，但是也是个标准字体，可以放在之前的HTML代码里用作标题，可以不用图像或者Flash。

　　实际上，随着Windows Vista的发布又有一种叫做Cambria的半标准字体产生。但是在苹果上火狐浏览器特定尺寸下Cambria存在一些奇怪的渲染问题，因此我们现在还是用表现稳定的Georgia字体。

第十六步

　　最后我在底部新建一个新图层，用深紫色填充，在顶部加1px的边界，瞧，就有个页脚了。

准备建站

　　把以上这些放在一起，准备建站了。

点击查看清晰效果图

可选背景一

　　这个设计很酷地方之一就是更换背景图片很容易，换了以后依然很炫。这里我换了一张从iStockPhoto站点叫做“Passion”的图片做背景，其颜色策略相似。这是一张很酷的3D光线渲染图，像我们现在用的背景一样，也是抽象派，看起来很炫目。

可选背景/颜色二

　　这里我又换了一张iStockPhoto站点的叫做“Blue Energy”的抽象图片做背景。因为颜色变了，所以通览一遍，将一些地方的颜色做了修改——特别是文字地方——再在主图层上添加一个亮光。

为什么奏效

　　现在你可能也不会想这个详细设计了——既然我已经写了完整教程。现在谈一谈为什么有这个效果，这样可以帮助你用这些原则来创建你的专属页面

这里是本次设计的几条原则：

1. 首先，我挑选了几张很炫的背景图片。用几张iStock的图片和一张GoMedia图片可以做出来很好看图片。虽然很好看，但是不会喧宾夺主。他们也很容易淡出。一般容易淡化的图片更容易处理。
2. 好图片一定要搭配简洁的字体排版。因为图片已经很可爱了，就没有必要过分强调字体。一定要是清爽明了，井井有条。
3. 作品另一个因素就是有足够空间。在复杂背景下，很容易看东西就一团糟，所以元素之间，方框以内等地方要保持足够的空间。空间宽裕也是让设计看起来更为高档的好方法。没人喜欢乱七八糟的下等设计。

　　诚然还有很多其他方面的东西可以谈，像颜色、优先级等，但是我认为这里需要关注的主要设计元素还是字体和背景的搭配。最后总结一下，这里一幅小图就说明一切了:-)

现在看HTML/CSS

　　Photoshop部分的工作已经完工了，现在要看看HTML/CSS！接下来来到NETTUTS，看本教程的第二部分——网页开发教程，我们把设计应用到正在使用的网站上。

英文原文:Create a Sleek, High-End Web Design from Scratch
翻译原文:从零开始教您设计一个华丽高档的网页

PSD按钮素材源文件

Holland Dream

DVD塑料包装壳PSD源文件

苹果PSD源文件

台球PSD源文件(教程)

Saturday PSD 源文件

iPod Nano PSD源文件

蝙蝠侠PSD源文件(教程)

Vista光球PSD源文件

PSD源文件包

iPhone 3G PSD源文件

Precious Heart PSD免费源文件下载

电池PSD源文件

录音带PSD源文件

漂亮的N个订阅图标

球形壁纸PSD源文件

光晕效果PSD(教程)

多彩光芒字体效果 PSD 源文件（教程）

为你的设计添加飞溅的斑点效果(教程)

行星PSD源文件

冰封文字风格PSD(教程)

DVD包装+艺术风格 PSD源文件包

NIKE PSD源文件（教程）

缝线效果文字 PSD（教程）

男士插画效果PSD源文件

为图片添加质感（教程）

折射光线的球PSD源文件

透明玻璃质感文字PSD（教程）

PSD-BOB

简单的金色质感文字PSD源文件（教程）

　　希望这些资源中有你需要的，如果没有也没关系，您可以订阅本博客以第一时间得到彬Go更新的各种教程和设计资源，当然，您也可以选择将本博客加入收藏夹。

转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/30-psd-files-part1.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作