Best of the web for Design and Web Development September 2020

• September 28th, 2020
• News

The 9th month of the year has concluded in our usual fashion we are rounding up the year. The monthly roundup includes fresh new photoshop and illustrator tutorials created through the september. There’s a range of design tutorials from unique frozen text effect to a vintage logo design. There’s also some great webs articles included from how to set up a local wordpress environment,as well a great cheat sheet to convert jquery to javascript. I hope you enjoy reading through this months monthly roundup its a great way to keep web and digital industry.

Photoshop

This tutorial will show you how to use some textures and a couple of different 3D material and light settings, as well as adjustment layers, to create a realistic chipped, painted wood text effect. Let’s get started!

How to Use Lens Flare Filter Like a Pro in Photoshop 2020

In this tutorial, you will learn a number of useful tips and tricks about the application of the Lens Flare Filter in Photoshop 2020.

Create Realistic Frozen Text Effect in Photoshop

In this tutorial, It will show the process I used to create this realistic frozen text effect in Photoshop. We will be using a number of ice textures and custom brush to achieve this effect. We will also be using adjustment layers and filters to perform the touch-ups.

In this tutorial, you’ll learn how to create this effect in Adobe Photoshop from scratch. We’ll start by focusing on adding film grain in Photoshop, and then we’ll use Smart Filters to make sure that our grain photo effect is fully editable.

Illustrator

How to Create an Ornate Vintage Logo Design in Illustrator

Follow along with this Adobe Illustrator tutorial to create a vintage logo for a whiskey bottle label. I’ll show you how a layered typeface and its bonus assets can be used to quickly build great-looking artwork without the need to illustrate the ornaments or lettering by hand.

Quick Tip: How to Make a Repeating Japanese Wave Pattern in Adobe Illustrator

In the following steps, you will learn how to create a Japanese wave pattern in Adobe Illustrator.

In the following steps, you’ll learn how to easily apply a distressed effect to any font in Adobe Illustrator.

How to deconstruct type in Adobe illustrator

Echo your message and make it resonate with a repeating pattern. Learn how to duplicate, reshape, and add a wave to some text to create a stylish typographic poster in Adobe Illustrator.

Web and design articles

The Best Setup for Your Local WordPress Development Environment

When running a WordPress website it’s best practice to at least run a local copy of the site so you can make changes without running the risk of completely ruining the live site. Running a WordPress dev environment for your sites is crucial to a productive and safe workflow as a developer.

Because I’m always up for productivity tips and tricks, I just watched the video “Editing HTML Like A Boss In VS Code” by Caleb Porzio. And wow – this video might have changed how I edit HTML in the future. 🎉

Laravel Livewire vs. Vue

There used to be two ways to build the frontend for a Laravel application: either use a frontend framework, such as React or Vue, or work from a Blade template.

AVIF has landed

Back in ancient July I released a video that dug into how lossy and lossless image compression works and how to apply that knowledge to compress a set of different images for the web. Well, that’s already out of date because AVIF has arrived. Brilliant.

Even though jQuery is still a popular JavaScript library and has a place in web development, native web APIs have evolved a lot in recent years. As modern browsers support a wide range of JavaScript functionalities, we no longer need a third-party library to manipulate the DOM with relative ease. As a result, many frontend developers have decided to move from jQuery to JavaScript to decrease the number of dependencies and thus page load times.

Everything Developers Need To Know About Figma

Figma is a design tool that is rapidly gaining popularity and becoming more common in companies around the world. Unlike most design software, Figma is free and browser-based so developers can easily access the full design files making the developer handoff process significantly smoother. This article teaches developers who have nothing but a basic understanding of design tools everything they need to know to work with Figma.

 

It’s time to supercharge your HTML skills! 🔋

Yeah yeah, I know. I know you know every hot web tech out there. Whether it’s Angular, Ionic, Deno, Node, Django and what not! Really awesome.