Browsing articles tagged with " photoshop"
Oct
15
2014

Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors


  

The 6 Plus is the first iPhone that sports a “Retina HD” display — the sharpest display Apple has ever made. It forces designers to provide an additional set of image resources to developers to match that sharpness.

Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors

We needed only one set of assets for the original iPhone up to iPhone 3GS. And when iPhone 4 came out with the Retina display, we also needed 2x assets — images twice as detailed. Now, with the display of the 6 Plus being even more detailed than that of the iPhone 4, we will also need to provide 3x assets. The numbers 1x, 2x and 3x are also called “scale factors.”

The post Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors appeared first on Smashing Magazine.

Jul
3
2014

Techniques For Creating Custom Textures In Photoshop


  

Textures are everywhere — the concrete of a sidewalk, the fabric on your chair, even the glass (or plastic) surface of the screen you’re staring at right now. It’s natural that textures appeal to us because we see and feel them every day. And it’s no surprise why textures have become such an important element in design — so important, in fact, that I want to share with you the tricks and tools to create your own textures using Photoshop.

Techniques For Creating Custom Textures In Photoshop

Photoshop isn’t just for retouching images or manipulating photos. It can be used for so much more, such as creating your own textures — as long as you know where to look. In this article, I will present a foundation of techniques to help you build custom textures. I’ll go over three Photoshop features that I rely on to do most of my texturing — filters, layer styles and brushes. Before we jump in, I want to demonstrate the importance of textures.

The post Techniques For Creating Custom Textures In Photoshop appeared first on Smashing Magazine.

Nov
15
2013

Blueprints For Web And Print: Specctr, A Free Adobe Illustrator Plugin


  

Have you ever submitted design files to a development team for production and a few weeks later gotten something back that looks nothing like your original work? Many designers and design teams make the mistake of thinking that their work is done once they’ve completed the visual design stage.

A design is more than a simple drawing on a canvas in Illustrator, Fireworks or Photoshop; it is a representation of function. “Form follows function” is a well-known principle, first coined in 1896 by the architect Louis Sullivan. How will the website work? How will that section fold? What happens when you hover over this button? How does that menu function?

Designers also know that the details will make or break a product’s usability. But designers are also responsible for not letting those details fall through the cracks in production. Yes, those 5 pixels do matter! The development or production team also needs to understand how the product will work and what it will look like in every scenario and variation of the product’s use. Annotating all of these scenarios can be a nightmare, but this is where Specctr can help.

Specctr is a plugin for Adobe applications. (Currently, versions are available for Fireworks, Illustrator and Photoshop, the first of which you can read about in “Blueprints for the Web: Specctr Adobe Fireworks Plugin”.) Specctr transitions a visual design to production by enabling you to specify form (spacing, width and height, colors, fonts, etc.) and function (hover states, transitions, user flows, etc.). It automatically generates a specification and creates a blueprint for the design, which saves time.

Specctr logo

Note: The Specctr plugin for Adobe Illustrator has two versions, Lite and Pro. The Lite version is free for everyone but has some limitations. The Pro version is more powerful, is paid and has an “Expand Canvas” feature, and you can change the font in which the specification is displayed. Specctr Pro has other advanced settings that can be configured in the “Spec Options” tab in the panel, including options for the colors in the three types of specifications, the color mode (RGB, CMYK, HSL, HSB), etc.

Overview Of Specctr For Illustrator

Adobe Illustrator is a favorite tool of many designers because of its flexibility and versatility. Whether you use Illustrator for Web, print, identity or packaging design, Specctr may be useful to you, and in this article we’ll show you how. This plugin includes:

  • the width and height of elements;
  • text specifications (font family, font size, font color).


The main tab of the panel, the “Select Details” panel tab and the “Spec Options” panel tab in the Specctr Lite version. (see larger preview)

The width and height of elements as well as the text-specification abilities are most common to a designer’s workflow, which is why we included them in the free version. These two features alone should save you a lot of time. Additionally, the free version has the “Expand Canvas” feature and the option to change a specification’s font.

Requirements and Installation

Specctr Lite can be downloaded for free from our website (search for “Try Specctr Lite”). To use Specctr for Illustrator, you will need:

  • a Mac or Windows machine;
  • a copy of Adobe Illustrator CS5, CS5.1, CS6 or CC (Creative Cloud version).

The installation process is pretty straightforward:

  1. Download the Specctr installer.
  2. Double-click the downloaded ZXP file. The Adobe Extension Manager will open. Click on “Install.”
  3. Restart Illustrator.
  4. In Illustrator, go to Window → Extensions → Specctr in the menu to open the Specctr panel.

Note: If you are using Windows Vista+, you might need to launch the Adobe Extension Manager as an administrator, or else the extension could fail to install (this is a known limitation of the Adobe Extension Manager).

A Quick How-To Guide

After you install Specctr, you can spec a document in a few easy steps:

  1. Adjust your settings in the “Spec Options” tab.
  2. Select the options you want to display.
  3. Make room for your specifications (optional).
  4. Spec away!

The process of working with Specctr Lite and Pro is quite similar. The only difference is in functionality (Lite has fewer features).

1. Adjust Settings in “Spec Options” Tab

First, it’s a good idea to customize how the specifications will look. You can do this in the “Spec Options” tab in the Specctr panel. There, you can do the following:

  • Control how your specifications will look by adjusting font, color, size and line weight.
  • Set the color mode in which you want to spec: RGB (both rgb() and HEX modes are available), CMYK, HSL or HSB.
  • Assign different colors based on the type of specification: type object, shape object, and spacing and dimensions.

2. Select the Options to Display

In the “Select Details” tab in the panel, you can define (using simple checkboxes) which properties of objects to spec.

For example (as mentioned earlier), for shape objects, the following properties (or specification) can be generated by Specctr: fill color, fill style, stroke color, stroke size, opacity. And for text objects, the following properties (or specification) can be generated: font family, font size, font color, font style, text align, line height, letter spacing, opacity.

3. Make Room for Your Specifications

Optionally, you can expand the size of the artboard (or canvas) to make more room for the generated specifications. Use the numeric field next to the “Expand” button to increase the size (in pixels).

4. Spec Away!

Simply select any object(s) on the artboard, and then use one of the specification buttons: “Shape / Text,” “Width & Height” or “Spacing.” Specifications will be generated automatically for the elements selected on the artboard.

You can select two objects (by holding down the Shift key) to spec the space in between them. If only one object is selected and you press the “Spacing” button, then the distance from the object to the artboard’s edges will be displayed.

Here’s a brief screencast of this workflow:

Other Features

For maximum time-saving, you can spec multiple text and shape objects with one click. Simply select multiple (or all) objects and hit the spec button.

For better readability, line endings in Specctr will change depending on what you are spec’ing: a filled dot for text, an outlined circle for shape, and brackets for distance.

Spec line ends
Line endings automatically adjust based on shape, text and distance.

