Improve Your Workflow By Creating A Photoshop Panel

In eCommerce, when we design our sites and create user experiences we want to note and test all of our different UX. Once we have optimized and we have our own best practices we want to make sure to create templates so we can get the best customer conversion for our clients. In this post we will learn how to turn our high performance PSD templates for different site headers into a photoshop panel that will create our site header in one click. This example has 4 to choose from but moving forward you can pick to have more or less

Improving our workflow

The beautiful part of this workflow is our PSD files will be saved in a folder so you can easily update any header template by saving over these files. This is great if your in a large team so that you can distribute the extension so everyone can easily get the best performing headers.

What we will be making

STEP 1: Setting Up Adobe Extension Builder 3

Adobe Extension Builder 3 & Eclipse

To make life a little easier for use to package up our extension we want to download both the Eclipse application and the Adobe Extension Builder 3. These can be found here http://labs.adobe.com/technologies/extensionbuilder3/ You can also follow along with this video to help you get set-up as well.

Folder Structure

file-structure

STEP 2: Create your PSD Templates

Frodo Shop: One to rule them all

For this step I have already created 4 header templates we can use as an example, or you can use them as a guide to create your own! When creating your templates, if you want them to be placed in a certain spot down your page you want to make sure to leave that white space in your document. For example if you have a content block that is right below your header, you would create a document with the height of the header blank, then start your content block design below there. Then when it’s placed into your document it will be in the correct position. If you want to get more advanced you can script it to be placed with code. If you like this post let us know and I’ll continue to expand on this tutorial.

DOWNLOAD PSDs

STEP 3: HTML 5, CSS, JS for the Panel

Whatever Chrome can do, Photoshop can do! BAZINGA!

Let’s all have a round of slow clap for Adobe and making sure that their extensions render and work just like a chrome browser would. *CLAP CLAP*. Now with that out of the way. Basically for building out our panel we would just write front-end code like we would for a website. Because it works like modern browsers, we can also include any awesome CSS3 effects or transitions as well we can load in a local copy of JQuery if we want to utilize their library. For example, in our custom extension I built, we have a button generator complete with a colour picker. The code was using JQuery for the actual colour picker, and I would just pass on the value to photoshop. This is really quite powerful and you can also utilize Node.JS as well as JSON in more complex builds. Below you can find our standard code for building out our panel.

HTML5 CODE


<meta charset="utf-8" /><script type="text/javascript" src="./ext.js"></script><script type="text/javascript" src="./lib/CSInterface-4.0.0.js"></script>PSD Templates<meta name="description" content="" /><meta name="viewport" content="width=device-width, initial-scale=1" />	<link href="css/main.css" rel="stylesheet" /></pre>
<div id="panel">
<h2>PSD TEMPLATES</h2>

<ul>
	<li><!-- 'header' refers to the folder name as well as in the file name 'header' and '01' for header-01.psd -->
 <button onclick="psdTemplate('header','01')">HEADER 1</button>
 <button onclick="psdTemplate('header','02')">HEADER 2</button>
 <button onclick="psdTemplate('header','03')">HEADER 3</button>
 <button onclick="psdTemplate('header','04')">HEADER 4</button></li>
</ul>
</div>
<pre>
<script type="text/javascript" src="js/main.js"></script>

CSS CODE

html{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
	background:#535353;
	overflow:hidden;
}
ui {
	list-style:none;
}

#panel {
	margin:auto;
	text-align:center;
	width:300px;
	height:400px;
}
button {
	width:200px;
	padding:20px;
	margin:10px;
	cursor: default;
  	font-size: 15px;
  	color: #ffffff;
  	text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.5);
  	line-height: 11px;
  	background-color: #636363;
  	-webkit-border-radius: 2px;
  	border-radius: 2px;
  	border: 1px solid #303030;
  	background-image: linear-gradient(to bottom, #757575, #636363);
  	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#757575), to(#636363));
  	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.1);
  	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.1);
}

button:hover {
	background-image: linear-gradient(to bottom, #8e8d8d, #636363);
  	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8e8d8d), to(#636363));
  	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.1);
  	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.1);
}

button:active {
	top:3px;
	position:relative;
	color:#555;
	background-image: linear-gradient(to bottom, #636363, #757575);
  	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#636363), to());
  	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.1);
  	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.1);
}

JS CODE

function psdTemplate(psdType, optionNum){
	var csInterface = new CSInterface();
	//This finds the file path to where our extension is saved on our computer.
	//Best part is it's platform-agnostic
	var myPanelPath = csInterface.getSystemPath(SystemPath.EXTENSION);
	//This will run our JSX function named psdTemplate
	csInterface.evalScript("psdTemplate('" + myPanelPath + "','" + psdType + "','" + optionNum + "');");
}

STEP 4: Photoshop Script (Save as .JSX)

