Original Source: http://feedproxy.google.com/~r/tympanus/~3/NZ1jw1N0bE8/

Inspirational Website of the Week: Sterling

A very innovative and modern design with clever animations. Our pick this week.

Get inspired

Affiliate
Create a website in minutes on WordPress.com

WordPress.com gives you everything you need to start your website today. Free hosting, your own domain, a world-class support team, and so much more.

Start your website

JavaScript Loading Priorities in Chrome

Addy Osmani shares an up to date summary of script scheduling in Chrome.

Read it

How A Screen Reader User Accesses The Web: A Smashing Video

Join Léonie Watson (a blind screen reader user) as she explores the web in this Smashing TV webinar recording.

Watch it

Lunar Popup

Beautifully designed and animated popups for your next project.

Check it out

Codecrumbs

Learn, design or document any codebase by putting breadcrumbs in the source code.

Check it out

Iconsvg

A tool to simplify the process of finding and generating common SVG icons for your project.

Check it out

GSAP 2.1 Released

The exciting highlights of the new version of GSAP including advanced staggers.

Check it out

Regex Cheat Sheet

Emma Wedekind’s useful cheat sheet for creating regular expressions.

Read it

Amino

A live CSS editor for writing user style sheets. Customize your favorite sites, save and sync your styles.

Check it out

Color wheel (CSS)

Louis Hoebregts’ mind-boggling shape animations that are controlled by a timing-function.

Check it out

Breaking Down JavaScript Solutions To Common Algorithmic Questions (Part 1)

A short tutorial by Emma Wedekind where she breaks down three top algorithm coding questions.

Read it

Context and Optimizations – HTTP 203

Jake and Surma talk about the importance of context when making performance optimizations.

Watch it

Loader turbulence

A turbulence loading animation made by Damien Montastier.

Check it out

Designing for Conversions

Brandon Gregory writes about what’s important when designing for conversions.

Read it

How @supports Works

A great summary by Chris Coyier on using @support in CSS.

Read it

Vue Trend Chart

Simple trend charts for Vue.js. By Dmytro Barylo.

Check it out

How Facebook Designs Microinteractions for Feature Discovery

A very thorough write-up by Jonathan Doron on how to re-create one of Facebook’s microinteractions.

Read it

An in-depth journey into how Node works. By Jamie Corkhill.

Read it

NPM Uninstall Facebook

A list of alternatives to Facebook apps and software.

Check it out

Blob study

Liam Egan’s interesting blob demo.

Check it out

Free Font: Throne

A paintbrush font with SVG and regular OTF by Anna Zakharchenko.

Get it

From Our Blog
SVG Filter Effects: Creating Texture with <feTurbulence>

Learn how you can use the powerful SVG filter primitive <feTurbulence> to create your own textures and distortion effects.

Read it

From Our Blog
How to Create a Fake 3D Image Effect with WebGL

Learn how to create an interactive “fake” 3D effect for images with depth maps and plain WebGL.

Check it out

Collective #494 was written by Pedro Botelho and published on Codrops.

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/vHSjTZqepRQ/use-the-pen-tool-and-textures-to-add-depth-in-photoshop

Over the following short screen-capture videos, Charlie Davis, a London-based illustrator, covers how to use the Pen tool and brushes to build a peaceful countryside scene. You’ll also learn how to apply masks, and how to use textures from Adobe Stock to add depth and warmth.

Davis took a mental trip to the country to evoke silence and solitude when he was asked to illustrate this scene in Photoshop CC. “This scene is about getting away from the digital noise of modern-day life,” he explains.

Once you’ve mastered the techniques in this Photoshop tutorial, you can apply them to your own artwork. 

Get Adobe Creative Cloud now
01. Begin your composition with the Brush tool

After importing your initial sketch into a new Photoshop CC file, you can begin your composition, using the Brush tool (B) to draw in major elements.

Davis works on a Wacom Cintiq – his graphics tablet of choice – and the majority of his brushes were created by Kyle T Webster. 

02. Add solid shapes using the Pen tool

Now, switch to Photoshop’s Pen tool (P). You need to draw simple, solid shapes to build up the most distant elements of the illustration.

03. Add midground elements

You can now use a combination of freehand drawing and the Pen tool to introduce the midground elements of your illustration.

05. Focus on the foreground