Your specifications are automatically organized and grouped into layers so that you can quickly turn their visibility off or delete them.

Specs in layers panel
Specifications organized into layers.

If many objects are close to each other, then there is a chance that specifications might overlap. To fix this issue, simply move and spread the specifications out. The arm that connects them to their object will always remain connected to the object, no matter where you move them on the artboard.

Please note that if you update an object after you’ve spec’d it, then the specification won’t update automatically; you must spec the object again. You don’t have to delete the old specification, though, because it will update with the new properties and remain in its current position.

A Note About Units

Specctr will use distance-based units based on the user’s settings in Illustrator (Edit → Preferences → Units). For Web documents, Specctr will always use pixels.

Illustrator preferences.
Illustrator’s “Preferences” dialog: Units.

Different Specification Scenarios

Web Design

There are plenty of reasons to use Illustrator for Web design. (Read Vincent Le Moign’s article “Productive Web Design With… Adobe Illustrator?” to hear some of the arguments.) Illustrator is fast, reliable, reusable and especially useful for designers who create both wireframes and final designs.

Specctr was created with Web designers in mind because of the myriad of screens flows that have to be created and spec’d. Although spec’ing is usually a process that only large design teams do, I’ve found the plugin to be helpful on small teams as well. With technology advancing and our capability to create more complex graphics, transitions and animations growing, there is an increasing demand for designers to spec their work. Interactions, responsive design and hover states should become clearer with a few notes and annotations attached.

Here follows an example of a one-page Web design made in Illustrator and spec’ed using the Specctr plugin. The first screenshot shows the large-screen version, and the second shows the mobile-screen version.

Example of a web site design spec'ed with Specctr
Example of a Web page spec’d with Specctr. The artboard contains the large-screen version; below it are shown three states of the same button (normal, :hover and :focus, and pressed). (View larger version)

responsive design spec'd example.
Example of a Web page spec’d with Specctr. The artboard contains the small-screen (i.e. mobile) version. (View larger version)

Note: In Illustrator, you can use multiple artboards to create variants of the same Web page for different screen types; for example, desktop, tablet, mobile, etc.

Make sure to set up your document correctly for Web design work. Create Web documents with the “Align new objects to the pixel grid” option activated; always use whole pixel sizes for all objects; and select the RGB color mode. The “Align new objects to the pixel grid” option is especially important.

Web settings
My recommended settings for Web documents in Illustrator. (View larger version)

Print and Packaging Specification

Unique print pieces (die cuts, special folds, etc.) require detailed instructions. Here is an example of a custom folder that was spec’d using Specctr for Illustrator.

Packaging spec example
A print design example. (View larger version)

Setting up your document correctly for print design is important, too. Here are the settings that I often use:

Print settings
My recommended settings for print documents in Illustrator (View larger version)

Branding Guideline Book

A brand is the public face of the company. It conveys the mood and tone of the company and covers every detail of its communication with the public. A branding book is a vital step in a branding project because it establishes the rules and teaches collaborators how to use the new visual language; a rebranding campaign is only successful if it is used consistently and widely.

A brand book usually includes the logo, fonts, colors, textures and patterns, photographic and image styles, language and tone. The guidelines can get quite detailed and long.

Here is an example of a very brief brand book that uses Specctr for the nitty-gritty details:

Brand Guidlines
Specctr for Illustrator can help you create a brand book.

Here are a few brand guidelines:

To learn more about branding, I recommend Kat Neville’s article “Designing Style Guidelines for Brands and Websites.”

Conclusion

Being a successful designer takes not only creativity and design skills but the follow-through to see a project come alive just as you imagined it. A designer may create a well-crafted website or a beautiful logo or an elegantly packaged product, but chances are they won’t be the one bringing it to life.

Communicating and explaining your design both verbally and visually is a requirement for precise and successful results. This is especially true for large teams spread out over the globe. We hope the Specctr plugin for Illustrator helps you with this important task.

Plans for the Future?

Here’s what the Specctr team is working on next:

  • CSS exporting (the objects you spec will be the ones that are added to your CSS export);
  • Relative (i.e. percentage-based) spacing, to help you with responsive design tasks;
  • More options for iOS and Android design specs.

Please let us know which features you would like to see added to the next version of Specctr’s panels! You can also leave a comment here. We’d appreciate your feedback.

(mb, al, il)


© Chen Blume for Smashing Magazine, 2013.

Jul
25
2013

Introduction To Photoshop Scripting


  

Automation is useful in the work of every designer. It saves precious time on repetitive tasks and helps us solve certain problems more quickly and easily.

You can automate your workflow in Photoshop with actions, which are pretty popular and which most of you already know about and use. Today, we’ll introduce you to an advanced automation technique: scripting. All you need for this is basic knowledge of JavaScript, which some of us Web designers already have.

I’ve known about Photoshop scripts for years but decided to really dive in a few months ago. I had avoided it because I thought it was the domain of smart math-minded programmers. I was wrong, and today I’ll show that, although it requires some basic programming skills, scripting isn’t hard to grasp.

But first, we have to answer the obvious question.

Why Do We Need Scripts?

Why should we would learn to script if Photoshop already has pretty nice actions? The answer is interactivity. When you use an action, you can’t really control how it behaves in different situations; it is like a videotape that just keeps playing again and again without any change.

Why We Need Scripts?

A script is more dynamic; its behavior changes according to the parameters you input or the context of its application. Sounds useful, no?

Requirements

You don’t have to be an advanced programmer to be able to write scripts; I’m just a graphic designer, like most of you. But you should at least have a basic understanding of JavaScript and some experience with properties and methods to get the most out of this article.

Requirements

If you are not familiar with JavaScript at all, fear not! There are plenty of places to learn the basics of programming. Codecademy, for example, has pretty neat interactive lessons.

I work in Adobe Photoshop CS5, but everything we’ll cover applies to newer versions, too; Adobe hasn’t made any major updates to its scripting API since CS5. I will refer to the latest version of the scripting documentation, though, which is CS6.

Getting Started

When you record actions in Photoshop, you set the order of the steps to achieve a certain result — that’s your algorithm. Then, you press “Record” and replicate them in Photoshop one by one. Scripting is similar, but instead of doing these steps in Photoshop, you write them down as lines of code. Most actions that you do in Photoshop have their own script equivalent as a function.

Start here

Let’s say you are creating an action that scales a document to 150% of its original size. You’d go through these steps:

  1. Open Image → Image Size.
  2. Enter 150% in width and height.
  3. Hit “OK.”

The same process with a script would look like this:

  1. Call the application: app
  2. Target a document: activeDocument
  3. Call the function to resize the image: resizeImage(width, height)

And the code would look like this:

app.activeDocument.resizeImage("150%", "150%");

Language

There are three ways to write scripts for Photoshop: using AppleScript on Mac, VBScript on Windows or JavaScript on either platform. I use the third because it is cross-platform and I already have some experience with it.

Tools

