ps网页

Photoshop制作网站首页:切割网页图片_PhotoShop网页设计

/5

?1

?2

?3

?4

?5

编辑Tag赚U币

教程Tag：暂无Tag,欢迎添加,赚取U币!

模板无忧设计交流群模板无忧诚邀设计师加盟,合作共赢!广告位置招租

切图是网页设计中非常重要的一环，它可以很方便的为我们标明哪些是图片区域，哪些是文本区域。另外，合理的切图还有利于加快网页的下载速度、设计复杂造型的网页以及对不同特点的图片进行分格式压缩等优点。

1. 使用工具箱中的“切片工具”在标题部分的左右各切一刀，使用“切片选择工具”双击右侧部分，在弹出的面板中设置切片类型为无图像。因为该部分是纯色，为了在网页中显示效果相同，设切片背景为黑色，这样该部分输出成网页后将由透明占位符和黑色背景色代替，如图所示。

图

2. 使用切片的固定大小，设置宽度为“68”，高度为“40”，这次是切割的导航条按钮，将切片和被切对象对齐，切的时候要小心，避免切片之间重叠，如图1-3-2 所示。

图1-3-2

3. 使用同样的方法将其它导航条按钮切割，注重最后一个“管委会”按钮是三个字，因此设置的切片宽度要大，如图1-3-3 所示。需要注重的是，切割的时候要注重平衡，比如右侧切割了，那么左侧也要等高的切一刀，这样输出成网页的时候不轻易乱。

图1-3-3

4. 切割方法同上，注重切片左上角的编号。下一行切片14 和15 共两刀，再往下16、17、18 共三刀，其中17 为纯色，因此设为无图像，并用相应的颜色标识，如图1-3-4 所示。后面的方法基本相同，需要把在Dreamweaver 中处理的纯色背景部分设为无图像，并以相应的切片背景色填充。假如某个图层的范围正好是要切割的大小，可以直接使用“基于图层的切片”功能。

图1-3-4

5. 执行菜单“存储为Web 和设备所用格式”，该命令用于将PSD 源文件输出成网页或是手机等设备所使用的格式。在对话框中进行简单的优化设置，确定后设置输出类型为“HTML 和图像”，并且要输出所有的切片，如图1-3-5 所示。

Photoshop制作网站流程图详细过程_PhotoShop网页设计

/5

?1

?2

?3

?4

?5

编辑Tag赚U币

教程Tag：暂无Tag,欢迎添加,赚取U币!

模板无忧设计交流群模板无忧诚邀设计师加盟,合作共赢!广告位置招租

1.规划：不管是乔客，还是用动易、风讯，我们都应该考虑两个问题：

a、版面要分出头、中、底三个部分。

b、中间部分要考虑两种情况，一是两栏（乔客左窄右宽，动易左宽右窄），二是一栏，两种情况显示不能变形。有些朋友想每个板块的头部不一样，这也是可以的，你可以在程序代码中做文章，那是编程的问题，按下不表。

如果我看到别人的版面想拿下来，那就做个截图，建立一个photoshop文件，把截图放在最底层，作为最初的草图。

2、制作。

a、即使不用别人的版面，最好也还是找一个同类系统的网站截一个图，放在最底层。拉三根垂直辅助线：左边线，中间虚线位置，右边线。

b、建立头、中、底三个图层组。有些人用photoshop不喜欢建立图层组，这不是好习惯，一个版面，少则几十层，多则上百层，不分开图层组管理就很乱，影响工作效率，更影响多人合作。

c、制作的时候最好尽量把文字内容也放上去，可以更接近实际效果，等切图的时候隐藏这些图层。

d、标题样式。一个版面除了头、底要特别制作外，中间部分应该考虑制作三种标题样式：左栏、右栏、通栏，也可以统一风格。还要考虑表头背景、一些常用到的边框等。我自己把许多喜欢的边框样式用js作了一个样式包，随时调用，而标题样式我是使用flash来做的一个样式，使用不同的参数调用，就可以有不同的样式和颜色，改版的时候就改一个js 文件和flash文件，做版面的时候会节省一些时间。

e、常用的按钮样式。常用的按钮其实不用在版面制作的时候做的，可以找回原来的按钮图片一个一个修改。

