ps网页切图(ps网页切片教程)

怎么用photoshop切图片？

1、首先打开电脑上的PS 软件，双击打开，进入操作页面。

2、然后打开或者拖入要切的图片。

3、接着选用工具栏里的-切图工具，根据自己喜好进行切图。

4、切完之后，ctrl+shift+alt+s 一起按。保存切图弹出窗口在最左上角“预设”。

5、单击打开可以选择自己要的格式。

6、之后就可以直接保存了，下面的格式都变成了预设的格式了。

如何用PS切图和输出网页

PS具有切图和输出网页功能，具体操作如下：

一、使用工具：Photoshop CS2

二、操作步骤：

1、进入PS打开要切图的图片，点击工具箱中的”切片“工具，选择切片工具，如图：

2、使用切片工具对图片进行切片，也可以使用“选择切片工具”进行调整切图位置大小，如图：

3、点击“文件”菜单中的“存储为WEB所有格式”，如图：

4、选择保存图片格式及品质度，然后按“存储”按钮，如图：

5、在保存类型中选择“HTML和图像(*.html)”类型，输入要保存的网页名称，然后按“保存”按钮，这样网页就输出完成了，如图：

ps网页切图(ps网页切片教程)

PS切图的流程（网页制作）

我们在制作网页的时候常常需要上传图片，如果图片比较大此时我们就需要对图片进行切片处理，下面我们就来看看使用ps是如何进行切图的吧。

首先将ps打开然后按下Ctrl+O键就会弹出打开对话框，在打开的对话框内我们找到需要的图片，如图所示：

打开图片之后在工具箱内找到裁剪工具，如图所示：

点击裁剪工具下面的三角箭头，在其子级菜单哪里找到切片工具，如图所示：

点击切片工具我们就可以根据自己的需要对图片进行切片处理了，如图所示：

做好的网页平面图用Photoshop怎么正确切图

Photoshop软件，简称“PS”，是由Adobe Systems开发和发行的图像处理软件，Photoshop主要处理以像素所构成的数字图像，其众多的编修与绘图工具，可以有效地进行图片编辑工作。用Photoshop cc2014软件将做好的网页平面图切图的详细制作方法是：

1、打开ps软件，“文件--打开”做好的网页平面图；

2、打开“切片工具”，设置“样式”正常；

3、用“切片工具”在图片上右键打开--划分切片，根据实际需要，设置“切片”数，“水平划分为”2，“垂直划分为”2，确定；

4、“文件--存储为web所用格式”，存储，取好文件名，保存；

5、打开电脑“文档”，可以看到一个专门文件夹“images”，打开文件夹即可看到切好的图片了。

网页如何切图

问题一：网页切图怎么做? 网页设计切图 网页切图怎么做？网页设计切图

制作网页，很多的时候，首先要用图片处理软件制作出网页的效果图。效果图做好是一幅完整的图片，不可能把这一整张的图片都用在网页里。把效果图中有用的部分剪切下来作为网页制作时的素材，这个过程就是切图。（当然是用剪切、选择工具也可以，但是用切片工具处理更精确。）

切图的目的就是更加精确的进行网页布局。

photoshop、fireworks等软件都带有切片工具。

问题二：页面设计页面制作 这种背景的页面怎么切图的啊。。。主要是背景怎么整的。。。 目前我无法判断你那些图片带链接，所以只能大概的给你讲一下（目前文字部分我先不管），具体我拿第三张来讲给你吧。

首先，把所有要做链接的图层都隐藏掉，剩下的层，就可以用来切图，整体背景是蓝色，所以css搞定就行。

其次，背景有一张整体的背景图，这个需要全部单独切下来，图片上面不要带任何其他元素，就只是这张单独的图片就好，布局的时候引用为背景！

然后，剩下的就是主体部分，上面的播放视频和文字我就不讲了，简单，底部的汽车促销图片也切一张大图就好，也简单。

最后，就剩下最难搞的中间部分，大概想了一下，2种方法实现，如下：

1、切成整张大图，需要做链接的地方，画上不规则热区就好了！这种比较简单些。

2、图片什么样，就切成什么样，每张小图都单独切出来（注意：要做成png格式保存，背景设置为透明），然后写html的时候，用css画出等大的不规则图形，吧图片当做背景加进去，然后用css绝对定位一下，如有链接加链接，完美实现！

备注：css画不规则图形，网上可以搜到教程，看一看就差不多，不难！