Adobe has its own utility for writing scripts, called ExtendedScript Toolkit.

Adobe ExtendedScript Toolkit
The main window for Adobe’s ExtendedScript Toolkit. (View large version.)

The toolkit comes with Photoshop, and you can find it in the following folder:

  • Mac OS X
    /Applications/Utilities/Adobe Utilities CS6/ExtendScript Toolkit CS6/
  • Windows
    C:\Program Files\Adobe\Adobe Utilities - CS6\ExtendScript Toolkit CS6
    (or Program Files (x86) for 64-bit machines)

The user interface of the ExtendedScript Toolkit is pretty straightforward. To start writing scripts, first select the target application in the drop-down menu. If Photoshop is running, then look for the green chain icon near the drop-down menu:

Application Select

Now you can write something like this:

alert("Hello Photoshop!");

Press cmd + R (or just hit the “Play” button in the toolbar) to run your script. ExtendedScript Toolkit should switch to Photoshop and show an alert box:

Hello Photoshop!

ExtendedScript Toolkit has some other neat features for debugging scripts, but this is enough for this article. You can learn more about how to use it by going to Help → JavaScript Tools Guide.

You can use any plain-text editor to write a script; just save it as a .jsx file. To run it, you’ll have to go to File → Scripts → Browse in Photoshop and select it. Alternatively, just open the script file with Photoshop. You can also add a line of code at the top of the script so that the file always opens in Photoshop:

#target photoshop

Save your scripts in the Photoshop/Presets/Scripts/ directory, and access them with File → Scripts. You can also set up a hotkey; just go to Edit → Keyboard Shortcuts, navigate to File → Scripts → [your script’s name], and set the shortcut you want.

ExtendedScript Toolkit can run and debug code from the integrated development environment, and it has an object model viewer built in, which is useful. So, I recommend using the toolkit to write your scripts. Unfortunately, the Mac version crashes sometimes, so keep that in mind.

Photoshop Object Model

To make writing scripts easier, you should understand how things relate to each other in Photoshop’s Document Object Model (DOM). Understanding it is not so hard if you look at Photoshop itself. The main object in Photoshop’s DOM is the application. In the application, we have a collection of documents that are currently open in Photoshop.

Each document contains elements — such as layers (called ArtLayers), groups of layers (LayerSets), channels, history states and so on — just like in a regular PSD document.

A simplified visualization of Photoshop’s DOM is below. A more detailed containment hierarchy can be found on page 12 of “Adobe Photoshop CS6 Scripting Guide” (PDF).

Simplified visualization of Photoshop API
A simplified visualization of Photoshop’s DOM.

Each of these objects has its own properties and methods that you can work with. For example, to change the opacity of the selected layer in a document, you would go to Application → Document → Layer → Opacity and set the desired value. The code would look like this:

app.activeDocument.activeLayer.opacity = 50;

As you may have guessed, activeDocument and activeLayer determine the currently selected document and layer.

You can find descriptions of most objects and their properties and methods in “Adobe Photoshop CS6 JavaScript Scripting Reference” (PDF), or in ExtendedScript Toolkit by going to Help → Object Model Viewer.

Let’s see how this works in a real-world example. In this next section, we’ll write our own script based on an action.

Remastering The RotateMe Action As A Script

A few years ago at Christmas time, I had an idea for an action to help me draw snowflakes.

Drawing Snowflake 101

  1. Draw one stem of the snowflake with a pattern.

    Step One

  2. Duplicate the stem, and rotate it a few degrees.

    Step Two

  3. Repeat the second step until you have a full circle.

    Step Three

Duplicating and rotating each stem manually is tedious, so I came up with an action to automate it. The algorithm looks like this:

  1. Duplicate the stem.
  2. Rotate it by however many degrees you’ve chosen, using the Transform tool.
  3. Duplicate the layer.
  4. Use the “Repeat Transform” function.
  5. Repeat steps 4 and 5 until you have a full circle.

Pretty neat. But the action had a disadvantage: You can set only a certain number of stems for the snowflake, according to the number of degrees you set in third step of the algorithm.

Back when I wasn’t familiar with scripting, I just made a few versions of the action, each of which produced a snowflake with a different number of stems.

Today, we will remaster this action as a dynamic script that takes your input on the number of stems. Let’s get started!

Algorithm

When you start writing a script, defining the algorithm first before digging into the code itself is always a good idea. In our case, the algorithm will work like this:

  1. Ask the user to enter the number of stems.
  2. Calculate the rotation angle.
  3. Duplicate and rotate the layer by the number set in the first step.

Let’s start with saving the current or selected layer to a variable for further use:

// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;

Note that in JavaScript, you can mark a line with double slashes (//) to make it a comment. Comments are used to describe parts of code for future reference and don’t affect the behavior of the script.

Let’s move on to our algorithm now.

1. Ask User for Input

We can take input from the user with the prompt(message, default value[, title]) function. This function shows a dialog box with the message and an input field that contains the default value. When the user hits “OK,” the function returns the inputted value; so, we have to save it to the variable to be able to be used.

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt("Processing \""+originalStem.name+"\"\nHow many stems do you need?", 12);

Note that I used originalStem.name in the message, so the dialog box will show the name of selected layer.

On Mac OS X, the first line of the message is in bold and functions as the title. So, our main message should be on the second line. To make a new line, type \n.

In Windows, you can specify a third argument in the function to set the title:

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt("How many stems do you need?", 12, "Processing "+originalStem.name);

If we run the code in Photoshop, it will show this dialog box:

Prompt dialog

When the user hits “OK,” the inputted value will be saved to the stemsAmount variable. If the user clicks “Cancel,” then the function will return a null value. We’ll use this later.

2. Calculate the Rotation Angle

To calculate the rotation angle, we have to divide 360 degrees (a full circle) by the number of stems:

// Calculate the rotation angle
var angle = 360 / stemsAmount;

3. Duplicate and Rotate

Now we have everything we need to make duplicates of our stem. To do this, we’ll use the for loop. It lets us repeatedly run lines of code as many times as we’d like. Our loop will look like this:

for(var i = 1; i < stemsAmount; i++){
	// This code will run "stemAmount - 1" of times
};

Note that the first instance of an object in programming has the value of 0, but because our first layer is already on the canvas, we’re starting the loop from 1 instead.

To duplicate and rotate our layer, we will use the duplicate() and rotate(angle, AnchorPosition) methods: the number of layers to be rotated in angle multiplied by the indexed number of duplicates. AnchorPosition determines the point around which the layer will rotate. You can see this point when you use the Transform tool in Photoshop — it looks like a small circle with a crosshair. In scripting, it has only 9 specified values — i.e. the 9 positions of the anchor point:

AnchorPosition visualization

In our case, it is the bottom center of the layer, BOTTOMCENTER. Photoshop uses a lot of other constants here and there in some of the functions, which you can find on page 197 of “Adobe Photoshop CS6 JavaScript Reference” (PDF).

So, our loop will look like this:

// Duplicate and rotate layers:
for(var i = 1; i < stemsAmount; i++){
	// Duplicate original layer and save it to the variable 
	var newStem = originalStem.duplicate();

	// Rotate new layer
	newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER);
};