f、特殊字体的使用。不管是链接还是内容，我都主张尽量使用样式表来控制字体样式，但有些地方要用到不常用的字体，为了使所有的浏览者都能看到自己的设计原意，就要把文字制作成图片，这一类的图片要适当使用，因为使用了图片，对搜索引擎的访问是无益的。

图1-3-5

举一反三：

尝试使用切图工具对已有的版面进行切割，并注重切割的技巧。

Photoshop制作一款漂亮的网页模板

在这篇网页设计教程里，你将学习制作可以用于整站的一个既优雅又专业的网页，我们将用到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。 然后你需要下载

《PS网页设计》作品设计报告书

广西交通职业技术学院信息工程系作品设计报告书 题目：PS网页设计 班级 学号 姓名 指导教师 2010 年6 月

目录 一、设计目标 (3) 1.1内容 (3) 1.2功能 (3) 1.3实现方式 (3) 二、设计指导思想 (3) 2.1技术背景 (3) 2.1.1网页设计 (4) 2.1.2图形编辑 (4) 2.1.3平面设计 (4) 2.1.4主流软件 (4) 2.2开发环境 (5) 三、设计内容及制作步骤 (5) 3.1页面展示 (5) 3.1.1成品展示 (5) 3.2.2参考作品 (6) 3.2制作构思 (7) 3.2.1板式 (7) 3.3.2颜色 (7) 3.3制作流程 (7) 3.3.1背景 (7) 3.3.2LOGO (8) 3.3.3导航条 (9) 3.3.4板块 (9) 3.3.5板块内容 (10) 3.3.6板块文字美化 (11) 3.3.7页尾 (11) 四、设计制作进度表 (11) 五、作品提交清单及运行环境要求 (12) 5.1文件清单 (12) 5.2运行环境要求 (12) 六、相关问题及结束语 (12) 6.1相关问题 (12) 6.2结束语 (12) 6.3感悟 (13) 七、参考资料 (13)

一、设计目标 1.1内容 通过PS这款软件，设计一个简单、美观、符合实际的网页页面，页面内容具备网页经常可以看到的功能。这次的作品既是PS设计，同时也是网页设计，因此在页面及其功能上应按一个正规网站来设计。 1.2功能 对于网站设计来说，不仅应了解该网站要运行什么应用程序，需要如何连接单位现有系统等，还需知道这个网站希望达到什么样的目的，即必须清楚网站的目标市场在那里。这将成为整个网站所有设计思想的基础。无论网站采用何种形式，什么样的外观，提供什么的内容，都要以网站的最终目的为出发点来考虑。 另一方面，网站建设还应该收集客户对这个网站的美术需求。网站设计人员就需要了解建站单位形象的突出点和单位标志的特点、意义等。 本网站的建设主要是建成一个集在线阅读、书籍下载、文化新闻等功能于一体的商业化网站。 1.3实现方式 运用PS相关功能，设计出一个静态的页面，然后通过HTML输出，得到一个基本的网页文件。 二、设计指导思想 2.1技术背景 对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet 的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息

PS网页设计与制作

PS网页设计与制作

PS网页设计与制作（主页） 一、教材分析 设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop 设计网页。本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。 二、学情分析 认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。 知识技能水平： 在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理

解为何这么做，以及怎么做。 三、教学目标 （一）、知识与技能 1.了解主页大小，掌握设置主页大小的方法。 2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。 3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。 （二）、过程与方法 1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。 2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。 （三）、情感态度与价值观 提倡学生多观察、多动手实践，不怕失败，只怕不动。在信息技术课堂上勇于探索实践，通

过作品展示自己。 四、教学重点 主页大小设定、标题和图片的大小及位置、导航栏制作 五、教学难点 主页中各对象的大小及位置 六、教学方法 任务驱动、分层教学、同伴互助 七、教学准备 极域多媒体网络教室、Photoshop cs5、学案 八、教学过程

Photoshop在网页设计中的作用

