#overlay layer

[pricklyalpaca]

A little hair coloring tutorial because someone on Deviantart asked me how I color hair! I’m by no means great at coloring hair or explaining how I do it, but I hope this is helpful!

[eli-little-workshop]

I’ve actually made a logo for them. I should really thanks @insanewardog because without them the story would have never crossed my mind

[leon2309]

Paint Over Practice

Just a simple project practicing using an Overlay layer to paint over something in Photoshop in order to change its colors. I put the basic image, the hair, the woman, and the clothing, together and rendered it in Daz3D. I then took the render and, on an overlay layer in Photoshop, painted over it with colors I wanted, turning a normal human woman into an alien, and making her top green and red.

As always, let me know what you think!

[htmluse]

New Post has been published on Html Use

New Post has been published on http://www.htmluse.com/focusable/

Focusable

Download   Demo

Focusable is an awesome and lightweight library for performing spotlight in your DOM elements, setting an animated overlay to the rest of the page.

1. INCLUDE JS FILES

<script src="jquery-2.1.1.js"></script> <script src="https://rawgit.com/zzarcon/focusable/master/app/focus-element-overlay.js"></script>

2. HTML

<div class="example"> <header> <button class="show" data-selector="header">Focus header</button> <button class="show" data-selector="ul">Focus list</button> <button class="show" data-selector="li:first">Focus first item</button> <button class="show" data-selector="img">Focus image</button> </header> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <img src="http://3.bp.blogspot.com/-NfpKVt4VUkQ/TyMSCfM8NAI/AAAAAAAACbc/RKhuR28izWg/s640/breakfast-at-tiffanys-audrey-hepburn-1961.jpg"> </div> <div class="options"> <h2>Options:</h2> <ul> <li>- fadeDuration (seconds) <input type="text" id="fade-duration" value="700"></li> <li>- hideOnClick <input type="checkbox" id="hide-on-click" checked></li> <li>- hideOnEsc <input type="checkbox" id="hide-on-esc" checked></li> <li>- findOnResize <input type="checkbox" id="find-on-resize"></li> </ul> </div>

3. JAVASCRIPT

(function() $(document).ready(init); function init() $('.show').on('click', show); $('.hide').on('click', hide); function show() var selector = $(this).attr('data-selector'); var options = getOptions(); Focusable.setFocus($(selector), options); function hide() Focusable.hide(); function getOptions() return fadeDuration: parseInt($('#fade-duration').val()), hideOnClick: $('#hide-on-click').is(':checked'), hideOnESC: $('#hide-on-esc').is(':checked'), findOnResize: $('#find-on-resize').is(':checked') ; )();

4. API

Set spotlight (jQuery style)

$('#my-element').setFocus(options);

Set spotlight (through library)

Focusable.setFocus($('#my-element'), options);

Refresh current focused element

Focusable.refresh();

Hide spotlight

Focusable.hide();

5. OPTIONS

Property Value Default Description fadeDuration Number 700 Duration of the overlay transition (milliseconds). hideOnClick Boolean false Hides the overlay when the user click into it. hideOnESC Boolean false Hides the overlay when the user press Esc. findOnResize Boolean false Refind the element in the DOM in case that the element don’t still exists.