Subscribe

Get updates by email for exclusive video tutorials, stock resources and more - for free!

Tutorial Index

Would you like to learn the art of photo manipulation, but don't know where to start? Check out our Tutorial Index, which lists all articles in order from Beginner to Advanced:

SurrealPSD Tutorial Index

Photoshop Android: Mech Spines

11Aug

Photoshop Cyborg Mech Spines Title PostBeing a massive Cyberpunk fan I was naturally drawn toward biomech and PostHuman art. Photoshop is an excellent tool for realising fantastic concepts, particularly sci fi enhancements and robotic elements. In the new Photoshop Android walkthrough series we’ll be looking at  a selection of photo manipulation techniques for creating Sci-Fi body modifications, with todays issue focusing on Mech Spines!

 

Splinter

I’d seen a load of great cyberpunk pieces on DeviantArt, and obviously I wanted to give it a crack.. I’d dabbled a bit beforehand, but nothing that I’d deem to be real crowd pleasers – until I developed my own style which I dubbed the ‘Splinter’ series.

Because I knew I couldn’t properly articulate the organic beauty of the legendary cyber-artists such as MichealO, I decided to stray off into a different direction; creating a more hostile aesthetic. Heres two pieces in the series that turned out to be very popular – Porcelain Splinter and Second Splinter:

Porcelain Splinter by Conzpiracy Cyborg Photoshop TutorialSecond Splinter by Conzpiracy Cyborg Tutorial

The techniques used to create the spines are actually quite simple, read on for the skinny!

 

The Stock

I had a dig around in my old stock archives to find a suitable (unused) image to use for the walkthrough and found a goodun. With these biomech pieces I find that artistic nude poses work really well, giving you the opportunity to fluidly integrate the mechanical elements with the human form.

I still maintain that one of the greatest factors in creating top-tier photo manipulations is the use of the highest quality stock available. This stock image is an oldie from the now defunct StockXpert site, I now get all my images from Fotolia. Check out my Stock Photography guide if you’d like more info.

 

A bit of Prep

I beefed up the background a notch to allow for background elements / more space by sampling colours from the scene and painting on a layer underneath. I softened the brown tones of the girl by creating a selection around her using the Pen Tool (P) and using Hue Saturation & Levels Adjustment Layers within the selection to control her tones.

This step isn’t majorly important though, it’s just for the example 8-)

Photoshop Cyborg Tutorial Mech Spines 1

Following the Form

Biomech looks great when it follows the form and direction of the model’s limbs. When thinking about where you’d like to place the spines on your model it might be worth having a sketch with a wacom or laying down some rough lines using the Line Tool (U) on a new layer above. Getting a feel for the anatomy and toying with some initial concepts can help gauge the direction you’d like to go when it comes to creating your spines.

Photoshop Cyborg Tutorial Mech Spines 3

The sketch phase doesn’t have to be completely accurate as things can be tweaked as you progress. An important consideration to keep in mind is to account for the joints and imagine how the spines would function if the limbs bend.

 

Lets build Spines

First thing for me is to make a couple of layer groups just to keep everything organised, one for all the elements that make up the girl and one for the spines. This is down to personal preference, but an organised layer stack definitely does help in the long run.

Create a new layer for one of your spines and give it a meaningful name; I called mine ‘big spine’. Sample a midtone colour from your model with the Eyedropper Tool (I) and use that shade to create a spine shape with a tool of your choice. I like to use the Pen Tool (P) set to paths; create a closed path, right click and select ‘fill path’. A Polygonal Lasso (L) will work as well; create the selection then right click and select ‘fill’.

Photoshop Cyborg Tutorial Mech Spines 4

We use a colour sample from a ‘midtone’ area to create the illusion that the spine is part of her body. Use of the Eyedropper Tool and colour matching is definitely a common process in photo manipulation.

 

Cutting Sections

You may want to chop sections from your spine shape just to add to that ‘tech’ aesthetic. On the example piece I used the Pen Tool (P) and Elliptical Marquee Tool (M) to create selections to remove a couple of sections to enhance it’s look.

Photoshop Cyborg Tutorial Mech Spines 5

Checking the Lightsource