龙源期刊网 https://www.wendangku.net/doc/e78779649.html, Photoshop在网页设计中的作用 作者：王潇潇 来源：《当代旅游（下旬）》2017年第08期 摘要：近年来，photoshop软件作为一种功能强大的图像处理软件，广泛应用于网页制作中，通过应用photoshop可以使网页背景与前景之间配合紧密，实现网页底纹无缝连接，从而使图像传输效率提高。随着我国信息化进程的不断推进，在网络发展过程中网页制作发挥着重要作用，本文就对photoshop在网页设计中的作用进行探讨和介绍。 关键词：photoshop；网页设计；作用 Photoshop是当前社会各界公认的具有完善功能的性能稳定的一款平面图像处理软件，具有误差小、效果好、精确度高等诸多特点，在具有丰富的图像信息网络系统中承担着重要作用，并在图像处理、广告设计、美术设计等多个领域中均得到应用，在网页设计中也取得了良好的应用效果[1]。网页设计是整体设计，在设计过程中需要确保图像和网页设计主旨保持统一，并和网页背景、其他各项元素等都要紧密配合。 一、Photoshop在网页设计中的应用 （一）新建图像文件 在新建的图像文件中，宽度和高度主要是根据网站页面大小进行设计，通常和浏览器分辨率相对应，常用分辨率为1280*800的像素，图像的宽度与高度可以设为1260*780，颜色模式采用红绿蓝，即RGB。在photoshop中通过RGB的颜色变化啦表现出光影效果，在经过处理后使图像作品可以和现实更加贴近，从而给人带来一种良好的视觉效果，使人产生心灵的共鸣。 （二）采用photoshop进行页面布局设计 网站的设计中其设计方法多样，根据不同的功能，不同的主题进行设计。用户在对网页浏览时，网页上部和左上部是用户最先浏览的位置，然后依次往下阅读，并呈F形，因此在页面布局的设计中，网站热点、头条、导航栏、站名和站标等重要元素需要集中在关键区域中，而主题表现主要是通过造型设计体现出来的，而造型设计的巧妙不仅会给用户带来良好的视觉享受，也能表现出网站的主题，从而突出网站功能[2]。在采用photoshop来对网页进行设计时，需要突出设计感，并通过别致的造型和强有力的元素体现出网站主题，photoshop因图像处理功能强大，在个人网站和企业网站設计中发挥着重要的作用。在页面布局中可以先采用线条在页面中画T字，将画面分割为三个部分，最上面设计广告条、网站名称和标志，左侧为导航栏、右侧将最大空间留给网站内容；其次建立多个图层，并将网站内容分别放在不同图层中，进行绘制和处理，而采用photoshop的渲染功能和图像整合功能就可以完成。

ps制作网页效果图—多种模版

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%.

Photoshop做一个网页

实训项目二 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”，一种厚重的深绿色。

PS网页设计与制作

PS网页设计与制作（主页） 一、教材分析 设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop设计网页。本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。二、学情分析 认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。 知识技能水平： 在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理解为何这么做，以及怎么做。 三、教学目标 （一）、知识与技能 1.了解主页大小，掌握设置主页大小的方法。 2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。 3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。 （二）、过程与方法 1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。 2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。 （三）、情感态度与价值观 提倡学生多观察、多动手实践，不怕失败，只怕不动。在信息技术课堂上勇于探索实践，通过作品展示自己。 四、教学重点 主页大小设定、标题和图片的大小及位置、导航栏制作 五、教学难点

主页中各对象的大小及位置 六、教学方法 任务驱动、分层教学、同伴互助 七、教学准备 极域多媒体网络教室、Photoshop cs5、学案八、教学过程 1.展示范例，吸引学生的注意力，调动学习的积极性 2.师：刚才大家看到的是我们八年级一些同学的网页设计作品，在这些作品当中，有关于美食的，有关于旅游的，还有关于漫画的，还有关于科技的，等等。那么，你知道这些作品是怎么完成的？ 3.教师小结：这些网页，我们一般称之为主页，都是在PHOTOSHOP中完成。观看放映 聆听老师 观察素材文件 并进入创设情境 思考并发表自己的看法

用photoshop输出html网页(psd网页模板)

如何用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.写完之后在各个浏览器运行之后确保大体定位都没有问题。

浅谈photoshop在网页布局设计中的意义与方法

