Step by step: How to create a full NFT collection with Layers

The CryptoPunk collection (Credit: OpenSea.io)

NFTs are booming right now with new artists and pieces coming into the space daily. Amongst the most popular pieces are the NFTs collections make up a huge part of the overall marketvolume.

If you have heard of projects like CryptoPunks, Art Blocks or Bored Ape Yacht Club you might have a sense of how much money is actually paid for some NFTs. Just recently CryptoPunk #9952 sold for 388.88Ξ ($1.5M) and it is by far the only one selling in the millions of dollars.

However, if you are a new artist coming into the space you might be overwhelmed a little by the technical aspects that are underlying these collections. CryptoPunks are not just little pixel images drawn in Paint, they are generated by an algorithm that randomly layers different properties together in a piece. In fact this is how most of the popular collections were created.

How it works in theory is rather simple: Let’s take the Bored Ape Yacht Club as an example. An ape is composed of different properties such as background, eyes, mouth, clothes etc. An artist now creates multiple versions of each property. He draws a set of eyes, creates backgrounds in multiple colors, different mouths and so on. These images are now fed into an algorithm that takes one random image from each property and layers them to compose a piece with it - repeating that 9999 times and you have your collection of Apes!

In praxis however generating thousands of images is not an easy job if you are not into coding. Here is the good news though: In this guide I will not only show you step by step how you can create your very own collection, without you needing any prior coding experience. This way you can focus on your art and let the algorithm do the hard work!

1. Define your concept

In the first step you need to design the concept for your collection. While this might seem like an easy task at first there is some planning needed to save some time later. The main focus right now is to:

Pick a theme - I’m sure you will find some great ideas to pull off but keep in mind to choose a topic that interests other people - and don’t copy other collections. At this point it also makes sense to think about the art style that you want to go for. Are you more into pixel art or maybe something hand drawn? Some themes might need a certain amount of detail in the picture, others might look better in a pixel art style. In general I would pick a topic and style that interests you and you are comfortable creating. In the end it doesn't really make sense to force yourself into doing work you are not actually enjoying.

Think about the amount of properties - This will influence how many unique pieces you can generate. If you for example choose to go for two properties (e.g. eyes and mouth) and you draw 10 different eyes and 10 different mouths you can generate a maximum of 10x10 = 100 unique pieces. By making another property with 10 more images you can already create 10x10x10 = 1000 unique images. Most of the popular projects have between 6-12 different properties, for example (Bored Ape Yacht Club):

• Background

• Fur

• Hat

• Clothes

• Eyes

• Mouth

• Earring

The more properties you are creating the more diversity you will have in your images, but also the more work you will have.

Think about the number of NFTs in your collection - The maximum number of possible unique images is determined by the number of different single images you want to create. You can calculate the minimum number of images needed with the following formula:

(number of images)^x = total number of pieces , x = number of properties

For example if you want to have a collection of 10,000 pieces and you decided to include 6 properties, then the average number of images per property would be 4.64 (rounded up to 5), because (4.64)^6 = 10,000

You can always check whether you have drawn enough images by multiplying the amount of images for each property. If you drew 3 eyes, 5 mouths and 10 backgrounds you can generate a maximum of 3x5x10 = 150 unique NFTs.

2. Create your art layers

Now the fun part begins, because we are going to start on the artworks. Depending on the experience you have with creating art and the complexity of the art you want to create I can recommend these two programs:

1. Adobe Photoshop ($20.99/month)

2. Gimp (free)

If you already own Photoshop I can only recommend using it, if you don’t want to pay for it, they also offer a 7-day free trial.

For this tutorial however I am going to use Gimp 2.10 which is very close to Photoshop but completely free and available for Mac, Windows and Linux. However feel free to use any other software that offers basic tools for making art, the process will be the same (or at least very similar).

1. Open Gimp and go to File ⇾ New…

2. Create a new image with a resolution of for example 1000x1000px. You can also use a different resolution and later adjust width and height in the code.

3. Delete the default layer called “Background” by pressing the small "x" so that you have an empty working space.

4. Create a Layer Group for each property that you want to include. The properties I chose are:

• Background

• Skin

• Mouth

• Nose

• Eyes

Make sure to drag the groups in order with the background being on the bottom and the most foreground element on the top. You can also name the Layer group by double clicking. It should look something like this:

5. Now click on the “Create a new layer” button while having the background group selected. You can name your layer something like “background_1”, then click “OK” to create it.

6. For the backgrounds I will keep it simple and just use a plain color. You can fill the layer by selecting the “Bucket Fill Tool” and then choosing a color that you like. Then just click into the empty space and you should have your first background. Repeat steps 5 and 6 until you have the desired amount of background images. You can show or hide layers by clicking the eye symbol next to the layer.

7. Now we will start working on our character. There are multiple methods and tools you can try, to achieve the results that you want.

