Experience Photoshop new function design space

In the technical preview of Adobe Photoshop CC 2015, PS design space appears as a new feature, which can be said to be a dedicated workstation for Web UI design. This issue of foreign quality translation course on this new function for a brief introduction.

After you start the PS design space mode, Photoshop changes to a new interface, the original features unrelated to the Ui/web design will be hidden (such as 3D tools, etc.), so that designers can be more convenient and efficient design in the UI-specific design interface to reduce inefficient operations.

Figure 00

Run Design Space

Note: only for Mac OS X10.10 and 64-bit Windows 8.1 and later operating systems, only English is supported for the time being.

As mentioned earlier, the design space is now part of the Technology Preview phase and needs to be started manually. Select Edit > Preferences > Technology Preview in the main menu bar, check the startup design space (preview), and then see an introduction to the design space.

Figure 01

Tabs Menu

Now let's take a look at the characteristics of the design space and what's different from the PS interface we see in common. As the following figure shows, the usual tab menu bar is changed, some of the options are gone, and new options are "scheduled," and in the scheduling option, we use to align, Flip, and place objects in groups.

Figure 02

Create a new document

There are 2 ways to create a new document in the design space, the easiest way is through the template panel, which is what you can see when you enter the design space, which improves the most popular design templates. Of course, you can also use the tab menu, click on the file, and then select New (CTRL + N) to create a document that is the same size as the last template. If you press Alt+ctrl+n, you open a regular Photoshop window, and then you can choose to create and set up a new document. and create a new document from the template, as it does in the stencil panel.

Figure 03

Tool simplification

After entering the design space, the left tool icon list disappears and is replaced by the only five icons in the middle right, which are selection tools, rectangles and round tools, pen tools, and text tools. The selection tool replaces the usual move tool that we use to move objects around the canvas, and then we double-click the shape with the selection tool to make adjustments.

Figure 04

aligning objects

Align objects with the Arrange tab or the right alignment panel. You can align multiple objects at the same time, and you can select more by pressing SHIFT.

Figure 05

Adjust positioning and size

For both UI and web design, the layout and size of the pattern are very precise, and high and wide values can be set in the Panel on the right side of the tool list, and the aspect ratio can be locked to avoid the effect of the subsequent operation on the finished part. The width-high setting below is the positioning setting that determines where the image is placed on the canvas, and the other options are to rotate the object that has already been selected, and to set the relative position between the two objects.

Figure 06

Designing vector images

Now look at the design section. The first thing to design is to set the opacity, the layer pattern, and the vector part, which will make you think of the familiar Adobe Illustrator. With the above settings, we can adjust the shape of the image or mix with other shapes, resulting in the superposition, reduction, intersection and difference effects. The following figure shows the four combinations of two circles, in which the graphic must be selected.

Figure 07

Populating objects

Padding can be filled with color by clicking on the area where you want to pick the color, or by setting the color selector directly, such as Black #000000, RBG (255.0.0), and setting the red. Here the alpha channel is similar to the opacity, but only when the fill is produced is the effect.

Figure 08

Design Strokes

We can set the stroke size and alignment, set the alignment, alignment, or center alignment.

Figure 09

Design Shadows

We can add the outer and inner shadows of the object. Set the color, it will become an outer glow,

There are also positioning XY settings, blur, and distance. Settings such as shadow color and XY axis can be activated by clicking the small plus sign.

Figure 10

Text styling

To the text design, in fact, is also very simple. Select the font, size, and so on in the text area.

Figure 11

Category:

• PS Getting Started Tutorial