TUTORIAL

Posted by Imanulnaim Enterprise Monday, June 1, 2009

NOTE: This tutorial was written by Sanity Penguin and huMAC gave full rights to post here.


Another great Lp that I had the opportunity to make a tut from. Not only does this piece has a great composition but, as the title already lets you expect, it has a great colour scheme. Everything in this large piece is in perfect balance with each other and I’ll show you how to achieve a similar effect.


The lp was created by huMAC. The original size can be viewed by clicking the result image but all the other images have been downsized a bit to fit in our template here and to compress the loading of the page a bit as well.


Final result


This is how the final piece will look once we’re done with the tutorial. Click this image to view the Lp in it’s original size.



Outcome


Step 1


Start by creating a new file. Go to file < new and enter a size of your choice for the canvas. Here, 640×800 pixels was used.

To create our background, we will work with gradients. Select the gradient tool and choose the angle gradient. Pick out two nice colours taht match and set them as your foreground and your background colour. (#dbfdc9 and #38ccd5 here).


Gradient settings



Then drag your gradient starting somewhere near the middle of the canvas and drag it to one of the sides. Because we didn’t tick off the transparency box on the gradient tool, we will get a hard line in it.


Step 1


Step 2


Create a new layer and drag another gradient like the one before, simply arrange it differently.


Step 2

Now change the blending mode of this layer to lighten. This will have both gradient layers flow together nicely and you will have a very colourful background, without any hard lines remaining.


Step 2


Creation of the coloured blocks


It’s wise to create each new block - so with each new colour - in a seperate group (Ctrl+G). That way you can keep track of the different blocks you have created. Also, once you have complete a block within the group, hide all the other layers visible and apply the image on a new layer. That way, you will have the create block on a new layer and you will be able to use it afterwards by merely copying it, rather than recreating it anew.


Step 3



Adding our first coloured block. we’re opting for rounded rectangulars here so select the rounded rectangular tool and pick a nice colour as your foreground colour (#2cff82 here). Now, set up the tool as followed.


rect. tool


Now simply create your rectangular shape on a new layer. Hold shift to make the rectangle stay in proportion (create a square) and afterwards you can transform it a bit by pressing Ctrl+T. You can then rotate it then for example.


Step 3


Step 4


Then we create a nice pink block. We’re going for a darker pink with some light pink in the middle. So first create the dark rounded rectangular (#ff6d88) and then add a smaller and lighter one on a new layer (#ff886d). Again, rotate the shapes by using Ctrl+T.



Step 4


Step 5


Then we’ll create a blue one, with a sort of shadow attached to it.


Start with the biggest one, the shadow layer (#6ee3da) and build up from there. Use a different shade of blue each time (#5dffff - #5ee9fe - #5ddcff) and create smaller rectangles as well.



Step 5


Step 6


Then simply create another similar block as the blue - using different shades of one colour - but use green this time.


Step 6

Then you can add some swirls to it as well to add some variation. You can either create this in illustrator by creating some lines and using the swirl tool but a similar effect can be acquired in photoshop itself. You simply create some thicker lines in different colours and then go to filter < liquify. There is also a tool in there called the swirl tool. Just use that on the lines and you will gain a similar effect.


Step 6

And to top the swirl off, you can add some extra detail to it by adding some more colour to it for example. You can use the brush tool for this but also the elliptical marquee tool for example.


Step 6


Step 7


Add another pink block like before, only bigger this time.



Step 7


Step 8


And then add another block, this time in yellow and again using different shades of the colour.


Step 8


Putting the pieces together


I’ve shown you now how to create thos blocks, so now it is merely a matter of recreating them and using different colours. The reason I’ve shown these few blocks is because - as you can see - they form “one part”. So now recreate blocks, each time creating “a similar part”. I can’t stress enough to use different sized blocks and colours, because that will give you the best end result. Over the next few steps I’ll just gradually show you how Humac put all these parts together to create a fitting composition.

You can work with layers above and beneath the ones created just now, it all depends on how you want them to interact with each other. And of course, there is no shame in re-using some of the formarly created parts ;)


Step 9


Step 9


Step 10



Step 10


Step 11


Step 11


Step 12


Step 12


Step 13


Step 13


Step 14


Step 14


Step 15


Step 15


Step 16



Step 16


Step 17


Step 17


Swirly time


The next steps involve the addition of adding some swirls and twirls.

Like I said before, you can either create these in illustrator by transforming some pen tool lines with the swirl tool but you can also use the liquify filter in photoshop (filter < liquify). There is always a swirl tool available there with which you can swirl some pen tool lines.

To actually swirl it, you have to create straight lines first, you can work with different colours and place the lines next to each other. Make sure they are thick enough since they will go thinner when you use the swirl tool.

So then simply go to filter < liquify and use the tool to get this effect. Like before, you can choose to add additional colouring afterwards by using the brush tool for example.



Step 18


Step 18


Step 19


Step 19


Step 20


Step 20


Step 21


Step 21


Step 22


Step 22


Step 23



This swirl’s blending mode was changed to soft light to give it a lighter effect.


Step 23


Step 24


And again, this swirl was put to soft light.


Step 24


Step 25


Now we’re going to take this entire image of blocks and re-use it. To do so, hide all the background layers (so the gradient layers from the beginning) and create a new layer. Apply the image on this layer. Now you should have it all on a new layer and move-able as a whole.

Drag this layer beneath the regular block layers and just above the last gradient layer that generated our background.

Move it a bit and go press Ctrl+Shift+U to desaturate it. This will turn it into greyscale. Then simply lower the opacity until pleased and until it looks as if it’s a shadow (8% opacity here). If needed, you can then still use the eraser tool to get rid of some parts that you don’t like.


Step 25



Step 26


Moving along with the swirls though! The big swirl that was added last and put to soft light will be re-used now. So you can just duplicate that layer. Simply change the blending mode to normal again and erase some part of the swirl so that the other - which was put to soft light - becomes partly visible again as well.


Step 26


Step 27


Then you can add some extra detail to the swirls by adding some additional hints of colour to it. You can use the brush tool for it again with a hard rounded brush or, more preferably, use the pen tool to add the extra parts to it so you can follow the exact shapes of the swirls.


Step 27


Lighting and slight changing of colours


In the next step we will change the colours a bit and also work on the lighting a bit to generate some additional depth to the piece.


Step 28


Add a gradient map. This is an adjustment layer and can be found by clicking that little orb in the bottom of your layers window palette. The gradient used here is a custom created one.



gradientmap


Change the blending mode to lighten and reduce the opacity of the layer to 18%.


Step 28


Step 29


Apply the image on a new layer and go to filter < blur < gaussian blur and use a 2-5 pixel radius.


Step 29


Change the blending mode to overlay and lower the opacity to 15%. This will add a bit of extra lighting.


Step 29


Adding text



Adding the text will be an addition to the already colourful Lp. We will use similar colours as the ones used in the piece itself ad we will also add some additional assets to the text to make it stand out a bit.


Step 30


Select the text tool and use it to add your name onto a new layer. Pick out a nice font and simply use black as colour for now.


Step 30


Top this text off by adding a line underneath it, one that fades out on both edges.

To achieve this, simply add the line on a new layer, using the pencil tool. Then use the eraser tool and select a soft rounded brush. Lower the opacity to this brush to about 20% and then gradually erase both edges to get the effect of the line fading out.


Step 30


Step 31


Then we’ll start on shaping the text that will form our title of the piece. use the text tool again and add the title of your piece. And simply build your letters by using the different colours present in the piece.


Step 31



Step 32


Now I know you think that’s hardly visible, but not to worry, we’re going to fix that. Create a layer beneath the text layer of your title and select the rounded rectangular tool again (the tool you used to create the blocks). Now use it to draw a rounded rectangular in which the text will fit. Use a colour you like from the lp.


Step 32


Step 33


That was just what we’re going to use as a sort of edge to the actual text background though. So create a similar rounded rectangular block on a new layer and fill that with black.


As you can see, this block is lifted a bit upwards so that the yellow from our other layer adds some depth to it.


Step 33


Final step


The last part will simply involve brightening the end result a bit. So add an adjustment layer and choose the brightness and contrast one. Play around a bit with the settings untill pleased and voilĂ , a master piece is created!


Step 34




http://anothera.net/v2/tutorials/colored-blocks

0 comments

Post a Comment

IMTIYAAZ

IMTIYAAZ
JOM BELI PRODUK MUSLIM YANG MURAH DAN DIYAKINI

DAPATKAN BUKU DIGITAL SEKARANG!

DAPATKAN BUKU DIGITAL SEKARANG!
http://bukudhatiku.blogspot.com/

PERTANYAAN


ShoutMix chat widget

Facebook Badge