Creation of the Design is Kinky splash by Joost Korngold of Renascent.

The Splash is a mixture of both real photography, 3d elements, vector elements and typography, in this tutorial I will show you how the process of the creation of this splash was made. I wanted to create a surreal look though still have it recognizable to create a bizarre like atmosphere.

Tools used: Adobe Photoshop 6, 3D Studio max r3.1

Step1. Photoshop

Here you can see the actual photo used for this splash, as you can see here it has already been slighly edited by pixelstreching the cooker (as that an english word?;). This is achieved by making a one pixel selection vertically, of the part that needs to be stretched. Make the selection, Edit, Transform, Distort. now by taking the middle square of the selection you can drag this to any direction of where the pixels need to be stretched. Do so and double click in the selection to make it happen.

Step2. Photoshop

The next step is the creation of the selctions of the wall and floor that i will use further down the line. I normally just zoom in and use my Lasso tool to create the selction (yes in know i should make masks, but i never use them). After Ifinish making the selection I Feather the selection by 1pixel, so that once I will fill the selction the boarders wont look to hard edged. After that I Save my selection so that i wont have to do it all over again in the future. Select, Save selection, Any given name.

Step3. Photshop

Here i fill selection 2 with a dark green on a new layer, after i fill it I set the layer Opacity to 65% so that the ground still comes thru a little.

Step4. Photoshop

Before i go futher I am going to make a pattern, created a new document that is 3 by 3 pixels, and I filled it with the same green as before though now i make the diagonal of the square white. Now select al,l click Edit, Define pattern. so that the pattern is in the memory (P-shop 6 lets you save your pattern for future use, which is pretty cool ;)

Step4b.
I'm still working in selection 2 that is still open in the main document, I create a new layer and Fill it with the Defined pattern, I set the layer to Overlay with Opacity to 80%. Now in the example on the right hand side you dont see much differnce that's why i've included shot 4c of the actual size of this splash.

Step5. Photoshop

With selection 1 I will do the same as described in step4. adding two layers one filled with green and the other filled with the pattern. Though here i set the layer with the pattern also to Overlay, though now the Opacity is set to 30% as the color of the wall is different I needed to adjust the Opacity here to get the desired effect.

Step6. Photoshop

Here I'm selection differnt angles of the room that a want to accentuate by making them white. Again creating a new layer and making the selection with my trusty Lasso. After the selction is made i fill it with white.

Step7. Photoshop

Adding the Type and vector elements, I have created a seperate document where i have made a combination of engineering drawings and typography, all done on a new layer so that it can easily be copied into the main document. I have also made a Definition as a Pattern of this for later usage.

Step8. Photoshop

This is all pretty traight forward so i'll jump thru it, using the type and vectors created earlier I start laying them over the image, usuge of different colors, green, white and red. Deleting undesired parts.

Now the part where it gets more interesting is where i use the element to lay them over the wall and the kitchen cabinet. What i have done is adding a new layer and filling it with the pattern that iI have saved earlier. Now I select the complete layer and i will use Transform, Distort to make it align with the perspective of the wall. After that was done I deleted the the unwanted part by Loading my saved selction and inverting it to delete the unwanted parts.

For the Kitchen cabinet I did the same, though here I deteled the unwanted parts manually as it wasnt that hard ;)

Step9. 3D studio

Ok, lets open up 3d studio to create us some abstract shapes ;) The shapes used here are purely blocks, blocks and blocks.... showing you how this is done will be really simple and possibly boring it has more to do with your systems processor than your creativity. Just keep on creating blocks, all over the place till you say "yeah that's about enough... the ventilator of my system is running in overdrive..."

Now add more perspective to it and render out different angels and Save them all as TIFF, rendering as TIFF automatically gives you the Alpha channel that you can Load later again in Photoshop.

Step10. Photshop

Back to Photoshop, I now have a range of 3d rendered Tiff's that i will open and will add to the splash. On the example on the left you see that i add the 3d elements above the kitchin cabinet and the 'cooker'. (it also covers up Step1 that i wasn't very happy with anyway)

Step10b.
To make it look as though the 3d shapes are really in the spaceI needed to create shadows on the objects below, This is done by duplicating the layer and dragging that layer under the duplcated one..., now you move the object down where you would like to see the shadow. The shadow is created by adding the filter Gausian Blur to the object. I then set the layer to Multiple, and the Opacity to 75% and I brushed away the unwanted parts with my erasor tool.

Step10c.
Now added to this I also want to object to reflect on the ground, so once again i duplicate the later and i drag it to the desiered place. I still have my selction 2 that I load and invert to delete the undesired parts and set the layer to Overlay, Opacity 30%

Step11. Photshop

Ok, we are almost there all that needs to be added now are the 3d shapes on the wall, once again opening a rendered Tiff and loading the selction, copy and paste it into the main document. And as before with the type on the wall we Distort the image to align with the perspective of the wall. Again after this is done the selection 1 is loaded and inverted and the undesired parts are once again deleted. The layer here is set to Screen.

Step12. Photoshop

The rap-up, added the Typography and vector elements.
And the Splash is done :)

Click here to see the actual size Splash.

I hope you have enjoyed this Insight for the creation of this Splash for Design is Kinky.

Kind regards,

Joost Korngold
http://www.renascent.nl