psd怎么切片，如何将psd文件切图并布局html

本文目录一览

1，如何将psd文件切图并布局html
2，photoshop如何使用切片工具
3，如何用PSD切片用CSSDIV布局我想知道的是技巧方面的谢谢了
4，如何正确使用Photoshop切片工具

1，如何将psd文件切图并布局html

用切片工具切片（工具栏第5个工具>右键>切片工具）>再右键图上刚刚划好的切片>编辑切片选项>URL一栏输入要链接网址>文件储存为WEB格式>预设下面一栏选“JPEG”>储存>文件名下面的格式选项选“html和图像”

如何将psd文件切图并布局html

2，photoshop如何使用切片工具

h。在切片名称上右击进入编辑对话框：切片类型：选图像时当前切片在输出时生成一个图像。 x,y:切片左上角的坐标 w切片工具是切割图像用的，一般情况下用切片工具在图中切出一块区域即可。另外，点视图-显示-切片也可以将切片显示出来。保存时选保存为WEB所用文件格式。找到保存的文件夹:切片的长度和宽度。如果要等分图像，可以看到我们切好的图片。名称：给切片链接一个网址目标：切片在哪个窗口中打开：为切片起名，当前切片生成图像时和切片名字一样。 url，无图像则不生成

photoshop如何使用切片工具

3，如何用PSD切片用CSSDIV布局我想知道的是技巧方面的谢谢了

PSD 就是网页设计图，而 CSS+DIV 则属于网页代码方面的，网页制作就是把平面设计图转化为网页的形式。1. 设计图要区分好背景和文字，一般除了广告图里面的文字以外全部文字都不作为背景，背景有底面背景、模块背景、头部背景、导航栏背景、和一些按钮图标，每一处的背景都要将上层文字隐藏，然后把每一块都切片，一个图大约有几十个背景图片。2. 切片的技巧，切片后，保存为 Web 应用格式，一般的背景图片可以用 GIF 格式存储，可调节颜色数量(只有黑白两种颜色就选择2)，这样图片文件较小；而广告图就用 JPG 格式存储，品质8左右就足够了。3. CSS+DIV ：一个是用 div 布局，技巧很多，例如，一般网站都按照头部—中部—尾部三大块布局，还有“先上下后左右”的原则布局；另一个就是用CSS控制样式，元素样式完全使用样式表控制，样式表技巧更多，表分类可以分开全局样式表、首页样式表、栏目页样式表，另外有解决浏览器兼容问题的元素默认样式，还有公共类样式，例如 .w980 代表宽度为980px的网页 .hot 热门词加个深一点的颜色，等等。

我以前给其他网友回答过这个问题，做了个简单图片。 见图片： 这个是对于刚入门学习网页设计的作法，输出的table，div+css就要自己去重新布局并书写代码了。 我曾经写过一篇文章你可以去看一下... 祝你成功！

如何用PSD切片用CSSDIV布局我想知道的是技巧方面的谢谢了

4，如何正确使用Photoshop切片工具

在网页中处理图片时，有时会想要加载一个大的图像，比如页面上的主图，或者是背景。如果文件很大，它加载的时候需要的时间就会长，尤其是用户网速比较慢的时候。你可以通过压缩来减小文件大小，但是这会使图像质量受到影响，压缩文件也要适可而止。因此你需要注意以下几个问题：一是实际文件的大小；二是分辨率；三是压缩。　　解决这个问题的方法就是把图片分割，它将允许你在加载图片的时候可以一片一片地加载，直到整个图像出现在你的屏幕上。　　1 它的使用原理　　首先概述下它的工作原理,当你有一个需要花很长时间来加载的大图像时，你可以使用Photoshop中的切片工具把图像切成几个小图。这些图像将被作为一个单独的文件保存，还可以进行优化通过保存为中Web所用格式。　　此外,Photoshop生成HTML和CSS以便用来显示切片图像。在网页中使用时，图像通过使用前面提到的HTML或CSS在浏览器中重新组合以便达到一个平滑流畅的效果。　　2 切片的基础知识　　为了简单起见,我们只在一个图上使用切片工具。在这个例子中,我使用的图片大小为960 x722px。在我们开始之前你需要了解一些知识:　　a.在创建切片时,你可以使用切片工具或构建使用层。　　b.切片可以选择使用选择工具来选中。　　c.你可以移动它，设置它的大小，还可以让切片与其他切片对齐。而且你还可以给切片指定一个名称,类型和URL。　　d.每个切片都可以通过保存时的网页对话框进行优化设置。　　按下键盘上的C键，选中裁剪工具，右键选择切片工具。　　当您创建切片时，你可以进行如下三个样式设置:正常,固定长宽比和固定大小。　　a.正常:随意切片，切片的大小和位置取决于你在图像中所画的框开始和结束的位置　　b.固定长宽比:给高度和宽度设置数字后，你得到的切片框就会是这个长宽比　　c.固定大小:固定设置长和宽的大小　　当分割图像时你会碰到一些选项。如果精确度不那么重要时,你可以手工切片图像,必要的时候,可以使用切片选择工具对已完成的切片图像进行调整。如果精确度很重要，可以使用参考线在图像上标出重要的位置。在顶部的切片菜单栏,点击C或切片工具激活它片上面菜单栏图片,画好参考线后选择基于参考线的切片的按钮。它就会自动为您绘制切片。你还可以使用切片选择工具重新定位切片。

首先我们打开photoshop软件，小编这里用的是cc版本。然后我们打开一张psd图片，最好是有小图标的那种。所谓切片工具，其实主要是用在网页制作中的图片制作，把psd中的图片用切片切出来，然后在网页中使用。我们把psd图片中的小图标用切片工具切一下，也就是点击切片工具，然后沿着小图标的边缘划一下，就会出现切片的线。在切出来的图片上右击还可以编辑切片大小等属性。关键是保存，我们需要点击文件，然后点击“存储为web所用格式”选项。可以选择要存储成的格式，然后点击存储。然后选择保存为图片格式，保存选中的切片即可。切出来的其实就是普通的图片而已，只是控制了一下图片的大小等信息。按照这个步骤来，要是还不太明白的话，建议百度雷达下载，那里有图文结合教程