And the completed code will look like the following. You can try to run it.

// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt("Processing \""+originalStem.name+"\"\nHow many stems do you need?", 12);

// Calculate the rotation angle:
var angle = 360 / stemsAmount;

// Duplicate and rotate layers:
for(var i = 1; i < stemsAmount; i++){
	// Duplicate original layer and save it to the variable
	var newStem = originalStem.duplicate();

	// Rotate new layer
	newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER); 
};

Final Touches

I’ll usually try to achieve the main goal with a script, and when everything works correctly, I’ll start to refine the code. In our case, we have to make sure that the user inputs a valid number in the prompt box — i.e. a positive integer, greater than one.

Also, to prevent Photoshop from going crazy, we will restrict the number of stems — let’s say, to 100. To do this, we will use a while loop to show the user an error message in the event of an invalid submission, and the prompt box will continue to be shown until the user enters a valid value or hits the “Cancel” button (remember that the prompt returns null if the user hits “Cancel”).

The new code looks like this:

// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt ("Processing \""+originalStem.name+"\"\nHow many stems do you need? (From 2 to 100)", 12);

// Check that user entered a valid number and, if invalid, show error message and ask for input again
while(isNaN(stemsAmount) || stemsAmount <= 0 || stemsAmount > 100){
	// If user clicks "Cancel" button, then exit loop
	if(stemsAmount == null) break;

	// Show error message…
	alert("Please enter number in range from 2 to 100");
	// …and ask for input again
	stemsAmount = prompt("Processing \""+originalStem.name+"\"\nHow many stems do you need? (From 2 to 100)", 12);
};

// Run the copying process
if(stemsAmount != null){ 
	// Calculate the rotation angle
	var angle = 360 / parseInt(stemsAmount);

	// Duplicate and rotate layers:
	for(var i = 1; i < stemsAmount; i++){
		// Duplicate original layer and save it to the variable
		var newStem = originalStem.duplicate();

		// Rotate new layer
		newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER);
	};
};

As you may have noticed, we’re using the isNaN(value) function, which returns true if value is “not a number” and parseInt(value) to convert the value to an integer when we calculate the rotation angle.

The next thing we will do is manage the layers, renaming our new layers by adding an index to them. Also to make sure that we do not mess up document’s layers, let’s place our stems in a group.

Renaming the layers is not a hard task. We will just use the name property of the layer and add an index number to it:

// Add index to new layers
newStem.name = originalStem.name + " " + (i+1);

A group in Photoshop’s API is called a LayerSet and we can access all groups of the document by calling the layerSets property. To add a new group to a document, we have to call the layerSets’ method add():

// Create a group for stems
var stemsGroup = app.activeDocument.layerSets.add();
	stemsGroup.name = originalStem.name + " ("+stemsAmount+" stems)";

Then, to add a layer to the group, we will use the move(relativeObject, ElementPlacement) function. Note that the move() function moves a layer in the layer stack, not on the canvas. (You can move a layer on the canvas with the translate(deltaX[, deltaY]) function.)

ElementPlacement is another constant, this one determining how we will place our layer relative to… well, relativeObject. In our case, we will use ElementPlacement.INSIDE to place the original layer inside a group:

// Place original layer in group
originalStem.move(stemsGroup, ElementPlacement.INSIDE);

We will place each new copy of the layer at the bottom of all layers in the group using ElementPlacement.PLACEATEND. The result is all of our layers arranged in ascending order, the first layer at the top and the last at the bottom:

// Place new layer inside stems group
newStem.move(stemsGroup, ElementPlacement.PLACEATEND);

You can read more about the ElementPlacement constant on page 202 of “Adobe Photoshop CS6 JavaScript Reference” (PDF).

Final Code

That’s it! RotateMe.jsx is done. Our final code looks like this:


// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt ("Processing \""+originalStem.name+"\"\nHow many stems do you need? (From 2 to 100)", 12);

// Check that user entered a valid number and, if invalid, show error message and ask for input again
while(isNaN(stemsAmount) || stemsAmount <= 0 || stemsAmount > 100){
	// If user clicks "Cancel" button, then exit loop
	if(stemsAmount == null) break;

	// Show error message…
	alert("Please enter number in range from 2 to 100");
	// …and ask for input again
	stemsAmount = prompt("Processing \""+originalStem.name+"\"\nHow many stems do you need? (From 2 to 100)", 12);
};

// Run the copying process
if(stemsAmount != null){ 
	// Calculate the rotation angle
	var angle = 360 / parseInt(stemsAmount);

	// Create a group for stems
	var stemsGroup = app.activeDocument.layerSets.add();
		stemsGroup.name = originalStem.name + " ("+stemsAmount+" stems)";
	// Place original layer in group
	originalStem.move(stemsGroup, ElementPlacement.INSIDE);

	// Duplicate and rotate layers:
	for(var i = 1; i < stemsAmount; i++){
		// Duplicate original layer and save it to the variable
		var newStem = originalStem.duplicate();

		// Rotate new layer
		newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER);

		// Add index to new layers
		newStem.name = originalStem.name + " " + (i+1);

		// Place new layer inside stems group
		newStem.move(stemsGroup, ElementPlacement.PLACEATEND);
	};

	// Add index to the original layer
	originalStem.name += " 1";
};

That wasn’t too hard, was it?

Finish

Now you can put it in the Photoshop/Presets/Scripts/ folder and run it by going to File → Scripts in Photoshop. Using different shapes with different values can yield interesting results:

Conclusion

As you can see from the number of links in the resources section below, there’s much more to say about scripting than can fit in an introductory article. But I hope the little that we’ve described today piques your interest and shows how powerful and helpful scripting is.

Community Power!

If you decide to dive into it, let’s learn together and share our experience. Ask your questions and share what you’ve done in the comments. If you are not a coder, consider leaving an idea for a script; maybe another reader will make it happen.

Let’s make Photoshop more useful together!

Resources

I’m still learning about Photoshop scripts, too, and here are some resources that are helping me along the way:

  • Adobe Photoshop Scripting,” Adobe Developer Connection
    All of the documentation and utilities for scripting.
  • Adobe Introduction to Scripting” (PDF), Adobe
    Here are the basics on scripting for Adobe applications. The nice thing about scripting for Photoshop is that you can apply your knowledge to other Adobe products; you just need to learn the application’s DOM, and you’ll be ready to go.
  • Adobe Photoshop CS6 Scripting Guide” (PDF), Adobe
    In this introductory guide to scripting for Photoshop, you’ll find the basics on getting started with scripting.
  • Photoshop CS6 JavaScript Reference” (PDF), Adobe
    This describes all of the objects and their functions and methods that you can use in scripting for Photoshop. This is one of the documents I use most when writing scripts.
  • JavaScript,” Mozilla Developer Network
    Here are answers to all kinds of questions about general JavaScript functions and usage.
  • JavaScript Tools Guide” (PDF), Adobe
    This has basic information about ExtendedScript Toolkit and some advanced techniques, such as file system access and ScriptUI and working with XML, sockets and more.
  • PS-Scripts
    An independent forum about scripting for Photoshop. I wasn’t able to sign up to participate in discussions (because of some kind of pre-moderation system), but it has plenty of answered questions and solved problems to discover.
  • Photoshop Scripting, Adobe Community
    Adobe’s official forum for Photoshop scripting has some good discussion on problems encountered by users.

