How to Generate NFTs – Full Guide

Countless crypto projects generate NFTs to their collections, with new NFT art collections rising to prominence every month. Furthermore, many developers partake in creating NFTs, meaning that they generate NFTs using computer code. Therefore, a computer generates the art piece of the individual NFT and adds randomness to each NFT, which makes the collection in general more valuable in many people’s eyes. Moreover, while many NFTs launch on Ethereum’s blockchain, NFT tokens are also being created and deployed on other popular chains such as Binance Smart Chain (BSC), Solana, Avalanche, etc. However, while some developers might think that generating NFTs seems challenging, utilizing proper tools such as Moralis makes the process straightforward. As such, we’ll show in this article how to generate NFTs with Moralis.

With the advent of NFTs and their increase in popularity, learning NFT token development is essential for every programmer wanting to become a blockchain developer. Moreover, whether you decide to create your own NFTs or your clients’, knowing how to generate NFTs will be highly beneficial. While the process may seem challenging and somewhat daunting, there’s a powerful tool available at your fingertips, making the entire backend process feel like a breeze – Moralis. Thanks to Moralis’ ultimate Web3 development platform, you get to upload folders to IPFS with a single line of code. That way, you store your artwork and metadata in a decentralized manner. After that, you only need to use a smart contract to mint NFTs. So, if you are serious about learning how to generate NFTs, create your free Moralis account now.

How to Generate NFTs – An Example Project

If you’ve read articles from Moralis’ blog or watched videos from Moralis’ YouTube channel, then you already know that we believe in learning by taking action. As such, we tend to take on example projects where you can follow along and create your own functional dApp, tokens, or NFTs (such as ERC721 or ERC1155 NFT tokens). In today’s article, we’ll focus on showing you how to generate NFTs.

Our quest will be to take different components or layers (artistic part of the project) and then use relatively simple code to randomly generate NFTs using these components. Moreover, our code will automatically save our “pre-NFTs” and their metadata files to a decentralized storing solution. However, you might be wondering, “why ‘pre-NFTs’?”. Well, because to actually turn them into NFTs, they need to be minted. We do not cover the “mint” process herein; however, in one of our previous articles, we show how to bulk mint NFTs.

To make the process as simple as possible, we’ll use these helpful and powerful tools:

• Moralis – Moralis will cover most of the blockchain-related backend part. Using Moralis’ SDK and its ultimate NFT API, we get to cover parts that would otherwise take us days or even weeks in minutes.
• Visual Studio Code (VSC) – VSC is a code editor that we prefer to use. If you are a beginner, we recommend you use it as well. However, if you are accustomed to using any other code editor, feel free to proceed with that.
• Adobe Photoshop – In order to create the art components, we will use this popular photo editing tool and image creating software. Again, feel free to use any other similar program. 

How to Generate NFTs – Begin Envisioning the End Result

When creating NFTs of any sort, it is important to know what you want to create. What are your final NFTs going to look like? In our case, we want a collection that can be computer-generated. This means that we need to start with artwork that has several components, which can be combined to form a unit.

Furthermore, due to the Halloween season, we decided to create special kinds of mutants or zombies. So, let’s take a look at some inspirational artwork:

Looking at the images above, you can see that there are several components to each image. There is the background, the naked mutant, the apparel, and some sort of hat or head-covering item (or accessory). By randomly using each of these items, we create a collection of NFTs. 

Moreover, we need to decide if there is a particular component or combination of components that we want to be rarer than the other. Once we move on to the code, you’ll see us setting up the rarity. However, in order to generate NFTs of that sort, we need to start with the PNG image files (they have transparent backgrounds) of each component. 

How to Generate NFTs – The Art Part

To actually create the art piece(s), you need to get in touch with your creative side or outsource an artist to cover this part. If you decide to tackle it on your own, we recommend using Photoshop, where you will be able to create each component as a separate layer. Here’s how you do that:

1. Determine the components that you need to create. 
2. Draw each component.
3. Export each layer as an individual PNG image.

However, if you decide to hire an artist, we recommend instructing them to provide you with a separate PNG file of each component. In that case, you will be able to move on to the coding part, which will enable you to generate different combinations of those components. In case they provide you with a “.psd” file, use the steps below to export each layer as an individual image.