Next, turn your attention to the foreground elements, which you can colour in dark shades to enhance the composition’s sense of depth. To create the leaves of a plant, draw one leaf with the Pen tool and then duplicate it. You can rotate angles and play with size to introduce more natural-looking variations.

06. Add more plants

At this stage, return to the Brush tool (B) to freehand another plant.

07. Add highlights with colour

Draw the general shape of the foreground bird with the Pen tool (P), and make it one solid colour. In this clip, you can see how to add highlights with a lighter colour.

08. Add texture with masks

Add details to break up the flat expanse of snow in the centre of the illustration. Towards the end of this clip, Davis creates a layer named 'tone ledge' and walks through a technique you can use again and again.

Mask into a shape, then draw up against the mask to give one side a textured edge. This combination of freehand drawing with the more precise vector shapes and masks is a hallmark of the process.

09. Think about the light source

With all the elements of the illustration now in place, add long shadows that indicate the light direction and time of day. These help enhance the mood of the image.

10. Add definition

Now, return to the background. Use the Brush tool to apply shades to the mountain-sides, giving them definition.

11. Make it more organic with brushwork

To give the appearance of a sun that’s low in the sky, brush highlights onto the edges of the forms in the illustration. An added benefit is that the pixel-based brush roughens the too-perfect vector shapes, making everything feel more organic.

The best free Photoshop brushes
12. Create shadows

Add snow and shadows to a rock.

13. Add dimension

To give the foreground more dimension, you can work in a bright ray of sun hitting the rocks. This not only enhances the drama of the lighting, but it also calls attention to the bird – an important element of the composition.

14. Add warmth with Adobe Stock textures

To enhance the organic feel of the illustration, add textures from Adobe Stock using the Creative Cloud Libraries feature inside Photoshop. This clip is a fascinating look into how small details can elevate an artwork.

15. Refine colour with Adjustment layers

Your finishing touches can include adding more textures and refining colour via Adjustment layers. 

Related articles:

How to turn day into night on PhotoshopThe best laptops for Photoshop5 huge illustration trends right now

Original Source: https://www.webdesignerdepot.com/2019/02/popular-design-news-of-the-week-february-11-2019-february-17-2019/

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Introducing Textblock

 

HTML Slides Without Frameworks, Just CSS

 

The Best of Slack & Trello in One App

 

The Failed Netflix Homepage Redesign Experiment that Nobody even Noticed

 

Design Without Color First

 

Graphic Artist Peter Saville on Creating Burberry’s New Logo

 

Next.js 8 Released

 

Making Google Fonts Faster

 

Pantone Color Bridge Plus and CMYK Cheat Sheets for Graphic Designers

 

UI Goodies 2.0! A Redesign and More Resources for Designers!

 

How White Space Killed an Enterprise App (and Why Data Density Matters)

 

Pods – Tiny Telegram Groups for Designers

 

Choosing the Right UI Animation Tool

 

7 Pillars of UI Design: Keep these in Mind

 

21 CSS “Hotspot” Examples

 

Goodbye, Slack. Hello, Spectrum

 

Form Design: Handling Optional Fields

 

Designing Magical Interfaces

 

Designing Futuristic Interfaces – Become a XR Designer in 5 Minutes

 

I Failed as a Designer at a Startup

 

The Maze Report – An Instant, Gorgeous UX Report for all your User Tests

 

34 Great Free Fonts

 

3-colors Gradients Generator

 

The Ineffectiveness of Lonely Icons

 

Pixar’s Rules of Storytelling Applied to Product Managers & UX Designers

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Original Source: http://feedproxy.google.com/~r/tympanus/~3/0FBaqReUiHs/

WebGL is becoming quite popular these days as it allows us to create unique interactive graphics for the web. You might have seen the recent text distortion effects using Blotter.js or the animated WebGL lines created with the THREE.MeshLine library. Today you’ll see how to quickly create an interactive “fake” 3D effect for images with plain WebGL.

If you use Facebook, you might have seen the update of 3D photos for the news feed and VR. With special phone cameras that capture the distance between the subject in the foreground and the background, 3D photos bring scenes to life with depth and movement. We can recreate this kind of effect with any photo, some image editing and a little bit of coding.

Usually, these kind of effects would rely on either Three.js or Pixi.js, the powerful libraries that come with many useful features and simplifications when coding. Today we won’t use any libraries but go with the native WebGL API.

So let’s dig in.

