# 手把手教你用开源软件对图层进行跑图生成NFT By [糊糊](https://paragraph.com/@0xba9a1ee9de4a8e1e42cb180f8a524a85fcf8dd0a) · 2022-08-01 --- 作者：糊糊 个人推特地址： [https://twitter.com/FrankRaglan](https://twitter.com/FrankRaglan) 1、下载必备软件 -------- ### 1、跑图软件下载 访问github链接：[https://github.com/HashLips/hashlips\_art\_engine](https://github.com/HashLips/hashlips_art_engine)根据图片中的教程将软件下载下来。 ![](https://storage.googleapis.com/papyrus_images/a0666c5cfc51292bd862c2ebacfed46020a460652af45644f196b7e2036cbe1b.png) ### 2、VS代码下载 下载网站： [https://code.visualstudio.com/](https://code.visualstudio.com/) 根据图片中的教程下载并安装vs代码到本地 ![](https://storage.googleapis.com/papyrus_images/c9ee5df9a157b80f1d917ad8077dff8138e863849cf1c021b0de36927e4b14c3.png) ### 3、 node.js 下载 [https://www.runoob.com/nodejs/nodejs-install-setup.html](https://www.runoob.com/nodejs/nodejs-install-setup.html) 根据链接中的教程下载并安装node.js 2 使用VS代码导入跑图软件 -------------- 选择打开文件夹，然后点击打开你的文件夹，选择下载本地软件的文件夹，将VS代码的上角目录导入到这 ![](https://storage.googleapis.com/papyrus_images/9fb1596ac9184f24ee9c4d7a4ed993b28b364d92c686f4f4f5a868a545703aaa.png) 3 设置跑图软件内容并跑图 ------------- 导入跑图软件代码之后，此时VS代码显示的内容如下： ![](https://storage.googleapis.com/papyrus_images/8e9fa88dba6b996c119ca238e35423316d0864734db17c3fa9443b7c63fa6488.png) 鼠标点击VS code的Terminal,选择 New Terminal，这一步是打开命令行（如下面的图片所示） ![](https://storage.googleapis.com/papyrus_images/c3ad49734338cf6b6fbf1d7b831f2d3b2828312b759ac90bb37169a77d16c595.png) ![](https://storage.googleapis.com/papyrus_images/36f85ce7b97fd1406642fc10fddd49af72b74ff6328ea5736bb24d73c9b1b7d7.png) 接着在命令行输入 npm install，并点击键盘上的回车键。 此时VS code会自行在网络上面下载跑图软件运行时候需要的软件包。 ![](https://storage.googleapis.com/papyrus_images/67211a39a3088de29cc9815c1b6e0f0cf93aa1a754609c1995fc331fd9cd8784.png) 此时跑图软件已经可以正常启动了，但是软件内部的设置和我们的图层的文件夹名称可能会不一致。所以接下来是修改这些内容。 ### 1、 修改图层的文件夹名称 找到跑图软件的config.js文件并打开，将18~24行中的代码修改为你自己的图层的文件夹名称，注意文件夹名称不能有空格，修改完毕之后，要将修改后的代码保存起来。保存方式：ctrl + s ![](https://storage.googleapis.com/papyrus_images/8ffa3b8f277661834cc821a2fe2d5972597142ce8d87eda7866ebf84759e6735.png) 接着打开跑图软件的layers目录，将里面的文件都删除掉，并将你自己的图层文件夹复制到里面。 ![](https://storage.googleapis.com/papyrus_images/b588560f374c6760422a43939acfc3064e138ea7b6fb1f5f4c4817f9a569bf39.png) ![](https://storage.googleapis.com/papyrus_images/630fc231525d1d89848cdfbcd33014bed73a3370eac9546c5e3625e5e83f704a.png) 准备工作已经做好了，接下来就是跑图，还记得我们打开了VS code的命令行吗，在里面输入 npm run build，如果显示如下图，那么就说明你的图片跑出来了，可以打开跑图软件的build文件夹查看跑出来图效果怎么样。 其中images 文件夹是跑出来的图 Json文件夹是你图片的元数据 ![](https://storage.googleapis.com/papyrus_images/86640f94b4751b49fbdd7c557a67e775ec5f43c345126f0e983e1540810f1854.png) ![](https://storage.googleapis.com/papyrus_images/b1e237fd4fe43c0d4bc4179a1a9f8f44f41bc8a5e7a7c39da9f0815ea3850f8f.png) 4 将图片上传到IPFS ------------ 现在市面上还有自建IPFS的节点，IPFS是有服务器的。或者是收费的ipfs，你的样片等。 这里介绍什么免费且注册就可以的ipfs产品 官网地址：[https ://nft.storage/](https://nft.storage/) 进入官网并注册好账号，只需要一个邮箱就可以，注册好在官网下载该ipfs的本地上传工具软件。 ![](https://storage.googleapis.com/papyrus_images/0d49dda894db75b97511cf0e9bfc55b4f834346e8bd21f83bd8f1deccf640b63.png) 打开点击官网的API密钥，获取你自己的密钥，将密钥添加到本地软件中，这样ipfs内容就知道你上传了哪些 ![](https://storage.googleapis.com/papyrus_images/16c79b01169f71f3c26a307ec3a27f13153f46d3fb91b16c336097b3b733a544.png) ![](https://storage.googleapis.com/papyrus_images/3bf4b29115e2ee898cfa739084d2d5232da544b22eb5092025f40dbfe72ba99f.png) 将我们上一步生成的图片拖进输出该ipfs进行上传 注意是只上传图片文件夹，json文件夹还不用上传。 ![](https://storage.googleapis.com/papyrus_images/7c398c732babb2201c8d5629ccd280682f7ff8b763f76784293ccdf0b0b1dfec.png) 当显示为这样就是上传成功了。（如下图，点击第三个跳转到浏览器，你的图像目录） ![](https://storage.googleapis.com/papyrus_images/f4771cd5cd21aad270bd340c7c9c7569b9ef110508207421f7babe9186563862.png) 5 修改元数据内容并将元数据上传到ipfs --------------------- 记得上一步中在浏览器查看你上传的复制品吗，将图片的链接下载下来，也就是上图的网址，也就是上图的网关地址的链接， 然后我们继续回到 VS 代码的 config.js，找到第 9~11 行 将复制的链接替换掉config.js第11行的代码.项目名称和描述也自行替换 （如下图所示） 修改完要保存好代码，使用：ctrl + s保存代码 ![](https://storage.googleapis.com/papyrus_images/7b64b88bd9566673de7e37c90a65da12e65c12dba118ae114c7c845bf4f9ca38.png) 最后我们重新生成元数据，在命令行输入: npm run update_info 并回车，就搞定了。 最后将生成元数据文件夹（json文件夹）上传到ipfs。 这样，我们就完成了将 NFT 上传到 IPFS 的过程。 去吧，去写你的ERC721合约上链，发行你自己的NFT --- *Originally published on [糊糊](https://paragraph.com/@0xba9a1ee9de4a8e1e42cb180f8a524a85fcf8dd0a/nft)*