Best of the web for Design and Web Development December 2020

December 28th, 2020
News

This is our final monthly news roundup of the year. The post is highlighting the best Photoshop and Illustrator tutorials created through out month of December 2020. There’s a range of tutorials included from how to create unique text effects to how to create a festive Christmas tree tutorial. There’s some great web articles from understanding more about CSS variables to how to create a figma design system.

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 Make a Sparkle Brush in Photoshop

If you’re interested in glitter and sparkle brushes, in this tutorial I’ll show you how to create a sparkle brush in Photoshop from scratch. Add some magic to your photos with your own diamond sparkle Photoshop brush!

Design a Stylized Christmas Tree in Adobe Illustrator

In this tutorial we’ll be creating a simple stylized Christmas tree, using the basic geometric shapes, dashed strokes and various tools and function of Adobe Illustrator. By the end of this tutorial we’ll turn our illustration into a festive Christmas postcard.

Create Rock Text Surrounded by Fire and Lightning in Photoshop

In this tutorial, I will show you the steps I used to Create Rock Text Surrounded by Fire and Lightning in Photoshop. We will form the text by using several rock boulders and apply fire and lightning elements via stock images and brush paintings.

How to Create an Isometric Christmas Present in Adobe Illustrator

The most magical time of the year is coming! Let’s get ready for Christmas and New Year and learn to draw a stylised isometric Christmas present in Adobe Illustrator using its tools for creating isometric objects and patterns! This is a good opportunity to try out modeling a simple isometric object as this style is still trendy.

How to Create a Cloud Effect in Photoshop

Learn how to create a cloud effect in Photoshop using a simple cloud brush and a sky texture with fluffy clouds.

How To Create a Vintage Movie Title Text Effect in Adobe Photoshop

This style of classic film titles is reminiscent of old black and white movies from the 20s, 30s and 40s. Most of the hard work is done by Photoshop’s 3D functionality. Just some configuration of the settings is all that’s required to produce the three-dimensional effects and the chamfered text face, along with low key lighting and shadows.

How to Create a Realistic Chrome Text Effect in Adobe Photoshop

This super easy and quick tutorial will show you how to use a couple of textures and layer styles to create a shiny, reflective chrome text effect. Let’s get started!

Adobe Illustrator ‘Futuristic Gradient Speed Lines’ Text Effect

The best name I can come up with is ‘futuristic gradient speed lines’! The process of creating this effect is quite simple, but it includes some must-know techniques that can be applied to all kinds of projects in Illustrator. I’ll first show you how to permanently apply the effect to some text but stick around to see an alternative method that keeps the text editable.

Web and design articles

A Utility Class for Covering Elements

Here’s something I find myself needing to do again and again in CSS: completely covering one element with another.

What Can You Put in a CSS Variable?

CSS variables (also know as CSS custom properties) can hold all sorts of things. Some of these things were not obvious to me, which is why I decided to write this.

2 SMARTEST WAYS TO STRUCTURE SASS

Depending on the size of the project you are working on, you can structure your Sass code in two ways: a simple one for smaller projects and a more complex one for bigger projects. Read on to find out how.

Creating a Figma Design System: Buttons, Links, Icons, and Images

This is the last in our series of Figma design system tutorials! In it, we’ll be working on this minimalist portfolio WordPress theme:

How To Migrate From WordPress To The Eleventy Static Site Generator

If you’re a designer or developer with intermediate knowledge of HTML and JavaScript, and know your way around GitHub and the command line, this tutorial is for you. We’re going to walk step-by-step through converting a WordPress site into a static site generated from Markdown.