Have you ever wondered how to create a genesis NFT collection and how to mint it using verified smart contract? in this article we will walk you through the process of generating, creating and minting an NFT collection.

Check this collection on opensea: EthArmyDGNZ this collection was created and minted following the steps bellow

the following steps requires a basics understanding of nodeJS, web servers and javascript

An NFT (Non-Fungible Token) collection refers to a group or series of unique digital assets, each represented by its own distinct NFT. These collections are often created and curated by artists, musicians, game developers, or other content creators who tokenize their work on blockchain platforms. Each token within an NFT collection is distinct, making it different from fungible tokens like cryptocurrencies, where each unit is interchangeable with another

in this article we will explain how to create an NFT ART collection using Hashlips

What is Hashlips?

Hashlips is a DAPP tool used to create multiple tasks starting from generating NFTs assets which are represents the art or the images ending of minting the tokens to the blockchain after linking each token to its asset

Step 1: NFT Assets/Layers Generating

in this step we are going to use hashlips_art_engine to create multiple different instances of artworks based on provided layers

Check How to install hashlips_art_engine from github

  • Clone the repository:
git clone https://github.com/HashLips/hashlips_art_engine.git
  • Navigate to the root of your folder.
  • If you have Yarn installed, run:
yarn install
  • Alternatively, if you have Node installed, run:
npm install

Create Your Different Layers

  • Imagine your artwork as layers, like putting stickers on top of each other.
  • Make folders for each layer in the ‘layers’ directory.
  • Put all the images for a specific layer in its respective folder.
  • Each image file should have a special name, like “example element#70.png,” where the number (70 in this case) indicates how rare it is. You can change the special symbol (#) to anything you like later.

Configure the Layer Order

  • Open the src/config.js file. Think of this like the master plan for your artwork.
  • In the layerConfigurations object, find the layersOrder array.
  • Arrange the layers in the order you want, from the back layer to the front layer.
  • For example, if you’re creating a portrait, you might have a background, head, mouth, eyes, eyewear, and headwear. So, your layersOrder would look like this:
const layerConfigurations = [
  {
    growEditionSizeTo: 100,
    layersOrder: [
      { name: "Head" },
      { name: "Mouth" },
      { name: "Eyes" },
      { name: "Eyeswear" },
      { name: "Headwear" },
    ],
  },
];

Optional Customization

  • If you want to use a different symbol instead of ‘#’, find the rarityDelimiter variable in the src/config.js file.
  • Change it to any symbol you like. This is just a way to tell the program how to read the rarity number in your image names.

Now you’ve set up your layers and their order. It’s like preparing different pieces of a puzzle. When you run the program, it’ll use these instructions to create unique combinations from your layers, resulting in awesome artwork!

In the art creation process, each layer object’s name corresponds to the folder name (found in /layers/) where the images are stored.

You have the flexibility to enhance your collection by adding multiple layer configurations. Each configuration is like a unique set of instructions, allowing you to experiment with different layer orders. Whether you reuse existing layers or introduce new ones, this flexibility enables artists to tailor their collections to their creative preferences.

For example, let’s say you’re creating a portrait design with layers like a background, head, mouth, eyes, eyewear, and headwear. If you decide to create a new race, rearrange the layers, or introduce new elements, your layer configurations and layer orders would look something like this.

const layerConfigurations = [
  {
    // Creates up to 50 artworks
    growEditionSizeTo: 50,
    layersOrder: [
      { name: "Background" },
      { name: "Head" },
      { name: "Mouth" },
      { name: "Eyes" },
      { name: "Eyeswear" },
      { name: "Headwear" },
    ],
  },
  {
    // Creates an additional 100 artworks
    growEditionSizeTo: 150,
    layersOrder: [
      { name: "Background" },
      { name: "Head" },
      { name: "Eyes" },
      { name: "Mouth" },
      { name: "Eyeswear" },
      { name: "Headwear" },
      { name: "AlienHeadwear" },
    ],
  },
];

