Create a Poster Illustration with Floating Floral Elements

Oct 2nd in Drawing by Constantin Potorac

In this tutorial, we will be working to create an interesting Poster-size illustration with floral elements. This tutorial is inspired by a suggestion from Zach on our Tutorials Suggestions/Request page. He wanted to know how one would create a design like the floral element in the Version App header. I've taken a look at that, added a few of my own ideas, and run with it to create a cool poster design.

Author: Constantin Potorac

I am a freelance designer living in Romania. I discovered the beauty of design a few years ago. Since then I have dedicated my time to becoming a great designer (work in progress)!

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. Want access to full PSD files and downloadable copies of every tutorial, including this one? Join PSDTUTS PLUS for just $9/month.

Step 1

Open up a new white document Ctrl + N at the size of 600 pixels by 1129 pixels. We'll start by making the center of the flower and the pollen. Then we will make the petals. Make a circle and fill it with #fcee10. To make the circle use the Rectangle Tool (U).

Step 2

Next make a new layer over the yellow circle. Then using the Gradient Tool (G) set to Radial, make a spot in the center of the circle, as I did using this color #f27d00. Finally ,set the gradient to Multiply.

Step 3

Create a new layer, make a selection of the yellow circle and fill it with white. Go to Filter > Noise > Add Noise. Then set the layer to Multiply and the Opacity to 15%.

Step 4

Next thing you need to do is to add a Mask to this "noise" layer. Then using a black brush you need to erase the noise from the edges of the circle.

Step 5

Next duplicate this "noise" layer and set it to 5% Opacity.

Step 6

Create a new layer over all the other layers and call it light. Make a selection and fill it with white.

Step 7

Set the layer to Hard Light. Then using the Eraser Tool (E) you'll need to erase some of this light.

Step 8

Next step is to make another new layer and place it under the "light" layer. Call it "pollen." For this step you'll need to use the Brush Tool (B). Use the settings shown below and the same color as you used for the circle. Start drawing around the circle. Move all these layers to a new folder and name it "1."

Step 9

Next we will start to make the petals. First, create a new layer and select the Pen Tool (P) for this. Make a shape as I did. It doesn't matter the color for now.

Step 10

Next you'll need to create the shapes of each petal as we did in Step 10. Be sure to keep everything organized and move each petal into different folders. The total number of the petals that we will create is twelve.

Step 11

Next I will ask you to order the petals as I did. Move each layer to have them surrounding the yellow circle. I have changed the colors for each petal to help you order them.

Step 12

Start with petal number "2." Fill the petal with #ce7e00.

Step 13

Make a selection as I did by Command-clicking on the petals thumbnail. Then deselect the left half with the Rectangular Marquee Tool (M).

Step 14

Make a new layer and using a white gradient set to Linear, click and drag as I did. Then set the layer to Soft Light and Opacity 45%.

Step 15

Next you need to mask the layer. Then using a black brush, erase some of this light.

Step 16

Next create a new layer and make a selection around the petal. Using a black gradient click and drag from up to down.

Step 17

Set the layer to Overlay and Opacity to 50%.

Step 18

Create a new layer and using the Pen Tool set to Path, make a path around the right side of the petal.

Step 19

Set your brush to 1px Diameter and also use white for this. Next back to the Pen Tool (P), right-click on the document and select Stroke Path. Select Brush from the menu and make sure Simulate Pressure is not selected. Then simply delete the path and Right-click and select Delete path.

Step 20

Set the Opacity to 50%.

Step 21

Duplicate the layer you created in Step 14 and 15. Move it on top of all the layers from that specific folder and set it to Normal and Opacity 40%. Lastly, you need to mask away a bit of the layer.

Step 22

Make a white straight line using the Line Tool. Then rasterize it and erase the bottom and upper parts. Then set the Opacity of the layer to 20%.

Step 23

Make a last layer. Make a selection of the petal and deselect the right side, as we will work only on the left side this time. Use the Gradient Tool (G) set to black and make a black shade, as shown below. Then simply erase some of it and lower the Opacity.

Step 24

You are done with that petal. Next we'll continue with petal number "3." Go ahead and fill this petal with #ce7400.

Step 25

Create a new layer. Then using the Pen Tool (P) set to Path, make a path, and stroke it with white.

Step 26

Using the same path make a new layer, and this time stroke it with black.

Step 27

Set the white path to Soft Light and Opacity to 86%. Also, set the black path to Soft Light and 55%.

