Let’s face it; Photoshop is the tool of the trade and something no designer should be without today. The unrivalled power within that harbours the potential to create stunning visuals is not easy to master; however, there are plenty of tricks at your disposal to help you get by.

With the year nearly behind us, the designers at Numiko have huddled together to bring Christmas around early. Their gift to you is an indispensable guide to Photoshop containing priceless tips you’ll soon be unable to live without!

Stay smart with Smart Objects
One of the most common issues we face within web design today is the duplication of modular content. Up until the release of Adobe Photoshop CS2, designers had to make multiple copies of individual page assets if they needed to appear on different templates.

While you could argue there is nothing wrong with this type of workflow, problems begin to arise when amends fly into your inbox. Whether it was a change in colour, typography or even the shape and size of a module; designers adopting this workflow would have to ensure they carefully amended each duplicated asset. Something far from ideal, given there could be countless instances of this module spanning multiple pages.

More recent versions of Photoshop take away this troublesome task of repeating the same change(s) multiple times with the introduction of smart objects.

Smart objects are effectively smaller Photoshop documents nested within your main Photoshop document. A selection of layers or a folder within your existing document can be converted into a smart object by right clicking the desired layers and selecting ‘Convert to smart object’. Once you have a smart object, double clicking on the layer’s icon will open an additional window which contains the nested file’s contents. Upon making any changes to this new window and saving, the nested document will then update itself in your main Photoshop document.

So how does this differ from our problem presented above? Upon saving, the updated contents of any smart object will then update any duplicated instances of it too. This means you could have, for example, five copies of a footer duplicated over multiple templates, all of which will only need to be edited and updated once.

Control your Layer Comps
As time goes on, the structure of your Photoshop documents will begin to grow more complex. With a plethora of page templates to consider, you better hope you have an organised method of keeping each one easily accessible and under control.

Most designers today tend to arrange their layers into carefully labelled folders, calling upon each one when required by changing its visibility. This, however, is a rather inefficient way of working when Layer Comps are just around the corner.

Layer Comps are the solution to getting every single layer related to a single page template or design visible with a single click. With Photoshop open and your latest design in front of you, heading to Window > Layer Comps is your first step. Next up, clicking the new Layer Comp icon at the bottom of this panel will prompt you to name your currently visible template. This will then make a note of which layers are currently visible (and invisible) and make an entry in the Layer Comps panel for later use.

From here just a single click on any empty square to the left of a template’s name in the Layer Comps window will hide any unrelated layers and make anything belonging to that template visible. Gone are the days of hiding and showing the layers manually – simply create a Layer Comp for each page you design and you’ll be laughing. Just remember you’ll need to click the update button with your Layer Comp selected every time you’re ready to commit your amends to it.

This, however, is not where Layer Comps end.

There is one more incredibly handy function. Deep within File > Scripts lies the ultimate solution to preparing your work for approval and client send off – Layer Comps to files. This script will simply run through your page templates that have been added to the Layer Comps panel and export them to your hard drive. The output will be in a file format of your choice, with the filename of each template inherited from each Layer Comp.

Organisation is the key!

Be Non Destructive
With tools such as the Paint bucket, Eraser and the Smudge cursor, Photoshop was intended to be a messy affair. While these elements of destruction do offer a great flexibility to creating pixel perfect assets, working in a non-destructive workflow has its advantages too.

To define non-destructive in Photoshop terms: it’s the act of using any supplied assets or imagery without editing them directly. There are obviously times where you’ll need to retouch a photograph by adding sombreros to a row of gleeful cats, but all other editing should be done without touching the original file if possible.

Take for example a client supplied image that needs to fit into a homepage carousel. Chances are the image will be too tall, too wide or even both. This, however, is a good thing that can work to your advantage.

Simply create a new solid colour layer or shape layer below, one which is exact the size you’d like your supplied asset to be. From here, right click the asset’s layer and select Create clipping mask. This will make the asset only show through the available pixels of the layer below. This allows you to freely move around the image in any way you wish within the designated space, without needing to cut off (and destruct) any unwanted imagery.

If you’d prefer to keep everything within one layer though, take a look at alpha channels. They offer exactly the same functionality too.

Why’s this a good thing then? Well should any amends fly through the door asking for a previously hidden area of the asset to be made visible, that’s something you can do without needing to open the original file again. It’s still intact within your document and awaiting changes.

You could then take this tip a step further by reading on…

Keep key graphical elements in Smart Objects
When designing a website in Photoshop, every single element that is associated to that design – whether it is client logos, affiliate branding or even imagery – should be present in its original form. This grants developers who are coding your design or clients who require Photoshop documents to be supplied, access to everything they need within one file.

To achieve this, the best practice is to import any asset at its full size into your document and then convert it to a Smart Object before use. Should anyone need to get hold of this asset, it can then easily be found in the same place all your other assets are: within the Photoshop document.

Aside from being more organised and prepared for handovers, there is another advantage to being smart. Take this request for example: “make our logo twice as large”.

A common request to face, but a fatal one should you have misplaced the original asset. This is nothing to worry about when Smart Objects are in place. As all the original data from an individual asset still exists within a Smart Object, you can transform away, whilst maintain quality.

Save and save often!
Sadly, the last but most important Photoshop tip of all is the one we all learn a little too late. The Adobe-software-crash-devil which drags your hard work down to the depths of unrecoverable computer hell rears his ugly side all too often. The more infuriating aspect to Photoshop crashing (frequently) is knowing full well that Save was just a few clicks away and available all along – something you didn’t utilise in time.

To keep the crashes at bay, we’d very much recommend saving into new files each time round. For example, the brand new template featuring that sparkly and clean header you’ve just spent a few hours on, save that as Design-v2.psd instead of overwriting. By working in multiple files, you have the ability to travel back in time should you need to revisit an earlier version of your creation for whatever reason.

Whilst we’d like to consider ourselves Photoshop gurus (at least our portfolio suggests so!), there’s always room for improvement. Feel free to share your very own Photoshop tips in the comments box.

The Field Collection module has become essential to our work with Drupal, allowing us to create “compound” fields – fields within fields. When using the Node Export module to export nodes from one Drupal instance to another, Node Export doesn’t provide a way to transfer the field collection data. It turns out that it’s easy to programmatically import and export field collection instances though. This will export all the field collections on a site and store them in an array:

  $rows = db_query("SELECT * FROM field_collection_item;")->fetchAll();

  $export = $all_ids = array();

  foreach($rows as $row){
    $all_ids[] = $row->item_id;
  }

  $items = entity_load("field_collection_item", $all_ids);

  foreach($items as $item){
    $export[] = $item->export();
  }

This is thanks to the field collection entity’s controller class EntityAPIController implementing a handy export() method.

Then to import a field collection exported to $export_str:

  $con = new EntityAPIController("field_collection_item");
  $entity = $con->import($export_str);
  $con->save($entity);

The exported JSON contains an item_id. If you unset this the collection will be saved with a new item_id (generally a good idea) but there are some circumstances where you might want to import the field collection with its original ID (this will maintain the references to the field collections host but be careful!)

Importing and exporting is never fun with Drupal but the above code should help with any tasks (in my case populating a site with test data needed by Selenium tests) that require field collections to be moved between sites.

If you’re having problems getting the facebook login callback to fire – for example, you’re using one of the social plugins and are not getting redirected back to the right place on login – you might be looking to set the “Post-Authorize Redirect URL” – except, it’s not there any more!

Facebook seems to read this from the canvas URL now instead – so try setting that to be the same as your Site URL.

Incidentally, I only had this problem when working from localhost – with sites on the public Internet, setting the site URL only worked fine.