<![CDATA[蜗爱CSS - Ps/Web设计]]> http://www.woaicss.com/ zh-cn PBlog2 v2.4 蜗爱CSS http://www.woaicss.com/images/logos.gif http://www.woaicss.com/ 蜗爱CSS http://www.woaicss.com/article/photoshop/banner.htm <![CDATA[banner设计]]> wo-ai-niqq@163.com(woniu) Fri,16 Apr 2010 14:09:10 +0800 http://www.woaicss.com/default.asp?id=186


[点击小图看大图]]]> http://www.woaicss.com/article/photoshop/css82.htm <![CDATA[网页设计中字体设置详解]]> wo-ai-niqq@163.com(woniu) Sat,30 Jan 2010 15:57:52 +0800 http://www.woaicss.com/default.asp?id=176 YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

样式优先级
通常用户看到的页面的样式会受到三层控制:

第一层是浏览器的默认样式
第二层是网页定义样式
第三层是用户自定义样式
和CSS一样，后面的优先级 高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。不过，当有 !important 时，网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

字体：arial
我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：

1.Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica
就没有这么幸运了。

2.视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用
arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。

3.一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为
font-family:arial,sans-serif;
，但是至少在非中文版的Win7下当编码是GBK时，IE8会因
sans-serif
来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在
sans-serif
前加上宋体而Google无需这样做的原因。

4.因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用
font-family:arial;
可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置
{font-family:\5b8b\4f53;}
也是很合理的选择。

大小：12px

1. 12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。

2.不用考虑基于字体大小（em）的设计。

3.在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。

行高：1.5倍

1.这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是
font:13px/1.231 arial,helvetica,clean,sans-serif;
即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。

2.在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。

3.设置
line-height
时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把
line-height
计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的
font-size
的倍数，所以设置为无单位的数值是最佳选择。

4.深入CSS 行高非常有利于理解
line-height
，值得一读。

性能和效率

1.大部分平台都有
arial
，减少浏览器的查找时间。

2.代码最少，书写方便。
arial
基本上是名字最短的字体了，可以节约CSS的大小。

3.所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。

4.中文最好用unicode表示，比如使用宋体是
{font-family:\5b8b\4f53;}
，使用微软雅黑是
{font-family:\5fae\8f6f\96c5\9ed1;}
，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。

5.使用正确的字体种类写法，避免使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

未来

1.通过对中英文及符号混排的测试， 我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打 开“使用屏幕字体的边缘平滑”选项的话，在firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的 解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年，XP死掉的时候。

2.虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。

原文地址：默认Web字体样式 @ 随网之舞]]> http://www.woaicss.com/article/photoshop/ps20.htm <![CDATA[网页美化你用小图标吗？]]> wo-ai-niqq@163.com(woniu) Mon,11 Jan 2010 14:20:26 +0800 http://www.woaicss.com/default.asp?id=168 ©<>这几个字符您一定不陌生吧，下面这几个呢？ ›»«如果您还知道那再看这几个呢？☎☠✎ ✓下面来看看他们的在网页中的真面目吧 
程序代码 Example Source Code

  & nbsp;& copy;& lt;<& gt;& rsaquo;& raquo;& laquo;& #9742;& #9760;& #9998;& #10003;依次为空格©<<>›»«☎☠✎✓


  看到这您是不是有点晕，不知道我在什么，下面贴几张图您就明白了。




您发现了没有，图中的文字中用到了许多修饰的小图标，是不是给界面的美观增色不少？是的，合理的运用这些小图标既可以使轻松指引读者还可以从细节上为网页整体增色，何乐而不为呢？那么是不是要去搜集一些类似的小图标呢？答案是不用。那些事只有美工才需要，我们一向比较懒，所以我们就…

今天的主角闪亮登场→HTML Symbol Entities。那么为什么要使用字符而不使用小图标呢好处有哪些呢？

1.它比图标加载速度快；

2.它的大小可以随字体的大小而变化；

3.它可以随意改变颜色。

下面用☎做个demo，

正常情况：

程序代码 Example Source Code

以下为引用的内容：

<p>正常电话图标：☎</p>

正常电话图标：☎


改变字体大小：
程序代码 Example Source Code

以下为引用的内容：

<p style="font-size:26px;">大号电话图标：☎</p>

大号电话图标：☎


