5ivedance

[译]用Photoshop制作绚烂光纹效果

admin — Sat, 27 Feb 2010 13:56:59 +0000

说明：原文地址 How to Create Brilliant Light Streaks in Photoshop
翻译过程加了一些热键在小括号里面。

在图片或插画中使用光效吸引眼球变的非常流行。在这个教程中将学习利用简单的技巧制作绚烂的光效，这些效果可以运用在不同的场合来增加设计感。

第一步：

首先创建一个漂亮的背景。新建一个ps文档，背景填充为黑色（D→Alt+Delete）。创建一个新图层（Ctrl+Alt+Shift+N）并填充为白色（D→Ctrl+Delete）。下面将用“光照效果”滤镜（滤镜>渲染>光照效果）在这层上制作柔美的渐变效果。在强度调节旁边，选择任意你喜欢的颜色只要有一些深的颜色。比如，我选择了深粉色/紫色。

第二步：

下面要制作一个光效层，并且将会用它来制作所有的光波。新建图层设置混合模式为滤色。然后用椭圆选区工具选择一个圆形选区，然后设置20px将选区羽化（选择>修改>羽化）（Ctrl+Alt+D）。这样会让光效边缘更像光晕。我喜欢用三种颜色来做渐变。第一个也是最里面应该选择白色或者接近白色的颜色。填充的时候确保从选区中心开始到选区边缘结束。

第三步：

复制刚在制作的光效图层（Ctrl+J），隐藏原始层。之后会用这层制作更多的光纹。现在，比例缩放（编辑>变换>缩放）光效层使其扁平。这样做可以控制光纹的粗细。

第四步：

从这步开始变的很有意思。有两个滤镜可以使光效变的像光纹：波浪（滤镜>扭曲>波浪）和（滤镜>扭曲>旋转扭曲）。用波浪可以制作各式各样不规则的纹路。像其他滤镜一样，可以调节滑块来取得理想的效果。但是或许应该适当调大波长和波幅。同样，试着在同一图层多次运用“波浪”滤镜。

使用旋转扭曲滤镜会产生辐射发散状的光纹。

另外，可以尝试合并两个光纹。这样可以为光纹添加更多的细节，让整体的效果更棒。

Women at FITC

admin — Thu, 25 Feb 2010 14:09:30 +0000

这是一个在Youtube发布的视频，所以看不到也很正常。但是我强烈的感觉到10秒的时候很有意思。很想介绍下各种穿越魔法，但是为了这个IP下面几百个站点的生存状况，还是算了。这个10秒Really、Really、Really、Really、Really、Really interesting.

http://www.fitc.ca/women/

为了让这篇日志不是太水——我决定放两篇帮助文件。>3<

Photoshop的图层混合模式详解（中英文对照）

（转载自茫茫互联网）

1. 正常(Normal)模式

在“正常”模式下，“混合色”的显示与不透明度的设置有关。当“不透明度”为100%，也就是说完全不透明时， “结果色”的像素将完全由所用的“混合色”代替；当“不透明度”小于100%时，混合色的像素会透过所用的颜色显示出来，显示的程度取决于不透明度的设置与“基色”的颜色。如果在处理“位图”颜色模式图像或“索引颜色”颜色模式图像时，“正常”模式就改称为“阈值”模式了，不过功能是一样的。

2. 溶解(Dissolve)模式

在“溶解”模式中，主要是在编辑或绘制每个像素时，使其成为“结果色”。但是，根据任何像素位置的不透明度， “结果色”由“基色”或“混合色”的像素随机替换。因此，“溶解”模式最好是同Photoshop中的一些着色工具一同使用效果比较好，如“画笔”、“仿制图章”、“橡皮擦”工具等，也可以使用文字。当“混合色”没有羽化边缘，而且具有一定的透明度时，“混合色”将溶入到“基色”内。如果“混合色”没有羽化边缘，并且“不透明度”为100%，那么“溶解”模式不起任何作用。如果是用“画笔”工具或文字创建的“混合色”，同“基色”交替，就可以创建一种类似扩散抖动的效果，如果以小于或等于50％的不透明度描划一条路径，然后利用“描边路径”命令，“溶解”模式在图像边缘周围创建一种“泼溅”的效果。还可以制作模拟破损纸的边缘的效果等。如果利用“橡皮擦”工具，可以在一幅图像上方创建一个新的图层，并填充的白色作为“混合色。然后在“溶解”模式中，用“橡皮擦”工具擦除，可以创建类似于冬天上霜的玻璃中间被擦除的效果，

3. 变暗(Darken)模式

在“变暗”模式中，查看每个通道中的颜色信息，并选择“基色”或“混合色”中较暗的颜色作为“结果色”。比“混合色”亮的像素被替换，比“混合色”暗的像素保持不变。“变暗”模式将导致比背景颜色更淡的颜色从“结果色”中被去掉了。

4. 正片叠底(Multiply)模式

在“正片叠底”模式中，查看每个通道中的颜色信息，并将“基色”与“混合色”复合。“结果色”总是较暗的颜色。任何颜色与黑色复合产生黑色。任何颜色与白色复合保持不变。当用黑色或白色以外的颜色绘画时，绘画工具绘制的连续描边产生逐渐变暗的过渡色，其实“正片叠底”模式就是从“基色”中减去“混合色”的亮度值，得到最终的“结果色”。如果在“正片叠底”模式中使用较淡的颜色对图像的“结果色”是没有影响的。利用 “正片叠底”模式可以形成一种光线穿透图层的幻灯片效果。其实就是将“基色”颜色与“混合色”颜色的数值相乘，然后再除以255，便得到了“结果色”的颜色值。例如，红色与黄色的“结果色”是橙色，红色与绿色的“结果色”是褐色，红色与蓝色的“结果色”是紫色等。

5. 颜色加深(Clolor Burn)模式

在“颜色加深”模式中，查看每个通道中的颜色信息，并通过增加对比度使基色变暗以反映混合色，如果与白色混合的话将不会产生变化，“颜色加深”模式创建的效果和“正片叠底”模式创建的效果比较类似。

6. 线性加深(Linear Burn)模式

在“线性加深”模式中，查看每个通道中的颜色信息，并通过减小亮度使“基色”变暗以反映混合色。如果“混合色”与“基色”上的白色混合后将不会产生变化。

7. 变亮(Lighten)模式

在“变亮”模式中，查看每个通道中的颜色信息，并选择“基色”或“混合色”中较亮的颜色作为“结果色”。比“混合色”暗的像素被替换，比“混合色”亮的像素保持不变。在这种与“变暗”模式相反的模式下，较淡的颜色区域在最终的“合成色”中占主要地位。较暗区域并不出现在最终结“合成色”中。

8. 滤色(Screen)模式

“滤色”模式与“正片叠底”模式正好相反，它将图像的“基色”颜色与“混合色”颜色结合起来产生比两种颜色都浅的第三种颜色。其实就是并将“混合色”的互补色与“基色”复合。“结果色”总是较亮的颜色。用黑色过滤时颜色保持不变。用白色过滤将产生白色。无论在“滤色”模式下用着色工具采用一种颜色，还是对“滤色”模式指定一个层，合并的“结果色”始终是相同的合成颜色或一种更淡的颜色。此效果类似于多个摄影幻灯片在彼此之上投影一样。此“滤色”模式对于在图像中创建霓虹辉光效果是有用的。如果在层上围绕背景对象的边缘涂了白色或任何淡颜色，然后指定层“滤色”模式，通过调节层的“不透明度”设置就能获得饱满或稀薄的辉光效果。

9. 颜色减淡(Clolor Dodge)模式

在“颜色减淡”模式中，查看每个通道中的颜色信息，并通过减小对比度使基色变亮以反映混合色。与黑色混合则不发生变化。除了指定在这个模式的层上边缘区域更尖锐，以及在这个模式下着色的笔划之外，“颜色减淡”模式类似于“滤色”模式创建的效果。另外，不管何时定义 “颜色减淡”模式混合“混合色”与“基色”像素，“基色”上的暗区域都将会消失。

10. 线性减淡(Linear Dodge)模式

在“线性减淡”模式中，查看每个通道中的颜色信息，并通过增加亮度使基色变亮以反映混合色。但是大家可不要与黑色混合，那样是不会发生变化的。

11. 叠加(Overlay)模式

“叠加”模式把图像的“基色”颜色与“混合色”颜色相混合产生一种中间色。“基色”内颜色比“混合色”颜色暗的颜色使“混合色”颜色倍增，比“混合色”颜色亮的颜色将使“混合色”颜色被遮盖，而图像内的高亮部分和阴影部分保持不变，因此对黑色或白色像素着色时“叠加”模式不起作用。“叠加”模式以一种非艺术逻辑的方式把放置或应用到一个层上的颜色同背景色进行混合，然而，却能得到有趣的效果。背景图像中的纯黑色或纯白色区域无法在“叠加”模式下显示层上的“叠加”着色或图像区域。背景区域上落在黑色和白色之间的亮度值同“叠加”材料的颜色混合在一起，产生最终的合成颜色。为了使背景图像看上去好像是同设计或文本一起拍摄的。