Generate NFTs Using Photoshop

Note: In case you want to focus on the coding part and skip the art creation process, we created an example artwork piece with some layers available for you on GitHub (inside the “Moralis Mutants.psd” file). Moreover, in order for you to easily follow along with our process, we strongly recommend storing files on your computer. 

Once you open the “.psd” file in Photoshop, you will be able to see all the layers created for the purpose of our example project:

Each folder contains multiple items specific to that layer. Our next step is to export each of those layers as individual PNG images. Photoshop makes this straightforward – in the top navigation bar, go to “File”, “Export”, and then “Layers to Files”:

Once we have the components of our mutant characters exported, we need to arrange them in folders. Furthermore, each type of component should have its own folder. Moreover, inside each “component” folder, the items should be arranged into folders to determine the rarity of items (we will reference these folders in our code). In our case, we use “rare”, “super rare”, and “original”, which means we decided to have three levels of rarity:

How to Generate NFTs – The Coding Part

Now that we have the PNG files of each component ready, we are also ready to actually generate NFTs. For that purpose, we will use JavaScript (JS) code. Furthermore, in addition to creating final image files, we also want to generate metadata files (JSON files). This is where things such as rarity are stored for each of our complete images that will represent our NFTs. We will only get the actual NFTs after we execute a transaction (mint NFTs), which will store details regarding our image files and JSON files to the blockchain (we’ve covered this in a separate tutorial on Moralis’ blog). 

Once you’re inside VSC, start by opening the terminal:

Also, make sure to import all the files (from our file depository at GitHub). However, we will focus on the “config.js” and “index.js” files since they will get the job done. 

How to Generate NFTs – Collection Configuration

As the “config.js” file’s name suggests, we will use this file to determine how our collection engine generates final image files. This includes image size, description for metadata, base image URL, edition ID, amount of NFTs, and other details. Here’s the code:

// image width in pixels
const width = 1000;
// image height in pixels
const height = 1000;
// description for NFT in metadata file
const description = "Moralis Mutants - Survivors of Rekt City";
// base url in case no unique metadata file i.e IPFS
const baseImageUri = "YOUR_MORALIS_SERVER_URL";
// id for edition to start from
const startEditionFrom = 1;
// amount of NFTs to generate in edition
const editionSize = 10;
// prefix to add to edition dna ids (to distinguish dna counts from different generation processes for the same collection)
const editionDnaPrefix = 0;

// create required weights
// for each weight, call 'addRarity' with the id and from which to which element this rarity should be applied
let rarityWeights = [
  /* 
  addRarity("super_rare", 1, 1),
  addRarity("rare", 1, 1),
  */
  addRarity("original", 1, editionSize),
];

// create required layers
// for each layer, call 'addLayer' with the id and optionally the positioning and size
// the id would be the name of the folder in your input directory, e.g. 'ball' for ./input/ball
const layers = [
  addLayer("Background", { x: 0, y: 0 }, { width: width, height: height }),
  addLayer("Base Torso"),
  addLayer("Base Head"),
  addLayer("Torso"),
  addLayer("Arms"),
  addLayer("Mouths"),
  addLayer("Eyes"),
  addLayer("Accessories"),
  addLayer("Noses"),
];

// provide any specific percentages that are required for a given layer and rarity level
// all provided options are used based on their percentage values to decide which layer to select from
addRarityPercentForLayer("original", "Eyes", {
  super_rare: 0,
  rare: 0,
  original: 100,
});

module.exports = {
  layers,
  width,
  height,
  description,
  baseImageUri,
  editionSize,
  startEditionFrom,
  rarityWeights,
};

The code above already uses Moralis. As such, you need to create a Moralis server and use that server’s URL inside the code. Moreover, keep in mind that all the details can be adjusted to meet your desired outcomes. For instance, we are going with one thousand by one thousand pixel image sizes and a total of ten complete images. However, we could easily change the latter to ten thousand.

One of the most important parts of the code above is how we layer our artwork. For instance, if we were to layer the background on top, it would cover all other components. As such, it is extremely important to ensure that you properly determine layers to achieve the desired outcome. Therefore, we must be careful to have the most bottom layer on top. This is since it will become part of the array first (in our case, the background is on top).

