其实切图软件的问题并不复杂,但是又很多的朋友都不太了解切图 切片软件哪个好用,因此呢,今天小编就来为大家分享切图软件的一些知识,希望可以帮助到大家,下面我们一起来看看这个问题的分析吧!
一、psd在线切图-在线PS怎么划分切片
photoshop怎么切图
1.传统切图
(1)打开一个psd文件,选择ps左边菜单栏的裁剪工具,选择切片工具。首先我们对这个psd文件进行分析,有意识的将其划分成几个选区,然后通过鼠标的拖拽用切片工具将我们所需要的图案切下来。
蓝色标号的切片是我们手动选择的切片,灰色标号是自动生成的切片,然后导出这些切图,选择文件—>导出—>存储为Web所用格式,保存到你要用的文件夹里。
问题:观察上述操作,我们会发现这样一个一个图案切太麻烦耗时了,如果一个电商网站要你切几百个图肿么办?于是有下面一个较为方便的办法:
(2)一般设计师在设计的时候通常会用到参考线,那我们也可用参考线来简化切图操作,首先选定你要切的某个图案的图层,然后用鼠标拖动左部或顶部的标尺将其拉到该图案的边界,该边界会自动吸附参考线,因而比较准确,这样这个图案的参考线就设置好了,同理再去设置其他图案的参考线
由于参考线密集,会出现很多我们不需要的切片,我们可以点击鼠标右键删除不需要的,我们发现像这样一次性切图太累了,要删除很多不用的切片,所以建议将psd文件进行裁剪一块一块切,然后关闭参考线检查切图。最后将切片导出到文件夹里。
以上就是传统切图方式,比较麻烦耗时且不精准,所以我们使用计算机进行精准切图。
下面我们来用photoshop的'脚本进行一种更加快捷精准的切图方法。它的优点在于,自动化切图省时省力,计算机自动计算,尺寸更精确。
首先打开一个psd文件,选择文件—>导出—>将图层导出到文件—设置其属性,选择存储位置和保存类型,勾选透明区域,交错,裁剪图层,最后运行导出,这个过程需要等几分钟。建议还是一块一块区域切。
3.photoshopCC版本的精准切图—自动切图
(1)首先我们选择一个需要切的图案,选择其图层。然后设置参数,选择编辑—>首选项—>增效工具—>勾选启用生成器,点击确定。选择文件—>生成—>图像资源。我们发现在psd文件所属目录下会生成一个空的.assets文件夹,最后我们将该图层的名字后缀改为.png,会发现assets文件夹里多出了我们切的图案,这样一个图案就切好了。
(2)在(1)的基础上,很容易导出SVG格式,只需要将该图案所在的图层名字后缀改为.svg就可以。
问题一:网页切图怎么做?网页设计切图网页切图怎么做?网页设计切图
制作网页,很多的时候,首先要用图片处理软件制作出网页的效果图。效果图做好是一幅完整的图片,不可能把这一整张的图片都用在网页里。把效果图中有用的部分剪切下来作为网页制作时的素材,这个过程就是切图。(当然是用剪切、选择工具也可以,但是用切片工具处理更精确。)
切图的目的就是更加精确的进行网页布局。
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版本要求比较高,针对CS6的已经不维护更新了。推荐安装官方完整版PScc,然后自行破解。官网上有安装使用教程,自己研究下吧,因为我也是最近才开始接触这款插件。
1.640*9604时代的尺寸,刚接触APP设计用的是这个尺寸,拟物盛行的时代(现在用这个尺寸设计的应该比较少了吧);
2.640*11365/5S/5C,IPhone更新,咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸),进入扁平的时代了;
3.750*13346目前我做设计稿的设计尺寸,IPhone6的尺寸,向下可以适配4,5,向上可以适配6plus;我记得IP6推出后,我问总监应该用什么尺寸设计,他说用IP6的吧,好适配,切出来就是@2x了,改一改上下都能照顾到。
问题六:网页切图是不是一般只切按钮部分?别的比如背景都用CSS实现?一般来说,比如网站logo、网站相关的图片(例如产品图片,不规则的形状图片等)、渐变、特殊字体(宋体、黑体、微软雅黑以外的字体),几乎都是要切成图片来做的。切成图片又分为2胆,一种通过设置css背景,另外一种是直接标签加路径调用。
问题七:ps如何切图成HTML页面希望给一个详细流程操作修改好相应的文字与图象之后,我们就将PSD文件输出(X)HTML文件。
首先得先对PSD文件做切片,有两种方法:
然后在图象上划出一块一块的区域。
②使用基于参考线的切片,按ctrl+R调出标尺栏,
把鼠标移动到标尺上,按住鼠标左键,移动到图象上,将会看到一条绿色的参考线,如图
将参考线;排好,然后点一下工具栏上的切片工具图表,然后点上面
选项栏里的“基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了。
①依次选择菜单栏上的“文件”→“存储为Web所用格式”→“存储”。
②接下来就会弹出一个“将优化结果存储为”的窗口,如图
在“保存类型”处有个下拉列框可以选择,因为我们要存储为网页的格式,所以选择“HTML和图象(*html)”,再选择“保存”就可以输出憨个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。
③如果我们需要输出“div+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的切片工具操作!
问题十:网页切图什么意思,怎么切法如果你登着QQ
同时按下Ctrl+Alt+A这三个键就可以切图了。
如果没登QQ,系统也有自带的截图功能,就是键盘上的PrtScrSysRq,不过这是全屏截图
然后在开始~所有程序~附件中打开“截图工具”,然后再按下ctrl+print(键盘上的PrtScrSysRq键)即可
切的图可以保存在自己电脑,也可以发给自己的朋友。
PS自带有切片工具,不过用起来比较麻烦,如果是交付UI设计稿,借助摹客这样专业的在线切图工具比较合适,可以自动生成不同尺寸不同分辨率的切图,也支持切换不同的平台。
在摹客官网下载安装摹客PS插件,插件安装好后打开PS,在「窗口>扩展功能」找到摹客插件,选择并打开。
选中需要切图的画板、图层或编组,点击「标记切图」。
选中目标名称前出现“-e-”,「标记切图」选项变为「取消切图标记」,此时切图操作便完成了。
(注意:标记切图只需标记需要切图的图层,标记无用的切图过多可能会导致上传失败。)
点击倍率下拉框,根据设计稿的画板大小,选择设计稿对应的倍率。例:750px*1334px的设计稿对应@2×。
点击「上传所选画板」或「上传全部画板」,一键将设计稿上传至云端项目中。
点击「查看项目」打开设计稿,在“开发”模式中,即可一键下载选中切图或所有切图。
使用摹客切图,可快速切换平台(iOS、Android、Web)和选择倍率,支持自定切图尺寸和切图压缩,非常方便。
二、切图用什么软件
1、问题一:网站切图用什么软件好不知道你用的是什么系统,
2、如遨游,火狐等浏览器本身就带有网页截图软件。
3、如果你说的是设计网站时的切图,可以用Photoshop,比三剑客的好用。
4、问题二:什么是切图?用什么工具来切?制作网页,很多的时候,首先要用图片处理软件制作出网页的效果图。效果图做好是一幅完整的图片,不可能把这一整张的图片都用在网页里。把效果图中有用的部分剪切下来作为网页制作时的素材,这个过程就是切图。
5、在PS中,用切片工具切图,然后切换到Dreamweaver(中文是梦想编织者,网页设计软件)里用的。因为如果一个网页里大图太多,影响下载速度,所以不知道谁发明的,把PS出来的图中的纯色部分和其他部分分开,到DW以后再上颜色。其实就是把一个完整的图,切成几片而已(主意不是图层),就叫切片了。这样一来如果你想把某个部分{片}设个链接,貌似很方便。
6、切图的目的就是更加精确的进行网页布局。
7、 photoshop、fireworks等软件都带有切片工具。
8、问题三:用什么工具可以把图片精确的切图可以用photoshop嘛……用里面的切片工具就可以了用的是切片功能哦先选切片工具,右击图片-划分切片,勾选垂直或是水平分割(或者都选),设置分割数或者是设置每个切片需要大小(你这个情况是两都勾选,然后都填上 256像素/切片)然后会出现图片的切片然后菜单栏-文件-存储为web所用格式,选gif格式,保存好后,会在你保存的文件夹上出现一个image名字的文件夹,里面就是你所分割的所有图片部件了……
9、问题四:什么软件可以切图上四下四你是要这样的吗,已经切好
10、问题五:软件什么软件可以切图最好八格素材:一张图片
11、 1,先用打开PS软件。打开一张图片,右击选择切片选择工具
12、 2,点击一下图片,选择划分,输入以下参数
13、采纳我吧,我为你做这教程工作量很大的。
14、问题六:哪个软件可以16格切图用ps,就是Photoshop,可以按照你的尺寸切,可以等比例切,可以任意切
15、如果没用过的话,你可以发来,我先切给你看看
16、问题七:这个切图的标注用什么软件 ps可以吗 5分看图像是Assistor吧
17、问题八:用ps怎么切图你指的切图是,做成页面,还是。
18、 1,做页面。如果你的效果图是一张图片,不需要后台数据的交互和用文字表述的。可以直接用切片工具,方便一点。
19、 2,如果你的效果,有数据的交互,或是要把以文字的形势,就要把图切的很细了。那可以,用选区工具,把要切的部分,复制,粘贴新建文档,保存出来。
20、 3,如果你是把一张图切一部分,可以用裁剪工具,和用选区的方法。
21、问题九:用什么软件八格切图呢?到360助手搜《陌陌图片》一键八格切图六格切图,安卓版切图后自动放大没有上传照片分辨率过低的困扰!其他助手很快审核
三、PS软件中的切片工具怎么进行切图导出
我们在自己的电商店铺上,想要给详情页的图片进行切图大小和长度的设置,可以使用PS软件中的切片工具进行切图导出,今天就跟大家介绍一下PS软件中的切片工具怎么进行切图导出的具体操作步骤。
1.首先打开电脑上的PS软件,进入主页面后,将制作好的详情页导入软件中
2.然后点击左侧的“裁剪工具”---“切片工具”选项。
3.在图层上,右键,在打开的菜单中,选择“划分切片”选项。
4.如图,弹出“划分切片”的窗口,将“水平划分”勾选上,并点选上“1500像素”。
5.点击右上角的确定按钮,这样,我们就切出了1500像素且高度一样的图片。
6.接下来,依次点击点击左上角的“文件”---“另存为Web所有格式”,按键盘上的“shift Ctrl alt s”组合键也可以,
7.如图,最后,我们在电脑中的“images”文件夹中,就可以查看切出的图片了。
关于切图软件到此分享完毕,希望能帮助到您。