Customizing Your Art Creation Settings:

  1. Adjusting Image Output Size and Variation:
    • Change how big your pictures are and the number of different versions you want by updating the format size and growEditionSizeTo in each layerConfigurations object.
  2. Mixing Up Image Order:
    • Have fun rearranging how your pictures are saved! Turn on the option to shuffle the order of layerConfigurations in the config.js file. By default, it saves them in a neat numerical order.
  3. Debugging with Logs:
    • If you’re curious about what’s happening when you’re making pictures, turn on the debug logs by setting debugLogs to true in the config.js file. This helps you understand the magic behind the scenes.
  4. Playing with Blending Modes:
    • Experiment with different ways your pictures can blend together. Add a special field called blend: MODE.colorBurn to the layersOrder options object and see the cool effects!
  5. Adjusting Layer Opacity:
    • Make some stickers a bit see-through! Add the opacity: 0.7 field to the layersOrder options object, and you can control how transparent certain parts of your pictures are.
  6. Ignoring a Layer in Uniqueness Check:
    • If you have special background stickers or layers you don’t want to be part of a uniqueness check, set bypassDNA: true in the options object. It keeps everything else unique but doesn’t consider those layers as traits.
  7. Customizing Metadata Names:
    • Give special names to your stickers! Use the displayName: "Awesome Eye Color" option to make your art even more personalized. You can do this for each sticker if you like!

Example of Playing with Filters:

  • Here’s a fun example of how you can play with both filter fields:
const layerConfigurations = [
  {
    growEditionSizeTo: 5,
    layersOrder: [
      { name: "Background" , {
        options: {
          bypassDNA: false;
        }
      }},
      { name: "Eyeball" },
      {
        name: "Eye color",
        options: {
          blend: MODE.destinationIn,
          opacity: 0.2,
          displayName: "Awesome Eye Color",
        },
      },
      { name: "Iris" },
      { name: "Shine" },
      { name: "Bottom lid", options: { blend: MODE.overlay, opacity: 0.7 } },
      { name: "Top lid" },
    ],
  },
];

When you are ready, run the following command and your outputted art will be in the build/images directory and the json in the build/json directory:

npm run build

or

node index.js

The program creates two important folders to store your art and its details:

  1. Image Output Location:
    • All the pictures you make will be saved in the build/images directory.
  2. Metadata Files:
    • The details about your entire collection are stored in the build/json directory.
  3. Collection Metadata:
    • For each collection, there is a special file named _metadata.json inside the build/json directory. This file holds all the important information about every piece of art in that collection.
  4. Individual Image Metadata:
    • Additionally, inside the build/json directory, you’ll find separate JSON files for each image. These files contain specific details about each artwork. An example of what a single JSON file might look like is provided below:

Example Single JSON File:

{
  "dna": "d956cdf4e460508b5ff90c21974124f68d6edc34",
  "name": "#1",
  "description": "This is the description of your NFT project",
  "image": "https://hashlips/nft/1.png",
  "edition": 1,
  "date": 1731990799975,
  "attributes": [
    { "trait_type": "Background", "value": "Black" },
    { "trait_type": "Eyeball", "value": "Red" },
    { "trait_type": "Eye color", "value": "Yellow" },
    { "trait_type": "Iris", "value": "Small" },
    { "trait_type": "Shine", "value": "Shapes" },
    { "trait_type": "Bottom lid", "value": "Low" },
    { "trait_type": "Top lid", "value": "Middle" }
  ],
  "compiler": "HashLips Art Engine"
}

You can also add extra metadata to each metadata file by adding your extra items, (key: value) pairs to the extraMetadata object variable in the config.js file

const extraMetadata = {
  creator: "Daniel Eugene Botha",
};

If you don’t need extra metadata, simply leave the object empty. It is empty by default

const extraMetadata = {};

That’s it, you’re done with the first step!

Minting NFTs and Creating Smart Contract

Minting and Creating a smart contract is a complex step requires accuracy and validation. hashlips explained the steps in a great way using hashlips_nft_contract

Check hashlips step by step video to mint and create NFT collection:

Youtube Video

Establishing an NFT collection demands a proficient understanding of technical intricacies. It is advisable to seek guidance from an expert before proceeding. At STI, we specialize in providing comprehensive blockchain development services. Feel free to initiate a consultation with us to explore your requirements and navigate the complexities of NFT creation

GET AN EXPERT ADVICE NOW

OR

EXPLORE OUR SERVICES:

STI DeFi Services