浅谈Photoshop在网页布局设计中的意义与方法

摘要 当今网络已经成为人们生活的重要组成部分,由此一个新兴的专业---网页设计诞生了。部分技工学校为适应这个职业对人才的需求纷纷开设了网络工程专业。但是在培养网页设计人员的过程中一些教师由于缺乏网页设计实践经验，对Photoshop这个图象软件在网页设计中对网页元素的整合作用认识不足，没有使这个软件发挥其应有的作用。本文针对这个现象，对Photoshop在网页设计和规划中的作用和意义以及运用Photoshop进行网页规划时应注意的问题作了论述，特别是对Photoshop的切片功能和操作方法做了详细的说明，这对于初学网页设计的人员来说更具有指导意义。 关键词：网页设计Photoshop 布局 现在是IT时代，几乎没有哪一行能和网络脱离关系，因此网站的规划与建设已经成为一项专门职业。在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接反映网站的点击率，而点击率正是网站的生命所在。所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。 网页布局设计的软件很多，如Dream weaver 、FrontPage 等都可胜任，但是初学者往往是一上手就使用Dreamweaver等进行规划布局，结果使网站建设延期，下载速度降低，更糟的是合同违约，失掉客户，造成不可估量的损失。纠其原因，关键是忽视

了Photoshop 在网页规划布局中的作用。初学者知道Photoshop 是图像处理软件，但只是把它用来解决一般图像裁切、调整、优化，而忽视它在网页布局设计中的重要作用。 一、Photoshop 在网页布局设计中的作用

PS网页设计页面设置

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡ Ｂ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象. 页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px 另外120*90，120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 标准网页广告尺寸规格 一、120*120，这种广告规格适用于产品或新闻照片展示。 二、120*60，这种广告规格主要用于做LOGO使用。 三、120*90，主要应用于产品演示或大型LOGO。 四、125*125，这种规格适于表现照片效果的图像广告。 五、234*60，这种规格适用于框架或左右形式主页的广告链接。 六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。 七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。 八、88*31，主要用于网页链接，或网站小型LOGO。 广告形式像素大小最大尺寸备注 BUTTON 120*60(必须用gif) 7K 215*50(必须用gif) 7K 通栏 760*100 25K 静态图片或减少运动效果 430*50 15K 超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果 巨幅广告 336*280 35K 585*120 竖边广告 130*300 25K

网页设计PS

Photoshop CS5网页设计 目录 00课程介绍 (2) 01创建文档 (2) 02缩放与抓手工具 (3) 03使用图形工具构画简单的图形 (4) 04利用渐变工具创建渐变效果 (11) 05文字工具的使用 (17) 06工作区 (21) 07理解图层 (24) 08图层样式1 (27) 09图层样式2 (30) 10画笔工具 (36) 11使用图片素材 (44) 12图层蒙版与剪贴蒙版 (47) 13创建镜像效果 (52) 14图层的融合 (58) 15创建页面之间阴影分隔线 (62) 16设计网站的菜单背景（两个图层的合并） (65) 17设计漂亮的按钮 (70)

18理解图片格式 (78) 19使用切片工具分割设计好的网站页面 (81) 00课程介绍 Photoshop 是目前被广泛使用的图形处理软件，在这个课程里我们会从最简单的创建文档开始，然后在

了解常用的工具去勾画简单的图形，为文字添加效果，为图形添加样式，帮助不同的图片融合在一起，介绍一些流行的网页设计效果，最后将用photoshop去设计一个漂亮的网页。01创建文档 首先打开photoshop css5用ctrl+n或者点击左上角的文件下的“新建”按钮创建一个文档， 弹出一个对话框。在名称中输入“演示网页”，在预设中选中“web”。大小设为1280*1680 像素，其他设置不变。如下图所示： 这样就得到一个空白的文档，photoshop提供了很多了工具，但网页设计只要用到其中很小的一部分工具和功能就能完成大部分的工作。 第一个任务是更改背景色。选中拾色器，选中颜色，如下图所示：

Ps网页设计要点

