基于PS和AI软件的PSB转AI再转SVG流程

作者：梁光柱 日期：20170519

说明：我们要实现的是把地图数据包（shp格式）最终转换到geojson格式文件，而这套流程需要经历到PS和AI的使用，本文用于说明怎样使用PS和AI来处理PNG图得到SVG格式文件

一、ArcMap部分

1. 数据包的处理

在进入PS部分之前先对shp格式的地图数据包进行处理，shp格式的地图经过ArcMap软件处理后我们可以得到PNG格式的图片，这些图片就是接下来的工作的素材。

二、 PS部分

1. 导入PNG图

a、 先将有文字的PNG图拖进PS里面作为背景;
b、 然后再将没有文字的PNG图放进PS里面；
c、 并且将其置入背景图。

2.用魔棒来自动选取区域

a、 快捷键“W”选择魔棒;
b、 参数容差选择为0；
c、 同时隐藏背景图层（这个后期用来命名对照使用），我们要操作的图层是后来置进去的那份图层（两张图的放进去顺序不可以颠倒，不然会出现不必要的麻烦）。

3.抠图

a、 用魔棒选取出我们要的区域；
b、 按下快捷键“Ctrl+J”复制该图层；
c、 然后再次选中该图层，按下快捷键“Alt+Delete”将我们本来设置好的黑色背景色覆盖进去（复制和覆盖背景色这两个步骤可以连续进行，方便提高效率）。

4.重复抠图

a、 隐藏掉之前处理好的图层；
b、 用鼠标选择到我们最初始的图层；
c、 接着不断重复上面的第3步骤，直到全部的图层被抠完。

5.去掉透明区域

a、 隐藏掉背景图和原始处理的图片，显示抠出来的所有图层；
b、 选择图像—>裁切，选择基于透明图像，点击确认。

6.保存

a、 快捷键“Ctrl+shift+S”另存为PSD格式（低版本）或者PSB格式（高版本）的文件；
b、 注意：保存的时候让所有的图层处于显示状态。

三、AI部分

这里以AICC2015版本软件为例，所以操作和原来的旧版本有所不同，同时具备优点和缺点，但是其有最强大的功能就是可以打开比较大和比较高级的PSB格式的文件，而旧版的版本却不支持，现在介绍整体的操作流程。

1.导入PSB

a、 将上面刚生成的PSB文件拖进AI打开；
b、 会弹出下图提示框，把“导入隐藏图层给” 勾上；
c、 按下确定。

2.窗口布局

AICC没办法给所有的图层同时进行描摹操作，这也是其的一个缺点，所以我们需要一个一个图层进行描摹操作的。
接下来的这一步是非必须的，仅为了提高工作效率而用:
a、 将描摹的信息窗口调出来（点击窗口图像描摹）；
b、 放在我们操作界面的左边（如图所示）。

3.描摹与扩展

a、 隐藏其他图层，保留操作图层；
b、 Ctrl+A全选；
c、 点击信息窗口的描摹；
d、 再点击扩展（这是必须的，不然没法后续的实时上色）。

4.实时上色

a、 点击对象；
b、 快捷键N—>A进行实时上色的建立；
c、 快捷键N—>R进行实时上色的释放。

5. 取消编组

这时候点开图层来看其中的路径，会发现，路径的名字不是<路径>，而是写着“编组”。这时候：
a、 我们要选中图层，鼠标右击，选中“取消编组”；
但是这种办法效率非常低，我们可以：
b、利用快捷键“ctrl+shift+G”来直接取消编组（如果用了搜狗输入法可能会激活搜狗的快捷键，我们取消搜狗输入法的快捷键就行）。

6. 删除多余的路径

取消编组之后会发现路径存在多条，这时候我们只需要保留一条闭合的路径，其他的删除即可，一般保留的都默认是最后一条（偶尔有例外情况，可能是倒数第二条），我们可以通过看小图标是否是一个闭合的圆来判断，提高判断的概率。
a、 按住shift键，鼠标点击需要的那条路径（例如最后一条）进行取消选择；
b、 其他多余的路径默认被选择了；
c、 按下delete，便可以删除其他多余的路径。

7. 验证路径的正确性

从上面的图我们可以看到，保留的路径的宽度太低，所以导致看得不够清晰，这时候我们可以通过选择这个路径的方式来观察路径时候是闭合的圆。
a、 按下快捷键“Ctrl+A”便可以选择我们的路径，并且能够提供清晰的视觉效果。
b、 观察是否是我们要的闭合路径。

8. 重复其他的图层

a、 切换到下一个图层，即隐藏掉处理好的图层，显示下一个要操作的图层；
b、 重复上面的第3到第7步。