12. 柔光(Soft Light)模式

“柔光”模式会产生一种柔光照射的效果。如果“混合色”颜色比“基色颜色的像素更亮一些，那么“结果色”将更亮；如果“混合色”颜色比“基色”颜色的像素更暗一些，那么“结果色”颜色将更暗，使图像的亮度反差增大。例如，如果在背景图像上涂了50％黑色，这是一个从黑色到白色的梯度，那着色时梯度的较暗区域变得更暗，而较亮区域呈现出更亮的色调。其实使颜色变亮或变暗，具体取决于“混合色”。此效果与发散的聚光灯照在图像上相似。如果“混合色”比 50% 灰色亮，则图像变亮，就像被减淡了一样。如果“混合色”比 50% 灰色暗，则图像变暗，就象被加深了一样。用纯黑色或纯白色绘画会产生明显较暗或较亮的区域，但不会产生纯黑色或纯白色。

13. 强光(Hard Light)模式

“强光”模式将产生一种强光照射的效果。如果“混合色”颜色“基色”颜色的像素更亮一些，那么“结果色”颜色将更亮；如果“混合色”颜色比“基色”颜色的像素更暗一些，那么“结果色”将更暗。除了根据背景中的颜色而使背景色是多重的或屏蔽的之外，这种模式实质上同 “柔光”模式是一样的。它的效果要比“柔光”模式更强烈一些，同“叠加”一样，这种模式也可以在背景对象的表面模拟图案或文本，例如，如果混合色比 50% 灰色亮，则图像变亮，就像过滤后的效果。这对于向图像中添加高光非常有用。如果混合色比 50%灰色暗，则图像变暗，就像复合后的效果。这对于向图像添加暗调非常有用。用纯黑色或纯白色绘画会产生纯黑色或纯白色。

14. 亮光(Vivid Light)模式

通过增加或减小对比度来加深或减淡颜色，具体取决于混合色。如果混合色（光源）比 50% 灰色亮，则通过减小对比度使图像变亮。如果混合色比 50% 灰色暗，则通过增加对比度使图像变暗，

15. 线性光(Linear Light)模式

通过减小或增加亮度来加深或减淡颜色，具体取决于混合色。如果混合色（光源）比 50% 灰色亮，则通过增加亮度使图像变亮。如果混合色比 50% 灰色暗，则通过减小亮度使图像变暗。

16. 点光(Pin Light)模式

“点光”模式其实就是替换颜色，其具体取决于“混合色”。如果“混合色”比 50% 灰色亮，则替换比“混合色”暗的像素，而不改变比“混合色”亮的像素。如果“混合色”比 50% 灰色暗，则替换比“混合色”亮的像素，而不改变比“混合色”暗的像素。这对于向图像添加特殊效果非常有用。

17. 差值(Diference)模式

在“差值”模式中，查看每个通道中的颜色信息，“差值”模式是将从图像中“基色”颜色的亮度值减去“混合色”颜色的亮度值，如果结果为负，则取正值，产生反相效果。由于黑色的亮度值为0，白色的亮度值为255，因此用黑色着色不会产生任何影响，用白色着色则产生被着色的原始像素颜色的反相。“差值”模式创建背景颜色的相反色彩，例如，在“差值”模式下，当把蓝色应用到绿色背景中时将产生一种青绿组合色。“差值”模式适用于模拟原始设计的底片，而且尤其可用来在其背景颜色从一个区域到另一区域发生变化的图像中生成突出效果。

18. 排除(Exclusion)模式

“排除”模式与“差值”模式相似，但是具有高对比度和低饱和度的特点。比用“差值”模式获得的颜色要柔和、更明亮一些。建议你在处理图像时，首先选择“差值”模式，若效果不够理想，可以选择“排除”模式来试试。其中与白色混合将反转“基色”值，而与黑色混合则不发生变化。其实无论是“差值”模式还是“排除”模式都能使人物或自然景色图像产生更真实或更吸引人的图像合成。

19. 色相(Hue)模式

“色相”模式只用“混合色”颜色的色相值进行着色，而使饱和度和亮度值保持不变。当“基色”颜色与“混合色”颜色的色相值不同时，才能使用描绘颜色进行着色。但是要注意的是“色相”模式不能用于灰度模式的图像。

20. 饱和度(Saturation)模式

“饱和度”模式的作用方式与“色相”模式相似，它只用“混合色”颜色的饱和度值进行着色，而使色相值和亮度值保持不变。当“基色”颜色与“混合色”颜色的饱和度值不同时，才能使用描绘颜色进行着色处理。在无饱和度的区域上（也就是灰色区域中）用“饱和度”模式是不会产生任何效果的。

21. 颜色(Color)模式

“颜色”模式能够使用“混合色”颜色的饱和度值和色相值同时进行着色，而使“基色”颜色的亮度值保持不变。“颜色”模式模式可以看成是“饱合度”模式和“色相”模式的综合效果。该模式能够使灰色图像的阴影或轮廓透过着色的颜色显示出来，产生某种色彩化的效果。这样可以保留图像中的灰阶，并且对于给单色图像上色和给彩色图像着色都会非常有用。

22. 亮度(Luminosity)模式

“亮度”模式能够使用“混合色”颜色的亮度值进行着色，而保持“基色”颜色的饱和度和色相数值不变。其实就是用“基色”中的“色相”和“饱和度”以及“混合色”的亮度创建“结果色”。此模式创建的效果是与“颜色”模式创建的效果相反。

到这图层混合模式就介绍完了，其实图层混合模式中还不只这些，后面就需要大家多多上机操作了，这样才能对图层混合模式有一个真正了解。

photoshop菜单中英文互译

1.New 新建
2.Open 打开
3.Open As 打开为
4.Open Recent 最近打开文件
5.Close 关闭
6.Save 存储
7.Save As 存储为
8.Save for Web 存储为Web所用格式
9.Revert 恢复
10.Place 置入
11.Import 输入
1 PDF Image PDF图象导入
2 Annotations 注释
12.Export 输出
13.Manage Workflow 管理工作流程
1 Check In 登记
2 Undo Check Out 还原注销
3 Upload To Server 上载到服务器
4 Add To Workflow 添加到工作流程
5 Open From Workflow 从工作流程打开
14.Automate 自动
1 Batch 批处理
2 Create Droplet 创建快捷批处理
3 Conditional Mode Change 条件模式更改
4 Contact Sheet 联系表
5 Fix Image 限制图像
6 Multi Page PDF to PSD 多页面PDF文件到PSD文件
7 Picture package 图片包
8 Web Photo Gallery Web照片画廊
15.File Info 文件简介
16.Print Options 打印选项
17.Page Setup 页面设置
18.Print 打印
19.Jump to 跳转到
20.Exit 退出

二、Edit 编辑

1.Undo 还原
2.Step Forward 向前
3.Step Backward 返回
4.Fade 消退
5.Cut 剪切
6.Copy 拷贝
7.Copy Merged 合并拷贝
8.Paste 粘贴
9.Paste Into 粘贴入
10.Clear 清除
11.Fill 填充
12.Stroke 描边
13.Free Transform 自由变形
14.Transform 变换
1 Again 再次
2 Sacle 缩放
3 Rotate 旋转
4 Skew 斜切
5 Distort 扭曲
6 Prespective 透视
7 Rotate 180° 旋转180度
8 Rotate 90°CW 顺时针旋转90度
9 Rotate 90°CCW 逆时针旋转90度
10 Flip Hpeizontal 水平翻转
11 Flip Vertical 垂直翻转
15.Define Brush 定义画笔
16.Define Pattern 设置图案
17.Define Custom Shape 定义自定形状
18.Purge 清除内存数据
1 Undo 还原
2 Clipboard 剪贴板
3 Histories 历史纪录
4 All 全部
19.Color Settings 颜色设置
20.Preset Manager 预置管理器
21.Preferences 预设
1 General 常规
2 Saving Files 存储文件
3 Display ＆ Cursors 显示与光标
4 Transparency ＆ Gamut 透明区域与色域
5 Units ＆ Rulers 单位与标尺
6 Guides ＆ Grid 参考线与网格
7 Plug Ins ＆ Scratch Disks 增效工具与暂存盘
8 Memory ＆ Image Cache 内存和图像高速缓存
9 Adobe Online Adobe在线
10 Workflows Options 工作流程选项

三、Image 图像