(al) (ea)


© darkwark for Smashing Magazine, 2013.

Jul
9
2013

Retinize It: Free Photoshop Action For Slicing Graphics For HD Screens


  

High-definition (or “Retina”) displays have spread wider and wider, and evidently their numbers will keep growing. So, as creators of products that will be consumed on Retina devices, we have to optimize our design and development workflow accordingly.

Slicing graphics from finished designs to use for development is one of the less enjoyable parts of building a website or app. And it takes a long time. Because slicing is a monotonous and straightforward task, using the right tool and workflow can save you hours or even days of work.

retinize-it-action

Preparing graphics for development mostly entails saving user-interface elements from the final mockups, with transparent backgrounds. And to support Retina displays, we also need to create double-sized versions of elements.

Upon failing to find a tool that fits my design team’s workflow, I created a set of two time-saving Photoshop actions for slicing graphics for Retina and standard displays. The great feedback from my team inspired me to share it with other designers. The tool has gotten good buzz in the Web design and front-end development community, so today I’m happy to introduce Retinize It on Smashing Magazine.

Retinize It website
Retinize It uses Photoshop actions and retina.js to optimize for Retina displays.

How It Works

Select one layer, several layers or a group of layers, and run the action. Once you’ve activated it, you just need to name the files and set the directory to save them to.

Retinize It

In the background, Retinize It copies the selected layers to a new file, makes the background transparent and trims the space around the element. Once that’s done, the action asks what you want to name the file, saves it, scales the original element by 200%, and saves that as a separate file. After this process, you’ll be returned to the original file.

How Much Of The Slicing Process The Action Saves

Almost all of it. The only thing you have to do is choose the directory and name the files. Remember to add a high-resolution modifier, @2x, for the Retina versions of the files. This convention was established in Apple’s iOS Developer Library.

If you’re building an iOS application, then you’ll need to provide a background and splash screen in three resolutions: standard (320 × 480 pixels), Retina (640 × 960 pixels) and iPhone 5 (1136 × 640 pixels). The naming convention for the standard and Retina versions is straightforward. For images for the iPhone 5’s screen resolution, Apple recommends adding a -568h@2x suffix, although Apple doesn’t require it.

Apparently, this happens because Xcode does not automatically associate -568h@2x images with the iPhone 5’s resolution; developers may set the suffix manually for this kind of file. I’ve worked with an iOS developer who has asked Apple to add a @5x suffix. So, the best way to determine the naming convention for iPhone 5 images in future is to ask your developer. In other cases, use the -568h@2x suffix.

The techniques presented in the article “Towards A Retina Web” bring the @2x convention from mobile apps to the Web, helping us to optimize websites for Retina displays very quickly.

Why Scale by 200% and Not 50%?

Retinize It is good for those who start designing at non-Retina sizes, which is a better practice for two reasons. First, the non-Retina version of an image will look much closer to the final product, giving you more accurate feedback on how the design will actually look.

Secondly, an element with an odd size value that is scaled by 50% will end up with a x.5 pixel value, making the element blurry. Bjango explains this issue in his article “Designing for Retina Display,” as does Niklaus Gerber in his article “Designing for the iPhone 4.”

What Kind of Layers Will This Work With?

The non-Retina action in this pack will work with any kind of layer. If you’re using the Retina version, then you should work with shapes and smart objects, so that the 200%-scaled file will not look pixelated.

Also, if your layer has an inner or drop shadow, then uncheck “Use Global Light”; otherwise, those effects in the sliced version of the layer will inherit Photoshop’s default angle.

What Does The Set Include?

The set includes two Photoshop actions:

  • Slice It
    This action slices a 100%-sized version of an element.
  • Retinize It
    This action saves a 100%-sized version and a 200%-scaled version.

What Makes It Special?

  • It’s free to use.
  • Install in one click.
  • You don’t need to change the layer structure in PSD files.
  • You don’t need to name layers.
  • It’s optimized for Retina displays.
  • Run in one click, no setup needed.
  • Windows and Mac support.

Download And Documentation

Additional Tools

PNG EXPRESS (MAC & Windows, $29)

png-express
A specification created by PNG Express

If you will be having limited interaction with the developer who will be coding your design and you’re not sure it will be pixel-perfect, PNG Express can be a great time-saver. It helps you to create specifications with instructions on element positions, margins, fonts and font sizes.

PNG Express also has an option for slicing images including Retina support.

ImageOptim (Mac Only, Free)

imageoptim

ImageOptim reduces image sizes while maintaining quality. The tool removes internal data embedded by graphics editors, such as comments and color profiles. I recommend adding an images folder from your website to this app before compiling and going live. ImageOptim will reduce around 30% of an image’s size on average.

Slicy (Mac Only, $29)

slicy_mini

Slicy is great-designed tool most designers and developers are using for slicing graphics for iOS apps. The tool exports graphics from PSDs automatically, but it requires to organize your layers in Photoshop and name them in certain way. In addition once you make changes in Photoshop, Slicy updates the slices automatically. The main reason I decided not to use Slicy is no ability for quick export for couple of elements from PSD without preparing it for Slicy.

(al)


© Artiom Dashinsky for Smashing Magazine, 2013.

Apr
22
2013

Is Photoshop Really Dead?: Repurposing Photoshop For The Web


  

Like any overzealous teenager aspiring to be a Web designer back in 1999, I found myself in an “Electronic Design” class, behind the wheel of one of those old-school aqua iMacs. If you found yourself in a similar situation, chances are you were given Adobe Photoshop as your vehicle for designing the Web. For me, it was version 6.0.

No matter which version you had, undoubtedly you know someone who can “trump” you by having adopted an earlier version. We designers take much pride in this, in case you hadn’t noticed.

One of these is likely nostalgic to you.
One of these likely makes you nostalgic. (Image: Design You Trust)

It’s not a stretch to say that Photoshop was once regarded as the quintessential Web design tool, a sign that its fandom reached more than just photographers. Refrigerator magnets, pillows and even tattoos have shown homage to the unmistakable UI. Let’s face it: Photoshop is the software we’re identified with, and its place in Web design history is substantial.

I was careful to choose the word “history” there because that’s what it’s seemingly becoming.

