PSDRockstar.com

Add to Technorati Favorites  Delicious

Write for PSDRockstar.com

Posted by Joe on Tuesday, August 4th, 2009

Are you a photoshop guru? Writing tutorials can be quite a challenge, and PSDRockstar.com is always on the lookout for talented photoshoppers

continue reading

Download 30 sets of free Social Bookmarking Icons

Posted by Joe on Monday, December 15th, 2008

This free icon sets collection contains all most all popular social media icons like del.icio.us, Digg, Mixx, DesignBump, StumbleUpon, Reddit, Developer Zone, DesignFloat, Technorati, Twitter and RSS feed. The icons which you see below are some real creative and most beautiful, ranging from web 2.0 to hand drawn designs. Although initially intended to be used […]

continue reading



}

Create Typographic Art using Illustrator and Photoshop

Posted by Jeprie on Saturday, February 27th, 2010

 

Materials Needed:

Final Image Preview

This image is inspired from the cover of LAYOUT, dasar & penerapannya, a graphic design book by Surianto Rustan published by Gramedia in Indonesia. Before starting this tutorial, see the result below. Click here to see the image at a higher resolution. The Illustrator and Photoshop files can be found at the bottom of this post. You can also see more of work at my website DesainDigital.com

Typographic Art

Step 1: Creating Word in Illustrator

Open up your Illustrator. Create new document (File|New) with Document Profile: Print, size: A4.

Create word LAYOUT using tool type.

Typographic Art

Step 2

Select the word. Click Object|Expand. Click OK.

Click Object|Compoundd Path|Release.

Typographic Art

Step 3

With tool select arrange every character until align nicely.

Typographic Art
Typographic Art

With the direct selection tool, move some points within the U to give it more room.

Typographic Art

Here’s what i come up with.

Typographic Art

Step 4

Select all the characters. Then from the toolbox, click the switch icon to switch the fill and stroke color.

Typographic Art

 

Step 5

Above the L character create a box.

Typographic Art

To make sure it aligns perfectly with the L, click Edit|preferences. Make sure you select Snap to Point. This small step will save you lots of time when arranging objects.

Typographic Art

Step 6

Create a box behind the Y.

Typographic Art

Another box behind O.

Typographic Art

Another box behind T.

Typographic Art

Step 7: Start Adding Text – L

Activate the type tool. Hover the cursor over the L. You will see a circle around the cursor. Now click to insert some text inside the L shape. I used the famous lorem ipsum text generated from lipsum.

I’m using Helvetica Neue Lt Std here because it’s simply the best font ever and works in every style. For L i use Bold Condensed style. If you dont have this font feel free to use other similar font.

Typographic Art

Step 8

Double click the text to select all. From the paragraph panel select alignment justify.

Click on the small arrow to open the panel menu and select Hypenation. Move slider to Better Spacing.

Typographic Art

Here’s what i have so far.

Typographic Art

Step 9

Paste some more text inside the box above L. Change the style to Light Condensed.

Typographic Art

Step 10: Y

Lets move on to the Y now. This one is much more complex and take more time doing it. Paste some text into the box, not the Y shape. Use style Light Condensed.

Typographic Art
Typographic Art

Select characters inside the Y shape and change its style to bold condensed.

Typographic Art

Repeat this process with all the text found within the outline of the Y.  As I said before this takes lots of time.

Typographic Art
Typographic Art

After the required characters have been changed to bold, you can then click the eye icon in front of the Y shape layer to hide it. Here’s what i have so far.

Typographic Art

Step 11: O

Select the outer circle of O. Resize it until it is taller than its box.

Typographic Art

Step 12

Select the outer circle and box. Open the pathfinder panel and click Exclude. Right click and ungroup.

Typographic Art

Step 13

Select top and bottom path then hit delete.

Typographic Art

Step 14

Add text to each path. Use align justify for right and left path. Use align center for circle path.

Typographic Art

Step 15: U

Select the U shape. Using tool move rotate it 90 degrees.

Typographic Art

Step 16

add another load of text. Use style bold condensed.

Typographic Art

Step 17

Using the rotate tool, rotate the U shape back to its previous place.

Typographic Art

Step 18:T

Add text to T shape.

Typographic Art

Step 19

Open the panel character. Double text leading size, in my case from 7,2 to 14.

Typographic Art

Step 20

Add text to the box behind the T shape. Use the same text leading like in the previous step.

Typographic Art

Step 21

Insert minus leading. Remember step 19? I have text leading 7, so in my case i use -7.

Typographic Art

And we’ll have both text overlapping and create a T shape.

Typographic Art

Step 23: A

We haven’t worked on A. With the pen, create a shape covering half the A.

Typographic Art

Step 24

Insert some text.

Typographic Art

Step 25

Using the move tool, rotate the shape until it perfectly aligns horizontally.

Typographic Art

Step 26

Using the rotate tool, rotate the shape back to its previous place.

Typographic Art

Step 27

Do the same to the other half.

Typographic Art

Step 28

Don’t forget to add text to the bridge. After this you can hide A shape.

Typographic Art

Finally this is what i have.

Typographic Art

Step 29: Export to PDF

Now, we need to import this into Photoshop. First, we need to save it to a format that can preserve its vector quality. I recommend PDF for this.

Click File|Save As. Choose format file PDF. In PDF setting use Press Quality. This setting is used for commercial printing and saves all the details relating to the composition of the image.

Typographic Art

Step 30: Import to Photoshop

In Photoshop click File|Open. Choose the PDF file we just created. Use resolution 300 pixel per inch or 300 ppi.

Typographic Art

Why we use resolution 300 ppi?

