zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    性能分析之工具篇Fiddler的AutoReponder介绍
    IIS开启GZIP压缩效率对比及部署方法 (转)
    GDI+ 中发生一般性错误 (转)
    MySQL数据的导出和导入工具:mysqldump(备份数据库的命令) (转)
    让乌龟SVN(TortoiseSVN)提交时忽略bin和obj目录 (转)
    svn 错误和解决 Files has invalid value mine (转)
    WCF HTTPS配置
    httpwatch使用方法 May 31st, 2010
    值类型和引用类型
    搬家
  • 原文地址:https://www.cnblogs.com/lihaohai/p/7399770.html
Copyright © 2011-2022 走看看