10.网页设计(实训)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
第一节 网页设计展示图
第一节 网页设计Illustrator部分
在Adobe Illustrator CC软件中制作企业logo,通过对“椭圆工具”、 “剪刀工具”的使用, 绘制logo轮廓,接着选择“变量宽度配置文件 < 宽度配置文件1”,对轮廓进行变形处理,利用 “文字工具”,输入文字,最后进行排版。
绘制圆形框
删除多余路径
形状宽度配置
第一节 网页设计设计Illustrator部分
logo效果图
海峡钓鱼logo
第二节 网页设计Photoshop部分
打开Photoshop CC软件,新建一个页面,设置宽度为1366px,设置高度为1473px,名称命 名为网页设计。
第一步进行顶部设计,使用“矩形工具”绘制搜索框,利用“横排文字工具”输入文字信息, 置入所需要的logo和图标。
绘制边框
框图效果
成员1效果图
第二节 网页设计Photoshop部分
浏览按钮
最终效果图
THANKS
将广告图置入图层
广告图设计
第二节 网页设计Photoshop部分
第四步进行翻页图标设计,使用“自定义形状工具” 绘制箭头,使用“矩形工具” 绘制正方形, 对图形进行旋转设置。
绘制箭头
图形旋转
效果图
第二节 网页设计Photoshop部分
第五步进行内容,利用“横排文字工具”输入文字信息,利用“直线工具”绘制一条短横线。
内容效果图
第二节 网页设计Photoshop部分
第六步进行成员介绍设计,“矩形工具”绘制边框和“查看” 框,“椭圆工具”绘制头像区域, 置入头像,将头像图层挪动到圆形框图层上方,按下“Ctrl+Alt+G”,将头像置入到圆形框中,利 用“横排文字工具”输入文字信息。最后,利用“矩形工具”和“自定形状工具”绘制浏览按钮。
绘制搜索框
填充顶部信息
第二节 网页设计Photoshop部分
第二步进行菜单栏设计,使用“矩形工具” 和“直线工具”绘制菜单栏,“横排文字工具”输 入文字信息。
绘制菜单栏Байду номын сангаас
添加菜单栏文字信息
第二节 网页设计Photoshop部分
第三步进行广告图设计,使用“矩形工具” 绘制广告位,置入广告图,将图片图层挪动到灰色 长方形图层上方,按下“Ctrl+Alt+G”,将图片置入到灰色长方形图层中,“横排文字工具”输入 文字信息。
第九章、网页设计
实训案例解析
本实训内容是设计制作网页,随着互联网时代的到来,企业纷纷建立自己的互联网门户网 站,网站则是由一个个网页组成的,一个优质的网站首页,会在视觉上吸引客户,从而助力企 业的网络营销。
本实训主要通过应用Illustrator和Photoshop两款软件进行设计和制作。在Illustrator中, 绘制企业logo。在Photoshop中,进行网页设计,使用文本工具进行文字排版,使用矩形工具 等进行图形装饰。