至于其他几张图，比较简单，简单说一下第二张，第二张的其实如果想简单实现，那就除文字和纯背景色外，整张切，然后有链接的地方加热点就好，想做复杂一点，就可以用到我所说的css画不规则图形，纯色的三个纵横条，不用切，css画出来，添加背景色，然后绝对定位就好，其他的该切多大就切多大，然后用css绝对定位，设置好z-index的关系，就ok了！

之前做过很多这样的网站，这都是经验之谈，完全能实现，要有问题再问我！完全纯手打啊~~

问题三：photoshop网页切图怎么用 1、首先需要用photoshop把psd源文件打开，看看源文件的整体布局。源文件是分层的，方便切图的层次。

2、切图的工具叫做“切片”，在左侧面板可以看到。右击可以看到“切片工具”和“切片选择工具”按钮。

3、用放大镜将所要切的图片部分放大，可以用参考线确定大小，切图是可以沿参考线切。

4、切换到切片工具，沿参考线划出切片，右击可以看到有可以编辑切片的选项，可以设置切片像素大小。

5、切好后就可以单击菜单栏“文件”，选择“存储为web所用格式”选项。

6、选择要存储的切片，然后右上角可以设置图片的格式、质量大小，设置好以后就可以单击保存了。

7、保存需要保存的切片，选择好路径即可，单击保存即完成。打开保存好的图片，如图。

注意事项

注意保存时最好自己设置路径，settings选项。

问题四：怎么用ps做html切图 ，详细！ 10分 先切小片然后写代码 不是一句话两句话能说清楚的

问题五：UI 中网页设计切图怎么切 PxCook，目前我还没用上Mac，所以也不知道传说中的Sketch到底多神奇。PxCook在Windows上标注还比较顺手，虽然它还附带切图功能，但是比较鸡肋，不推荐用它切图。

切图工具：

Cutterman 一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比较高，针对CS 6的已经不维护更新了。推荐安装官方完整版PS cc，然后自行破解。官网上有安装使用教程，自己研究下吧，因为我也是最近才开始接触这款插件。

Part 2 Photoshop

现在常用的几种设计尺寸

1. 640*960 4时代的尺寸，刚接触APP设计用的是这个尺寸，拟物盛行的时代(现在用这个尺寸设计的应该比较少了吧)；

2. 640*1136 5/5S/5C，IPhone更新，咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸)，进入扁平的时代了；

3. 750*1334 6 目前我做设计稿的设计尺寸，IPhone6的尺寸，向下可以适配4，5，向上可以适配6 plus；我记得IP6推出后，我问总监应该用什么尺寸设计，他说用IP6的吧，好适配，切出来就是@2x了，改一改上下都能照顾到。

问题六：网页切图是不是一般只切按钮部分？别的比如背景都用CSS实现？ 一般来说，比如网站logo、网站相关的图片(例如产品图片,不规则的形状图片等)、渐变、特殊字体(宋体、黑体、微软雅黑以外的字体)，几乎都是要切成图片来做的。切成图片又分为2胆，一种通过设置css背景，另外一种是直接标签加路径调用。

其他的全部用css来实现。

问题七：ps如何切图成HTML页面 希望给一个详细流程操作 修改好相应的文字与图象之后，我们就将PSD文件输出(X)HTML文件。

首先得先对PSD文件做切片，有两种方法：

①使用工具栏上的“切片工具”，

然后在图象上划出一块一块的区域。

②使用基于参考线的切片，按ctrl+R调出标尺栏，

把鼠标移动到标尺上，按住鼠标左键，移动到图象上，将会看到一条绿色的参考线，如图

将参考线；排好，然后点一下工具栏上的切片工具图表，然后点上面

选项栏里的“基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了。

接下来就可以输出了:

①依次选择菜单栏上的“文件”→“存储为Web所用格式”→“存储”。

②接下来就会弹出一个“将优化结果存储为”的窗口，如图

在“保存类型”处有个下拉列框可以选择，因为我们要存储为网页的格式，所以选择“HTML和图象(* html)”，再选择“保存”就可以输出憨个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。

③如果我们需要输出“div+css的网页”我们还可以这么做：

在“设置”处的下拉列框，选择“其他”

就会弹出一个“输出设置”的窗口

在第2个下拉列框处选择“切片”

选择“生成CSS”

单击“好”→“保存”就可以输出一个目前流行的“div+css”的HTML网页。

问题八：网页美工是怎样进行图片切图的 步骤如下：

