Best of the web for Design and Web Development October 2020

• October 28th, 2020
• News

October has come to an end in our usual fashion we are rounding up all the very best design tutorials that been written and published in the month of October, alongside must read web and design articles. The post includes a range of design tutorial from how to create a flyer using InDesign to using your illustrator skills to create a retro style badge. There’s some great articles to read through at your leisure on how to design to design for color to widening the responsibility of a front end developers, which are both eye opening articles to read through.

We hope enjoy this month roundup, as much we enjoyed compiling it together.

Web and design articles

Make a flyer.

Watch the short tutorial video above to see all the steps. Then download the free trial of Adobe InDesign, along with sample assets to practice with.

Create a Simple Power Button in Adobe Illustrator

In the following Power Button vector tutorial, you will learn how to create a simple power button in Adobe Illustrator. In the beginning you will learn how to set up a simple grid and how to create and center a simple rectangle that will make up your background. Next, using basic vector shape building techniques you will learn how to create the circle and the compound path that will make up your power button. Finally, taking full advantage of the Appearance panel, you will learn how to add color, shading, highlights and depth for your shapes.

Create Leafy Face Photo Manipulation in Photoshop

In this tutorial, I will show you the steps I took to create this “Leafy Face” manipulation in Photoshop. We will go through techniques such as layer blending, layer masks, filter effects, and the use of adjustment layers. Have a try!

How To Draw a Halloween Pumpkin In Photoshop

In this tutorial, we are going to draw the famous icon of Halloween, the pumpkin with scary face, Jack O’ Lantern. We will start drawing its basic shape with help from Pen tool and continue with drawing manually using the old reliable Brush tool.

Create Surreal Underwater Scene in Photoshop – Featuring a “Fish-Head” Lady

In this Photoshop tutorial, I’ll show you how to create a surreal underwater scene featuring a woman with head of fish and boat. You’ll learn how to combine different stock images together using adjustment layers, masking and brushes, make an underwater environment, enhance color, create lighting effect and more.

Quick and Easy Sleek Beveled Icon Vectors

I love simple and sleek beveled icon vectors. I love them even more when they’re easy to make, and completely versatile as a foundation for a ton of other icons and design ideas. With a little practice, you can probably whip out some really beautiful icons in under a few minutes!

Video: How to Create a Retro Style Badge Design in Illustrator

In today’s Adobe Illustrator tutorial I’m going to show you how to create a retro badge style logo design featuring a simplified vector skull illustration and text elements that follow the circular outline of the badge container. To create the badge logo design, we’ll first start by drawing the vector skull illustration using basic shapes to give the artwork a stylised appearance. I’ll then show you some useful tips for creating Type on a Path effects, which are particularly handy for constructing classic badge layouts like this.

How to replace a sky in Adobe Photoshop.

Replace a drab sky with a vivid one, add a stormy sky to create a foreboding scene, or give your photo an artistic touch with a colorful sunset. You can create a new landscape by blending two sky photos. Learn how to use the Sky Replacement feature to design a dreamy composition in Adobe Photoshop.

Create a virtual photo booth background

Web and design articles

The Widening Responsibility for Front-End Developers

This is an extended version of my essay “When front-end means full-stack” which was published in the wonderful Increment magazine put out by Stripe. It’s also something of an evolution of a couple other of my essays, “The Great Divide” and “Ooops, I guess we’re full-stack developers now.”

Bringing the browser developer tools to Visual Studio Code

Last year, we released the experimental “Elements for VS Code” extension, giving developers the option of embedding the browser developer tools into Visual Studio Code.

WordPress Caching: The Essential Guide

As a website owner, it’s important to know that WordPress caching is one of the most powerful tools you have at your disposal, even if you aren’t using it yet. Simply stated, caching WordPress can make your website fast. Really fast.

Do Website Policy Disclosure Pages Always Have To Be So Ugly?

In some instances, privacy policy, terms of use, and cookie consent pages do have to be ugly. But that doesn’t mean you can’t improve upon how easy they are to read or navigate (which visitors will definitely appreciate). Today, we’re going to look at four ways that web designers can contribute to getting more policy disclosure pages read and terms actually agreed to.

WordPress 5.6 Release Team Pulls the Plug on Block-Based Widgets

Iwas wrong. I assured our readers that “the block-based widget system will be ready for prime time when WordPress 5.6 lands” in my previous post on the new feature’s readiness. I also said that was on the condition of not trying to make it work with the customizer — that experience was still broken. However, the 5.6 team pulled the plug on block-based widgets for the second time this year.

min(), max(), and clamp(): three logical CSS functions to use today

Learn how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions.

Designing for Color Blindness With Chrome DevTools (in Just 4 Clicks)

Color blindness and vision deficiencies are hard to imagine if you are not affected by them. However, it’s important to take people with visual impairments into consideration when designing a color palette for a website or application. If you don’t, they might be unable to use vital features such as clicking links or buttons, or filling in forms.

Who Do Web Designers Really Work For?

Color blindness and vision deficiencies are hard to imagine if you are not affected by them. However, it’s important to take people with visual impairments into consideration when designing a color palette for a website or application. If you don’t, they might be unable to use vital features such as clicking links or buttons, or filling in forms.

Getting Hooked On React

React is a frontend library that is in super high demand in the industry. But, it can be difficult to get up and running with. Today we’ll talk about with React: why it’s so great, how data flows, and the gotchas we encountered when learning it. Let’s get started!

VoV 124: Why End-To-End Test using Cypress with Gleb Bahmutov

In this episode of Views on Vue, we talk with Gleb Bahmutov, VP of Engineering at Cypress, about the importance of end-to-end testing, and why to use Cypress for your tests. We discuss how to write tests that cover a majority of your codebase, as well as new features such as component testing. We also talk about code coverage, and generating reports to determine how well your tests work to validate your application.