To elevate our basic shape into a tangible element, we’ll have to implement some simple lighting effects. The first step is to observe where the primary light source is and whether there are any secondary or bounce lights in effect. From there we can observe where the shadows fall and determine how to light the spines. Check out the Lighting in Photoshop articles if you’d like more info (Part 1, Part 2, Part 3).

Photoshop Cyborg Tutorial Mech Spines 6

The above is a rough assessment of the light directions in the example image. The large red arrows show the primary light source, I’ll be keeping that in mind when I apply the lighting effects to the spines.

 

Creating the Highlights

On your spine layer, create a selection along a single edge that faces the light. You could use the Pen Tool (P) or the Polygonal Lasso (L) to create this selection.

Photoshop Cyborg Tutorial Mech Spines 7

Use the Levels command (Image > Adjustments > Levels or Ctrl / Cmd + L) to lighten the selected area. I pulled the Output Levels forward to 100 to get the desired lightness, the value here can be tweaked to personal preference.

Photoshop Cyborg Tutorial Mech Spines 8

Heres a closeup of the spine once the lighting effect has been applied.

Photoshop Cyborg Tutorial Mech Spines 9

Creating the Shadows

Applying the shadows / dark regions to the spine follows the exact same procedure that we used for the highlights; but in this case the Levels command is used to darken the selection:

Photoshop Cyborg Tutorial Mech Spines 10

Selective Lighting

Using Levels is great to apply even shades, but there are simple methods that can be used to paint in selective patches of light. In the example picture I created a selection using the same technique as above, on the spine layer I used the Dodge Tool (O) to brush in some soft highlights on the right side of the spines:

Photoshop Cyborg Tutorial Mech Spines 11

Shadows

Your spine is a little lifeless at the moment, but will really lift once a simple shadow is applied. To create the shadow I duplicated my spine layer, and moved the duplicate under the original. I darkened it using Levels (Image > Adjustments > Levels) and rotated slightly using Edit > Transform > Rotate. I set the layer to Multiply Layer Mode and applied a slight Gaussian Blur (Filter > Blur > Gaussian Blur).

To make the shadow a bit more subtle I pulled the Layer Opacity down to 70% and used a soft-edged Eraser (E) to gently remove some the parts where I didn’t want the shadow to be applied:

Photoshop Cyborg Tutorial Mech Spines 12

This is a real sharp, life-like shadow. You definitely want to avoid Drop Shadows for this procedure because you want full control – manual is king in this case!

 

Rinse and Repeat

Add spines using using the techniques above and refer to your original guide to assist with the placement / positioning. Here are a few points to consider when adding new spines:

>> Make sure you sample shades from where the spines will be placed to ensure everything looks natural.

>> You can use the Dodge Tool (O) to lightly brush over areas that you want to be lightened.

>> Layering spines over each other with good looking shadows inbetween really lifts the mechanical elements.

>> To save time you may want to duplicate spine layers to build up the composition.

Photoshop Cyborg Tutorial Mech Spines 12

Coming Next..

In part 2 of Photoshop Android, we will integrate mechanical elements using stock images to add that tactile Cyberpunk flavour. Feel free to share your thoughts in the comments section below and spread the word if you enjoyed the post.

Conzz 8-)

Follow on Twitter >> @Conzpiracy

 

• Photoshop Android Part 1: Mech Spines

• Photoshop Android Part 2: Machine Works

• Photoshop Android Part 3: Panel Work

• Photoshop Android Part 4: Highlights and Wires

• Photoshop Android Part 5: Mech-A-Face

Enjoyed the article? Give us a shoutout!

18 Responses to “Photoshop Android: Mech Spines”

  1. Irene says:

    p.s. are you able to get the +1 button for G+ sharing?

  2. JERRY says:

    Wicked my friend! Wicked!

  3. Really great info, thank you

  4. Marcela says:

    Amazing technique, so cool of you to share it! :)

  5. option-b says:

    This rocks!

  6. Fantastic work I love it, and very informative tutorial :) how long until the second half is out? I’m checking every day lol

  7. Hi…

    I completely agree with everything you might have explained. In reality, I browsed throughout your additional content articles and I do feel that you are completely correct. Great job with this site….

  8. Hello there! Do you know if they make any plugins to help with SEO?

    I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very
    good gains. If you know of any please share. Thank you!


Leave a Reply