APP移动界面美化设计案例100+_魏学智, 吕小星主编_9787302469988

APP移动界面美化设计案例100+

定价：¥69

中教价：¥20.70 (3.00折）

库存数： 0

购买数量：

      本书通过案例的方式介绍了如何使用Photoshop进行移动APP设计, 从认识APP界面设计讲起, 然后通过丰富的移动APP设计知识和详细的设计制作讲解, 全以一个逐渐深化的方式为用户呈现设计中的重点门类和制作方法, 使读者全面且深入地掌握各种类别移动界面设计案例, 让你走在设计行业的前沿, 不再觉得APP界面设计是一门神秘设计学问。

　　第7章流行风图标界面的设计APP

　　本章介绍

　　本章讲解流行风图标界面设计，流行风，顾名思义，是指当下最流行的图标设计风格，本章精选了当下流行的多个实例，从最实用和流行的风格入手，对图标界面的制作进行完全展示，通过对此种风格的了解和学习，可以完全掌握当下流行风图标界面的设计方向。

　　要点索引

　　学会美丽拍图标的绘制

　　学习简洁时钟图标的绘制

　　了解财富应用图标的制作思路

　　掌握存储数据界面的设计

　　掌握游客统计界面的设计

　　实战78美丽拍图标

　　本例讲解美丽拍图标制作，整个制作过程十分简单，重点在于图标的中细节的刻画，为平面图形添加相应的图层样式，制作出具有立体视觉效果的图形，最终效果如图7.1所示。

　　图7.1最终效果

　　Step01绘制矩形并添加阴影

　　(1)选择菜单栏中的【文件】|【新建】命令，在弹出的对话框中设置【宽度】为600像素，【高度】为450像素，【分辨率】为72像素/英寸，新建一个空白画布，将画布填充为深蓝色(R:9，G:18，B:32)。

　　(2)选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为白色，设置【描边】为无，【半径】为60像素，在画布中按住Shift键绘制一个圆角矩形，此时将生成一个【圆角矩形1】图层，如图7.2所示。

　　图7.2绘制图形

　　(3)在【图层】面板中，选中【圆角矩形1】图层，单击面板底部的【添加图层样式】按钮，在菜单中选择【渐变叠加】命令，在弹出的对话框中将【渐变】更改为蓝色(R:35，G:160，B:254)到青色(R:62，G:255，B:248)，完成之后单击【确定】按钮，如图7.3所示。

　　图7.3设置渐变叠加

　　(4)选择工具箱中的【椭圆工具】，在选项栏中将【填充】更改为蓝色(R:36，G:160，B:254)，设置【描边】为无，在【圆角矩形1】图层中的图形底部位置绘制一个椭圆图形，此时将生

　　成一个【椭圆1】图层，如图7.4所示。

　　图7.4绘制图形

　　(5)选中【椭圆1】图层，选择菜单栏中的【滤镜】|【模糊】|【高斯模糊】命令，在弹出的对话框中将【半径】更改为110像素，完成之后单击【确定】按钮，如图7.5所示。

　　图7.5设置高斯模糊

　　(6)选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为黑色，设置【描边】为无，【半径】为50像素，在图标底部后方位置绘制一个圆角矩形，此时将生成一个【圆角矩形2】图层，如图7.6所示。

　　图7.6绘制图形

　　(7)选中【圆角矩形2】图层，按Ctrl+T组合键对其执行【自由变换】命令，单击鼠标右键，从弹出的快捷菜单中选择【透视】命令，拖动变形框将图形变形，完成之后按Enter键确认，如图7.7所示。

　　图7.7将图形变形

　　(8)选中【圆角矩形2】图层，按Ctrl+Alt+F组合键打开【高斯模糊】命令对话框，在弹出的对话框中将【半径】更改为3像素，完成之后单击【确定】按钮，如图7.8所示。

　　图7.8设置高斯模糊

　　(9)在【图层】面板中，选中【圆角矩形2】图层，单击面板底部的【添加图层蒙版】按

　　钮，添加图层蒙版，如图7.9所示。

　　(10)选择工具箱中的【画笔工具】，在画布中单击鼠标右键，在弹出的面板中选择一种圆角

　　笔触，将【大小】更改为150像素，【硬度】更改为0%，如图7.10所示。

　　图7.9添加图层蒙版图7.10设置笔触

　　(11)将前景色更改为黑色，在其图像上部分区域涂抹，将其隐藏，如图7.11所示。

　　图7.11隐藏图像

　　Step02绘制标志图形

　　(1)选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为白色，设置【描边】为无，【半径】为30像素，在图标位置绘制一个圆角矩形，此时将生成一个【圆角矩形3】图层，如图7.12所示。

　　图7.12绘制圆角矩形3

　　(2)选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为黑色，设置【描边】为无，【半径】为5像素，在刚才绘制的图形靠左侧位置绘制一个圆角矩形，此时将生成一个【圆角矩形4】图层，如图7.13所示。

　　图7.13绘制圆角矩形4

　　(3)选中【圆角矩形4】图层，按Ctrl+T组合键对其执行【自由变换】命令，当出现变形框以后，在选项栏中【旋转】后方的文本框中输入45，再分别将图形高度缩小，宽度增加，完成之后按Enter键确认，如图7.14所示。

　　(4)选择工具箱中的【删除锚点工具】，单击图形左侧锚点将其删除，再将图形稍微移动，如图7.15所示。

　　图7.14变换图形图7.15删除锚点

　　(5)在【图层】面板中，选中【圆角矩形3】图层，单击面板底部的【添加图层蒙版】按

　　钮，为其添加图层蒙版，如图7.16所示。

　　(6)按住Ctrl键单击【圆角矩形4】图层缩览图，将其载入选区，将选区填充为黑色，将部分图形隐藏，完成之后按Ctrl+D组合键将选区取消，如图7.17所示。

　　图7.16添加图层蒙版图7.17隐藏图形

　　提示

　　隐藏图形制作镂空效果之后【圆角矩形4】图层无用，可以将其删除。

　　(7)选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为白色，设置【描边】为无，【半径】为5像素，在刚才绘制的图形靠右侧位置绘制一个圆角矩形，此时将生成一个【圆角矩形4】图层，如图7.18所示。

　　图7.18绘制图形

　　(8)以刚才同样的方法对【圆角矩形4】图层中的图形进行变换并删除部分锚点后，适当移动图形，如图7.19所示。

　　图7.19删除锚点并移动图形

　　Step03制作细节部分

　　(1)选择工具箱中的【钢笔工具】，在选项栏中单击【选择工具模式】按钮，在弹出的选项中选择【形状】，将【填充】更改为无，【描边】更改为无，在图标位置绘制1个不规则

　　图形，此时将生成一个【形状1】图层，如图7.20所示。

　　图7.20绘制图形

　　(2)在【图层】面板中，选中【形状1】图层，单击面板底部的【添加图层样式】按钮，在菜单中选择【内阴影】命令，在弹出的对话框中将【颜色】更改为青色(R:56，G:210，B:254)，【不透明度】更改为50%，【距离】更改为6像素，【大小】更改为13像素，如图7.21所示。

　　图7.21设置内阴影

　　(3)在【图层】面板中，选中【形状1】图层，单击面板底部的【添加图层蒙版】按钮，为图层添加图层蒙版，如图7.22所示。

　　(4)选择工具箱中的【画笔工具】，在画布中单击鼠标右键，在弹出的面板中选择一种圆角笔触，将【大小】更改为50像素，【硬度】更改为0%，如图7.23所示。

　　图7.22添加图层蒙版图7.23设置笔触

　　(5)将前景色更改为黑色，在其图像上部分区域涂抹将其隐藏，如图7.24所示。

　　图7.24隐藏图像

　　(6)在【图层】面板中，选中【形状1】图层，将其拖至面板底部的【创建新图层】按钮上，复制1个【形状1拷贝】图层，如图7.25所示。

　　(7)选中【形状1拷贝】图层，按Ctrl+T组合键对其执行【自由变换】命令，单击鼠标右键，从弹出的快捷菜单中选择【垂直翻转】命令，完成之后按Enter键确认，将图形向下移动至与原图形相对的位置，双击其图层样式名称，在弹出的对话框中取消勾选【使用全局光】复选框，将【角度】更改为-120度，完成之后单击【确定】按钮，如图7.26所示。

　　图7.25复制图层图7.26变换图形

　　(8)在【图层】面板中，选中【形状1拷贝】图层，将其拖至面板底部的【创建新图层】按钮上，复制1个【形状1拷贝2】图层，如图7.27所示。

　　(9)选中【形状1拷贝2】图层，按Ctrl+T组合键对其执行【自由变换】命令，将图形向右侧移动并适当旋转，完成之后按Enter键确认，再选择工具箱中的【直接选择工具】适当调整图形锚点，再双击其图层样式名称，在弹出的对话框中取消勾选【使用全局光】复选框，将【角度】更改为-60度，完成之后单击【确定】按钮，如图7.28所示。

　　图7.27复制图层图7.28变换图形

　　(10)选择工具箱中的【矩形工具】，在选项栏中将【填充】更改为无，设置【描边】为无，在图标靠右侧位置绘制一个矩形，此时将生成一个【矩形1】图层，将其移至【圆角矩形4】图层上笔触，将【大小】更改为60像素，【硬度】更改为0%，如图7.34所示。

　　图7.33添加图层蒙版图7.34设置笔触

　　(16)将前景色更改为黑色，在图像上部区域涂抹，将其隐藏，这样就完成了效果制作，最终效果如图7.35所示。

　　图7.35完成了制作

……

你还可能感兴趣

我要评论

您的姓名	验证码：
留言内容