ps做网页设计稿教程？ 用ps做的网页设计图？

摘要： 大屏网页设计-如何设计自适应屏幕大小的网页ResponsiveWebDesign...1、新建一名称为“框架”的图层，利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”，...

大屏网页设计-如何设计自适应屏幕大小的网页ResponsivewebDesign...

1、新建一名称为“框架”的图层，利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”，然后将矩形的宽度设置为1024，高度设置为80，在文档的上下两侧各框选一部分内容并填充为黑色，从而使整个网页呈现“宽屏幕”效果。在背景图层的上方新建一新图层，并命名为“背景颜色”。

2、年，Ethan Marcotte提出了”自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

3、自从2010年，Ethan Marcotte提出了 “自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个 范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

4、自适应网页设计的核心，就是CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的css文件。 上面的代码意思是，如果屏幕宽度小于400像素（max-device-width： 400px），就加载tinyScreen.css文件。 如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

ps网页设计教程

新建文件：打开photoshop，新建一个文件。设置宽度为1920像素（一般网页全屏大小），高度根据内容确定。分辨率设为72像素/英寸（电脑显示标准），颜色模式选择RGB。设计主页：使用PHOTOSHOP的各种工具和功能，设计网页的主页。可以添加文字、图片、形状等元素，并调整它们的样式和布局。

新建文件：打开PS软件，点击【文件】-【新建】，设置宽度为1920像素，高度为3000像素，分辨率为72像素/英寸，背景颜色为白色。安装并使用GuideGuide插件：安装GuideGuide插件（需提前下载并安装），该插件能帮助我们快速创建网页设计的参考线。

新建文件 打开PS软件，新建一个文件，尺寸为1920*3000像素，分辨率选择72像素/英寸，颜色模式选择白色作为背景。 设置网格 安装并使用guideguide插件，设置左右边距为360像素，行数为12行，余边为20像素。这有助于规范页面布局。

使用PS制作一个网页的基本步骤如下：创建基础画布与绘制图形 新建画布：首先，在PhotoShop中新建一个六百乘六百像素的画布，并设置背景色为黑色。绘制图形：在新建的图层上，使用钢笔工具绘制所需的图形。绘制完成后，填充颜色为白色。

怎么用ps做网页设计_如何用ps做网页设计详细教程

准备设计稿打开已完成的psd文件（可自行设计或使用现有模板），确保图层结构清晰，便于后续切片操作。（图示：PS界面中打开的PSD文件）使用切片工具分割页面选择切片工具在右侧工具栏中找到「切片工具」（快捷键C），该工具用于将设计稿划分为多个独立区域。

切片处理：如果网页包含大图或需要分割的图片，使用Photoshop的切片工具将图片切成小部分。如果图片本身已经足够小，可以省略此步骤。存储为Web格式：完成设计后，选择“文件”“存储为Web所用格式”。在弹出的对话框中，选择图片格式为JPEG（或其他适合的格式）。可以调整图片质量和其他参数。

打开PS软件，点击【文件】-【新建】，设置宽度为1920像素，高度为3000像素，分辨率为72像素/英寸，背景颜色为白色。安装并使用GuideGuide插件：安装GuideGuide插件（需提前下载并安装），该插件能帮助我们快速创建网页设计的参考线。

怎么用ps和dw结合做一个网页?

1、通过Photoshop的文件菜单中的保存选项，将切割好的切片保存为网页格式。在保存时，记得选择“文件和图像”选项，这样可以生成一个包含Html、CSS和图像文件的网页包，便于后续在DreamWeaver中的编辑。

2、使用Photoshop和Dreamweaver结合制作网页，流程十分简洁。首先，在Photoshop中，运用切片工具将设计好的网页版面进行切割。接着，通过文件菜单中的保存选项，将切片保存为网页格式。这里，记得在保存时选择文件和图像选项，这样便能生成一个基本的网页文件。

3、）新建站点所在文件夹，在D盘根目录下新建文件夹ind0605。2 ）在ind0605中再新建css、images、js等3个文件夹 。3 ）回到dreamweaver中，在左上角有个文件菜单，点击新建，新建ind.html 。4） 用同样地方式，新建style.css文件，然后存储到css文件夹中。

Photoshop设计电脑网站WEB模板教程

创建网页头部（head）新建图层，选中矩形选择框工具（M），在画布头部添加矩形，宽1200px，高度大约100px，并设置如下图层样式 “渐变叠加”“描边”头部将会是这样子：在头部添加网站的标题，广告语和logo和一点公司简介。

最关键的是“切片工具”。你可以在一张图像上任意添加按钮、图片、文字等内容，做成网页最关键的一步就是切片，用切片工具托拉，就能拉出一块块的区域（这些区域后来在网页软件中可以设置链接），然后把这个文件存储为WEB所用格式，这样存储的文件是一个HTML和一个装有切成块的图。

制作网站页面的过程并不简单，需要掌握一定的Photoshop技能。首先，你需要设计网页的视觉效果，这要求有扎实的PS功底。接着，你需要了解网页结构，进行切图工作。PS可以另存为网页，但这仅仅是一个起点。网页优化是关键步骤，你可能需要使用Dreamweaver软件来进一步优化，去除多余的空白区域，调整背景。

在Photoshop中设计好之后，下面就要用切片工具把它转换成网页。有些人在切片之前喜欢合并图层，其实没有必要，合不合并图层对最终生成的网页没有多大影响，反而会妨碍以后的编辑修改。 第1步：我们最终需要的，只是Photoshop中制作的图形和框架。选择切片工具（快捷键为K），把需要的每个图形独立切分出来。

下载安装Dreamweaver cs5和photoshop cs5，安装好后打开photoshop。设计准备1--新建图像。