9. 为图层命名

a、 将带字的背景图显示；
b、 将准备命名的图层显示，其他图层隐藏；
c、 对着显示的轮廓，找到对应的位置，找到街道的名字；
d、 双击图层重命名。

10. 保存

a、 把带字的背景图删除；
b、 快捷键“Ctrl+shift+S”另存为AI格式文件；
c、 上面的AI格式文件保存完成后，再次快捷键“Ctrl+shift+S”另存为SVG格式文件

11. 特殊情况

有时候两个区域是分开的，也就是同一个地名，却有两个闭圆的区域。这时候，我们将其中一个图层的路径拖曳到同名图层的路径上面去，再把原有的那个图层给删除，保留一个图层即可。
a、 将其中一个重名的图层下的路径用鼠标拖动至另一图层下面；
b、 把被拖动的那个图层给删除；
c、 最后只剩下一个命名的图层，其下有两条路径；
d、 保存的时候备注好哪条街道下有两条路径，方便以后寻找。

bootstrap的使用

梁光柱

我打算通过这个笔记来记录自己从bootstrap中学到过的东西，这是一个库，所以存在极大的记忆性，一般来讲不需要记，需要用的时候，我们可以直接去查找就是，但是，所有东西都是看起来简单，但是用起来的时候，才知道其中的磕磕碰碰，所以，自己需要记录下自己用过了其中的什么东西。会持续更新。

1.栅格系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.col-xs-  //当用到这个的时候，任意时候格子都是水平排列的（如果不够12个格子，给多少用多少）
.col-sm-  //下面这三个用了之后，一旦超越了它们的阈值，就会原来的堆叠变成水平排列，可以利用这个特性设置不同宽度界面的需要
.col-md-
.col-lg-
.visible-col-xs  //这个是指定在这个范围内，就会出现xs原本该存在的效果，其他情况下都是隐藏的，下面同理
.visible-col-sm
.visible-col-md
.visible-col-lg
.hidden-col-xs  //这个是指定在这个范围内，就会隐藏xs该存在的效果，其他情况下都是显示的，下面同理
.hidden-col-sm
.hidden-col-md
.hidden-col-lg
.col-xs-offset-  //一律是向右偏移自己要的位置
.col-sm-offset-
.col-md-offset-
.col-lg-offset-

2.表单

1
2
3
4
5
6
7

.form-group  //这个用于一行label，另一行是输入框
.form-control  //这个加在输入框内，让输入框元素宽度为width: 100%
.form-inline  //<form>内加，一行有所有label和输入框
.form-horizontal  //<form>内加，一行内有label和输入框，其他对应的label和输入框另起一行

其他的一些简单细节参考官方文档

3.导航

1
2
3

<ul>
    <li></li>  //一般都是<ul>里面接<li>
</ul>

4.导航条

1. 区分导航和导航条十分重要；
2. 导航条以

3. 下面是部分代码

   1 2 3

   .container //这个用于居中 .container-fluid //这个用于让变得充满百分之一百

4. 下面是实例的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">  //这里是一个头
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>  //这里以及下面的三个是缩小时出现的那个按键的样式
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>  //这里是一个牌子的图标，或者说是一个头的标志
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

1. 其他细节参考文档

5. 徽章

1

.badge

6.面板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

7.模态框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">  //头部
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  //注意class="close" data-dismiss="modal"
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">  //身部
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">  //脚部
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

8.工具提示

1
2
3
4
5
6
7
8
9

//下面主要看data-toggle="tooltip" data-placement="left" title="Tooltip on left"
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

这个有个要注意的地方是，这个功能不是天生就有的，需要我么主动用js去激活的：

1

$('#example').tooltip(options)

2017年4月17日
0：31

利用gulp来对less编译成css

第一步，我们需要明白什么是gulp，什么是less，编译又是什么意思，这样做的意义在于哪里，对我们有什么帮助（请先安装好了node.js，需要这个环境）。

1. 我们需要知道gulp是啥，它是一个拥有很多功能的东西，例如压缩图片啊，检验js书写是否正确啦，但是这里介绍的是，它的其中一个功能就是用于编译less。
2. 好，接下来设计到另一个词，这里的编译时什么意思，我们或许可以理解成“翻译”，相当于有个机器将英文翻译成中文那样子，并且是实时是那种，这个过程我们叫做编译。
3. 接着，less又是什么呢？它是一种语言，它有它的书写方式，整体架构跟CSS差别不会太大，但是，它却可以快速提高书写的效率，至于怎么的一种语法可以让它快速书写呢？大致情况如下： 它的使用大概就是像上面截图的那个样子了，就是加了一些算法和方便的技巧进去，可能有人觉得这约么就是方便了一点点而已，有这个必要吗？其实很有必要，写代码最怕的就是乱，这个可以在大工程里面帮助到你很多的，至少你书写会很方便，这点优处等你用了之后你才能切身感受到，你要做到的就是去用就行了。
4. 知道什么是less之后，剩下的就是css了，这个应该不用作过多的解释了。

   第二步，了解了什么是什么之后，接下来真枪实弹地开干了。

