Best of the web for Design and Web Development June 2019

• July 1st, 2019
• News

The months round up features a large selection of Photoshop and Illustrator tutorials. A vast range of design tutorials from creating illustration, to creating unique text effects using either Photoshop or illustrator. We have included some great front-end development articles on the “State of CSS” and “how to section HTML”. A great monthly to keep you up to date on what happened through online web community in June.

Photoshop Tutorials

Video Tutorial: Donut Illustration with Grainy Shading

In today’s Photoshop video tutorial we’re going to create a sweet, delicious, tasty doughnut illustration, with the help of my new Grain Shader brushes. These brushes help you bring your flat artwork to life with depth, shading and the sought-after grainy textured appearance. I’ll show you my favourite technique for easily painting in highlights and shadows, then we’ll use some Photoshop tricks to finish off the donut illustration with colourful sprinkles and a kawaii smiley face, because donuts are cute, right?!

Video Tutorial: Letterpress Poster with Overprint Effects

Authentic poster art of this kind would traditionally be created by hand on a letterpress print machine, where the transfer of ink from roller to paper would naturally create the texturing and overprint appearance.

Quick Tip: How to Create a Metallic Text Effect Using Layer Styles in Photoshop

In this tutorial, I will explain how to create a metallic text effect using layer styles in Photoshop.

How to Create a Realistic Embroidery Text Effect

In this tutorial, I will show you how to create a realistic embroidery text effect in Photoshop using stitch brushes and layer styles.

How to Create a Space Style Text Effect in Photoshop

In this Photoshop tutorial, you will learn how to create a futuristic space-style text effect, using Photoshop layer styles and a couple of filters.

Illustrator Tutorials

How to Create a 3D Soccer Field in Illustrator

In the following tutorial you will learn how to create a detailed 3D soccer Field in Adobe Illustrator.

How to Create a Vintage Web Badge in Adobe Illustrator

In the following tutorial, you will learn how to create a vintage web badge in Adobe Illustrator.

How to Make Isometric Art Food Icons in Adobe Illustrator

In the following tutorial, you will learn how to create a minimal set of isometric food icons in Adobe Illustrator. If you are new to isometric drawing then this tutorial is for you because you will learn how to create your own isometric grid, and the icons are made using only basic shapes.

How to Make a Texture Brush in Illustrator

This tutorial is for those who want to incorporate a real-world drawing technique into digital drawing. If you like texture, grunge, or paint brushes, or if you enjoy drawing in Illustrator and would like to have a more diverse brush arsenal, please stay here. In this quick tip tutorial, you will learn how to make and install a brush in Illustrator. I promise that it’s easy, and after this tutorial you will want to create a few dozen more of them!

Design a Flat Teacup Logotype in Adobe Illustrator

Follow this tutorial to create a trendy flat teacup logotype in Adobe Illustrator! We’ll be using and modifying basic geometric shapes, working with Align panel, Pathfinder functions and learning simple yet very useful tips and tricks. Let’s get started!

Web and  Design articles

Wild and Interesting WordPress Statistics and Facts (2019)

WordPress has certainly come a long way since it was first launched in 2003 — so too have the WordPress statistics that help to define this powerful software tool.

WHY DEVELOPERS INVENT PROBLEMS, SUPPORT AGENTS FEEL LIKE JANITORS, AND MARKETERS THINK THE PRODUCT IS LOUSY

There are some frequent problems in software development, that surprisingly share the same root problem. Some of those problems.

State of CSS

In the web development family, JavaScript has developed a bit of a reputation as the angry, rebellious teenager going through a new phase every year and telling you you’re just too old to understand. CSS on the other hand has always been the studious, well-behaved kid who always stays polite and never makes a rash decision.

How to Section Your HTML

It has been brought to our attention in the comments that some of the techniques used in this article result in a poor user experience for screen reader users. Daniel has updated the post accordingly with alternate markup in several of the examples and demos. We’ll continue to make edits to address other things that others have noticed. Thanks for being such an awesome community where we can all learn and grow together.

Web Components Tutorial for Beginners [2019]

In this tutorial, you will implement this dropdown component step by step from scratch with Web Components. Afterward, you can continue using it across your application, make it an open source web component to install it somewhere else, or use a framework like React to build upon a solid foundation of Web Components for your React application.

Debugging .gitignore

Sometimes you might create a file that is unexpectedly ignored by git. Although it doesn’t happen often, it can be tricky to figure out which .gitignore file is responsible for ignoring a file in your project. It is super easy once you know about a handy git command!