How to Make an Album Art Generator
Kanye's new album Ye was announced recently alongside a site that let you to make your own version of the album cover. In the past, my friend Simon and I made two unofficial album art generators that received several million views and mainstream press coverage. They took us 30 minutes to make each. I'll show you how we made The Life of Pablol, If You're Typing This It's Too Late and how to make your own Yenerator.
- [Rik] Last week Kanye West launched his ownalbum art cover generator for his new album "Ye"called "Yenerator" or "Yenerator"I don't really know how to say it cause I'm old.But let's have a look at how it works.Basically you get this image and you can just typesomething like "Superhi was here"and then you can save it and put it anywhere you want.Now in the past I actually made two unofficialalbum art generators.The first one was for Drake's album cover"If You're Reading This It's Too Late."We called it "Ifyouretypingthisitstoolate.com"and all you need to do is just start typing"Superhi was here"and again I did an unofficial canny onecalled thelifeofpab.lol"Superhi was here" againapologies for the domain nameit was not a great editwe made it very very quickly.So I made these two with me and my friend Simon Whybray,both our names are down in the corner down there,and both of them had several million hits.We even got covered on places like MTVso there's our two names Rick and Simonand places like Complex as well for both of them.Both of them were made very very very very quicklyand I'm gonna show you in the next two videos.First of all I'm gonna talk about how we made this onesecond one we'll talk about this,and then we'll talk about how this one was made too.
So what we're doing here is basically if there's nothingin this text area at allalways put "start typing" to make it look likeit's doing something.So now if I do "superhi" and then deleteand as soon as I delete the last letterit will then say "start typing" again.Now one thing I want to do is actuallyget rid of this text area.I want this to be anywhere on the pageso if I click on the page and start typingI can see it.Now we just want to alter the look and feel of this.So we need to go back to our start sheet.So the bottom of my start sheet,I'm gonna add some space down here so we can see.I'm just gonna do "textarea."I want this text area to be everywhere on the page.So I'm gonna make it "position is fixed"and I'm gonna keep it in the top left corner,and I'm gonna make it 100% width and 100% heightso it's everywhere on the page.And now you can see that's the boxyou can't see through this.So basically I can't see the underlying div.So how do I make it show the underlying div?Basically I make it see-through.And to do that I'm gonna add capacity is not one but zero.So now if I go to the page and I click anywhereI can start typing.I can say superhiagain there's already something in there,"superhi was here".
So again if I refresh that page I can just click refreshin that corner.At the moment if I click and type extrait's because we've already got "start typing" in there.That's because in my index.HTMLthere's already some content in there.So I just get rid of it nowand go back to the page.As soon as I start typing I've got my Drake generator.
With the lifeofpab.lolwe're actually using a lot more div tags in hereso when I type all of them do it at the same time.And we're basically using the same kind of conceptas the last one.Now I've kind of mocked up a quick one in here.What we're doing here is basically having lots of divsthat are kind of like placed in sectionsso there's basically a section tag with lots of divsinside it.They're using absolute positioning to put them in place.Now I won't talk about it too much but what I'll talk aboutis what we have currently which is five divs.And what we have here is one two three four fivewe've got that text area again from the last oneand this same script called kanye.js this timeinstead of Drake.But we've got the same content in here.Now if I do start typing on the pagewhat'll happen is we're only doing it for the first div,and that's because in my codewe're finding just the one div.Now obviously what we want to do is find each individual divand change it on the page.So how do we update our content?Now what we want to dois instead of it being the querySelector,because that's just the first one,we're gonna change this one to the querySelectorAll.Now this isn't now a div.It's a single div.It's actually multiple so I'm gonna change this to "divs"with an "s" on the end so it's plural.But this only affects div at the moment,so how do we get around that?So what we want to do is loop over each individual divso that it's not just the first one,it's all of them.So to do that what I'm gonna have is for each of the divsso I'm gonna pick the divs and then for each of thosewhat I'm gonna do is pick the individual divfor each individual one and thendo something to it.So I'm gonna open that little bit outand what I'm gonna do is I'm gonna move this code,this "if" and "else" statement into here.And again I'm just gonna format it so that it looksa little bit more readable so it's just a bit more indentedthere we go.So what I'm doing here is in the text areawhenever I'm listening to a key upwhich is when I press the letter,find all of the divs on the page,and then for each individual divcheck the value of the text area and if it's thatmake it the value for each individual one.So now if I go back to the page and start typing,we can see that updates in the same way.So all I've done there is I've just changed what it wasfrom 1 to a loop over all of those divs instead.
So hopefully now the yenerator doesn't look too complex.It's quite similar to the Drake one.Now with the font that we're actually usingI actually found through a product you can actually see hereTim Bowman and Yung Jakebasically made this together.It's seems like it's an official oneand they used Calligrapher to actually make that fontand I've actually just downloaded it from the font.It's from the site yungjake.ttfand I'll just talk about how I've quickly just made this.So again this is very similar codeto what we had in the first project.It's text area with the div,and we're just changing the value to the theme that we want.Now in that index.HTML I've just put the div in the section.Now the section is gonna be the imageand the div is gonna be the text itselfand we're moving the div into the center.So what I have currently is this is the whole section,and this middle bit is just the div,and in my CSS again this should look fairly similar.At the top of the page I've got my font facewith Yung Jake cause he wrote the font.Font family is used thereand that's font size and font weight and line height.The text color is there and then what I'm doing is justmoving the div into the middle of this whole section,just giving the div a max width and text line centerif it goes on multiple lines and just like beforemaking the text area see-through.So we've just made something again"Superhi was here" and this is looking good.So that's all you need to do to make a very very simplealbum cover generator.It can get you multiple of millions of views.It's something that our two unofficial ones gotand lots of press coverageand all in only a few lines of code.