1.Mode 模式
1 Bitmap 位图
2 Grayscale 灰度
3 Duotone 双色调
4 Indexed Color 索引色
5 RGB Color RGB色
6 CMYK Color CMYK色
7 Lab Color Lab色
8 Multichannel 多通道
9 8 Bits/Channel 8位通道
10 16 Bits/Channel 16位通道
11 Color Table 颜色表
12 Assing Profile 制定配置文件
13 Convert to Profile 转换为配置文件
2.Adjust 调整
1 Levels 色阶
2 Auto Laves 自动色阶
3 Auto Contrast 自动对比度
4 Curves 曲线
5 Color Balance 色彩平衡
6 Brightness/Contrast 亮度/对比度
7 Hue/Saturation 色相/饱和度
8 Desaturate 去色
9 Replace Color 替换颜色
10 Selective Color 可选颜色
11 Channel Mixer 通道混合器
12 Gradient Map 渐变映射
13 Invert 反相
14 Equalize 色彩均化
15 Threshold 阈值
16 Posterize 色调分离
17 Variations 变化
3.Duplicate 复制
4.Apply Image 应用图像
5.Calculations 计算
6.Image Size 图像大小
7.Canvas Size 画布大小
8.Rotate Canvas 旋转画布
1 180° 180度
2 90°CW 顺时针90度
3 90°CCW 逆时针90度
4 Arbitrary 任意角度
5 Flip Horizontal 水平翻转
6 Flip Vertical 垂直翻转
9.Crop 裁切
10.Trim 修整
11.Reverl All 显示全部
12.Histogram 直方图
13.Trap 陷印
14.Extract 抽出
15.Liquify 液化

四、Layer 图层

1.New 新建
1 Layer 图层
2 Background From Layer 背景图层
3 Layer Set 图层组
4 Layer Set From Linked 图层组来自链接的
5 Layer via Copy 通过拷贝的图层
6 Layer via Cut 通过剪切的图层
2.Duplicate Layer 复制图层
3.Delete Layer 删除图层
4.Layer Properties 图层属性
5.Layer Style 图层样式
1 Blending Options 混合选项
2 Drop Shadow 投影
3 Inner Shadow 内阴影
4 Outer Glow 外发光
5 Inner Glow 内发光
6 Bevel and Emboss 斜面和浮雕
7 Satin 光泽
8 Color Overlay 颜色叠加
9 Gradient Overlay 渐变叠加
10 Pattern Overlay 图案叠加
11 Stroke 描边
12 Copy Layer Effects 拷贝图层样式
13 Paste Layer Effects 粘贴图层样式
14 Paste Layer Effects To Linked 将图层样式粘贴的链接的
15 Clear Layer Effects 清除图层样式
16 Global Light 全局光
17 Create Layer 创建图层
18 Hide All Effects 显示/隐藏全部效果
19 Scale Effects 缩放效果
6.New Fill Layer 新填充图层
1 Solid Color 纯色
2 Gradient 渐变
3 Pattern 图案
7.New Adjustment Layer 新调整图层
1 Levels 色阶
2 Curves 曲线
3 Color Balance 色彩平衡
4 Brightness/Contrast 亮度/对比度
5 Hue/Saturation 色相/饱和度
6 Selective Color 可选颜色
7 Channel Mixer 通道混合器
8 Gradient Map 渐变映射
9 Invert 反相
10 Threshold 阈值
11 Posterize 色调分离
8.Change Layer Content 更改图层内容
9.Layer Content Options 图层内容选项
10.Type 文字
1 Create Work Path 创建工作路径
2 Convert to Shape 转变为形状
3 Horizontal 水平
4 Vertical 垂直
5 Anti-Alias None 消除锯齿无
6 Anti-Alias Crisp 消除锯齿明晰
7 Anti-Alias Strong 消除锯齿强
8 Anti-Alias Smooth 消除锯齿平滑
9 Covert To Paragraph Text 转换为段落文字
10 Warp Text 文字变形
11 Update All Text Layers 更新所有文本图层
12 Replace All Missing Fonts 替换所以缺欠文字
11.Rasterize 栅格化
1 Type 文字
2 Shape 形状
3 Fill Content 填充内容
4 Layer Clipping Path 图层剪贴路径
5 Layer 图层
6 Linked Layers 链接图层
7 All Layers 所以图层
12.New Layer Based Slice 基于图层的切片
13.Add Layer Mask 添加图层蒙板
1 Reveal All 显示全部
2 Hide All 隐藏全部
3 Reveal Selection 显示选区
4 Hide Selection 隐藏选区
14.Enable Layer Mask 启用图层蒙板
15.Add Layer Clipping Path 添加图层剪切路径
1 Reveal All 显示全部
2 Hide All 隐藏全部
3 Current Path 当前路径
16.Enable Layer Clipping Path 启用图层剪切路径
17.Group Linked 于前一图层编组
18.UnGroup 取消编组
19.Arrange 排列
1 Bring to Front 置为顶层
2 Bring Forward 前移一层
3 Send Backward 后移一层
4 Send to Back 置为底层
20.Arrange Linked 对齐链接图层
1 Top Edges 顶边
2 Vertical Center 垂直居中
3 Bottom Edges 底边
4 Left Edges 左边
5 Horizontal Center 水平居中
6 Right Edges 右边
21.Distribute Linked 分布链接的
1 Top Edges 顶边
2 Vertical Center 垂直居中
3 Bottom Edges 底边
4 Left Edges 左边
5 Horizontal Center 水平居中
6 Right Edges 右边
22.Lock All Linked Layers 锁定所有链接图层
23.Merge Linked 合并链接图层
24.Merge Visible 合并可见图层
25.Flatten Image 合并图层
26.Matting 修边
1 Define 去边
2 Remove Black Matte 移去黑色杂边
3 Remove White Matte 移去白色杂边

五、Selection 选择

1.All 全部
2.Deselect 取消选择
3.Reselect 重新选择
4.Inverse 反选
5.Color Range 色彩范围
6.Feather 羽化
7.Modify 修改
1 Border 扩边
2 Smooth 平滑
3 Expand 扩展
4 Contract 收缩
8.Grow 扩大选区
9.Similar 选区相似
10.Transform Selection 变换选区
11.Load Selection 载入选区
12.Save Selection 存储选区

六、Filter 滤镜

1.Last Filter 上次滤镜操作
2.Artistic 艺术效果
1 Colored Pencil 彩色铅笔
2 Cutout 剪贴画
3 Dry Brush 干笔画
4 Film Grain 胶片颗粒
5 Fresco 壁画
6 Neon Glow 霓虹灯光
7 Paint Daubs 涂抹棒
8 Palette Knife 调色刀
9 Plastic Wrap 塑料包装
10 Poster Edges 海报边缘
11 Rough Pastels 粗糙彩笔
12 Smudge Stick 绘画涂抹
13 Sponge 海绵
14 Underpainting 底纹效果
15 Watercolor 水彩
3.Blur 模糊
1 Blur 模糊
2 Blur More 进一步模糊
3 Gaussian Blur 高斯模糊
4 Motion Blur 动态模糊
5 Radial Blur 径向模糊
6 Smart Blur 特殊模糊
4.Brush Strokes 画笔描边
1 Accented Edges 强化边缘
2 Angled Stroke 成角的线条
3 Crosshatch 阴影线
4 Dark Strokes 深色线条
5 Ink Outlines 油墨概况
6 Spatter 喷笔
7 Sprayed Strokes 喷色线条
8 Sumi 总量
5.Distort 扭曲
1 Diffuse Glow 扩散亮光
2 Displace 置换
3 Glass 玻璃
4 Ocean Ripple 海洋波纹
5 Pinch 挤压
6 Polar Coordinates 极坐标
7 Ripple 波纹
8 Shear 切变
9 Spherize 球面化
10 Twirl 旋转扭曲
11 Wave 波浪
12 Zigzag 水波
6.Noise 杂色
1 Add Noise 加入杂色
2 Despeckle 去斑
3 Dust ＆ Scratches 蒙尘与划痕
4 Median 中间值
7.Pixelate 像素化
1 Color Halftone 彩色半调
2 Crystallize 晶格化
3 Facet 彩块化
4 Fragment 碎片
5 Mezzotint 铜版雕刻
6 Mosaic 马赛克
7 Pointillize 点状化
8.Render 渲染
1 3D Transform 3D 变换
2 Clouds 云彩
3 Difference Clouds 分层云彩
4 Lens Flare 镜头光晕
5 Lighting Effects 光照效果
6 Texture Fill 纹理填充
9.Sharpen 锐化
1 Sharpen 锐化
2 Sharpen Edges 锐化边缘
3 Sharpen More 进一步锐化
4 Unsharp Mask USM 锐化
10.Sketch 素描
1 Bas Relief 基底凸现
2 Chalk ＆ Charcoal 粉笔和炭笔
3 Charcoal
4 Chrome 铬黄
5 Conte Crayon 彩色粉笔
6 Graphic Pen 绘图笔
7 Halftone Pattern 半色调图案
8 Note Paper 便条纸
9 Photocopy 副本
10 Plaster 塑料效果
11 Reticulation 网状
12 Stamp 图章
13 Torn Edges 撕边
14 Water Paper 水彩纸
11.Stylize 风格化
1 Diffuse 扩散
2 Emboss 浮雕
3 Extrude 突出
4 Find Edges 查找边缘
5 Glowing Edges 照亮边缘
6 Solarize 曝光过度
7 Tiles 拼贴
8 Trace Contour 等高线
9 Wind 风
12.Texture 纹理
1 Craquelure 龟裂缝
2 Grain 颗粒
3 Mosained Tiles 马赛克拼贴
4 Patchwork 拼缀图
5 Stained Glass 染色玻璃
6 Texturixer 纹理化
13.Video 视频
1 De Interlace 逐行
2 NTSC Colors NTSC色彩
14.Other 其它
1 Custom 自定义
2 High Pass 高反差保留
3 Maximum 最大值
4 Minimum 最小值
5 Offset 位移
15.Digimarc
1 Embed Watermark 嵌入水印
2 Read Watermark 读取水印

