https://rmondjone.github.io/tags/ui/Recent content in UI on RmondJone的博客Hugo -- gohugo.iozh-cnFri, 25 Apr 2025 10:08:56 +0800https://rmondjone.github.io/posts/opc/opc_qietu/Fri, 25 Apr 2025 10:08:56 +0800https://rmondjone.github.io/posts/opc/opc_qietu/<h2 id="一背景">一、背景</h2> <p>虽然现在的 AI 非常强大了，但是说实话涉及到 UI的绘制和切图的提取，AI基本上无能为力，没有办法100%按照你的心愿切出你想要的图标或者背景图，今天我就来简单的说下怎么使用 PS来做这种精细化的工作。非常简单，基本上没有什么学习难度，不要怕！</p> <p> <div class="post-img-view"> <a data-fancybox="gallery" href="https://rmondjone.github.io/images/opc_qietu_0.png"> <img src="https://rmondjone.github.io/images/opc_qietu_0.png" alt="" /> </a> </div> </p> <h2 id="二具体的步骤">二、具体的步骤</h2> <h3 id="1使用切片工具">1、使用切片工具</h3> <p>今天就拿切应用的底部导航栏图标为例，来说说怎么使用快速的切图，首先让 Ai给你快速的生成一张包含6张 ICON 的一个整图，然后把这个图片丢到 PS中。如下图所示选中切片工具，然后拖动工具即可进行切片，如果需要正方形，长按 Shift即可，有一个注意的地方就是要先松鼠标再松Shift键</p> <p> <div class="post-img-view"> <a data-fancybox="gallery" href="https://rmondjone.github.io/images/opc_qietu_1.png"> <img src="https://rmondjone.github.io/images/opc_qietu_1.png" alt="" /> </a> </div> </p> <h3 id="2调整切片的大小">2、调整切片的大小</h3> <p>有的时候切片的大小，我们需要精确的控制，则需要使用到切片选择工具，入下图所示，切换到切片选择工具之后，点击切片属性，即可弹出切片调整工具，可以在这里弹窗中输入你想要的精确切片大小</p> <p> <div class="post-img-view"> <a data-fancybox="gallery" href="https://rmondjone.github.io/images/opc_qietu_2.png"> <img src="https://rmondjone.github.io/images/opc_qietu_2.png" alt="" /> </a> </div> <div class="post-img-view"> <a data-fancybox="gallery" href="https://rmondjone.github.io/images/opc_qietu_3.png"> <img src="https://rmondjone.github.io/images/opc_qietu_3.png" alt="" /> </a> </div> </p> <h3 id="3导出切片">3、导出切片</h3> <p>调整完成之后，就是开始导出切片，按照如下步骤所示，导出的时候选中你想要导出的切片，按住Ctrl进行多选。然后导出弹窗那边切片选择『选中的切片』即可。这里尽量选择 PNG-8,可以大大的缩小切片的体积。</p> <p> <div class="post-img-view"> <a data-fancybox="gallery" href="https://rmondjone.github.io/images/opc_qietu_4.png"> <img src="https://rmondjone.github.io/images/opc_qietu_4.png" alt="" /> </a> </div> <div class="post-img-view"> <a data-fancybox="gallery" href="https://rmondjone.github.io/images/opc_qietu_5.png"> <img src="https://rmondjone.github.io/images/opc_qietu_5.png" alt="" /> </a> </div> <div class="post-img-view"> <a data-fancybox="gallery" href="https://rmondjone.github.io/images/opc_qietu_6.png"> <img src="https://rmondjone.github.io/images/opc_qietu_6.png" alt="" /> </a> </div> </p> <h2 id="三欢迎关注">三、欢迎关注</h2> <p>今天的分享就到这边，对独立开发感兴趣的可以加我的微信，我把你拉倒群里，我的联系方式：5b6u5L+h77yaUm1vbmRKb25l</p>