• 参考: http://coolketang.com/psscript/menu8lesson12.php保存以下脚本为”批量生成ios图标.jsx”文件//调用[File]的[openDialog]命令,弹出文件选择窗口,提示用户选择1024*1024尺寸的图标,并将文件存储在变量...

    参考: http://coolketang.com/psscript/menu8lesson12.php

    保存以下脚本为”批量生成ios图标.jsx”文件

    //调用[File]的[openDialog]命令,弹出文件选择窗口,提示用户选择1024*1024尺寸的图标,并将文件存储在变量[bigicon]中。
    var bigicon = File.openDialog("请选择一张1024x1024大小的图片:", "*.png", false);
    
    //打开用户选择的图标文件,并将打开后的文档,赋予变量[pngDoc]。
    var pngDoc = open(bigicon, OpenDocumentType.PNG);
    
    //调用[Folder]的[selectDialog]命令,弹出文件夹选择窗口,提示用户选择输出iOS图标的文件夹。
    //并将文件夹存储在变量[destFolder]中。
    var destFolder = Folder.selectDialog( "请选择一个输出的文件夹:");
    
    //定义一个数组,这个数组由各种js对象组成,每个对象都有一个[name]属性和[size]属性,分别表示图标的名称的尺寸。
    var icons = 
    [
      {"name": "icon",                      "size":57},
      {"name": "icon@2x",                "size":114},
      {"name": "icon-40",                  "size":40},
      {"name": "icon-40@2x",                  "size":80},
      {"name": "icon-40@3x",                  "size":120},
      {"name": "icon-50",                  "size":50},
      {"name": "icon-50@2x",                  "size":100},
      {"name": "icon-60",                  "size":60},
      {"name": "icon-60@2x",                  "size":120},
      {"name": "icon-60@3x",                  "size":180},
      {"name": "icon-72",                  "size":72},
      {"name": "icon-72@2x",            "size":144},
      {"name": "icon-76",                  "size":76},
      {"name": "icon-76@2x",                  "size":152},
      {"name": "icon-83.5@2x",                  "size":167},
      {"name": "icon-small",              "size":29},
      {"name": "icon-small@2x",       "size":58},
      {"name": "icon-small@3x",  "size":87}
    ];
    
    //定义一个变量[option],表示iOS输出的格式为PNG。并设置输出PNG时不执行PNG8压缩,以保证图标质量。
    var option = new PNGSaveOptions();
    
    //保存当前的历史状态,以方便缩放图片后,再返回至最初状态的尺寸。
    option.PNG8 = false;
    var startState = pngDoc.historyStates[0];
    
    //添加一个循环语句,用来遍历所有图标对象的数组。
    for (var i = 0; i < icons.length; i++) 
    {
        //定义一个变量[icon],表示当前遍历到的图标对象。
        var icon = icons[i];
    
        //调用[pngDoc]对象的[resizeImage]方法,将原图标,缩小到当前遍历到的图标对象定义的尺寸。
        pngDoc.resizeImage(icon.size/(1616/57), icon.size/(1616/57));
    
        //定义一个变量[destFileName],表示要导出的图标的名称。
        var destFileName = icon.name + ".png";
    
        if (icon.name == "iTunesArtwork")
            destFileName = icon.name;
    
        //定义一个变量[file],表示图标输出的路径。
        var file = new File(destFolder + "/" + destFileName);
    
        //调用[pngDoc]的[saveAs]方法,将缩小尺寸后的图标导出到指定路径。
        pngDoc.saveAs(file, option, true, Extension.LOWERCASE);
    
        //将[doc]对象的历史状态,恢复到尺寸缩放之前的状态,即恢复到1024*1024尺寸,为下次缩小尺寸做准备。
        pngDoc.activeHistoryState = startState;
    }
    
    //操作完成后,关闭文档。
    pngDoc.close(SaveOptions.DONOTSAVECHANGES);

    保存以下脚本为“批量生成android图标.jsx”

    //调用[File]的[openDialog]命令,弹出文件选择窗口,提示用户选择1024*1024尺寸的图标,并将文件存储在变量[bigicon]中。
    var bigicon = File.openDialog("请选择一张1024x1024大小的图片:", "*.png", false);
    
    //打开用户选择的图标文件,并将打开后的文档,赋予变量[pngDoc]。
    var pngDoc = open(bigicon, OpenDocumentType.PNG);
    
    //调用[Folder]的[selectDialog]命令,弹出文件夹选择窗口,提示用户选择输出iOS图标的文件夹。
    //并将文件夹存储在变量[destFolder]中。
    var destFolder = Folder.selectDialog( "请选择一个输出的文件夹:");
    
    //定义一个数组,这个数组由各种js对象组成,每个对象都有一个[name]属性和[size]属性,分别表示图标的名称的尺寸。
    var icons = 
    [
      {"name": "drawable-hdpi-icon",                      "size":72},
      {"name": "drawable-ldpi-icon",                "size":36},
      {"name": "drawable-mdpi-icon",                  "size":48},
      {"name": "drawable-xhdpi-icon",                  "size":96},
      {"name": "drawable-xxhdpi-icon",                  "size":144},
      {"name": "drawable-xxxhdpi-icon",                  "size":192}
    ];
    
    //定义一个变量[option],表示iOS输出的格式为PNG。并设置输出PNG时不执行PNG8压缩,以保证图标质量。
    var option = new PNGSaveOptions();
    
    //保存当前的历史状态,以方便缩放图片后,再返回至最初状态的尺寸。
    option.PNG8 = false;
    var startState = pngDoc.historyStates[0];
    
    //添加一个循环语句,用来遍历所有图标对象的数组。
    for (var i = 0; i < icons.length; i++) 
    {
        //定义一个变量[icon],表示当前遍历到的图标对象。
        var icon = icons[i];
    
        //调用[pngDoc]对象的[resizeImage]方法,将原图标,缩小到当前遍历到的图标对象定义的尺寸。
        pngDoc.resizeImage(icon.size/(2041/72), icon.size/(2041/72));
    
        //定义一个变量[destFileName],表示要导出的图标的名称。
        var destFileName = icon.name + ".png";
    
        if (icon.name == "iTunesArtwork")
            destFileName = icon.name;
    
        //定义一个变量[file],表示图标输出的路径。
        var file = new File(destFolder + "/" + destFileName);
    
        //调用[pngDoc]的[saveAs]方法,将缩小尺寸后的图标导出到指定路径。
        pngDoc.saveAs(file, option, true, Extension.LOWERCASE);
    
        //将[doc]对象的历史状态,恢复到尺寸缩放之前的状态,即恢复到1024*1024尺寸,为下次缩小尺寸做准备。
        pngDoc.activeHistoryState = startState;
    }
    
    //操作完成后,关闭文档。
    pngDoc.close(SaveOptions.DONOTSAVECHANGES);

    打开photoshop,切换到”文件”>”脚本”>”浏览”,找到上述脚本,打开,选择一张1024*1024的图片,即可导出图片。
    这里写图片描述

    展开全文
  • 1.准备工作:将jsx文件保存到本地后放到photoshop的预设脚本文件夹中,在Adobe Photoshop安装目录中Presets\Deco目录下,比如我的是在:D:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Deco 下 ...

    1.准备工作:将jsx文件保存到本地后放到photoshop的预设脚本文件夹中,在Adobe Photoshop安装目录中Presets\Deco目录下,比如我的是在:D:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Deco 下

    2.打开或重启photoshop,这时就能在脚本菜单中看到GenerateIcons这一项了,如下图:

    3.打开相应的图标PSD文件(必须),然后单击GenerateIcons菜单项,接下来就可以选择生成文件夹,一键生成所有的图标尺寸啦,并且子文件夹也分好了类,直接复制到Android res文件夹中覆盖处理即可,效率蹭蹭地就提升了

    资源:jsx文件

    展开全文
  • ps导出svg

    2019-08-20 21:01:45
    网上看到ps都可以导出svg,然后试了下。 需要加载一个脚本,js写的,把文件复制到路径后重启ps,修改图形名字,然后保存成.ai文件,用vs打开后看到了导出后代码。 有2个问题: 1.直接使用路径会报错 需要修改指令...

    svg初识
    看到一些复杂的svg图形很好奇是手写出来的么,看了源码望而却步。网上看到ps都可以导出svg,然后试了下。
    需要加载一个脚本,js写的,把文件复制到路径后重启ps,修改图形名字,然后保存成.ai文件,用vs打开后看到了导出后代码。
    1019621-20190108161548886-202766526.png

    有2个问题:
    1.直接使用路径会报错 需要修改指令位置  放到每行首位置  现在手动修改  应该可以写脚本 
    2.路径是 倒转的 看了 下 save-ps-to-svg 源码 

    1019621-20190108162037183-910100814.png
    是直接调用的api,然而看了 ps的 api 并没有看到相关内容
    1019621-20190108162137136-864975238.png

     就放弃了 ,有博客写到 可以用svg 高度减去 路径的y坐标,应该可以。或者保存svg时 旋转图片就好。

    转载于:https://www.cnblogs.com/aloneCode/p/10239664.html

    展开全文
  • PS脚本-批量输出图标

    2020-06-03 23:32:45
    使用任意版本的PS,导入此工具,按照提示步骤即可批量导出海量图标。也可以用记事本打开,里面调整设置参数。
  • 利用photoshop自动生成应用程序不同尺寸的icon,支持android和ios;
  • 又是一个快速切图的插件,但他的功能更是强悍,不光可以针对ios、android版本设计切图,同时对于网页设计的童鞋来说也是一个不错的选择,可以逐层切出,编组切出,也可以选择性的切出。(本文来自于互联网,版权归...
  • 由于普通图片放大后容易失真,这里我们最好用矢量图(SVG(Scalable Vector Graphics))来做图标,而系统状态栏图标多是用vectorDrawable绘制,所以我们的最终目的就是绘制一个上图中样式的Android VectorDrawable ...

    项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了)

    由于普通图片放大后容易失真,这里我们最好用矢量图(SVG(Scalable Vector Graphics))来做图标,而系统状态栏图标多是用vectorDrawable绘制,所以我们的最终目的就是绘制一个上图中样式的Android VectorDrawable xml图标。尤其是这种资源文件体积小放大又不失真,干嘛不用呢。

    VectorDrawable

    Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。在xml文件中的标签是<vector>
    google官方API介绍:
     

    This lets you create a drawable based on an XML vector graphic. It can be defined in an XML file with the <vector> element.

    The vector drawable has the following elements:

    具体属性和方法请参考官方说明

    下面是一个官方例子:

     

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600" >
    <group
    android:name="rotationGroup"
    android:pivotX="300.0"
    android:pivotY="300.0"
    android:rotation="45.0" >
    <path
    android:name="v"
    android:fillColor="#000000"
    android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
    </vector>
     
    显示效果(背景色应为透明)

     

    绘制svg图

    如果想了解绘制原理,调至请调至文末点击W3C的连接。
     
    接下来介绍一些常用的svg绘图工具

    1.Inkscape

    开源的多平台矢量图绘图工具,支持windows OS X Linux。支持导出为svg等格式图片,功能强大,与后面两个将要介绍的比较就是体积有点大,安装包就接近百兆了。
    另外用这个生成的SVG文件,会带一些默认的属性,转化成VectorDrawable以后xml文件里也会有一些默认的属性,虽不影响显示效果,但会多出一些不必要的代码。
    工作界面:
     

    2.Boxy SVG

    是一个Chrome应用(推荐)。支持导入,另存为,可以选中单个控件调整属性等。可能不好的地方就是你得安装Chrome浏览器吧,还有下载这个应用的时候得FQ。

    3.Janvas - The Online Vector Graphics Editor

    也是Chrome应用,不过其实就是一个链接,打开后指向下面的地址
    但是这个在线编辑器好像只能打开和保存文件到google driver,不推荐

    4.??

    这个东西没找到名字,点击下面的连接试用。添加到收藏夹,随时可用。便捷。
     

    转换为VectorDrawable

    找到两个在线转换的工具,都是Github上的开源项目。

    1.Android SVG to VectorDrawable

    Convert SVG to Android VectorDrawable XML resource file.
    可能是这个工具开发比较早,有很多Star,基本的图形转换是可以的,但是,不支持文字!也就是说上面的图,如果我们转换的话,得到的结果只是一个椭圆,文字会丢失。

    2.SvgToVectorDrawableConverter.Web

    Batch converter of SVG images to Android VectorDrawable XML resource files.
    这个就比较好了,支持文本转换

    效果图

    这里我把颜色改回了白色。使用的是Boxy SVG绘制,SvgToVectorDrawableConverter.Web转换。
    Android Studio支持直接预览VectorDrawable矢量图,有了实时预览,也方便进行一些简单的修改。
    这个图标最后应用到下拉的快速设置里面,在手机上的效果图就不上了。
    展示一张少复杂的图吧:

    总结

    本文简单介绍了几款工具,目的能让新手快速的了解一下如何制作出自己需要的矢量图资源文件,在有需要做一张应用到Android应用/系统的矢量图时不至于措手不及。当然如过你牛逼到直接用记事本“绘图”的话,本文应该不适合你。
    我发现我特别喜欢发掘一些能够提高生产力的小工具啊,哈哈哈。

    其他

    知其然不知其所以然?想要了解的原理,跳转到W3C查看Scalable Vector Graphics (SVG) 1.1 (Second Edition)

     

    展开全文
  • 设计不懂开发,开发也不懂设计,Android不懂iOS,iOS也不懂Android,很多同志就在这种"矩阵式的彼此的不理解"中凑合干  现在有很多产品为了降低设计成本并保持多平台体验的一致性,都以iOS为主做一套交互...
    人家压根就不用像素,你费劲半天调一个480*800又有啥用呢?你给他标注上,这个宽度300像素,又有啥用呢?设计不懂开发,开发也不懂设计,Android不懂iOS,iOS也不懂Android,很多同志就在这种"矩阵式的彼此的不理解"中凑合干

      现在有很多产品为了降低设计成本并保持多平台体验的一致性,都以iOS为主做一套交互设计,应用于iOS和Android两个平台。但是在标注与切图的环节,如何高效的与开发对接,似乎并没有什么更高明的办法。很多团队的做法是先做一套iOS的UI+标注+切图,再在iOS的基础上缩放一套Android的UI+标注+切图。事实上这样的做法是低效,且无效的。为什么且如何做呢?

      首先本文大前提是,交互以iOS的设计为主导,应用于iOS和Android两个平台。本文描述的方法更适用于人力资源较为匮乏的设计团队。

      对于设计环节。

      我对iOS和Android使用同一套iOS的交互设计这种做法不置可否,毕竟好多人都已经这么干了。而很多情况下,到底用一套交互还是两套,这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的,并不是简单的节操问题。所以这里不讨论到底一套交互对不对,只讨论这种情况下怎么干活。

      那么既然是同一套设计,如果仅仅是为了达到的交付物标准,输出两套几乎完全一样的iOS和Android的UI图,这种事情略显蛋疼。据我所知有一些设计团队都在不明真相地这么干着。

      来看设计环节的交付物。

      iOS和Android开发需要的设计交付物至少要有:高保真UI图,标注,切图。

      高保真UI图所起到的作用是,开发会参照其画页面,仅仅是获知页面样子的一个手段,并非什么高精度的事情。仅仅基于这一条,设计师就没有必要出iOS和Android两套样子一样只是大小不同的图的,对于开发来说,他们只需要看到页面样子即可。

      标注和切图的作用是,开发会按照标注的尺寸,把切图按照高保真UI图的摆放方式做到界面上。那么问题来了,iOS的开发和Android开发所需要的标注和切图是不一样的。如何在一套iOS的高保真UI图上做出两套标注和切图呢?

      众所周知iOS设计的像素尺寸是640*960/1136,Android主流的hdpi模式下的像素尺寸是480*800。如图,他们的换算关系是,iOS像素尺寸的75%是Android的像素尺寸


      于是很多设计团队就基于这个75%的关系去做Android的图了,但是这不是个好方法,这是一个设计和开发没有成为好基友的状态下所使用的方法。

      我们知道Android开发所使用的单位并非像素,而是一个叫做dp/sp的单位,人家压根就不用像素,你费劲半天调一个480*800又有啥用呢?你给他标注上,这个宽度300像素,又有啥用呢?设计不懂开发,开发也不懂设计,Android不懂iOS,iOS也不懂Android,很多同志就在这种“矩阵式的彼此的不理解”中凑合干着。

      关于dp与dpi等概念,请参考文章:http://www.zhihu.com/question/19625584

      我们以480*800像素尺寸下做的设计图为基准。开发将部件尺寸换算成dp尺寸的方法是,像素尺寸*2/3。这也是为什么要让Android部件尺寸能让3整除的原因。所以在hdpi模式,480*800像素尺寸设计图中,开发看到300px宽度的标注,会定义其为宽200dp,到这里Android开发才得到一个他们真正会用于开发的数值。

      这整个过程,设计师做iOS尺寸图并标注,设计师调整iOS尺寸图为Android尺寸并标注px,Android开发看着设计师交付的标注,再将其换算成dp,很长的一个过程。

      其实经过以上整个过程之后,我们已经得出了一个更简单的换算关系:iOS像素尺寸*75%=Android像素尺寸,Android像素尺寸*2/3=Android的dp尺寸。进而得出:iOS像素尺寸*75%*2/3=Android的dp尺寸。所以,iOS里一个宽600px的东西,在Android的hdpi模式下,正好300dp,正好是50%,很容易算是吧?

      在这个关系的指导下,我们可以在同一套UI图上做适用于两个平台的标注。只要Android的开发知道,标注600px的东西,在hdpi模式下等于300dp这个换算关系,一切都简单了。当然,平台的区别要留意,例如iOS使用十进制色值,Android使用16进制,iOS可以绘制圆角和阴影,Android更倾向于用.9.png等。这些差异要在同一套标注中体现出来,让两端的开发各取所需。(如果你发现标注软件中无法在同一张图上标十进制和十六进制色值,你可以用文字标注替代其中一个,qq的截屏工具中也是带色值提示的,办法很多不再赘述。)

      至此,已经可以做一套标注,让Android和iOS的开发共同使用了。当然前提是你要告诉开发这个标注怎么看,怎么用!

      下面看切图

      在iOS切图与Android切图的转换中,是可以使用75%的换算关系的。也就是说iOS的切图缩小75%之后,就是Android的hdpi模式下的切图,而Android开发还需要其他dpi模式的切图,按照如下关系换算即可。


      关于Android不同dpi的参考文章:http://www.zhihu.com/question/20697111

      我们会发现xhdpi模式和hdpi模式的换算比例也是75%。也就是说xhdpi模式下切图尺寸跟iOS下是一样的。所以iOS的切图可以直接适用于Android的xhdpi模式。至于除hdpi和xhdpi之外的其他模式,如果需要适配,就需要单独处理图片了。

      要注意的是切图在缩放之后像素会糊在一起,很可能需要重新调整,还有各种虚边情况,尤其是那些带透明阴影的,都要重新调,但是这个工作量显然要比重新调UI重新切,要小多了。

      至此,我们设计一套适配iOS的高保真UI,基于该UI做一套适用于iOS和Android两类开发人员的标注,再输出一套可适用于iOS和 Android的xhdpi模式的切图,再调整一套Android的hdpi模式切图,基本上大部分工作就已经完成了。

      是不是感觉这种方法的工作量,一个人能干三个人的活了?

    (作者:hoovay,http://www.origintel.com/)

    展开全文
  • 在Unity中开发AR应用时时,发布项目文件需要发布到Android平台,遇到一些问题,看了网上的一些资料,踩了一些坑,现在总结出来,希望有相同的开发者遇到时可以规避。 Android开发环境搭建分为以下三步: 第一步、...
  • 前文:Android 手机系统超过6.0后,随着安全性能提升,data/data下文件便不可看了,这样,项目中使用内嵌SQLite数据库,生成的.db文件,无法导出,虽然Android使用的轻量级数据库比较简单,数据库框架也很成熟,但是...
  • AS工程导出jar的方式: 1-命令行方式, 在dos窗口...据说可能会有缺失(但是极少),最好自己测试一下,反正我一直用没出过问题 2-在as内部的terminal终端里面(这个方法我并不会)   环境: 计算机 : win7 64位 AS...
  • 公司最近终于招到UI了,发现他的PS工具可以一键生成Android和iOS各种尺寸图标。最近新建一个项目,打算尝试自己生成Android各种尺寸图标。 工具 PS 脚本 这个PS脚本是我参照别人写的,直接共享出来: // 获取当前的...
  • ps切图工具推荐

    2014-11-27 13:47:51
    我是懂点ps的,但是不专业,有时开发app需要一些素材,就要上网找,但是网上一般就是一个ios app页面的设计稿,psd格式的,我要将里面的各个元素导出来,如果直接用ps导出,就要先用切片,然后再导出,有没有一种...
  • 整理者:Insomnia ...解决办法:Type 1当我们使用Android Studio作为IDE时,会碰到将Module导出成jar包的形式,我搜索一下,大致总结如下:Step 1:进入你要导出的Module的build.gradle文件中,将 apply plugin: '...
  • 设置环境变量:添加X:\android-sdk-windows\platform-tools (根据实际路径修改) 到系统环境变量path里,打开cmd里输入“adb”验证是否设置成功;   把设备中的数据库拷贝到电脑中: 如导出数据库:已连接手机或打开...
  • Copy to path:       MAC: /Applications/Adobe Photoshop CS5/Presets/Scripts   PC: c:\program files\Adobe Photoshop CS5\Presets\Scripts ... 
  • 转载于 http://blog.csdn.net/tianjian4592/article/details/44733123 我正在参加 CSDN 2015博客之星评选 感恩分享活动,如果觉得文章还不错,请投个票鼓励下吧:... 
  • Android app导出apk方法

    2016-05-26 13:31:53
    ...很多时候,APK文件只存在于应用市场,在PC上无法直接下载。用手机下载下来后就直接...APK安装到手机后,Android系统会保存一份和原始APK一模一样的拷贝,位于data/app目录,文件名为“APK的包名-1.apk”或者
  • Android Studio如何导出可供Unity使用的aar插件详解 ... 项目之前使用Eclipse导出的jar文件来做与Android交互,最近因为工作需要需使用Android Studio的aar文件...
  • PS如何生成svg代码格式的path路径 - PS技巧篇 原文标题:PS中的svg工具是怎么使用的 点击查看:百度教程 以上就是关于“ # PS如何生成svg代码格式的path路径 - PS技巧篇 ”的全部内容。 ...
1 2 3 4 5 ... 20
收藏数 5,251
精华内容 2,100