,广告招贴的制作,包装设计,书籍装帧与宣传册设计,手机界面,设计,网页,界面,设计,*,*,photoshop,设计与制作项目教程,广告招贴的制作,包装设计,书籍装帧与宣传册设计,手机界面,设计,网页,界面,设计,photoshop,设计与制作项目教程,广告招贴的制作,包装设计,书籍装帧与宣传册设计,手机界面,设计,网页,界面,设计,2023/9/25,1,photoshop,设计与制作项目教程,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,手机图标设计之,任务分析,任,务,一,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,手机图标设计,之,任务实施,任,务,一,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,手机图标设计,之,要点解析,任,务,一,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,手机主题界面设计之,任务分析,任,务,二,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,手机主题界面设计之,任务实施,任,务,二,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,手机主题界面设计之,要点解析,任,务,二,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,手机锁屏界面设计之,任务分析,任,务,三,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,手机锁屏界面设计之,任务实施,任,务,三,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,手机锁屏界面设计之,要点解析,任,务,三,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,输入法皮肤界面设计之,任务分析,任,务,四,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,输入法皮肤界面设计之,任务实施,任,务,四,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,输入法皮肤界面设计之,要点解析,任,务,四,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Photoshop设计与制作项目教程ppt课件项目十,手机界面设计,项,目,十,知识加油站,一、矢量图形的绘制与编辑,1,绘制路径,绘制直线 绘制曲线 添加、删除和转换锚点,自由钢笔工具的使用 形状绘制,2,路径面板,3,路径运算,手机界面设计项目十知识加油站一、矢量图形的绘制与编辑,二、手机界面设计行业标准,1.,手机界面设计的特点与构成,2.,手机界面设计的一般要求,3.,UI,元素与设计尺寸,手机界面设计,项,目,十,知识加油站,二、手机界面设计行业标准手机界面设计项目十知识加油站,知识加油站,三、常用命令与技巧,1,注意图形的描边质量，边缘更为圆滑为宜,2,使用路径描边绘制多种形式的图标边角效果,3,通过描边路径可以绘制开放式的路径图标,4,灵活应用钢笔工具和直接选择工具对路径进行编辑,手机界面设计,项,目,十,知识加油站三、常用命令与技巧手机界面设计项目十,手机图标设计,任务一,手机主题界面设计,任务二,手机锁屏界面设计,任务三,输入法皮肤界面设计,任务四,手机界面设计,项,目,十,项目解析,手机图标设计任务一手机主题界面设计任务二手机锁屏界面设计任务,本任务将使用钢笔工具绘制扁平化图标和写实化,IPHONE SE,图标，主要的操作要点为钢笔绘制路径、路径选择工具调整路径大小；直接锚点选择工具调整锚点位置；转角工具调整路径圆角和角度；以及图层样式的使用。,本任务将使用钢笔工具绘制扁平化图标和写实化IPHONE SE,相关知识点讲解：,1.,圆角矩形工具,2.,直接选择工具,3.,椭圆工具,4.,钢笔工具,5.,图层样式,相关知识点讲解：1.圆角矩形工具,子任务,1,绘制扁平化图标,1.,新建文件，选择“圆角矩形工具”，绘制圆角矩形，复制出第二个圆角矩形。,2.,使用“直接选择工具”选择第二个圆角矩形的部分锚点，按“,Delete”,键删除。,子任务1 绘制扁平化图标1.新建文件，选择“圆角矩形工具”，,3.,选择“椭圆工具”，绘制正圆形。,4.,选择“钢笔工具”，绘制出山脉部分，使用“直接选择工具”选择山脉拐角的锚点，调整图形更为圆润。,3.选择“椭圆工具”，绘制正圆形。,子任务,2,绘制写实的,IPHONE SE,图标,1.,新建文件，选择“圆角矩形工具”，绘制机身厚度。,2.,使用渐变叠加再为其添加明暗变化。,子任务2 绘制写实的IPHONE SE图标1.新建文件，选择,3.,复制一层圆角矩形，添加“渐变叠加”样式，绘制机身。,4.,设置填充颜色为“白色”，接着使用“直接选择工具”选中上面的四个锚点，按“,Shift+”,键向下移动“,35px”,。,5.,复制图层，添加渐变色“描边”。,3.复制一层圆角矩形，添加“渐变叠加”样式，绘制机身。,6.,继续添加“外发光”样式。,7.,选择“矩形工具”，设置颜色，绘制矩形，对齐。,8.,选择“矩形,1,”图层，按“,Ctrl+Alt+G,”键创建剪贴蒙版，将矩形剪切进圆角矩形里。,6.继续添加“外发光”样式。,9.,为“矩形,1”,图层，添加“渐变叠加”样式。,10.,将“矩形,1”,图层执行“转换为智能对象”命令，添加“渐变叠加”样式。,9.为“矩形1”图层，添加“渐变叠加”样式。,11.,选择“矩形工具”，绘制矩形。,12.,按“,Ctrl+Alt+G”,键创建剪贴蒙版，将矩形剪切进圆角矩形里。然后在图层面板上将图层混合模式设置为“叠加”。,11.选择“矩形工具”，绘制矩形。,13.,打开素材文件，将图标拖入文件中，为“,logo”,图层，添加“渐变叠加”、“描边”样式。,14.,选择“横排文字工具”，输入文字“,iPhone”,，选择“圆角矩形工具”，绘制矩形，继续使用“横排文字工具”输入文字“,SE”,。,13.打开素材文件，将图标拖入文件中，为“logo”图层，添,15.,选择“椭圆工具”，绘制镜头，添加“描边”样式。,16.,绘制闪光灯。,17.,绘制按键。,18.,绘制投影效果。,15.选择“椭圆工具”，绘制镜头，添加“描边”样式。,1,路径边缘的修正会给整个图标精致的感觉，尤其是出现单独线条和折角的时候，显得尤为重要。路径描边还可以根据你的需要进行模式的选择，在路径外、中间或者内部进行描边，如图,10-2-18,所示。这在路径描边图形的绘制中会经常使用到。,2,在该任务的制作中多次用到图层样式面板，其中将“与图层对齐”选项选中以后，渐变效果的约束范围就是该形状本身；,3,“渐变叠加”样式使用时采用不同明度的灰色叠加在原来的固有色上，浅色灰会使固有色提亮，深色灰会使固有色变暗，从而使用这种方法可以快速打造出物体的质感。,1路径边缘的修正会给整个图标精致的感觉，尤其是出现单独线条,在触屏手机横行的时代，抓住用户的手指，就好比抓住用户的心。优秀的手机主题界面设计，能够使设计和情感融为一体，让用户所感知并且形成强烈的印象，所有的设计元素都要尽可能体现核心设计要素。比如本任务中要制作的布衣之恋手机主题界面，其设计主旨在将生活中朴实无华之美引入到手机界面之中，让用户发现华丽之外的美感。,在触屏手机横行的时代，抓住用户的手指，就好比抓住用户的心。优,相关知识点讲解：,1.,滤镜工具的应用,2.,图层的混合模式,3.,参考线的使用,4.,图层样式的使用,5.,画笔工具的应用,相关知识点讲解：1.滤镜工具的应用,子任务,1,制作麻纹背景,1.,新建文件，填充为“灰色（,#c2c2c2,）”，执行“滤镜”“像素化”“彩色半调”命令，执行“滤镜”“风格化”“浮雕效果”命令。,2.,执行“滤镜”“风格化”“扩散”命令。,3.,执行“滤镜”“模糊”“动感模糊”命令，复制图层。旋转图层，更改图层的混合模式为“柔光”，将文件由灰度模式转换为彩色模式。,子任务1 制作麻纹背景,4.,新建图层，渐变色填充，更改图层混合模式为“颜色”，设置该图层的不透明度为“,88%”,。,5.,新建参考线，选择“矩形选框工具”，绘制一个矩形选区，按“,Ctrl+J”,键将选区内的图像复制到新图层中。,4.新建图层，渐变色填充，更改图层混合模式为“颜色”，设置该,6.,为新图层添加“颜色叠加”、“投影”样式。,7.,选择“橡皮檫工具”，将标题栏的下边缘修饰为锯齿状。,6.为新图层添加“颜色叠加”、“投影”样式。,8.,选择“底纹,2”,图层，绘制矩形选区。按“,Ctrl+J”,键将选区内的图像复制到新图层中，重命名该图层为“状态栏”。,9.,将“标题栏”图层样式粘贴到“状态栏”图层上。,8.选择“底纹2”图层，绘制矩形选区。按“Ctrl+J”键将,子任务,2,制作设置图标,1.,绘制矩形，为其添加“图案叠加”样式。,2.,选择“画笔工具”，将蕾丝花边画笔载入，新建花边图层，绘制花边效果。复制花边，执行“垂直翻转”命令，调整位置。,3.,再次复制花边，并旋转角度和调整位置，绘制一个花边的图案，复制三次，分别旋转不同的角度。,子任务2 制作设置图标,4.,选择“椭圆工具”，绘制椭圆，使椭圆与矩形居中对齐。,5.,复制“椭圆,1,拷贝”图层，将其等比例缩小，更改其填充色。,4.选择“椭圆工具”，绘制椭圆，使椭圆与矩形居中对齐。,6.,绘制圆角矩形，使用“直接选择工具”改变圆角矩形形状。,7.,选择“椭圆,1”,图层，绘制圆形，按“,Ctrl+Alt+T”,键，对圆角矩形进行变形，复制出第二个梯形图案，再次按“,Ctrl+Alt+Shift+T”,键进行连续变换，得到齿轮效果。,6.绘制圆角矩形，使用“直接选择工具”改变圆角矩形形状。,8.,对圆角矩形”图层进行编组，选中所有图层，复制选中的所有路径，按“,Ctrl+V”,键将复制的所有梯形图案路径粘贴过来。,9.,新建蕾丝边图层，选择“画笔工具”，绘制花边形状，执行“描边路径”命令。,8.对圆角矩形”图层进行编组，选中所有图层，复制选中的所有路,10.,新建“蕾丝边,2”,图层，执行“描边路径”。,11.,其他的图标效果制作方法相同。,10.新建“蕾丝边2”图层，执行“描边路径”。,1.,本任务的主题标题栏、状态栏和图标的底衬是使用“滤镜”中的命令制作的，除此之外，还可以利用布纹背景进行曲线调整后，定义为图案并填充得到效果。,2.,倘若要对路径形状图层使用画笔描边，需要在图层面板上选择该形状图层后显示其路径，然后在“路径”面板上选择其路径，并执行“存储路径”命令，然后新建图层后即可使用画笔描边。,1.本任务的主题标题栏、状态栏和图标的底衬是使用“滤镜”中的,手机锁屏界面是手机,UI,设计中不可或缺的界面，一般来说锁屏界面包含要素有解锁滑动条、日期、时间等。,手机锁屏界面是手机UI设计中不可或缺的界面，一般来说锁屏界面,相关知识点讲解：,1.,椭圆工具的使用,2.,钢笔工具的使用,3.,文本工具,4.,自定义形状工具,5.,滤镜效果的使用,6.,图层样式,相关知识点讲解：1.椭圆工具的使用,关键步骤：,1.,打开上个任务中制作的“手机主题界面”文件，并另存只留下背景和标题栏。,2.,绘制标题栏的信号、电量指示图标及其他信息。,3.,选择“直接选择工具”，修改圆形形状。调整,wifi,信号的位置。,关键步骤：1.打开上个任务中制作的“手机主题界面”文件，并另,4.,选择“矩形工具”，绘制矩形。使用“直接选择工具”调整左上角的锚点，复制矩形并缩放，制作信号图形效果。,5.,选择“矩形工具”，绘制电量形状。,6.,选择“横排文字工具”，在标题栏的左侧