Best of the web for digital design and web development January 2016

February 1st, 2016
News

If you have been living underneath a rock, for the past month no need to worry we have you covered in our monthly roundup where we have complied all the very best design tutorials and articles from around the web. We featured the usually compilation of great Photoshop and illustrator tutorials. This web round up also includes some great articles trends to watch out for in 2016, and what makes a good front end developer .

Illustrator

How to Create a 50s Fashion Illustration in Adobe Illustrator

In this tutorial you’ll learn to create a vintage-style fashion illustration. The “Grease” movie with gorgeous costumes, wonderful music and a 50s atmosphere will serve as an inspiration for us. Let’s fantasize together about how an ideal dress for a dance should look.

Create a Set of Simple Line Icons in 20 Minutes or Less!

Create colorful simple line icons from basic shapes for a cool, cartoony vibe to your content!

How to Create a Bird’s-Eye View of Retro Cars in Adobe Illustrator

Everyone feels a certain passion for retro style! Those extraordinary clothes, those fancy hairdos, the music and, of course, the cars! In this tutorial we’ll combine our love for the 50s, cinematography and games, creating a crazy mix. We’ll make an aerial view of a stylized Greased Lightning retro car, using basic shapes, various types of gradients and blending modes, working with the Pathfinder panel and other functions of Adobe Illustrator.

How to Create a Pearl Brush from Gradient Meshes in Adobe Illustrator

In today’s tutorial you will learn how to control transparency of gradient meshes with the help of blending modes, and by adjusting color transition between mesh points and changing its opacity, create a pearl brush. Moreover after reading this tutorial, you’ll be able to create Illustrator brushes from gradient meshes of any difficulty with the help of free Mesh Tormentor plug-in.

Photoshop

How to Paint Realistic Hair in Adobe Photoshop: Short Hair & Beards

o portrait is complete without painting a beautiful hairstyle. In this tutorial, I’ll show you how to digitally paint realistic facial hair and two short hairstyles using Adobe Photoshop. You’ll definitely need a tablet for this, so I’ll be using the Wacom Intuos Draw.

How to Create a Shiny 3D Text Effect in Adobe Photoshop

How To Create a 2.5D Parallax Photo Effect

It’s an interesting effect that takes a static photograph and brings it to life with subtle movement, often referred to as 2.5D, or the parallax effect. The effect makes use of Adobe Photoshop to cut out an image, then uses the timeline feature to convert the still picture into a video. It works by clipping the image into different areas, then adding subtle movement so that the foreground and background move at different rates to create a slow motion panning effect.

Create a Shiny Textured Chrome Text Effect in Photoshop

This tutorial will show you how to use a couple of Photoshop’s layer styles, along with some flare photos, gradient fills, and a simple pattern, to create a shiny textured chrome text effect.

Web and design articles

7 UX Design Trends to Watch Out For in 2016

UX design took center stage in 2015. Innovations like wearable technology and virtual reality drove designers into new realms, opening up doors that were previously not possible and in many cases not even imaginable.

A Simple Method For Developing Your Design Skills

There’s no shortcut or hidden trick to improving your design skills – ask anyone in design or any other field, creative or otherwise. But there is a simple way. It’s not easy (nothing worth doing usually is), but it is fairly simple. And that is: do one design thing each day that’s outside your comfort zone.

Firefox Developer Edition: The Browser for Developers

Nowadays, every browser provides developer tools that allow you to thoroughly test your web projects regarding design and functionality. By default, JavaScript debugging and the inspection of the source code are among these features. Firefox Developer Edition is a browser developed by Mozilla and is dedicated solely to web developers, providing even more useful tools that help to optimize a website. Its features include the testing of CSS3 animations and transitions.

Why you should switch from Photoshop to Sketch

Over the past year or two, Bohemian Coding’s Sketch app has gained momentum across the glorious internets as a ‘better’ alternative to Photoshop. Most of this ample praise has come from the web and interface design community. If you’re anything like me, then you’re always on the lookout for new tools and better alternatives to an existing workflow. However, at first I was tentative about handing over my 20-year Photoshop baton.

Complete Guide to Using WebP Image Format

WebP, or unofficially pronounced as weppy, is an image format introduced by Google Developers around 5 years ago. if you are a web designer, or a developer who strives to reduce and optimize your image file size, what WebP is capable of should put a smile on your face.

Opinion: What Makes a Great Front-End Developer

The position of Front-end Developer is gradually becoming more and more broad. In my own career alone, I’m constantly finding that I’m transitioning more and more to the back-end: Setting up virtual machines, updating Apache, configuring SSL certificates, the list goes on and never seems to get bored of itself. Its can be really daunting.