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 thelayersOrder
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 thesrc/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:
- 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 eachlayerConfigurations
object.
- Change how big your pictures are and the number of different versions you want by updating the format size and
- Mixing Up Image Order:
- Have fun rearranging how your pictures are saved! Turn on the option to shuffle the order of
layerConfigurations
in theconfig.js
file. By default, it saves them in a neat numerical order.
- Have fun rearranging how your pictures are saved! Turn on the option to shuffle the order of
- 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 theconfig.js
file. This helps you understand the magic behind the scenes.
- If you’re curious about what’s happening when you’re making pictures, turn on the debug logs by setting
- Playing with Blending Modes:
- Experiment with different ways your pictures can blend together. Add a special field called
blend: MODE.colorBurn
to thelayersOrder
options object and see the cool effects!
- Experiment with different ways your pictures can blend together. Add a special field called
- Adjusting Layer Opacity:
- Make some stickers a bit see-through! Add the
opacity: 0.7
field to thelayersOrder
options object, and you can control how transparent certain parts of your pictures are.
- Make some stickers a bit see-through! Add the
- 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.
- If you have special background stickers or layers you don’t want to be part of a uniqueness check, set
- 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!
- Give special names to your stickers! Use the
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:
- Image Output Location:
- All the pictures you make will be saved in the
build/images
directory.
- All the pictures you make will be saved in the
- Metadata Files:
- The details about your entire collection are stored in the
build/json
directory.
- The details about your entire collection are stored in the
- Collection Metadata:
- For each collection, there is a special file named
_metadata.json
inside thebuild/json
directory. This file holds all the important information about every piece of art in that collection.
- For each collection, there is a special file named
- 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:
- Additionally, inside the
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:
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
OR
EXPLORE OUR SERVICES: