This article on how to remove a background in Photoshop remains one of our most popular posts and was updated in 2019 for Adobe Photoshop 2020. Photoshop offers many different techniques for removing a background from an image. For simple backgrounds, using the standard magic wand tool to select and delete the background may well be more than adequate. For more complicated backgrounds, you might use the Background Eraser tool. The Background Eraser Tool The Background Eraser tool samples the color at the center of the brush and then deletes pixels of a similar color as you "paint". The tool isn’t too difficult to get the hang of. Let me show you how it works. Remove a Background, Step 1: Open your Image Start by grabbing an image that you want to remove the background from. I'll be using the image below, as it features areas that range from easy removal through to more challenging spots. I snagged this one for free from Unsplash. Now let's open it in Photoshop. Remove a ..
This article was created in partnership with StudioWorks. Thank you for supporting the partners who make SitePoint possible. Sure, you need a certain minimal viable level of design skill prowess if you want to have a successful career as a designer. But a lot more than that goes into it, too. Think about how many people you know who can cook amazing food but who would never last five minutes in a restaurant kitchen during the lunch rush. It would be great if we could just sit down, design pretty things, and go home. Or better yet, just chill in our home studios, creating. Unfortunately or not, design is a business just like everything else, and that means you’re going to have to put time, effort, and sometimes money into cultivating the soft skills and business side of your design career. This means managing your time well, marketing yourself, building a brand, experimenting, maybe launching a side business, and generally just putting your name and work out there for people to find...
This article was created in partnership with StudioWorks. Thank you for supporting the partners who make SitePoint possible. Banner ads have been around since the dawn of the Internet. And badly designed banner ads that annoy many users have been around just a long. But 30 years later businesses still pay to put them on websites and in their ad rotation, so they must work when done right. Right? Banner ads, especially animated ones, are being used more than ever on social media profiles and as social ads too, as marketers realize the power of video in catching attention. Today’s banner ads are sophisticated and well designed, and can be highly effective. But for designers, they present a huge challenge. Coding Banner Ads Is Hard and Expensive Banner ads, especially animated ones, are notoriously hard to code in HTML5. Sure, you can create animated banners in Flash, but Apple’s iOS doesn’t support them, and Adobe says they’re shutting down Flash altogether in 2020. GIFs are another ..
Design handoff (before it was even called that) was a complicated, frustrating, and often disastrous task. Way back when, Photoshop was the only tool available for screen design, and converting a design to code was called “slicing a PSD.” Oh, the days. Slicing a PSD was the developer’s responsibility, which was quite frustrating because developers understandably didn’t want to work with design tools. That being said, designers had to manually write out design specs for every layer in a Photoshop document, which often resulted in inconsistencies and heated discussions with developers. This set designers and developers on a path of war that even today we’re not ready to joke about. But eventually we were introduced to Sketch. Thanks to its extensible API, developers were able to build apps that could analyze and interpret design documents completely. Today, design handoff tools have become a must-have in every design workflow, with almost every screen design tool integrating with (or ..
First off, what is cross-browser testing? Cross-browser testing is the formality of testing web applications and websites in all of the common web browsers that users use today — this ensures that we deliver a consistent user experience everywhere, and not just the web browser that takes our fancy. Here are some of the things to look out for: Code validation: do some browsers report code errors? Performance: is the website slow, or even causing crashes? Responsive design: is the design consistently responsive? UI inconsistencies: are there any other design flaws? Other strange behaviours: anything else simply not working? What happens if I don’t test? Inconsistencies are actually very normal. Fact is, all web browsers behave and render websites a little differently, and some browsers might not even support the features we originally aimed to utilize; and when these inconsistencies appear, it can have a direct impact on our revenue (among other things). Let’s take eCommerce for examp..