Falling Out Of Love

Yes, unlike anything else in the realm of Web design, we collectively have a love-hate relationship with Adobe’s flagship software. While we love it for the common aptitude and experience we share, we hate it for its shortcomings. The pain points of using Photoshop to design for the Web are well documented and support the staunch anti-Photoshopian’s cause to remove it from their process. In fact, complaining about Photoshop has become so commonplace that it’s not just a rite of passage, but rather the signature of a true Web designer.

As our needs changed, Photoshop couldn't quite keep up.
As our needs changed, Photoshop couldn’t quite keep up. (Image: Derrick Diemont)

The Software’s Pain Points

  • Crashes
    True story: about 95% of instances of Mac OS X’s beach ball (or, as I affectionately refer to it, the pinwheel of doom) occur while using Photoshop. OK, so I can’t back that up with actual data, but I venture to say this is a common experience, especially for those of us attempting to “Save for Web.” Familiar with that nauseous feeling you get when the program hangs and you haven’t saved in a long time? Yeah, that alone makes you rethink using Photoshop.
  • Text rendering
    I’ve always found rendering the most basic of fonts as anything like the browser ends up doing to be incredibly difficult for Photoshop. Helvetica ends up looking like a mess, and coming close usually takes much tinkering with a few settings. This wouldn’t be problematic, except that the goal of comping is to show an accurate representation of what a website will look like.
  • Lack of interactivity
    At the end of the day, designing static comps doesn’t adequately translate how elements are intended to behave through interaction. When presenting comps to the client, discussing these points is possible, but that’s less than ideal for complex interaction. I’ve found myself using terms like “If you can imagine…” far too often in an attempt to show something as simple as a hover state.
  • Expense
    While we hem and haw over whether to buy an icon set for $5, realize that Photoshop is far and away the most expensive piece of software in the common Web design toolset. A new purchase of it will run you $700 USD. Upgrades help, and Creative Cloud has been nothing short of genius, but the investment in Photoshop is still monstrous compared to that of wireframing tools, code editors and FTP clients.

The Process’ Pain Points

  • Expectations
    The environment of Photoshop provides complete design control, because every pixel we manipulate can be exported to our expectations. When we actually develop for the Web, browsers aren’t as predicable (I can think of one in particular that’s none to kind, but I digress). No manner of fixes or hacks will produce an exact match of our Photoshop comp.
  • Presentation
    When attempting to convey responsive Web design, presenting static comps of full pages is less than ideal. The options are few and difficult: create numerous sizes of a single page, or try to explain verbally how a design will shift. I find neither to be practical or completely accurate, because innumerable device sizes are in the wild.
  • Double the effort
    A Photoshop comp is a visual representation of what a website or app could be, but not a functional one. This becomes problematic in the scope of effort required, with a comp being produced and then reproduced through Web technology (HTML, CSS and JavaScript). Additionally, the detail of the production is quite considerable — static comps are typically pixel-perfect and fully fleshed out, and front-end development carries the same goal.
  • The big reveal
    Ever worked hard on a design, spent hours polishing that last drop shadow on a button, exported a JPEG and then gotten nervous five minutes before a meeting because you have no assurances on whether the client will even understand the comp, much less like it? That’s true with many presentations, but the Big Reveal exacerbates this feeling. When your design process doesn’t include sharing any work in progress when comping, naturally it will lead up to a huge moment when you finally tell them to open a file or click a link. Wouldn’t it be nice if the client was involved in style-related decisions earlier than this?

Photoshop Misunderstood

Is it really a battle between tools?
Is it really a battle between tools?

OK, I think we’ve thoroughly bashed Photoshop enough at this point, although it’s important to realize where your tools fall short so that you can adapt (if you haven’t already). While there are plenty of jimmy-rigged workarounds to the aforementioned pains, and the right combination of settings will potentially ease those pains, there should be an easier way.

The most significant response has been to design directly in the browser. CSS3 provides many of the style elements that we had in Photoshop (such as rounded corners, drop shadows and gradients), and preprocessors such as LESS and Sass are great ways to speed up our workflow. These have become so popular, in fact, that there’s been much clamoring about trashing Photoshop altogether and using HTML and CSS exclusively, from start to finish.

Let’s not go overboard, right?

An important distinction is made by some designers that’s worth noting: the browser is the delivery vehicle of our designs, while image editors serve the purpose of creative exploration. Just because we have the ability in code to replicate what an image editor can output doesn’t mean it’s always the best environment for it. Those of us who learned Web design through Photoshop (or Fireworks) find value in being able to transform design elements without the abstraction of a text editor and, for the most part, have gotten quite good at it.

“As such the browser lacks even the most rudimentary tools like the ability to draw lines or irregular objects through direct manipulation.”

Designing in the Browser Is Not the Answer written by Andy Budd.

The notion that image editors have no place in our workflows is also faulty in this regard: we’ve purposed them to have a particular and quite heavy focus in our workflow. We’ve used Photoshop as the canvas for our design, when it’s apparent that the browser is better suited because it’s ultimately where the design will live. However, Photoshop still has worth, and arguably much worth, in our processes, just not as the canvas. Confused? That’s OK. I’ll explain.

A workflow you may be familiar with is such: sketch, wireframe, produce the visual design in a graphics editor, develop said design in HTML and CSS. Skipping Photoshop assumes that we “design” in the HTML and CSS phase. The tricky part in doing that is determining what a suitable design deliverable is, which we’ll get to momentarily. Naturally, the question becomes, What do we do with Photoshop, now that we’re in the browser?

Photoshop as a High-Fidelity Sketch Pad

What if Photoshop were used as a hi-fidelity sketchpad?
What if Photoshop were used as a high-fidelity sketch pad? (Image: Kyrie Eleison)

I propose that an image editor is still handy when executing design via HTML and CSS, and it has everything to do with sketching. An essential part of the “old” way, where we produced the design comp in Photoshop, is that we were allowed to experiment in a “visual” environment. Photoshop allows you to directly manipulate the very foundations of design: line, shape, text and color.

While HTML and CSS are great for executing the design, experimentation is abstracted because code isn’t directly manipulating any design foundation. It’s a layer removed. This isn’t to say that good design can’t come from a code-only approach; rather that the experimentation of design finds a natural home in an image editor, which may be helpful to many of you who, like myself, prefer such an arena.

Consequently, I’m in favor of a yin and yang approach, leveraging Photoshop for what it’s good for (experimentation), and code for what it’s good for (implementation). For me, leaving one out of the party makes it difficult to be creative and practical when designing. Avoiding code and producing full-page comps in Photoshop, while great for some, gives me headaches when considering responsive Web design and having to reproduce entire pages again in HTML and CSS. However, skipping Photoshop altogether puts me face to face with the browser for design, which works for some elements (navigation bars, blocks of text), while other elements pose a creative stumbling block (“hero graphic” banners and their headlines, sidebar calls to action).

