《电脑美术》第17章网页设计与ImageReady的应用
更新时间:2023-06-08 04:43:01 阅读量: 实用文档 文档下载
- 电脑美术怎么画推荐度:
- 相关推荐
第17章 网页设计与ImageReady的应用
17.1 利用Photoshop设计网页 17.2 ImageReady快速入门 17.3 网页banner动画制作
第17章 网页设计与ImageReady的应用
本章目标网页设计已经逐渐成为一个热门的话题,而 Photoshop又是设计页面的重要工具。通过前面的学习, 相信大家利用Photoshop来制作网页的页面已经不是什 么问题了,本章的主要目标是讲解如何切片和优化网 页图片,以及如何制作Web画廊和GIF动画等。
17.1 利用Photoshop制作个人主页
制作个人主页制作一个介绍图形图像的个人主页。在实例中,主色调选用了蓝 色,蓝色能给人一种平静、理智、永恒、博大的感觉。同时,运用白 色、蓝色和其它颜色的搭配,使网页显得典雅、温馨。
17.1 利用Photoshop制作个人主页
设计标题栏
创建新的图像文件 启动Photoshop,执行【文件】|【新建】命令,创建一个新的 图像文件,如图所示。设置完后,单击【好】按钮。
创建参考线
执行【图层】|【新建】|【图层组】命令,弹出【新图层组】 对话框,设置【名称】为“title”
17.1 利用Photoshop制作个人主页
设计标题栏新增【图层1】,选择工具箱中的 【矩形选框工具】,在【选项】栏 中设置【样式】为【固定大小】, 【宽度】为“770像素”,【高度】 为“100像素”,在【图层1】中 创建一个选区,如图所示。 创建一个矩形选区
按Ctrl+R键,打开标尺,用鼠标从 横向标尺上拉出一条参考线,如图 所示。 创建参考线6
17.1 利用Photoshop制作个人主页
设计标题栏制作背景图案 按Ctrl+R键,隐藏标尺,设置前景 色为白色,按Alt+Delete键,用前 景色填充选区。按Ctrl+D键,取消 选择,在【路径】面板中新增【路 径1】,用【钢笔工具】绘制出路 径,如图所示。
绘制出路径1
在【路径】面板中新增【路径2】, 用【钢笔工具】绘制出路径,如 图。
绘制出路径2
17.1 利用Photoshop制作个人主页
设计标题栏在【图层】面板中,新增【图层2】。 按住Ctrl键,单击【路径】面板中的 【路径1】,将路径转化为选区。选 择工具箱中的【渐变工具】,在【选 项】栏中单击【点按可编辑渐变】按 钮,弹出【渐变编辑器】对话框,在 渐变色条下,设置左端色标的RGB值 为(235,241,246),右端色标的 RGB值为(135,185,248),其它 参数设置如图所示。
设置渐变色
设置完后,单击【好】按钮。按住 Shift键,用鼠标从选区的顶端拖拉到 底端,创建渐变,按Ctrl+D键,取消 选区,如图所示。
从上到下的渐变效果8
17.1 利用Photoshop制作个人主页
设计标题栏新增【图层3】,按住Ctrl键,在【路 径】面板中
单击【路径2】,将路径转 变为选区。选择工具箱中的【渐变工 具】,在【选项】栏中单击【点按可编 辑渐变】按钮,打开【渐变编辑器】对 话框,在渐变色条下,保持左端色标的 颜色不变,设置右端色标颜色的RGB 渐变填充效果 值为(170,204,248),单击【好】 按钮。 按住Shift键,用鼠标从选区的上端拖拉 到选区的下端,创建渐变效果。在【图 设置【减淡工具】的参数 层】面板中,将【图层3】调整到【图 层2】的下面,按Ctrl+D键,取消选择, 效果如图 选择工具箱中的【减淡工具】,在工具 【选项】栏中,设置参数如图所示。 用鼠标涂抹过渡不自然的区域,润饰图 像,效果如图所示。
润饰图像后的效果9
17.1 利用Photoshop制作个人主页
设计标题栏制作LOGO文字 选择工具箱中的【横排文字工具】, 在【选项】栏中设置文字颜色为黑 色,输入文字,如图所示。 输入“图像爱好者天堂”
执行【图层】|【图层样式】| 【渐变叠加】命令,单击【点按可 编辑渐变】按钮,打开【渐变编辑 器】对话框,设置左端色标的RGB 值为(20,91,210),右端色标 的RGB值为(255,255,255), 如图所示。
设置渐变色10
17.1 利用Photoshop制作个人主页
设计标题栏选择【描边】选项,设置【大小】 为“2像素”,【颜色】的RGB值 为(187,214,247),其它参数 设置如图所示。 设置描边参数
设置完后,单击【好】,效果如图 所示。
设置图层样式后的效果
17.1 利用Photoshop制作个人主页
设计标题栏
单击【横排文字工具】,输入网址,如图所示。
输入网址
制作图标
打开“网页图标.psd”文件,如图所示。
打开“网页图标.psd”
将打开的图像复制到“个人主页.psd”文件中,在【图层】面板中自动创建了【图层4】。在图层组【title】中, 把【图层4】调整到【图层2】的上方,调整图形位置,效果如图所示。
导入的图片效果12
17.1 利用Photoshop制作个人主页
设计标题栏
在工具箱中选择【横排文字工具】,输入文字,设置文字颜色为白色,如图所示。
制作导航栏
输入文字
在【图层】面板中新增【图层5】,选择工具箱中的【矩形选框工具】,在【选项】栏中设置【样式】为 【固定大小】,【宽度】为“770像素”,【高度】为“25像素”,在参考线顶部创建一个选区,如图所示。
创建一个选区
17.1 利用Photoshop制作个人主页
设计标题栏
执行【视图】|【显示】|【参考线】命令,去掉【参考线】命令右边的小勾,隐藏参考线。选择工具箱中 的【渐变工具】,在【选项】栏上单击【点按可编辑渐变】按钮,打
开【渐变编辑器】对话框,在渐变条下 方,添加两个渐变色标,分别设置它们的【位置】为“45%”和“80%”,从左到右,分别设置四个色标的 RGB值为(123,158,186)、(198,220,233)、(225,241,255)、(123,150,169),如图所 示。
设置编辑色
设置完后,单击【好】按钮。 按住Shift键,用鼠标从选区的上端拖到下端,对选区进行渐变填充,按Ctrl+D键,取消选择,效果如图所示。
对选区进行渐变填充14
17.1 利用Photoshop制作个人主页
设计标题栏
选择【横排文字工具】,输入栏目名称,如图所示。
输入栏目名称
执行【图层】|【图层样式】|【描边】命令,在弹出的【图层样式】对话框中设置【大小】为“1像素”, 【颜色】为白色,如图所示。
设置描边参数15
17.1 利用Photoshop制作个人主页
设计标题栏
设置完后,单击【好】按钮。 在【图层】面板中选择【图层5】,选择工具箱中的【矩形选框工具】,在【选项】栏中设置【样式】为 【固定大小】,【宽度】为“2像素”,【高度】为“18像素”,设置完成后创建一个选区,如图所示。
创建一个选区
执行【图像】|【调整】|【色阶】命令,在弹出的【色阶】对话框中设置参数如图所示。
设置色阶参数
17.1 利用Photoshop制作个人主页
设计标题栏
设置完后,单击【好】按钮。 执行【滤镜】|【模糊】|【高斯模糊】命令,在弹出的【高斯模糊】对话框中设置【半径】为“1.0像 素”,如图所示。
设置高斯模糊参数
单击【好】,按Ctrl+D键,取消选择,效果如图所示。
设置高斯模糊后的效果17
17.1 利用Photoshop制作个人主页
设计标题栏
用同样的方法,制作出其它分隔条,如图所示。
分隔条效果
17.1 利用Photoshop制作个人主页
设计页面
创建新图层组
在【图层】面板中,单击图层组【title】左边的小三角箭头,隐藏图层组中的子图层,执行【图层】|【新 建】|【图层组】命令,在【新图层组】对话框中,输入【名称】为“body”,单击【好】按钮。 在图层组【body】中,新增【图层6】。选择工具箱中的【矩形选框工具】,在【选项】栏中设置【样式】 为【固定大小】,【宽度】为“770像素”,【高度】为“420像素”,创建一个选区,如图所示。
创建一个选区
17.1 利用Photoshop制作个人主页
设计页面
执行【视图】|【显示】|【参考线】命令,显示参考线,用上面学过的方法,在选区的顶部和底部创建两 条参考线。 在工具箱中设置前景色为白色,按Alt+Delete键,用前景色填充选区。按Ctrl+D键,取消选择,
效果如图 11.32所示。
创建参考线并填充选区
制作分隔线
接下来制作分隔线。在【图层】面板中单击图层组【title】和图层【背景】左面的眼睛图标,将它们隐藏起 来。 在【图层】面板中,选择图层组【body】中的【图层6】,按下【锁定】中的【锁定透明像素】按钮,如图 所示。
17.1 利用Photoshop制作个人主页
设计页面
创建两条垂直的参考线,如图所示。 在工具箱中选择【单列选框工具】,在左边的垂直参考线上单击,创建一个单列选区,如图所示。
创建两条垂直的参考线
在参考线上创建单列选区
在【图层】面板上新增【图层7】,在工具箱中设置前景色的RGB值为(0,72,101),按Alt+Delete键, 用前景色填充选区。 用同样的方法,在右侧的参考线上创建单列选区,再填充前景色,删除透明区域中的填充色,效果如图所示。 实际操作中,由于参考线的遮挡,看不到单列填充效果,按Ctrl+H键,可将参考线隐藏起来,看完效果后, 再按一下Ctrl+H键,显示出参考线。 创建一条水平参考线,选择工具箱中的【单行选框工具】,在水平参考线上创建一个水平单列选区,按 Alt+Delete键,在选区中填充前景色,如图所示。
填充单列选区后的效果
制作出单行选区并填充21
正在阅读:
《电脑美术》第17章网页设计与ImageReady的应用06-08
挡土墙东区军缆保护施工方案02-28
农村住房安全保障工作亮点及建议12-13
C15079课后测验100分01-18
CH1-计算机基础知识-708-17
国家产业机构调整目录中“限制类、淘汰类”05-24
如何分解工作目标(时代光华 课后测试)06-05
临沂教师招聘考试模拟题05-24
2019年扫黑除恶专项斗争工作总结12-13
- 教学能力大赛决赛获奖-教学实施报告-(完整图文版)
- 互联网+数据中心行业分析报告
- 2017上海杨浦区高三一模数学试题及答案
- 招商部差旅接待管理制度(4-25)
- 学生游玩安全注意事项
- 学生信息管理系统(文档模板供参考)
- 叉车门架有限元分析及系统设计
- 2014帮助残疾人志愿者服务情况记录
- 叶绿体中色素的提取和分离实验
- 中国食物成分表2020年最新权威完整改进版
- 推动国土资源领域生态文明建设
- 给水管道冲洗和消毒记录
- 计算机软件专业自我评价
- 高中数学必修1-5知识点归纳
- 2018-2022年中国第五代移动通信技术(5G)产业深度分析及发展前景研究报告发展趋势(目录)
- 生产车间巡查制度
- 2018版中国光热发电行业深度研究报告目录
- (通用)2019年中考数学总复习 第一章 第四节 数的开方与二次根式课件
- 2017_2018学年高中语文第二单元第4课说数课件粤教版
- 上市新药Lumateperone(卢美哌隆)合成检索总结报告
- 电脑美术
- ImageReady
- 网页设计
- 应用
- 2015-2016学年山东省枣庄市第三中学高二下学期学情调查数学(文)试题(word版)
- 2018年天然气发电行业现状及发展趋势分析 (目录)
- 2014年注册电气工程师(供配电)
- 4pF贴片电容0603CG4R0C500NT选型表
- 景墙铝塑板及不锈钢浮雕施工方案
- LX-4108T-010AC中文资料
- 中国宏观经济政策再思考(李扬)
- 银行全国地区代码表
- 2013年校园市场综合开发营销策划书
- 秦岭终南山特长公路隧道施工技术研究_pdf
- PLC可编程控制器的结构和基本工作原理
- 2017最新电大计算机应用基础形考PowerPoint2010答案
- 基层党组织现状调研调查问卷3
- 什么是单元主题教学
- 湖北宜都将建农药及医药中间体项目
- 中国共产党章程基本知识学习测试题
- FIDIC合同下的国际工程索赔管理_非洲某公路项目索赔案例实证分析
- 气候变化损害的国家责任
- 2种内衣损害女性健康
- 促排卵 补雌激素方子文本文档