新勺网| 专注于引进国外设计资源和设计酷站_

WordPress主题WP-CMS使用说明及下载

admin — Sat, 20 Feb 2010 08:10:14 +0000

自己在WordPress论坛混多久，自己也不清楚了，回想自己当初弄WordPress的时候，头大的感觉，记忆犹新啊，我是一个一直喜欢潜水的人，如今也升级到了“大师”，倍感惭愧。从自己开始做主题开始，也不记得弄过几个，仿制几个，折腾过几个。一直没有尝试做CMS的，主要是自己是个堕落份子，博客建了N次,毁掉N次，最多的时候，文章也就是50篇吧，一直不满意模板，一直折腾。以前想过换成DEDECMS，很多人也说。想把博客建成CMS的，不如用DEDECMS，后来感觉自己舍不得WP。或许已经有情结了。最终还是选择自己折腾WP cms. 这个主题模仿了DEDE官方。融合一下，满足自己的心吧。还是考虑是否与大家一起分享，还有很多地方没有调试好，所以就没有放出来。

图片中很多地方空白的主要原因是，博客文章就20篇，无法填充空白的地方，实属惭愧啊，所以看起来特别不好看，，，

主题设置和常见的CMS主题差不多，这个测试版本，我没有融合统一设置栏目功能，没有制作下拉菜单。主要是不想看到千篇一律的主题模板，太死了，个人还是建议自己一个个单独设置，这样看起来反而显的独一。没有widget功能。没有优化主题设置，没有整合CSS，没有一大堆功能。

增加功能：增加评论贴图功能，，可以自己修改是否使用，增加分页功能，无需插件。首页幻灯片切换效果，无需插件。

特别说明：我只完成基本模板，功能的丰富靠大家。别指望别人帮你做一切。

使用说明：

下图中标注的四个板块：colun1 -colun2 -colun3- colun4分别对应主题包中templates文件夹中的四个文件，名称相同。

WP-CMS模板

分类调用修改方法：以colun1为例：搜索showposts。可发现如下代码：

wp-cms

首页模板文件说明：

wp-cms

你可能会问如何使用文章缩略图，其实很方便，只要你在定文章的时间，在下面找到Custom File，然后，在Key中填入”pre_image”，在Value填放你图片的地址即可，如下(猛击查大图)：

同理幻灯片图片调用方法是：Key中填入”thumbnail”既可以。

OK，如果有BUG，请大家帮忙抓出来。我一定尽力修复，让大家都用到最好效果的主题。当然，你了可以给我留言！

在线演示页面 and 下载页面

最顶级的10个国外设计资源导航网站

admin — Sun, 31 Jan 2010 08:50:32 +0000

有这个10个设计资源收集导航站点，我想对于国外的设计资源，几乎可以统统收归旗下了，下面的站点主要在收集和推荐国外最优秀的设计站点，其中包括的有字体，模板，css，颜色库，素材库，设计工具，以及各种和设计有关的资源。太多了，也许你会问那个才是最好的，不过我可以肯定的告诉你，我也说不出，只能说，他们很优秀，都非常值得你去看看，即使你不学设计，下面的是个站点对设计资源做了非常好的集合，毫不夸张的说，你可以离开搜索引擎，而靠下面的10个收集站点来找你最喜欢的设计资源哦，今天贡献了压箱底的设计酷站了，本站很多资源来自下面的资源站点，也许你看到的就是明天我发的内容也可能哦。

1. Skout

国外设计资源网站

2. Web Developer’s Handbook

国外设计资源

3. For Web Designers

国外设计资源

4. Devlisting

进国外设计资源

5. All Great Web Design gallery Roundup

国外设计资源网站

6. Cork Dump |

新勺网- 专注于引进国外设计资源

7. Resources for Web Design

国外设计资源

8. Agency Tool

新勺网| 专注于引进国外设计资源

9. BLUE VERTIGO |

国外设计资源

10. N Design Studio

国外设计资源

在Photoshop中创建一个时髦音频播放器界面

admin — Thu, 31 Dec 2009 07:37:48 +0000

这个教程就是教大家用Photoshop创建一个时髦音频播放器界面，也是新勺网特别推荐给大家的一个教程，教程中的高光处理是重点，也是一些常用软件界面制作的处理方法。希望对大家有所帮助。

