Photoshop界面设计基础教程.docx

Photoshop界面设计基础教程.docx

《Photoshop界面设计基础教程.docx》由会员分享，可在线阅读，更多相关《Photoshop界面设计基础教程.docx（30页珍藏版）》请在冰点文库上搜索。

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导航栏

导航栏通常是指位于页眉区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接各个页面的作用。

导航栏如果设计得恰到好处会给网页本色增色很多，但设计不要过于花哨，导航栏属于功能物件，切莫喧宾夺主。

在导航栏的设计中需要注意以下几点：

1.导航栏目不多的情况下，通常是一排，横竖都可以。

当栏目超过6个，就可以考虑使用两排。

2.导航栏目很多的情况下也可以采用多排形式，甚至是不规则的多排，商业设计或用户网站通常都会有多个频道，设计的时候一般考虑横向双排，使用竖排会占用太大的空间。

3.多排导航未必一定要排在一起，可以自由发挥想象设计出更加灵活新颖的版式。

4.通常在内容不多的情况下，可能无所谓栏目，站点就包括了导航的具体内容。

5.图片式导航虽然较为美观，但占用空间较大。

6.包含信息较多的网站可以考虑使用快捷导航，这样浏览者无论进入哪个页面都可以快速跳转到另外的栏目，这样更利于操作。

7.目前网站中使用较多的是体积小，且具有视觉冲击力的Flash导航栏。

1.4.2按钮

网页中按钮的设计主要有以下几点要点：

1.按钮要与页面的整体效果相协调，不能喧宾夺主。

2.如果页面中的内容单一，如大段的文字，主体颜色过于单调或图片色彩过于单一，就需要依靠花哨的按钮来点缀。

3.考虑图片与字体搭配，要考虑字体是否清楚，色彩搭配是否协调统一，整个页面的颜色最好不要超过4种。

4.很长的按钮可以框架的分解，要尽量纤细一些，否则页面会显得过于臃肿，进而导致整个页面的效果受到影响。

1.5数字化图像基础

1.5.1位图图像

位图图像也叫点阵图像，是由一个个像素点组成的。

这些点可以进行不同的排列和染色已构成样式。

当放大位图时，可以看见构成整个图像的无数个像素点。

位图图像可以表现丰富的色彩变化并产生逼真的效果，很容易在不同软件之间交换使用，但它保存图像时需要记录每一个像素点的色彩信息，因此占用的存储空间比较大，在进行旋转或放大时会产生锯齿。

1.5.2矢量图像

矢量图像是由称作矢量的教学对象定义的直线和曲线构成的，它最基本的单位是锚点和路径，平常所见到和使用的矢量图形作品是由矢量软件创建的。

矢量图形与分辨率无关，它最大的优点是占用的存储空间较小，并且可以任意旋转和缩放而不会影响图像的清晰度。

1.6初识PhotoshopCC

1.菜单栏

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.复制图层

3.调整图层的叠放排序

4.删除图层

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“图层样式”对话框

1.斜体和浮雕

样式

方法

深度

大小

软化

角度/高度

光泽等高线

消除锯齿

高光模式

阴影模式

等高线

纹理

2.描边

大小

位置

混合模式

不透明度

填充类型

3.内阴影

距离

阻塞

大小

等高线

4.内发光和外发光

混合模式

不透明度

杂色

发光颜色

方法

源

阻塞

大小

5.光泽

6.颜色叠加

7.渐变叠加

8.图案叠加

9.投影

混合模式

投影颜色

不透明度

角度

使用全局光

距离

大小

扩展

等高线

消除锯齿

杂色

用图层挖空投影

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界面效果的个性化

手机界面不仅要体现整体性和一致性，也要着重突出软件界面的个性。

整体性和一致性是基于手机系统视觉效果的和谐统一考虑的，个性是基于软件本身的特征和用途考虑的。

1.特有的界面构架

2.专有的界面图标

3.界面色彩的个性化设置

5.2.3界面视觉元素的规范

1.图形图像元素的质量

2.线条色块与图形图像的结合

5.3手机界面设计的特征

1.手机的显示屏相对较小

2.手机界面交互过程不宜设计得太复杂

3.不同型号的手机支持的图像格式，音频格式和动画格式不一样

4.不同型号的手机屏幕比例不一样，设计时要考虑图片的自适应问题和界面元素图片布局问题

5.4手机界面设计的基本常识

1.QVGA

2.HVGA

3.WVGA

4.QCIF

5.SVGA

6.WXGA

5.4.2手机的色彩级别

目前，市场上彩屏手机的色彩指数从低到高可分为单色，256色，4096色，65536色，26万色和1600万色。

手机的显示内容主要可分为文字，简单图像和照片，不同色彩级别屏幕的显示效果截然不同。

文字通常只需要很少的颜色就能正常表现，而色彩细腻丰富的图像则需要色彩级别更高的屏幕才能完美地表现出来。

5.4.3图标的格式

1.PNG

2.GIF

3.JPEG

4.BMP

5.TIFF

5.4.4图标的尺寸

1.ios

2.Android

3.Windowsphone

5.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/翻转Y

3.角度

4.圆度

5.硬度

6.间距

6.6.2七种画笔动态参数

1.形状动态

大小抖动

控制

最小直径

角度抖动

圆度抖动

最小圆度

翻转X抖动/翻转Y抖动

画笔投影

2.散布

散布

两轴

数量

数量抖动

3.纹理

选择纹理

反相

缩放

亮度

对比度

为每个笔尖设置纹理

模式

深度

最小深度

深度抖动

4.双重画笔、

模式

翻转

大小

间距

散布

数量

5.颜色动态

应用每笔尖

前景/背景抖动

色相抖动

饱和度抖动

亮度抖动

纯度

6.传递

不透明度抖动

最小

流量抖动

湿度抖动

混合抖动

7.画笔笔势

倾斜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.镜头模糊

深度映射

光圈

镜面高光

杂色

分布

单色

4.云彩

5.添加杂色

6.镜头光晕

7.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视觉冲击力

如果说创意性是针对播放器整体外观和功能而言，那么视觉冲击力无疑是最大程度强调视觉效果了，随着生活质量不断提高，用户对精神层面的要求越来越高，对美的追求也越来越高，用户渴望看到更多纹理清晰，质感逼真的播放器界面。

而一个精美的播放器界面也确实会给用户带来极大的视觉享受。

7.2情感化因素不可忽视

情感设计从用户的情感角度出发去理解消费者的情感需求，激发消费者或爱或恨的情感，引起他们使用的欲望。

7.3人性化的设计

播放器外观的美观固然重要，但在设计方面也要注重人性化。

7.3.1可靠性

7.3.2舒适性

7.3.3个性化

7.4“通道”面板

1.复合通道

2.颜色通道

3.专色通道

4.Alpha通道

5.将通道作为选区载入

6.将选区储存为通道

7.创建新通道

8.删除当前通道

9.复制通道

10.分离通道/合并通道

11.画板选项

7.5通道的类型

7.5.1复合通道

7.5.2颜色通道

7.5.3专色通道

7.5.4Alpha通道

7.5.5单色通道

7.6新建与编辑通道

7.6.1新建通道

1.利用“将选区储存为通道”按钮创建通道

2.利用“创建新通道”按钮创建通道

3.利用“通道”面板命令创建通道

4.创建专色通道

7.6.2编辑通道

1.复制通道

2.删除通道

3.调整通道

4.分离通道

5.合并通道

7.6.3将通道应用到图层

7.6.4将图层内容粘贴到通道

7.7通道的功能

1.通道可以结合相关工具对复杂的图