How to Make Your Own NFT
Tags: nft, rust, tutorial, solana
Published: 2022-01-19 20:26:31

Sol address: 4mgnTysrA7kQVYCsE2CJcaJzpX8xPxGPoKPz2LyiN782

Twitter: [https://twitter.com/OfficialCoreyS](https://twitter.com/OfficialCoreyS)

## **Project overview**

Today we are going to go over the steps on how to generate NFTS by providing image layers into a code.

I will go over exactly how to get the GitHub repo and how to update the code to make images.

## **Prerequisites**

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

NPM-[https://docs.npmjs.com/downloading-and-installing-node-js-and-npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

Solana Tool Suite- [https://docs.solana.com/cli/install-solana-cli-tools](https://docs.solana.com/cli/install-solana-cli-tools)

Git: [https://git-scm.com/downloads](https://git-scm.com/downloads)

Atom(Code editor)- [https://atom.io](https://atom.io)

## **Getting Started**

After downloading all the prerequisites, we are ready to get started. 

To start, let's create a folder on our desktop, or wherever you would like the Repo to be saved. I made the file name NFTProject. We are going to be downloading the GitHub Repo into this folder.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9efgh9jinwpiro4dvuih.png)

Fork the GitHub Repo here: [NFT Generator](https://github.com/HashLips/hashlips_art_engine)

Once you have forked it, we are going to download it. 

Open terminal and change the directory to the folder we created on the desktop(or wherever you have it). You can do this by copying the folder, going to terminal and typing CD and pasting the folder path. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a99c7gtoeu0oyxq33516.png)

Next, we are going to clone the repo into our folder with this command :

```
Git Clone https://github.com//hashlips_art_engine
```
and of course, add your own Url to that so you download your own fork.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpa7yaxaz4o2wwfjutp7.png)

Okay, cool. We got it downloaded, now we need to download the dependencies. Let's go into the new directory that we just downloaded by copying the new folder inside the folder we made. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbcn1dcry7dcjzs4lxik.png) 

Then, go to your terminal window and type in CD and paste the new path. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08y136yb6p485owjyp9q.png)

Once you're in the new folder we downloaded, let's install the dependencies by running a few lines of code.

```
Yarn install
```

```
Sudo NPM install
```
I use Sudo for NPM because sometimes it has authorization issues.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4nrjsaun7mp2n28vnz6.png)

From here, we can actually build the images from the layers already provided! All we have to do is run a simple command in our terminal. 

So, in terminal run this code while in the hashlips_art_engine directory(which you should already be in) :

```
npm run build
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtbgmksimu6s8tbcsjmm.png)

Now, if we go back into our Code Editor, you'll notice a Folder named Build was created. If we open that up, you'll see the images that were created.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1tu4fz0za3wuw58njs5.png)

That's cool and all, but ..let's add our own layers and build it... 

## **Updating The Config.js File**

I'm going to be using my own images that's an actual project, so I can't share them. Feel free to create your own. 

Alright, let's open the hashlips_art_engine file in our Code Text Editor (I recommended downloading Atom in the peereqs).

Go to the SRC Folder and open up the Config.js file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4evppybby0qxvz987vo.png)
A few things we want to do in this file, so lets go over those..

First, let's change the name, description. This can be whatever you'd like. Just leave the baseUri as-is.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qg8zk5xsp2aebpid7ip1.png)

Next, lets change the Sol address to our personal one( use your own, or use mine haha). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/je0rkotxzkcrlttbulu6.png)

The growEditionSizeTo is the amount of images you want to make. I'll just do a small amount for the example. 

Now, lets add our own layers below that line. You'll see layersOrder below the editions. That is where we will update the layer order when we make new ones in the file. 

Lets, head over to the hashlips_art_engine on our desktop(or wherever saved) and lets go into the layers folder.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip8abijec46j6xhe17zj.png)

Once in the layer folder, you should see a list of layers with titles associated to them. These are the same titles that are in out Config.js file under layersOrder. The order of these DOES matter. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0llargpirxpss3hyf1v.png)

GO ahead and open up the Bottom lid file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/603690u9hyi5446wxm0c.png)

You'll notice there is the name of the file and then a # with a number. The # with the number is the rarity weight 1-100. 1 being the rarest and 100 being most common.

Since we have our own layers, we are going to delete all of the files inside of the layers folder, so it's fully empty.

Start by making a new folder inside the layer folder and name it. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6di6evbqfv6aj7hn7f0.png)

Then, go ahead and put the new layers inside of that folder.. like this..

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdlusm4kbnwk64cgpkwc.png)

Your images will look different, these are just the ones I'm using.

Now, let's rename the files in here so that it we have the rarity weights. You can name the files whatever you want, just make sure to add # and a number to say the rarity. For example : green#50.png 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23xlgcv7bj9uvuwsanij.png)

And just add all your layers the same way.

Now that we have all the layers added and all of our images correctly labeled in the format of green#50.png. My layers folder looks like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdcez9sehufxj0sq5n8j.png)

Now, we need to change the order of the layer in our code. Lets head back over to our Code Viewer, and go to the Config.js file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9qwi78drbu0s4yfted1.png)

We need to match this order to the order we have in our Layer file we just made.

Your order will be different, but here is mine:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nbxvmclj0oth828unl8.png)

Okay cool, now all we gotta do is build it. Lets go back to terminal, and in our Cd hashlips_art_engine, we want to run:

```
npm run build
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cle42my5a4j9wxkjdlr.png)

And.. if we head back over to our build file that we talked about before, you'll see the new images with the layers you updated. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyyrizm38yqqwgm04nw7.png)

Pretty sweet huh?!

Okay, there are a few other things that you can do. But first, let me just show you that the images also come with Meta data.

If you go back to you Code Editor and go to the build file, you'll notice there is a json file. Open it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n70l6ik6l086vgod8795.png)

And you'll see each image has it's own Meta Data. Okay dope.

Lets head back to our Terminal and run :

```
npm run preview
```
Now if we go back to our build file, you'll see a preview image that compiles all the images together into one big collage. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eztx2752x1qryxhlvc94.png)

Okay cool, that's pretty dope, but let's try a different one. 

If you want to create another folder with all the original pictures(this doesn't delete the originals) pixelated, you will run :

```
npm run pixelate
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8z7uae56qkhbfamz3lr.png)

You'll now see a new folder with your images in pixelated form (which is MAD popular right now).

To change how pixelated the images come out, go over to our Config.js file in the code viewer and go down to line 68, and change the number to the left of the / where the arrow is pointing. The higher it is, the better the quality:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0u69w4c2wi4l553dvkv.png)

And that's it! If you read the bottom of the Hash Lips GitHub you'll see a bit more info on different things that you can do with it!

Thanks for tuning in with me and going through this Tutorial. I hope this helped out a few people!!!

Feel free to shoot me a follow on my socials!!!

**Github**: [https://github.com/coreyman11](https://github.com/coreyman11)

**Twitter**: [https://twitter.com/OfficialCoreyS](https://twitter.com/OfficialCoreyS)