It’s a balancing act. I don’t think you can say, “Design everything in the browser,” just like you can’t say, “Never get into the code.”

– Jason VanLue

For today’s Web design process, I view Photoshop as a high-fidelity sketchpad: expensive, I realize, but it does everything we need it to and we’ve used it for ages. It’s a tool that we’re quite proficient and efficient at. Whereas it used to be our literal canvas, Photoshop can now become our “palette,” as the browser becomes the canvas. We prototype designs in the browser, but turn to Photoshop every so often to ideate, and eventually implement those quick creations in code, concurrently.

Are you still using Photoshop as the canvas? Try using it as the palette.
Are you still using Photoshop as a canvas? Try using it as a palette.

“I still use Photoshop, but I use it differently. It’s no longer for prescribing exactly what a site should look like. Instead, it’s used for quick layout exploration and asset creation.”

Where to Start written by Trent Walton.

Getting Responsively Unstuck With Page Layers

A far too familiar situation is designing in the browser and getting stuck figuring out what to do in those strange in-between widths. Confining the content to a single column works for the narrowest width, and your hypothetical wider four-column design gets really squished at 500 pixels or so. I continually find myself in this mode of coding a bunch of potential solutions, none of which looks intentional. Same for you?

Here’s an idea: use Photoshop. I know that everything probably exists in the browser, instead of the full-page comps that we said were so problematic. Who would ever want to build a website only to have to make a version of the semi-finished product in Photoshop? Well, what I’m about to suggest will sound completely backwards. Hang tight!

Page Layers is a unique app that might find its way in to your workflow.
Page Layers is a unique app that could find its way into your workflow.

I’ve gotten used to a tool named Page Layers to do the work for me. I’m sure you’ve heard of PSD-to-HTML tools, but this one is HTML-to-PSD! At first, I had no idea what I would ever use this for. Then it dawned on me that those moments when I’m stuck designing in the browser and would be better off using Photoshop to directly manipulate some things (i.e. without fiddling with CSS) is a perfect use of Page Layers.

Quite simply, you load the website that you’re working on in the app, at the width you’re having some difficulty with, drag the PSD icon to your desktop, and fire it up. The app gives you a PSD with all of the page elements on separate layers, making it easy to experiment with. I’m still getting my head around it, and it’s not without its flaws. Creator Ralf Ebert says that text and vector interpretation is tricky but hopefully on the way.

Deliverables

This might sound good in theory, but what do you show to a client for approval if you’re going to be using a combination of Photoshop “sketches” and the browser? Glad you asked.

Before we delve into methods of delivery, the important lesson in any of them is that the client should be involved in the design process much earlier than they would have been otherwise. To some extent, the Big Reveal can’t be avoided, because any time you present a visual design for the first time, a certain “unveiling” takes place. However, we can focus our clients on specific objectives if we involve them early enough, such as approving the layout in a wireframe or prototype, or approving styles in any of the formats discussed below.

Style Tiles

Style Tiles are based on a concept pioneered by Samantha Warren, who likens them to “the paint chips and fabric swatches an interior designer gets approval on before designing a room.” Designed in Photoshop, they are a variety of visual “tiles,” each containing styles for headings, subheadings, link text, buttons, colors, patterns and backgrounds. In delivering Style Tiles, the focus is on approving style, independent of layout and form (for example, responsive Web design). The emphasis is on iterating to find a suitable style to become the “system” of a website, and not on a pixel-perfect layout that will need to be redone in HTML and CSS. In doing so, a significant amount of time is saved from having to edit multiple full-page comps.

Samantha Warren's Style Tiles are a great approach, leveraging Photoshop for style discussions.
Samantha Warren’s Style Tiles are a great approach, leveraging Photoshop for discussions about style.

For many, this approach keeps the ideation squarely in Photoshop, which is familiar and comfortable. If there’s a knock on this approach, it’s that Style Tiles do require a bit of vision on the part of the client. Granted, setting proper expectations will help to bridge the gap, although for some chains of approval, communicating how the tiles “represent” the final product can be difficult.

Style Prototypes

I hinted at this approach earlier, so here’s an attempt to spell it out plainly. Referring to our wireframes, we begin by identifying which elements and content are crucial to the visual language of the website. For example, the logo, main navigation bar, hero graphic and location-finding widget may all be uniquely styled elements, whereas the main blocks of text and the sidebar links wouldn’t be as integral to the visual impact of the page, per se.

They might look like full page comps, but Style Prototypes just leverage important brand and modular elements.
They might look like full-page comps, but Style Prototypes just leverage important brand and modular elements. (Image: Dave Rupert)

I believe this deliverable should be in the browser and should be responsive. In my experience with using Style Prototypes, I’ve tried not to get hung up on fixing small inaccuracies that occur at certain breakpoints or on cross-browser bugs, because the objective is to gain approval on a design direction. The conversations, both internally and with the client, are steered to assess style only.

The main benefit of this approach is that it generally transitions into the final build of the website remarkably well, yet providing entire pages wasn’t necessary. Photoshop is truly a sketch pad here, because the deliverable is an HTML and CSS document. That said, one disadvantage of this method is that if you don’t define how much you’ll be mocking up, it’s easy to get carried away and include elements that contribute little to the look of the website, using more time and resources than necessary.

Element Collages

Arising from his recent redesign project for Reading Is Fundamental, Dan Mall has offered an interesting approach in Element Collages. Those who feel most comfortable using Photoshop to work out these ideas can simply export a JPEG, while those who feel the browser enables them to better express the ideas can make a prototype.

This format represents how I begin to think about designing a site. I often have ideas for pieces of a site in bursts. A full comp often requires ideas to be fully realized. An element collage allows me to document a thought at any state of realization and move on to the next.

– Dan Mall, “Element Collages

What’s great about this approach is that it brings a comfortable amount of context to Style Tiles by executing those styles on particular elements. If working through ideas in the browser proves to be problematic this early in the process, then Element Collages done entirely in Photoshop are a great alternative to Style Prototypes. Any way you look at it, it’s another approach that circumvents having to make static full-page comps early on for approval.

The folks at Clearleft have employed Element Collages as a RWD deliverable.
The folks at Clearleft have employed Element Collages as a deliverable of responsive Web design.

Whatever approach you use for design deliverables, the idea I’m proposing is to repurpose Photoshop’s role into something that helps you have a discussion of style far removed from specific discussions of page layout and content. Multi-device design dictates that we design systems, not specific page layouts. We can use Photoshop to create reusable assets and ideas simultaneously with browser deliverables such as prototypes. But remember, without setting proper expectations with the client, any new method will become confusing compared to any previous Web design experiences they’ve had.

Tools

If the idea is to move quickly between Photoshop and the browser, then Photoshop’s default settings and interface leave something to be desired. Thankfully, a wide range of tools, extensions, actions and apps exist that will help.

Slicy

