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 (a software that turns Slack conversations into stories with just one button) where Hang and I . 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). Slogging conversed about the beef revolving around Gamestop and Robinhood Today, the spirit of 🏳️‍🌈 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! Pride Month 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 , which was redesigned by 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. Philadelphia’s Progress Pride Flag Daniel Quasar “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 Create a new Artboard, size 1000px by 1000px Drag the 6 rainbow colors to the Artboard Group them together Resize the group to 1000px by 1000px 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 (haha, get it?) guideline 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.

GameStop

Robinhood

Slack

check out some cool shit https://kientdao.wixsite.com/kiendao

hackernoon design God. Contributing to entropy since '98

Kien

OpenSea Collections

personal void 

Product Designer

Brand/Design Lead

Too Long; Didn't Read

Questions about cloud security? Get answers here.

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

Too Long; Didn't Read

Companies Mentioned

Kien Dao

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Companies Mentioned

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES