Photoshop界面设计基础教程

《Photoshop界面设计基础教程》用户界面设计1.1什么是界面设计界面设计是为了满足专业化，标准化需求而产生对软件使用进行美化，优化和规范化设计分支。1.2图形界面分类1.2.1软件界面1.2.2网站界面网站界面必须具备创意性和独立性，但最主要是让用户更方便查找信息，能够感受到简便操作所带来乐趣。1.2.3手机界面1.2.4系统桌面界面1.2.5游戏界面1.2.6播放器界面1.3交互概念与图形界面人机交互是一门研究用户与系统之间交互关系学问，系统能够是计算机化系统和软件。图形界面通常指是用户可见部分，是人与计算机或者软件之间传递，交换信息媒介和对话接口，是用户与系统之间交流平台，它们之间有着紧密联络，但又是两个完全不一样概念。1.4导航栏和按钮设计关键点1.4.1导航栏导航栏通常是指位于页眉区域，在页眉横幅图片上边或下边一排水平导航按钮，它起着链接各个页面作用。导航栏假如设计得恰到好处会给网页本色增色很多，但设计不要过于花哨，导航栏属于功效物件，切莫喧宾夺主。在导航栏设计中需要注意以下几点：导航栏目不多情况下，通常是一排，横竖都能够。当栏目超出6个，就能够考虑使用两排。导航栏目很多情况下也能够采取多排形式，甚至是不规则多排，商业设计或用户网站通常都会有多个频道，设计时候通常考虑横向双排，使用竖排会占用太大空间。多排导航未必一定要排在一起，能够自由发挥想象设计出愈加灵活新奇版式。通常在内容不多情况下，可能无所谓栏目，站点就包含了导航详细内容。图片式导航即使较为美观，但占用空间较大。包含信息较多网站能够考虑使用快捷导航，这么浏览者不论进入哪个页面都能够快速跳转到另外栏目，这么更利于操作。现在网站中使用较多是体积小，且具备视觉冲击力Flash导航栏。1.4.2按钮网页中按钮设计主要有以下几点关键点：按钮要与页面整体效果相协调，不能喧宾夺主。假如页面中内容单一，如大段文字，主体颜色过于单调或图片色彩过于单一，就需要依靠花哨按钮来点缀。考虑图片与字体搭配，要考虑字体是否清楚，色彩搭配是否协调统一，整个页面颜色最好不要超出4种。很长按钮能够框架分解，要尽可能纤细一些，不然页面会显得过于臃肿，进而造成整个页面效果受到影响。1.5数字化图像基础1.5.1位图图像位图图像也叫点阵图像，是由一个个像素点组成。这些点能够进行不一样排列和染色已组成样式。当放大位图时，能够看见组成整个图像无数个像素点。位图图像能够表现丰富色彩改变并产生逼真效果，很轻易在不一样软件之间交换使用，但它保留图像时需要统计每一个像素点色彩信息，所以占用存放空间比较大，在进行旋转或放大时会产生锯齿。1.5.2矢量图像矢量图像是由称作矢量教学对象定义直线和曲线组成，它最基本单位是锚点和路径，日常所见到和使用矢量图形作品是由矢量软件创建。矢量图形与分辨率无关，它最大优点是占用存放空间较小，而且能够任意旋转和缩放而不会影响图像清楚度。1.6初识PhotoshopCC1.菜单栏2.标题栏3.选项栏4.文档窗口5.工具箱6.面板7.状态栏1.7文件基本操作1.7.1新建文件1.7.2打开文件1.7.3存放文件1.PSD格式2.JPEG格式3.TIF格式1.8多项选择选区创建与编辑方法1.8.1选区创建1.创建规则形状选区2.创建不规则形状选区1.8.2选区基本操作1.全选2.取消选择3.重新选择4.反向1.8.3选区编辑1.移动选区2.经过命令对选区进行编辑3.变换选区4.为选区描边5.隐藏和显示选区1.9图像变换操作1.9.1斜切图像1.9.2扭曲图像1.9.3透视图像1.9.4变形图像1.9.5翻转图像1.9.6自由变换图像1.10设置颜色方法1.10.1使用“吸管工具”选取颜色1.10.2使用“填充”命令设置颜色1.10.3使用“拾色器”对话框设置颜色1.10.4使用“色板”面板设置颜色1.10.5使用“颜色”面板设置颜色第二章图标设计2.1图标设计意义2.1.1图标概念图标概念从广义上来说，是指指代意义图形符号，具备快速传达被信息和辨于记忆特征。从狭义上来说，图标仅应用于计算机软件方面，包含程序标识，数据标识，命令选择，模式信号，切换开关和状态指示图标等。2.1.2图表设计作用一个图标代表了一个文件，程序和命令。图标能够帮助用户快速执行各种命令或打开应用程序。另外，图标用于浏览器中快速展示内容。2.2图标设计标准2.2.1可识别性标准2.2.2与环境协调标准2.2.3差异性标准2.2.4视觉效果标准2.2.5创造性标准2.3什么是图层图层就如同一些堆叠在一起透明纸张，每一张都承载着不一样图像，这些图像按照一定次序排列在一起，组成一幅完整图像。2.4“图层”面板1.选取滤镜类型2.图层混合模式3.锁定4.图层组5.指示图层可见性6.不透明度7.填充8.背景图层9.面板按钮2.5图层类型2.5.1文字图层2.5.2调整图层2.5.3形状图层2.5.4填充图层1.纯色2.渐变3.图案2.6图层创建与基本操作2.6.1图层创建1.使用“新建”命令新建图层2.在“图层”面板中创建新图层3.使用“经过拷贝图层”命令新建图层4.使用“经过剪切图层”命令新建图层2.6.2图层基本操作1移动图层复制图层调整图层叠放排序删除图层2.727种混合模式原理与特征2.7.1组合模式组2.7.2加深模式组2.7.3减淡模式组2.7.4对比模式组2.7.5比较模式组2.7.6色彩模式组2.8画笔工具2.8.1“画笔工具”选项栏1.画笔2.模式3.不透明度2.8.2“画笔”面板1.画笔预设2.画笔设置3.未锁定4.选中画笔笔尖5.画笔笔尖形状6.画笔选项7.画笔预览8.创建新画笔9.打开预设管理器10.切换实时笔尖画笔预览2.9擦除工具2.9.1橡皮檫工具1.模式2.不透明度3.流量4.抹到历史统计2.9.2背景橡皮檫工具1.“取样：连续”按钮2.“取样：一次”按钮3.“取样：背景色板”按钮4.限制5.容差6.保护前景色2.9.3魔术橡皮檫工具第三章登录界面设计3.1怎样设计人性化登录界面登录界面是网页和软件中较为常见，它必须在有限空间中，妥善地排列所用图片，个性元素和登录框等内容。在设计过程中首先要考虑用户使用便利程度，不应该太过复杂，在能够实现其应有功效前提下更美观。3.1.1非登录界面功效安排3.1.2表单排列3.1.3验证码3.2登录界面设计标准3.2.1任务明确3.2.2流程清楚3.2.3设计精简3.3登录界面设计特点3.4登录界面设计要求3.4.1用户名和密码登录界面是需要登录者提供账号，密码及验证码界面，有控制用户权限，统计用户行为和保障操作安全作用。登录界面通常需要用户填入用户名和密码，输入框前要有提醒。假如是邮箱等产品，还需要让用户了解是需要将全部邮箱名都填入，还是只需要填入自己用户名。3.4.2忘记密码用户在一些时候可能会忘记密码，所以在密码输入框附近需要有忘记密码等寻找密码链接。3.4.3提醒信息假如用户名和密码输入错误，需要有提醒信息，最好登录界面后台能够检测密码是否正确，节约用户提交服务器时间。3.4.4注册新用户登录区域附近需要有“注册新用户”链接，但在位置或视觉冲击力上不能超出“登录”按钮。3.5应用图层样式1.执行“图层->图层样式”下拉菜单样式命令2.在“图层”面板中单击“添加图层样式”按钮3.双击对应图层缩略图空白区域能够打开“图层样式”对话框3.5.2“图层样式”对话框斜体和浮雕样式方法深度大小软化角度/高度光泽等高线消除锯齿高光模式阴影模式等高线纹理描边大小位置混合模式不透明度填充类型内阴影距离阻塞大小等高线内发光和外发光混合模式不透明度杂色发光颜色方法源阻塞大小光泽颜色叠加渐变叠加图案叠加投影混合模式投影颜色不透明度角度使用全局光距离大小扩展等高线消除锯齿杂色用图层挖空投影3.5.3“样式”面板3.6图层蒙版原理与应用3.6.1什么是图层蒙版3.6.2创建图层蒙版3.6.3编辑图层蒙版3.6.4启用与停用图层蒙版3.7剪贴蒙版原理与应用3.7.1剪贴蒙版原理3.7.2剪贴蒙版应用3.8文本创建与编辑3.8.1文字创建1.创建点文字2.创建段落文字3.8.2编辑文字1.将文字转化为选区2.将文字转化为路径3.将文字转换为形状3.9创建变形文字第四章网页界面设计4.1初始网页界面设计4.1.1网页界面概念网页界面通常指是日常看到网站页面，它基本由工具栏，地址栏，状态栏，菜单栏，主菜单，子菜单，搜索栏，标志，文字和图像等组成。4.1.2网页界面设计要求4.1.3网页界面设计特点交互性，版式不可控性，技术与艺术结合紧密型，多媒体综合性和多维性。4.1.4网页设计概述4.2网页界面设计分类4.2.1环境性界面4.2.2情感性界面4.2.3功效性界面4.3网页设计标准4.3.1视觉美观性性标准4.3.2主题突出标准4.3.3整体标准4.3.4为用户考虑标准1.使用者优先概念2.考虑用户网络连接3.考虑用户浏览器4.3.5内容与形式相统一标准标志，主题，图像，文字，形象和题材等要素，而形式就是其整体格调和结构等表现形式。形式美必须符合主题需要网页上每一个元素都要有存在意义，不能为了表现超高技术，而使用过多无须要元素。网页具备多屏，分页和嵌套特征，所以在注意单个页面形式与内容统一同时还要注意由页面组成整体网站形式与内容统一。4.3.6更新和维护标准1.服务器及相关软硬件维护，对可能出现问题进行评定，制订对应计划。2.数据库维护就是有效地利用数据，是网站维护主要内容。3.内容及时更新和调整。4.制订相关网站维护要求，将网站维护做到制度化和规范化5.做好网站安全管理，预防黑客入侵网站，检验网站个肝功效，以及链接是否有错。4.4网页界面组成元素4.4.1文字4.4.2图像4.4.3色彩4.4.4多媒体4.5网页界面布局形式4.5.1标题型标题型网页表现形式是，上边是标题，下面是文字部分，惯用于一些文字文章，企业介绍和注册页面。4.5.2图片型图片型网页设计，给人形象，直观和精美感觉，通常出现在服装类页面，时尚类网页或企业网站，它优点是醒目，美观和视觉感染力强，最大弊端就是下载速度慢。4.5.3动画型动画型网页是现在非常流行一个网页设计表现形式，它主要指是Flash，因为Flash强大功效，使得页面表示信息更形象，直观且视觉效果突出。4.5.4左右框架型4.5.5上下框架型同左右框架相同，不一样之处于于上下框架型是上下结构布局页面。4.6图像调整命令4.6.1“色阶”命令1.预设2.通道3.输入色阶4.输出众阶5.自动6.选项7.设置黑场8.设置灰场9.设置白场4.6.2“曲线”命令1.预设2.通道3.图像调整工具4.编辑点以修改曲线5.经过绘制来修改曲线6.平滑7.输入色阶/输出众阶8.高光/中间调/阴影9.设置黑场/设置灰场/设置白场10.显示数量11.网格大小12.显示13.自动14.选项4.6.3“色彩平衡”命令1.色彩平衡2.色调平衡4.6.4“亮度/对比度”命令4.6.5“色相/饱和度”命令1.预设2.遍布范围3.色相4.饱和度5.明度6.图像调整工具7.颜色条8.着色9.吸管工具4.6.6“自然饱和度”命令1.自然饱和度2.饱和度4.6.7“匹配颜色”命令1.目标2.应用调整是忽略选区3.明亮度4.颜色强度5.渐隐6.中和7.使用源选区计算调整8.源9.图层4.7调整图层与调整命令区分1.灵活性2.蒙版4.8调整图层创建与编辑第五章手机界面设计5.1手机界面设计主要性总来说，我们应该遵照提升效率，易学习和实用性标准来设计手机界面。5.2手机界面设计要求5.2.1界面效果整体性和一致性软件界面总体色彩应该靠近和类似系统界面总体色调，一款外观与系统界面不统一手机，会给用户带来不适感。要合理地结合系统界面设计图标，按钮格调及不一样操作状态下视觉效果。手机用户操作习惯是基于系统，所以在界面设计操作流程上，也是遵照系统规范性，让用户会用手机会使用软件，简化操作流程。5.2.2界面效果个性化手机界面不但要表现整体性和一致性，也要着重突出软件界面个性。整体性和一致性是基于手机系统视觉效果友好统一考虑，个性是基于软件本身特征和用途考虑。特有界面构架专有界面图标界面色彩个性化设置5.2.3界面视觉元素规范1.图形图像元素质量2.线条色块与图形图像结合5.3手机界面设计特征1.手机显示器相对较小2.手机界面交互过程不宜设计得太复杂3.不一样型号手机支持图像格式，音频格式和动画格式不一样4.不一样型号手机屏幕百分比不一样，设计时要考虑图片自适应问题和界面元素图片布局问题5.4手机界面设计基本常识1.QVGA2.HVGA3.WVGA4.QCIF5.SVGA6.WXGA5.4.2手机色彩级别现在，市场上彩屏手机色彩指数从低到高可分为单色，256色，4096色，65536色，26万色和1600万色。手机显示内容主要可分为文字，简单图像和照片，不一样色彩级别屏幕显示效果截然不一样。文字通常只需要极少颜色就能正常表现，而色彩细腻丰富图像则需要色彩级别更高屏幕才能完美地表现出来。5.4.3图标格式1.PNG2.GIF3.JPEG4.BMP5.TIFF5.4.4图标尺寸1.ios2.Android3.Windowsphone5.5路径与锚点5.6使用“钢笔工具”绘制路径5.6.1钢笔工具5.6.2“钢笔工具”选项栏1.形状2.路径3.像素4.填充/描边5.描边高度6.对齐分布7.形状堆叠方式8.路径操作9.描边类型10.扩展设置11.建立类型选区蒙版形状5.6.3自由钢笔工具1.几何选项2.磁性5.6.4创建路径5.7选择与编辑路径5.7.1选择与移动锚点与路径5.7.2添加与删除锚点5.7.3转换锚点类型5.7.4调整路径形状5.7.5变换路径5.8“路径”面板5.8.1认识“路径”面板1.路径2.工作路径3.矢量蒙版4.用前景色填充路径5.用画笔描边路径6.将路经作为选区载入7.从选区生成工作路径8.添加图层蒙版9.创建新路径10.删除当前路径5.8.2工作路径和路径5.8.3创建新路径5.8.4显示和隐藏路径5.8.5复制和删除路径5.8.6将路经转换为选区5.8.7将选区转换为路径5.8.8填充路径1.内容2.模式3.不透明度4.保留透明区域5.羽化半径6.消除锯齿5.9形状工具5.9.1矩形工具，圆角矩形工具和椭圆工具5.9.2多边形工具和直线工具5.9.3自定形状工具第六章软件界面设计6.1软件界面发展历程软件界面发展经历了从低级到高级，从简单到复杂过程，软件界面在软件系统中性价比越来越高，好软件界面要求实用，易用，美观，软件界面不但能够让软件变得个性化，还能够使软件操作变得愈加人性化。6.2软件界面设计介绍软件界面设计是科学性艺术设计，不但要求设计师具备良好美术功底，还需要定位使用者，使用环境和使用方式，设计初衷是为用户服务。6.3软件界面设计“黄金法则”1.易用性2.从用户观点出发3.通俗易懂语言4.考拉用户熟悉程度5.清楚性6.一致性7.灵活性8.安全性9.人性化6.4软件界面设计分类软件界面是用户与系统进行交互媒介，这些系统不但仅包含计算机系统，还包含一些机器，硬件设备和工具等。软件界面设计范围比较广泛，最常见软件界面设计包含计算机软件，手机界面设计，输入法界面设计和播放器界面设计等。6.5软件界面设计中屏幕设计1.布局2.文字用语3.颜色6.6解读“画笔”面板中选项6.6.1画笔笔尖形状1.大小2.翻转X/翻转Y3.角度4.圆度5.硬度6.间距6.6.2七种画笔动态参数1.形状动态大小抖动控制最小直径角度抖动圆度抖动最小圆度翻转X抖动/翻转Y抖动画笔投影散布散布两轴数量数量抖动纹理选择纹理反相缩放亮度对比度为每个笔尖设置纹理模式深度最小深度深度抖动双重画笔、模式翻转大小间距散布数量颜色动态应用每笔尖前景/背景抖动色相抖动饱和度抖动亮度抖动纯度传递不透明度抖动最小流量抖动湿度抖动混合抖动画笔笔势倾斜X/倾斜Y覆盖倾斜X/覆盖倾斜Y旋转压力覆盖压力6.6.3设置附加选项1.杂色2.湿边3.平滑6.7PhtotshopCC中滤镜6.7.1什么是滤镜6.7.2滤镜类型6.7.3认识滤镜库1.预览区2.滤镜组3.参数设置4.新建效果图层5.删除效果图层6.预览缩放7.滤镜图层6.7.4常见滤镜1.高斯含糊2.径向含糊数量含糊方法品质中心含糊3.镜头含糊深度映射光圈镜面高光杂色分布单色云彩添加杂色镜头光晕USM锐化6.8滤镜使用规则和技巧6.8.1滤镜使用规则1.使用滤镜处理图层中图像时，该图层必须是可见。假如创建了选区，滤镜只应用于选区内图像，没有创建选区，则应用于当前图层。2.滤镜能够应用在图层蒙版。3.只有“云彩”滤镜能够应用在没有像素区域，其余滤镜都必须应用在包含像素区域4.RGB颜色模式图像能够使用全部滤镜，部分滤镜不能用于CMYK颜色模式图像，索引模式和位图模式图像不能使用滤镜。假如需要对位图，索引或CMYK颜色模式图像应用一些特殊滤镜，可先将其转换为RGB颜色模式，再进行处理。5.文字须转换为图形后，才能够应用滤镜。6.8.2滤镜使用技巧6.9智能滤镜6.9.1创建智能对象6.9.2编辑智能对象第七章播放器界面设计7.1播放器界面设计特点7.1.1统一协调性统一协调性是指播放器界面各个元素格调应该协调统一，这是任何类型界面设计都应该遵照标准。统一标准和创意性标准并不矛盾。统一性着重强调播放器界面内各个功效要协调统一，创意性则强调播放器界面整体格调要别具一格。7.1.2创造性全部播放器功效基本相同，只有创意才能从各种铺天盖地界面设计中脱颖而出。网上有很多创意绝妙图标，按钮和各种界面设计，这些鬼斧神工作品经常充满了灵性，给用户带来强烈情感共鸣和视觉震撼力，令人过目不忘。7.1.3视觉冲击力假如说创意性是针对播放器整体外观和功效而言，那么视觉冲击力无疑是最大程度强调视觉效果了，伴随生活质量不