The Rainbowfication of the Hacker Noon Logo: Happy Pride Month!

Disclaimer: Hacker Noon, by no means, wants to profit off Pride Month. We acknowledge that, as a tech publication, this symbolic gesture is the least we can do to support LGBTQA+ communities around the world - to help promote liberation and spread awareness to more people in the spirit of Pride. This is only the beginning, please expect more to come as we work every day to empower diversity and fluidity in the community, both in-and-outside of Hacker Noon.

Hi all, Kien here - your barely-writing-any-story-for-the-3-year-working-at-Hacker-Noon-Brand-Executive.

To be frank, writing a whole essay isn’t my cup of tea - and that’s probably why I’m taking way too long to get back to college - but when I do, it’s usually for special occasions.

In some cases, it is the launch of Slogging (a software that turns Slack conversations into stories with just one button) where Hang and I conversed about the beef revolving around Gamestop and Robinhood. In other cases, it is usually me being threatened by a certain someone from the management board whose name I won’t spill (it was Linh, the mom of the Team).

Today, the spirit of Pride Month 🏳️‍🌈 has brought this lazy sloth out of his bed and actually picked up a pen (technically a keyboard) to write a story for the second time. Today, I’ll show you how to rainbowify the Hacker Noon logo, or any logo of your choice, to celebrate with LGBTQA+ communities across the globe! 

First, gotta do some research.

Has the Pride Flag been updated recently? What’s different about Pride Month 2021? How should the Pride spirit be best expressed via your work?

All of these should be answered in your research. 

The colors of the Hacker Noon Pride logo are inspired by Philadelphia’s Progress Pride Flag, which was redesigned by Daniel Quasar back in 2018. We decided to go with the modern design of the Pride Flag since it incorporates the colors that represent the transgender and black and brown communities, all of whom played an important role in leading the riot for Pride in the past. Without them, Pride wouldn’t happen today. With that in mind, we hope this logo can highlight the importance of inclusivity.

“With everything happening right now, this feels like a good moment to make this flag the mainstream, default symbol for the [LGBTQ+] community,” Chris Godfrey, Guardian Journalist.

source

After doing research, you’ll get the overall idea of what to do with the logo of your choice. Some companies change their background while others apply the rainbow flags right onto their trademarks. In this case, we’ll have some fun with the colors in the background.

Next, launch Illustrator CC. Let the fun begin.

Step 1: The Progress Pride Flag

Create rectangles of the Flag, stacked on top of each other.

Step 2: The background

• With the “Rounded Rectangle Tool”, draw a rectangle with:
  
  Height & Width: 1000px
  Corner Radius: 100px
  Blank, no border
  
• Stack the rectangle on top of the colors, align center both vertically and horizontally
• Select both objects -> Make Clipping Mask 

Step 3: The Shadow

Select a logo of choice, place it in the middle.

BTW, Hacker Noon just recently got trademarked by USPTO, can’t brag about that enough!

• With the “Pen Tool”, create a 315-degree line from the farthest edge(s) of the logo to outside the Artboard frames. This is to create the shadow of the logo. In the case of the Hacker Noon logo, there are 4 edges that the shadow passes through, that is the further right corner and 3 of the left corners (shown in the GIF below)
• Arrange all 4 blocks of shadow under the logo

• With the “Line Tool", draw a 45-degree line
• Select line -> Make Guide
• Drag the other 5 colors to the Artboard, group, and then angle them at 315 degrees. Make sure the edges of the group align with the edges of the shadow in the back, while the top of the group touches the guideline (haha, get it?)
• Copy the color group (*)

• Arrange the color group to go under the first block of shadow
• Select both objects -> Make Clipping Mask
• (*) Paste the color group, align them to the edges of the shadow blocks and the guide once more
• Perform the same tasks for the other 3 shadow blocks

Result of step 3

Step 4: Touching up!

• With the “Rounded Rectangle Tool”, draw another rectangle with the same dimensions as the current one, leave it blank and borderless
• Align the rectangle to the center
• Group the shadow blocks together
• Select both the newly created rectangle and the group of shadow blocks -> Make Clipping Mask

• Isolate the color group of the background
• Angle the color group at 45 degrees
• Adjust according to the rectangle frame

AND, VOILA!

Above is the quick tutorial on how to rainbowfy literally everything, in Hacker Noon style. Yes, feel free to copy ours and spread positivity, diversity, and uniqueness to friends, family, and other people around you. Let’s start celebrating Pride Month with Hacker Noon!

I’ll make a comeback with more tutorials, probably on designing Hacker Noon cyborgs, like this Dr.One.

Backstory by @Limarc, our VP Growth

Till' the next time, this has been Kien - your Brand Executive.