photoshop学习第9章 网页设计与ImageReady应用.pptVIP

第9章网页设计与ImageReady的应用;教学目标; 重点与难点;9.1 利用Photoshop制作个人主页;9.1.1?设计标题栏 创建新的图像文件 启动Photoshop，执行【文件】｜【新建】命令，创建一个新的图像文件，如图所示。设置完后，单击【好】按钮。 创建参考线 执行【图层】｜【新建】｜【图层组】命令，弹出【新图层组】对话框，设置【名称】为“title”，如图所示。 ;单击【好】按钮。在【图层】面板中，新增【图层1】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“770像素”，【高度】为“100像素”，在【图层1】中创建一个选区，如图所示。 按Ctrl+R键，打开标尺，用鼠标从横向标尺上拉出一条参考线，如图所示。 ;制作背景图案 按Ctrl+R键，隐藏标尺，设置前景色为白色，按Alt+Delete键，用前景色填充选区。按Ctrl+D键，取消选择，在【路径】面板中新增【路径1】，用【钢笔工具】绘制出路径，如图所示。 在【路径】面板中新增【路径2】，用【钢笔工具】绘制出路径，如图 。;在【图层】面板中，新增【图层2】。按住Ctrl键，单击【路径】面板中的【路径1】，将路径转化为选区。选择工具箱中的【渐变工具】，在【选项】栏中单击【点按可编辑渐变】按钮，弹出【渐变编辑器】对话框，在渐变色条下，设置左端色标的RGB值为（235，241，246），右端色标的RGB值为（135，185，248），其它参数设置如图所示。 设置完后，单击【好】按钮。按住Shift键，用鼠标从选区的顶端拖拉到底端，创建渐变，按Ctrl+D键，取消选区，如图所示。 ;新增【图层3】，按住Ctrl键，在【路径】面板中单击【路径2】，将路径转变为选区。选择工具箱中的【渐变工具】，在【选项】栏中单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在渐变色条下，保持左端色标的颜色不变，设置右端色标颜色的RGB值为（170，204，248），单击【好】按钮。 按住Shift键，用鼠标从选区的上端拖拉到选区的下端，创建渐变效果。在【图层】面板中，将【图层3】调整到【图层2】的下面，按Ctrl+D键，取消选择，效果如图 选择工具箱中的【减淡工具】，在工具【选项】栏中，设置参数如图所示。 用鼠标涂抹过渡不自然的区域，润饰图像，效果如图所示。 ;制作LOGO文字 选择工具箱中的【横排文字工具】，在【选项】栏中设置文字颜色为黑色，输入文字，如图所示。 执行【图层】｜【图层样式】｜【渐变叠加】命令，单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，设置左端色标的RGB值为（20，91，210），右端色标的RGB值为（255，255，255），如图所示。 ;选择【描边】选项，设置【大小】为“2像素”，【颜色】的RGB值为（187，214，247），其它参数设置如图所示。 设置完后，单击【好】，效果如图所示。 ;单击【横排文字工具】，输入网址，如图所示。 制作图标 打开“网页图标.psd”文件，如图所示。 将打开的图像复制到“个人主页.psd”文件中，在【图层】面板中自动创建了【图层4】。在图层组【title】中，把【图层4】调整到【图层2】的上方，调整图形位置，效果如图所示。 ;在工具箱中选择【横排文字工具】，输入文字，设置文字颜色为白色，如图所示。 制作导航栏 在【图层】面板中新增【图层5】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“770像素”，【高度】为“25像素”，在参考线顶部创建一个选区，如图所示。 ;执行【视图】｜【显示】｜【参考线】命令，去掉【参考线】命令右边的小勾，隐藏参考线。选择工具箱中的【渐变工具】，在【选项】栏上单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在渐变条下方，添加两个渐变色标，分别设置它们的【位置】为“45%”和“80%”，从左到右，分别设置四个色标的RGB值为（123，158，186）、（198，220，233）、（225，241，255）、（123，150，169），如图所示。 设置完后，单击【好】按钮。 按住Shift键，用鼠标从选区的上端拖到下端，对选区进行渐变填充，按Ctrl+D键，取消选择，效果如图所示。 ;选择【横排文字工具】，输入栏目名称，如图所示。 执行【图层】｜【图层样式】｜【描边】命令，在弹出的【图层样式】对话框中设置【大小】为“1像素”，【颜色】为白色，如图所示。 ;设置完后，单击【好】按钮。 在【图层】面板中选择【图层5】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“2像素”，【高度】为“18像素”，设置完成后创建一个选区，如图所示。 执行