DEV Community

Cover image for How to Make Your Own NFT
Corey
Corey

Posted on • Updated on

How to Make Your Own NFT

Sol address: 4mgnTysrA7kQVYCsE2CJcaJzpX8xPxGPoKPz2LyiN782

Twitter: 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

NPM-https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

Solana Tool Suite- https://docs.solana.com/cli/install-solana-cli-tools

Git: https://git-scm.com/downloads

Atom(Code editor)- 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

Fork the GitHub Repo here: NFT Generator

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

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

Git Clone https://github.com//hashlips_art_engine
Enter fullscreen mode Exit fullscreen mode

and of course, add your own Url to that so you download your own fork.

Image description

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

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

Image description

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

Yarn install
Enter fullscreen mode Exit fullscreen mode
Sudo NPM install
Enter fullscreen mode Exit fullscreen mode

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

Image description

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
Enter fullscreen mode Exit fullscreen mode

Image description

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

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
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

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

Image description

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

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

GO ahead and open up the Bottom lid file.

Image description

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

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

Image description

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

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

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

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

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
Enter fullscreen mode Exit fullscreen mode

Image description

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

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

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
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

Image description

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

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

Twitter: https://twitter.com/OfficialCoreyS

Discussion (2)

Collapse
ben profile image
Ben Halpern

Very informative. I'd suggest cross-posting to metapunk.to as well!

Collapse
coreystevens profile image
Corey Author

Thanks! I'll head over there now and take a look!