add selection size and color note

EkoWang · May 25, 2015 · fe6e544 · fe6e544
1 parent dfe8d7f
commit fe6e544
Show file tree

Hide file tree

Showing 16 changed files with 52 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/PageCreation.graffle → WebCreation.graffle b/PageCreation.graffle → WebCreation.graffle
diff --git a/WebCreation.md b/WebCreation.md
@@ -49,14 +49,57 @@ Web 1.0 -> Web 2.0（基于 Ajax） -> Web 3.0 （基于 HTML5）
 
 **切图常用工具**
 
-- 移动工具
-- 矩形选框工具
-- 魔棒工具
-- 剪裁工具 + 切片工具
-- 缩放工具
-- 取色器
-
-1505251325 14:14
+|工具名|示意图|注释|
+|------|:----:|----|
+|移动工具| ![](img/hwa_03.png)||
+|矩形选框工具| ![](img/hwa_01.png)||
+|魔棒工具|![](img/hwa_05.png)|（容差 Tolerance 越小学则的范围就越小）|
+|剪裁工具| ![](img/hwa_06.png) ||
+|切片工具| ![](img/hwa_07.png)||
+|缩放工具| ![](img/hwa_34.png)||
+|取色器| ![](img/hwa_31.png)||
+
+图层（单层元素）与组（类似于文件夹）的区别。
+
+**辅助视图**，在视图菜单下启动
+
+- 对齐，会启动靠近吸附功能
+- 标尺，<kbd>Command</kbd> + <kbd>R</kbd>
+- 参考线，<kbd>Command</kbd> + <kbd>;</kbd>
+
+![](img/Screen%20Shot%202015-05-25%20at%205.25.41%20PM.png)
+
+NOTE: 所有工具及快捷键如下。
+
+![](img/v2_Tools%20panel_PS_update1.png)
+
+#### 测量及取色
+
+所有能接受数字的属性都需要测量并尽可能百分百的还原设计稿。
+
+- 宽度，高度 (width, height)
+- 内外边距 (padding, margin)
+- 边框 (border)
+- 定位 (position)
+- 文字大小 (font-size)
+- 行高 (line-height)
+- 背景位置 (background-position)
+
+NOTE: 测量时尽可能放大画布以减少误差。量取文字是为了减少误差尽量选取尺寸大的文字进行测量。
+
+![](img/Screen%20Shot%202015-05-25%20at%207.16.43%20PM.png)
+
+**选框工具的多用途**，增（Shift）减（Alt）以及交叉选择（Shift + Alt）。左右（或上下）使用分离选框选择可以得到整两个分离边框的距离总值。
+
+![](img/rect-selection-tool.gif)
+
+所有能接受颜色的属性都需要取色。
+
+- 边框色
+- 背景色
+- 文字色
+
+NOTE: 使用魔棒工具可以迅速识别背景色是否没*线性*渐变的方法。Mac OS X 推荐使用 **Sip** 可在 Mac App Store 免费下载。
 
 ## 开发及调试工具
 

diff --git a/demo-0/demo-0.png b/demo-0/demo-0.png
diff --git a/demo-0/demo-0.psd b/demo-0/demo-0.psd
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
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
diff --git a/img/hwa_01.png b/img/hwa_01.png
diff --git a/img/hwa_03.png b/img/hwa_03.png
diff --git a/img/hwa_05.png b/img/hwa_05.png
diff --git a/img/hwa_06.png b/img/hwa_06.png
diff --git a/img/hwa_07.png b/img/hwa_07.png
diff --git a/img/hwa_31.png b/img/hwa_31.png
diff --git a/img/hwa_34.png b/img/hwa_34.png
diff --git a/img/rect-selection-tool.gif b/img/rect-selection-tool.gif
diff --git a/img/v2_Tools panel_PS_update1.png b/img/v2_Tools panel_PS_update1.png