How to Use Design Space In Photoshop CC 2015

01
of 05

How to Use Design Space In Photoshop CC 2015

Design Space is enabled in the Photoshop CC 2015 Preferences.

Over the past couple of years I have been closely watching the growth and expansion of Photoshop from an imaging to a design and layout tool. This has become especially noticeable when it comes to web, UX and mobile design. As I pointed out a couple of weeks back, the new Artboard feature and Adobe Preview give designers the opportunity to look at their work on their targeted devices. It is becoming quite evident that Photoshop is expanding its reach into a variety of disciplines.

Last week I was poking around the Photoshop CC 2015 and noticed, at the bottom of the Preferences list, an item named “Technology Previews … “ The result was a dialog box asking me if I wanted to Enable Design Space, explaining what it does and its limitations.

The key “take-away” here is these technology previews involve Adobe employing its User Base to try out new features in development that may or may not get added to the application at a future date.  As Adobe clearly states, “Design Space (Preview) is aimed at becoming a modern design experience inside Photoshop streamlined for the requirements of web, UX and mobile app designers.“ Essentially the feature is a web app using HTML5,CSS and JavaScript which , when enabled, adds a layer above Photoshop for the purpose of adding features to Design Space. If you have some serious coding chops you can even play with this layer because the source code has been posted to Github.

Design Space is not a Photoshop plug in or other Photoshop technique. The best way to regard this feature is : Design Space is a stripped down Photoshop interface designed to focus your attention on the task at hand. If you need to do something not found in Design Space, a click returns you to the full-bore Photoshop interface and another click can bring you back to Design Space.

How does it work? Good question. Let’s find out.

02
of 05

How To Use The Adobe Photoshop Design Space Interface

Strip down the Photoshop interface to its essentials and you have a Design Space.

Once you have enabled Design Space from the Preferences you will notice there is a new icon right at the bottom of the Photoshop Tools bar. This is the Design Space button and, when you click it, the interface changes to the Design Space. The other way of launching the Design Space is to select Window> Design Space (Preview). To return to Photoshop, click the icon or select Window> Return To Standard Photoshop.

As you can see, compared to Photoshop, the interface is quite “bare bones”.

The tools, with their keyboard shortcuts, from top to bottom along the left side are:

  • Selection (V key)
  • Rectangle (R key)
  • Ellipse (E key)
  • Pen (P key)
  • Text (T key(

At the top are a series of alignment buttons that will distribute or align selected objects.

The next panel, under the Distribution tools at the top, is a Properties panel, which changes based on the selected item.

At the bottom are the layers found in the Photoshop document.

You can also create a new document by choosing File>New from Template You will then be presented with a number of template choices for iOS , Android, the MicroSoft Surface, Apple Watch and Desktop.

03
of 05

How To Manipulate Vector Objects Using Photoshop Design Space

Using vectors in Design Space.

Design Space works with both vector and bitmap images. In fact the three drawing tools- Rectangle, Ellipse and Pen- are vector tools. Depending on which type of graphic is chosen, the Style Properties that can be manipulated will change. In the above image, you will see there are four Combine options: Unite, Subtract, Intersect and Difference. You can also round off rectangles, as well as change the stroke and fill colors, rotate, flip horizontally and vertically and even swap the position of selected objects.

Don’t forget … this is still Photoshop. What that means is you can import linked or embedded vector artwork from Illustrator, using File>Place , and it will be placed as a Smart Object. This is especially useful for icons. On top of that, as you move selections around on the artboard, Smart Guides appear as alignment aids.

04
of 05

How To Manipulate Bitmap Objects Using Photoshop Design Space

Bitmap editing and manipulation is quite limited in Design Space.

The ability to manipulate bitmap images is somewhat limited. If you need to correct or, otherwise, change a bitmap , do the work in Photoshop before placing the image. Still, you can add borders to images, rotate images, flip them vertically or horizontally and swap their positions.

Another interesting feature of bitmap manipulation is the limited list of Blend modes in the Style Properties.

05
of 05

How To Navigate, Save And Add Artboards To A Photoshop Design Space Project

You can easily add Artboards to a Design Space project.

You aren’t limited to just the one Canvas. If you select File> New … the Photoshop New Document dialog box opens. Though Adobe is suggesting ,with this release, that you stick with one artboard you can add more by selecting the Artboard in the layers panel and clicking on the + sign that appears above, below and to either side of the Artboard. This is a rather nifty way of creating site maps. To remove an Artboard, select it in the Layers panel and press the Delete key. To rename an Artboard double click its name and enter a new one.

To navigate between open Design Space projects, click either < or > to move forwards or backwards between them.

To Save your work select File>Save or File>Save As. The formats available to you are:

  • PSD
  • Large Document Format ( Used for PSD documents up to 30,000 pixels in size.)
  • Dicom (A standard used in medical imaging)
  • Photoshop PDF (PDF files that can be edited in Photoshop)
  • TIFF