18/02/24

xufuping · Feb 24, 2018 · 4df8121 · 4df8121
commit 4df8121
Show file tree

Hide file tree

Showing 54 changed files with 8,715 additions and 0 deletions.
diff --git a/PS-CC学习/PS CC 学习.md b/PS-CC学习/PS CC 学习.md
@@ -0,0 +1,142 @@
+# 1.工具
+## 1.移动工具
+左边栏第一项
+
+    选中：选中要移动的人物，右键选择人物图层；
+    移动：选中人物，按住左键随意拖动；
+    复制：选中人物图层，按住ALT键不动，按住鼠标左键拖动，就复制出来了。
+
+移动工具的快捷键：V
+
+属性栏：
+
+    自动选择：左键点击，PS自动选择图层；
+    图层：
+        图层：单选的层
+        组：选中两个及以上图层，拖动到右下角文件夹里，自动生成一个组；
+        属性栏选中组和自动选择，移动时是拖动一组图层；
+    显示交换控件：点击后自动选中当前操作图层；
+    （后面是对齐和分布工具）
+    对齐：选中两个及以上图层
+    分布：选中三个及以上图层（按点分布：阶梯排列）
+## 2.图形变换工具
+用来改变图层位置、大小、角度以及形状。找到自由变换工具：编辑菜单栏目下。
+
+快捷键：Ctrl+T
+
+    先选中图层，自由拖拽，ESC退出操作，自由变换时，上面有属性栏，移动时，坐标在改变；
+    直线移动：按住shift键+左键移动，双击或者按回车确定移动位置；
+    改变大小：Ctrl+T，拉伸节点；按住shift改变大小避免变形；按住shift+alt以中间点改变大小避免变形；
+    旋转：放在节点框外，旋转改变角度；移动中心点后，根据中心点旋转；
+    Ctrl+T后，右键（更多功能）：斜切、扭曲、透视（进深的感觉）、变形（更多节点改变）、水平翻转（镜像翻转）、垂直翻转（上下翻转）
+## 3.矩形选框工具
+左边栏第二项[选区：对画面选择一个规则或不规则区域]。拉出蚂蚁线，选中区域不可以打印。
+
+快捷键：M键
+
+    选中一块，改变区域内的亮度和颜色；
+    绘制方形图像，shift可以作规则图，shift+alt以中心点绘图；
+
+属性栏：
+
+    新选区：绘制一个新选区，刚才选取区域消失；
+    添加到选区（加选）：绘制多个选区，刚才选取区域不消失；
+    减选：选中一个区域后，再选区就可以用初选区减去后续操作画出的角块；
+    与选区交叉：用加选画多个选区，点击与选区交叉，画一个新选区，留下所有选区的交叉部分；
+    羽化：令选区部分虚化，起到渐变作用，从而达到自然衔接的效果。（例如：羽化30像素，选区变成圆角方框，填充颜色后，中间到边缘慢慢渲染开来，边缘部分虚化）
+    样式：
+        正常：正常
+        固定大小：输入宽高，画出定义的选区；
+    移动选区：选中区域，鼠标移动到区域中间拖动；
+    框选后点击右键：
+        取消选择：Ctrl+D快捷键；
+        选择方向：反向选择，快捷键：Ctrl+shift+A。
+        羽化：羽化后调整像素然后填充颜色；
+        调整边缘：（帮助我们抠图）
+            视图模式：
+                视图：以各种视图显示选区（透明背景、白色背景等多种背景）
+                显示半径：勾选后，图片不见了，可以进行边缘检测，勾选掉，就可以看到边缘检测后的图；
+            边缘检测：改变半径，以选区蚂蚁线为中心，半径越大，边缘缺失越大；
+            调整边缘：
+                平滑：边缘圆润；
+                羽化：边缘虚化；
+                对比：改变整体对比度，或者选中部分对比度；
+            输出（勾选净化颜色）：新建我们需要的东西（比如新建带有图层蒙板的图层，或者新图层文档，或者新图层，或者新选区）
+            左上角：调选画笔和橡皮檫大小；
+        存储选区：将选区存储起来，然后通过右键载入选区，就直接帮你重新载入刚才选中的选区；
+        新建工作路径（后面了解）
+        通过拷贝的图层：将选区抠出来复制成为一个新的图层；
+        通过剪切的图层：直接抠出选区，单独生成图层；
+        新建图层：新建了一个空白图层；
+        自由变换：拉动改变大小形状；
+        变换选区：改变选区大小角度形状；
+        填充：在选区内填充内容，改变模式；
+        描边：以选区（内部、居中、外部）描（可改变不透明度的）边；
+## 4.椭圆选框工具
+矩形选框工具第二个工具；95%功能类似矩形选框工具；按住shift选中圆形区域
+
+    消除锯齿：使选区边缘更加平滑；
+## 5.套索工具，多边形套索工具，磁性套索工具
+左边栏第三个工具，快捷键是L，用来绘制不规则选区
+
+属性栏：功能类似选框工具
+
+套索工具：手动选择选区
+
+多边形套索工具：手动直线选择选区
+
+磁性套索工具：自动出现锚点吸附到图形边缘（在选择选区时点击左键一下添加一个手动锚点），做错了按一下delete键就回到上一个锚点。
+
+    磁性套索工具：
+    属性栏宽度：（0-40）决定锚点吸附的限定像素的宽度；
+    属性栏对比度：（0-100）磁性套索工具对图像边缘的反差，反差越大选取越准确；
+    属性栏频率：（0-100）锚点出现率，频率越高，选区越精确；
+
+三个工具回到圆点后，出现一个小圈，然后点击鼠标左键完成选出（抠图）。
+## 6.魔棒工具
+左边第四个工具，快捷键W
+
+功能：快速获取区域，并且能够自动识别相同颜色区域
+
+属性栏：
+
+    新选区，加选，减选，交选，类似选框工具。
+    取样大小：（取样点）指选区像素大小，越大选区越大；
+    容差：色差范围（数值越大，范围越大）；
+    消除锯齿：消除选区边缘锯齿，使边缘更圆滑；
+    连续：可以选取相连图像区域（不会因为选取一个颜色而选择所有类颜色区域）；
+    对所有图层取样：对所有图层起作用；
+右键：
+
+    扩大选区：选中一块地方，改变取样点后，扩大选区选中区域就扩大很多了；
+    选取相似：选取所有类似颜色区域；
+    反向选择：反选区域；
+    Ctrl+D取消选择
+## 7.快速选择工具
+左边第四个工具第二项
+
+使用：按住左键不动，自动选择一整块PS自动识别的整块区域。
+
+属性栏：
+
+    新选区，加选，减选，没有交选。
+    画笔选取系：
+        大小：画笔大小
+        硬度：数值越小，边缘越柔和。（有点类似羽化）
+        间距：指的是选区与下一个选区的距离
+        角度：画笔形状和角度。
+    自动增强：自动增强选区边缘；
+    反选：快捷键Shift+I
+## 8.裁剪工具
+左边栏第五个工具，快捷键C，用来裁剪选区
+
+可以拉框拉画面手动裁剪，双击确定裁剪；
+
+属性栏：
+
+    前三项：根据各种要求裁剪；
+    拉直：矫正倾斜画面，画面根据直线自动矫正；
+    设置剪裁工具叠加选项：各种形式辅助我们裁剪（网格、黄金比例等形式）；
+    设置其他裁切选项：使用经典模式，显示裁剪区域，自动预览，启动裁剪屏蔽；
+    删除裁剪像素：裁剪区域不再是隐藏而是直接被删除掉。
+
diff --git a/《AngularJS入门与进阶》/1-入门-走进AngularJS.md b/《AngularJS入门与进阶》/1-入门-走进AngularJS.md
@@ -0,0 +1,42 @@
+Angular ?
+AngularJS以HTML作为模版语言并扩展HTML元素及属性，使得应用组件开发保持高度清晰、一致。
+
+# 1.第一个AngularJS应用及剖析
+
+    <!DOCTYPE html>
+    <html ng-app>
+    <head>
+    	<meta charset="utf-8">
+    	<title>First AngularJS</title>
+    	<script type="text/javascript" src="angular.js"></script>
+    </head>
+    <body>
+    	<div>{{"Hello World!"}}</div>
+    	<div>{{"Hello AngularJS!"}}</div>
+    </body>
+    </html>
+    1.<html>中的ng-app有什么用？
+    一是启动AngularJS框架，二是告诉AngularJS框架从ng-app指令所在标签的开始标签到结束标签之间的所有DOM元素由AngularJS框架进行管理。
+    2.{{}}是AngularJS的表达式形式，中间为表达式内容。
+    上面的例子中，表达式为字符串字面量，AngularJS会将该字面量输出到页面。
+
+# 2.AngularJS应用构成元素
+
+> 模型(Model)：AngularJS程序中用于展示到页面的数据，本质是一个JavaScript对象。
+
+> 视图(View)：从用户角度来看，视图就是用户所看到的网页内容；从AngularJS应用的角度来说，视图则是AngularJS指令与表达式经过解析后的DOM元素。
+
+> 控制器(Controller)：AngularJS应用中用于处理业务逻辑的JavaScript方法。
+
+> 作用域(Scope)：可以把作用域理解为一个容器，在控制器中可以访问这个容器，然后往容器中放入一些模型数据，在视图中就可以通过表达式将数据展现给用户。
+
+> 指令(Directives)：扩展的HTML属性或标签，能够被AngularJS框架识别，根据不同的指令执行相应的动作。例如，前面提到的ng-app指令，作为html元素的扩展属性，能够被AngularJS框架识别，从而启动AngularJS框架。
+
+> 表达式(Expressions)：用于向页面输出信息，在前面已经接触过，下节将会对表达式做更详细的介绍。
+
+> 模板(Template)：AngularJS以HTML作为模版语言，AngularJS模板实际上就是HTML片段。
+
+# 3.AngularJS表达式
+表达式的定义方式：{{expression}}
+
+可以在其中加入四则运算，逻辑运算，可以通过表达式输出作用域内容。(==ng-init用于在标签中初始化作用域==，并可以在其中添加对象、数组等类型。)
diff --git a/《AngularJS入门与进阶》/2-入门-双向数据绑定.md b/《AngularJS入门与进阶》/2-入门-双向数据绑定.md
@@ -0,0 +1,55 @@
+数据绑定是AngularJS框架最优秀的特性之一，能够帮助Web前端开发人员在很大程度上减少对DOM的操作。
+# 1. 双向数据绑定，ng-model，ng-bind
+数据绑定是AngularJS框架在视图（DOM元素）与作用域之间建立的数据同步机制。“双向”：是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实时回显到界面中。
+
+> 1. ng-model可以建立数据绑定，只能用在表单元素上
+
+    <input type="text" name="uname" ng-model="uname" />
+    input输入框添加ng-model指令后，AJS框架就会在对应的作用域中创建一个uname属性和该输入框进行绑定。
+
+    数据绑定实例-表单中数据回显到页面中：
+    <!DOCTYPE html>
+    <html ng-app>
+    <head>
+    	<meta charset="utf-8">
+    	<title>First AngularJS</title>
+    	<script type="text/javascript" src="angular.js"></script>
+    </head>
+    <body>
+    	<div>用户名：<input type="text" name="uname" ng-model="uname" /></div>
+    	<div>{{uname}}</div>
+    </body>
+    </html>
+    上面的案例中ng-app指令用于启动AJS，当AJS遇到ng-app就会创建一个名为$rootSocpe得到作用域，该作用域为AJS应用的根作用域。
+
+    作用域其实是一个简单的JavaScript对象，形式如下：
+    var $rootScope={uname:"我是表单里输入的内容"};
+
+    在上面的例子中，我们向$rootScope作用域中添加属性进行了数据绑定，会造成全局作用域污染，实际项目中并不会这么做。
+    而是把表单和控制器作用域中的属性进行数据绑定，控制器作用域是根作用域$rootScope的子作用域。（后面会有接触。）
+
+> 2. ng-bind是实现作用域到视图的单向数据绑定，可用于向界面中输出作用域中的数据。
+
+    上面例子中的    <div>{{uname}}</div>    
+    /可以更换为     <div ng-bind="uname"></div>
+    /或者更换为     <div class="ng-bind:uname"></div>
+    // 使用{{name}}时，加载缓慢会直接把AJS当作字符串解析，用户体验会很不好，所以推荐使用ng-bind指令。ng-bind指令只在AJS加载完毕之后才会执行。
+
+▲当我们需要进行运算处理或者使用过滤器对输出内容进行处理时，则必须用表达式：{{}}
+
+# 2. 数据绑定实例：价格计算器
+
+    <!DOCTYPE html>
+    <html ng-app>
+    <head>
+    	<meta charset="utf-8">
+    	<title>First AngularJS</title>
+    	<script type="text/javascript" src="angular.js"></script>
+    </head>
+    <body ng-init="price=10;num=1">
+    	<div>单价：<input type="number" ng-model="price" /></div><br/>
+    	<div>数量：<input type="number" ng-model="num" /></div><br/>
+    	<div ng-bind="price*num">总价：</div>
+    </body>
+    </html>
+
diff --git a/《AngularJS入门与进阶》/3-入门-AJS与MVC，应用模块化.md b/《AngularJS入门与进阶》/3-入门-AJS与MVC，应用模块化.md
@@ -0,0 +1,107 @@
+MVC是一种软件架构模式，MVC的核心思想是把数据的管理、业务逻辑控制和数据的的展示分离开，使程序的逻辑性和可维护性更强。
+
+# 1. AngularJS的MVC
+
+    Model:前面提到过的作用域对象（如$rootScope对象）中的属性。
+    View:大家所熟悉的DOM元素，从用户的角度来看就是HTML页面，在View中可以通过AngularJS表达式访问模型数据。
+    Controller:用户自定义的构造方法，作用域中的模型数据可以通过依赖注入的方式注入控制器中。
+
+## 1.1 AngularJS控制器的定义
+
+> 我们是用模块实例controller()方法来声明一个控制器，该方法接收两个参数，第一个参数为控制器名称，第二个参数为一个匿名方法，即控制器的构造方法，用法如下：
+
+    <script type="text/javascript">
+		var app = angular.module("app", []);
+		app.controller("LoginController", function($scope, $log) {
+
+			$scope.name = "admin";
+
+			$scope.pword = "123456";
+		});
+	</script>
+	AJS在windows对象中添加了一个全局的angular对象，我们调用angular对象的module()方法返回一个模块实例，然后调用模块实例的controller()方法来声明一个控制器。
+
+	在上面的案例中我们定义控制器时指定了$scope和$log两个参数：
+	$scope是作用域对象，是控制器与视图之间传递信息的载体;
+	$log为AngularJS框架内置的日志服务对象，用于向控制台中输入日志信息。
+	当我们为控制器构造方法指定这两个参数后，表示控制器依赖于这两个对象，控制器实例化时会把这两个对象注入控制器中。
+
+## 1.2 控制器：ng-controller
+AJS遇到ng-controller时会根据ng-controller指定的控制器名称查找控制器构造方法，然后使用对应的构造方法实例化控制器对象，并将控制器依赖的对象注入控制器对象中。
+
+每个控制器对应的作用域对象只能与ng-controller所在标签的开始标签和结束标签之间的DOM元素建立数据绑定。
+
+    <!DOCTYPE html>
+    <html ng-app="app">
+    <head>
+    	<meta charset="utf-8">
+    	<title>First AngularJS</title>
+    	<script type="text/javascript" src="angular.js"></script>
+    </head>
+    <body>
+    	<div ng-controller="UserController" style="border:#ccc solid 1px;">
+    		用户名:	<input type="text" ng-model="name" placeholder="用户名" />
+    		密码: <input type="password" ng-model="pword" placeholder="密码" />
+    		<button>提交</button>
+    		<p>你输入的用户名：{{name}}</p>
+    		<p>你输入的密码：{{pword}}</p>
+    	</div>
+    	<br/>
+    	<div ng-controller="InfoContoller" style="border:#ccc solid 1px;">
+    		个人爱好：<input type="text" ng-model="love" placeholder="个人爱好" />
+    		<p>你输入的个人爱好： {{love}}</p>
+    	</div>
+    	<script type="text/javascript">
+    		function UserController($scope, $log) {
+    			$scope.name = "admin";
+    			$scope.pword = "123456";
+    			$log.info("UserController->name:" + $scope.name);
+    			$log.info("UserController->pword" + $scope.pword);
+    		}
+    		function InfoContoller($scope, $log) {
+    			$scope.love = "足球";
+    			$log.info("InfoContoller->name:" + $scope.name);
+    			$log.info("InfoContoller->pword" + $scope.pword);
+    			$log.info("InfoContoller->love" + $scope.love);
+    		}
+    		var app = angular.module("app", []);
+    		app.controller ("UserController", UserController);
+    		app.controller ("InfoContoller",InfoContoller);
+    	</script>
+    </body>
+    </html>
+
+AJS应用中的DOM事件处理可以在控制其中完成，AJS框架为我们提供了一系列的事件绑定指令，这些指令是在原生的JS事件名称前加“ng-”前缀，例如ng-click、ng-keyup等。
+
+# 2. 应用模块化
+
+应用模块划分的重要性：
+
+    1.使程序实现逻辑更加清晰；
+    2.合作开发更加明确，容易控制；
+    3.充分利用可以重用的代码；
+    4.抽象出可公用的模块，可维护性强，以避免同一处修改在多个地方出现；
+    5.可基于模块化设计优秀的遗留系统，方便组装开发新的相似系统，甚至一个全新的的系统。
+
+##  2.1 AngularJS中的模块
+定义：调用angular对象的module()方法返回一个模块实例。
+
+> angular.module()方法能够接收3个参数：
+
+> 1.第一个参数为模块的名称；
+
+> 2.第二个参数是一个数组，用于指定该模块依赖的模块名称。如果不需要依赖其他模块，第二个参数传递一个空数组即可；
+
+> 3.第三个参数为可选参数，该参数接收一个方法，用于对模块进行配置，作用和模块实例的config()方法相同。
+
+> PS：angular.module()方法返回一个模块实例对象，我们可以调用该对象的controller()、directive()、filter()等方法向模块中添加控制器、指令、过滤器等其他组件。
+
+    // 定义一个无依赖模块
+    angular.module('appModule', []);
+    // 定义一个依赖module1、module2的模块
+    angular.module('appModule', ['module1', 'module2']);
+
+    在HTML引用模块：
+    <html ng-app="appModule">
+
+使用模块解决命名冲突问题：调用angular.module()方法创建两个或者多个模块，以不同名称命名，然后在不同页面使用ng-app调用对应名称模块下的内容。