Photoshop界面设计基础教程

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