南充热线主页 > 资讯 > 正文 >

用PS制作手机UI界面设计

2020-06-03 09:49:26 来源:互联网 阅读:-
【摘要】本例是为智能手机设计个人首页界面设计,首先明确整个设计风格以简洁为主,结构一目了然,在色彩运用上运用清爽的对比色系,给人视觉上带来舒适的效果。(1)按Ctrl+N组合键新建一个600×1077像素的文档,然后执行“视图>标尺”命令,在显示的标尺区域拉出参考线,效果如图所示。

本例是为智能手机设计个人首页界面设计,首先明确整个设计风格以简洁为主,结构一目了然,在色彩运用上运用清爽的对比色系,给人视觉上带来舒适的效果。

(1)按Ctrl+N组合键新建一个600×1077像素的文档,然后执行“视图>标尺”命令,在显示的标尺区域拉出参考线,效果如图所示。


用PS制作手机UI界面设计


(2)设置前景色为(R:184,G:255,B:229),然后新建一个“图层 1”,接着按Alt+Delete组合键用前景色填充该图层,效果如图所示。


用PS制作手机UI界面设计


(3)新建一个“组 1”,然后选择“矩形工具”,接着在选项栏中设置“填充颜色”为(R:245,G:148,B:102)、“描边”为“无颜色”,最后绘制出如图所示的矩形。


用PS制作手机UI界面设计


(4)执行“图层>图层样式>投影”菜单命令,打开“图层样式”对话框,然后设置“混合模式”为“正常”、“不透明度”为30%、“角度”为90°、“距离”为4像素、“大小”为0像素,具体参数设置如图所示,效果如图所示。


用PS制作手机UI界面设计


用PS制作手机UI界面设计


(5)按Ctrl+J组合键复制出一个副本图层,然后调整至合适的颜色和位置,效果如图所示。


用PS制作手机UI界面设计


(6)导入光盘中的“素材文件>CH23>素材01-1.png”文件,然后将新生成的图层更名为“图标”图层,并设置该图层的“不透明度”为50%,效果如图所示。


用PS制作手机UI界面设计


(7)使用“横排文字工具”在绘图区域中输入文字信息,然后按Alt键复制“矩形 1”的“投影”图层效果到该图层,接着调整相关数值大小,效果如图所示。


用PS制作手机UI界面设计


(8)选择“自定形状工具”,然后在选项栏中设置“填充颜色”为白色、“描边”为“无颜色”,单击“形状图层”按钮,接着选择“形状”中的“箭头 2”图形,最后在绘图区域中绘制出如图所示的图形。


用PS制作手机UI界面设计


(9)按住Alt键复制Lily Allen文字图层的“投影”图层效果到该形状图层,效果如图所示。


用PS制作手机UI界面设计


(10)打开光盘中的“素材文件>CH23>素材01-2.png”文件,然后将其拖曳到“手机UI界面设计”操作界面中,接着将新生成的图层更名为“素材”图层,如图所示。


用PS制作手机UI界面设计


(11)在“组 1”的下方新建一个“组 2”,然后选择“矩形工具”沿画面上方标尺绘制一个合适的白色矩形,接着按Alt键复制“矩形 1”的“投影”图层效果到该图层,效果如图所示。


用PS制作手机UI界面设计


(12)打开光盘中的“素材文件>CH23>素材01-3.jpg和素材01-4.png”文件,然后将其拖曳到“手机UI界面设计”操作界面中,接着将新生成的图层更名为“图片”图层和“按钮”图层,如图所示。


用PS制作手机UI界面设计


(13)使用“横排文字工具”(字体大小和样式可根据实际情况而定)在绘图区域中输入文字信息,效果如图所示。


用PS制作手机UI界面设计


(14)新建一个“图层 3”,然后设置前景色为(R:187,G:182,B:179),接着使用“矩形选框工具”绘制一个合适的矩形选区,最后按Ctrl+J组合键复制出一个副本图层并调整至合适的位置,效果如图所示。


用PS制作手机UI界面设计


(15)新建一个“组 3”,然后选择“椭圆工具”绘制一个合适的白色圆形,效果如图所示。


用PS制作手机UI界面设计


(16)按Ctrl+J组合键复制出一个副本图层,并将其移动到“椭圆 1”图层的下方,然后调整至合适的大小,最后设置该图层的“填充”为20%,效果如图所示。


用PS制作手机UI界面设计


(17)执行“图层>图层样式>内阴影”菜单命令,打开“图层样式”对话框,然后设置“混合模式”为“正常”、阴影颜色为白色、“角度”为90°、“距离”为2像素、“大小”为3像素,具体参数设置如图所示,效果如图所示。


用PS制作手机UI界面设计


用PS制作手机UI界面设计


(18)打开光盘中的“素材文件>CH23>素材01-5.jpg”文件,然后将其拖曳到“手机UI界面设计”操作界面中,接着将新生成的图层更名为“头像”图层,最后将该图层设置为“椭圆 1”图层的剪贴蒙版,效果如图所示。


用PS制作手机UI界面设计


(19)继续打开光盘中的“素材文件>CH23>素材01-6.png”文件,然后将其拖曳到“手机UI界面设计”操作界面中,接着将新生成的图层更名为“地标”图层,效果如图所示。


用PS制作手机UI界面设计


(20)设置前景色为(R:245,G:148,B:102),使用“横排文字工具”在绘图区域中输入文字信息,效果如图所示。


用PS制作手机UI界面设计


(21)新建一个“点”图层,然后使用“椭圆选框工具”绘制一个合适的圆形选区,并用白色填充,接着按Ctrl+J组合键复制出一个副本图层,移动至合适的位置,最后设置该副本图层的“不透明度”为20%,效果如图所示。


用PS制作手机UI界面设计


(22)在“组 2”的下方新建一个“组 4”,然后使用“矩形选框工具”沿画面上方标尺创建一个合适的选区并填充白色,效果如图所示。


用PS制作手机UI界面设计


(23)执行“图层>图层样式>投影”菜单命令,打开“图层样式”对话框,然后设置“混合模式”为“正常”、“不透明度”为15%、“角度”为90°、“距离”为4像素、“大小”为0像素,具体参数设置如图所示,效果如图所示。


用PS制作手机UI界面设计


用PS制作手机UI界面设计


(24)选择“圆角矩形 2”,然后按下Ctrl+J组合键复制一个副本图层,接着调整矩形位置,最后按照相同的方法复制更多矩形并调整,效果如图所示。


用PS制作手机UI界面设计


(25)打开光盘中的“素材文件>CH23>素材01-07.jpg”文件,然后将其拖曳至当前文件中并调整位置和大小,接着按下Ctrl+Alt+G组合键创建剪贴蒙版,效果如图所示。


用PS制作手机UI界面设计


(26)继续打开“素材01-8.jpg至素材01-12.jpg”文件,然后分别将其拖曳至当前文件中并调整位置和大小,接着分别创建剪贴蒙版,最终效果如图所示。


用PS制作手机UI界面设计


本文节选至

爱读(iread360.com)原创读物|中文版Photoshop CC白金手册

推荐阅读:查找我的iphone在哪