avenger text effect

Upload: jefry-ansyah

Post on 05-Apr-2018

234 views

Category:

Documents


0 download

TRANSCRIPT

  • 7/31/2019 Avenger Text Effect

    1/53

    Avenger Text Effect

    Step 1: Getting The FontLets start with working on its characters. Our first option is using a free font

    type. After searching in google using keyword "free fonts Avengers", I

    found two fonts with Avengers theme,The AvengersandThe Mighty Avengers. Both

    are made byOwen Dawson. Unfortunately, both are not good enough for our

    project.

    First font has no K and O. We need these two characters in "Hongkiat".Also, we cannot use its A character because it is not suitable if used

    between letters, such as in "Hongkiat".

    http://www.ffonts.net/The-Avengers.fonthttp://www.ffonts.net/The-Avengers.fonthttp://www.dafont.com/the-mighty-avengers.fonthttp://www.dafont.com/the-mighty-avengers.fonthttp://www.dafont.com/the-mighty-avengers.fonthttp://www.windowstipsclub.com/http://www.windowstipsclub.com/http://www.windowstipsclub.com/http://www.ffonts.net/The-Avengers.fonthttp://www.windowstipsclub.com/http://www.dafont.com/the-mighty-avengers.fonthttp://www.ffonts.net/The-Avengers.font
  • 7/31/2019 Avenger Text Effect

    2/53

    Second font seems to be based from The Avengers original comic. It has

    round edges instead of sharp edges. This font style is different from its

    movie poster.

    So, our best option is to draw the characters manually. We are not going to

    use these fonts but they will be useful for our reference while creating the

    characters.

    Step 2: Reference

    You should start googling for The Avengers. This is what I use for our

    reference. Save the image file, create new file in Adobe Illustrator, then

    paste the file. Click Object > Lock > Selection to lock image and prevent it

    from being edited accidentally.

    http://www.dafont.com/the-mighty-avengers.font
  • 7/31/2019 Avenger Text Effect

    3/53

    Step 3: Making Characters

    In current "AVENGERS" text, we can find N and G which is used in

    "HONGKIAT". Make new layer, then use pen tool to trace character N and

    G.

  • 7/31/2019 Avenger Text Effect

    4/53

    Step 4

    For other characters (H, O, K, I, A, and T), we will base it from other

    available characters. For I, we use the available N character and removehalf of it.

    For O, we modify E by closing it and add hole on its center.

  • 7/31/2019 Avenger Text Effect

    5/53

    For K, we can simply modify R by cutting its upper part.

    We also use R as base character for A.

    For T, we use A character that we have created earlier.

  • 7/31/2019 Avenger Text Effect

    6/53

    Step 5

    Place all these character into its position. Currently, we have "ONGKIAT".

    Step 6: Draw First Character "H"Just as in the reference image, first character is very tall compared to the

    others. For the H, we can use reference from preview fontThe Avengers.

    http://www.ffonts.net/The-Avengers.fonthttp://www.ffonts.net/The-Avengers.fonthttp://www.ffonts.net/The-Avengers.fonthttp://www.ffonts.net/The-Avengers.font
  • 7/31/2019 Avenger Text Effect

    7/53

    Step 7Draw two circles from same origin. Select both circles, open Pathfinder

    panel and select Subtract to create a ring shape.

  • 7/31/2019 Avenger Text Effect

    8/53

    Step 8

    Place ring shape on top of H and O character. Note: To help us see better,

    I will remove unused paths from sight.

  • 7/31/2019 Avenger Text Effect

    9/53

    Step 9

    Select "Ho" characters, click Object > Path > Offset Path.

  • 7/31/2019 Avenger Text Effect

    10/53

    Step 10Right click H and select Ungroup to separate Offset Path from its main

    path. Repeat this process to O.

  • 7/31/2019 Avenger Text Effect

    11/53

    Step 11

    Place big H on top of ring shape by clicking Object > Arrange > Bring to

    Front. Select big H and ring shape, then select Subtract on Pathfinder

    panel.

  • 7/31/2019 Avenger Text Effect

    12/53

    This is the result.

  • 7/31/2019 Avenger Text Effect

    13/53

  • 7/31/2019 Avenger Text Effect

    14/53

    Step 12

    Right click ring shape and select Ungroup.

  • 7/31/2019 Avenger Text Effect

    15/53

    Step 13

    Place big O on top of ring shape by clicking Object > Arrange > Bring to

    Front. Select big O and the ring shape underneath it. From the Pathfinder

    panel select Subtract.

  • 7/31/2019 Avenger Text Effect

    16/53

  • 7/31/2019 Avenger Text Effect

    17/53

    Step 14

    Delete remaining parts of the ring that are unused.

  • 7/31/2019 Avenger Text Effect

    18/53

  • 7/31/2019 Avenger Text Effect

    19/53

    Step 15

    This the complete preview on our current path.

    Step 16

    Draw two rectangles, then rotate them 45 and45. Position both shapes

    until we get an arrow shape.

  • 7/31/2019 Avenger Text Effect

    20/53

    Step 17

    Select both shapes and select Unite from Pathfinder panels.

  • 7/31/2019 Avenger Text Effect

    21/53

    Step 18

    Place arrow on top of H character. See picture below for its placement.

    Select both shapes and select Subtract.

  • 7/31/2019 Avenger Text Effect

    22/53

    Now, we have an arrow hidden inside the H character. This text is now

    ready to be used.

    Step 19: Start Working In Photoshop

  • 7/31/2019 Avenger Text Effect

    23/53

    Open Photoshop. Make a new file with size: 2000 px 900 px. Fill

    background with color: #070707.

    Step 20: Importing Character PathReturn to Illustrator. Select all character paths and then hit Ctrl + C to copy

    it into clipboard.

  • 7/31/2019 Avenger Text Effect

    24/53

    Step 21In Photoshop, hit Ctrl + V. Paste text as path.

    Text from Illustrator is placed as a new path. You can find it on Paths

    panel.

  • 7/31/2019 Avenger Text Effect

    25/53

    Step 22

    Select path inside O and A. In option bar, set its mode to Subtract. This

    mode will make both paths create holes inside their main path.

    Step 23: Convert Path To Shape

  • 7/31/2019 Avenger Text Effect

    26/53

    Click black and white circle in Layers panel. Select Solid Color, set its color

    to #070c12. Now, we have new shape based on the imported paths.

    Double click layer to open Layer Style dialog box. Add Bevel and Emboss.

    Select Technique: Chisel Hard to get hard edges.

  • 7/31/2019 Avenger Text Effect

    27/53

    This is our current result.

  • 7/31/2019 Avenger Text Effect

    28/53

    Step 24

    Add concrete texture and place it on top of the text. Set its blend mode to

    Screen and reduce its Opacity to 47%.

    Step 25Add layer mask. Draw linear gradient from white to black.

  • 7/31/2019 Avenger Text Effect

    29/53

    Step 26Hit Ctrl + Alt + G to convert texture into Clipping Mask. The texture now

    goes inside the text.

  • 7/31/2019 Avenger Text Effect

    30/53

    Step 27

    The texture is currently faded in lower part of the text. Lets reveal some of

    them there by painting that area with white using brush with Opacity 30%.

    Below, you can see layer mask after painting those areas.

    This is the result. You can see that now theres a subtle texture on lower

    part of the text.

  • 7/31/2019 Avenger Text Effect

    31/53

    Step 28: Add Embossed Stroke Effect OnText

    Duplicate text and paste it behind the original text layer. Add Layer Style:

    Stroke.

  • 7/31/2019 Avenger Text Effect

    32/53

    Below, you can see that the result is just a flat color stroke line.

  • 7/31/2019 Avenger Text Effect

    33/53

    Step 29

    Lets add Bevel and Emboss and set its Style to Stroke Emboss. This way,

    the effect is also applied to the Stroke we have just added.

    Now, the stroke has Emboss appearance.

  • 7/31/2019 Avenger Text Effect

    34/53

    Step 30Add Outer Glow to add subtle shadow behind each character. Currently,

    we will not be able to see its effect because the background is still too dark.

  • 7/31/2019 Avenger Text Effect

    35/53

    Step 31Create new layer above text with stroke effect. Press Ctrl and click on text

    layer. Click Select > Modify > Expand. Set Expand by 3 pixels. Notice that

    we expanded selection for 3 pixel so it matches the stroke size.

  • 7/31/2019 Avenger Text Effect

    36/53

    Fill selection with a linear gradient from white to black to white.

    Set its blend mode to Overlay. Reduce Opacity to 30%.

  • 7/31/2019 Avenger Text Effect

    37/53

    Step 32: Add Lights On BackgroundCreate new layer under the text. Activate Brush tool and set its Opacity to

    100%. Draw white line behind the text.

    Step 33Reduce brushs Opacity and draw bigger line covering the first line.

  • 7/31/2019 Avenger Text Effect

    38/53

    Step 34

    Paint random light cast on lines edges.

  • 7/31/2019 Avenger Text Effect

    39/53

    Step 35Press Ctrl and click on text layer to create new selection based on textshape. Make new layer and place it on top of main text.

  • 7/31/2019 Avenger Text Effect

    40/53

    Activate Brush tool, set its Opacity to 10%. Paint some whites on middle of

    the text as like the light cast is from behind.

    Below, you can see the result before and after adding light cast.

  • 7/31/2019 Avenger Text Effect

    41/53

  • 7/31/2019 Avenger Text Effect

    42/53

    Select white color, Width: 1 px.

  • 7/31/2019 Avenger Text Effect

    43/53

    Step 37Hit Ctrl + D to remove selection. Apply Gaussian Blur to soften the stroke

    line.

  • 7/31/2019 Avenger Text Effect

    44/53

  • 7/31/2019 Avenger Text Effect

    45/53

    Step 38

    Erase some of the stroke lines. These lines become highlight on the text

    shape.

    Step 39

    Draw another stroke line again on new layer. Erase some of it to act as

    sharper highlight.

  • 7/31/2019 Avenger Text Effect

    46/53

    Step 40Make new layer and fill it with linear gradient, white to black. Press Ctrl and

    click on text layer.

  • 7/31/2019 Avenger Text Effect

    47/53

    Step 41

    Add layer mask by clicking Add Layer Mask icon on Layers panel. Set

    blend mode to Overlay and reduce its Opacity to 55%.

    Step 42: Adding ColorAgain, press Ctrl and click on text layer.

  • 7/31/2019 Avenger Text Effect

    48/53

    Add Adjustment layer Hue/Saturation. Use setting below and make sure to

    activate Colorize option.

  • 7/31/2019 Avenger Text Effect

    49/53

    Heres the result on the text.

    Step 43: Increase Text ContrastMake new layer. Press Ctrl and click on text layer then fill selection with

    radial gradient from black to white.

  • 7/31/2019 Avenger Text Effect

    50/53

    Set blend mode to Overlay then reduce its Opacity to 40%.

  • 7/31/2019 Avenger Text Effect

    51/53

    Step 44: Adding Subtitle

    Draw a thin rectangle on top of the text with color: #3b568. Add Layer

    Mask, then paint both ends with black. Add subtitle above the rectangle.

  • 7/31/2019 Avenger Text Effect

    52/53

    Final ResultWere done! Below is the result of our tutorial. Click on the image to see it

    in full size. I hope you enjoy this tutorial and learned some new techniques.

    If you have any questions, feel free to ask.

  • 7/31/2019 Avenger Text Effect

    53/53

    http://www.hongkiat.com/blog/avenger-text-effect/final.jpg