Easy Engraved Text Look in Photoshop

Happy Wednesday, ladies and gentlemen. This video shows you how to achieve a quick and easy engraved text effect in Adobe Photoshop. Credit for this technique goes to Matt Gemmell (source: http://mattgemmell.com/etched-effects-in-photoshop/).
https://dl.dropboxusercontent.com/u/31810721/Engraving%20Text.mov

Advertisements

jQuery

$ = jQuery;
var $myDiv = $(“div.entry-summary”).first();

$myDiv.css(‘height’, ‘400px’).css(‘background-color’, ‘red’);

var $button = $(“Click for images”);

$myDiv.append($button);

var flickerAPI = “http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?”;

$button.click(function(){
$.getJSON( flickerAPI, {
tags: “puppies”,
tagmode: “any”,
format: “json”
})
.done(function(data){
$.each( data.items, function( i, item ) {
$( “” ).attr( “src”, item.media.m ).appendTo( $myDiv );
if ( i === 3 ) {
return false;
}
});
});
});

$myDiv.children(‘:gt(1)’).remove();

$button.click(function(){
$.getJSON( flickerAPI, {
tags: “mount rainier”,
tagmode: “any”,
format: “json”
})
.done(function(data){
$.each( data.items, function( i, item ) {
$( “” ).attr( “src”, item.media.m ).appendTo( $myDiv );
if ( i === 3 ) {
return false;
}
});
});
});

$myDiv.children(‘:gt(1)’).remove();

$button.unbind();

$button.click(function(){
$.getJSON( flickerAPI, {
tags: “mount rainier”,
tagmode: “any”,
format: “json”
})
.done(function(data){
$.each( data.items, function( i, item ) {
$( “” ).attr( “src”, item.media.m ).appendTo( $myDiv );
if ( i === 3 ) {
return false;
}
});
});
});

Common JS Tasks #2

console.log();

debugger;

window.onbeforeunload = function () { return “PLEASE DO NOT LEAVE” }

Following things in JS are falsy:

  • false
  • 0 (zero)
  • “” (empty string)
  • null
  • undefined
  • NaN

if (param) { courseOfAction1(param) } else { courseOfAction2() }

can be rewritten as:

param && courseOfAction1(param) || courseOfAction2();

Common JS Tasks #1

var getFormValue = function(input) {

if (input.attr(“name”) == “my-super-special-input”) {

return input.val() + “is-special”;

} else {

return input.val();

}

};

$(“button.my-special-button”).click(function(){

var params = [];

$.each($(“input.my-special-form”), function(index, input){

params.push($(input).attr(“name”)+”=”+getFormVal($(input)))

})

document.location.search = params.join(“&”)

});

Creating a JavaScript module

Hello. Today we’ll talk about the JavaScript module pattern. I’ll use an example from my 9-to-5, which handles sending product filtering data to the back-end, to demonstrate how one might create and use a module, which provides the advantages of (1) name-spacing and (2) encapsulation.

1. We’ll start with an empty module, which is an immediately executed JS function that returns an object accessible by the variable FILTERS.
var FILTERS = (function () {
        var module = {};
        var myPrivateFunction = function(string) {
          console.log(string + ‘ is skulking in the private function’)
        };
        module.myPublicFunction = function(string) {
            return myPrivateFunction(string)
        };
        return module;
  }());
FILTERS.myPublicFunction(‘A sneaky ninja’) // => ‘A sneaky is lurking in the private function’
2. Next, we’ll add our private methods. We don’t want these static helper methods to pollute the public-facing module interface.
var FILTERS = (function () {
        var module = {};
 
        // globally replaces %20 with a space
        var spacify = function(string) {
            return string.replace(/%20/g, ” “);
        };
 
        var hasValueType = function(item) {
          if ($(item).data(“valuetype”) != null && $(item).data(“valuetype”).trim() != ”) {
            return true;
          } else {
            return false;
          }
        }
        return module;
}());
You’ll notice that we only have a few. I want to give consumers the ability to access most of our methods to give them the most flexibility. If we had decided to sacrifice this customizability and power for ease of use or brevity, we might’ve made some assumptions about which functions our consumers would rarely use directly and written them as private methods.
3.  Now we’ll write the public module functions. It’s fine to have some of these depend on others, as long as the depended upon functions are consumable independent of the functions that depend on them.
var FILTERS = (function () {
        var module = {};
 
 … private functions
 
module.getValue = function (item) { // takes a .filter-field
            if (hasValueType(item)) {
                if ($(item).data(“valuetype”) == “productFeature”) {
                    if ($(item).val() == null || $(item).val().trim() == ”) {return null}
                    // feature type id, feature value id, feature value description
                    return $(item).closest(“li”).data(“feature-type-id”) + “%2C” +
                            $(item).val() + “%2C” +
                            $(item).find(“option:selected”).html();
                }
            } else {
                return $(item).val();
            }
        };
 
        module.clearSectionValues = function (item) { // takes a .clear-filter link inside a filter section
            $.each($(this).closest(“.filter-section”).find(“.filter-field”), function(i, item) {
                if (module.getValue(item) != null && module.getValue(item).trim() != ”) {
                    clearValue(item);
                }
            });
        };
 
        module.getUrlParameter = function (sParam) { // query string
            var sPageURL = window.location.search.substring(1);
            var sURLVariables = sPageURL.split(‘&’);
            for (var i = 0; i < sURLVariables.length; i++)
            {
                var sParameterName = sURLVariables[i].split(‘=’);
                if (sParameterName[0] == sParam)
                {
                    return sParameterName[1];
                }
            }
        };
module.submit = function () {
            var params = [],
                    $filter_fields = $(“.filter-field”);
            $.each($filter_fields, function(i, item) {
                if (module.getValue(item) != null && module.getValue(item).trim() != ”) {
                    params.push($(item).data(“submitname”)+”=”+module.getValue(item))
                }
            });
            location.href = ‘/products?’ + params.join(“&”);
        };
      … // rest omitted
      return module;
}());
4. Let’s say, for the sake of demonstration, that elsewhere in our application we wanted to use this module, but needed to extend it. Here, we’ll extend the module by adding an extra function, ourFunc(), and changing an existing method, submit().
var FILTERS = (function (module) {
        var module = {};
        … prev methods omitted
       module.oldSubmit = module.submit;
       module.submit = function() { console.log(‘hi’) }
       module.ourFunc = function() { console.log(‘funk’) }
       return module;
}(FILTERS || {}));

Project 4

Click the link(s) below to download awesome.

bens-adjustment-brush-and-sharpening-food.psd

https://dl.dropboxusercontent.com/u/31810721/Photoshop/Camera%20Raw/Projects/4/bens-adjustment-brush-and-sharpening-food.psd

bens-adjustment-brush-and-sharpening-poppies.psd

https://dl.dropboxusercontent.com/u/31810721/Photoshop/Camera%20Raw/Projects/4/bens-adjustment-brush-and-sharpening-poppies.psd



View the image(s) below to witness awesome.

bens-adjustment-brush-and-sharpening-food.png

bens-adjustment-brush-and-sharpening-poppies.png