new photoshop tools for touch ui

Adobe Proto

 Full vector support in CS6

Adobe Creative Suite CS6 flagship software has now been carefully fine-tuned to accommodate cross-platform sharing, not only with files but also in key areas of functionality. What this means for Photoshop CS6 is that Adobe has finally adhered to the demands of market-driven users. Photoshop now includes options from or similar to other software, augmenting a host of varying capabilities including video, 3D and importantly web-based software, making it even more multi-functional.

Photoshop CS6 shows a strong alliance with users of Adobe Illustrator-those who specifically utilise this vector software to create logo and layout elements for web, copy and pasting these into Photoshop for further editing.

No longer will users need to force dimensions to consequent selection sizes to fix correct resolutions. CS6 now pastes vector shapes from Illustrator that always align to the pixel boundary, first time.

For those wanting to work exclusively in Photoshop, version CS6 notably supports full vector graphics through its new Shape tool engine. The advantages of these for web button, banner and ribbon creation are huge, as you can now make important changes to interpolation freely, across all device display sizes. But, considering the way the latest option set is presented, this also means control over numerous effects from one location.

With professional web projects capable of going through numerous amendments during production phases, combating time consumption is of paramount importance to the designer. Making changes in a matter of seconds is the ideal for any designer, and the new Photoshop CS6 Shape tool options enable this and more. Fill types, including Solid and Gradient colours, are only a click away in the Shape Fill presets, as are the Stroke types and Width values. These can be edited further with a simple double-click of the Shape Layer thumbnail, opening up a host of related options.

The power of touch

Many existing button designs for portable devices appear to be relatively simple. However, the creation of these elements is often far more complex. For instance, the rapid growth of touch functionality has had a dramatic effect on the way app and web designers approach their projects. Buttons have seen a huge shift in usability, they are now far more tangible and offer a lot more interaction with users. Simple geometric shapes make finger input far easier, while bright colours, vivid gradients and real-world textures make these elements aesthetically richer.