Paths tool (B) - This tool will generally give you the most beautiful results, as you can accurately place outlines and color in areas. However carefully putting down every stroke in your image also takes the most time. To draw an outline for your character, select the Paths tool and click and draw into the image. After creating a path that satisfies, click on “Fill Path” while having the desired color selected as the foreground color. You can always edit your path later under the “Paths” tab, above your layers. This is how it could look like:

Paintbrush tool (P) - This tool is great for free hand painting with a mouse or, if you have, a graphic tablet. You can also draw in patterns by selecting a textured brush from the menu on the right side.

Pixel Art - If you are more into pixel art, here is the easiest way to do it:

1. Go to Image ⇾ Configure Grid... then select a Spacing that fits you and an Offset of half the spacing.

2. Go to View ⇾ Show Grid then View ⇾ Snap to Grid.

3. Select the Pencil tool (N) using the Pixel brush and choose a size that fits to your grid (this will involve some experimenting).

Now whenever you press on the screen, the pixel will automatically snap to the closest grid cell and you have beautiful pixel art, while maintaining the resolution of 1000x1000px.

You can also go for a combination of the Paths tool and the Paintbrush tool. This gives an accurate and sharp outline while still offering some variation in colors. You can do this by making a selection from your Path (above the “Fill Path” button) and then painting into the selection with the Paintbrush tool.

Using the above methods, start to create all the images for each of your properties. Make sure that you create a new layer for each image and that you name your layers accordingly. In the end you should also check that none of your images overlap with other layers in a way that is not intended.

8. Finally we want to export our layers one by one. Unfortunately there is no direct command in Gimp to do this so we have to take a little detour:

1. select the layer

2. press ctrl+c

3. press ctrl+shift+v to paste as new image

4. press ctrl+e and export as PNG.

5. repeat for all layers

In the end your folder structure should look something like this, with all the all folders filled with multiple images:

3. Generate your NFTs

Now we are ready to generate our NFTs from the single images we just created. While this part is definitely more technical, we can take a big shortcut by using Open Source code by HashLips. So all we have to do is install a bit of software and customize some of the code to our needs.

Preparations

1. Install NodeJS - This is an Open Source runtime for JavaScript that we need to run our code. If you have worked with JavaScript before, it is probably already installed on your computer. You can download NodeJS from their website here.

2. Install Visual Studio Code - This is a free code editor developed by Microsoft that we will use to create our project and modify the code. You can find it on their website here.

3. Download the Github project - Now we are getting the actual code for generating our NFTs. Go to HashLips Github page that you can find here, then click on the green “Code” button and press “Download ZIP”.

4. Unzip and open the folder from Github, then drag your folders into the “layers” folder of the GitHub repository.

Setup in Visual Studio Code

Now we will start working on the code. Before we dive in though we still have to do some setup work in order to get our code to run properly.

1. Open up Visual Studio Code.

2. Click on File ⇾ Open… then navigate to the Github folder and open the whole folder. The project should appear in the Explorer window on the left and look something like this:

3. Click on Terminal ⇾ New Terminal to open a terminal window in the bottom of the screen.

4. Type “npm install” then hit Enter. This will initialize NodeJS for our project and can take up to a couple of minutes, depending on whether you have used NodeJS before

Modifying the project

Before we can run the whole thing we have to modify some of the code to fit our own needs.

1. Open the file src ⇾ config.js

2. Adjust the following three parameters:

layersOrder - this array takes in the layers of our project in the order that they are rendered. Replace the default names with the exact name of the folders that you dragged into the layer folder.

format - adjust the width and height parameters to the resolution you chose for your images.

defaultEdition - set this number to the number of editions you want to generate.

Running the Code

Finally it is time to run our code and generate our output file! Make sure you have saved the config.js file and don’t have any errors in the code.

To run the code navigate to the terminal and write “node index.js”, then press Enter. This will tell NodeJS to execute the file index.js from within the project, which will then generate your final NFTs into the “build” folder. You can now access your freshly generated NFTs in your project folder.

The little aliens I made for this guide turned out like this:

-> If you are interested in this collection and want to support me check it out on OpenSea.

Uploading your collection

I’m sure you want to upload your NFTs as fast as possible to OpenSea or another marketplace of your choice. Unfortunately OpenSea makes it very hard for beginners to upload entire collections, basically you have three options:

Manual Upload - Depending on the size of your collection this is either the best or the worst option. Uploading each piece individually gives you great control over all the parameters of your NFT but it would take a very long time if you were to upload a collection of 10,000 pieces.

Write a ERC721 smart contract - this is the most “professional” option and gives you great control while saving you a lot of time. However writing your own smart contract is only a sensible option, if you have prior experience with coding. Otherwise I would recommend the third option.

Use a Macro Program - Programs like Macro Scheduler allow you to automate repeating tasks by simulating mouse clicks and keyboard presses. This still requires some coding experience but by far less than writing a n ERC721. The software Leapwork even allows for macro automation without having to code at all.