Best of the web for Design and Web Development October 2021

• November 1st, 2021
• News

The end of October means we are rounding up the past month in our traditional fashion by rounding up all the best design tutorials, web development and design articles published through out the month of October.

The round up features a great mixture of design tutorials including InDesign, illustrator and photoshop. There’s a range of tutorials from how to prepare a business card for print, to how create a unique text effects using photoshop. The second half of the post is jampacked with great articles to read through from CSS debugging to to a smart CSS solutions to common UI problems.

This post is a great way to catch up on the past month, we hope you enjoy reading through the roundup.

How to Create In-Water Text Effect with Displacement Maps in Photoshop

In this tutorial, you will learn an effective method to create in-water text effect in Photoshop – by using the versatile Displacement Maps feature.

How to Create a Money Text Effect in Adobe Illustrator

By applying transformations and effects using Illustrator’s Appearance panel we can preserve the live text, rather than have to first outline the text into shapes, which means it can’t then be edited. Using this same technique, you can combine various colours and effects to craft a variety of retro and vintage text styles, just like my free download of Retro Text Effect Graphic Styles for Adobe Illustrator.

Dodge and Burn: Non-Destructive Contrast Adjustment in Photoshop

Adobe Photoshop’s Dodge and Burn tools are powerful, but it’s frustrating to have to either work on the original image or stack multiple layers in order to be able to correct mistakes easily. In this tutorial you’ll learn a simple, effective alternative that’s completely non-destructive for black and white and colour images!

Create an Electrified Text Effect in Photoshop

In this tutorial, I will show you the process I used to this electrified text effect in Photoshop. We will use a circuitry stock image as our background, and add a couple of electric current image for our final effect. We will be using lots of image adjustments and brush painting in the process.

How To Prepare a Business Card Design for Print

In today’s tutorial I share my process of designing a business card and highlight some important considerations when designing for print. It’s super important that you get things like bleed, color mode and resolution right when you’re creating your artwork, otherwise you might end up having your files rejected by the printer, having to start again from scratch or even worse, receiving hundreds of prints back that look nothing like your design!

Quick Tip: Creating a Custom Text Box Using Type and InDesign

Setting type using InDesign doesn’t have to be about drawing simple square and rectangle boxes. In this tutorial you’ll learn how you can use the actual type to create a custom shaped text box.

Design and web articles

The CSS prefers-color-scheme user query and order of preference

How to win at CORS

CORS (Cross-Origin Resource Sharing) is hard. It’s hard because it’s part of how browsers fetch stuff, and that’s a set of behaviours that started with the very first web browser over thirty years ago. Since then, it’s been a constant source of development; adding features, improving defaults, and papering over past mistakes without breaking too much of the web.

Native CSS nesting: What you need to know

Native CSS will support CSS nesting. This is a really good feature for so many reasons, with one of the foremost being that it’s easier to write clean and understandable CSS code.

A Guide To CSS Debugging

Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs.

How to Make Your WordPress Website Accessible

Understanding and properly utilizing WordPress accessibility is vital to your site’s usability. If you’re new to this topic, accessibility is just what it sounds like: the degree to which anyone can access and fully use something.

What’s New in Gatsby 4

As the most impactful release of the Gatsby web framework to date, Gatsby 4 introduces a host of new features that will not only make building and deploying your websites faster, but provide blazing speed (and an enhanced user experience) for your site visitors. You can find an exhaustive, point-by-point list of absolutely everything new and updated in the official Gatsby 4 release notes, but I thought it would be helpful to present an overview of just a few of the Gatsby 4 features that will have the biggest impact on your web development efforts.

Buttons vs. Links

Should some links look like buttons, or should some buttons look like links? Twitter was all up in arms about this issue this week. Let’s take a look to see what these two UI elements are and what they do, and then, how they can look.

Smart CSS Solutions For Common UI Challenges

Writing CSS has probably never been more fun and exciting than it is today. In this post we’ll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS. If you’re interested, we’ve also just recently covered CSS auditing tools, CSS generators, front-end boilerplates and VS code extensions — you might find them useful, too.