Best of the web for Design and Web Development April 2017

• May 1st, 2017
• News

In our usual fashion where rounding up another month within the online web and design community with our favourite posts of the month from Photoshop tutorials to web design articles. If you’re a designer, or a front-end developer this post is the perfect fix for yourself.

Our favourites include an essential SEO checklist when launching a new website. It’s so easy to forget at times that SEO can pay a pivotal part in the success of a website this post certainly does great job of making you aware of the essentials. There’s also a Photoshop tutorial included on how to create a truly jaw dropping galaxy text effect.

Please feel free to share any of your favourite blog post from the month of April in the comments section for us to read, and maybe even include in the roundup.

Photoshop

How To Create a Watercolor Painting Effect in Photoshop

Watercolour paintings are a hugely popular art style that can be incorporated into your design projects, but you don’t need to be a master artist to create such imagery when Adobe Photoshop can produce realistic watercolour effects with a cocktail of built-in filters. In today’s tutorial I take you through a range of settings that will convert any photograph into a hand-made watercolour style painting.

Create an surreal portrait mosaic illustration

In this tutorial, Fabio will show you how to create a deconstructed image using a pattern made out of cubes.

Draw Realistic Motorbike Helmet with Photoshop and Illustrator

Photoshop is a powerful software. It gives you full control on manipulating pixels. It’s younger brother, Illustrator, has same quality in handling vector. In this tutorial, we are going to use both software to draw a realistic motorbike helmet from scratch.

How to Create a Galaxy Text Effect in Adobe Photoshop

This tutorial will show you how to use a couple of layer styles, textures, and brush settings to create a bright, galaxy-inspired text effect.

Illustrator

Fun Vector Monster Face in Adobe Illustrator

In this Adobe Illustrator tutorial we’re going to combine simple shapes with colourful gradients to create a fun cartoon style monster face.

Combine separate elements into one beautiful digital illustration

Sandra Dieckmann shows you the best ways to create individual elements using pencil, pen and brush – and then combine them into a perfectly composed artwork in Photoshop.

How to Create a Flat Astronaut in Adobe Illustrator

In this tutorial, you’ll learn to create a stylized astronaut on a space background, using simple shapes and applying lots of gradients to add depth and volume to our illustration.

How to Create a Fun Hipster Logo Design

you’ll create a vintage-style logo illustration from open-source fonts and stock images to fit on current design trends. Let’s dive right in to this hipster logo design!

Web and Design articles

SEO Hacks for Developers

This article is part of an SEO series from WooRank. Thank you for supporting the partners who make SitePoint possible.

Launching a New Website: Your SEO Checklist – Whiteboard Friday

Hovering your finger over the big red “launch” button for your new website? Hold off for just a second (or 660 of them, rather). There may be SEO considerations you haven’t accounted for yet, from a keyword-to-URL content map to sweeping for crawl errors to setting up proper tracking. In today’s Whiteboard Friday, Rand covers five big boxes you need to check off before finally setting that site live.

Moving to a System Font Stack in 2017

As many of you know, I am a big fan of web performance. But I also don’t think that it should or have to compromise design. There is always a good balance in the middle. The other day I was on GitHub’s blog and was really digging their font! It was super easy to read. So I dug into the properties with Chrome Devtools and saw that they were using a system font stack. So today I want to show you how to use a system font stack on your WordPress site.

The Latest Photography Trends in Web Design

In this article, it takes a look at some of the primary web design photography trends we have seen so far this year.

Customize the Browser’s Scrollbar with CSS

Custom scrollbars are getting popular, and you might have come across websites that have unique scrollbars, making the sites feel and look different. There are basically a few ways to implement a custom scrollbar. In this tutorial we will be using CSS3, which is the most straightforward way. However, there are jQuery plugins that can help with customizing scrollbar, but I do not like to add more JavaScript to my website. If you are a designer, photographer or you just want your website to have a cool scrollbar, go ahead with the jQuery plugins.

The Step-By-Step Process To Properly Test Your WordPress Website Before Updating It (Workflow, Tools, & Scripts)

It’s easy to just go ahead and update your WordPress website, your theme, and plugin files by yourself. You just hit the “update” button three times and the job is, well… mostly done.
You think that.

XML Sitemaps: The Most Misunderstood Tool in the SEO’s Toolbox

In all my years of SEO consulting, I’ve seen many clients with wild misconceptions about XML sitemaps. They’re a powerful tool, for sure — but like any power tool, a little training and background on how all the bits work goes a long ways.