如何制作自己的 NFT

太阳地址：4mgnTysrA7kQVYCsE2CJcaJzpX8xPxGPoKPz2LyiN782

推特：https://twitter.com/OfficialCoreyS

项目概述

今天我们将介绍如何通过将图像层提供给代码来生成 NFTS 的步骤。

我将详细介绍如何获取 GitHub 仓库以及如何更新代码以制作图像。

先决条件

Yarn- https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable

NPM- https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

Solana 工具套件- https://docs.solana.com/cli/install-solana-cli-tools

Git：https://git-scm.com/downloads

Atom（代码编辑器）- https://atom.io

入门

下载完所有先决条件后，我们就可以开始了。

首先，我们在桌面上创建一个文件夹，或者在你想要保存代码库的地方。我将其命名为 NFTProject。我们将把 GitHub 代码库下载到这个文件夹中。

GitHub Repo 分支：NFT 生成器

一旦你分叉了它，我们就会下载它。

打开终端，将目录更改为我们在桌面（或其他任何位置）创建的文件夹。您可以通过复制文件夹，进入终端，输入 CD 并粘贴文件夹路径来执行此操作。

接下来，我们将使用以下命令将 repo 克隆到我们的文件夹中：

Git Clone https://github.com//hashlips_art_engine

当然，添加您自己的 URL，以便下载您自己的 fork。

好的，太棒了。我们已经下载好了，现在需要下载依赖项。让我们将新文件夹复制到我们创建的文件夹中，进入刚刚下载的新目录。

然后，转到终端窗口并输入 CD 并粘贴新路径。

进入我们下载的新文件夹后，让我们通过运行几行代码来安装依赖项。

Yarn install

Sudo NPM install

我将 Sudo 用于 NPM，因为它有时存在授权问题。

从这里开始，我们实际上可以从已经提供的图层构建图像！我们所要做的就是在终端中运行一个简单的命令。

因此，在终端中，在 hashlips_art_engine 目录（您应该已经在其中）中运行此代码：

npm run build

现在，如果我们回到代码编辑器，你会注意到一个名为“Build”的文件夹被创建了。打开它，你会看到创建的图像。

这很酷，但是......让我们添加自己的层并构建它......

更新 Config.js 文件

我将使用我自己的图片，这是一个实际的项目，所以我无法分享它们。欢迎您自行创作。

好吧，让我们在代码文本编辑器中打开 hashlips_art_engine 文件（我建议在 peereqs 中下载 Atom）。

转到 SRC 文件夹并打开 Config.js 文件。

我们想在这个文件中做一些事情，让我们来看看这些事情。

首先，让我们更改名称和描述。您可以随意更改。baseUri 保持不变即可。

接下来，让我们将 Sol 地址更改为我们的个人地址（使用您自己的，或者使用我的，哈哈）。

growEditionSizeTo 是您想要制作的图片数量。为了方便举例，我这里只设置了少量。

现在，让我们在该行下方添加我们自己的图层。您会在版本下方看到 LayersOrder。当我们在文件中创建新图层时，我们将在这里更新图层顺序。

让我们转到桌面上的 hashlips_art_engine（或保存的任何位置）并进入图层文件夹。

进入图层文件夹后，您应该会看到一个图层列表，其中包含与其关联的标题。这些标题与我们在 Config.js 文件中的 LayersOrder 下的标题相同。这些标题的顺序确实很重要。

继续并打开底盖文件。

你会注意到，文件名后面跟着一个带数字的 # 符号。带数字的 # 符号代表稀有度，范围是 1-100。1 代表最稀有，100 代表最常见。

因为我们有自己的图层，所以我们将删除图层文件夹内的所有文件，因此它是完全空的。

首先在图层文件夹内创建一个新文件夹并命名。

然后，继续将新图层放入该文件夹内..像这样..

您的图像看起来会有所不同，这些只是我正在使用的图像。

现在，让我们重命名这里的文件，以便我们得到稀有度权重。你可以随意命名文件，只需确保在文件名后添加 # 和一个表示稀有度的数字即可。例如：green#50.png

并以相同的方式添加所有图层。

现在我们已经添加好了所有图层，并且所有图片都以 green#50.png 的格式正确标记。我的图层文件夹如下所示：

现在，我们需要更改代码中图层的顺序。让我们回到代码查看器，找到 Config.js 文件。

我们需要将此顺序与我们刚刚创建的 Layer 文件中的顺序进行匹配。

您的订单会有所不同，但这是我的：

好的，太棒了，现在我们要做的就是构建它。让我们回到终端，在 Cd hashlips_art_engine 中运行以下命令：

npm run build

并且..如果我们回到我们之前讨论过的构建文件，您将看到带有您更新的图层的新图像。

很甜蜜吧？！

好的，您还可以做其他一些事情。但首先，让我先告诉您，这些图片也带有元数据。

如果你返回代码编辑器并转到构建文件，你会注意到有一个 json 文件。打开它。

你会看到每张图片都有自己的元数据。好的，明白了。

让我们回到我们的终端并运行：

npm run preview

现在，如果我们回到我们的构建文件，您将看到一个预览图像，它将所有图像编译成一个大拼贴画。

好的，很酷，这很棒，但是让我们尝试一个不同的。

如果您想要创建另一个文件夹来保存所有像素化的原始图片（这不会删除原始图片），您可以运行：

npm run pixelate

现在您将看到一个新文件夹，其中包含像素化形式的图像（目前非常流行）。

要更改图像的像素化程度，请在代码查看器中打开 Config.js 文件，找到第 68 行，更改箭头左侧的数字。数值越高，质量越好：

就是这样！如果你阅读 Hash Lips GitHub 的底部，你会看到更多关于它可以做什么的信息！

感谢大家收看并完成本教程。希望本教程能帮助到大家！

欢迎随时在社交媒体上关注我！！！

Github：https://github.com/coreyman11

推特：https://twitter.com/OfficialCoreyS