Let’s Talk to Photoshop…

All code that will be written in the JSX file is javascript. The best part about how I’ve set-up this code is we are passing in our psd type as well as an option number as variables. This is important because we can use the same code for templates for product pages, or footers, or any other web elements. All we need to do is pass in the type on our button click which was found in our html. All we have to do is make sure we have the folder named the same as well as in the file name.

For example: if we wanted to make one for footers, we would make a folder named “footer” in our “PSDs” folder like so ../PSDs/footer/footer-01.psd then we would just have this on our button:

<button onClick=”psdTemplate(‘footer’,’01′)”>HEADER 1</button>

JSX CODE

if(typeof($)=='undefined')
	$={};

$._ext = {
    //Evaluate a file and catch the exception.
    evalFile : function(path) {
        try {
            $.evalFile(path);
        } catch (e) {alert("Exception:" + e);}
    },
    // Evaluate all the files in the given folder
    evalFiles: function(jsxFolderPath) {
        var folder = new Folder(jsxFolderPath);
        if (folder.exists) {
            var jsxFiles = folder.getFiles("*.jsx");
            for (var i = 0; i < jsxFiles.length; i++) {
                var jsxFile = jsxFiles[i];
                $._ext.evalFile(jsxFile);
            }
        }
    }
};

//We will be passing in the file path, the type of psd, and which option
function psdTemplate(filePath, psdType, optionNum) {
    //First we will check if there is a document open
    if (documents.length != 0){
        //This function will search our document for a specific layer/group
        function makeActiveByName( lyrName ){
            try{
                var desc = new ActionDescriptor();
                var ref = new ActionReference();
                ref.putName( charIDToTypeID( "Lyr " ), lyrName );
                desc.putReference( charIDToTypeID( "null" ), ref );
                desc.putBoolean( charIDToTypeID( "MkVs" ), false );
                executeAction( charIDToTypeID( "slct" ), desc, DialogModes.NO );
                return activeDocument.activeLayer;
            }catch(e){}
        };

        // Makes a reference for the document we are currently working on
        var myDoc = app.activeDocument;

        // We will search for "HEADER"
        var targetLayer = makeActiveByName("HEADER");

        // If there is a folder called "HEADER" it will be deleted
        if(undefined!=targetLayer){
            myDoc.layerSets.getByName("HEADER").remove();
        }

        //This will find our psd template file and open it
        var myFile = File(filePath+"/PSDs/"+psdType+"/"+psdType+"-"+optionNum+".psd");
        open(myFile);

        //This will make our template PSD active
        var theLayerSetDoc = app.documents.getByName(""+psdType+"-"+optionNum+".psd");
        app.activeDocument = theLayerSetDoc;

        //Makes a reference to the folder "HEADER"
        var theSet = theLayerSetDoc.layerSets.getByName("HEADER");

        //This will duplicate "HEADER" and place it into our document we are working on
        theSet.duplicate(myDoc, ElementPlacement.PLACEATBEGINNING);

        //This will close the template PSD without saving
        theLayerSetDoc.close(SaveOptions.DONOTSAVECHANGES);

    } else{
        alert("Please open or create a document first :)");
    }
}

STEP 5: Packaging Your Extension for CC and CC 2014

Packing up your extension

You want to right click (control click on mac) on your extension name in Eclipse and to to export and hit next.

export

We now have to create a simple certificate that will set us as the publisher of the extension.

certificate

make-certificate

Then all you have to do is input your password, click finish and your done!

Adobe Photoshop CC 2014

If you want to make your extension to work with Adobe Photoshop CC 2014, you only have to change a few items in the manifest
Make sure to change the Version to 15.0, 15.9 and the CSXS to version 5.0.

edit-manifest

cc2014

cc2014-2

STEP 5: Installing your extension

Almost there!

You want to make sure that you download the most recent Adobe Extension Manager from your cloud and you’re ready to go! Double click your extension and when you go to install you will get a warning saying that the author is not known by Adobe. That’s fine we can just click ok anyways and have it install. Make sure to close down Photoshop and restart it to make sure that the extension has been loaded. Once you have re-opened your Photoshop, go to Window > Extensions > and you will find your newly installed masterpiece!

Related: Developing for Mobile First

Learning more

There are not too many resources on in-depth scripting for Photoshop but the most useful resources I have found are: PS-Scripts.com and also the Adobe Photoshop Javascript Scripting Reference. I personally use the Photoshop CS5 reference so that if down the road I want to make the extension more accessible I know it will work.

DOWNLOAD: All tutorial files

BONUS

Let me know what you think of this post! If you want me to keep building on how to build more functions to fast track your workflow for you and your front-end developers let me know! If you share with a tweet you can download all of the source files all complete as well as the compiled extension

The post Improve Your Workflow By Creating A Photoshop Panel appeared first on Demac Media.