Best of the web for Design and Web Development July 2019

• August 1st, 2019
• News

My favourite time of the month, when we round up the past month with the latest and best design tutorials, as well as online web development articles. This month includes a range of design tutorials from how to create a retro radio illustration, to creating a cool plaid pattern effect using illustrator. The post as usual includes some worthwhile reading web development articles on improving JavaScript performance, SVG for developers and much more.

Illustrator tutorials

How to Create a Game Controller Vector Icon

We will use the effects along with some basic vector shapes to achieve the final outcome in a short time. Hopefully you will learn some useful work tips.

How to Draw a Unicorn Illustration in Illustrator

In this Illustrator tutorial, we will learn how to illustrate a unicorn using very simple techniques.

How to Make a Plaid Pattern in Illustrator

Always wanted to create a plaid pattern, but never knew exactly where to start?

How to Make an Arabic Pattern in Illustrator

Hi! In this tutorial, you will learn the step-by-step process of how to make a pattern in Illustrator. We will be making an Arabic pattern illustrator swatch, using Adobe Illustrator.  

Photoshop

Draw a Realistic Retro Radio using Photoshop and Illustrator from Scratch

In this tutorial, we will draw a retro radio from scratch in Photoshop and Illustrator. We will start by drawing its wireframe in Illustrator and then export the path to Photoshop where we will continue to polish it. This is extra long tutorial with a total of 131 steps! If you think you’re up to the challenge, dig in now!

How to Resize an image in Photoshop (and when you should Resample instead)

Resizing an image sounds like one of the simplest things you could do in Photoshop, but there are actually some common mistakes you should avoid.

How To Create Old School Style Tattoo Art in Adobe Photoshop

The style of ‘Old School’ tattoos is a popular aesthetic in the tattooing scene and has become an iconic illustration style in other genres of art.

Video Tutorial: Retro Striped Text Effect in Adobe Illustrator

In today’s Adobe Illustrator tutorial we’re going to create a striped text effect with a retro 70s vibe. We’ll create the effect by layering up a series of strokes and fills with Illustrator’s Appearance panel, which preserves the live text so you don’t lose the ability to edit the wording. Once the artwork is complete, I’ll then show you how you can achieve an old t-shirt look with the help of my free washed and worn textures.

Web and Development articles

12 Tips for Improving JavaScript Performance

One of the most important aspects when creating a webpage or an app, is performance. Nobody wants an app that crashes or a webpage that doesn’t load, and the waiting time of the users is not very long. According to Kissmetrics, 47% of visitors expect a website to load in less than 2 seconds, and 40 percent of visitors will leave the website if the loading process takes more than 3 seconds.

SVG for Developers: Why You Should Be Using Them If You’re Not Already

I’ve been working as the team’s first product designer for a few weeks now and thought that now that my hazing has been completed, I’m ready to write for the blog. Or maybe this is part of it? (Kidding, of course.)

An Intro To Screen Reader Testing for Sighted Developers

Besides the design, loading time and performance, accessibilitydetermines the user experience of the web apps that you’re building profoundly. This quick guide will give you an introduction to the why and how of testing your website’s user experience using screen readers.

The Future of Websites: Headless CMSs

Since their introduction, content management systems **(CMS**) have made life easier for website developers, site owners, and administrators alike. Platforms like WordPress, Joomla, and Drupal account for more than 60% of all web content platforms. The only problem is their relative lack of flexibility. This is mainly due to the fact that the front and back end functionalities are deeply coupled.

How Google Pagespeed works: Improve Your Score and Search Engine Ranking

In this article, we uncover how PageSpeed calculates it’s critical speed score.

Debugging CSS Grid with Firefox Dev Tools

CSS Grid is mostly composed of rows, columns, cells, tracks, gaps etc. These things are not elements by themselves; hence, it can be really tasking to visualize and debug them. In this post, we’ll look at a few ways we can do it by using the inbuilt developer tools in the Firefox browser.