复位调板位置

七、View 视图

1.New View 新视图
2.Proof Setup 校样设置
1 Custom 自定
2 Working CMYK 处理CMYK
3 Working Cyan Plate 处理青版
4 Working Magenta Plate 处理洋红版
5 Working Yellow Plate 处理黄版
6 Working Black Plate 处理黑版
7 Working CMY Plate 处理CMY版
8 Macintosh RGB
9 Windows RGB
10 Monitor RGB 显示器RGB
11 Simulate Paper White 模拟纸白
12 Simulate Ink Black 模拟墨黑
3.Proof Color 校样颜色
4.Gamut Wiring 色域警告
5.Zoom In 放大
6.Zoom Out 缩小
7.Fit on Screen 满画布显示
8.Actual Pixels 实际象素
9.Print Size 打印尺寸
10.Show Extras 显示额外的
11.Show 显示
1 Selection Edges 选区边缘
2 Target Path 目标路径
3 Grid 网格
4 Guides 参考线
5 Slices 切片
6 Notes 注释
7 All 全部
8 None 无
9 Show Extras Options 显示额外选项
12.Show Rulers 显示标尺
13.Snap 对齐
14.Snap To 对齐到
1 Guides 参考线
2 Grid 网格
3 Slices 切片
4 Document Bounds 文档边界
5 All 全部
6 None 无
15.Show Guides 锁定参考线
16.Clear Guides 清除参考线
17.New Guides 新参考线
18.Lock Slices 锁定切片
19.Clear Slices 清除切片

八、Windows 窗口

1.Cascade 层叠
2.Tile 拼贴
3.Arrange Icons 排列图标
4.Close All 关闭全部
5.Show/Hide Tools 显示/隐藏工具
6.Show/Hide Options 显示/隐藏选项
7.Show/Hide Navigator 显示/隐藏导航
8.Show/Hide Info 显示/隐藏信息
9.Show/Hide Color 显示/隐藏颜色
10.Show/Hide Swatches 显示/隐藏色板
11.Show/Hide Styles 显示/隐藏样式
12.Show/Hide History 显示/隐藏历史记录
13.Show/Hide Actions 显示/隐藏动作
14.Show/Hide Layers 显示/隐藏图层
15.Show/Hide Channels 显示/隐藏通道
16.Show/Hide Paths 显示/隐藏路径
17.Show/Hide Character 显示/隐藏字符
18.Show/Hide Paragraph 显示/隐藏段落
19.Show/Hide Status Bar 显示/隐藏状态栏
20.Reset Palette Locations

Avatar

admin — Sun, 21 Feb 2010 16:15:08 +0000

电影一气呵成，毫无拖沓，内容比较传统情节谈不上跌宕起伏但绝对畅快淋漓，因为看到过很多其他电影的影子，尤其是宫崎骏大师的影子，所以不会太震惊。但是一个很传统的绘画风格和另一个先进的电脑特效制造的一样让人心旷神怡的梦想世界，却一样让人感动的流泪。

灵魂树下的治疗像《幽灵公主》的自然之神麒麟治伤的手段，脚踏下之处发光像麒麟踏过植物由脚边丛生的感动和惊喜，最后爱娃唤醒的动物大反攻和猪神乙事主组织发动的猪奔流有点相似；

和动物进行心灵沟通的触须像《风之谷》最后娜乌西卡和众荷姆（有译作王虫）交流的触须，包括很多飞行的昆虫、孢子、甚至人类要戴面具都像极了风之谷，还有那仿佛来自天国的轻音营造的气氛也像极了娜伍西卡为族人献出生命的大无畏悲歌——这种真正的大爱才是化解一切卑微渺小虚伪势力的利刃——一切噱头口号粗俗凡人在“魅影骑士”出现的时候都得下跪，这个时候《风之谷》里面有一句话：古老的预言成真——这个人，身着蓝衣，站在金色的草原上……；

那棵圣树当然和《天空之城》里撞了个正着，包括可悬浮的磁石、悬浮的岛屿（悬浮岛屿现在用的太多了，老祖宗都追不到了）、能源矿石，据说张家界的某山改名为哈利路亚山了，政客也学会炒作了；

制造克隆人上载下传意识像《骇客帝国》、《异次元XX》，特效继承了工业光魔优良的传统，绝对强悍。战争场面可以和《星球大战》的外星人大战做个比较。比起新版《西雷记》还原80年代似的特效，让人真的觉得国产电影差人家一个世纪。

宫老的三部片子都是宫年轻时候大声疾呼保护环境的力作，到《千与千寻》的时候这种大声疾呼已经转换为更为平静的讲故事的味道了。包括贪婪、罪恶、环境等等，我觉得这样的主题才能感动全人类。每天拍个抗日主旋律内战片、要么突然跟风拍谍战片、再或者一遍一遍把经典片拍烂……每天打开电视就让我反胃。我对爱国爱国产这个观念已经由想拥有到彻底瓦解，去你娘的，别披着这张皮来说教来忽悠人了，已经不是出脑筋急转弯的时代了！你们赚的盆满钵溢去国外享受奢侈品，让我们来买单还用你们造的大便产品，看你们的大便电影？别用一两个月拍一部垃圾来浪费别人的时间，虽然别人有时候需要派遣下无聊的时间。

上午看完imax3d，晚上又找了个高清枪版本看了一遍，因为老美电影总是用一句话带过一个疑问或者做一个铺垫，尤其是前面垫的东西后面才用到，这让人或者让我需要重新理一理才能完全解开心中的谜团。两次看到圣树被摧毁都要流眼泪，家园被毁、绝望无助、哀鸿遍野……此时高亢而悲伤的背景音乐响起，真是肝肠寸断，泪如雨下。这种内心战栗的悲怆感，就仿佛看到《风之谷》老人老泪纵横说的：古老的预言成真——这个人，身着蓝衣，站在金色的草原上……

英雄，这就是英雄带来的全人类都会膜拜的感动，每个人都听说过“魅影骑士”的传说。

最后，强行拆迁恶毒地产商被遣返地球了，为什么没有杀掉喂狼，难保他们不会卷土重来。估计是，怕他们肮脏的灵魂玷污爱娃的圣洁。

—————–我是传说中的迅雷翼龙——————–

这片子，元旦假期要是上映早就该看过了，这又不得不对某些恶心的组织和机构进行一下清理胃部污物的举动。后来一直连周末都被工作了，最后放假只好回家过年了。

前天过来，昨天去万达探探路，发现3D的都下线了，只剩下一个IMAX3D厅有放，结果所有的票被抢购一空，外面票贩子的票两张350不单卖。我一个人买两张怎么办，这时候想要是之前找个女朋友就好了（看完之后我庆幸没找，因为我预测到有个大个子美女会看上我）…… 后来听朋友说早上来排队可以买到，又咨询到2月底就要全线下线了。于是——今天早上7点起来，8点到万达，发现外面门都不开，转了半圈发现个门进去，还是黑漆漆的，爬上四楼想看个究竟。结果发现，已经有近百位同学披星戴月在排队了。

经过一个半小时的煎熬终于等到卖票的大叔大婶上班了，期间得知在我前面辛苦排队的几乎一半以上都是票贩子同学。说实话我买火车票也没站这么久过，不过看着后来来了很多同学这么热情的排在我后面，我卑鄙的感到些许安慰。

晚上7点票卖光了，上午剩一点，下午剩几张，估计黄金时间都被票贩子同学辛苦买去了。最后买了上午的票，我来了看完就走，也还好，事实是最后排其实比最前面要好很多。

海豚湾