改变颜色：
程序代码 Example Source Code

以下为引用的内容：

<p style="color:Red;font-size:26px;">大号红色图标：☎</p>

大号红色图标：☎


是不是很简单，用起来很爽呢？但是有人又会问：“这么多字符我怎么记得住每个对应的代码是什么？”如果您是观察仔细的人，可能会发现其实基本上每个字符都有对应的名字，而且都是英文的缩写如：©；就是copyright的缩写,←就是left arrow的缩写，是不是很好记呢？如果您还是懒的记，那就什么时候用，什么时候来这里（w3schools）或这里（Character Entity Reference HTML 4）看吧，很详细而且比较权威。

原文地址：http://www.cnblogs.com/gudao119/archive/2010/01/05/1639447.html

]]> http://www.woaicss.com/article/photoshop/158.htm <![CDATA[20个精彩的圣诞节photoshop教程]]> wo-ai-niqq@163.com(woniu) Thu,24 Dec 2009 10:25:16 +0800 http://www.woaicss.com/default.asp?id=158

一组国外网站上以圣诞节为主题的photoshop教程，风格各异但都很漂亮。

用photoshop制作一个绚丽的圣诞树



设计一个圣诞风格的网页模板



制作一个漂亮的圣诞节贺卡



制作一个漂亮而富有创意的圣诞节贺卡



制作一个现代感的圣诞壁纸



圣诞节手绘壁纸



圣诞树



photoshop制作圣诞贺卡



如何创建和装饰一个圣诞树在photoshop中



制作一个多国的圣诞壁纸



圣诞球教程（不知道什么东东）



用圣诞树球设计圣诞卡



祝你圣诞快乐



圣诞玻璃球制作



绘制独特的圣诞装饰品



制作圣诞贺卡



圣诞星星绘制



Swirly圣诞树



绘制圣诞球



圣诞礼品文字效果


]]> http://www.woaicss.com/article/photoshop/ps111.htm <![CDATA[web设计和制作中虚线的实现]]> wo-ai-niqq@163.com(woniu) Sat,05 Dec 2009 09:49:04 +0800 http://www.woaicss.com/default.asp?id=145   
  （一）设计中实现虚线

    总结以下photoshop画虚线的几种方法（只讨论直线）：
  
   （1）使用画笔—点击“画笔笔尖形状”，调整“间距”

这种方法简便，制作出的虚线点分布均匀，通过描边路径可以画出任意形状的虚线。

   （2）画一条直线，截取等宽距离（麻烦）
   （3）文字工具输入英文字符“....”调整文字间距。——我用这种方法，朋友说我变态，但是这种方法制作出来的效果我最满意。
   （4）定义画笔—描边路径，和第一种方法相似，但是控制虚线单元的长度。
   （5）直接从满意的网页上截取（汗..以前图省事经常这么干..），因为只是出效果，具体在后面的制作中，你绘制的虚线再完美可能也用不上。

    （二）页面制作中虚线实现
  效果图设计的完美固然重要，但是最终还是要精确还原设计稿，css中的dotted（点线）在IE6下显示和其它浏览器不同，而且点过于密集效果不是很理想。dashed（虚线），虽然浏览器表现相同，但是虚线单元宽，也不是我想要的效果。单独使用图片来完成虚线，又会产生多余标签，这点让人很纠结。看下面用css定义的虚线：
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]




总结：设计效果图，画虚线用第一种方法。
      还原设计稿，点元素图片填充（腾讯用的此种方法，虽然不一定权威，但是个人觉得效果可以）
      个人意见，仅供参考！


本文原创，转载注明出处！http://www.woaicss.com/

]]> http://www.woaicss.com/article/photoshop/ps10.htm <![CDATA[2009年最佳photoshop教程]]> wo-ai-niqq@163.com(woniu) Fri,20 Nov 2009 20:48:39 +0800 http://www.woaicss.com/default.asp?id=140
图片处理

狮子王图片处理教程



如何制作颜料溅到脸上效果



制作间谍飞机照片




制作一个梦幻景观图片





堕落天使创意图片




文字效果


3D文字效果





牛奶飞溅效果文字





水溅起文字效果




创建生动的3D文字





网页设计


怎样用photoshop设计一个清新的web 2.0风格的网页




从头设计一个漂亮的网页




如何创建一个七彩网页布局