1.首先我们需要用到的文件就是psd的文件了，一般都是由设计师来完成的，我们切图也就是切psd文件，因为psd文件是分层的，所以想切哪里切哪里。

2.之后用Photoshop软件打开psd文件，这里小鱼用CC版本演示，其他版本大同小异。我们打开之后可以双击左侧的放大镜工具，将图片缩放到原图大小。

3.我们要切图，当然用到的就是“切片”工具了，可以点击左边的切片工具，也可以右击这个图标选择更多的相关工具。切图都是用切片工具。

4.选择好切片工具之后，想要切哪里就直接拖动鼠标就可以了，然后会出现切线，在切线框内右击还可以弹出菜单。

5.点击菜单的编辑切片选项还可以对切片进行编辑，可以编辑大小等项目。

6.但是如果我们只想要字怎么办，不要底层背景，那么可以用“移动”工具。选择移动工具，在不要的背景上单击，这时候在“图层”面板里面就会选中这个图层。注意勾选上面的“自动选择图层”。

7.把选中的不需要的背景前面的小眼睛去掉，最后只剩我们想要的部分。

8.然后点击左上角菜单栏的“文件”，选择“存储为web所用格式”选项。

9.如果要透明的，那么一般选择png格式，如果要非透明的，那么哪个格式存储的文件小就选择哪个，这样能保证网页加载速度快。然后点击下面的“存储”按钮。

10.然后给图片命名，选择一个保存地址，最后选择“选中的切片”，不然好多没用的图片都会保存下来。

11.最后找到保存好的图片打开，已经是一个我们想要的图片了。

问题九：如何把图片切成HTML页面 用 ImageReady

其次打开你想做切片的图片

在英文输入法下，在程序界面中按 K 切换到切片工具

在图片上随意进行切片

按CTRL+ALT+SHIFT+S 将优化结果存储为

保存类型下拉框拉下来选择“HTML和图像”

进行保存

或者使用photoshop的 切片工具 操作！

这是教程

wenku.baidu/...a

wenku.baidu/...6

希望帮到你

问题十：网页切图什么意思，怎么切法 如果你登着QQ

同时按下Ctrl+Alt+A这三个键就可以切图了。

如果没登QQ，系统也有自带的截图功能，就是键盘上的PrtScrSysRq，不过这是全屏截图

然后在开始~所有程序~附件中打开“截图工具”，然后再按下ctrl+print（键盘上的PrtScrSysRq键）即可

切的图可以保存在自己电脑，也可以发给自己的朋友。

谢谢！

ps如何切图成HTML页面希望给一个详细流程操作

1、在AdobePhotoshopCC中打开设计好的PS图片文件

2、按键盘快捷键Ctrl+R调出参考线功能

3、在标尺上按住鼠标左键拉出辅助线到相应位置

4、选择切片工具，或键盘快捷键C，激活切片功能；点击基于参考线的切片，软件自动将辅助线条之间分割成若干切片（注：放大检查辅助线位置会更精准）

5、选择菜单【文件】>存储为web格式，调出web格式窗口

6、点击【存储】按钮，进入存储窗口

7、存储窗口中格式选择Html和图像，所有切片；然后保存

8、自动生成网页代码文件和图像；如图示：图片文件夹images和html代码文件。

详情页长图ps切片怎么用

在PS操作中，PS制作淘宝详情页及如何切图。

电脑：华为MateBook14

系统：Windows10

软件：ps1.0

1、用PS打开淘宝详情页图片。

2、用标尺将每个需要切片的图片隔开。

3、标尺全部标注完成。

4、点击使用【切片工具】

5、将图片全部切出。

6、点击【文件】→【导出】→【储存为web所用格式】

7、点击【储存】

8、设置一下保存位置以及文件名称和格式，最后点击【确定】即可。

9、进入刚刚保存的文件夹，就可以看见导出的切片了，还可以在网页上点击观看详情页。

photoshop网页切图怎么用

Photoshop软件“切片工具”是制作网页切图的常用工具，利用切片工具把一张大图切片成需要的小图片，便于制作成网页页面，以Photoshop cc2014软件为例，切片工具的使用方法是：

1、打开ps软件，“文件--打开”，打开一张要处理的图片；

2、打开“切片工具”，在桌面上右键点击图片，“划分切片...”;

3、根据需要设置切片数，水平划分--3，垂直划分--2，确定；

4、打开“文件--存储为web所用格式--存储”，保存；

5、打开“电脑--文档”，在文档里，有一个“images”专门文件夹，打开，里面有需要的切好的小图片，完成。