网页设计实例讲解.doc 37页

'网页设计实例讲解第一课：晕映的制作：第一种方法：Ctrl+t自由变换图片的大小atl+shift等比缩放q快速进入蒙板b画笔q退出蒙板反选删除第二种方法：设置羽化值为20套索工具反选清除第三种方法：添加图层蒙板b画笔黑色力度最大可隐藏不想要的灰色白色力度最小可显示想要的ctrl+alt+z逐步还原第二课艺术图案：主要用到：通道滤镜选区填充前景色alt+delete填充背景色ctrl+delete取消选区ctrl+d载入选区ctrl+点击它步骤：新建通道画矩形选框取消选择滤镜高斯模糊扭曲新增图层通道载入图层填充颜色取消选区拖入图片将通道载入的选区ctrl+enter载入图层ctrl+shift+I反选在图片图层删除隐藏通道图层第三课制作按钮：一个物体有浅色本色阴影色新建背景新建图层矩形工具shift画一个正方形编辑渐变颜色：白色本色重色按住shift45度填充颜色填充完颜色可以再用fx中的渐变叠加修改配色，取消选区，新建图层画一个比刚才小的正方形填充渐变ctrl全选垂直居中对齐图层fx里投影复制图层：拉图层到新建图层图标上7月5日制作圆锥体：新建图层画椭圆填充新建图层用钢笔画出三角形填充图层链接ctrl+e以上也可这样：新建图层画椭圆画三角形建立选区添加选区填充黑色）新建图层画出矩形渐变透视圆锥载入选区在矩形的图层反选清除隐藏圆锥图层37 制作分格效果：图片拉过来ctrlj复制一个图层视图新建参考线m单行选框工具（添加到选区）单列选框工具选择修改边界扩展填色ctrl+；清除边框Ctrl+d取消选择ctrl+j复制图层或者shift+ctrl+c全部复制粘贴四个然后ctrl+t右键透视然后按着alt调整图案平铺步骤：新建文件大小设小点编辑---定义为图案新建文件大小大点shift+delete填充图案钢笔画图好处：可调节然后添加到选区放大ctrl空格alt空格缩小Ctrl+shift+c全部复制ctrl+j复制图层制作暴风雪：图片拉过来ctrl+j复制出一个图层滤镜像素化点状化图像调整去色或设置阈值滤镜动感模糊图层：滤色金属苹果F盘Ps教程里Ctrl+enter载入选区。复制苹果图片的图层1钢笔绘制路径载入选区反选清除路径载入选区填充深灰前景色按着alt不弹出删除吗对话框7月6日制作荧光字：新建文件T载入选区新建通道填充白色取消选区高斯模糊载入选区回到图层新建图层添加渐变色添加杂色高斯模糊取消选择心得：图层的不透明度是整个图层的不透明度填充是改变颜色滤色是变亮去掉黑色两面叠加是变暗去掉白色通道的作用是储存选区制作艺术相框：拉入图片背景解锁变为图层0新建通道画矩形填充白色取消选区滤镜扭曲可以多种效果叠加载入选区回到图层根据需要变换选区反选删除37 新建图层至于最下层作为背景取消选区给新建图层填充颜色心得：选择里变换选区变换选区跟ctrl+t自由变换的区别为变化选区只是选区的变化原图片大小不变钢笔工具按着alt可随意调节大小制作卷边：拉入图像变为图层0新建图层在最下面并填充白色作为背景钢笔画路径载入选区新建图层渐变卷边自然地就是新建的图层了选择——修改——羽化取消选区钢笔绘出要删除的路径ctrl+enter载入选区del心得：载入选区新建图层此选区自然就出现在新的图层了制作手牵手文字：新建图层T写个o调整颜色为红色新建图层再写o调整为蓝色ctrl两个图层删格化文字要想删蓝色：红色载入选区在蓝色图层矩形选框（相交矩形）删除编织字：新建文件新建图层设置画布大小为很小：50*50用参考线做辅助画宽度为10的矩形填充颜色新建图层把矩形复制过来制作完编辑定义图案新建文件T写编织二字载入选区新建图层隐藏文字图层在选区里shift+del填充刚才定义的图案ctrl+d撕纸效果：1、打开素材图片，双击背景图层解锁，把背景图层复制一层，用套索工具勾出需要制作缺口的选区，选的时候要突出没有规则，有一定的小棱角。2保持选区，按字母“Q”加上快速蒙版，执行：滤镜>扭曲>波纹，数值为100，大小选择小，确定后再执行：滤镜>画笔描边>喷溅，数值自定。3、在背景副本层直接按“ctrl+x”剪切，不取消选区，然后在背景图层上新建一个图层，填充图片主体颜色，填充后不要取消选区。剪切的粘贴到一个新的图层4、按“Q”推出快速蒙版（保护图层），点通道面板，新建一个通道，得到通道1，填充白色。5、在图层的最上面新建一个图层，执行：选择>修改>扩展，数值为4，然后填充白色，回到通道面板，调护通道1的选区，回到图层面板，在白色填充图层按“Delete”删除，这样白边就出来了。6、回到背景副本层适当的加点投影效果，再在白边层加点杂色效果，玩策划那个最终效果。37 心得：套索工具的羽化值为0边缘清晰此效果中羽化值应该设为0。注意及时取消选区对图层操作而不是仅对选区操作时。扭曲波纹是对整个图层的操作要想只对选区操作必须用快速蒙板保护图层7月7日羽毛扇：新建文件背景变为图层0填充黑色新建图层新建通道自由钢笔画羽毛载入选区填白色滤镜画笔描边喷色描边涂抹工具载入选区填充白色取消选区新建图层在通道里钢笔画羽毛杆载入选区在新图层里填充灰色描边减淡杆新建图层B绒毛球合并羽毛、杆。绒毛图层为一个图层，ctrl+j复制出一个新的此图层ctrl+t把中间的点移到羽毛下方旋转ctrl+shift+alt+T重复上一步动作复制出很多旋转的羽毛心得：ctrl几个图层按ctrl+e可合并为一个图层，ctrl+shift+alt+T重复上一步动作复制出很多旋转的羽毛剪切蒙板：拉入图片变为图层套索或矩形等选区域新建图层此时选区在新图层里填充颜色拉一个图片再拉到上一个文件里成为新的图层剪切蒙板：alt+点区域和新图层的缝隙取消选区心得：必须填充颜色不然选区不能用。剪切蒙板的作用是将此图层的内容放在上一图层的区域。矢量蒙版：点钢笔工具或者矩形工具选项中的第一个形状图层，即矢量蒙板。特点：1.画出来即有前景色，转换颜色时不用载入选区，可直接填充，也可载入选区，2.可用转换点变形3.画的东西放大后不会太模糊4.遮挡一部分显示一部分7月8日画实图层渐变叠加描边描边里也有渐变心得：描边时背景不能是白的应该是透明的，选区在编辑描边里描边填充了颜色的实图在fx里描边画区域Alt+ctrl加鼠标移动可以把此区域的补到一些地方atl+ctrl+shift是垂直水平的补齐tab+f全屏百度文本框做法：新建图层画矩形选框填充白色描1像素的边内阴影取消选择新建图层画矩形框在编辑里描1的边用矩形选框删除第二个矩形的下边上边没有颜色的补齐37 心得：Shift添加到选区alt从选区减去shift+atl与选区交叉。百度页面作为图层在此图层对照着做东信网页：用矩形选框工具钢笔工具右键新建选区添加到选区或者从选区减去可以画不规则的图形减淡|加深工具可制造不规则的颜色心得：ctrl+空格：放大图片看细节然后决定怎么模仿7月11日制作微博：可自制大背景心得：用画笔添加效果画白色形状可做背景自然的图形渐变按钮：内发光文本框之间的距离一般为5px7月12日制作团购网一个网页一般由图标（50px左右）菜单广告栏目组成栏目分左中右或左右风格7月13日切片工具：按空格可来回拖动切片，把网页切割存储为web格式改为jpeg存储名字用英文格式为图像和html可看到image里已经切好的图片。7月14ps中一些工具污点修复画笔：画笔大小最好和污点大小差不多修复画笔：按着alt提取样本点在需要的地方仿制图章：跟修复画笔差不多37 修补工具：画的是需要补的区域拉到能补它的区域红眼修复工具：框着红眼即可去掉红眼只能去红色ctrl+u色相是一个色带饱和度是色彩的明亮明度是整个图片的明亮颜色是色相、饱和度和明度的综合体画笔工具中的颜色替换工具：有几个选项：取样连续：把什么颜色都替换为前景色一次取样：点击需要替换的颜色按着鼠标左键不放只替换一种颜色为前景色背景色板：把背景色替换为前景色历史记录画笔：点到哪一步用画笔画的区域会回到那一步的状态。历史记录艺术画笔：画的时候出现艺术效果用于模糊等特效后一部分需要恢复到原来的状态时用渐变工具和图层蒙版结合用擦掉一部分显示一部分海绵：降低饱和度饱和Title和Keyword和description决定了网页搜索时的排名在head中插入记录html文件头标签关键字说明刷新7月15日新建站点在DW中，站点新建站点布局里选择APDiv可绘制层在层属性里可设置其背景图像如何制作gif图片在ps中窗口动画制作完存储为web格式为gifDW中窗口时间轴插入记录图像替换文本（图像不能显示时显示）图像对象鼠标经过图像媒体图像查看器表格7月18日框架集新建实例中的页框架集每个块儿都ctrl+s保存最后全部保存用处：管理系统中上边和左边不变不刷新时用网页中不常用框架缺点是：不利于优化链接时目标改为mainframe37 表单用于登陆框等文本框隐藏域留言板复选框单选框ps很快复制出很多按钮的方法ctrl+j复制一个ctrl+t把副本向下移动ctrl+alt+shift+t重复以上动作ps怎样批处理：打开一张图片新建动作ctrl+alt+i图片大小改变小储存为jpg格式结束录制动作文件自动批处理源文件夹是要处理的包目标文件夹是缩小完的模板：创建html插入模板对象创建模板.dwt表格插入模板对象可编辑区域新建html修改模板应用模板到页编辑可编辑区域保存再新建html编辑保存在模板中链接相应的html页保存更新也保存html页在html页中预览服务器包括：节省空间使用方便只需要改变一次代码调用语句：代替head页面剪切top时要包括top表格以上所有的代码每个网页只有一个头部要把html保存时改为。Asp后缀所有的网页都是asp7月19日xml是可扩展语言网站设计的流程：1.定位网站的主题和名称2.策划书与需求说明书3.定位网站CI形象4.网站的整体风格及创意设计5.首页的设计版面布局6.网站色彩的搭配7.网站字体的设置需求静态网页用户体验程序员动态页面用户体验上传服务器后期维护37 html的结构是：head里link、base的用法head有防止被复制还有metalink：新建css页写入代码#main{border：1pxsolid颜色；}保存新建html页插入表格在表格那一行代码加入id=”main”css样式中附加样式表则出现link语句保存预览base：作用1.表明文章转自baidu2.在框架集链接到的页面中加入代替链接到子页面的目标选项不填7月20日字体：1．定义css样式（head）中在代码之间，然后调用为字体样式。下划线属性：text-decoration字间距：letter-spacing字体font-family2.class属性定义:.a{color:ffffff;font-size=78px;}调用：字体

id属性定义#a{color：#000000；font-size=23px；}调用时字体

3.选中字在链接里输入#即空链接，即出现ahref……在css样式中编辑a{color：#000；text-；}a.hover{color：#fff；text-decoration：none；}效果：此字原来的样式为a鼠标经过时变为后面的样式。4.

我们在一起

:我们在一起都为斜体shift+7可调出&*等符号H₂O下标2¹⁰上标37 图像：1.新建文件保存文件再插入站点里的图片2.标签div用法：

违反劳动法