Best of the web for Design and Web Development June 2022

June 30th, 2022
News

Where half way through the year with another month down. Its only right we round uo the highlights of month with the best design tutorials and web articles published in June 2022. The post includes a range of design tutorial from how to create an illustration photoshop action to how you can use Illustrator to create isometric text effect. The second half of post includes great web article from how to animate SVG shapes on scroll to how to make your Figma components easier to use.

I hope enjoy the post and don’t forget to subscribe to our newsletter and we will let you know as soon next months edition is published.

Premium design assets for
your next project

Acess to a huge libary of design resources from Photoshop brushes to vector resources.

Join today

Design tutorials

How to Create an Illustration Photoshop Action (From Photo to Illustration)

Wondering how to make a photo an illustration in Photoshop? In this tutorial, you’ll learn how to create an illustration Photoshop action. I’ll explain everything in so much detail that everyone can create it, even those who have just opened Photoshop for the first time.

How to Quickly Make a Dripping Text Effect in Illustrator

Making a dripping text effect in Illustrator can be a bit frustrating if you don’t how which tools to use. Even though this effect can be achieved using different methods (like adding anchor points to your text and then dragging them one by one or even drawing over your text with the pencil tool) there is a quicker way to make this effect using only the (not so often used) Warp Tool. So today, I will show you how easily you can make a dripping text effect in Illustrator in less than 2 minutes and give you a perfect base to add any kind of details that you want.

How to Create a Paper Cutout Effect in Photoshop

Create this stunning layered paper cutout illustration using Adobe Photoshop! This unique style is fun and can be used in a variety of ways.

Colourful 3D Isometric Text Effect Illustrator Tutorial

In today’s Adobe Illustrator tutorial I’m going to show you how to create a colourful extruded isometric text effect. It has a 3D appearance with hollowed out letters, finished off with a vivid spectrum of hues and a subtle glowing appearance. It’s a relatively simple effect to create that makes use of a combination of must-know Illustrator tools.

How to Make a Splatter Brush in Illustrator

In the following steps, you’ll learn how to make a brush in Illustrator and how to save Adobe Illustrator splatter brushes.

How to Smooth Skin in Photoshop with Perfection

If you google “how to smooth skin in Photoshop”, you will see many tutorials where the skin texture is distorted and ends up looking fake. To achieve realistic skin smoothing result, I advise using the Frequency Separation technique in Photoshop.

Web and design articles

How and when to use the CSS `:has` selector

The CSS :has() selector allows us to style an element based on its descendants or any succeeding elements. In this tutorial, we will go over when and how to use the :has() selector.

How to make your Figma components easier to use

What you can do to optimize the UX for component consumers

Can’t Log in to Your WordPress Admin Panel? Try These 9 Fixes

uununii

Sunsetting Atom

We are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022.

Simplify Your Color Palette With CSS Color-Mix()

Defining a color palette and theme can be a lot of work, especially when considering contextual colors for elements’ various states. While CSS color-mix() only blends two colors together, this little function may be the key to maximizing your colors without maximum effort.