5. 先全局安装gulp，对于全部这个概念相当重要，如果想有更进一步的理解，可以百度。去到你要建立工程的文件夹下，右键，选择gitbash，输入命令行

   1	$ npm install gulp -g #全局安装gulp

原则上任意位置都是可以输入这个命令行的，以为-g代表的就是全局安装，去哪都一样，但是之所以选择这个目录，是因为接下来还得安装一次本地的gulp。 接下来，输入

1

$ npm gulp -p #其实套路都一样，检测版本号

1. 接下来，我们在工程文件夹里面新建一个 package.json文件，代码如下：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   { "name": "test", //项目名称（必须） "version": "1.0.0", //项目版本（必须） "description": "This is for study gulp project !", //项目描述（必须） "homepage": "", //项目主页 "repository": { //项目资源库 "type": "git", "url": "https://git.oschina.net/xxxx" }, "author": { //项目作者信息 "name": "surging", "email": "surging2@qq.com" }, "license": "ISC", //项目许可协议 "devDependencies": { //项目依赖的插件 "gulp": "^3.8.11", "gulp-less": "^3.0.0" } }

当然上面都是菜鸟的操作，高手像下面图示这样用命令行来操作，新手咋一看，哇，这还不如我自己新建一个文件直接输入来得快的呢！其实等你真正操作你就知，用命令行打，甚至比你复制粘贴还要快，就是那么快，所以，毋庸置疑，最终，还是得输入命令行来执行这一步。

1. 接下来安装本地gulp，你可能会问，刚才不是安装了全局gulp了吗？不是全局都能使用吗？还装啥本地项目gulp呢？全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

   1	$ npm install gulp --save-dev #注意后面的--save-dev了，相当重要，因为这个把gulp保存在pacgage.json上面，以后可以打包发送给别人，不然，发给别人就会不完善

2. 接下来，安装本地的插件，我们要安装的是less的相关插件。

   1	$ npm install gulp-less --save-dev #后面的--save-dev和上面同理

1. 新建gulpfile.js文件，这是一个配置文件，里面的内容，每一条代码都要学会自己写出来，详情见图的解释，慢慢看，肯定能懂。

2. 然后输入指令运行

   1	$ gulp #这个直接输入的时候就是代表默认状态的指令，当然也可以在gulp后面添加具体 的任务名字指定去执行某个任务，gulp等同于gulp default

3. 来，接下来看效果，这个时候less和css是会同时变化的，但是记得命令台一定要一直开着，才会有这个效果，关了之后它们两者就关联不起来了，也就是说，输入命令的那界面不可以关闭。

   第三步，我所说的流程基本讲完了，其实就是五分钟的事，但是如果看了凌乱的百度的相关资料的话，有可能会走上很多弯路，并且重重复复不知道问题出现在哪里，这里只是用来编译less这个单一的功能的，没有其他的整套功能，我现在还不会用其他的，但是百度会有一整套的。不过如果仅仅是想学习这个的话，还是看这篇文章写得比较有逻辑性，并且在逻辑上和顺序上是合理的，没有那么多和那么乱，这个大概花了我一整天的时间。

梁光柱 2017年3月9日

第一步，在开始之前我们先要配置好要操作的环境，接下来我将教大家如何去给自己的电脑配置环境

1. node.js 自己到官网去下载node.js，这是一个js运行的环境，帮助你到时候的页面加载，安装过程简单，可以一直点击next即可。
2. Git 这个软件的安装也不会有难度，一直next能够顺利安装，该软件的用途是将本地与远端连接起来。
3. GitHub 这是一个github的账号，没有的人要到官网去申请，用于存放本地的文件。
4. 七牛云 这是一个实名之后可以免费在云端存储图片的网站，相当于你有一个服务器，然后利用markdown的形式放进图片（因为markdown写文章里面的图片放置是需要给予一个外部访问网址的，所以我们需要一个云端去存储图片）。
5. 有道云笔记 这是一个用于写笔记的应用，它可以用来书写markdown，并且还可以边写边预览，很方便我们去写博客的文章内容，所以可以下载。
6. sublime 这是一个轻量级的编程软件，可以用于后续_config.yml文件的编写。

第二步，接下来。我将用截图的方式告诉你如何去一步一步操作，其中图片里面的内容都是来源于网络，仅用于学习和个人的知识的笔记等用途，不参与任何的商业用途，如有侵犯各作者的版权，请联系邮箱guangzhul@qq.com通知本人及时删除。

1. 首先，解决一个重要的问题是node.js的安装，如有读者安装遇到问题，请参考如下的链接去解决并验证是否安装成功，检验node.js安装是否成功请点击这里（在这里更新下如何去判断nodejs是否安装成功，真正的安装成功是取决于在window的cmd命令行时，属于node -v的就可以出来版本号，注意，在一打开的位置就可以输入并且得到成功的版本号，这才是真正的全局变量，当然，如果node.js一开始安装在C盘默认位置的时候是没有问题的，或者你在安装的时候有一个弹出来的选项，选择第三个也可以。如果最后遇到了这个问题就百度进入到环境变量的设置去加入自己的安装位置一直到\bin的位置）。
2. 第二个是Git的安装，这个简单无脑，毫无难度，实在还能遇到安装上的问题，请各位读者自行百度解决，这里不再细说，但是里面涉及到一个钥匙绑定的环节，就是想办法用本地的git绑定好远程的github账号，以方便本地可以对远程进行操作，操作的过程如下图所示：
3. GitHub申请完成之后，开始搞github pages，不懂GitHub pages是啥的没关系，跟着下面的链接来做就行，创建github pages，你只需要知道它是一个创建之后可以让你有一个可以访问的个人网站就行，等你操作完毕之后，你自然而然知道这个是什么。
4. 接下来，我们用安装完的git去安装hexo，我们直接在git bash上面下载安装hexo，这个过程直接参考下面的图片来做，跟着指令一步一步下来就行（以下的指令中你会看到很多npm的安装方式，然而你会在其他博客也有看到过cnpm开头的，这是什么意思呢，其实cnpm的意识是利用了淘宝镜像的方式去安装，也就是说用了我们中国的网络，会快很多，但是得先安装好淘宝的镜像，才能用）：

   1	$ cnpm install hexo --save #这是先装好hexo，才能有下一步的操作

做完上面的步骤之后你将可以看到你想要的页面，但是这一切的展示仅仅止步于本地，外面什么都看不到，所以，接下来的一步就是让你的本地的内容可以同步到远端去，也就是你的个人网站，操作如下：

5. 好，能顺利走到这一步的人，恭喜你已经可以访问到自己的网站了不信的话你可以试一下，唯一的问题是，你网站的文字内容还有样式全部都是人家的，而你需要的是你自己可以去修改样式并且会更改里面的内容，从而才能让你自己拥有自己能用的博客。

第三步，接下来，我将教你如何去操作写一篇属于自己原生的博客。

1. 接下来，先让你去了解下博客里面的环境配置，并能够读懂每一个单词的意思，参考下面这篇博客，利用Hexo搭建个人博客－博客初始化篇，看完之后，你将会知道那些单词代表的含义，并且学会去操纵每一项配置。
2. 配置好你要的环境之后，你需要一个不是默认的主题，这样做的原因很简单，证明你不是伸手党，是一个会自己换主题的人，很简单，你随便到百度搜索找主题，然后放进博客的themes目录里面，再修改你的_config.yml文件里面的关于themes的相关名字即可，不懂参考上面的链接，顺便提一句，你的 _config.yml文件既可以用 sublime来打开。
3. 最后，去到source文件里面修改里面的.md文件，利用有道云笔记即可打开，然后进行编辑，如果不懂markdown的编辑使用，就请自行百度学习，一共就只有几个语义的东西，贼简单，我打出来的这篇东西就是用这个来写的。
4. 最后提及一下，如果想要主题实现布局等更加炫酷的页面效果，自己去下载了主题的官网查看对应的框架来操作完成，本人还没有时间去尝试，请各位读者自力更生。
5. 编写好之后，因为有道云笔记是不会改变源文件的，所以建议全部复制粘贴到对应的源文件里面替代原来的文件，这样就是大功告成了。
6. 接下来，进行远端同步。还是先创建静态文件，再进行配置，还是博客根地方右键进行git bash

   1 2 3 4

   #先创建静态文件 $ hexo g #远程配置 $ hexo deploy

第四步，自己赶紧去打开自己的个人网站吧，那里有你的博客，可以访问的话，就足以让每一个小白开心地跳了，晚安！

如有错漏之处，请联系本人邮箱guangzhul@qq.com，谢谢你的支持，是我最大的动力！