South Korea-based designer Jason H. Jeon ( is inclined to agree, as he elaborates: The userwant is getting closer to the analog. For example, touching a button with a leathery texture with a mouse and touching it directly [with your finger] provides a totally different user experience (UX). Although what users touch is essentially cold glass, a designer provides more experiences with such an intuitive interface. I believe these changes, brought on by the portable touch interface, are working greatly towards an emotional territory.”

There are often no visible buttons necessary for these sensitive touch gestures, therefore designers are forced to explore different ways to explain these touch-sensitive areas, reinforcing tangible application through replicated physical attributes. Clipping textures in Photoshop, using HD samples, is one obvious way of creating such tangibility, furthermore, native Pattern presets intuitively interpolate according to vector shape sizing, making inclusion practical. Even the simple application of noise can have its advantages, meaning therea wide range of options available to the artist.


Combine CG and Photoshop special FX to invent a basic app UI

Interactive graphic designer Han Lee worked as creative director, designer and composer of ideation on app project iORGEL (, from ALL-M Interactive (

His brief was to imagine a digitally reinvented music box for iOS devices. Lee drew inspiration from traditional sources, mostly retro music box design from the 19th century. organs for buttons, watch gears for movement, actually all kinds of classical machines gave way to inspiration,”he admits.

Lee s love of mechanics, kinetics and musical ”meant he had little problem studying real products or watching YouTube videos over and over. This intense study led him to developing authentic assets for this projectUser Interface (UI), using the power of Photoshop.

Shape layers and zoom functionality became paramount, as he reveals: ensure pixel perfection, which is much more important for mobile apps than desktop examples, as there are heavier pixel limitations. Your design will be rescaled and modified, fitted to various device resolutions." Vectorised Shape layers now in CS6, even previous Bezier curve Shape layers converted to Smart Objects make this much easier.

The creation of other base elements gave in to 3D design, such as gears and even a windup key. make UI more realistic, initial 3D objects help a lot,”Lee admits. used Flash to move some elements and check each element looked great and functioned fine. Ita smart way to communicate with a developer."

Photoshop effects further modified these 3D assets. Lee admits to using motion blurred noise, added to enhance brushed golden and wood textures in UI elements. create subtle edges and enhance 3D looks, Drop Shadow at 90-degrees, Distance of 1 px and Size at Opx, as well as a light Inner Shadow were applied to most elements,”he explains. To create shiny edges, blurred lines were added then set to an Overlay blending mode.


create shape elements

After sketching a layout, shape layers are created with the Pen tool, Polygon tool and various selection tools. Selections are also used to place each pixel in the right place.

ADD textures

Brush tools and Motion Blur filter were applied to the cylinder. The Add Noise filter is generated and Motion Blur applied on top. This motion blur noise is added to shape layers and the background.


Some shadows are added to settle down elements. Brushes are used to add highlights and shadows, on surfaces and borders. Vertically flipped pins are overlaid on top of the cylinder.

Next, a cylinder and a wooden background are copied then rescaled.

This creates the axis and menu boxes you can see at the top and bottom of the interface. Screws, a shape layered button and more shadows are then

 mobile devices


3D gears are added on both sides of cylinder to add more interest. Highlights are added to the menu box and deep shadows are attached to the cylinder for a more authentic look. These effects are added to all the gears and buttons.

Visual FX made easy

Award-winning interface designer Martin Oberhauser (www. looks to apply simple effects when creating fresh UX. He explains: precise and detailed icons are one way to explain touch gestures to the user, but I think even more important is the subtle use of highlights and shadows. By creating the illusion of depth and layering, the user is prompted to play with the UI and search for touch-sensitive areas.”Effects such as these are certainly applicable through PhotoshopLayer Style options.

Embossed effects are also a fantastic way of maximising a sense of depth and layering from ultimately simple assets. This is an effect commonly associated with navigation bars, now heavily adopted in web type styles. This has never been easier to achieve than in CS6. Once selecting Convert to Shape, your type layer will now be subject to the same options as your vector shapes. Here you can combine low-value Stroke settings and an Inner Shadow layer style to intensify contour. Once again this edit is freely resizable.

Rounded edges also have a lot to offer, bringing smooth and visually pleasing effects. However, for a long time these effects were defined up front before the main shape of the design was even added. This rule still applies, but users can now quickly add a replacement shape if the original isnacceptable. Users can improve edges, at similar or new dimensions, by simply double-clicking the image.

This additional ability to create shapes through dialog boxes makes exact asset production for templates instantly accessible. This, coupled with new improved guides technology and Mobile & Devices presets, results in Photoshop CS6 becoming a real contender for designing web layouts.

Mobile layout made easy

New document-preset sizes for iPhone, iPad and other portable devices are a great feature that saves you that little bit extra time. Assets created with said vector shapes, including those generated with Pen and Ellipse tools, (yes, even circular elements) can now be snapped to fixed guides. This functionality is default in Photoshop CS6 and is activated through the Preferences>General>Snap Vector Tools and Transforms to Pixel Grid option.


Explore how this app icon was made using Photoshop

Starting with a masked Rounded Rectangle shape, I filled in the base of the pizza box with a clipped cardboard texture. I use the rounded rectangle as a motif to create other shapes, and applied slight noise to all of these for additional texture.

The pizza is primarily drawn using spray paint brushes, which create a messy layering of crust.

The pepperoni is drawn similarly, but using red circle shapes with applied noise and texture.

Shadows are added on top of the pizza to support the designed lid. This was created using a Rounded Rectangle, applying the same cardboard and noise textures as the base. The cardboard texture was angled to imply perspective.

Finally, I added in some personal touches by introducing mock branding, using my own logo, and a bit more text to wrap the whole project up. This can then be rescaled to a 144x144px, 72dpi screen resolution.

Embrace the white space

Using fixed guides can help to avoid anti-aliased edges, as can the equally impressive, if not always perceptible, Align Edges feature. Applied on a per-Iayer basis, Align Edges stops the rounding of shape edges by jumping these to the nearest pixel grid. In many cases, this option tightens the shabby edges in drawn vectors, for example this would be highly useful when dealing with hand-drawn type.

But how are these options an advantage when producing web design for mobile devices? Well, when working to smaller document sizes such as 720 x 1280, 320 x 480 and 640 x 960, all available from CS6Mobile & Devices presets, shape edges in logos, app icons, template shapes and type retain delineation. You can create assets of a 1:1 ratio, without any quality loss, displayed with pin-sharp detail on any Retina and HD displays.

The detail of your web assets for mobile devices becomes all the more important when considering the amount of white space they have to compete with. You donwant to clutter the small screen area, again underlining the application of clean elements through manageable Photoshop options. "This gives buttons and other UI elements more room to breath and I truly appreciate that trend and love the use of negative space, as you can see in my Kit Digital iPad app design," adds Oberhauser.

This trend isnone likely to lose enthusiasm, as itborn as much out of necessity as novelty, now transferring styles back across to regular websites. So in some ways the constraints of mobile design have blessed the evolution of screen design in general. With this in mind we anticipate much more Photoshop application throughout the web. With such a rapidly developing sector weexcited about the new possibilities further software updates will have to offer.


See how using apps can regenerate your creativity for mobile devices

Adobe has brought content creation for web full circle with new tablet-based application Adobe Proto. Designers now have the ability to generate ideas for mobile machines, on mobile machines. Even better, the process is so simple that even the most amateur web enthusiast can pick it up.

Emerging technologies such as smartphones, HTML5 and CSS3 platforms pose serious issues, mainly making the static wireframe layout impractical. In affect, Adobe Proto offers designers the ability to make these far more interactive, through the convenience of your touch screen tablet.

With touch gesture options, designers can literally express layout, content priority and other important factors across multiple pages. Following the Touch Gesture guide, a designer can apply a simply drawn box and Proto will place in a header. Draw three dashed lines and you have yourself a menu bar. Itthis automation that makes it so accessible and quick to use.

Therealso a host of preset widget options, which enable you to drag and drop menus and other components, easily rescaling and positioning with sizeable corners and smart guides. Creating new pages and linking menu cells to these is a mere click away. Adobe Proto hosts video, images and Lorem Ipsum.

Designers can review progress and functionality through live previews, which are hosted through your web browser. All this means designers can communicate ideas for web more effectively, manually manipulating every fine detail. Project sharing between colleagues and clients using Proto is also a breeze, simply sync to the Creative Cloud to let others add their own influences or provide feedback.

Comments are closed.