Step 28

Make a new layer. Then using a black brush draw some shadow.

Step 29

Next, make a new layer and in this layer create some light on this petal. Fill it with white using the Gradient Tool (G). Don't worry if you fill outside the area shown below, as you'll erase that after. Then set it to Soft Light and Opacity 50%.

Step 30

Create another new layer and make a selection around the petal. Delete some of the light you just applied on the petal. Then set the layer to Overlay and Opacity to 48%.

Step 31

Repeat step 25 and 26, but this time place those two strokes as shown below. Set both strokes to Soft Light and 50% Opacity and erase the edges.

Step 32

Make another layer and make a selection around the petal. Use the Brush tool and draw over the petal as I did. Set the layer to Overlay and Opacity 30%.

Step 33

Next we'll work on petal number "4." Use the same technique we have used for petal number "3."

Step 34

Next we will work on petal number "5." Use the same techniques we used for the previous petals.

Step 35

Petal number "6" now.

Step 36

Now will work on petal number "7."

Step 37

Time for petal number "8."

Step 38

And petal number "9."

Step 39

Now we have to create four more petals. Start with petal number "10."

Step 40

Next is petal number "11."

Step 41

And last we'll create both petal number "12" and "13."

Step 42

The flower is complete. Now we need to create a nice background for this flower. Move all the petals and the flower elements into a folder and name it "Flower." Make a new folder under the "Flower" folder and name it "Sky."

Hide the flower and create a new layer in the "Sky" folder. Use the Gradient Tool (G) set to Linear with the colors #9fc1c2 and #283333 to make a nice gradient, as shown below.

Step 43

Next we need to make some clouds. You need to subscribe to Plus to get the Clouds Brush that I have provided with the tutorial source file, or you could certainly search for one on the web. Then Make a new layer over the sky layer and start applying some clouds to the workspace.

Step 44

Next you need to open a new document (Ctrl + N) that is 100 pixels by 100 pixels. Also, make sure it is Transparent. Then using the Rectangle Tool (U), create a plus sign. The color you will use can be black or white

Step 45

Next go to Edit > Define Brush Preset. Set a name for the Brush and save it.

Step 46

Close the plus document and get back to the "sky." Make a new layer, go to the brush settings, and use the settings below.

Step 47

Next you need to make the flower visible again and duplicate it a few times. Also, the duplicated flowers need to be resized.

Step 48

Again, you'll need to duplicate each flower, turn them upside down and place them beneath the original flower. This is because we'll be adding a reflection effect to them. You might already know this effect from the internet, but I'll show it to you again because I find it really great.

Step 49

Now that we have the scene ready we need to make another new folder 1000 pixels by 2000 pixels.

Step 50

Fill the layer with white and go to Filter > Noise > Add Noise and use the settings listed below.

Step 51

Then go to Filter > Blur > Gaussian Blur, set a Radius of 2, and press OK.

Step 52

Select Channel 1 in the Channels Palette and go to Filter > Stylize > Emboss. Enter the settings shown in the image below.

Step 53

Select Channel 2 and apply the Emboss Filter again, but this time use the settings shown below.

Step 54

Press Command + T to transform the image. Then drag the lower corners as far as you think is enough and press Enter.

Step 55

Press Ctrl + A to select the entire image than press Ctrl + Shift + T to apply the same transformation again.

Step 56

Press Ctrl + T again and transform the whole image into a square, as shown below.

Step 57

Go to Channel 1 again and press Q to switch to Quick Mode. Using the Linear Gradient Tool (G), draw a white to black gradient from the top to the bottom.

Step 58

Press Q again to exit the Quick Mask mode and you'll see a selection over your image. Fill the selection with #7f7f7f.

Step 59

Next select Channel 2 and again press Q to enter Quick Mask mode. Then draw another linear gradient, as shown below. Then press Q to exit the Quick Mask mode and fill the selection with the same gray.

Step 60

The image should look like the one below. Save it as a PSD named "water." Then go back to the "flower" document.

Step 61

Merge the "Sky" group. Then copy a piece of the sky and turn it upside down. Also, place it to look like a reflection.

Step 62

Next you need to merge the sky with the flower reflections.

Step 63

Create another layer below the reflection and link it to the "reflection" layer. Then Command-click on the reflection and fill the new layer with the color #003d72.

Step 64

Create a mask for the "reflection" layer. Then using the Linear Gradient Tool (G), draw from white to black, as shown below.

