Best of the web for Design and Web Development October 2022

• October 31st, 2022
• News

This is our monthly roundup where we roundup the best design and development themed posts from the month of October. This first half of the post features design tutorials for photoshop, Illustrator and procreate, from how to create a cartoon effect to a video tutorial on creating a cold text effect. The second feature some great design and dev articles from “How To Build A Design Portfolio With Zero Clients” from “What’s New In DevTools: Halloween Edition 🎃”. Another great web roundup jam packed with some must read posts.

Design tutorials

Turn Photos into a Cartoon Effect Photoshop Tutorial

 Photoshop tutorial I’ll show you a cocktail of adjustments that mimic the outlines, colours, and shading of a digitally painted image automatically, without the need to trace, paint or draw by hand. This effect can be applied to any image to transform a real photograph into an illustrated cartoon graphic.

How to Create a Bones Text Effect in Adobe Illustrator

Create your own Halloween text! In the following steps, you will learn how to create a simple bones text effect in Adobe Illustrator. 

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.

How to create an ice cold text effect

This photoshop tutorial is in the form of a video screencast to guide you through step by step how to create a unique ice cold text effect using Photoshop. The end result is really easy to achieve and a technique you can use in your own projects.

How to Create a Scary Clown Face in Photoshop

In this horror Photoshop tutorial, you’ll learn how to make a scary face in Photoshop. I’ll explain everything in so much detail that everyone can create this clown face Photoshop effect, even those who have just opened Photoshop for the first time.

How to Do Symmetry in Procreate

In this tutorial, we will learn how to use the Procreate Symmetry Tool, or better said, how to do mirroring in Procreate. You can use it when you want to create a precise symmetrical illustration, like for the times when you struggle to draw the other eye.

Web and design articles

What’s New In DevTools: Halloween Edition 🎃

In this article, Patrick Brosset gives an update on the most impactful new features that are now available in DevTools, across Firefox, Chrome, Safari, and Edge.

11 Types of Developers (Which Will You Be?)

Say the word “developer” and we at Kinsta think “software.” Not, say, “real estate.” Yet even the focus on computers and code leaves a lot of latitude for describing types of developers.

How To Build A Design Portfolio With Zero Clients

A design portfolio is an excellent way to demonstrate your skills as a freelancer. As a web designer, you compete with millions of other web designers. Therefore, you must have a strong portfolio to land a high-paying web designing job in such a competitive space. A strong portfolio sets you apart from others. Having no clients, however, can make it challenging to get your portfolio noticed and build up any momentum.

5 things I learned about being a solo designer at an early-stage startup.

Solo designing can be daunting. Here are five things I learned during my time as a solo designer at a seed-funded startup.

:where :is CSS?

In this post we will talk about the not so new functional pseudo-class selectors :is() and :where().

It’s OK to fear the command line

In the command line, anything is possible. It’s scary but with the right tool, it’s also empowering.

CSS Halftone Patterns

A little while ago, Ana Tudor created an impressive collection of halftone patterns using only CSS. As I had a little time to spare, I thought I’d dig into the code and see how it was done! Ana’s demos are made using Sass — what better way to learn than to try to produce similar effects using vanilla CSS?

When life gives you lemons, write better error messages

Error messages are part of our daily lives online. Every time a server is down or we don’t have internet, or we forget to add some info in a form, we get an error message. “Something went wrong” is the classic. But what went wrong? What happened? And, most importantly, how can I fix it?