UI设计基础知识和JavaScript

【PS基础案例】

人物修图。调整画布大小,建立3个图层,并列放到画布中,用修补工具修掉中间的人物,再用橡皮章盖掉边缘的人物,然后扣出人物,放上新的蓝天,用橡皮擦调整透明度,擦掉水天交接的地方,然后调整色阶,最后点第三个图层,编辑,内容识别比例,把腿部拉长,然后用滤镜,液化,修饰脸型。

森林光线。选择,色彩范围,高光,新建图层,复制,径向模糊,如果光感不强则继续新建复制,满意后合并图层调整色阶,还可以调整光的位置,通过橡皮擦擦掉不自然的光线。

表情包。钢笔和椭圆工具的综合运用,ctrl+r打开标尺,用标尺比着画。GIF。

各种蒙版,迈克尔。先弄一个人影,然后依次打开图片,创建剪切蒙版,然后通过渐变进行调整,最后加上文字。蒙版一共有4种,直接创建蒙版,通过黑白灰影响画面颜色的明暗对比,创建剪切蒙版,如迈克尔的那个例子,在通道中建立蒙版,用来扣对比度比较明显的有头发丝的人物,在左下角还有个按钮,以快速蒙版方式编辑,可以对所选区域做一些边缘的处理。

透视原理,变形金刚。通过扭曲变形形成立体感,复制多个图层,擦掉下部,然后打开另一个图层,通过滤镜素描画,形成素描效果,擦掉挡住手的部分,然后打开另一个图层,通过图层效果的颜色叠加,叠加成灰色,然后拖动位置,形成阴影,擦掉多余部分。

光束的制作。复制一个黑色背景,然后新建一个图层,打开渐变色选择第二个,两头都选白色,按住shitf横向拉到头,然后ctrl+t,拉到画图的一半,然后复制图层,选择水平反转,调整位置形成光束,然后合并图层,ctrl+t上下拉长,透视,上面左右两个角拉到中间。

通道扣图,通道,选择对比明显的颜色,然后复制图层进行编辑,图像调整反相,调整色阶增加对比度,然后用前景色为白色的画笔,涂掉黑色部分,然后将通道作为选择载入,之后回到图层直接创建蒙版。

头发变成树林。先扣图,头发可以简略扣,然后删除多余部分,选择通道,选择对比度明显的颜色,复制图层,调整色阶,ctrl左键点击图层的小图案建立选区,回到原来图层,建立蒙版,然后把另一个图片打开,调整大小,放好位置后建立剪切蒙版,调整橡皮透明度擦掉多余部分。

老虎人。不考虑头发扣出人脸,选择,调整边缘,调整智能半径,选择,存储选区,然后打开老虎,扣出面部,选择,调整边缘,重复刚才操作,但不是选区,而是新建图层,老虎拖到人脸上,然后CTRL+t进行调整,让其对齐,选择人物,点图层通道路径右边的按钮,复制图层,下面的一栏选择新建,然后在新建出的人物种进行模糊,高斯模糊,然后保存,回到老虎,复制两个,点通道,ctrl左键点刚才保存的图,回到一个老虎,创建蒙版,用前景色为黑色的画笔擦掉眼睛和嘴巴,然后选择另一个老虎,创建蒙版,ctrl+I变为黑色,然后用前景色为白色的画笔擦掉胡子边缘,然后复制一个人物,调到最上方,选择柔光。

动作。窗口,动作,创建新动作。

下雪。先打开动作。打开图片,建立图层,填充为黑色,滤镜,像素化,点状化,单元格的大小决定雪花的大小,图象,调整,阈值,阈值的大小决定雪花的速度,滤镜,模糊,动感模糊,决定间距和方向。最后选择滤色。

普通图,72分辨率,RGB。打印的话,CMYK,300分辨率。


【AI应用】

图层上画图自动生成小分组,可以直接设置颜色和描边。
要建立剪切蒙版的话和PS不同,要把画的形状放在上面,原图放在下面,然后直接点一个图片,SHITF点另一个,点击右键,创立剪切蒙版,是在图片上直接点,不是点右边图层的小框。

字体效果。打字,对象,扩展,可以分解为好多小点,可以通过拖动来改变字体。然后复制一个,再画一个圆,挡住字体的一部分,然后右键圆,置于底层,复制几个圆。然后右键字,取消编组,分别选择一个字SHIFT圆,然后从窗口打开路径查找器,选择交集,然后拖动到原字体上,可以改变颜色和透明度来达到预期的效果。

圆角直线。窗口,描边,圆头端点。