Press Quality setting creates a 300 ppi PDF. So, using resolution 300 ppi, the file is imported at full size, without losing any pixel resolution. This means we still have every detail created from within Illustrator. The picture below shows the imported picture in 100%, white background. As you can see, the text still very sharp.

Typographic Art

Step 31

PDF will be imported as a transparent picture.

Typographic Art

Step 32: Start Editing in Photoshop

Hit ctrl+A, ctrl+C. Create new file with size A4 with a resolution of 300 ppi. Hit ctrl+V to paste our text here.

Hit ctrl+I to invert text color to white. Click Layer|Convert to Smart Object. Hit ctrl+T. Rotate text.

Typographic Art

Step 33

Create new layer under text. Add a radial gradient from black to white.

Typographic Art

Step 34

Download grunge textures from deviantart. Paste it behind text.

Typographic Art

Use blending mode Multiply with 65% opacity.

Typographic Art

Step 35:

Return to our text layer. Click Layer|Layer Style|Drop Shadow. Use setting below.

Typographic Art

Use this setting for the Outer Glow.

Typographic Art

Conclusion

Yeah, we’re done!. As you can see, all techniques used here is just simple. You can learn it from a basic book on design and typography. What you really need here is just patience and lots of free time. Please share your opinions on the comment form. You can see the final image below or from this link.

Typographic Art
Typographic Art
You can download a zip of the psd and ai files here

Posted in: Text Effects.

Tags: , , , , , ,

26 Responses to “Create Typographic Art using Illustrator and Photoshop”

  1. Matthew Heidenreich Says:

    easy to follow with good results, thanks for this.

  2. jeprie Says:

    @Matthew: Thank you. Glad to hear you like it.

  3. Tutorial Typographic Art di PSDRockstar | DesainDigital Says:

    […] baru saja menulis tutorial tipografi menggunakan Illustrator dan Photoshop untuk situs PSDRockstar. Silakan berkunjung ke sini untuk […]

  4. Nabushar Says:

    Thank you very much for this tutorial
    Please dont stop

  5. jeprie Says:

    You’re welcome.

  6. Tutorial Creating Typographic Art in PSDRockstar | DesainDigital Says:

    […] post is also available in: IndonesianI just wrote a tutorial on typograhy uusing Illustrator and Photoshop for PSDRockstar. Please make a visit here to see full […]

  7. Roei CPO Says:

    Wow! :))) real nice one, thanks!

  8. Roei CPO Says:

    WOW ! great great one, real thanks!

  9. Article Directory Says:

    I agree a very well written and put together tutorial

  10. Jon Says:

    Hey, great tutorial. I have one question though. I’m trying to make it look rather simple, like the U but without the words turned sideways. My issue is that when I get to letters like D, I can’t make it not type in the middle of the letter, where the hole is. Is there a way to mark that as a no type zone or something? Thanks!

  11. Jeprie Says:

    Hi Jon:

    @Step 10: Don’t rotate U to keep the words from sideways.
    You can’t type inside D? That’s weird. I’ll try to find out why. I’ll put another comment here when I found the answer.

  12. Jon Says:

    Sorry, I know my text was a bit confusing.

    My issue is that I can type inside the D, but it also types inside the hole in the middle. Same with O, R, A, so on. Know what I mean?

  13. Jeprie Says:

    Hi Jon,

    To create text in O:
    1. Expand O.
    2. Type text inside O.
    3. Copy hole shape inside O, paste it in front O.
    4. Select the hole and O, click Object > Text Wrap > Make.

    You can learn more on text wrap here:
    http://www.blog.spoongraphics.co.uk/tutorials/wrapping-text-around-an-image-in-illustrator

    I have made a text in O shape and I’ll put them in my dropbox public folder for you to download. I’ll erase them in two days.

    http://dl.dropbox.com/u/7116487/illustrator-psdrockstar/text%20in%20hole.jpg
    http://dl.dropbox.com/u/7116487/illustrator-psdrockstar/text%20in%20hole.ai

  14. Jon Says:

    Essentially, it’s treating the two parts of the D, the inner and the outer lines, as two separate paths that are not related to each other.

    Pic: http://img263.imageshack.us/img263/2328/78466477.jpg

  15. 22 tutorial da non perdere, Giugno 2010 « FMdesignlab – Blog su Grafica e Web Design | Tutorial photoshop | ispirazioni creative | Risorse gratis Says:

    […] 2. Creare un testo con all’ interno del testo […]

  16. jin Says:

    awesome!! ive been looking for this. Great tutorial 😀 Thanx.

  17. WebCreationUK Says:

    Really well written, thanks for sharing!

  18. Niharika Says:

    great tutorial………very detailed

  19. unique FONT Says:

    awesome tutorial!
    thank you for sharing.
    really much appreciated.

  20. MyBB Says:

    thanks for sharing!

  21. 22 tutorial da non perdere, Giugno 2010 « FMdesignblog | Web design, Grafica e Web marketing Says:

    […] 2. Creare un testo con all’ interno del testo […]

  22. Mogomotsi Says:

    Hey Jon i tried the D using the same way as the O u should try it i want to attach the way i did it but i don’t know how just type the D expand, release the compound path draw the box go to pathfinder extrude and then type on the different parts it will give you a D.Hope it helps.

  23. Logo design Says:

    Great tutorial your posts are helpful and informative as always. Thanks very much.

  24. addy Says:

    very easy to follow, well explained,
    keep posting

  25. r j Says:

    For designers, very informative!

  26. Designrshub Says:

    You have a well-explained tutorial here. :) Keep posting. Thanks.

Leave a Reply