admin — Sun, 14 Feb 2010 14:42:54 +0000

豆瓣：http://www.douban.com/subject/3442220/

看完《海豚湾》，我们可以做些什么？
（转载自：http://www.douban.com/review/2814028/）
　　
　　《海豚湾》给我带来了感动、激动、信心和勇气。我想，这也是它给大多数人带来的感觉吧，鼓舞与信心。看完《海豚湾》,我们不禁要问：我们可以做些什么？
　　
　　================
　　没有买卖就没有杀戮。
　　================
　　
　　
　　=======================================================
　　唯有了解，我们才关心；唯有关心，我们才会采取行动；唯有行动，生命才会有希望。
　　 ───珍古道尔
　　=======================================================
　　
　　
　　
　　
　　
　　1. 网络行动。
　　
　　a.投票，给日本政府施加压力。
　　
　　豆瓣上有心的网友早就发起了这个活动，我直接给出传送链接。
　　http://www.douban.com/group/topic/8432446/
　　
　　b. 捐助。
　　还记得Ric被赶出IWC的那个场景吧？ Ric的衣服上那个海豚+红色救生圈，21分08秒。那就是以下的组织。可以捐助他们。
　　http://www.savejapandolphins.org/
　　我不太赞成穷学生、穷孩子捐钱，但一旦财力允许，多少表示一下也是可行的。
　　
　　如果DVD在中国发行，买一张收藏，也是对他们的支持。
　　
　　c. 邀请更多的朋友来看此片。
　　http://www.greendj.org/?p=11 这个博客页面里面收录了最新的在线播放、下载地址，中文字幕，可以邀请你的朋友一起了解海豚、关心海豚、爱护海豚。
　　
　　==============================================
　　
　　2. 关注我们身边的动物福利。
　　
　　看了片子，很多人对日本人的残忍深恶痛绝。其实反观我们自己，作为一个中国人，何尝不也是如此？准确的说，是“百步笑五十步”。
　　
　　罄竹难书，随便捡几个说。
　　
　　a.黑熊熊胆的取用。
　　如果说对海豚是杀戮，那么，在中国，对熊胆的偏好，造就了养熊业的发展。熊胆取用，是将黑熊囚禁与铁笼，然后钢管插入活体黑熊体内，直接取用胆汁。黑熊将终身囚禁于铁笼，那个钢管也一直不被拔出来。
　　
　　针对这问题，AAF（亚洲动物基金）和IFAW都有营救项目。AAF最早关注这个领域，在四川龙桥也有黑熊救护中心，我很多朋友都去过，非常有教育意义的一个地方（以前我们小学中学都必须到爱国主义教育基地晃荡，什么时候可以改为环境教育基地啊？）
　　
　　b. 城市打狗队。
　　不好详说，大家自己搜索，搜索一下图片。大规模灭狗，在中国乡村还是偶尔会发生的。
　　
　　c. 皮毛贸易。
　　皮草！
　　我们现在使用皮草，已经不再是因为它的保暖功能，而是为了时尚，血淋淋的时尚。和国外不同，中国明星很心安理得的代言皮草。
　　
　　对我个人来讲，我不是完全对皮草说不，但2点我是反对的: 一是用珍稀动物的皮毛，比如前几年的藏羚羊；二是皮毛取用的时候过于残忍。有个浣熊被剥皮的视频，心理承受能力比较强的朋友可以搜搜看，那残忍程度远远超过海豚屠杀。
　　
　　d. 野味。
　　～～～～～～不多说了，大家心理清楚。天上飞的，地上跑的，水里游的，无所不吃。鱼翅与鲨鱼，燕窝与金丝燕，熊掌、熊胆与黑熊，娃娃鱼、梅花鹿～～～
　　
　　
　　================================
　　3. 关注日本对鲸鱼的捕杀，关注绿色和平。
　　
　　片中一直讲海豚的境遇与鲸鱼的境遇做比较：海豚屠杀不被人知，鲸鱼的保护引起国际舆论关注。其实呢，鲸鱼也不好过。同样还是日本，捕鲸，遭到很多国家和跨国组织的诟病。
　　
　　说起抗议日本捕鲸，就不得不提绿色和平。志愿者乘坐小船，冲到捕鲸船和鲸鱼中间，用肉体来阻挡捕鲸的鱼叉；并且，忍受着捕鲸船高压水枪的冲击。 http://v.youku.com/v_show/id_XMTIwODgxMzI=.html
　　
　　虽然绿色和平在中国也有办公室，但不得不说的是，绿色和平的中国部分，和绿色和平的其他分支机构，有着很大的差别。千万不要幻想绿色和平在中国可以像国外那样“直接行动”；因为，我们的“国情”不允许如此，甚至连“杯葛”都不允许。
　　
　　话说回来，虽然绿色和平在中国的行动远远不算“直接、有效”，许多项目还是可以的，订阅他们的网站的邮件，做他们的“会员”，也是可以学习到不少知识的。
　　
　　
　　=====================================
　　4. 关注其他的动物保护组织。
　　在片中，不知道是否记得那个片段，20分25秒左右，一个activist说，日本的WWF、GreenPeace、IFAW，对海豚屠杀采取漠视的态度。
　　
　　还有一个片段，是一段老的录像，一群反对捕鲸的人在集会，当时背后的大幕布上写着GreenPeace和RSPCA。
　　
　　刚刚说了GreenPeace, 现在说说WWF、IFAW和RSPCA。
　　
　　WWF，也就是世界自然基金会，在中国发展很不错，资金雄厚，和政府相处也很好。他们虽是国际组织，但LOGO是一直可爱的熊猫，可见他们对中国的感情。四川这边的保护区，几乎都有WWF的项目点（在地震之后也遭受全面打击）；他们在保护区保护方面是做的很优秀的。WWF在公众教育方面做得很多，比较熟知的是“地球一小时”。
　　WWF也需要志愿者，他们的志愿者计划叫“熊猫护照”。
　　www.wwfchina.org/
　　
　　IFAW，国际爱护动物基金会。猛禽、伴侣动物、大象、黑熊熊胆、野生动物贸易，都是IFAW在中国的工作内容。顺便说一句，IFAW特别关注的对海豹的屠杀，也海豚屠杀类似，不过屠杀的目地是取用皮毛。
　　IFAW中国
　　http://www.kintera.org/site/c.qvI0IdNZJwE/b.3638869/
　　IFAW中国伴侣动物网 www.ifaw-arc.org.cn
　　
　　RSPCA，英国皇家防止虐待动物协会。在英联邦国家是响当当的，并且有执法权。其组织刚刚进入中国，员工也很少。非常关注动物福利。
　　
　　另外，珍古道尔研究会也是不得不提。其青少年项目，叫“根与芽”──Roots&Shoots. 珍古道尔研究会关注大猩猩的保护；古道尔博士的研究非常有意思，她也可以和大猩猩交谈。根与芽在国内已经有至少4家办公室，关注环保、动物、社区，经常与大学生、中小学生开展活动。他们各个办公室都有自己的网站，感兴趣可以搜索一下。他们的环境教育，我认为在中国目前，是顶尖的。
　　
　　
　　大名鼎鼎的还有PETA（善待动物组织），我也不多介绍了，直接给出PETA小组的链接，里面的资源很丰富
　　http://www.douban.com/group/PETA/
　　
　　大熊猫繁育基地。这可能是我文章里面出现的唯一的本土组织。熊猫基地在成都，除了繁育熊猫，他们还推行保护教育，有非常多的公众项目来推动环境教育。反对皮毛贸易也是最近他们主推的一个项目。www.panda.org
　　
　　
　　====================================
　　4. 减少肉食，尝试素食。
　　
　　我个人是个肉食者，但我还是提一下，减少肉食也是一个好的选择。特别在这个食品安全让人特别不放心的时代，肉食确实比蔬菜更加不安全（当然，蔬菜也有农药残留等问题）。
　　
　　从宗教角度就比较容易说了，减少肉食，就减少一个生灵的逝去。
　　
　　
　　题外话：记得电影里面的“Sea World”么？那个资助科学家研究海洋哺乳动物但不允许提及海豚屠杀的公司，那个海豚表演作为其特色的公司。看了这部电影，我想，我以后去这类海洋主题公园，就要思考在先：我是否要成为海豚贸易、屠杀的支持者呢？
　　
　　
　　还是用这句经典的话来结尾：
　　
　　===================================================
　　没有买卖就没有杀戮。
　　===================================================

若干IEbug及解决方案

admin — Thu, 28 Jan 2010 08:09:19 +0000

这篇东西写了很久，大概半个月了，开始想详尽的写完所有的IEbug，但是要回家了，暂时先把这些放出来吧。写的过程参考了很多文章，比以前明白了很多东西，也发现了很多不知道的问题，如果您看完了，发现任何错误疑点、任何意见观点可以评论或者发邮件给我。

