用PS制作网页常用水晶按钮
水晶按钮最终效果图
1、打开PS，新建一个文件，在工具箱中选择圆角矩形工具，如下图所示设置：
2、新建一个图层后，在画布上拉出一个长方形，就得到这样的结果。（为了更好的给大家讲解，这个图放大了400%显示）
如果大家得到这样的结果。
就需要将“对齐像素”的选项给勾上。
3、为这个图层添加图层样式。
得到结果如图所示，顺便在样式调板中存储着这个样式。
4、使用矩形选框工具，绘制出一个矩形的选区。
5、新建图层后，填充黑色到白色的径向渐变。
6、并将该图层的混合模式改为：柔光，不透明度：60%。
7、新建图层，再绘制出一个矩形选区。
8、填充成白色。
9、并将该图层的混合模式改为：线性减淡，不透明度：30%。
10、使用文字工具写上要的文字，注意在这里要将字体的边缘设置为：无。
11、之前我们创建过一个样式，还记得吗，给文字应用这个样式就可以了。后面的工作就是换换颜色，改改文字就可以了。
在这篇网页设计教程里，你将学习制作可以用于整站的一个既优雅又专业的网页，我们将用到Photoshop软件里的一些基本的工具，比如：笔刷和图层等。而且在教程下方包括了此网页的HTML/CSS/JAVASCRIPT模板和素材，你可以下载用作学习或使用都可以。 下面先预览一下本教程的最终效果： 教程开始： 第一步：新建文件打开PS软件，点击文件-新建命令或Ctrl+N键新建文件，设置宽度1020px，高度1180px，背景默认为白色，点击确定即可; 第二步：创建导航背景我们将从header开始我们的设计，所以我们先用矩形选框工具，在画布上新建一个矩形选框，如图所示，填充颜色#393939;
然后设置图层的混合模式为叠加，不透明度设为23%; 第四步：创建网页logo和name对于教程中的logo，我使用了Georgia字体并设计为粗体并倾斜，设置‘SIX’的颜色为#FFFFFF，‘STUDIOS’的颜色为#F7E5C4，logo旁边的图片用的是素材中的boxupload32图片。样式如图所示： 第五步：加入导航链接活动链接的颜色我用的是#DBD1BE，普通链接用的颜色为：#ABAAAA。 为了使活动链接显示的更突出，在其后便添加一个矩形框。选择圆角矩形工具，设置半径为5px，前景色为#464646,然后在活动链接处添加矩形背景，样式如图： 给矩形背景图层添加内阴影和描边效果，具体设置参数如图：
第六步：给特色区域添加背景在我们网页布局的顶部，需要有一块特色区域，这块区域通过播放幻灯片将网站的特色内容展示给来访者。这块区域也可以同时包括对网站的介绍等，第一步我们需要做的就是利用矩形选框工具选中这块区域，然后在此矩形选区中填充颜色#D3CAB8。 然后你需要下载
彩色总平面制作步骤 1.在CAD中输出eps图形图线 2.栅格化eps文件（栅格化eps格式，分辨率 得到透明背景线框图像。 3.在总平面图下方新建图层，并填充为白色 执行：图层→新建→图层背景 (将填充图层转化为背景) ctrl+s保存文件 4.ctrl+o打开。文字eps和建筑eps文件 以相同参数对文字eps与建筑eps进行栅格化处理 5.将3个文件进行合并 Ctrl+A全选→ctrl+c复制 回到总平面 ctrl+shift+V进行原位粘贴 重命名图层，文字，建筑 6.裁剪工具将图像进行裁剪（节约磁盘空间） 7.划分层次。路面，绿化区，建筑 ⑴检查线稿是否闭合，魔棒工具，设置容差为， 单击路面区域进行闭合处理 新建图层→命名封闭直线，单击直线工具，设置前景色为黑色，用画 笔工具，直线粗细为 8.魔棒单击路面，容差 对路面部分进行选择（用快速蒙版进行选区查看） 9.路面选区建立完成之后→选择→存储选区→名称（马路）
新建图层，命名为马路，设置前景色为 Alt+delete，快速填充 10.使用用样方法划分绿化，铺装，水面区域，以色块进行划分 11.对图层进行分图→⑴铺装⑵色块（水面，建筑色块，草地，马路） ⑶线稿 12.添加图例。种植新建图层（主干道树） 主干道→次干道 选择图例ctrl+c复制。Ctrl+v粘贴 种植主干道植物图例 对图例进行同图层复制 alt+鼠标左键 将主干道都种上图例 13.设置投影→动作设置投影→图例所在图层→主干道树→窗口→新建动作→命名为：制作影子→单击记录 回到图层面板ctrl+J 创建主干道副本 ctrl+总括号键副本图层下移 Ctrl+M调整曲线命令把整张图例调至黑色，根据投影方向按方向键，设置不透明度为80﹪ 单击动作面板停止按钮（可用于其他图层影子制作） 14.铺装制作 ⑴用软件自带图案进行铺装制作 选择铺装图→铺装1色块图层 按ctrl单击图层缩览图，将其载入选区
P S五种水晶按钮制作教 程集合 The final revision was on November 23, 2020
圆形水晶按钮制作教程 1.新建文件，宽、高都为5，单位cm，分辨率200，模式为RGB，白色背景。 2.用圆形选框工具画出圆形选框，在选区内点鼠标右键，选“通过拷贝的图层”项（图层1）。 3.新建图层（图层2），使用渐变工具，设置成“前景色到透明渐变”，前景色设置为R： 255，拉出如图渐变。 4.新建图层（图层3），在新图层上用喷笔画出阴影（也可填充颜色，然后用椭圆选区羽化后删 除，但是那样效果没有用喷笔来得自然好看，小魔星就不在此赘述：P） 5.新建图层（图层4），在新图层上画出椭圆选区。 6.在图层4上使用渐变工具，前景色设置为R：255；G：255；B：255。 7.新建图层（图层5），使用钢笔工具任意画一个图形。 8.在路径工作区中点选“将路径作为选区载入”，将钢笔路径转换成选区。 9.填充前景色。 10.将图层5拉至图层4之下。 11.图层属性设置为“叠加”。 12.把工作区换到图层1（通过拷贝的白色圆形），双击图层，跳出图层样式框，参数设置如 图。 13.现在就是大功告成拉~~哈哈哈~~~如果想再做其他颜色的水晶按钮不必再一个个重复做~只要 点ctrl+U调整色相就OK了：） 金属边框按钮
一.背景的制作: 1.打开photoshop 新建一个400*400的文件最好是"RGB"颜色用黑白圆形渐变绘制如<图2>所示渐变 <图1>? <图2> 2.选择滤镜 > 杂色> 添加杂色数值如 <图3> 所示? <图3> 3.选择滤镜 > 艺术效果 > 底纹效果数值如 <图4> 所示? <图4> 背景效果图如图5(第一步大功告成): <图5> 一.水晶部分的制作: 1.新建一个图层命名为“水晶--底1”，按 Ctrl + R 调出标尺拉两条如图所示参照线，以参照线的交点为圆心，用椭圆选取工具按住 ALT + Shift 绘制图6 所示的正圆。 <图6> 2.按Ctrl + ’ 隐藏参照线，选择渐变工具在“水晶--底1”这层绘制渐变，渐变颜色：黑白渐变，渐变方式：放射性渐变，渐变路线：由选区的左上角按住 Shift 向右下方渐变如图7 <图7> 3.按 Ctrl + D 取消选区渐变的效果如图8 <图8>
用PS制作服装面料的技巧与方法 2009-05-06 14:02 迷彩服表面图案的做法 1，新建800*800 RGB文件，前景和背景颜色设为黑白。在背景层上运用滤镜/渲染/云彩。转到通道面板，复制任一通道，此次复制的是蓝色通道，用曲线调整，参数如图。 2，回到图层面板，新建图层1，载入刚才做好的蓝副本的选区，反选，填充黑色。 3，在背景层上，再次运用云彩滤镜。隐藏图层1 转到通道面板，再次复制蓝色通道，用曲线调整，参数如图。注意配合铅笔曲线工具，可以按住shift 来画直线。 4，回到图层面板，将背景层填充白色。 新建图层2，选择/载入选区,载入刚才做好的蓝副本2的选区，直接填充黑色。然后在图层1中，用橡皮修饰比较大的黑色色块。 5，滤镜/画笔描边/强化边缘，参数(1, 23, 10)，消除了杂点和小色块。 6， ctrl+U 勾选上色 迷彩面料2 1. 新建文件 2. 前景色为RGB（57，108，28），填充全图。 3. 执行滤镜/杂色/加入杂色，设置数量为50，高斯分布，勾选单色 4. 执行滤镜/像素化/晶格化命令，设置单元格大小。 5. 滤镜/杂色/中间值 图像/调整/色相饱和度，色相59，饱和度44，勾选上色。 面料制作：棱织面料 1. 毛呢面料 1) 新建10*10cm，分辨率为72像素/厘米的RGB模式文件，填充黑色。 2) 执行滤镜/杂色/加入杂色，数量400，高斯分布，勾选单色。 3) 执行滤镜/模糊/动态模糊，45度，距离8dpi。 4) 执行滤镜/模糊/动态模糊，-45度，距离8dpi。 5) 执行滤镜/风格化/风，方法飓风，从右。 6) 执行图像/调整/色阶/自动。 7) 执行图像/调整/变化。 8) 执行Ctrl+I反向。 2. 色织布面料 1) 新建10*10cm，分辨率为72像素/厘米的RGB模式文件，填充蓝色。 2) 执行滤镜/杂色/加入杂色，数量300，高斯分布，不勾选单色。 3) 执行滤镜/其它/位移，水平0像素右移，垂直1000像素下移，重复边缘像素。 4) 复制背景图层，生成图层1，执行编辑/变换/顺时针旋转90度。 5) 图层/透明度调为50。 6) 合并所有图层。
PS网页设计与制作
PS网页设计与制作（主页） 一、教材分析 设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop 设计网页。本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。 二、学情分析 认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。 知识技能水平： 在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理
解为何这么做，以及怎么做。 三、教学目标 （一）、知识与技能 1.了解主页大小，掌握设置主页大小的方法。 2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。 3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。 （二）、过程与方法 1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。 2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。 （三）、情感态度与价值观 提倡学生多观察、多动手实践，不怕失败，只怕不动。在信息技术课堂上勇于探索实践，通
过作品展示自己。 四、教学重点 主页大小设定、标题和图片的大小及位置、导航栏制作 五、教学难点 主页中各对象的大小及位置 六、教学方法 任务驱动、分层教学、同伴互助 七、教学准备 极域多媒体网络教室、Photoshop cs5、学案 八、教学过程
Photoshop详解制作漂亮的绿色首页模板，第一，对于一些做网站的爱好者，下面真的是个好例子;第二，设计出来的效果也很不错;第三，内容齐全，很值的学习。 在这篇教程中，你将学会如何在photoshop中制作一个漂亮的绿色的干净的网页效果图。你将学会一些很时髦的设计技巧，像是如何制作3D丝带，或者是如何设置看上去很专业的渐变色。这是教程的第一部分。 最终效果图 看一看我们最终的效果图吧，看上去还不错:> 在photoshop中新建文档
1在photoshop中新建一个文档，尺寸为980px × 830px. 2 如果你在photoshop软件界面中，没有看到在画布的周围看到标尺，点击试图>标尺（Ctrl + R）可以显示标尺。 3 在画布的四个边，分别拖拽四条标尺线。在这四条线中间，我们将绘制我们的页面。 创建页面背景
4 选择圆角矩形工具(U), 设置圆角半径为10px，设置颜色为#E0E0AC, 在你的整个画布中拖拽一个圆角矩形。设置这个图层名字为“bg“. 5 好了，现在，我们将扩大我们的画布。首先，缩小我们的画布视图(ctrl+-)，然后点击图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。
6 再一次选择图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。
7 在图层面板中点击背景图层，设置前景色为#6C821C，用油漆桶(G)填充背景。
8 在背景图层上面创建一个新图层，命名为”gradient“. 9 在工具栏中选择渐变工具(G)，从画布头部开始向下拖拽出一个从白色到黑色的渐变。 10 设置该图层渲染模式为颜色加深,然后设置图层图层透明度为10%.
圆形水晶按钮制作教程 1.新建文件，宽、高都为5，单位cm，分辨率200，模式为RGB，白色背景。 2.用圆形选框工具画出圆形选框，在选区内点鼠标右键，选“通过拷贝的图层”项（图层1）。 3.新建图层（图层2），使用渐变工具，设置成“前景色到透明渐变”，前景色设置为R：255， 拉出如图渐变。 4.新建图层（图层3），在新图层上用喷笔画出阴影（也可填充颜色，然后用椭圆选区羽化后删 除，但是那样效果没有用喷笔来得自然好看，小魔星就不在此赘述：P） 5.新建图层（图层4），在新图层上画出椭圆选区。 6.在图层4上使用渐变工具，前景色设置为R：255；G：255；B：255。 7.新建图层（图层5），使用钢笔工具任意画一个图形。 8.在路径工作区中点选“将路径作为选区载入”，将钢笔路径转换成选区。 9.填充前景色。 10.将图层5拉至图层4之下。 11.图层属性设置为“叠加”。 12.把工作区换到图层1（通过拷贝的白色圆形），双击图层，跳出图层样式框，参数设置如图。 13.现在就是大功告成拉~~哈哈哈~~~如果想再做其他颜色的水晶按钮不必再一个个重复做~只要 点ctrl+U调整色相就OK了：） 金属边框按钮 一.背景的制作:
1.打开photoshop 新建一个400*400的文件最好是"RGB"颜色 用黑白圆形渐变绘制如<图2>所示渐变? <图1>? <图2> 2.选择滤镜> 杂色> 添加杂色数值如<图3> 所示?? <图3> 3.选择滤镜> 艺术效果> 底纹效果数值如<图4> 所示? <图4> 背景效果图如图5(第一步大功告成):? <图5> 一.水晶部分的制作: 1.新建一个图层命名为“水晶--底1”，按Ctrl + R 调出标尺拉两条如图所示参照线，以参照线的交点为圆心，用椭圆选取工具按住ALT + Shift 绘制图6 所示的正圆。? <图6> 2.按Ctrl + ’ 隐藏参照线，选择渐变工具在“水晶--底1”这层绘制渐变，渐变颜色：黑白渐变，渐变方式：放射性渐变，渐变路线：由选区的左上角按住Shift 向右下方渐变如图7? <图7> 3.按Ctrl + D 取消选区渐变的效果如图8?
实训项目二 Photoshop制作网站首页第1讲制作首页的主体部分 课程总览 在本课程中，朋友们将学习到以下内容： ?? 如何通过Photoshop CS3 进行网站首页的版面设计?? 各种网页版面元素的设计技巧和方法 ?? 如何进行网页的切图以及切片的属性设置 ?? 如何创建与Flash 整合的FLV 视频
?? 在Dreamweaver CS3 中使用“Spry 选项卡”构件 ?? Photoshop、Flash、Dreamweaver 的协同工作 第1 讲制作首页的主体部分 本文以“石桥花园”的网站首页为例，来演示页面创作的整个过程。其实“石桥花园”是不存在的，笔者虚构出来也并非只为完成本例，我一直向往生活在幽静、闲雅之所，虽然“石桥花园”离我的初衷有很多差异，但也多少能表达我的一些想法吧。 书归正传，早先的网页页面设计一般是以Dreamweaver 为中心，由Photoshop 或Flash 等软件来提供各种素材，如图片、动画、文字等。自从Photoshop 出现了“切图”等专为网页设计所定制的功能后，设计的中心已慢慢转向了Photoshop。因为Photoshop 本身以图像为基础的特性，决定了他能对版面施以更精确的控制，使网页的页面能够更加灵活和生动的布局，这几乎完全解放了网页设计师的创作灵感，不再受方方正正的网页表格所约束。现在我们要制作的是“石桥花园”首页的主体部分，主体部分包括标题、主展示图片和导航条。网页教学网 1. 打开Photoshop CS3, 执行菜单“文件> 新建”。在新建对话框中设置名称为“石桥花园”，宽度为“777”、高度为“800”，这个数字并不“官方”，只是我在平时工作当中测试出来的而已。对于网页来说，一般只用于屏幕显示，所以分辨率为“72”、颜色模式为“RGB 颜色”，其它参数保持默认。 2. 按下Ctrl+A 全选页面，执行菜单“编辑> 填充”将页面填为纯黑色。在工具箱中选择矢量的“矩形工具”，绘制一个如图1-1-1 所示长方形A。然后使用白色的“直接选择工具”将该矢量形状扭曲成如图1-1-1 中B 所示外观，该形状的十六进制颜色值为“#246b34”，一种厚重的深绿色。
如何用photoshop输出html网页(psd网页模板) 2010-11-03 14:52 在修改好相应的文字与图象之后，我们就将PSD文件输出(X)HTML文件。首先得先对PSD文件做切片，有两种方法： ①使用工具栏上的“切片工具”， 然后在图象上划出一块一块的区域。 ②使用基于参考线的切片，按ctrl+R调出标尺栏，
把鼠标移动到标尺上，按住鼠标左键，移动到图象上，将会看到一条绿色的参考线，如图 将参考线；排好，然后点一下工具栏上的切片工具图表，然后点上面 选项栏里的“基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了。
接下来就可以输出了: ①依次选择菜单栏上的“文件”→“存储为Web所用格式”→“存储”。 ②接下来就会弹出一个“将优化结果存储为”的窗口，如图 在“保存类型”处有个下拉列框可以选择，因为我们要存储为网页的格式，所以选择“HTML 和图象(* html)”，再选择“保存”就可以输出一个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。
③如果我们需要输出“div+css的网页”我们还可以这么做：在“设置”处的下拉列框，选择“其他” 就会弹出一个“输出设置”的窗口 在第2个下拉列框处选择“切片”
选择“生成CSS” 单击“好”→“保存”就可以输出一个目前流行的“div+css”的HTML网页。 其实标准的网制作完成的工作实际是：psd to html，一般情况下，我们会拿到美工的psd,这时候不同的人会有不同的做法： 1.打开fireworks将图片切割导出为html。 2.直接在dreamweaver之类的工具去拖拉布局，导入相关的图片,flash资源。 3.先在ps中完成切图后，在文本编辑器中看着效果图一步步的制作。 以上是大多被采用的方法，但都不好： 第一种方法最为不好，这样的代码根本不具维护性和可读性。 第二种方法也不好，代码难免会有冗余，做出来的东西基本需要排查一遍。 第三种方法也不好，因为你需要看效果图一点点的拼，也就是说写html标签的时候，你在不断的假设这块要怎么去显示。 正确的做法是： 1.拿到psd后，先不要做别的，直接在文本编辑器中将网页的框架写出来，不要假设这块将来css要去怎么渲染，完全自然化的标签，不加任何的css。 2.写完之后在各个浏览器运行之后确保大体定位都没有问题。
PS网页设计与制作（主页） 一、教材分析 设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop设计网页。本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。二、学情分析 认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。 知识技能水平： 在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理解为何这么做，以及怎么做。 三、教学目标 （一）、知识与技能 1.了解主页大小，掌握设置主页大小的方法。 2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。 3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。 （二）、过程与方法 1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。 2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。 （三）、情感态度与价值观 提倡学生多观察、多动手实践，不怕失败，只怕不动。在信息技术课堂上勇于探索实践，通过作品展示自己。 四、教学重点 主页大小设定、标题和图片的大小及位置、导航栏制作 五、教学难点
主页中各对象的大小及位置 六、教学方法 任务驱动、分层教学、同伴互助 七、教学准备 极域多媒体网络教室、Photoshop cs5、学案八、教学过程 1.展示范例，吸引学生的注意力，调动学习的积极性 2.师：刚才大家看到的是我们八年级一些同学的网页设计作品，在这些作品当中，有关于美食的，有关于旅游的，还有关于漫画的，还有关于科技的，等等。那么，你知道这些作品是怎么完成的？ 3.教师小结：这些网页，我们一般称之为主页，都是在PHOTOSHOP中完成。观看放映 聆听老师 观察素材文件 并进入创设情境 思考并发表自己的看法
西瓜： 1）新建图层——画圆选区——填充渐变色（2色绿） 2）去选区——新建图层2——用画笔（圆画笔、黑色）画竖线 3）滤镜——扭曲——波纹（值自定） 4）载入图层1选区——反选——删除图层2多余部分 切开瓜： 1）新建图层——画圆选区——填充渐变色（3色：红、白、绿） 2）多边形套索（切出一角，其余删除） 3）显示此图层选区——用套索工具移动选区——反选并删除多余部分 4）用仿制图章——仿制瓜皮 画笔画瓜子 黑白字 打字（白背景黑色文字）“黑白字” 合并图层 矩形选区选画布一半, Ctrl+I 再去选区 镀银金属字 白背景输入白色文字“silver” 图层样式——斜面浮雕——250 12 0 -60 70 等高线（M型） 图层样式——投影 背景层——加渐变 光芒文字 黑背景白色文字“TSNOW” 文字与背景层合并 图像——旋转画布——90顺时针 滤镜——风格化——风——左右各一次（分别ctrl+F重复一次） 图像——旋转画布——90逆时针 滤镜——风格化——风——左右各一次 滤镜——扭曲——波纹100 Ctrl+U 着色220 50 0 霓虹灯 白背景黑色文字 与背景层合并 画矩形框——编辑——描边——黑色描边10像素 滤镜——模糊——高斯模糊2 滤镜——风格化——曝光过度 自动色阶ctrl+shift+L 选中文字——新建图层——拉渐变（彩色）——去选区——将图层1“混合模式”设（颜色）
火焰字 白字黑背景——旋画布顺90 风——从左——重复2次 逆90旋画布 滤镜——扭曲——波纹100 高斯模糊1 图像——模式——灰度 图像——模式——索引颜色 图像——模式——颜色表——黑体 再输入黑文字——放上层 金属字 白背景灰色文字（金属字——楷体） 文字层——右击图层——栅格化文字 色相饱和度——（着色）36 100 0 背景层变黑色 文字层——斜面浮雕（等高线）M型 水晶字 白背景黑字 滤镜——模糊——动感模糊45 40 滤镜——风格化——查找边缘 合并图层 反相ctrl+I 选中文字——色阶ctrl+L 0 1 206 100 255 新层——渐变（模式为“颜色”） 经典火焰 黑背景白字——新建图层——向下盖印（ctrl+shift+alt+E） 旋画布顺时针90——风从左重复3次 逆时针旋画布——高斯模糊4 色相饱和度着色40 100 0 将图层1复制一层（图层1副本）——色相饱和度（不着色-40 0 0） 图层1副本（混合模式：颜色减淡） 合并上2个图层——使用滤镜——液化 使用涂抹工具修饰——再将文字层拖最上边（文字改黑色） 磁砖人物 打开图片——将图片复制副本（背景副本） 显示网格——使用单行、单列工具（画线）利用添加选区方式（绘制磁砖方块）描边1像素居中黑色
PS制作网站流程图解（Photoshop在网页设计中的应用实例，photoshop设计网页网站的方法） 2009年10月13日星期二 02:15 刚刚发现了一篇对初学网页制作的人很用用处的教程，转来共同学习吧。但有些地方我不太认同，不过还是有一些地方可以学习的。 1.规划:不管是乔客，还是用动易、风讯，我们都应该考虑两个问题: a、版面要分出头、中、底三个部分。 b、中间部分要考虑两种情况，一是两栏(乔客左窄右宽，动易左宽右窄)，二是一栏，两种情况显示不能变形。有些朋友想每个板块的头部不一样，这也是可以的，你可以在程序代码中做文章，那是编程的问题，按下不表。 如果我看到别人的版面想拿下来，那就做个截图，建立一个Photoshop文件，把截图放在最底层，作为最初的草图。 2、制作。 a、即使不用别人的版面，最好也还是找一个同类系统的网站截一个图，放在最底层。拉三根垂直辅助线:左边线，中间虚线位置，右边线。 b、建立头、中、底三个图层组。有些人用photoshop不喜欢建立图层组，这不是好习惯，一个版面，少则几十层，多则上百层，不分开图层组管理就很乱，影响工作效率，更影响多人合作。
c、制作的时候最好尽量把文字内容也放上去，可以更接近实际效果，等切图的时候隐藏这些图层。 d、标题样式。一个版面除了头、底要特别制作外，中间部分应该考虑制作三种标题样式:左栏、右栏、通栏，也可以统一风格。还要考虑表头背景、一些常用到的边框等。我自己把许多喜欢的边框样式用js作了一个样式包，随时调用，而标题样式我是使用Flash来做的一个样式，使用不同的参数调用，就可以有不同的样式和颜色，改版的时候就改一个js文件和Flash文件，做版面的时候会节省一些时间。
用Photoshop制作网页背景图 网页背景图的制作 一、建立新文件1.建立一个250 X 150(72像素/英寸)的新文件，不要太大，因为背景图一般是平铺在底面上的。然后把背景填充上浅浅的颜色如淡黄色： （图txt5_step1） 二、输入文字1. 选择你喜欢的字体和颜色输入文字，我这里输入“我的酷站”，然后调整字的大小和位置。这里有几个注意事项： 第一，字的大小和字型最好不要太死板，最好用另外的字体和不同的尺寸突出你想突出的一个或几个字，必要时可以拉长或压扁。 第二，字和背景的颜色搭配要得当，这没有什么规律可言，一般只要看着顺眼就行了。如图: （图txt5_step2） 2.然后选择“图层(Layer)->新建(New...)->图层(Lay er)”两次，建立两个新层，如图所示：
（图txt5_step3） 3.分别在两个层上随便选择一定形状(什么形状？你自己随意啦。)的范围，填充合适的颜色后，将这两个层的透明度降到35%： 三、技术处理1. 下面的步骤很随意，你随便试几个滤镜，只要得到自己满意的效果就行了。我这里的操作是这样的: 绿色方块第一次滤镜：“滤镜(Filter)->模糊(Blur)->动感模糊(Motion Blur)”(角度:0度，距离:20像素) 绿色方块第二次滤镜：“滤镜(Filter)->模糊(Blur)->径向模糊(Radiou Blur)”(数量:52，方法:转动) 紫色方块第一次滤镜：“滤镜->纹理->颗粒”(强度:77，对比度:50，颗粒类型:软化) 紫色方块第二次滤镜：“滤镜->模糊->径向模糊”(数量:60，方法:缩放) 这里的操作能真正体现出你个人的审美观点。 （图txt5_step5） 3.在层面板上点击背景层前面的小眼睛，隐藏背景层，然后点击层面板右上方的小三角，选择“合并可见层”，如图：
如何使用photoshop制作网页？ Ps是世界上最伟大的一款图像处理软件，它的伟大之处同时还在于它可以进行基于普通图像处理之外的多种工作，比如，直接生成html。 我们来看看，ps是如何生成html的 在我们将图像“储蓄为web和设备所用格式”的时候，我们的储蓄方式会自然地指向三种 在平时，我们用到的是“仅限图像”，当需要制作网页的时候，我们只需将储蓄方式点选为“HTML和图像”这样，我们就可以直接生成一个“images”文件夹和一个HTML文档 ，一个最基本的网页，也就做成了。 可是，在实际运用中，我们会发现，这个html文档是最初级的，没有超级链的功能，亦无法进行编辑，怎么办呢？ 这时候，我们就需要运用到ps最不常用的一个工具切片，下面，是一个简单的ps网页制作演示 1、我们在ps上做成了这样一个网页模版： 2、接下来，我们就点选切片工具，选下我们将来想做成超级链的区域，比如当我想
把区域做成我想要的超级链区域时，我只需要用切片工具的小刀，将 首页区域选中，这样，我就成功了。最后我们需要选中的三个区域，如图所示： 3、接着，我们只需要将它按照我们一开始所说，在将图像“储蓄为web和设备所用格式”的时候，将储蓄方式点选为“HTML和图像”，就可以了。 4、既然ps已经帮我们处理掉了所有的任务， dreamweaver这个东西还有什么用呢？事实上，它也只有一个用处了，让我们打开dreamweaver，打开一开始我们用ps编辑好的网页
点选我们需要他变成超级链的区域 接着，在链接选项中选择我们希望他链接去的地方 比如，把他连接到首页网页中，这样，一个超级链就做成了。 5、最后，我们需要做得就只剩下了在DW上，将每一个用ps做好的html设置他所需的超级 链，我们就成功了（按照数煤老师的要求，我们大概需要做四个网页）
东财《网页制作：Photoshop平面设计》在线作业三-0019 “自动抹除”选项是哪个工具栏中的功能? A:画笔工具 B:喷笔工具 C:铅笔工具 D:直线工具 答案：C 下列关于参考线和网格的描述哪些是正确的? A:参考线和网格的颜色是不可以修改的 B:如果图像窗口中没有显示标尺，就不可以创建参考线 C:如果图像窗口中没有显示标尺，就不可以显示网格 D:参考线和网格都可以用虚线和实线表示 答案：D 在Photoshop中渐变工具（GradientTool）有几种渐变形式？ A:3种 B:4种 C:5种 D:6种 答案：C 工具属性栏的主要功能是方便（） A:建立选区 B:精确定位光标 C:消除锯齿 D:图像处理
答案：D 在Photoshop中，除了历史画笔工具（HistoryBrushtool）外，还有哪个工具可以将图像还原到历史记录调板中图像的任何一个状态？ A:Brushtool（画笔工具） B:CloneStamptool（仿制图章工具） C:EraserTool（橡皮擦工具） D:BlurTool（模糊工具） 答案：C “描边”命令使用的是何处的颜色： A:工具箱中的前景色 B:工具箱中的背景色 C:色板中随机选取颜色 D:颜色调板中随机选取颜色 答案：A ( )工具是一种图像色彩锐化的工具，即增大像素间的反差。 A:模糊 B:锐化 C:涂抹 D:海绵工具 答案：B 在Photoshop中下面有关模糊工具和锐化工具的使用描述不正确的是 A:它们都是用于对图像细节的修饰 B:按住Shift键就可以在这两个工具之间切换 C:模糊工具可降低相邻像素的对比度
浅谈Photoshop在网页布局设计中的意义与方法
摘要 当今网络已经成为人们生活的重要组成部分,由此一个新兴的专业---网页设计诞生了。部分技工学校为适应这个职业对人才的需求纷纷开设了网络工程专业。但是在培养网页设计人员的过程中一些教师由于缺乏网页设计实践经验，对Photoshop这个图象软件在网页设计中对网页元素的整合作用认识不足，没有使这个软件发挥其应有的作用。本文针对这个现象，对Photoshop在网页设计和规划中的作用和意义以及运用Photoshop进行网页规划时应注意的问题作了论述，特别是对Photoshop的切片功能和操作方法做了详细的说明，这对于初学网页设计的人员来说更具有指导意义。 关键词：网页设计Photoshop 布局 现在是IT时代，几乎没有哪一行能和网络脱离关系，因此网站的规划与建设已经成为一项专门职业。在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接反映网站的点击率，而点击率正是网站的生命所在。所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。 网页布局设计的软件很多，如Dream weaver 、FrontPage 等都可胜任，但是初学者往往是一上手就使用Dreamweaver等进行规划布局，结果使网站建设延期，下载速度降低，更糟的是合同违约，失掉客户，造成不可估量的损失。纠其原因，关键是忽视
了Photoshop 在网页规划布局中的作用。初学者知道Photoshop 是图像处理软件，但只是把它用来解决一般图像裁切、调整、优化，而忽视它在网页布局设计中的重要作用。 一、Photoshop 在网页布局设计中的作用
Photoshop网页制作教程：Photoshop设计博客 2009-4-23 19:36:29 已被阅读：2618 发表评论 本教程主要是告诉大家如何在Photoshop里面设计一个有活力并具有现代感的博客界面。 我们会从零开始告诉大家如何从一个空白的画布来一步步的制作出整个界面。 这是我为Springy Developments的一个WordPress主题项目中的一个特别的设计，将来我想我们一起来看看如何将这个设计转化为编码的过程以及最后如何将他们制作成最终的产品。 牢记最初的概念设计稿，下面的教程将会一步一步来明确这个过程。想要一个好的设计，大量的试验和一些元素的重新安排是不可或缺的，因为这将让我们很好的理解为什么使用这些工具，为什么这样布局来设计这样一个产品。
打开PS然后创建一个空白文档。我比较喜欢在一个大一点宽屏文档上面开始制作。切记使用RGB色彩模式以及设置为72DPI就好，因为我们紧紧是在屏幕上使用（注，一般印刷是300dpi，而屏幕只要72就够了，CMYK为印刷色） 首先我们来处理页面的背景，这个地方没什么特别有趣的填充物。给背景选择一个素色，然后从上面使用放射性渐变工具一直拖到中间。当然你也可以选用自己喜欢的颜色，在这里我就选择了我选择的是蓝绿色的渐变。
打开一个牛皮纸素材，我们将用它来为背景增加一些有趣的材质效果。 将材质去色(CTRL+SHIFT+U),然后选择高斯模糊用大一点的像素来抹掉牛皮纸上面的一些细节。
将修改过的牛皮纸材质放在渐变的背景色上面，然后选择混合模式的叠加选项，再修改透明度为90%。 在一个网页设计中设计合理的用户显示器范围是网页布局一个重要的步骤。除非另有要求，我一般都是将分辨率调整到1024×768，因此我在文档的中部将参考线设置为960px宽，两边空白处各有20px宽，这是为了以防一些元素超出之前设置的屏幕分辨率。
Photoshop制作网站流程图详细过程-PhotoShop网页设计 1.规划：不管是乔客，还是用动易、风讯，我们都应该考虑两个问题： a、版面要分出头、中、底三个部分。 b、中间部分要考虑两种情况，一是两栏（乔客左窄右宽，动易左宽右窄），二是一栏，两种情况显示不能变形。有些朋友想每个板块的头部不一样，这也是可以的，你可以在程序代码中做文章，那是编程的问题，按下不表。 如果我看到别人的版面想拿下来，那就做个截图，建立一个photoshop文件，把截图放在最底层，作为最初的草图。 2、制作。 a、即使不用别人的版面，最好也还是找一个同类系统的网站截一个图，放在最底层。拉三根垂直辅助线：左边线，中间虚线位置，右边线。 b、建立头、中、底三个图层组。有些人用photoshop不喜欢建立图层组，这不是好习惯，一个版面，少则几十层，多则上百层，不分开图层组管理就很乱，影响工作效率，更影响多人合作。
c、制作的时候最好尽量把文字内容也放上去，可以更接近实际效果，等切图的时候隐藏这些图层。 d、标题样式。一个版面除了头、底要特别制作外，中间部分应该考虑制作三种标题样式：左栏、右栏、通栏，也可以统一风格。还要考虑表头背景、一些常用到的边框等。我自己把许多喜欢的边框样式用js作了一个样式包，随时调用，而标题样式我是使用flash来做的一个样式，使用不同的参数调用，就可以有不同的样式和颜色，改版的时候就改一个js文件和flash文件，做版面的时候会节省一些时间。
e、常用的按钮样式。常用的按钮其实不用在版面制作的时候做的，可以找回原来的按钮图片一个一个修改。 f、特殊字体的使用。不管是链接还是内容，我都主张尽量使用样式表来控制字体样式，但有些地方要用到不常用的字体，为了使所有的浏览者都能看到自己的设计原意，就要把文字制作成图片，这一类的图片要适当使用，因为使用了图片，对搜索引擎的访问是无益的。
用Photoshop实现立体感效果 2005-3-1 11:54:00文/cloudy出处：blueidea 写在开头： 我们平常所说的美术，都是有关视觉的艺术。设计分很多种，但大家目前所集中关心的，要用到PS的设计，无非就是人机界面（网页也算一种人机界面）、平面广告、动画、插图等等，这些都与视觉有关。 而视觉魔术当中，我们普遍运用的手法，就是通过视觉错误来产生各种各样的“立体感”。本来都是平面的，但添加了各种效果后，你就觉得这是立体的，有空间感的。比如一个简单的按钮，就不再是平面的板块，你会觉得它是有体积感的。这就是我们所说的“逼真”。 首先要说的是，我举的例子都会是很简单、数个步骤就能上手并且能演变出其他效果的，因为我觉得对于初学者而言，画一个方块，和画一个人头像在操作上没有很大的区别。如果你参加了美术班的学习，你就会知道，对于阴影、高光的把握，画一个鸡蛋与画一个人头像没什么不同，不同的就是后者需要结构上的理解与更多的练习。举个小例子，小非想必大家很熟悉了，以PS描绘逼真的超写实人像，他对自己的操作是这样说的：我无非就是用了路径、加亮与变暗工具多一些而已，剩下的就是美术功底了。因此，对于初学者，我不推荐马上去画什么人脸，而是先理解好、运用好手头的这几样工具，再深入研究结构，这样才是学习PS之道。 好了，我们现在马上开始，从结果倒推到步骤的思考之旅。大家来看这个水晶按钮（呵呵，我总是从水晶按钮开始，因为它基本上把样式的技巧都用上了）。
下面我们放大来看这个水晶按钮由哪些结构组成。按钮构成图： 按钮横截面光线图： 1、任何光滑的东西都会产生镜面反射，水晶按钮当然不会例外。 2、要让按钮浮出画布，阴影是少不了的。有了正确的阴影，人们感觉才会更逼真。 3、这个水晶按钮是紫色的，但不是平板、呆板的平紫色，而是一个从紫红到粉红的渐变色，为什么会这样？因为它是透明的，光线从上到下投射下来的时候，由于下部的角度问题，产生的反射越来越多（这部分可参考物理学知识），所以下面的颜色会较浅。（注：我
Photoshop制作网页模板 用图层组管理网页元素 首先是在Photoshop中制作好网页的框架。网页中的元素有很多，像Banner条、文本框、文字、版权、Logo、广告等。尽量把这些相对独立的元素放在不同的图层中，这样方便以后的再编辑。 不过图层一多，就显得很凌乱，可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮，从弹出菜单中选择“新建组”，在随后出现的对话框中为新建组取一个名称（如：“网页顶部”），确定即可。这时图层面板中多出一个文件夹图标，即图层组。把相关联的图层都拖放到同一组中，比如网页顶部的所有元素，标题、菜单、Logo等都放到“网页顶部”组中（见图1）。同样方法可以建立多个组，在组的下面还可以建立子组。 本文来源网页吧https://www.doczj.com/doc/9e7901191.html, 点击图层组前面的小三角，就可以像文件夹一样展开或折叠它，这样图层面板就显示干净利落得多，要修改某个元素也能很容易找到。对同一组中的所以图层可以方便地进行统一操作，如整体复制、删除、隐藏、合并等。 小提示： ★如果你想借鉴某个网页的设计，不妨把它截成图片放在最下面的图层中，再拉出多个参考线划出网页的大致版式，再在此基础之上边参考边制作自己的网页。 从Photoshop到Dreamweaver的转换 在Photoshop中设计好之后，下面就要用切片工具把它转换成网页。有些人在切片之前喜欢合并图层，其实没有必要，合不合并图层对最终生成的网页没有多大影响，反而会妨碍以后的编辑修改。 第1步：我们最终需要的，只是Photoshop中制作的图形和框架。选择切片工具（快捷键为K），把需要的每个图形独立切分出来。每切分出一个图形，在它的左上角会显示出切片编号（见图2）。 本文来源网页吧https://www.doczj.com/doc/9e7901191.html,
https://www.doczj.com/doc/9e7901191.html, PS设计整洁漂亮的网页页面布局和背景 今天，我将介绍如何创建一个干净的网络布局、一个漂亮的背景。开门见山，咱直接切入正题吧，菇凉帅哥们有兴趣
https://www.doczj.com/doc/9e7901191.html, 的话，可以打开Ps跟着做哟。 开始设置的文件 打开一个新的文档：外形尺寸1200×1640像素，分辨率为72像素/英寸。 我们要创建基本的背景层。简单的在草稿上勾画出大概的布局与结构，可以看出页面最终的雏形，不过在设计过程中，我们可能会添加新的元素。
https://www.doczj.com/doc/9e7901191.html, 草稿上可以看出，我们将创建5个分栏，在这里我们将添加的内容。 添加的第一层，这将是我们的背景，颜色＃ededed。 在页面顶部绘制一个矩形命名为top1（使用矩形栅格化的图层（颜色＃ededed），并添加杂色（滤镜>杂色>添加杂色0.5 –0.8;高斯分布和单色）。再次绘制矩形，颜色＃cddcec），栅格化的形状和添加杂色（滤镜>杂色>添加杂色0.5 –0.8;高斯分布和单色）。添加一个渐变叠加（柔光，54％，从黑到白的90％，角度和缩放75％）。 接下来添加矩形（U），在中间新建一个矩形（颜色为＃608bb6，高度400像素左右），设置混合模式为颜色加深，并填充为75％，然后添加一个白色的描边1像素（图层样式）。 最后的底部页脚添加一个矩形形状，使用相同的工具和色彩，但现在设置混合线性光，不透明度为70％。 下面的最终结果。
https://www.doczj.com/doc/9e7901191.html, 步骤2 –背景 给我们的背景添加纹理。添加一个新层（CTR + SHIFT + N），使用选框工具在画布顶部添加一个1像素的白线。（仔细看下图顶部有条白线）
Photoshop网页设计案例教学网页框图
Photoshop网页设计案例教学详细操作步骤： 一、创建文件及布局参考线 1、创建文件，大小990x1200像素，RGB模式，白色背景，如图所示： 2、设置布局参考线： （1）横向5对参考线，分别为140/150、470/480、740/750、1010/1020像素； （2）纵向2对参考线，分别为325/335、660/670像素； 3、将文件存储为“01创建文件及布局参考线.psd”。 效果如文件“01创建文件及布局参考线.psd”所示。 二、创建布局块之一（LeadStory） 1、设置矩形选区框样式为“固定大小”，大小为660x320像素； 2、在“视图”菜单下将“对齐到(T)”设置为“参考线”或者“全部”； 3、在“背景”图层上新建图层，命名为“LeadStory”； 4、选中图层“LeadStory”，用矩形选区框工具建立一个选区，将选区移动到位； 5、将选区填充为灰色； 6、将文件存储为“02创建布局块之一LeadStory.psd”。 效果如文件“02创建布局块之一LeadStory.psd”所示。 三、创建布局块之二（Story1-4） 1、保持矩形选区框样式为“固定大小”，大小为325x260像素； 2、在图层“LeadStory”上建立一个图层，命名为“Story1”； 3、选中图层“Story1”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色；
5、用同样方法建立相同大小的图层Story2、Story3、Story4； 6、将文件存储为“03创建布局块之二Story1-4.psd”。 效果如文件“03创建布局块之二Story1-4.psd”所示。 四、创建布局块之三（FeatureStory） 1、保持矩形选区框样式为“固定大小”，大小为320x260像素； 2、在图层“Story4”上建立一个图层，命名为“FeatureStory”； 3、选中图层“FeatureStory”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、将文件存储为“04创建布局块之三FeatureStory.psd”。 效果如文件“04创建布局块之三FeatureStory.psd”所示。 五、创建布局块之四（Ads） 1、保持矩形选区框样式为“固定大小”，大小为320x590像素； 2、在图层“FeatureStory”上建立一个图层，命名为“Ads”； 3、选中图层“Ads”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、将文件存储为“05创建布局块之四Ads.psd”。 效果如文件“05创建布局块之四Ads.psd”所示。 六、创建布局块之五（Footer） 1、保持矩形选区框样式为“固定大小”，大小为990x100像素； 2、在图层“Ads”上建立一个图层，命名为“Footer”； 3、选中图层“Footers”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、将文件存储为“06创建布局块之五Footer.psd”。 效果如文件“06创建布局块之五Footer.psd”所示。 七、建立广告区域布局参考线 1、清除参考线； 2、设置广告区域布局参考线： （1）横向4对参考线，分别为440、582、725、868像素； （2）纵向2对参考线，分别为690、840像素； 3、将文件存储为“07建立广告区域布局参考线.psd”。 效果如文件“07建立广告区域布局参考线.psd”所示。 八、创建广告区域布局块（Ad1-Ad8） 1、保持矩形选区框样式为“固定大小”，大小为125x125像素；