How to Generate NFTs – NFT Engine

To create our NFT engine, we’ll use the “index.js” file. This is where each of our image layer files and corresponding metadata (JSON files) get compiled. The details of how this engine works are not so important as you can simply use the code we provide at GitHub. However, it is critical to properly link the file to your Moralis server details. These are the lines of code we use for that purpose:

// Moralis creds
const appId = "YOUR_MORALIS_APP_ID";
const serverUrl = "YOUR_MORALIS_SERVER_URL";
const masterKey = "YOUR_MORALIS_MASTER_KEY"; // DO NOT DISPLAY IN PUBLIC DIR

Moralis.start({ serverUrl, appId, masterKey });

Since obtaining the details for your Moralis server is vital, make sure to follow the instructions provided in the Moralis documentation. Specifically, you can find these under the “Getting Started” section.

Note: We must point out that putting your master key in a public file is NOT the way to go; however, we did this to make things easier for you. As such, be sure NOT to display any of your files containing your master key publicly. 

How to Generate NFTs – Using Moralis’ IPFS Integration

Another part of our “index.js” code that we want to focus on is the lines of code ensuring our files save to IPFS. By using this storing option, we ensure that our project comes with true decentralization. This is again where Moralis make things simple and convenient for us. Without Moralis, this would’ve been a long and laborious process; however, using this powerful tool, we cover that with two lines of code: 

const file = new Moralis.File(filename, { base64: base64 });
const fileIpfs = await file.saveIPFS({ useMasterKey: true });

In addition, we define two constants so that we can easily use the files we saved to IPFS in other parts of our code:

const filePath = file.ipfs();
const fileHash = file.hash();

For instance, we will use our “file.ipfs()” ID in our JSON files. Moreover, we also use Moralis’ integration with IPFS to upload JSON files with this snippet of code:

let _metaFile = await metaFile.saveIPFS({ useMasterKey: true });

The lines of code above enable us to save our generated image and metadata files to IPFS by simply entering the “node index.js” command in VSC’s terminal.

Furthermore, for the purpose of this example project, we’ve also added lines of code that generate NFTs or their final artwork to your computer. As such, after running our NFT generating engine, you can find ten generated NFTs inside the “output” folder. That way, you can see the results locally. Aside from the image files, there are also metadata files for each of the images. Moreover, using the IPFS path inside the metadata file, you can view your files in a browser:

Moralis Dashboard

In addition to saving our image and metadata files to IPFS, we also saved the generated paths to our Moralis dashboard (database). As such, we can easily use this for any further applications of our “to-be-minted” NFTs.

We accomplished the above by adding these lines of code to our “index.js” file: 

const FileDatabase = new Moralis.Object("Files");
FileDatabase.set("name", _params.editionCount.toString());
FileDatabase.set("path", _params.filePath);
FileDatabase.set("hash", _params.filePath);
FileDatabase.set("imagefile", _params.file);
FileDatabase.set("metafile", metaFile);
await FileDatabase.save();

As you can see, we used sketches for the purpose of testing our NFT generating engine. Now that we’ve confirmed that our code is running smoothly, we can invest more time and resources in creating more polished artwork and then run the code on those pieces of components for our final images.

How to Generate NFTs – Summary

If you’ve covered the sections above, you now know that it is rather easy to generate NFTs. Of course, the quality and success of your NFT collection will be determined by the artwork; however, this can be easily outsourced. As far as the NFT generating engine is concerned, you only need two simple JavaScript files, Moralis and a code editor.

Then, by running the code that contains your Moralis server details, you instantly upload generated NFTs (their art and metadata parts) to IPFS. All that is left to do then is to mint your NFTs and display or list them. Here you have an option to use publicly available NFT marketplaces (somewhat of a centralized option), or you can easily create your own NFT minting dApp and also create an NFT marketplace. Fortunately, by using Moralis, you get to fully cover the backend aspects. As such, you can devote your attention to creating the best user experience. 

If you are serious about blockchain development, Moralis enables you to speed up the deployment of your dApps in record time. Moreover, it also has cross-chain interoperability built-in to its foundation. This means that you are future-proofed when developing with Moralis. Furthermore, Moralis just added support for React Native. As such, you can also create mobile Ethereum dApps with ease using this phenomenal platform.