How To Create Floral Theme Typography Using Photoshop and Illustrator

Author: | Posted in Photoshop 12 Comments

Few weeks ago I stumbled on a very beautiful typography poster from Olariu Alex. This tutorial is highly inspired from that poster and we will also add some flowers and butterflies into the text. To get the best quality, we combine vector from Illustrator with pixel editing in Photoshop.

Preview

Before moving on, take a look at the final image we’re going to create. Click here or click on the image to see it in full screen.

tutorial-photoshop-illustrator-colorful-floral-typography

Source Needed

These are the resources used in this tutorial:

Step 1: Background

Open Photoshop. Create new file (File > New) with size 1280×1024 px, resolution 72 dpi, Mode: RGB.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 2

Activate gradient tool. Click preview box in option bar to open gradient editor dialog. Create gradient from #ffbc58 to #f95b1e.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 4

Create radial gradient from center to outside.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 5

Download vintage grunge textures and paste it on top of the image. Resize it until we find nice texturing.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 6

Change texture blend mode to Multiply with 20% opacity.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 7: Main Text

Add text on top of the image. Here, I use yellow color.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 8

Add this layer styles.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 9: Floral Shapes

Download Vector Floral Ornaments and open it in Illustrator. Select one of the vector shape. Hit ctrl+C to copy it to clipboard.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 10

Back to Photoshop. Hit ctrl+V for paste. Make sure you choose Smart Object. This way, pasted object will remain an illustrator file, so you’ll be able to resize it without degrading its quality. Rotate and resize the vector shape until you find it interesting.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 11

Now, we need to change its color to math overall color tone. From the Layers panel double click its layer thumbnail. You’ll probably get a dialog box like seen below, just click OK.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 12

The Shape wil be opened in Illustrator. Select it and change its color from Color Panel. After you finish edit the color hit ctrl+S to save it and ctrl+W to close it. Let’s go back to Photoshop and you’ll find the shape is also changing.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 13

Hold alt and move cursor on line between shape and text layers. The cursor will change into two overlapping center, click now to convert shape into clipping mask. The vector shape will goes inside the text.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 14

Repeat the process for other vector shape. Once you’re done, select the shape layers and the text then hit ctrl+G to put them into separate group. Name the group text.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 15: Add Subtle Floral Image in Background

Hold shift then click on thumbnail layer of shapes we have created earlier. This step will create selection based on the shape’s size.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 16

Create new layer underneath the text. Click Edit > Fill, use White then click OK.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 17

Remove selection by pressing ctrl+D. Click Filter > Blur > Gaussian Blur.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 18

Change layers opacity to 20%.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 19: Decorating Text

Back to Illustrator, open Vector Flourish Design and hit ctrl+A to select all shapes. From color panel change its fill color to white.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 20

All the shapes’s color is now white. Because the background is also white its very hard to see them. Click View > Preview to see shapes outline.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 21

Shape one of the shape. Press ctrl+C.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 22

Return to Photoshop, hit ctrl+V to paste the shape. Place it on top of the text. Add layer styles Drop Shadow.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 23

Repeat this process with other shapes.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 24: Add Depth to Text Decoration

Select all shapes and press ctrl+G to put them in one group. Duplicate the group by dragging it to New Layer icon.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 25

Hit ctrl+E to convert duplicated group into a layer. Double click layer to open layer styles dialog box. Select Layer Mask Hides Effect and add bigger drop shadow.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 26

Select text by ctrl+clicking its layer thumbnail. Hit ctrl+shift+I to invert selection. Make sure the floral layer is still selected and click Add Layer Mask icon. Change fill layer to 0%.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 27

Now, floral shape out side the text will have bigger and darker shadow. This gives impression as if they are higher from the background.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 28: Adding Real Flower

Open Yellow Flower in Photoshop. Use Quick Selection to select the flower. It’s very amazing how this tool works! All you need is just dragging inside the flower and they will automatically selected.

If you use earlier version of Photoshop, you may not have this tool. Use the magic wand to get similar result.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 29

Click Select > Modify > Contract. Use 2 pixel then click OK.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 30

Copy flower and paste it on our image. Right click flower layer and choose Convert to Smart Object. By changing the flower layerto smart object we will retain all its pixel information.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 31

Hit ctrl+T and change flower’s size.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 32

Add drop shadow to give the flower realistic look.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 33

Hold alt and drag flower to duplicate it. Again change its size.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 34

Open another flower, select it, and paste it in Photoshop.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 35: Add Dry Leaves

Download Autumn Leaves 1 and open it in Photoshop. This file is already cutted. All we need to do is just make rough selection around it, cpy, and paste it in Photoshop.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 36

Resize and put it on the text.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 37

Keep doing this to another dry leaves.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 38: Adding Butterflies

Open Butterfly in Photoshop. All the butterfly has already cutted. Just like we did with earlier dry leaves, select and paste them on Photoshop. Don’t forget to add drop shadow.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 39: Add Subtle Floral Shape in Background

Paste floral ornament we have opened earlier. Put it behind the text.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 40

Change fill layer to 0%. Add Bevel and Emboss.

tutorial-photoshop-illustrator-colorful-floral-typography

tutorial-photoshop-illustrator-colorful-floral-typography

Step 41

Add another floral ornament on the background. Don’t overdo this, keep them subtle. Otherwise the design will be too crowded and remove the focus from main text.

tutorial-photoshop-illustrator-colorful-floral-typography

Step 42

I feel that there’s too much empty space in this design. To remove it we’l use crop tool. Open crop tool and drag around the text. I’m using Photoshop CS5 here and you can see that the crop box is divided into 9 grids that help us see the final image proportion. Once you have find the right size hit ctrl+Enter to start cropping.

tutorial-photoshop-illustrator-colorful-floral-typography

Conclusion

Finally, we are done! I hope you like this tutorial and learn something here. Click here or click on the image below to see it in full size.

tutorial-photoshop-illustrator-colorful-floral-typography

Download Final PSD Tutorial

Comments
  1. Posted by Hermitbiker
  2. Posted by Jorge
  3. Posted by CSSReX
  4. Posted by scriptedSheep
  5. Posted by W3Mag
  6. Posted by Chris
  7. Posted by ilham
  8. Posted by deden
  9. Posted by ndrew
  10. Posted by Yvonne
  11. Posted by Addies
  12. Posted by nonStopCars

Add Your Comment

generic viagra us, viagra for fun, http://www.tutoriallounge.com/how-to-buy-viagra/, where can i buy viagra over the counter, http://www.tutoriallounge.com/premature-ejaculation-viagra/