Kyle
Awayan

Palette: A fun, interactive image editor based on a music album

February 2021

The Album Art Generator for IU's album, Palette.

I was browsing around, and found someone's DeviantArt mockup of an album art from IU, a K-pop artist. Originally, the album art looks like this...

IU's 'Palette' album artwork, featuring a Polaroid-style photo of IU in a red dress with a pink bow, styled with her hair up. The Polaroid-style photo is labeled in a serif font: 'IU Palette' with 'IU' in pink and 'Palette' in cyan. Surrounding the photo are abstract strokes of pink and blue paint on the border of the frame.

The person re-made this album art in Photoshop as a template, so you're able to change the image and text. However, this is not very accessible to people who don't have Photoshop, so I wanted to make a fun web app that anyone can use to make their own album art.

I quickly thought about how I was going to make this app. Everything was do-able in my head: create a straightforward UI that encapsulates the album art template, handle uploading and implement a simple cropping system. However, I didn't know how the user was going to be able to save the album art they created. Luckily, the app Carbon came into my mind. Carbon is an app where you can paste your code, and it'll basically put it into a pretty frame. For example...

A stylized screenshot generated by Carbon, depicting a code snippet for a React component in a window with a macOS-like design, including traffic light control buttons. The dark-themed code editor window casts a subtle drop shadow, enhancing the visual representation of a desktop coding environment. The displayed code includes an import statement and a functional component that centers its children elements using CSS modules.

I looked at Carbon's source code, and tried to look for the library they were using that related to saving webpages to images. I found dom-to-img, a library to save parts of the webpage to an image file. Now that I found a way to save a generated image, I had the whole app planned out. It was time to start getting the resources for the album art.

First I took the album art and cut out the picture.

A blank Polaroid-style photo frame. Surrounding the photo are abstract strokes of pink and blue paint on the border of the frame.

Then I looked at the person's mockup, then checked what font they were using. It was called "LTC Bodoni 175." I searched for it online, and found that it comes with my Adobe Fonts subscription, with website licensing too. Sweet!

I then made a basic UI, and then the app was functioning.

Screenshot of the 'Palette' app in its early stages. In the center of the screen, there is a Polaroid-style photo featuring a portrait of IU. The Polaroid-style photo is labeled in a serif font: 'IU Palette Generator' with 'IU' in pink and 'Palette Generator' in cyan. Surrounding the photo are abstract strokes of pink and blue paint on the border of the frame. Below the image is a 'download' button. In the top left corner is the app's title, 'IU Palette Generator'

You can change the image by clicking on the inside frame of the polaroid. You can also directly edit the text by just clicking on it.

For cropping, I decided to use the react-easy-crop library. I liked this library as it was very minimal--no sliders or anything like that, just a simple one where you can drag and scroll. It even came with guide lines too!

A gif showing a demo of the cropping feature. An image is loaded into the frame, then dragged around to adjust the position. The image is then resized by zooming in and out with the mouse or touchscreen.

To indicate that the photo was movable/croppable, I flashed the guide when the user inserted a photo. I wanted to see if people would know that they had the ability to adjust the photo. I asked my friends to test the website without mentioning the cropping feature. After they finished using it, I asked them about the first action they took upon loading a photo. All of them said they moved the photo around. Even some of them said that they would've still moved it even if the guide didn't show up at all. This cropping feature is similar to posting a photo on Instagram, so most people should be able to use it, at least Gen Z...

I implemented the library, but there was one more problem left: setting the initial size of the photo. Basically, the problem was that if the user loaded a huge photo, it would be too big for the frame, and if the user loaded a small photo, it would be too small for the frame. The user would either need to zoom out or zoom in extraneously to fit their image. To fix this, I coded a quick algorithm that takes in account image size and device size. No matter how big or small photo or device, the photo will always be the perfect size when loaded into the template.

After I was done with that, the app was done. I had one more thing... IU is a Korean artist, so I wanted to add Korean translations to this app. I researched a bit to find the most accurate Korean translator. I knew that it wasn't going to be perfect, but I wanted Koreans to at least have an easier time understanding. I used react-i18next to handle the language changing. I implemented English and likely less accurate Korean translations, then made it so if the user's browser language was set to Korean, the app would automatically switch to Korean.

As I was putting the finishing touches, I tagged the GitHub repository with "IU". I was curious and checked the other repositories tagged with "IU". There's a good amount! I starred some that I liked.

A few hours later, a developer from one of the repositories I starred made a pull request to fix the Korean translations. Huge thanks to wonderlandpark for contributing.

Screenshot of the "Palette" app. The app is displayed in Korean instead of English.

The Korean version can be accessed at paletteiu.vercel.app/ko-kr

Once I made the finishing touches and added SEO, it was completely finished. I deployed it on Vercel. Overall, this was a very fun project to make!

If you would like to try it, you can check it out at paletteiu.vercel.app