命中注定总有一个浏览器作为复仇女神来到世界各地的开发者中，在web标准运动初期，这个角色是Netscape Navigator 4，垂死挣扎就是不肯死去，阻碍着现代标准的进程；今天这个角色被Internet Explorer 6这位邪恶的坏同学代替了。——Jeremy Keith

盒模型（The Box Model）

我这里把盒模型真正给丫立体化（特殊到正方体了怎么样）：

有一个正方体宝贝比如是传说中象征永恒的水晶，为了保护它需要一个精美的盒子。为了防止碰撞，在盒子和水晶之间预留了空间来放海绵。在盒子外面再加一层泡沫塑料，也是为了防止水晶磕磕碰碰。我们现在把这宝贝一边的宽度定位width:60px(可以假想为60cm)，盒子里面的海绵厚度padding:15px（也就是说海绵厚度为15cm），盒子的皮厚border:5px（包装够结实——5cm厚），那需要的盒子边长就是60+2*15+2*5=100px（盒子的边长是100cm），水晶盒子外面的泡沫塑料是margin:10px（外面再包10cm厚的泡沫，结实！盒模型的问题和它无关，先把他撕下来扔掉好了-__-）

对于标准的盒模型来说：他们的盒子是看到的实际的盒子，是包含了海绵和水晶的盒子。但是早期的IE看到的只是字面意思上的width。

解决方案：

在HTML页面里面加入完整的，IE6会切换到近似乎标准的模式，这样IE6就会正确的解释盒模型。如果你不这样做，也可以在定义了width的元素里面不用padding和border，在被封闭的元素里面随意的运用。

我一般解决这个问题的方法是，不在boxes里面用只在layout用.如果box里面有文字在
标签里，我会在p元素直接用padding，跳过这个问题，但是这是可行的。——css-tricks

双边距问题（Double-Margin）

几乎所有的有些经验但经验不足的同学都遇到过这个悲剧的现象，浮动div嵌套着用的不亦乐乎，margin-padding此起彼伏。定了个div想和外部的div保持距离，就在里面的div来个margin，这时候就产生了传说中丑名远播的双边距问题：

未修正代码：

#selector{
width:200px;
height:50px;
float:left;
margin:5px 20px;
border:#00a6cc;
}

修正代码：

#selector{
width:200px;
height:50px;
float:left;
margin:5px 20px;
border:#00a6cc;
      display:inline;/*hi,-___-kill the double margin bug*/
}

在做BI十周年的时候我在父元素用了padding，在IE6标准模式下这样做也是一种办法。

最小/大宽/高（min-width/max-width and min-height/max-height）

IE6不能解释最小最大宽高，其实我觉得这用的不太多。对图片在站点中的重要问题有很多不知道，以后会慢慢学习。很多时候缩略图都是生成的图片，大幅图片直接缩小感觉会比较糟糕。

但是IE6会像标准浏览器解释min-width（min-height）一样解释width（height），所以可以利用IE6不能识别的!important或者其他IE6不能识别的高级选择符来hack：

#selector{
min-width:100px;
width:auto !important;/*IE6区分无法识别*/
width:100;
}

#selector{
min-width:100px;
width:100;
}
html>body #slector{/*IE6区分无法识别-IE7?*/
height:auto;
}

因为IE6把width/height处理了min-width/min-height，所以max-width/max-height没办法这样做了，所幸IE有自己的私有属性expressions，但是这个东西严重影响浏览器性能，但是还是摘来看看：

/*写给 IE6 的max-width*/
* html div.max-width {
  width: expression(document.body.clientWidth > 499 ? "500px" : "auto");
}
/*写给标准浏览器的 max-width*/
div.max-width {
  max-width: 500px;
}

max-width

/*写给 IE6 的max-height*/
* html div.max-height {
  height: expression(this.scrollHeight > 499 ? "500px" : "auto");
}
/*写给标准浏览器的 max-height*/
div.max-height {
  max-height: 500px;
}

max-height

高级选择符可参考之前的一些文章

CSS选择符之一属性选择符

CSS选择符之二子对象选择符

清除浮动

首先我们来看看什么时候会遇到这个问题，来看初始的html结构和css（下面的测试将会在Firefox3.5以及IETester中的IE6和win系统版IE8/IE7兼容模式进行）：

body{
color:#da444f;/*为了让字变色*/
}
*{
margin:0;
padding:0;/*一个小小的cssReset*/
}
.wrap{
border:1px solid #da444f;
background:#e4faff;
width:350px;/*添加不添加这个宽度呢，先填上*/
padding:10px;/*添加这个是为了边框和内容有点点距离*/
}
.column-left{
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}
.column-right{
margin-left:10px;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}


column-left
column-right

此时的显示无差异，均如下图所示：

不清楚浮动是怎么样的情况：

这个样子显然不是设计所需要的，两栏布局应该是一左一右并排才是。这时候不得不添加float:left;。在添加浮动我想多做一下测试，到底会有什么不同？单在左栏添加、单在右栏添加、两栏同时添加。

先看单在左栏添加的状况，此时左栏样式添加了float:left：