Getting started

So, for this effect we’ll go with the native WebGL API. A great place to help you get started with WebGL is webglfundamentals.org. WebGL is usually being berated for its verboseness. And there is a reason for that. The foundation of all fullcreen shader effects (even if they are 2D) is some sort of plane or mesh, or so called quad, which is stretched over the whole screen. So, speaking of being verbose, while we would simply write THREE.PlaneGeometry(1,1) in three.js which creates the 1×1 plane, here is what we need in plain WebGL:

let vertices = new Float32Array([
-1, -1,
1, -1,
-1, 1,
1, 1,
])
let buffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW );

Now that we have our plane, we can apply vertex and fragment shaders to it.

Preparing the image

For our effect to work, we need to create a depth map of the image. The main principle for building a depth map is that we’ve got to separate some parts of the image depending on their Z position, i.e. being far or close, hence isolate the foreground from the background.

For that, we can open the image in Photoshop and paint gray areas over the original photo in the following way:

This image shows some mountains where you can see that the closer the objects are to the camera, the brighter the area is painted in the depth map. Let’s see in the next section why this kind of shading makes sense.

Shaders

The rendering logic is mostly happening in shaders. As described in the MDN web docs:

A shader is a program, written using the OpenGL ES Shading Language (GLSL), that takes information about the vertices that make up a shape and generates the data needed to render the pixels onto the screen: namely, the positions of the pixels and their colors. There are two shader functions run when drawing WebGL content: the vertex shader and the fragment shader.

A great resource to learn more about shaders is The Book Of Shaders.

The vertex shader will not do much; it just shows the vertices:

attribute vec2 position;
void main() {
gl_Position = vec4( position, 0, 1 );
}

The most interesting part will happen in a fragment shader. Let’s load the two images there:

void main(){
vec4 depth = texture2D(depthImage, uv);
gl_FragColor = texture2D(originalImage, uv); // just showing original photo
}

Remember, the depth map image is black and white. For shaders, color is just a number: 1 is white and 0 is pitch black. The uv variable is a two dimensional map storing information on which pixel to show. With these two things we can use the depth information to move the pixels of the original photo a little bit.

Let’s start with a mouse movement:

vec4 depth = texture2D(depthImage, uv);
gl_FragColor = texture2D(originalImage, uv + mouse);

Here is how it looks like:

Now let’s add the depth:

vec4 depth = texture2D(depthImage, uv);
gl_FragColor = texture2D(originalImage, uv + mouse*depth.r);

And here we are:

Because the texture is black and white, we can just take the red channel (depth.r), and multiply it to the mouse position value on the screen. That means, the brighter the pixel is, the more it will move with the mouse. On the other hand, dark pixels will just stay in place. It’s so simple, yet, it results in such a nice 3D illusion of an image.

Of course, shaders are capable of doing all kinds of other crazy things, but I hope you like this small experiment of “faking” a 3D movement. Let me know what you think about it, and I hope to see your creations with this!

References and Credits

Gyronorm library by Doruk Eker
Photo by Cosmic Timetraveler
Photo by Chelsea Ferenando
Photo by Rio Syhputra
Phoyo by Jonatan Pie

How to Create a Fake 3D Image Effect with WebGL was written by Yuriy Artyukh and published on Codrops.

Original Source: https://www.webdesignerdepot.com/2019/02/whats-new-for-designers-february-2019/

Get ready to create a new list of bookmarks! The new tools featured this month are perfect for saving; some of them you’ll want to come back to over and over, such as a security checklist, cool background maker and a season-specific typeface.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

DiceBear Avatars

DiceBear Avatars allows you to create placeholder avatars in cool block style. You can create characters or identicons using the free HTTP API.

React Insta Stories

React Insta Stories is a namesake component that allows you to create Instagram or Snapchat stories on the web. Install it with npm and use an array of image URLS. It takes care of duration and the loading indicator.

Sheety

Sheety lets you turn any Google sheet into an API. It’s free and you can use it to power websites, apps or whatever. Plus, anything you change in the originating spreadsheet, updates to the API in real-time.

Minisearch

Minisearch is a tiny but powerful in-memory fulltext search engine for JavaScript. It is respectful of resources, and it can comfortably run both in Node and in the browser. The demo search (below) is fun. I was able to search my name as it pertained to all of the Billboard Hot 100 from 1965 to 2015.

