Photoshop切片 及 移动端适配资料链接

最新推荐文章于 2024-07-26 22:52:00 发布
最新推荐文章于 2024-07-26 22:52:00 发布
阅读量390 收藏
点赞数
分类专栏： photoshop 文章标签： photoshop
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanghj819/article/details/77863443
版权

安装最新的Photoshop CC，拿到设计的PSD源文件
课程：http://www.maiziedu.com/course/231/

标尺使用

http://jingyan.baidu.com/article/870c6fc337a887b03fe4bea6.html

ctrl+r 显示标尺
可拖出辅助线

切片工具使用

按c选择，右键切片工具

单个图片保存
ctrl+alt+shift+s 存储为web格式，里面点击切片，编辑格式，点击“存储…”，里面选择格式：仅限图像，切片：选中的切片

ctrl+alt+shift+s 后，可编辑每个切片的格式，然后点击完成。下次再ctrl+alt+shift+s 的时候会保留之前的设置。

如何设置导出命名切片后带@1x，@2x等

默认移动端psd是按照2倍图去设计的，因此导出@1x切片时需要选择50%，@3x是150%。

设置图像大小百分比

设置图像大小百分比

设置导出切片名称

点击“存储…”，设置选择“其他”，然后按下图设置，其中可储存和载入该设置，方便以后调整。
设置导出切片名称

导出时选择自己的设置

导出时选择自己的设置

保存即可

移动端适配资料链接参考

http://www.jianshu.com/p/3a5063028706

雪碧图制作工具

https://www.toptal.com/developers/css/sprite-generator