地球小图案。新建,800*600画布,打开图片,新建3个图层,画矩形,800*600,把背景盖住,把图片拖上来,在图层3上建椭圆128*128,填充无,描边黑,6pt,再建106*106,俩圆选中,水平居中对齐,然后选择里面的小圆,用剪刀工具把它分割成几块,然后选择不要的删掉,然后窗口描边圆头端点,再建椭圆180*60,搭在一起,然后全选,旋转,然后画直线,用剪刀切割,最后再画3个圆,两个淡黄色一个橘黄色,然后把一个淡黄和橘黄通过路径查找器减去顶层,把小月牙和圆分别叠加上去,然后置于底层。最后通过矩形圆形工具画出小图案。另一个图,下面的蓝梯形,可以先画矩形,然后拉成梯形,最后用直接选择工具上面转换后面的圆弧,慢慢调整。其他的同第一个。


【平面设计】


排版基础。排版设计的四元素,背景,主体,文字,装饰。
基本类型。骨骼型(网页设计),中心型,满版型,上下分割型,左右分割型,中轴型(电商排版),曲线型,倾斜型,对称型,重心型,三角型,并置型,自由型,四角型

前期练习一定要注意留白问题!!
按文字排列规律,用户阅读习惯从上到下,从左到右。
明确主题标题,通过颜色,粗细,字号,色块。
注意行距和间距。
装饰框的运用,让文案有装饰性。
文案过少的情况下通过外文来凑。
排版不要太过一致,让重点醒目。
文案与背景要分明。


所有印刷品都要留3mm出血,分辨率都是300.
企业VI。
VI设计一般包括基础部分和应用两大部分内容。
logo。表象性,表征性,借喻性,标识性,卡通化,几何形构成,渐变推移。
名片标准尺寸。90*54,90*50,90*45。但是加上出血上下左右各2,所以制作尺寸必须设定为94*58,94*54,94*48。色彩模式为CMYK,影像档300dpi以上。


【项目流程】

成立项目组,项目经理牵头组建团队,项目经理做计划表,开项目启动会,交互设计师做原型稿,UI设计人员丰富,H5开发。

网页设计分类。功能型网页设计(B/S软件用户端),形象型网页设计(品牌形象站),信息型网页设计(门户站)。
网页设计经历以下几个阶段。根据消费者的需求,市场的状况,企业自身的情况等进行综合分析,从而建立起营销模型。以业务目标为中心进行功能策划,制作出栏目结构关系图。以满足用户体验设计为目标。以网页精美化设计为目标,调整,使用合理的颜色,字体,图片,样式进行页面设计美化,根据用户反馈,进行页面设计调整,以达到最优效果。

针对客户需求需要注意的几点。
建设网站的目的。栏目规划及每个栏目的表现形式和功能要求。网站主体色调,客户性别喜好,联系方式,旧版网址,偏好网址。根据行业和客户要求,那些要着重表现。是否分期建设,考虑后期的兼容性。客户是否有强烈建设网站的欲望。网站类型。

企业站主体色彩搭配最好不要超过3种。可以适当点缀。
先把内容充实上,再分区块,再定色调,再处理细节。
全局考虑,把能填的都填上,占位置,然后定基调,分模块设计,最后调整不满意的局部细节。
总结,网页设计应简洁明了,从用户体验出发。

网页,必须是72分辨率。
目前通用的页面大小为1000px(现在最好做1200px),画布大小可以自定义(1400,1440不等,最大1920)。
最上面标准头,最下面标准尾是硬性要求。头下面一般是广告,再下面是内容区。
内容区需求不明确的话,排关于我们。产品。新闻动态。
一般三张广告图,需求不明确的情况下,就可以是企业介绍,产品案例,企业文化或社会责任。

内容区。通栏,可以铺满画布,但内容不能超过页面大小。两栏,版块与版块的空隙最少20px,可以等分也可以不等分。三栏四栏最好等分。

网页正文一律采用宋体12号字(现在基本都用微软雅黑,选择无),微软雅黑和黑体,主要是用作标题。
建议使用12+14号的混合搭配。
英文字体从10px开始能清晰使用,选择空间很大,10px,11px,12,13都是常见的字体大小,字体使用系统自带字体,例如Arial。
价格文字,cc0000,重要文字cc6600,常规文字333333,次级文字666666.

注意:页面小标题有点击效果的最右边要留空间,点击效果区域不要超出范围。

 [使用JS的三种方式]

1、 在HTML标签中,直接内嵌JS(并不提倡使用):
<button onclick="alert('小婊砸!你真点啊!')">有本事点我呀!</button>
>>> 不符合W3C关于内容与行为分离的要求!!!

2、在HTML页面中,使用<script></script>包裹JS代码:
<script type="text/javascript">
// JS代码
</script>
>>> Script标签可以放到页面的任何位置。

