第14章 网站页面设计教学课件 Photoshop CC 图形图像处理实战案例教程.pptx

《第14章 网站页面设计教学课件 Photoshop CC 图形图像处理实战案例教程.pptx》由会员分享，可在线阅读，更多相关《第14章 网站页面设计教学课件 Photoshop CC 图形图像处理实战案例教程.pptx（16页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第14章 网站页面设计教学课件 Photoshop CC 图形图像处理实战案例教程第14章网站页面设计图形图像处理实战案例教程（微课版）目录 Contents14.1行业知识充电14.2制作网站登录页414.1.1 网站界面设计规范网页界面主要由页头、内容主体、页脚组成。其中页头包括网站标志、导航栏等元素；内容主体包括横幅（banner）和内容相关信息；页脚包括导航、版权声明等元素514.1.2 网页常用界面类型在网页设计中，常用界面类型可分为首页、列表页、详情页、专题页、控制台以及表单页。l首页：进入网站的首张页面，是了解网站的第一步，包括产品展示图、产品介绍信息、用户登录注册入口等。l列表

2、页：对信息进行归类管理，提高关键信息的可阅读性以及可操作性。l详情页：产品信息页面。清晰的布局可以快速定位关键信息，提高效率。l专题页：针对特定主题制作的页面，该页面信息丰富，设计感十足。l控制台页：集合了数字、图形及文案等大量多样化的信息，需一目了然地将关键信息展示给用户，该页面精简、清晰，可视性高。l表单页：此页常用于登录、注册、下单、评论等，可引导用户高效完成表单的工作流程。614.1.5 网站页面设计赏析以下是不同类型的网页设计。目录 Contents14.1行业知识充电14.2制作网站登录页814.2.1 制作网页背景背景部分主要是对图像进行径向模糊、高斯模糊处理。制作网页背景效果9

3、14.2.1 制作网页背景【制作效果与思路】（1）启动Photoshop，单击“新建”按钮，在弹出的“新建文档”对话框中单击“Web”选项卡，单击“网页-大尺寸”空白文档预设，在对话框右侧设置文档名。（2）置入素材图像，调整大小。（3）按Ctrl+J组合键复制图层。（4）按Enter键完成调整，执行“滤镜模糊径向模糊”命令，在弹出的“径向模糊”对话框中设置参数。（5）调整位置。（6）按Enter键完成调整，执行“滤镜模糊高斯模糊”命令，在弹出的“高斯模糊”对话框中设置参数。1014.2.1 制作网页登录卡-1登录卡部分主要是使用圆角矩形绘制卡片状态，左边为原背景图层，右面为登录与注册信息填写部

4、分。制作网页登录卡效果1114.2.1 制作网页登录卡-1【制作效果与思路】（1）按Ctrl+组合键显示网格，选择“圆角矩形工具”，设置填充颜色为白色，半径50像素，绘制圆角矩形。（2）按Ctrl+J复制图层，按Ctrl+T组合键自由变换，按住Shift键调整圆角矩形宽度。（3）在“属性”对话框中调整圆角半径。将背景图层移动至最顶层，按Ctrl+Alt+G组合键创建剪贴蒙版，按Ctrl+T组合键自由变换，调整大小。（4）选择“横排文字工具”输入文字，在“字符”面板中设置参数。（5）选择“圆角矩形工具”，设置半径为1像素，颜色为字体颜色，绘制圆角矩形，并使其与文字居中对齐。（6）按住Alt键复制

5、文字，更改文字与字体颜色。（7）选择“圆角矩形工具”，设置填充为无，描边1像素，颜色30%灰色，半径为10像素，绘制圆角矩形，并使其与文字左对齐。1214.2.1 制作网页登录卡-1【制作效果与思路】（8）选择“横排文字工具”输入文字，字体颜色（R：132、G：132、B：132）。（9）框选圆角矩形框和文字，按住Alt键移动复制并更改文字。（10）按住Alt键移动复制圆角矩形框，填充10%灰色。（11）按Ctrl+J组合键复制图层，按Ctrl+T组合键自由变换，按住Shift键调整圆角矩形宽度。（12）更改填充颜色为白色，描边为浅青蓝。（13）选择“横排文字工具”输入文字，字体颜色为黑色。（

6、14）选择“椭圆工具”，按住Shift键绘制正圆，填充纯青蓝，按住Alt键移动复制。（15）选择“自定形状工具”，在属性栏中选择形状“箭头6”，按住Shift键绘制并填充纯青蓝，使其与两个正圆居中对齐。1314.2.1 制作网页登录卡-1【制作效果与思路】（16）选择“自定形状工具”，在属性栏中选择形状“箭头2，按住Shift键绘制并填充45%灰色，按住Alt键移动复制。（17）选择“矩形工具”，绘制矩形，填充颜色浅青蓝。（18）选择“自定形状工具”，在属性栏中选择形状“复选标记”，按住Shift键绘制并填充白色，使其与矩形垂直水平居中对齐。（19）按住Alt键移动复制“密码”，更改文字并将字

7、号更该为14号。（20）按住Alt键移动复制文字，更改文字并更改字体颜色为纯青蓝。（21）按住Alt键移动复制圆角矩形，在属性栏中更改填充参数，描边为无。（22）选择“横排文字工具”输入文字，在“字符”面板中设置参数。1414.2.1 制作网页登录卡-2本部分主要制作卡片右上角的二维码登录以及第三方登录部分，最后为登录卡片添加投影效果。制作网页登录卡效果1514.2.1 制作网页登录卡-2【制作效果与思路】（1）选择“矩形工具”按住Shift键绘制正方形，在“图层”面板中栅格化该图层。（2）选择“多边形套索工具”沿对角绘制选区，按Delete键删除选区，按Ctrl+D组合键取消选区。（3）置入二维码，按Ctrl+Alt组合键创建剪贴蒙版。（4）按住Alt键移动复制“记住账号密码”，更改文字并使其居中对齐。（5）选择“矩形工具”绘制矩形，填充文字颜色，按住Alt键水平移动复制。（6）置入素材图像，调整大小位置。（7）调整整体位置。（8）按Ctrl+隐藏网格，在“图层”面板中双击“圆角矩形1”图层，在弹出的“图层样式”对话框中添加投影图层样式。学习进步图形图像处理实战案例教程（微课版）