zhanghj819
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
photoshop切片的使用
Lin_M1104的博客
03-22 9165
文章目录一、photoshop中切片工具的使用方法【切图】二、什么是雪碧图（CSS Sprites图片切割术）优点缺点使用 background属性 三、如何在psd上切图 一、photoshop中切片工具的使用方法【切图】 在前端编写页面时，部分小图标会使用ps中的切片工具将UI给的小图标组合在一起的大图片进行分割，小编今天将切片工具的使用方法分享给大家。 1.首先找一张图标很多的大图片，将图片放置画布中。 2.选择工具栏中的“切片”工具。 3.从最上方开始画出区域，将图片裁切为需要的部分
ui设计移动端字体适配_超全面的UI设计规范整理汇总（包含iPhone X适配）
weixin_39772849的博客
12-20 872
写在前面很多新人在开始做移动端UI设计的时候，往往对界面的一些尺寸规范不是十分清楚，很多时候都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。目录01.界面设计尺寸及栏高度02.边...
PhotoShop 基本知识
weixin_40544320的博客
08-26 363
PS切图技巧
xumeishan的博客
07-28 1972
为什么要切图？了解iphone界面和Android图标的尺寸在实际设计过程中，为了降低设计成本，一般选择分辨率最高的设备作为设计稿的原始尺寸，因为1倍图放大成为2倍图远比2倍图缩小成1倍图来的模糊！Android开源自由的代价就是设备规范的不可控，市面上充斥着各种品牌的android手机，有着各种各样的尺寸和分辨率，为了适配各种不同分辨率的设备，同一个图标需要切成N份，每一份对应一个尺寸。另外需要注
Photoshop CC 2018 Essential Training: The Basics Photoshop CC 2018基本培训：基础 Lynda课程中文字幕
lyndacn的博客
05-06 535
Photoshop CC 2018 Essential Training: The Basics 中文字幕 Photoshop CC 2018基本培训：基础 中文字幕Photoshop CC 2018 Essential Training: The Basics 无论您是摄影师，设计师还是插画师，学习如何高效高效地使用Photoshop CC 2018都是您可以从中获得最大收益的有益投资 Ado...
Photoshop CC 2018 Essential Training: Photography Photoshop CC 2018基础培训：摄影 Lynda课程中文字幕
lyndacn的博客
05-07 163
Photoshop CC 2018 Essential Training: Photography 中文字幕 Photoshop CC 2018基础培训：摄影 中文字幕Photoshop CC 2018 Essential Training: Photography Photoshop是一个复杂的产品，有时甚至是令人生畏的产品 在本课程中，Julieanne Kost回顾了数字成像的基础知识，使...
ui设计移动端字体适配_超全面的移动端UI设计规范整理汇总（包含iPhone X适配）...
weixin_39574928的博客
12-20 383
写在前面很多新人在开始做移动端UI设计的时候，往往对界面的一些尺寸规范不是十分清楚，很多时候都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。(公众号 UI充能站 出品，搜索i-li...
ui设计移动端字体适配_超全面的移动端UI 设计规范整理汇总
weixin_39726044的博客
12-20 849
很多新人在开始做移动端UI设计的时候，往往对界面的一些尺寸规范不是十分清楚，很多时候都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。目录界面设计尺寸及栏高度边距和间距内容布局界面图...
Photoshop试题及答案
06-14
Photoshop试题及答案
photoshop课件完整版资料.ppt
11-17
photoshop课件完整版资料.ppt
photoshop快捷键及技巧大全.pdf
11-19
photoshop快捷键及技巧大全.pdf
photoshop切片工具示例
02-07
在本示例中，我们将深入探讨Photoshop切片工具的使用方法、优势以及如何将其与HTML页面结合。 切片工具的基本操作： 1. **选择切片工具**：在Photoshop的工具栏中，找到“切片工具”或其快捷键“Ctrl+K”。这个...
photoshop教学计划及教案.pdf
11-18
photoshop教学计划及教案.pdf
photoshop学习笔记——移动工具
jamesP777的博客
07-24 484
photoshop学习笔记——移动工具的使用
photoshop学习笔记——选区3 选区的变化
最新发布
jamesP777的博客
07-26 231
介绍选区常见的一些变化：变换 边界 扩展 缩放 羽化 透明度 建立工作路径
Adobe 发布Firefly Vector AI 模型，能够理解用户的文本提示生成矢量图
heehelcom的博客
07-26 285
这一过程不仅快速，而且生成的矢量图形是可编辑和可缩放的，确保了与现有艺术作品的风格和颜色一致性。Firefly Vector AI模型不仅为Illustrator和Photoshop带来了新的工具和功能，还通过其生成式AI技术，极大地提高了创意工作者的工作效率。此外，Firefly Vector AI模型还改进了Illustrator中的“文本到图案”功能，使得用户能够创建可扩展的自定义矢量图案，如壁纸等。同时，样式参考功能能够根据现有样式生成匹配的输出，进一步提高了设计的一致性和效率。
探索原型设计的未来——Axure RP引领设计革新
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
07-24 547
本文将为大家介绍下Axure RP在原型设计中的优势以及目前比较流行的趋势，希望能帮助到大家~
PHOTOSHOP 切片
09-06
在Photoshop中，有多种方法可以进行切片。其中最简单的方式是使用图层切图。首先，在Photoshop中打开你的psd文件，可以点击文件选择打开或直接将psd文件拖动到Photoshop界面中。接下来，使用图层切图的方式进行切片。你可以右击图层，选择快速导出为PNG，选中你要导出的图层，然后右击图层再次选择快速导出为PNG。这样就可以将图层切片导出为PNG格式的图像。 另外，还可以使用切片工具来进行切片。在Photoshop中，你可以使用切片工具来手动创建切片。首先选择切片工具，然后在psd上点击并拖动来创建切片。你可以调整切片的大小和位置，然后将切片导出为需要的格式。 总结来说，Photoshop有多种方式可以进行切片，包括图层切图和切片工具。你可以根据具体的需求来选择合适的方式进行切片操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [photoshop切片的使用](https://blog.csdn.net/Lin_M1104/article/details/123662733)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [【前端必学】PS切图详细教程3种方法（图层切图，切片，切图神器cutterman）](https://blog.csdn.net/qq_23073811/article/details/127718237)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值