Ps网页设计要点 文档尺寸 一般网页尺寸设在宽度1000~1008左右（一般宽屏显示器）或708~900（非宽）高度根据内容定；分辨率设为72px； 字体 尽量使用宋体或黑体，否则会出现网页字体不兼容，在设计时正文内容字体样式选【无】，标题字体样式选【锐利】，要经常按【Ctrl】+【1】在100%的浏览模式下看字体是否正常；如有特殊字体需切成图片处理；正文字体大小设置在12px或14px；标题字体大小可以设置为14px或18px 参考线 要经常设置参考线精确各板块之间的位置能确保在dreamwave中精确排版；也方便切图； 配色 尽量将颜色控制在1~3种，过多会显得杂、乱、脏，背景颜色和文档颜色要统一协调； 布局 可以参考各种网站，参考他们的布局，根据他们的布局来修改成自己的布局；保存 如为切片图片尽量使图片大小减小保持在50k以下；图片尺寸能小的尽量小，大图读取慢影响网页速度；一般按【Ctrl】+【Shift】+【Alt】+【S】保存为gif格式的

Dreamwave中DIV+CSS要点 CSS样式中书写习惯要好 写CSS样式时要有自己的良好的书写习惯，如本人写样式分以下布局：1.页面整体布局；2.页面板块布局；3.页面中各种图片样式；4.页面文字样式；这样分割可以方便以各种参数的修改；写样式时不能用纯数字命名，否则样式不成功；优先度 样式中id的样式比class先执行；页面中直接写的样式最先执行； 基础样式 一般CSS样式开始要对整个页面的样式定位一下，现在很多也定位过复杂，我们可以进行快捷方便的定无需像某些网页开头繁琐的写样式，可以写成如下格式： *｛margin:0; padding:0; list-style:none} (所有外边距为0；内边距为0；列表样式无；） Body{font-size:12px;} （全局字体大小为12px） A{color:#000; text-decoration:none: cursor:pointer;} （超链接字体颜色；字体下划线：无；鼠标放上去为手的形状；） A:hover{color:#f00;}（超链接鼠标经过颜色） Img{border:none} （图片边框：无） .clear{clear:both} （可以认为是另换一行或隔行用；） Div水平居中 可以先设置div宽度如：

样式： .index{width:1000px; margin:auto} float的使用 如果在同一行要有好几个板块可以用float浮动过去；如：

photoshop设计网页网站的方法

PS制作网站流程图解（Photoshop在网页设计中的应用实例，photoshop设计网页网站的方法） 2009年10月13日星期二 02:15 刚刚发现了一篇对初学网页制作的人很用用处的教程，转来共同学习吧。但有些地方我不太认同，不过还是有一些地方可以学习的。 1.规划:不管是乔客，还是用动易、风讯，我们都应该考虑两个问题: a、版面要分出头、中、底三个部分。 b、中间部分要考虑两种情况，一是两栏(乔客左窄右宽，动易左宽右窄)，二是一栏，两种情况显示不能变形。有些朋友想每个板块的头部不一样，这也是可以的，你可以在程序代码中做文章，那是编程的问题，按下不表。 如果我看到别人的版面想拿下来，那就做个截图，建立一个Photoshop文件，把截图放在最底层，作为最初的草图。 2、制作。 a、即使不用别人的版面，最好也还是找一个同类系统的网站截一个图，放在最底层。拉三根垂直辅助线:左边线，中间虚线位置，右边线。 b、建立头、中、底三个图层组。有些人用photoshop不喜欢建立图层组，这不是好习惯，一个版面，少则几十层，多则上百层，不分开图层组管理就很乱，影响工作效率，更影响多人合作。

c、制作的时候最好尽量把文字内容也放上去，可以更接近实际效果，等切图的时候隐藏这些图层。 d、标题样式。一个版面除了头、底要特别制作外，中间部分应该考虑制作三种标题样式:左栏、右栏、通栏，也可以统一风格。还要考虑表头背景、一些常用到的边框等。我自己把许多喜欢的边框样式用js作了一个样式包，随时调用，而标题样式我是使用Flash来做的一个样式，使用不同的参数调用，就可以有不同的样式和颜色，改版的时候就改一个js文件和Flash文件，做版面的时候会节省一些时间。

用Photoshop制作网页背景图

用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.在层面板上点击背景层前面的小眼睛，隐藏背景层，然后点击层面板右上方的小三角，选择“合并可见层”，如图：

仅需五步,让我们用ps做网页!

如何使用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设置他所需的超级 链，我们就成功了（按照数煤老师的要求，我们大概需要做四个网页）

ps网页设计教程

ps网页设计教程 设计网页的方法很多，常见的有直接编写代码方法，利用可视化软件设计(例如DreamWeaver)法，利用中间软件实现格式转换法(例如Word生成HTML代码)，还有就是PS设计网页法。综合各种设计方法的优缺点，可以得出利用PS 设计网页通常可以达到意想不到的效果，这不只是取决于他可以随意布局图片，更得意于其专业的图像处理能力。下面小编就给大家展示一下PS设计网页的独特之处。 工具/原料 Adobo PhotoShop IE浏览器 方法/步骤 1 打开PS，新建空白文档，名称设置为“feifei工作室”，从预设大小下拉列表中选择“1024 x 768”，模式设计为“RGB 颜色”，内容设置为“白色”，点击“好”按钮完成文档的创建工作。 2 新建一名称为“框架”的图层，利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”，然后将矩形的宽度设置为1024，高度设置为80，在文档的上下两侧各框选一部分内容并填充为黑色，从而使整个网页呈现“宽屏幕”

效果。 3 在背景图层的上方新建一新图层，并命名为“背景颜色”。点击“矩形选择工具”，设置“宽度为400，高度为768，然后在窗口的左侧框选一部分内容，填充一种深绿色。然后点击“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口的右侧框选一部分内容，填充一种浅绿色。填充两种颜色饱和度有一点差别的颜色，目地是产生较为明显的对比。 4 在“框架”图层之上再新建一图层，名称为“主体元素”。打开一张事先准备好的百合花图片，双击“背景”图层将其转换为“图层0”，点击“魔术棒”工具，在图片白色区域内点击，选择白色区域后，按下DEL键删除白色区域。然后拖放图片到图层“主体元素”上，位置如图所示。 5 然后选择“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口中选择花朵右侧的一部分内容，并调整其亮度和对比度，使花朵的左右两侧呈现明显的对比。 6 对该页面进行细节的调整，增加一些导航栏，信息提示内容和版权信息等内容，最终制作完成的页面如图所示。 7

东财《网页制作：Photoshop平面设计》在线作业三-0019

东财《网页制作：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:模糊工具可降低相邻像素的对比度

ps网页设计页面设置

ps网页设计页面设置 1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象. 页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px 另外120*90，120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 标准网页广告尺寸规格一、120*120，这种广告规格适用于产品或新闻照片展示。 二、120*60，这种广告规格主要用于做LOGO使用。 三、120*90，主要应用于产品演示或大型LOGO。 四、125*125，这种规格适于表现照片效果的图像广告。 五、234*60，这种规格适用于框架或左右形式主页的广告链接。 六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。 七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。 八、88*31，主要用于网页链接，或网站小型LOGO。 广告形式像素大小最大尺寸备注 BUTTON 120*60(必须用gif) 7K 215*50(必须用gif) 7K 通栏 760*100 25K 静态图片或减少运动效果 430*50 15K 超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果 巨幅广告 336*280 35K 585*120 竖边广告 130*300 25K 全屏广告 800*600 40K 必须为静态图片，FLASH格式 图文混排各频道不同 15K 弹出窗口 400*300(尽量用gif) 40K BANNER 468*60(尽量用gif) 18K 悬停按钮 80*80(必须用gif) 7K 流媒体 300*200 30K 播放时间小于5秒60帧(1秒/12帧) （可做不规则形状但尺寸不能超过300*200） 网页中的广告尺寸 1.首页右上，尺寸120*60 2.首页顶部通栏，尺寸468*60 3.首页顶部通栏，尺寸760*60 4.首页中部通栏，尺寸580*60 5.内页顶部通栏，尺寸468*60 6.内页顶部通栏，尺寸760*60 7.内页左上，尺寸150*60或300*300 8.下载地址页面，尺寸560*60或468*60

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宽，这是为了以防一些元素超出之前设置的屏幕分辨率。

PS网页设计流程及操作指导

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像素；