教程需要素材:

Spiderman Pattern

步骤 1

创建一个 600×400 px的图层.

步骤 2

使用放射式渐变填充背景，颜色设置为#5e6c78 ——#20282e

步骤 3

复制背景图层，之后进行滤镜-杂色-添加杂色，设置如下：数量：5%；选择单色。下降图片透明度到30%。

步骤 4

制作主界面，创建一个新图层，（按Ctrl + Shift + N）并命名为“Base”，再使用圆角矩形工具，设置半径5px，画出画面中一样的矩形，并使用这些混合选项。设置参数按照图片所示。
颜色渐变参数为：＃3d4a59;＃1c2329;＃303a44 ，描边颜色为#191919。

步骤 5

600 × 600px。充填50％灰色。然后，添加杂色，参数设置：80％;高斯噪声，单色。然后再选择滤镜模糊-径向模糊：旋转参数为100。之后可以根据自己的感觉，使用快捷键CTRL + F重复径向模糊，直到你满意。

步骤 6

复制到之前创建的“base”图层上。更改混合模式为柔光，不透明度为80％。图层命名为 “Texture”.按Ctrl 点击“base”图层，调用选区，然后按Ctrl + Shift +I, 选择Texture图层点击删除不要的选区。

步骤 7

创建新图层。将它命名为”Higlights”，再用铅笔工具画两条线，分别放置在base图层的视频界面顶端和底部。再选择一个大一点，参数设置为80％不透明度的橡皮擦擦除两侧的线条。

步骤 8

再创建新图层。将它命名为”speaker”。Ctrl键的点击 “base”图层的缩略图获得选区。然后选择矩形工具，按住SHIFT键+ ALT键拖动得到选区，＃3a3a3a填充它。复制图层，命名为“质地”。之后进入混合选项并添加这些设置：选择“蛛网图案（素材下载见文章顶部）”，图案叠加混合模式：叠加模式和参数设置为12％。

步骤 9

创建一个新层，命名为“突出”，再次使用铅笔工具绘制1px高光边缘，然后创建一个新图层，命名为“影子”。使用椭圆工具，取出不需要的区域，羽化，高斯模糊，降低透明度50%既可以，大家可以适当的根据感觉调整。

步骤 10

按照左侧制作方法，创建右侧部分。

步骤 11

之后创建，最小化和最大化及关闭按钮。创建新层，命名为“按钮”。再使用圆角矩形工具，设置半径为2px，画一个小按钮，它填充白色。图层渐变的颜色为：＃8799ab-＃485664-＃8799ab 描边颜色为＃384251。

步骤 12

创建一个新层，命名为“X”。为了让X更好看，你可以使用你喜欢的字体或用铅笔绘制工具，之后再添加一个渐变（暗灰色，浅灰色）和1px阴影得到这个效果。

步骤 13

同样的方法创建另外两个按钮。

步骤 14

创建新层，画一个像图片中的矩形，填充渐变颜色为＃303a44—— ＃4a5968

步骤 15

创建一个新层。将它命名为“光泽”。再绘制一个小矩形，填充白色透明度降低到10％。

步骤 16

按照之前的方法绘制高光，透明度大家根据自己的感觉设置即可以。

步骤 17

文字添加，大家可以根据自己的想法修改，我使用的字体是Digital-7，大家可以在DaFont下载到，而细节的处理，还是使用前面常用的方法，用铅笔工具画1px线条来添加细节高光。

步骤 18

创建一个新层。将它命名为“进度条”。再使用圆角矩形工具，半径设置为5px，绘制一个细长的矩形，黑色填充并添加图层样式：渐变叠加颜色设置为＃303a44-＃1c2329；添加描边1px，颜色为＃afbbc6，不透明度为16％。再创建一个新图层，命名为“进度条旋钮”。画出一个小矩形，并填充黑色。图层样式选项为：内阴影：混合模式正常，颜色-白色，距离0，大小1，渐变叠加：＃5c6977 -＃212a30 -＃5c6977; 外描边：1px，颜色＃222b31。

步骤 19

