Download - about Graphic design by watert
![Page 2: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/2.jpg)
平面构成与色彩构成:这个题目大得可怕
![Page 3: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/3.jpg)
You’re doing design work
What is design?
![Page 4: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/4.jpg)
In my point of view:
视觉设计是对内容内容 的视觉表达表达
![Page 5: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/5.jpg)
摄影的基本原则——《纽约摄影学院教材》
• 一幅好照片要有一个鲜明的主题主题(有时也称之为题材)。或是表现一个人,或是表现一件事物,甚至可以表现该题材的一个故事情节。主题必须明确,毫不含糊,使任何观赏者一眼就能看得出来。
• 一幅好照片必须能把注意力引向引向被摄主体,换句话说,使观赏者的目光一下子就投向被摄主体。
• 一幅好照片必须画面简洁简洁,只包括那些有利于把视线引向被摄主体的内容,而排除或压缩那些可能分散注意力的内容。
![Page 6: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/6.jpg)
推荐书籍• 《 Don’t Make Me Think 》• 《写给大家看的设计书》• 《像艺术家一样思考》系列(欢迎试毒)• 平面构成、色彩构成、色彩调和、色彩心
理学、冷暖色 (百度百科词条)
![Page 7: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/7.jpg)
推荐站点• http://zcool.com.cn/http://zcool.com.cn/• http://designlol.net/http://designlol.net/• http://www.deviantart.com/ http://www.deviantart.com/
![Page 8: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/8.jpg)
理工科学子• 机会 机会 Opportunities:Opportunities:
• 商业化设计对效率要求极高• 越来越多的工业与设计挂勾• 工作与生活都需要美感
• 弱点 弱点 Weaknesses:Weaknesses:• 美术功底不扎实• 对业界了解少• 极其对行业容易迷惘
• 威胁 威胁 Threats:Threats:• 顾此失彼,一事无成• 直接与班科人士竞争
• 强项 强项 Strengths:Strengths:• 对辅助工具上手快• 对工作流程掌握好• 踏实、理智
![Page 9: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/9.jpg)
Learning Design
• 观察• 临摹• 实战
![Page 10: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/10.jpg)
Before Design• 你要做的工作
• 明白设计的目的目的• 找到很多的参考参考• 画草图草图
• 你要有的心理准备• 不可能一次性完成• 极可能灵感枯竭
![Page 11: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/11.jpg)
Layout Design
![Page 12: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/12.jpg)
信息架构 IA 的主体对象是信息,由信
息建筑师来加以设计结构、决定组织方式以及归类,好让使用者与用户容易寻找与管理的一项艺术与科学。
![Page 13: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/13.jpg)
四个原则——《写给大家看的设计书》
• 亲密• 对齐• 重复• 对比
![Page 14: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/14.jpg)
亲密• 物理的接近就意味存在着关联,所以把相关的项组织在一起。
![Page 15: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/15.jpg)
对齐• 任何东西都不能在页面上随意安放。每个元素都应该与页面上的另一些元素有某种视觉关系。
![Page 16: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/16.jpg)
对齐辅助• 找一根明确的线,并用它来对齐
![Page 17: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/17.jpg)
重复• 让设计中的视觉要素在整个作品中重复出
现,可以同时加强条理性和统一性。• 可以重复颜色、形状、材质、空间关系、
线宽、字体大小、图片,等等。
![Page 18: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/18.jpg)
重复 Sample
![Page 19: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/19.jpg)
对比• 对比的核心思想是,要避免页面上的元素太过相似。
• 如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那干脆就让他们截然不同。
![Page 20: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/20.jpg)
对比 Sample
![Page 21: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/21.jpg)
缺乏对比度:
![Page 22: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/22.jpg)
构图:平衡与对称• 分割线
•三等分、根二分割、黄金分割
•浮躁的人们喜欢扫描•F 区域
![Page 23: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/23.jpg)
形状的心情•正三角:稳重•倒三角:不安全、颠覆•矩形:正式、安全•圆形等曲线形:变化、温柔
![Page 24: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/24.jpg)
关于字体• 衬线体:美观正式
• 宋体、明体、 Georgia
• 非衬线体:屏幕识别性高、印刷好• 黑体、 Tahoma 、 Arial
• 手写体:个性张扬、识别性低•隶书、行书、 Script 体
![Page 25: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/25.jpg)
Color Composition
![Page 26: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/26.jpg)
介质中的色彩•发光体(屏幕): RGB•反射体(油墨): CMYK• 感观(肉眼): HSL 、 LAB
![Page 27: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/27.jpg)
人眼中的色彩: HSL
![Page 28: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/28.jpg)
冷暖色• 根据心理感受区分:
• 暖色:红、橙、黄• 冷色:青、蓝• 中性色:紫、绿、黄、黑、灰、白
• 暖色:亲近、温暖• 冷色:距离、凉爽
![Page 29: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/29.jpg)
色彩调和• HSL 至少保持一项不变• 运用对比
• 色相对比• 鲜度对比• 明度对比
![Page 30: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/30.jpg)
黑灰白• 饱和度为零• 没有色调• 万能百搭
![Page 31: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/31.jpg)
对比
以上作品都出自《 Pixiv girls collection 》画集
![Page 32: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/32.jpg)
光影• 渐变产生光泽感
• 浅色渐变• 高光与阴影的控制
![Page 33: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/33.jpg)
调色心得• 寻找参照并观察:
• HSL 信息及分布
• 用黑灰白作为衔接
![Page 34: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/34.jpg)
Thinking about…• 你曾经看到过的,你曾经做过的,你将要看到的:
• 文档、手册、封面• 宣传单张• 海报、宣传板• 网页• 手机、软件界面
![Page 35: about Graphic design by watert](https://reader033.vdocuments.net/reader033/viewer/2022061118/54698f7daf7959c32b8b594e/html5/thumbnails/35.jpg)
Thanks@watert [email protected]