Step 65

Ctrl-click on the reflection to make a selection and go to Filter > Blur > Motion Blur and use the settings below.

Step 66

Press Ctrl + F to repeat the effect.

Step 67

Go to the layer below the reflection and erase some blue that is visible in the horizon using the Eraser Tool (E).

Step 68

It is time to make the water now. Ctrl-click on the "reflection" layer to make a selection.

Step 69

Go to Filter > Distort > Displace and use the settings shown below. When it asks you to chose the displacement map Open the "water" PSD you just saved in Step 60.

Step 70

Again, go to Filter > Distort > Displace and this time use different settings and the same Displacement Map.

Step 71

Next, I want you to lower the Opacity of the "blue" layer below the "reflection" layer to 70%.

Step 72

Create a new layer above the "reflection" layer. Then Command-click on the reflection to make a selection. Then using a black to transparent Linear Gradient (G), draw as I did below.

Step 73

Set the layer to Soft Light. That is all!

Conclusion

In the end you can go back to the flowers and maybe change each one a little to make them all look different. Get in with some color effects or whatever you like using. I hope you guys have learned some great things in this tutorial and I am looking forward to see what others do with the techniques shown here.


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. caiman October 2nd

    there are many steps^^
    but the outcome is good
    lokks a bit like the flowers are made of paper


  2. Mark October 2nd

    wow


  3. Staxx October 2nd

    this is absolutely stunning!!


  4. BEERDRIN0R October 2nd

    wow nice tut !

    But i donno what that flowers are…

    All in all im tha first :D


  5. fcuk October 2nd

    The water is just awesome!
    Thanks


  6. Constantin Potorac October 2nd

    Ouch… now I see how big it is :))


  7. Steffen October 2nd

    You are killing my Feedreader! 73 Images :S


  8. Qbrushes October 2nd

    73 steps!! PSDtuts needs a new revolutionary method for displaying large tutorials like this!


  9. Sean Hodge October 2nd

    Good points about the length. Possibly, when tuts get this long we should start to condense explanations and steps together. Also, we have a new style guide out http://psdtuts.s3.amazonaws.com/PSDTUTS_Styleguide.zip which indicates removing unnecessary space, especially white space from images, which would help with load times on a tut like this. We’re certainly working on this and appreciate the comments. Thx.


  10. loswl October 2nd

    Excellent TUT!!….Many steps, but the overall outcome is awesome!!……there is a lot of techniques in this tutorial that can be implemented in other projects, thanks :o)


  11. BroOf October 2nd

    HUUUUGE Tutorial! The water looks incredible :D! Thanks


  12. Kim Dolleris October 2nd

    Great tips! Thanks for sharing!! :D


  13. pica October 2nd

    wow…this is just awesome
    looks just amazing


  14. geir October 2nd

    that looks real good, the water look so real!


  15. Anthony October 2nd

    WOW, I LOVE the final outcome!


  16. Pallas114 October 2nd

    Wow! The water is amazing! :)


  17. Lawrence77 October 2nd

    This huge tutorial takes 10 minutes in my broadband connection with the CHROME browser…. :D :D
    Anyway several techniques are learned…

    :D LAWRENCE :D


  18. Amanda October 2nd

    Beautiful. Very Super Mario-esque =)!


  19. Nate October 2nd

    Awesome job. I love the ending result.


  20. Burticus October 2nd

    Hey that’s a cool technique for making water! Love it! Don’t know if I’m going to need the lotus graphic but the technique is definitely sweet.


  21. Yuukan October 2nd

    Amazing tut ! Thanks for writing it ;)


  22. Dan October 2nd

    This tutorial is well served by the water alone. Amazing.


  23. Lawrence77 October 2nd

    the water are somewhat best? :P

    :D LAWRENCE :D


  24. Geoff October 2nd

    Ya, the images are just WAY too large…

    Maybe we need a tut on using Crop and Image size


  25. Petr October 2nd

    Wow… Considering the 73 steps, one would say it must take long to read… Really surprised this one to be the most easy-to-read I have come across by now…


  26. quan vu October 2nd

    I like the water effect!!


  27. Geoff October 2nd

    Steps 24-41 should have been omitted and summed up as: “Repeat to your liking for the remaining petals.”


  28. daniel October 2nd

    very job there and cool techniques used. The final outcome is great too.
    Thanks for sharing ;)


  29. SnakeJake October 2nd

    I don’t care much for the design itself, but all the techniques displayed here are awesome and I will definitely use some of them.

    Thanks for a great tutorial.


  30. Moksha October 2nd

    we should not complain about too many steps, the author also need to give so much time to make it for us, and here we are ready to complain there are many step, yes they are many steps but you learn also more, i might have never done it or thought of it or even dream of it, but thanks to PSDTUT i can now make it.

    many thanks


  31. alberto October 2nd

    quality tutorial enough said :)


  32. eric October 2nd

    Nice


  33. Arda October 2nd

    Good tut.


  34. fesh October 2nd

    I like the the way how the water effect was created


  35. insic October 2nd

    wow awesome result.


  36. Dainis Graveris October 2nd

    Damn, that’s great!!! !Reallly master level tutorial!!


  37. reyhan October 2nd

    nice


  38. Merb October 2nd

    Increíble!!!! gracias!


  39. Shane October 2nd

    Amazing stuff :o

    Thanks.


  40. kumar October 2nd

    water and sky are amazing, flowers on the other hand need work!:P


  41. Justin October 2nd

    Fantastic tutorial. Now I just need to find the time to actually follow all the steps!


  42. Lawrence77 October 2nd

    Constantin Potorac how genius and creative you are? :o


  43. Alex Beltechi October 2nd

    Great stuff, Constantin. A credit to the water techinque would have been nice.
    http://photoshopcontest.com/tutorials/26/displacement-water.html


  44. wrap October 3rd

    Btw, I credit the people who first thought of the idea that writing my thoughts is a great thing. Probably the Ancient Egyptians or the Ancient Chinese. They truly deserve that credit yet I dont see any of you credit them.


  45. RUGRLN October 3rd

    Fantastic, though it takes a few years to load…hehe…:p
    But the water is amazing, I’ve known that technique for water for awhile now but no one has explained so well, the original one wasn’t explained too well, but your is fab!

    Great job dude!


  46. Andrew October 3rd

    …a pleasant result indeed…

    …i would add a nice horizon to it i think, mountain range perhaps or a very distant coastline to give more depth, hen clouds could go further back up the sky as opposed to on the water surface…

    …then i would add a speedboat with me on my waterski!!

    …and then a few man eating sharks swimming around to add a disturbing twist to fulfill my sick humor…

    …and then…

    …no i’ll stop there!!

    : 0


  47. Conrad Gorny October 3rd

    Wow thats massive. Well done.

    Conrad Gorny
    Freelance Graphic Designer
    http://www.conradgorny.com


  48. Rijalul Fikri October 3rd

    Wow, absolutely stunning tutorial. The water is awesome, will have to try this.


  49. thousand October 3rd

    Really Cool Tut!…

    just got lost like too times je.. But I like it so much!..

    My water didn’t came out so cool.. But it came out fine.. JUs need some practice..

    TNX!! =D


  50. Roshan October 4th

    Great work with this one. what could I say except this is one of the best tutorial I have gone through so far. Well explained and step by step guide.

    Thanks you for sharing knowledge.

    Roshan
    Freelance Developer
    http://www.instantshift.com


  51. Mac Tyler October 6th

    Eeek water from
    http://photoshopcontest.com/tutorials/26/displacement-water.html
    Flower from:
    http://www.versionsapp.com


  52. dave October 7th

    very nice


  53. StinkyButKinky October 8th

    I agree with Roshan, i think what makes tut good is pretty much about the way steps are detailed and explained. Good job, thank you :P


  54. design October 8th

    @ Mac Tyler
    Eesh. Those 2 links should have been included in this tutorial as citations/acknowledgments.

    Also, the flowers aren’t reflecting correctly. Perspective is wrong (flowers are all tilting forward, not at all matching the perspective of the plane they are on) , reflections are wrong (the reflection would be the underbelly of the flower, not a duplicate of the top), plus a lack of drop shadowing on the water makes them appear to be floating, barely touching the water at 1 or 2 points (namely left and right leaves).


  55. Ariful Alam Khan October 9th

    I liked how u made the water. Thanks for sharing.


  56. Duo October 10th

    Nice technics, really good outcome. The only thing that bothers me are the reflections o lotus. These flowers have a little perspective itselves, so the reflection cannot look the same as flower. The reflections should be made only from flower’s bottom, not whole thing.


  57. Prima November 11th

    nice water effect


  58. Otaku-mad November 18th

    Very beautiful and interessant tutorial :)


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name January 8th

Arrow