从头制作一个魔法之夜网页


]]> http://www.woaicss.com/article/photoshop/css48.htm <![CDATA[12个精美的CSS网页模板下载]]> wo-ai-niqq@163.com(woniu) Fri,06 Nov 2009 16:28:01 +0800 http://www.woaicss.com/default.asp?id=134 css网页模板，没有复杂的css技术，部分网页用到了jQuery。主要看设计的很漂亮，贴出来大家一起学习。



Deom
下载文件 点击下载此文件



Demo

下载文件 点击下载此文件



Demo

下载文件 点击下载此文件



Demo

下载文件 点击下载此文件



Demo

下载文件 点击下载此文件



Demo

下载文件 点击下载此文件



Demo

下载文件 点击下载此文件



Demo

下载文件 点击下载此文件



Demo

下载文件 点击下载此文件



Demo

下载文件 点击下载此文件



Demo

下载文件 点击下载此文件



Demo

下载文件 点击下载此文件

源文：http://chocotemplates.com/]]> http://www.woaicss.com/article/photoshop/ps188.htm <![CDATA[ps制作Windows 7风格导航]]> wo-ai-niqq@163.com(woniu) Mon,02 Nov 2009 22:18:52 +0800 http://www.woaicss.com/default.asp?id=131


制作背景
（1）新建一文件，大小自定，这里是600*400为例。设置前景色：＃1592d7，背景颜色：＃136da2，
选择径向渐变工具。从中间拖动得到下面效果：



（2）添加散射光条文。新建一层，左边工具栏选择-圆角矩形按钮-自定义形状按钮。找到下面这个形状，如果没有可以点击右边的小箭头，追加形状。



选中并在图层上拖动得到如下效果：



前景色设为白色（#ffffff），选择钢笔工具，右击路径--填充路径。得到下图：



右击路径--删除路径。选择“滤镜”-模糊-高斯模糊-5个像素。单击确定。图层混合模式改为“柔光”。不透明度为30%。



添加Windows 7字样及logo。

制作导航背景

（1）新建一图层命名为“nav”。拖出一个黑色矩形框。高度根据自己需要。




填充改为：10%。新建一图层，制作边线。画两根1px线，上边一根黑色，透明度50%，下面一根白色。




复制顶线，移动至底部：



制作导航按钮

（1）新建图层，做出如下选区，注意上下边缘：



填充黑色，不透明设为“0”，描边：



（2）复制上面的图层，清除图层样式，添加如下样式：



渐变叠加，颜色由白色 到透明。描边：



得到如下：



制作右下角高光边框：



添加图层蒙版，前景黑色背景白色。拖动得到如下效果：



最终：


版权所有，转载注明出处!


（需要源文件的留下邮箱）]]> http://www.woaicss.com/article/photoshop/ps7.htm <![CDATA[photoshop制作草丛文字壁纸]]> wo-ai-niqq@163.com(woniu) Wed,16 Sep 2009 15:19:11 +0800 http://www.woaicss.com/default.asp?id=107
]]> http://www.woaicss.com/article/photoshop/ps6.htm <![CDATA[photoshop制作内嵌效果文字]]> wo-ai-niqq@163.com(woniu) Mon,14 Sep 2009 17:03:19 +0800 http://www.woaicss.com/default.asp?id=106 《photoshop几种字体效果的制作》，今天补充一个文字效果：内嵌文字效果。很简单。关键步骤只有一两步。先看下最终效果：


第一步：新建文件，大小随自己喜好。我这里是550*250。
第二步：制作背景。复制背景图层，并添加渐变叠加，颜色：暗蓝（＃003471）
在底部。淡蓝色的顶部（＃448CCB）。

第三步：制作高光区。新建一图层，并选择画笔工具，前景色为白色（#ffffff），模式为喷枪。参数如下：


在图层的左上角单击：




第四步：输入黑色文字，字体这里用的是：Rockwell，大小合适即可。
调整字体使其居中。
第五步：也是最关键的一步，添加文字样式。渐变叠加，颜色由（＃022854）到（＃0F498C），中点左移至30%：

效果如下：

添加内阴影效果（参数根据效果调节）：


最后添加投影效果：
要注意的是，投影要和高光光源方向一致。模式改为正常，颜色改为明亮的蓝色：＃A8C9E6。

最终完成：
]]>