Lobe

Lobe will let your web app learn through a visual interface. It can read handwriting, see emotion and hear music. Join the beta to find out what this deep learning app can do for your projects.

Bubble Toggle

Bubble Toggle is a fun pen by Chris Gannon that features a toggle button with a trendy bubble switch.

Textblock

Textblock is a JavaScript tool that helps you adjust leading and size to create more beautiful responsive typography. It works by calculating a setting based on minimum and maximum values for font size, line height, variable grades and container width.

SocialSizes

SocialSizes solves a common problem: Finding the right template and sizing for social media images. The tool includes templates for Sketch, Adobe XD and Photoshop for common social media channels: Facebook, Instagram, LinkedIn, Twitter, Snapchat, YouTube, Pinterest and Twitch. It’s one of those tools that just makes life that much easier.

Awesome Podcast

Awesome Podcast might help you find your new favorite show to listen to while working. The list is a compilation of podcasts for software engineers. (And it’s grouped in such a great way to you can find something to listen to about JavaScript or PHP or Ruby or web development or any number of other topics.)

Palette App

Palette App is designed to help you build smooth color schemes, where hues flow from one color to the next. The toggles and tools let you fine tune hue, saturation and gradients. You can bring in color palettes from other places and test them or create a new palette right in the app.

Photo Creator

Photo Creator is a tool that lets you create your own stock photos. (Seriously!) Mix and match models backgrounds and objects to get just the picture you need for projects. Export images (free and paid options) for use online and in print.

Snippet Generator

Snippet Generator lets you create code snippets and copy for quick use. The tool toggles between VSCode, Sublime Text and Atom. It is a tiny React app.

SVRF Developers

SVRF Developers lets users search face filters, 360 videos and 360 photos and is free to use on all types of apps from cameras, to messaging to chat or community. What’s cool about the tool is that it helps your users find more AR and VR web experiences.

Can’t Unsee

Can’t Unsee is a design skills game. Are you brave enough to pick the right iteration designs on the screen?

JournalBook

JournalBook is a private – and offline – personal journal. While the tool is filled with prompts to help you get started, your notes and thoughts are stored on your device. It’s a cool concept if you want to practice a little journaling.

Animated Mesh Lines

Animated Mesh Lines is a cool set of five WebGL demos over on the Codrops Playground. The library helps you understand how to create customer geometry to create an interesting graphic style.

Childhood Flat Icons

Childhood Flat Icons is a fun set of elements that will make you feel like a kid again. The collection includes 100 icons that show the development of a child with representations plus plenty of toys and child-like elements. It comes in AI, SVG and PNG formats.

Security Checklist

Security Checklist is a must-have tool. It is an open source list with everything you need to know about keeping yourself and your identity safe on the internet. How many of these things are you already doing?

BG-Painter

BG-Painter is a fun tool to create animated (or still background images). Just start with one of the preset “paint” options and change colors to fit your project. And everything you create is free to use as you like thanks to creator Frank Hsu.

Static Site Boilerplate

Static Site Boilerplate is a starting point for building modern static websites. It includes all the tech you need, then add your code and deploy your website. It’s that easy (kind of).

UXWing

UXWing might have every icon you’ll ever need. It’s a massive collection of scalable icons for web design and front-end development. Just search for what you need and download.

Startup Illustration Kit

Startup Illustration Kit gives you the tools to tell your company story visually, even when you don’t have a lot of photos or elements to showcase your small business. Use it to create a full set of characters to tell your tale. The kit has 30 illustrations with their own characters.

Lindas

Lindas is a free-for-personal use font with a full set of upper- and lowercase letters and numerals. It has a more masculine script style that’s widely appropriate.

Lorden Holen

Lorden Holen is your simple (and lovely) font for Valentine’s Day. It’s light and connected with just the right feel for love. The glyphs have some great personality as well.

Reno Mono

Reno Mono is a monospaced font with a modern style. What’s especially nice about it is that it has more personality than many other similar options and feels more usable, thanks to a rather modern take on monospacing. Plus, this free font is readable at small sizes.

US Blaak

US Blaak is a fun slab-style font with a great black weight for display. Each letter in this premium serif style has sharp strokes and interesting angles.

Venn

Venn is a beautiful typeface family with 25 styles and five widths and weights. The great variation in this premium family makes is great for almost any use, from body copy to display.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}