advanced photoshop
Nov
2

Build a Sci-Fi UI – Part 2

Posted in:
Tips & Tutorials, by The Advanced Photoshop Team

Zeeshawn Durrani creates the interactive elements on www.creatve9.com and shares his production techniques in this tutorial

Build a Sci-Fi UI - Part 2

Thanks go out to Zeeshawn Durrani for this tutorial. See more of his work at www.creative9.com
 

See part 1 of this tutorial here.
 

Step 10 – Speech Bubbles

Build a Sci-Fi UI - Part 2

To create this UI element, you can use the Rounded Rectangle shape tool with colour #cc2666. First, activate the Paths palette and the Rounded Rectangle path layer. Select the Pen tool, set it to ‘Add to shape area’ and then draw out your speech bubble’s corner triangle. Now apply Layer Style>Stroke with a Size of 1px and a lighter dusky pink colour (#cc3366). Also apply Layer Style>Inner Glow, setting the blend mode to Screen, Size to 2px and Opacity to 33%.
 

Step 11 – Begin the Infographic

Build a Sci-Fi UI - Part 2

We’ll create the infographic at the centre of our Services section using little more than three simple circles. These were created using the Ellipse shape tool, adding the following tones: #cc2666, #0293d7 and #9aa401. Select Layer Style>Stroke and apply a 7px white stroke around each circle. Use guides and rulers to align these into the Venn diagram shape that you can see in the screenshot. The stacking order of the circles should be pink, blue and then green, as shown. Place these in a group.
 

Step 12 – Layer your Diagram

Build a Sci-Fi UI - Part 2

Once the core shape of the Venn diagram is complete, duplicate the group and make sure the copy is placed on top. First, select the pink circle and change the layer’s blend mode to Lighten at 85% Opacity. Set the blue circle’s blend mode to Lighten at 100% Opacity. Finally, set the green circle’s blend mode to Overlay with a Fill of 86%. These blend modes will automatically cause the colours to overlap, so you can experiment with different layer styles to create your own combinations.
 

Step 13 – Add some Shine

Build a Sci-Fi UI - Part 2

Now apply Layer Style>Pattern Overlay to each Ellipse shape, adding a striped style (which you can grab from the disc). Set the blend modes for these to Overlay. Create another Ellipse shape using a blue-black colour (#151b26). Make sure it sits above the other Ellipse layers (see example), then set the layer’s blend mode to Color Dodge at 70%. The result is a subtle gloss effect. When designing responsively, infographics can be a great way of communicating complex messages in a clear and simple way.
 

Step 14 – Composition and Animation

Build a Sci-Fi UI - Part 2

Make sure that objects to be animated are available on separate layers. At this stage, start thinking about how to integrate these objects (spaceships, in our case) into the design. Consider using the rule of thirds to help build a stronger composition. Parallax effects will also benefit from some time spent on improving depth. Here, we can use Photoshop filters such as Gaussian Blur on objects far off in the distance and the Sharpen filters for the objects closest to us. This separates the foreground from the background.
 

Step 15 – Lighting and Detailing

Build a Sci-Fi UI - Part 2

Address any lighting and perspective issues. In our case, the backs of the ships were out of perspective and required a repaint. Also use this opportunity to add more details and generally refine objects. To correct major lighting problems, use a Gradient Map adjustment layer with a simple dark to light gradient in Overlay mode. Follow this up with a new layer, also set to Overlay and at 40% Opacity. Zoom in and use a hard brush to paint in whites and blacks to bring out contours.
 

Step 16 – Finishing your Objects

Build a Sci-Fi UI - Part 2

It’s time to convert our elements into Smart Objects. This gives us extreme flexibility when re-sizing, without any loss of pixel quality, and is common practice with interactive design projects. To complete the thrusters, make a new layer and apply the default hard round brush, using a pink colour (#d52c55) to paint their general shapes (as shown). Next, set the brush to Color Dodge mode and gently brush over the centre of the thrusters, adding the intense glow found close to a flame source.
 

Step 17 – Retina Viewports

Build a Sci-Fi UI - Part 2

When working with responsive design, you will inevitably come across devices with a high pixel density, like Apple’s Retina iDevices. For these, your best bet is to create two files, one with your regular images and one for your high pixel density images. The resolution (PPI) is not important here, so you can keep it at 72 PPI, but the dimensions need to be doubled. Using Photoshop’s vector tools as much as possible will help. However, even then you might need to pixel-nudge your graphics to get the best results.
 

Step 18 – Saving your Images

Build a Sci-Fi UI - Part 2

Use the Slice tool to cut up your images, then head to File>Save For Web & Devices. Be careful with regards to the file type of each image; if it needs animation and/or transparency then stick to the PNG format, and if neither of these are required then save as a JPG and consider dropping the quality down to ‘High’. For most images, the ‘Very high’ and ‘Maximum’ settings don’t noticeably improve performance quality. With true interactive/responsive sites, performance is key and Photoshop’s ‘Save For Web’ options are a life-saver.