接下来要制作好多按钮。创建一个新组，命名为“Buttons”。首先制作播放器基本按钮，如暂停键等。建一个新图层，命名“Button base”。用半径为5px的圆角矩形工具画出外框，然后描边（弧线可重复使用圆角工具完成）。选择图层样式-投影：角度90（使用全局光），距离1，大小0；再勾选内阴影：混合模式为正常，颜色白色，角度90（不使用全局光），距离1，大小0；选择渐变叠加：#4d5c6a-#1c2329-#303a43.

步骤 20

用1px铅笔画四条直线，擦去直线的末端，注意透明度变化。看截图自己想象该怎么细致就怎么整。

步骤 21

制作播放、暂停、停止、前进和后退按钮。用矩形和三角形工具简单的画出，在这个图层添加渐变叠加效果，颜色分别为#b7d9ed-#458fb2-#b7d9ed。

步骤 22

现在做最后四个按钮：重复、随机、播放单和均衡器。制作每一个按钮的步骤都差不多，用圆角工具画出大致形状，添加图层样式：投影-透明度26%，扩展100%，大小1；内阴影-模式选正常，颜色白色，透明度40%，角度90，距离1，阻塞100%，大小0；渐变叠加-#3d4a59-#1c2329-#303a44。复制按钮并如图放置。

步骤 23

现在添加文字。选择Arial字体，再进行图层样式处理：投影-透明度42%，角度90，距离1，大小0.渐变叠加- #4c5a69-#8495a7。

步骤 24

再用铅笔工具进行一些细节处理，主要是高光处理。

步骤 25

最后就是音量控制了。用1px铅笔画出喇叭图标，接着进行渐变处理，颜色设置为#b7d9ed-#458fb2-#b7d9ed。

步骤 26

用半径5px的圆角矩形工具画音量条，用渐变工具填充颜色，设置与进度条一致。

步骤 27

画10个小圆圈。激活的小圆用与喇叭一样的渐变填充，其他的填充简单的黑灰渐变。

步骤 28

现在音频播放器的制作基本完成。合并所有图层（除了背景层），复制这个合并层进行2px高斯模糊，选择垂直翻转，再用橡皮擦轻轻擦去底部（注意画笔，不透明度和流量的使用）。
这样一步一步地，漂亮的音频播放器在你的手中诞生了。

这种界面制作，关键是掌握和控制高光和细节的过渡，大家可以多尝试一下，很快就能掌握要领了。

教程来源于tutorial9，由KELA翻译，转载请注明出处：新勺网

下载音频播放器界面PSD文件

webdesignerwall经典教程：用CSS装饰图片

admin — Sat, 26 Dec 2009 08:40:18 +0000

很久之前就看到了这篇文章：CSS Gradient Text Effect ，来自强大的 webdesignerwall ，这是我最喜欢的博客之一，文章虽然不多，但却篇篇是精品，而且博客不论配图还是细节做的都很出色。
这篇文章主要介绍了用简单的 CSS 技巧来装饰图片的技巧，方法很简单，只需要用一个 span 标签并对它应用背景图，即可以做出非常漂亮但不失灵活的效果。而且作者还提供了 20 多种经过精心设计的演示，从简单的装饰一个小图片到应用圆角的边框，再到半透明的蒙版……不废话来，先来看演示：

在线演示页面 and 下载页面

作者给出了这样做的几点理由：

省时方便：不用再用 PhotoShop 去对每张图片进行处理
完好地保留了原始图片：因为是用 CSS 对图片进行样式处理，所以不用对图片进行任何修改，保留了最原始的完整的图片。
非常的灵活：你完全可以通过只修改 CSS 而使图片的效果变成另外一个样子。
应用广泛：可以在任何地方，对任意尺寸的图片进行装饰。
兼容性强：在大部分浏览器上测试通过，包括 (Firefox, Safari, Opera, 甚至是 IE6 )。

基本思路：

思路挺简单的，就是通过在 DIV 中插入一个额外的 SPAN ，然后通过对插入的 SPAN 设置背景图片来实现图片覆盖的效果。如果你不想在 HTML 中插入额外的、没有语义的标签的话，你可以用 javascript 来解决。下面会介绍到！下面的图很好地解释了它工作的原理：

上面代码中关键的是为div 元素设置 position:relative，而为相应的 span 元素设置 position:absolute，然后你就可以将 span 通过 CSS 的 top 和 left 而放置到任意的地方。

