Best of the web for Design and Web Development January 2021
- February 1st, 2021
This is our first monthly roundup of the new year. This post where looking at fresh new photoshop and illustrator tutorials all created within 2021 from how to create a matrix photo effect to using illustrator to create a unique 3D text effect. The second half of the round up is design and web development articles, an essential front-end check list for developing a website to 16 micro CSS frameworks.
This is great jam packed round of tutorials and articles this post is a great way to keep update with online design and web development community all in one post.
Follow along with this tutorial to learn how to create a stylized illustration with the appearance of a stained glass window, where the artwork is segmented into several coloured shapes. I’ll first show you how to create the simplified illustration style by using Illustrator‘s shape tools to draw a rose graphic. This vector art alone is a nice, bright, flat illustration style, but I’ll then show you how you can transform your artwork into a realistic stained glass window with the help of a fantastic resource from The Artifex Forge.
In this tutorial, I will show you the steps I took to Design an Interesting Cloud Text Effect in 3 Easy Steps in Photoshop. We will mainly use custom brushsets and utilise brush options to achieve this text effect. This is a beginner level tutorial, have a try :)
In the tutorial, you will be looking at how to make a Matrix effect in Photoshop, inspired by the ever-inspiring and trans allegory Matrix franchise! We will be taking the classic Matrix effect to the next level by adding depth and light bokeh. You’ll also learn how to make a Matrix falling code effect using textures that do all of the heavy lifting.
In this tutorial, you’ll learn how to create a cyberpunk Photoshop effect action to add amazing vaporwave photo effects to your photos. I’ll explain everything in so much detail that everyone can create the effect, even those who have just opened Photoshop for the first time.
In this tutorial you’ll learn how to create dimensional text inspired by vintage packaging designs and logotypes. Pour a cup of coffee, sit back, and let’s create some text with the help of Illustrator effects, the Blend Tool, and textures fit for the branding of a coffee house.
Follow along with today’s Adobe Illustrator tutorial to create a colourful text effect, which comprises of a stack of text elements that transition through the colour spectrum to produce a rainbow effect. This text style has somewhat of a retro vibe, with it being the kind of effect you might see on an old VHS tape box or brand identity for a 70-80s tech or media company. Illustrator’s Blend tool will form a core part of the procedure, but I will also share a useful tip that enables you to alter the wording of all the text instances at once.
In this tutorial, you will learn how to make Polaroids hanging on a clothesline using the Mesh Tool.
Web and design news
Let’s make 2021… fast! An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016. Ah, you can also get useful front-end tips in our email newsletter.
Managing MySQL databases is one of the fundamental requirements of being a professional WordPress developer. Adminer simplifies that task immensely.
When I first learned CSS
back in the days, I took more time than I had expected, and I struggled to memorize it, too. I don’t know the exact reason, but maybe because I didn’t use it that much? Anyway, I will re-learn it with you.
Happy new year, readers! We’re back with a brand new season of Whiteboard Friday episodes for your viewing pleasure.
Here’s an existential question for web developers: How much separation should there be between a website’s content management system (CMS) and its design?
For developers looking for a small, flexible library to help us avoid designing a frontend project from scratch, there is a simple solution: CSS micro frameworks.