diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..496ee2c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
\ No newline at end of file
diff --git a/PageCreation.graffle b/WebCreation.graffle
similarity index 100%
rename from PageCreation.graffle
rename to WebCreation.graffle
diff --git a/WebCreation.md b/WebCreation.md
index 0df4c60..7d232dc 100644
--- a/WebCreation.md
+++ b/WebCreation.md
@@ -49,14 +49,57 @@ Web 1.0 -> Web 2.0（基于 Ajax） -> Web 3.0 （基于 HTML5）
**切图常用工具**
-- 移动工具
-- 矩形选框工具
-- 魔棒工具
-- 剪裁工具 + 切片工具
-- 缩放工具
-- 取色器
-
-1505251325 14:14
+|工具名|示意图|注释|
+|------|:----:|----|
+|移动工具| ||
+|矩形选框工具| ||
+|魔棒工具||（容差 Tolerance 越小学则的范围就越小）|
+|剪裁工具|  ||
+|切片工具| ||
+|缩放工具| ||
+|取色器| ||
+
+图层（单层元素）与组（类似于文件夹）的区别。
+
+**辅助视图**，在视图菜单下启动
+
+- 对齐，会启动靠近吸附功能
+- 标尺，Command + R
+- 参考线，Command + ;
+
+
+
+NOTE: 所有工具及快捷键如下。
+
+
+
+#### 测量及取色
+
+所有能接受数字的属性都需要测量并尽可能百分百的还原设计稿。
+
+- 宽度，高度 (width, height)
+- 内外边距 (padding, margin)
+- 边框 (border)
+- 定位 (position)
+- 文字大小 (font-size)
+- 行高 (line-height)
+- 背景位置 (background-position)
+
+NOTE: 测量时尽可能放大画布以减少误差。量取文字是为了减少误差尽量选取尺寸大的文字进行测量。
+
+
+
+**选框工具的多用途**，增（Shift）减（Alt）以及交叉选择（Shift + Alt）。左右（或上下）使用分离选框选择可以得到整两个分离边框的距离总值。
+
+
+
+所有能接受颜色的属性都需要取色。
+
+- 边框色
+- 背景色
+- 文字色
+
+NOTE: 使用魔棒工具可以迅速识别背景色是否没*线性*渐变的方法。Mac OS X 推荐使用 **Sip** 可在 Mac App Store 免费下载。
## 开发及调试工具
diff --git a/demo-0/demo-0.png b/demo-0/demo-0.png
new file mode 100644
index 0000000..0d67750
Binary files /dev/null and b/demo-0/demo-0.png differ
diff --git a/demo-0/demo-0.psd b/demo-0/demo-0.psd
new file mode 100644
index 0000000..f4e4cfd
Binary files /dev/null and b/demo-0/demo-0.psd differ
diff --git a/img/Screen Shot 2015-05-25 at 5.25.41 PM.png b/img/Screen Shot 2015-05-25 at 5.25.41 PM.png
new file mode 100644
index 0000000..9db6169
Binary files /dev/null and b/img/Screen Shot 2015-05-25 at 5.25.41 PM.png differ
diff --git a/img/Screen Shot 2015-05-25 at 7.16.43 PM.png b/img/Screen Shot 2015-05-25 at 7.16.43 PM.png
new file mode 100644
index 0000000..735fc42
Binary files /dev/null and b/img/Screen Shot 2015-05-25 at 7.16.43 PM.png differ
diff --git a/img/hwa_01.png b/img/hwa_01.png
new file mode 100644
index 0000000..85aea81
Binary files /dev/null and b/img/hwa_01.png differ
diff --git a/img/hwa_03.png b/img/hwa_03.png
new file mode 100644
index 0000000..e8e7b6d
Binary files /dev/null and b/img/hwa_03.png differ
diff --git a/img/hwa_05.png b/img/hwa_05.png
new file mode 100644
index 0000000..c2dca31
Binary files /dev/null and b/img/hwa_05.png differ
diff --git a/img/hwa_06.png b/img/hwa_06.png
new file mode 100644
index 0000000..e3d9bf4
Binary files /dev/null and b/img/hwa_06.png differ
diff --git a/img/hwa_07.png b/img/hwa_07.png
new file mode 100644
index 0000000..8fa36cd
Binary files /dev/null and b/img/hwa_07.png differ
diff --git a/img/hwa_31.png b/img/hwa_31.png
new file mode 100644
index 0000000..e952fea
Binary files /dev/null and b/img/hwa_31.png differ
diff --git a/img/hwa_34.png b/img/hwa_34.png
new file mode 100644
index 0000000..7b1ad46
Binary files /dev/null and b/img/hwa_34.png differ
diff --git a/img/rect-selection-tool.gif b/img/rect-selection-tool.gif
new file mode 100644
index 0000000..5668b78
Binary files /dev/null and b/img/rect-selection-tool.gif differ
diff --git a/img/v2_Tools panel_PS_update1.png b/img/v2_Tools panel_PS_update1.png
new file mode 100644
index 0000000..7cbfded
Binary files /dev/null and b/img/v2_Tools panel_PS_update1.png differ