针对 IE6 的 PNG Hack

示例中用到了很多 PNG 的背景图片来实现覆盖透明的效果，而 IE6 不支持 PNG 透明，所以要用 Hack 让 IE6 支持 PNG 透明，网上这样的方法有很多，这里作者推荐了一种：iepngfix.htc hack 。需下载 iepngfix.htc 文件并将下面的代码插入到页面的标签中即可。

jQuery 实现方法

如果你不想插入空的、无语意的 span 标签的话，你可以用 jQuery 来向页面中动态地插入标签，也非常的方便。而且不用对原页面进行任何修改。

下面是代码示例：

引入 jQuery 框架后，利用 .prepend 方法向 .photo a 的元素前插入 span !

下面让我们来看下作者为我们做好的 15 个精美的示例：

#1. Simple Gallery (see demo)

#1b. Mini Icons (see demo)

#2. Photo With Text (see demo)

还可以添加对应的文字。

#2b. Popup Text (see demo)

#3. Mini Paper Clip (see demo)

#4. Cork Board Gallery (see demo, IE6 version)

sIFR Version (Flash Text Replacement) (see sIFR demo)

这个例子中的 span 标签是用 jQuery 添加的！

#4b. Cork Board With Masking Tape (see demo, IE6 version)

#5. Art Gallery – Black Frame (see demo)

#5b. Art Gallery – Gold Frame (see demo)

#6. Grungy Watercolor (see demo)

sIFR Version (see sIFR demo)

#7. Glossy Style (see demo)

#8. Wood Panel Gallery (see demo)

最流行日志

2009年40个最佳Photoshop字体设计教程

admin — Sat, 26 Dec 2009 03:19:00 +0000

懂得Photoshop已经有好些年了，说起学会似乎永远不可能，Photoshop优秀创意技巧总再不断的被挖掘出来，学也学不完的。PJ是一个特别喜欢Photoshop的人，特别喜欢ps对字体和图片处理的效果，因此我总想挖掘更多的教程分享给大家，也分享给自己吧。今天新勺网这里推荐国外2009年40个最佳Photoshop字体设计教程，希望对大家学习，或者设计启发有些作用吧。如果你特别喜欢文章中那个教程，请留言告诉我，或者你有更好的教程推荐，也请留言告诉我。

（注明：只需要看图节可以说明效果）

新勺网| 专注于引进国外设计资源和设计酷站_

WordPress主题WP-CMS使用说明及下载

使用说明：

最顶级的10个国外设计资源导航网站

在Photoshop中创建一个时髦音频播放器界面

教程需要素材:

步骤 1

步骤 2

步骤 3

步骤 4

步骤 5

步骤 6

步骤 7

步骤 8

步骤 9

步骤 10

步骤 11

步骤 12

步骤 13

步骤 14

步骤 15

步骤 16

步骤 17

步骤 18

步骤 19

步骤 20

步骤 21

步骤 22

步骤 23

步骤 24

步骤 25

步骤 26

步骤 27

步骤 28

下载 音频播放器界面PSD文件

webdesignerwall经典教程：用CSS装饰图片

作者给出了这样做的几点理由：

基本思路：

针对 IE6 的 PNG Hack

jQuery 实现方法

下面让我们来看下作者为我们做好的 15 个精美的示例：

#1. Simple Gallery (see demo)

#1b. Mini Icons (see demo)

#2. Photo With Text (see demo)

#2b. Popup Text (see demo)

#3. Mini Paper Clip (see demo)

#4. Cork Board Gallery (see demo, IE6 version)

sIFR Version (Flash Text Replacement) (see sIFR demo)

#4b. Cork Board With Masking Tape (see demo, IE6 version)

#5. Art Gallery – Black Frame (see demo)

#5b. Art Gallery – Gold Frame (see demo)

#6. Grungy Watercolor (see demo)

sIFR Version (see sIFR demo)

#7. Glossy Style (see demo)

#8. Wood Panel Gallery (see demo)

最流行日志

2009年40个最佳Photoshop字体设计教程

Geometric Shaped Typography with Grungy Background 转载请注明:译文出处

最流行日志

下载音频播放器界面PSD文件