3、引入外部的JS文件:
<script language="JavaScript" src="js/01.js"></script>

[注意事项]
① <script></script>可以嵌入到页面的任意位置。但是,位置的不同会导致JS代码的执行顺序不同;
比如: <script></script> 放到<body>前面,则JS代码会在页面加载之前就执行;

② 引入外部的JS代码,<script></script>必须是成对出现的标签。而且,标签中不能再有任何的JS代码。

<script type="text/javascript">

JS中的多行注释。 Ctrl+shift+/

// JS中的单行注释。 Ctrl+/
//document.write("<h1 style='color:red;'>姜浩真帅!!</h1>");

【JS中的变量】
1、JS中变量声明的写法:
var num = 10; // 使用var声明的变量,属于局部变量,只在当前作用域内有效;
num = 10; // 不用var声明的变量,默认为全局变量,在整个JS文件中都有效;
var x=8,y,z=10; // 使用一行语句,同时声明多个变量。 上式中,y属于已声明,但是未赋值状态, 结果为undefined;

[声明变量的注意事项]
① JS中所有变量的声明,均使用var关键字。 变量具体是什么数据类型,取决于给变量赋值的类型;

② JS中同一个变量,可以在多次不同赋值时,修改变量的数据类型;
var a = 10; // 从初始声明是,a属于整数型;
a = "haha"; // 重复赋值时,整数型的a被修改为字符串类型;

③ 变量可以使用var声明,也可以不使用var声明。
[区别] 使用var声明为局部变量,不使用var声明为全局变量;

④ 只用var声明,但是不赋值。 结果为undefined;
例如: var a; // a为undefined。
但是,如果不声明也不赋值的a,直接使用会报错;

⑤ 同一变量名,可以多次使用var声明。 但是,后面的var并没有任何卵用。 第二次在使用var声明时,只会被理解为普通的赋值操作。

2、 变量名的命名要求:
① 变量名,只能有字母、数字、下划线组成;
② 开头不能是数字;
③ 变量名区分大小写,大写字母与小写字母为不同变量;

3、 变量名的命名规范:
① 要符合小驼峰法则(骆驼命名法):
首字母小写,之后每个单词的首字母大写;
myNameIsJiangHao √
② 或者使用匈牙利命名法:
所有字母小写,单词之间用_分隔;
my_name_is_jiang_hao √
③ mynameisjianghao × 能用,但是不规范。

4、 JS中的数据类型:>>>>>>重点!!!!!!
Undefined: 未定义。 已经使用var声明的变量,但是没有赋值。 var a;
Null: 表示空的引用。
Boolean: 布尔类型。表示真假,只有两个值: true/flase
Number: 数值类型。可以是正数,也可以是小数;
String: 字符串类型。用""或''包裹的内容,称为字符串;
Object: 对象类型,后续讲解。。。

5、 【常用的数值函数】
① isNaN():判断一个变量或常量,是否是NaN(not a num 非数值);
使用isNaN()判断时,会尝试使用Number()函数进行转换,如果最终结果能够转为数字,则不是NaN,结果为false。

② Number()函数: 将其他类型的数据,尝试转为数值型;
[字符串类型]
>>> 字符串为纯数值字符串,会转为对应的数字; "111"->111
>>> 字符串为空字符串,会转为0; ""->0
>>> 字符串包含任何其他字符时,都不能转; "1a"->NaN
[Boolean类型]
true->1 false->0
[Null/Undefined]
Null->0 Undefined->NaN
[Object]

③ ParseInt(): 将字符串转为整数类型;
>>> 纯数值字符串,能转。
"12"->12; "12.9"->12(小数转化时,直接抹掉小数点,不进行四舍五入)
>>> 空字符串,不能转。 ""->NaN
>>> 包含其他字符的字符串 ,会截取第一个非数值字符串前的数字部分;
"123a456"->123; "a123b456"->NaN
>>> ParseInt()只能转字符串,转其他类型,全是NaN。

[Number函数与ParseInt函数的区别] >>>>>>重点!!!!!!!
1. Number函数可以转各种数据类型,ParseInt函数只能转字符串;
2. 两者在转字符串时,结果不完全相同。(详见上面解释)

④ ParseFloat:将字符串转为数值型;
转换规则与ParseInt相同,只是如果有小数,则保留小数点;如果没有小数,则依然是整数;
"12.5" -> 12.5; "12"->12

