`
zccst
  • 浏览: 3323085 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

photoshop如何快速切图

阅读更多
作者:zccst

作为业余爱好,之前都是用比较笨的方法切图,甚至用裁剪工具一张一张的切。

后来知道用切片工具,但也仅限于互不重叠的图片。



在工作中实际使用时才发现实在是太慢了,慢到上级自己说你不用做了,我来吧。



其实,有更快的切图方式

1,使用切片工具选中每一个图片,然后一次性另存为Web格式。

如果两个图片有重叠,可以用移动工具把两个模块分离。(当鼠标选中移动工具时,菜单栏中的自动选择勾选去掉,这样可以以模块为单位整体移动)

有些图片是错位重叠,有些完全是先后关系,其实本质都是一样的,完全移开就行了。

2,对于多态的图片,可以另存为Web格式后,把另一态选中,再次另存为。这样多态都有了。



另外,几点小经验(快捷键):

(1) 对于找到当前图层。选中移动工具,菜单栏中有一个自动选择勾选,然后下拉菜单中选择图层。

(2) 对于图层选中的快捷键。切图时用得上。

alt + 眼睛 :可以反选,即只保留眼睛所在的图层或文件夹。

(3) 在切片情况下,隐藏切片线快捷键。 ctrl+h
分享到:
评论

相关推荐

    photoshop网页切图教程.pdf

    本教程旨在教授如何使用Adobe Photoshop进行网页设计的切图,并将其转换成网页代码。在开始之前,需要对网页设计的基本概念有所了解,包括HTML、CSS以及Photoshop的基本操作。 首先,熟悉HTML(HyperText Markup ...

    前端切图-photoshop界面设置.pdf

    Photoshop 是一款强大的图像处理和设计软件,广泛应用于前端开发中的切图工作。切图是将设计稿转化为可编程的网页元素的过程,对于前端开发者来说至关重要。以下将详细讲解Photoshop界面设置及其在切图过程中的应用...

    Photoshop(PS)切图教程 DIV CSS开发之PS软件教程 DIVCSS5.docx

    本文将深入讲解Photoshop在切图、抠图、Logo制作以及水印制作等方面的应用,并提供相关教程资源。 1. **PS切图基础** 切图是指将设计稿中的各个元素按照需求切割成独立的图片,以便于在网页中进行精确布局。在PS中...

    卡特曼-切图工具

    "卡特曼-切图工具"是一款专为Photoshop用户设计的强大切图工具,它极大地提高了设计师在工作流程中的效率。这款工具以其易用性和高效性而受到广泛好评,是许多专业设计师进行网页和移动应用界面设计时不可或缺的辅助...

    ps批量切图.rar

    在标签“ps一键切图”中,我们可以推测这个工具或者方法可能是专门为了解决Photoshop用户在切图过程中的痛点而设计的,它简化了切图流程,使得即使是不熟悉代码的设计师也能快速地完成切图任务。 压缩包内的文件...

    ps载入切图神器实现快速切图

    "ps载入切图神器实现快速切图"这个主题涉及到的是利用Adobe Photoshop(简称PS)中的自动化功能来加速切图过程,这对于前端开发人员和UI设计师来说是一项必备技能。切图神器,通常是指一种自动动作(Action)集合,...

    psd导入Unity快速切图全文档

    本文档“psd导入Unity快速切图全文档”主要针对如何高效地将Photoshop(psd)文件中的设计资源导入到Unity中进行切图操作,从而实现游戏UI的快速构建。 首先,Photoshop(psd)是Adobe公司的图像设计软件,广泛用于...

    ps切图神器

    photoshop动作切图小工具,可以快速切出移动界面或网站界面并且导出

    网页设计,photoshop,图像处理

    通过"photoshop快速入门(上册).exe"和"photoshop快速入门(下册).exe"这两个教程,您可以系统地学习Photoshop的基础操作和进阶技巧,逐步成长为一名熟练的网页设计师。在学习过程中,不断实践并积累经验,是提高...

    photoshop cs6 ios系统 android系统切图插件(强力推荐)

    又是一个快速切图的插件,但他的功能更是强悍,不光可以针对ios、android版本设计切图,同时对于网页设计的童鞋来说也是一个不错的选择,可以逐层切出,编组切出,也可以选择性的切出。(本文来自于互联网,版权归...

    切图工具及切图效果(真的很不错哦)

    1. Adobe Photoshop:作为图形设计领域的经典软件,Photoshop提供了丰富的编辑和切片工具,可以精确地裁剪出所需的图像部分。其“切片工具”可帮助用户定义并导出多个独立的图像区域。 2. Sketch:专为UI/UX设计...

    web前端之“一键切图”

    5. **应用动作**:选择需要切图的文件,点击动作面板中的相应动作,按下预设的快捷键(如F2),Photoshop就会按照之前录制的动作自动完成切图。 6. **优化切图**:为了适应不同设备和屏幕尺寸,通常还需要生成多种...

    切图工具cutterman

    Cutterman,这款被誉为“切图神器”的插件,正是专为Photoshop设计的切图工具,其强大功能和便捷操作赢得了众多设计师的喜爱。 Cutterman的主要特点在于它无缝集成于Photoshop中,只要你的Photoshop版本在6以上,就...

    Cutterman 3.5.1.zip

    Cutterman是一款专门为Adobe Photoshop设计的强大切图工具,它的出现极大地提升了设计师的工作效率。Cutterman 3.5.1是该软件的一个免费版本,它提供了丰富的切图功能,适用于网页设计、移动应用界面设计等领域。 ...

    Photoshop制作网站.doc

    在Photoshop中制作网站主要包括版面设计、元素设计、切图和整合其他软件如Flash和Dreamweaver的工作流程。以下是对【标题】"Photoshop制作网站.doc"和【描述】的详细解析: 1. **版面设计**: - Photoshop 提供了...

    photoshop智能手机app界面设计

    总结来说,使用Photoshop进行智能手机App界面设计需要掌握基本的Photoshop技能,理解设计原则,熟练创建和编辑界面元素,注重文字排版,以及进行切图和适配工作。设计师还需要具备良好的沟通能力,以便与开发团队...

    From Photoshop to HTML.

    ### 从Photoshop到HTML:专业切图指南 #### 前言与介绍 本书《从Photoshop到HTML》由杰弗里·韦(Jeffrey Way)撰写,于2010年由Rockable Press出版社出版。该书是一本实用手册,旨在帮助读者将设计作品从Adobe ...

    教程网页设计+入门+切图

    步骤2:在 PhotoShop 中选择 file-save for web...来输出,注意一些参数的选择。 步骤3:定义站点:在 Dreamweaver 里建立站点,选择站点名称和文件夹。 步骤4:重新制作页面表格,因为直接导出的 htm 文件是不...

    PS零基础精通 Photoshop CC

    Photoshop CC 是Adobe公司开发的一款专业级...在UI设计中,Photoshop通常用于制作界面元素、切图以及设计初稿,是设计师不可或缺的工具之一。因此,无论是对个人兴趣还是职业发展,精通Photoshop CC都是非常有价值的。

Global site tag (gtag.js) - Google Analytics