单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2022/12/26,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第14章 网站页面设计教学课件 Photoshop CC 图形图像处理实战案例教程,第,14,章,网站页面设计,图形图像处理实战案例教程（微课版）,目录,Contents,14.1,行业知识充电,14.2,制作网站登录页,14.1.1,网站界面设计规范,网页界面主要由页头、内容主体、页脚组成其中页头包括网站标志、导航栏等元素；内容主体包括横幅（,banner,）和内容相关信息；页脚包括导航、版权声明等元素,14.1.2,网页常用界面类型,在网页设计中，常用界面类型可分为首页、列表页、详情页、专题页、控制台以及表单页首页：进入网站的首张页面，是了解网站的第一步，包括产品展示图、产品介绍信息、用户登录注册入口等列表页：对信息进行归类管理，提高关键信息的可阅读性以及可操作性详情页：产品信息页面清晰的布局可以快速定位关键信息，提高效率专题页：针对特定主题制作的页面，该页面信息丰富，设计感十足控制台页：集合了数字、图形及文案等大量多样化的信息，需一目了然地将关键信息展示给用户，该页面精简、清晰，可视性高。
表单页：此页常用于登录、注册、下单、评论等，可引导用户高效完成表单的工作流程14.1.5,网站页面设计赏析,以下是不同类型的网页设计目录,Contents,14.1,行业知识充电,14.2,制作网站登录页,14.2.1,制作网页背景,背景部分主要是对图像进行径向模糊、高斯模糊处理制作网页背景效果,14.2.1,制作网页背景,【,制作效果与思路,】,（,1,）,启动,Photoshop,，单击“新建”按钮，在弹出的“新建文档”对话框中单击“,Web,”选项卡，单击“网页,-,大尺寸”空白文档预设，在对话框右侧设置文档名2,）,置入素材图像，调整大小3,）,按,Ctrl+J,组合键复制图层4,）,按,Enter,键完成调整，执行“滤镜,模糊,径向模糊”命令，在弹出的“径向模糊”对话框中设置参数5,）,调整位置6,）,按,Enter,键完成调整，执行“滤镜,模糊,高斯模糊”命令，在弹出的“高斯模糊”对话框中设置参数14.2.1,制作网页登录卡,-1,登录卡部分主要是使用圆角矩形绘制卡片状态，左边为原背景图层，右面为登录与注册信息填写部分制作网页登录卡效果,14.2.1,制作网页登录卡,-1,【,制作效果与思路,】,（,1,）,按,Ctrl+,组合键显示网格，选择“圆角矩形工具”，设置填充颜色为白色，半径,50,像素，绘制圆角矩形。
2,）,按,Ctrl+J,复制图层，按,Ctrl+T,组合键自由变换，按住,Shift,键调整圆角矩形宽度3,）,在“属性”对话框中调整圆角半径将背景图层移动至最顶层，按,Ctrl+Alt+G,组合键创建剪贴蒙版，按,Ctrl+T,组合键自由变换，调整大小4,）,选择“横排文字工具”输入文字，在“字符”面板中设置参数5,）,选择“圆角矩形工具”，设置半径为,1,像素，颜色为字体颜色，绘制圆角矩形，并使其与文字居中对齐6,）,按住,Alt,键复制文字，更改文字与字体颜色7,）,选择“圆角矩形工具”，设置填充为无，描边,1,像素，颜色,30%,灰色，半径为,10,像素，绘制圆角矩形，并使其与文字左对齐14.2.1,制作网页登录卡,-1,【,制作效果与思路,】,（,8,）,选择“横排文字工具”输入文字，字体颜色（,R,：,132,、,G,：,132,、,B,：,132,）9,）,框选圆角矩形框和文字，按住,Alt,键移动复制并更改文字10,）,按住,Alt,键移动复制圆角矩形框，填充,10%,灰色11,）,按,Ctrl+J,组合键复制图层，按,Ctrl+T,组合键自由变换，按住,Shift,键调整圆角矩形宽度。
12,）,更改填充颜色为白色，描边为浅青蓝13,）,选择“横排文字工具”输入文字，字体颜色为黑色14,）,选择“椭圆工具”，按住,Shift,键绘制正圆，填充纯青蓝，按住,Alt,键移动复制15,）,选择“自定形状工具”，在属性栏中选择形状“箭头,6,”，按住,Shift,键绘制并填充纯青蓝，使其与两个正圆居中对齐14.2.1,制作网页登录卡,-1,【,制作效果与思路,】,（,16,）,选择“自定形状工具”，在属性栏中选择形状“箭头,2,，按住,Shift,键绘制并填充,45%,灰色，按住,Alt,键移动复制17,）,选择“矩形工具”，绘制矩形，填充颜色浅青蓝18,）,选择“自定形状工具”，在属性栏中选择形状“复选标记”，按住,Shift,键绘制并填充白色，使其与矩形垂直水平居中对齐19,）,按住,Alt,键移动复制“密码”，更改文字并将字号更该为,14,号20,）,按住,Alt,键移动复制文字，更改文字并更改字体颜色为纯青蓝21,）,按住,Alt,键移动复制圆角矩形，在属性栏中更改填充参数，描边为无22,）,选择“横排文字工具”输入文字，在“字符”面板中设置参数14.2.1,制作网页登录卡,-2,本部分主要制作卡片右上角的二维码登录以及第三方登录部分，最后为登录卡片添加投影效果。
制作网页登录卡效果,14.2.1,制作网页登录卡,-2,【,制作效果与思路,】,（,1,）,选择“矩形工具”按住,Shift,键绘制正方形，在“图层”面板中栅格化该图层2,）,选择“多边形套索工具”沿对角绘制选区，按,Delete,键删除选区，按,Ctrl+D,组合键取消选区3,）,置入二维码，按,Ctrl+Alt,组合键创建剪贴蒙版4,）,按住,Alt,键移动复制“记住账号密码”，更改文字并使其居中对齐5,）,选择“矩形工具”绘制矩形，填充文字颜色，按住,Alt,键水平移动复制6,）,置入素材图像，调整大小位置7,）,调整整体位置8,）,按,Ctrl+,隐藏网格，在“图层”面板中双击“圆角矩形,1,”图层，在弹出的“图层样式”对话框中添加投影图层样式学习进步,图形图像处理实战案例教程（微课版）,。