Using “Save for Web” can be an arduous process, one that doesn’t always produce usable results. I recommend getting Slicy, which exports your layers to files independently. If you’re using Photoshop to create assets for the browser, this is your tool.

WebInk Web Font Plugin

If nothing else, WebInk's Webfont Plugin will save you a few bucks not having to buy desktop fonts for comps.
If nothing else, WebInk’s Webfont Plugin will save you the few bucks of buying desktop fonts for comps.

Remember when we were knocking Photoshop for its type rendering? What’s worse is that there’s no way to try out fonts from your Web font subscription in anything other than the browser. Thankfully, Extensis’ WebInk service has a plugin that gives you access to its library as you experiment in Photoshop.

Bjango iOS Actions

Unequivocally “the mother lode of time-saving actions,” this list from Marc Edwards will make your life much, much easier. If it’s useful, it’s included: a panel of the most-used Photoshop tools, scaling a document by 200% or 50%, testing for color-blindness and much more. It’s free, so there’s really no reason not to have it.

CSS Hat or CSS3Ps

Until recently, Photoshop didn’t have a way to export CSS attributes for the elements you create (admittedly, Fireworks has, but I digress). If you don’t have the latest version, then CSS Hat and CSS3Ps are solid alternatives. If you do have CS6, the differences between the built-in feature and these plugins isn’t much, although the plugins might take longer to display results and are also more accurate at times.

LayerVault

Famously flat designed, LayerVault boosts production through collaboration.
Famously flat designed, LayerVault boosts production through collaboration.

When Photoshop becomes your sketch pad rather than your canvas, like pages, you can bet more PSDs will be lying around. LayerVault is a great app for collaborating and sharing your ideas before they hit the browser.

WebZap

If you’re looking to experiment with layout in Photoshop, then the WebZap plugin makes comping incredibly speedy. You can choose from a number of predetermined layouts for elements such as headers, navigation and footers. If you work with Element Collages, WebZap is a great tool for getting down a quick baseline of each element so that you can get right into styling.

PixelDropr

It's like an ammo holder for Photoshop.
PixelDropr is like an ammo holder for Photoshop.

Part of being fleet of hand between Photoshop and the browser is creating reusable assets. PixelDropr is a fantastic plugin that enables you to drag and drop assets (icons, buttons, photos, etc.) from a panel onto your document.

InVision

For some, static comps are still a viable design deliverable, but they need some basic interactivity. InVision is an app that turns your static comps into “Protocomps.” Even when the comp is just a few elements, using InVision is a quick and efficient way to make it interactive.

Repurposing Fireworks, Sketch, Pixelmator, Etc.

The principle of “refining your tools” certainly isn’t isolated to Photoshop. Any image editor, when used to fit your workflow (instead of vice versa), can be a wonderfully liberating and powerful tool. All Web design apps have their shortcomings, and Photoshop perhaps most famously so.

Yet the fault lies not in our software, but rather in how we integrate it into our workflows. I suppose even when the Ultimate Web Design App comes along, most of us will find something wrong with it. Why? Because we’ve learned to be resourceful and make our tools work for us, whichever tools they are. The right tool, used for the right purpose, at the right time, is more valuable than one that tries to be too many things.

So, Is Photoshop Really Dead?

I could switch code editors, computers, wireframing tools, browser plugins, and more, but I’d be pretty sunk if I had to do a project without Photoshop.

– Dan Mall

I truly believe that, for some of us, Photoshop is an indispensable tool that still has a purpose in our Web design workflows. I tip my hat to those designers who can stay creative using only the browser, but I know I’m not one of them. Whatever tools you use, there are two takeaways I feel strongly about: don’t let anyone stop you from using them, and continue to refine them in ways that support how you work. It’s important that we share how we approach responsive design for those who, like myself, are still trying to figure it out.

Photoshop isn’t dead, but the way you used to use it might be.

More Photoshoppery

(al) (ea)


© Dan Rose for Smashing Magazine, 2013.

Mar
9
2012

Top Non-Destructive Photoshop Techniques


  

The creative process is not a linear one. As artists and designers, we often set off in one direction only to decide that the proper solution lies somewhere else completely. Unfortunately, many of the creative software packages we use (Photoshop in particular) can be pretty unforgiving when in comes to making changes late in the game.

Top Non-Destructive Photoshop Techniques

Sure, we’ve got “Undo” for a quick change of heart, but often we don’t realize we need to make an adjustment until several steps (or days) later. Luckily, Photoshop has some great features built in that allow us to work in ways that protect our precious pixels—truly freeing us to do our best work.

Jan
3
2012

GuideGuide: Free Plugin For Dealing With Grids In Photoshop


  

This article is the fourth in our new series that introduces the latest, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts. Today we are happy to present Cameron McEfee’s Photoshop extension GuideGuide which provides a tool to create pixel accurate columns, rows, midpoints and baselines.

GuideGuide: Free Plugin For Dealing With Grids In Photoshop

Take a moment and think about creating a multi-column grid in a Photoshop comp. Have your palms started to sweat? Yes, creating grids in Photoshop is a pain indeed. Some designers just estimate and drag guides arbitrarily onto the stage. Others draw vector shapes, duplicate them to represent columns, then stretch them to fit their design. The hardy few who don’t say things like, “I’m a designer, not a mathematician,” generally use a little math and logic to calculate their grid.

Dec
7
2011

Mixing Up Illustration: Combining Analog And Digital Techniques





 



 


People often ask how I arrived at a finished illustration. Honestly, it’s different every time, but it always starts with a hand-drawn sketch. Sometimes, I paint it completely by hand; sometimes I’ll scan in a pencil drawing. Many of my pieces are 100% analog that I’ll show only at shops or galleries. Use anything you can; if the illustration would work as a wood carving, go that route. There are concrete steps one can take, but they certainly don’t have to be the same every time. My goal is to take a sketch or idea as far as it can go — and also, to get out of my comfort zone and challenge myself with every new job. For this article, I’ll use handcrafted brushes and Photoshop as my tools.

Brush Close Up

Concepting for me always starts with pencil and paper. If there is one consistent element through all of my pieces, it’s sketching. I love to draw. If I could establish and execute everything with a single pencil drawing, I would. The best thing to do is keep some type of sketchbook or journal with you as much as possible. Milton Glaser said it best: “Drawing is visual thinking.” Drawing creates many possibilities for any idea you might have. It’s then when the character’s personality starts to emerge. Then, I’ll add some volume to the sketch to show where the textures should really come through.

Nov
23
2011

Exporting From Photoshop





 



 


Congratulations. You’ve just completed a pixel-perfect mock-up of an app, and you’ve gotten the nod from everyone on the team. All that’s left to do is save the tens, hundreds or maybe even thousands of production assets required to bring it to life.

Exporting From Photoshop

It’s probably the least interesting part of designing software, usually entailing hours of grinding. Saving images to multiple scales — as required by iOS and other platforms — adds complication to the process. But there are ways to streamline or automate the exporting process.

Pages:12»

Categories