Design 101: 3 Ghoulish Design Hacks to Keep in Your Arsenal

Lifehacking is awesome. Hacks save you time, effort and stress from potential problems that occur in everyday life. Why not apply those skills with design in Designhacking? With Halloween right around the corner, it’s time you learn 3 of my ghoulishly great hacks that will save you from headaches in the long run. In this Design 101 series article, you’ll learn how to recover video files that are nowhere to be found but on YouTube, how to export optimal images and how to recreate product GIFs in perfect quality with these 3 design hacks.

Ghoulish Hack #1: R.I.P. Old YouTube Videos

There will come a time where you might have placed a video on YouTube a long time ago, and when you go to find the source/original file on your computer that it might be gone. Maybe it was an accident, or maybe it’s lost… either way you’re in a pickle. Until now. Thanks to the people of the internet, there are ways to RIP videos directly from YouTube to your computer.

Here are a few ways to do just that (as long as you’re downloading your own original created content or you have the “copyright’s owner permission,” otherwise you’ll violate YouTube’s terms of service in unauthorized downloading):

1. ClipConverter: This is a free website that rips the YouTube video for you using the video URL. This site my favorite recommendation because it takes little to no work to obtain YouTube videos.
2. Ultimate YouTube Downloader (Chrome Extension): If you’re a Google Chrome user, then this simple extension is another great solution for you. Simply install the plugin, go to the YouTube video URL and download your desired quality video directly from the page.
3. Direct Download from Safari or Firefox Browsers: Another way is to download the videos directly from your Safari or Firefox browsers. Click on the link and scroll down to #3 & #4 for complete instructions.
4. Free Video Ripping Software: The last method is to download a free software to rip your YouTube videos. Click on the link to see the 5 best YouTube downloaders by TechRadar!

Ghoulish Hack #2: Frankenstein-ing Optimal Image Exports

Did you know that image file types and file sizes actually matter when you export them? They’re not just fancy names, they do have a purpose. Let me show you. The most common image types you’ll encounter are JPEG, PNG and GIF. Each of them serves a unique purpose and it’s important to know what each will do:

• JPEGs: Export JPEG images for images that don’t use text. JPEGs do a great job of compressing high-quality images into smaller file sizes. Also, make sure that when you export JPEGs, that there are no spots that you want transparencies, as JPEGs don’t recognize transparencies and instead will produce a white background to fill the space. Finally, if you’re exporting JPEGs for web, it’s important to export them optimized. You can do this in Illustrator by clicking File > Export > Export As… > (Select JPEG from the Format dropdown). In the pop-up window, change the Color Model to RGB, switch the quality to High or Maximum, switch the Compression Method to Progressive, switch Scans to 5, keep the resolution at 72 ppi (this keeps your dimensions the same, any higher ppi will increase image dimensions), and for Anti-aliasing choose Type or Art Optimized (depending on if there is text in the image – if there is no text, choose Art Optimized)
• PNGs: Export PNGs for all text-based imagery. PNGs also allow transparent backgrounds, which are perfect for exporting things like logos, email graphics and some web graphics. They can also deliver great quality image exports to images that have minimal amounts colors or feature large areas of single colors.
• GIFs: GIFs are actually ancient, but they’re becoming more popular and widely used for a multitude of things. It’s important to only use GIFs for animations or digital ad space retailers as GIFs can export at very low file sizes due to color limitations (only 256 colors are allowed), difficulty with blending gradients (color algorithms like selective, restrictive, etc. must be used), along with other factors that can affect quality.

“The speed of your website has a large impact on its effectiveness, so if you’re not using image optimization, start doing so now – your users will thank you for it!” – Joanne Amos of Wholegrain Digital on the Flywheel blog (@eatwholegrain)

Interested in learning more about image optimization? Read the Flywheel article, How to optimize images to improve WordPress site performance here!

Ghoulish Hack #3: Raise Bad Quality Product GIFs from the Dead

Let’s face it, product GIFs can be a necessary asset to any company’s website, social presence or ad campaign. What happens when your client sends you a terrible screencast for their product to make into a GIF? Instead of digging that poor-quality file a grave, bring it back from the dead by designing your own product GIF. Yes, that might sound crazy, but nothing beats vector-quality and sometimes it’s worth it — especially if you want to provide top-quality work to your client. Did I mention that vector GIFs are going to be significantly smaller in file size than a regular movie file that’s been converted into a GIF?

Now, there are 2 ways you can recreate this vector-goodness. The first way is to recreate the product realistically, and the other is to recreate the product semi-realistically (using rectangles to symbolize text and paragraphs, using flat device mockups like flat-styled browsers, etc.). Whichever you choose, rest assured, the end result will be amazing. Check out the latest product GIF I recreated for one of our clients, ClearCompany, below!

Never created a product GIF before? Learn here in my article, “Design 101: Designing Product GIFs.”

Remember these design hacks, because more than likely, they will save you from some future problem you run into. They did for me. If you have a long-lost video on YouTube, download it at any time, hassel-free with ClipConverter, your browser or a free video software, use proper image exports for optimal results and to recreate product GIFs so the end result will be perfect or near-perfect for your client. Now get out there and get designhacking!

Kyle Christensen

Kyle is the Brand Director at Red Branch Media.

Kyle leads our Graphic Design Department at Red Branch Media. His ability to manage incoming tasks, collaborate with the design team, hit deadlines and keep our file storage system well-organized has helped to shape the design department clients love today. While he’s away from the branch, he spends his time playing drums, video games, cranking the latest emo, pop-punk and screamo songs on Spotify, drinking local Omaha brews, and enjoying life with his wife. Kyle has a BASA with a Concentration in Graphic Design and a Minor in Art History from UNO.