⑤ typeof: 检测变量的数据类型:
字符串->String 数值->Number true/false->Boolean
未定义->Undefined 对象/NUll->object 函数->function
// var num = 11;
// alert(typeof(num));

 [JS中常用的输入输入语句]

 1. document.write(); 将()中的内容,打印输出到留言器屏幕上;

 使用时需注意:除变量/常量外的所有内容,必须放到""中。变量和常量必须放到""外面;
 如果同时又变量和字符串,必须用+链接;
 eg: document.write("左手中的纸牌"+left+"<br/>");

 2. alert(); 使用弹窗输出;
 弹窗警告,()中的内容与上述要求相同。

 3. promt(); 弹窗输入;
 接受两部分参数:
 ① 输入框上面的提示内容,可选;
 ② 输入框里面的默认信息,可选;
当只写一部分时,表示输入框上面的提示内容;

 可以定义变量,接收输入的内容。 点击确定按钮,变量将被赋值为输入的内容; 点击取消按钮,变量将被赋值为null;

 输入内容时,默认接收的数据类型都是字符串!!!!!

【JS中的运算符】

1、算术运算(单目运算符)
+ 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减

+:有两种作用,链接字符串/加法运算。当+两边全为数字时,进行加法运算,
当+两边有任意一边为字符串时,起链接字符串的作用,链接之后的结果为字符串。
>>>>其他运算符都会自动转化成数字进行运算,如果转化不了则为NaN;
/:结果会保留小数点。

【a++和++a的异同】
① 相同点:无论a++还是++a,运算完以后,a的值均会+1;
② 不同点:a++,先用a的值去运算,再把a+1;
++a,先把a+1,再用a+1以后的值去运算。


2、赋值运算
= 赋值 += -= *= /= %=

+=:a+=b;相当于 a=a+b;但是,前者的运算效率要比后者快,所以
推荐使用+=的写法;


3、关系运算
== 等于、 === 全等、 != 不等、!== 不全等、>、<、>=、<=

>>> 关系运算符,运算之后的结果,只能是Boolean类型;
>>> 判断一个数字是否处于某个区间,必须用&&链接;
a<10 && a>0 √ 10>a>0 X
>>> ===:严格等于;要求不但要类型相同,值也必须相同;类型不同,
结果直接为false;类型相同,再进行下一步判断;
==:等于;类型相同,与===效果一样。类型不同时,会先尝试
将两边转为数字,然后再进行判断。
但是,有个别特例,如:Null==false X Null==Undefined √

4、条件运算符(多目运算)
a>b?true:false

有两个重要符号:?和:
当?前面部分,运算结果为true时,执行:前面的代码;
当?前面部分,运算结果为false时,执行:后面的代码;

冒号两边可以为数值,则整个式子可用于赋值。
冒号两边可以直接为代码块,将直接执行代码。
多目运算符可以多层嵌套。


5、位运算符、 逻辑运算符
&& 与、|| 或、! 非
&& 两边都成立,结果为true。
|| 两边有任意一边成立,结果为true。

6、运算符的优先级
() 小括号最高
! ++ -- 单目运算符
* / %
+ -
> < >= <=
== !=
&& //与和或同时存在时,与比或高
||
= += -= *= /= 最低的是各种赋值

【JS中的分支结构】

【if-else结构】
 1、结构的写法:
 if(判断条件){
//条件为true时,执行if的{}
}else{
//条件为false时,执行else的{}
}
2、注意事项:
① else{}语句块。可以根据情况进行省略。
② if和else后面的{}可以省略,但是省略{}后,if和else后面
只能跟一条语句(所以,并不建议省略{});

3、 if的()中的判断条件,支持的情况:重点!!!!
① Boolean:true为真,false为假。
② String:空字符串为假,所有非空字符串为真;
③ Number:0为假,一切非0数字为真;
④ Null/Undefined/NaN:全为假。
⑤ Object:全为真。

【多重if、阶梯if结构】
 1、结构写法:
 if(条件一){
 // 条件一成立,执行的操作
}else if(条件二){
 // 条件一不成立,并且条件二成立,执行的操作
 }else{
 // 上述所有条件都不成立时,执行的操作
 }

 2、多重if结构中,各个判断条件是互斥的,只能选择其中
 一条路执行,遇到正确选项并执行完以后,直接跳出结构,
 不再判断后续分支;

【嵌套if结构】
 1、结构的写法:
 if(条件一){
 //条件一成立
 if(条件二){
 //条件一成立并且条件二成立
 }else{
 //条件一成立并且条件二不成立
 }
 }else{
 //条件一不成立
 }

 2、在嵌套if结构中,如果省略{},则else结构永远属于
 离他最近的一个if结构。

 3、嵌套结构可以多层嵌套,但是一般不推荐超过3层。
 能用多重if结构的一般不推荐使用嵌套if。

原文地址:https://www.cnblogs.com/lihaohai/p/7399770.html