.column-left{
        float:left;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

这时候IE6显示如下：

IE7显示如下：

IE8和FF3.5显示和相同，如下：

可以看出IE67那抽风的样子，完全不可理喻，其他结论先不提。
下面再测试单在右栏添加float:left;：

.column-right{
        float:left;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

这次IE6显示如下：

（这里插播一则国际新闻：这个刚才为什么为什么这个和下面的不一样，包括刚才那个，其实呢，这个也是前文提到的双边距bug，这里只要在column-right加上display:inline;就可以解决了）
IE7显示：

IE8和FF3.5显示相同（实际上文字的字母的距离以及IE文字毛茸茸的样子是因为IE对字体进行了特殊的处理），如下

下面将测试左右栏都添加float:left;的情况：

IE6/7显示相同为：

IE8/FF显示为：

———————-休息一下，来个分割线———————-

有同学好奇的发现：在没有添加任何清除浮动的情况下，IE6/7显示的是正确的！只有FF3.5/IE8才有问题！这是因为另外一个应该被人知道的微软私有属性hasLayout搞的鬼。这里简单的介绍下：IE67支持这个东西，这个属性会被一些诸如width:*px的属性激活，激活这个东西IE会突然听话很多，更多介绍先推荐一篇翻译文章[译文]On having layout，其他的请看参考文章。这个属性到IE8就不支持了，所以上边最后的测试显示IE8,FF得到了我们预料的悲剧。我开始为了截图方便在.wrap添加了width:350px的属性。

下面再来看看没有这个width:350px的时候，左右都不添加浮动的情况，样式如下：

body{
color:#da444f;/*为了让字变色*/
}
*{
margin:0;
padding:0;/*一个小小的cssReset*/
}
.wrap{
border:1px solid #da444f;
background:#e4faff;
/*此处去掉width:350px*/
padding:10px;
}
.column-left{
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}
.column-right{
margin-left:10px;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

浏览器均显示为：

此时右栏在IE6并没有出现双边距问题，因为它不是浮动元素，其他单栏测试省略。
再来测试双栏添加float:left;wrap不设宽度，浏览器均如下所示：

再来测试双栏添加float:left;不设wrap宽度不设wrap内边距：（这样对比下，更直观）

说了这么多，自己越来越清晰，但不知道这样能不能讲明白，但是测试浮动会出很多状况。所以，传说浮动会产生一堆变态问题，那绝对是个事实！这个时候就会遇到怎么处理这些浮动的问题了。

解决方案——怎么清除浮动：

清除之后如图所示：

附加标签

W3C推荐的方法就是这个方法，这个方法在浮动元素末尾添加一个空标签：

或者div之类的也可以

这样添加额外的结构，如果不介意有些多余的结构也不会有任何问题。

clearfix

将下面代码写入css，在包含content的div加入clearfix：

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */

像下面这样


column-left
column-right

参考文章

10 Fixes That Solve IE6 Problems

Solving 5 Common CSS Headaches

9 Most Common IE Bugs and How to Fix Them

Definitive Guide to Taming the IE6 Beast

Min-Height Fast Hack

Lessons Learned Concerning the Clearfix CSS Hack

Clearing a float container without source markup

在IE主流时代诗意地编码（四）

admin — Thu, 14 Jan 2010 15:04:09 +0000

工具集

Modernizr

如果你使用高级CSS属性，Modernizr 将是一个非常有用小型JavaScript。它为你的页面html标签添加一些类（class），来测试浏览器是否支持一些特定的CSS属性，像：

比如border-image，当一个页面加载到的浏览器支持它，将会返回borderimage，如果浏览器不支持将返回no-borderimage。

Modernizr 不会使不支持这些属性的浏览器变的支持，但是给出的重要信息（在表单里的类）是可以用在样式表里面——引用独立选择符和属性到元素。

IE-7.js

IE-7.js使得IE5+的行为像IE8,支持更多的高级选择符并修复了部分渲染bug，这里有部分来自creator’s websitee的摘录：

添加了高级选择符的支持：
 >, + and ~; attribute selectors; :hover, :active, :focus for all elements; :first-child, :last-child, :only-child, :nth-child, :nth-last-child; :checked, :disabled, :enabled; :empty, :not; :before, :after, :content; :lang
使用标准盒模型。

支持 min- 和 max-width 还有 -height.
支持PNG alpha透明（但是没解决PNG背景重复和背景定位时的问题）。

缺点是这个技术需要可运行javascript的环境，这是不幸的。所以，小心给那些设置js不可用的用户可接受的站点版本，特别是一些脚本不能执行，或者最坏的情况是，缺少JavaScript将破坏站点的设计。

实例

常言道，说起来容易做起来难。所以，我们用一些优秀的例子将刚才提到这些新东西付诸实践。这是一些我们访问的在不同浏览器渲染结果不同的网站。在某些情况下，差别显而易见，但是开发人员选择接受这些不同。

Twitter

Twitter – Firefox

Twitter – IE6

WordPress

WordPress – Firefox
WordPress – IE6

WWF

WWF – Firefox

WWF – IE6

总结

记得写这篇文章的初衷是想教大家怎么样hack IE还有处理它的缺陷甚至如何利用JavaScript实现效果。（现在）恰恰相反，这是篇解释设计建立站点需要知道的跨浏览器差异。

你没有看到过用户因为看到Twitter或者WordPress没有圆角而引起的暴动吧；他们甚至没有感到失落，因为那些差异
基本没有破坏站点。人民仍然可以使用站点获得良好体验。大多数情况下，他们甚至没注意到这些！

所有我们需要做的是客气但严谨的向客户解释，这样就是不断进化的web的贡献。

在IE主流时代诗意地编码（三）

admin — Wed, 13 Jan 2010 13:59:35 +0000

CSS 主要的区别是外观层面的

这将面临的问题是最好不管那些不支持（新技术的）的浏览器，因为即便缺乏支持对用户浏览内容毫无影响。

这样主要会用到一些新CSS3属性，比如 border-radius， text-shadow 还有border-image。

Border-radius

这是设计师在不考虑IE以为学习到的第一个CSS3属性，因为它明确的美化属性。用border-radius的时候，最好不要试图在IE里复制相同的效果，让它随意吧。

Gowalla在他们网站运用了border-radius，但是IE用户看不到这个效果。

哪些浏览器不支持？所以的IE，Opera也是。

Font-face

在IE里面可以使用Font-face，但是你需要利用Microsoft’s Web Embedding Fonts tool来转换你的字体。

如果想让的站点包含字体和格式工具，CSS应该添加以下结构：

@font-face {
	  font-family: "Delicious";
	  src: url("Delicious-Roman.eot");
	  src: local("Delicious"), url("Delicious-Roman.otf") format("opentype");
}

通常，浏览器不能渲染一堆字体中的第一个字体时，不应该破坏页面或任何方面出现阻挠用户浏览内容的问题。所以，这里推荐仔细考虑想让用户看到的那些字体，如果浏览器不支持font-face，应该依赖那些在样式表中声明的字体。

如果浏览器不支持font-face直接显示下一个可用的字体

多栏（Multiple Columns）

与其建立额外的浮动DIV来组织你的文字到分栏，不如利用CSS3的多栏属性自动建立分栏。但这意味着一些浏览器将会看不到。

多栏被很好的用于文字，而不是设计。如果在站点使用它们，最坏的情况是用户将看到一行很长的文字。

如果你只是处理简短的文字，为什么不直接在两分钟内用它搞定呢？但是如果减损可读内容
，你最好的选择是坚持用常规的DIV来建立分栏。

这里，引导文字是用了CSS multiple columns。IE用户将会看到常规的单栏文字。

哪些浏览器不支持？IE和Opera.

RGBa and Opacity

RGBa颜色是福祉般的恩惠。与其努力的为背景更新PNG文件，可以用CSS3创建相同的透明效果。但是IE做不到。IE6甚至不知道PNGs为何物。

安全的方案是，这些透明层不可以经常在覆盖着重要内容的元素上使用；在这种情况下，首先保证内容不可以被其他元素遮挡。

所以，当使用RGBa颜色时，确保在RGBs前面包含一个常规颜色，这样当浏览器不能读出它时仍然有备用颜色：

div {
	background-color:  #FFFFFF;
	background-color: rgba(255,255,255,.5);
}

透明在IE可以用Opacity滤镜实现，但是IE滤镜只在设计的元素上可用：

div {
	filter: alpha(opacity = 50);
}

另外，注意Opacity比RGBa颜色工作更复杂：所以这个DIV包含的元素将会“被透明化”。

24ways狠狠的用了RGBa颜色和alpha透明，尽管IE不能渲染透明。

那些浏览器不支持？所有浏览器支持opacity,条件是提供滤镜。IE不支持RGBa颜色。

Text-shadow

一个简单的要求：忽略它。假定文字仍然具有可读性，相对CSS而已试图用其他任何方法建立文字阴影（text-shadow）都是一项巨大的工程。所以除非失去阴影会影响大面积文字（或者一小部分，可以用图片代替）的清晰度，不用它是良好的选择。（译者没读懂这部分意思，大大们来看看This is an easy call: ignore it. Assuming that the text is still readable, trying to recreate text-shadow any other way than with CSS is a Herculean task. So, unless missing text-shadow would seriously reduce the clarity of a large amount of text, or a small amount (in which case you could use image replacement), you’re better off without it.）

在IE下，Broker Direct站点白色文字阴影是看不到的

那些浏览器不支持？IE。

边框图片Border-image

border-image属性给我们一种为元素添加漂亮边框的简单方法，否则那将是噩梦般的事情（这也是大多数情况我们可能不选择这样做）。

因为这个属性几乎总是用来美化，最佳的选择是为不支持该属性的浏览器包含一个备选——普通边框属性，并且在这之后为其他浏览器添加附加样式。

SpoonGraphics使用了border-image，但是IE不可见。

哪些浏览器不支持？相反的回答更简单：到现在为止，只有Safari和Firefox支持这个属性。

多背景图（Multiple Backgrounds）

这个属性的使用在于站点的设计，但大多数情况，缺乏第二甚至第三个背景不会影响可读性。

CSS的多背景图（Multiple Backgrounds）解决了一大堆因使用不同html hooks和嵌套元素来完成相同效果所产生的头疼问题。所以，如果你选择使用多背景图，你已经选择哪个浏览器可以显示结果。

如果让所有的用户都看到背景图很重要的话，使用旧办法——为不同的元素添加不同的背景吧。

如果也不这样，最好的措施是给那些不支持的浏览器以备选方案：选择你认为最重要的或者最适合全局设计的背景图，在多背景（Multiple Backgrounds）属性前面添加旧属性。不支持的浏览器会忽略第二个属性。

哪些浏览器不支持？IE，Opera，Firefox3.6+。

在IE主流时代诗意地编码（二）

admin — Tue, 12 Jan 2010 13:39:24 +0000

重置（浏览器默认属性）

如你所知，所以的浏览器对各种html元素都具有不同的默认属性。这是为什么使用重置样式文件（Reset style sheet）是一个明智选择，这样我们就可以在“一张白纸”（去掉了众多浏览器默认属性，可以让你自己的属性更好的工作）上面开始工作了。

众多充斥互联网的重置样式文件各有优劣。Eric Meyer的重置文件被广泛的认为标准并被经常使用，还有其他一些演化的版本。(如果不能看到这个页面，可以直接下载这个文件css-reset.txt)

随着HTML5的出现，在CSS重置文件（Reset style sheet）中包含新HTML元素也是个好主意。html5doctor为Eric的重置文件提供了一个很好的升级版本，你可以在你的项目里面免费使用它。

在使用CSS reset的时候，既可以嵌入你自己的CSS文件头部也可以从外部引入——如果你有代码洁癖：

@import url(reset.css);

不同的CSS可能破坏你的布局

如果你觉得使用Universal IE6 CSS，你刚省去了很多头疼的事情。但是不要被IE7、8那个鲜亮的logo迷惑了你：如果你打算用最新的CSS技术，还要为它们做很多事情。

IE6 和PNG支持

大家都知道IE6不能正确显示alpha通道透明PNG图片（也就是那个好看的i.e. the good-looking ones——我又囧了），看到过精心制作的logo出现那个讨厌的淡蓝色背景。

你可以在一些为了是IE6显示PNG而做的变通方法中做个选择。每个方法都相当容易实施，并且在整体设计中做到不相同？（这句不知道怎么翻，大大们帮忙下——Each is fairly quick to implement and does make a difference in the overall design.）

这里是一些解决这个问题的优秀脚步和技术：

DD_belatedPNG

Supersleight jQuery Plugin

PNG 8-bit technique (Fireworks)

Clever PNG Optimization Techniques

PNG Optimization Guide: More Clever Techniques

值得注意的是当前越来越多的网页设计选择不去为IE6解决PNG问题：

最新改版的31three没有用任何方法为IE6解决PNG问题

高级选择符

这些选择符几乎是他们自己开发的最优雅的CSS，因为他们才拥有CSS真正的力量——可以使得作为开发者的我们，人生变的更简单（我们的预算也会显著降低！）。

是否决定让它们在IE工作，主要取决于我们在哪里用到它们。

比如，如果利用它们来添加更多的细节到设计中，像代表文件类型的精致图标，如果有些浏览器不显示他们不会带来很大的区别。站点的访客不会知道他们错过了什么，链接任然完整可用。

这些选择符也被广泛的运用到提升排版细节，缺少对它们的支持不会给你的设计带来很大的问题。

Hicksdesign在导航菜单的项目号码里面使用了高级选择符，对IE6用户而言它们是不可见的

哪些浏览器不支持这个？实际上IE6看不到样式文件提交的任何高级选择符。它仅能理解简单的父子层级的类（classes）和ID选择符。多个类提交到同一个元素（HTML标签）甚至会冲突！不能信任IE6。

IE7忽略 :lang 选择符和伪元素（pseudo-elements），比如 :first-line ，:first-letter， :before，还有 :after 。但是可以理解所以的属性选择符。

另外，迄今为止发布的所有IE（作为译者的我：就是IE8和IE8-）版本都不支持伪类 :target ，UI元素声明伪类（:enabled， :disabled，等），结构伪类（像 :nth-child :nth-of-type还有 :first-child）或者负伪元素。

盒模型规则

盒规则允许为一个元素设置任何需要的宽和高（盒规则允许你告诉你浏览器你期望的元素宽和高）。

比如，可以设置 box-sizing 属性为 border-box，这时设置的宽度和高度将会减去内边距（padding）和边宽（border），而不是加上它们（上面所述是W3C的标准盒模型-standard box model说明）。

这样使控制元素大小变的容易，同时使得垮浏览器大小表现一致。

如果确信站点在IE里以缺陷的盒模型渲染（quirks mode）（以不标准的盒模型渲染-and therefore renders with the non-standard box model），你或许想在样式表里用这个属性使得所有的浏览器统一。

确保添加标准属性和浏览器专有属性：

div {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

哪些浏览器不支持这个东东？如果站点在怪异模型（quirks mode）渲染，IE6将会用不标准的盒模型渲染，所以就算有 border-box的属性也会被渲染。可以强制IE6以怪异模型渲染（译者觉得这里应该是标准模型吧？）。有一些可选的方法，其中一个是在HTML页面doctype声明前添加HTML 注释。（译者很难过的：这一段好悲剧，没看懂或许作者没说清，这个强制的办法到底怎么做到呢。以下是英文原作Which browsers don’t support this? If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the “border-box” property on. You can force IE6 to render in quirks mode. There are a few ways of doing this; one way is by adding an HTML comment before the doctype declaration of your HTML pages.）

多媒体问题

大多数浏览器不能完全的支持多媒体，IE根本就不支持。

然而，手持设备总是需要演化的样式，比如iPhone，事实上与主题毫无相干。

如果只是为了iPhone而是用媒体，事实上其他的浏览器不支持，任何方法都一样，鼓励更多的使用。

如果利用媒体建立更加灵活可用的站点，窗口大小之类的变化，现在只有Safari，Firefox和Opera支持（部分的）。

哪些浏览器不支持？IE，一些时候是Safari和Firefox。

在IE主流时代诗意地编码（一）

admin — Sat, 09 Jan 2010 16:39:06 +0000

大家都在抱怨为什么我们不用更多的CSS3和其他一些灵活而有潜力的辅助技术，但是我们仍然需要考虑IE6和其他烦人的浏览器。

我们在实际开发过程中是怎么做的呢？在开发网站中我们怎样做到即利用最新的编码技术又可以保证Internet Explorer的用户的正常访问呢？

在这篇文章中，我们将见到既可以保证IE用户良好的用户体验又可以保证技术前进的措施。我们将集中在CSS部分，但是会提供一些处理其他问题（overall markup）的小技巧。

可以斟酌我们之前的文字：

Taming Advanced CSS Selectors

Take Your Design To The Next Level With CSS3

Push Your Web Design Into The Future With CSS3

内容最重要

杰弗里-泽尔德曼（Jeffrey Zeldman，Web 标准项目小组的负责人）曾经说，“内容要先于设计。缺少内容的设计不是设计，是装饰。” 事实上，在我们网站上最重要的是内容。无论他们使用什么样的浏览器，这才是他们需要得到的东西。

使用CSS3不是要忽略过时的浏览器，把访客拒之门外。我们应该在老浏览器甚至是IE5、IE5.5里面测试我们的网站，保证每个用户可以看到内容。

这也不是说我们要退出消灭IE6的战争。我们仍然可以学习以下网站的例子，比如Twitter和YouTube，添加一个平易近人（dd visible but not dead-end）的升级提示。

Twitter和Youtobe的给IE6用户的提示信息

记住：每个专业人员有责任教育那些对他们专业不熟悉的人。我们应该解释这些原理给我们的客户，但不能颐指气使地说教。毕竟他们的工作不是搞清楚这些事。

首先是最基本的：“三层”分立（HTML, CSS 和 JavaScript）

当我们一步一步建立一个新站点的时候。首先，是HTML。我们将尽可能使用语义化的标签来标记我们的内容：标题应该用heading，列表用list，等等。内容完美的可读性和仅仅完成这部分代码就拥有可理解的结构是最低限度。内容应该有理有据，我们必须时刻记得这“层”（HTML）是我们开发其他剩余项目的基石。

其次，我们添加CSS样式。这一步，我们为站点添加视觉元素，使站点个性化。同时我们应该保证在没有第三层（JavaScript）的时候，内容的可读性。

最后，第三层JavaScript，行为层。这里我们给站点加入交互元素。用像tabs、sliders、lightboxes等工具丰富站点的体验。

将这些过程铭记心中，任何浏览器都可以访问我们的内容。保证过时的浏览器只得到基本的内容，而忽略那些妨碍用户浏览的复杂代码。

为老浏览器添加基本样式

这样我们语义化标记做完了。我们知道一些浏览器不能正确渲染CSS或者根本不能渲染，像那些Netscape 4.o或者Internet Explorer 4.0之前的浏览器，显示裸内容——无样式版——是最佳的选择。

一些同学认为时至今日没有必要这样做。但是如果你想确保那些使用老浏览器的同学不会陷入困境，那么用link 链接基本版本的CSS，然后用@import链接更高级CSS文件吧，如下：

也可以跳过link全部标签，留给老浏览器一个只有文字的网站版本：

拥抱差异

现在让我们来处理这个常用浏览器中的害群之马：Internet Explorer 6。
你有两个选择：

1.如果在你站点的访客中只有很少比例的人在用它（IE6），你只需要为IE6建立一个基本的样式。

2.接受你的设计在IE6中将得到不一致的表现，并且决定该舍弃什么：哪些IE6问题需要纠正那些该放弃。

如果你选择提供给IE6一个基本的样式，最好的办法是利用Universal IE6 CSS。实际上你的网站没有设计，但是这个样式表确保网页有个可读的宽度，合理的标题大小，并且内容也有一些适当的留白。

在HTML文档里，应该添加一些条件注释到样式链接上，为IE6屏蔽其他样式文件：

在第一个注释里面，为除IE66以外的浏览器引入了主要的样式文件（因为这个“!”）。在第二个注释里面我们直接从Google文件库引入Universal IE6样式表（还可以节约带宽！作为译者的我忍不住：囧一个）。

Make Photoshop Faster 这个网站就为IE6使用了Universal style sheet

如果你更看好第二路线，你必须做好面对浏览器渲染不一致的心理准备。知道在IE6、甚至IE7和IE8，一些设计的细节将看不到或者不能被完美的渲染。别因为这个悲剧感到不爽哦。

Hi，大家

admin — Wed, 11 Nov 2009 17:32:08 +0000

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

换房间了，不用备案了，ya-hoo!:-)不过谢谢之前的空间老板，帮我备了案，今天收到备案通过的通知，稍微晚了些:-9。09这一年的主机：服务一流，售后一流，帮他们广告一下ad。数据折腾的时候homepage的自定义都不见了，只凭记忆添加了部分链接。有遗漏的 please tell me。

Something New Is Coming.. I promise!

[email_link]