Best of the web for Design and Web Development July 2021
- July 26th, 2021
Its the last Monday of the month where we roundup the highlights from the past month from the online web and design community, by sharing with fresh new web and design articles published in the month of July.
The roundup features a great compilation of photoshop and illustrator tutorials. There’s a range of tutorials from how to create a fur text effect to a 3d text effect in illustrator. The second part of the post is jam packed with some great articles from creating breadcrumb components to how to make your WordPress site fast and secure.
We hop you enjoy this months roundup and feel free to contact us if you want to make a contribution to next months edition.
It will show you how Illustrator’s shape tools make it easy to construct the basic vector design, then we’ll apply a vibrant colour scheme using gradients. The final result is a trendy vector logo icon with interlinking shapes and bright colour spectrums. Using these same techniques, you can create modern logo designs with all kinds of shapes and layouts.
For starters, you will learn how to create a simple background and how to add basic text. Using only your piece of text and a 3D Rotate text effect, you will learn how to create the main compound path. Moving on, you will learn how to use a 3D Extrude & Bevel effect and some masking and blending techniques to add the 3D hole effect for your text. Finally, you will learn how to add some shading and a subtle texture for the final design.
In this tutorial I will show you how to create a fur effect in Photoshop using a pattern, a fur brush, a layer style, and a gradient map. At the end of this Photoshop fur tutorial, you will have an action ready to perform almost the entire process with a single click.
In this tutorial, you will learn how to create this ancient text effect inspired by the game “Mortal Shell” in Photoshop.
The tutorial take you through the process of creating a retro text effect, inspired by the title art for the Superman comic books. Old comic book titles feature some really simple but effective text styles, often incorporating faux-3D effects, bright colours, and thick black outlines.
In this tutorial, you will learn how to make a 3D isometric text in Illustrator.
In the Photoshop tutorial you’ll show you how to easily create cool looking vintage logo designs by combining antique illustrations with some visually interesting text styles and layouts.
Web development and Design articles
It’s usually necessary to store user data server side in a database or similar repository. This guarantees persistence and ensures users can access their data from any web-connected browser (presuming your storage system is reliable, of course!)
In this article, Ahmad Shadeed explains what HSL is, how to use it, and shares some of the useful use-cases and examples that you can use right away in your current projects.
All in all, it’s kind of funny that static pages are all the rage again. I also started my career in IT, creating static websites in Notepad. With time, however, as various CMSs appeared, creating static websites became pointless. And yet we revert to them more and more often, because they bring a lot of benefits.
Accessibility is often overlooked or bolted on to the end of a project from the experiences in Todd’s career in web development and design. The case for accessibility is something we as people who create and build things for the web should be implementing and advocating for from the inception of a project to the release or handoff and beyond.
Do’s and don’ts for better error messages.
A website secured with an SSL certificate lets visitors know that it’s safe. It also wins the approval of search engines, confirming that your site is safe for browsing. Hence, you must get a valid SSL certificate for your website.
In this post find out the difference between the alignment values of start, flex-start, and self-start in flexbox.
A foundational overview of how to build a responsive and accessible breadcrumbs component for users to navigate your site.