Using PSD Files and Generator to Create Site in Adobe Muse

Using PSD Files and Generator to Create Adobe Muse Site

One of the great things in Adobe Muse is integration with Photoshop. I already posted: How to Import Photoshop button in Adobe Muse,but that's not the only way to use convenience of good integration. First of all you can use File > Place command to import Photoshop's PSD files. In fact, you can import composite images or individual layers with option: Clip To Layer Contents which will trim any extra space or pixels which are not part of the layer which you want to import. Second: you can always replace already placed files/images from Assets panel and you can use layered PSD files for replacement. The trick for replacement is to choose: Photoshop Images (psd) from the drop down list at the bottom right side of the Relink dialog (right/Cmd + click on the asset in Assets panel and choose Relink). That's only beginning or introduction to start with. The true power of integration and convenience available in Photoshop CC is when you start using Generator combined with cloned and linked Smart Object layers.

Why to use layered PSD files when creating site in Muse

There are so many reasons to use layered PSD files with no doubt. First of all you can place mockup from Photoshop in Muse to serve as base template. After placing mockup, lower the opacity, lock object, then start placing elements on top. You can do the exact same thing with master or any other page, just do not forget to delete mockup at the end of the process. If you make some changes to the layout, just replace placed mockup.
Place files in Adobe Muse

The true power: Generator combined with cloned and linked Smart Object layers

Here we are: placing elements in Muse. It is simple as File > Place. You can use the Place command to place PSD files, but there is Generator in Photoshop CC which will generate optimized assets for you. It is a matter of adding extension like .jpg7 or just .png at the end of layer or group name in Photoshop CC then to turn on File > Generate > Image Assets. More on this topic from here. I will skip this simple process and proceed with the topic of this tutorial: cloned and linked Smart Object layers.

I will use one of several mockup's or versions created for my Photoshop Plus site. In this case I have a container around product thumbs which is filled with simple Pattern Overlay. The container is the exact same for all products. To change a pattern or color for all containers from once, I am using a simple technique: cloned Smart Object layers and exporting groups using Generator (Preferences > Plugins > Enable Generator).

Turn on Image Assets

It is simple: just add the extension to the group name (2.jpg7 for example or just .png) and properly position container or whatever else you have cloned. Do not forget to turn on File > Generate > Image Assets.
Rename layers or groups to export Image Assets

Create cloned Smart Object

To create cloned Smart Object layer, first convert layer(s) to Smart Object then press Ctrl/Cmd + J to duplicate it and you have cloned one which you can move where you want.

Update cloned Smart Objects

When you have cloned Smart Object layers, updating one of them will reflect changes to all other twin brothers or clones. Note: this is not true for transformations, transformations will not be reflected or updated, but color, pattern overlay, drop shadow... changes and even some extra element added will be automatically updated.

Update Assets in Muse

Now you can guess: Generator will automatically re-export updated content and you have one more simple step: to place assets or, in case you have Muse running in the background, to select all updated assets in Assets panel and to choose: Update Asset.
Update assets in Muse
Update assets in Muse

If you are not running Muse while updating assets, but you have already placed images (assets) then simply click OK when when you start the application next time and warning dialog appear on your screen.
Update assets when starting Muse
Update assets when starting Muse

Boom, Done! You can update as many placed objects as you want with a few clicks.

Now, what if you are re-using some image on multiple pages? You can update all instances in the very same way as mentioned above. In case Muse is running in background while changing assets exported from Photoshop, just ensure that you have selected top most image of an asset set in the Assets panel then right/Cmd + click and choose: Update Asset.
Update assets when same image appears on multiple pages
Update assets when same image appears on multiple pages

Note: if you have Muse running while changing files in Photoshop, it will report and assets which are not modified and you can remove warning by updating them or ignore warnings and next time when starting Muse just click OK to update assets when warning dialog appear on your screen.

Using Linked Smart Objects

Now you may ask: what about Linked Smart Objects, why you need them? Perhaps you want to use exactly same Illustrator graphic across multiple pages. Cloned embedded Smart Objects works in the same document only, you cannot clone and distribute across multiple documents. You can place linked Illustrator artwork or PSD file, for example, in every document where you want to use it, to clone same instance for re-use and to Update All Modified Contents when you change the artwork in Illustrator or Photoshop. You have warning (exclamation mark) with Linked Smart Objects so you have less chances to miss to update it. On top of all, files with Linked Smart Objects have smaller file size. Confused? Here is some light on the subject:

Let's say you have 4 pages with different categories of products, for example, and you are using exact same price tag for all of them. Price tag is created in Illustrator or Photoshop. Here is what to do:

  • Create artwork (price tag for example) in Illustrator or Photoshop and save it to disc.
  • Place artwork (price tag) in each of the 4 documents in Photoshop from File > Place Linked then duplicate (clone it) as many times you want and distribute them as needed. At this point you will save and close documents and place generated assets in Muse. Following step are in case you want to modify placed linked artwork. I am mentioning artwork and price tags, but it can be really anything including continuous tone images.
  • Open all 4 documents in Photoshop.
  • Change file with artwork in Illustrator or Photoshop and save changes. In case you do not have documents open in Photoshop as specified in the previous step, use the Update Modified Content (right/Cmd + click on Linked Smart Object with warning and choose: Update Modified Content) for all documents in which you have placed artwork.
  • Start Muse and click OK when the warning dialog appears. In case you have Muse running in background while updating assets, then use the Update Assets command from Assets panel.
Update modified content of Linked Smart Object in Photoshop
Update modified content of Linked Smart Object in Photoshop

You are done. In this way, following instructions in paragraph above, you can update as many assets as you want with a few clicks. I assume that you are following tutorial and that you are using Generator to export Image Assets as explained under Turn on Image Assets.

Products used in this tutorial:
Adobe Photoshop CC
Adobe Muse CC

Photoshop Help / Generate image assets from layers | Photoshop CC
Adobe Muse Help / Building your first website with Muse | Part 1
Adobe Muse Help / Getting started with Adobe Muse, Part 2


Popular posts from this blog

How to Change Artboard Size in Adobe Photoshop

Free Puzzle Pieces Actions For Photoshop and Elements

Old Weathered Vertical Wooden Planks Free Image