Create a Slime Effect with Brushes

In the following tutorial you will learn how to create a slime text effect using Graphic's tools and effects, particularly the Brush Tool and pressure-sensitive brush strokes using the Apple Pencil. Graphic takes full advantage of the Apple Pencil to draw beautiful pressure-sensitive brush strokes on the iPad Pro.

Step 1

For this tutorial you will need to import the BlackFat font. Download this font and save it inside your Dropbox folder or iCloud Drive. Open Graphic and focus on the Titlebar. Tap the Import button, pick Dropbox or iCloud, locate your font and select it, and then simply tap the Import button.

Now, let's create a new document. First, tap that plus button and then select the Blank canvas style. For this tutorial you'll need a 680 x 500 px document.

Focus on the right side of the Titlebar and tap that Settings icon. In the Canvas panel set the Width to 680 px and the Height to 500 px, select Pixels for the base units, and verify that the Pixel-Align Strokes feature is enabled. When this setting is enabled, stroked objects are offset slightly to ensure that the stroke is drawn aligned to the pixel grid which guarantees a crisp look.

Step 2

Pick the Text Tool and double tap inside that text field to get the Text pane. Select the BlackFat font, increase the font size to 170, set the color to R=119 G=193 B=56 and then add the "Slime" piece of text. Using the Move Tool, drag your piece of text roughly in the center of the canvas. Now, move to the right side of your titlebar and tap the rightmost icon to open the Layers panel. Double tap the name of the existing layer and rename it "green".

Step 3

Keep focusing on the Layers panel and add a second layer using the plus button located at the top, right corner of this panel. Make sure that this new layer stays selected and rename it "outlines".

Pick the Brush Tool and first focus on the larger tool pane. Drag the Width slider to 8, lower the Smoothing to 5% and then tap the other tool pane to open the Brush Settings pane. Set the Roundness to 100%, the Angle to 45 degrees and the Max Width to 0%. Move to the Contour, make sure that both draggable handles are placed in the top corners and then enable the Use Pressure feature. Keep in mind that the Use Pressure feature can only be used on an iPad Pro together with an Apple Pencil. This allows your Apple Pencil to apply pressure values to each drawn brushstroke.

Move to your toolbar and replace the existing stroke color with R=26 G=77 B=0. Focus on the first letter from your text and draw smooth paths along its edges roughly as shown in the following image. Try to vary the pressure on your pencil, use multiple brush strokes in your trace and make sure that you're not leaving parts of that green text on the outer side of your final trace.

Step 4

Move to the rest of the text and use the same brush and techniques mentioned in the previous step.

Step 5

Add some dripping paths over your text roughly as shown in the following image.

Step 6

Return to the Layers panel, add a third layer, drag it to the top of the panel and rename it "gaps". Make sure that it stays selected, pick the Brush Tool and focus on the tool pane. Drag the Width slider to 1, keep the Smoothing set to 5% and then open the Brush Settings pane.

Disable the Use Pressure feature, enter all the attributes shown in the following image and then move to the Saved Brushes pane to save your brush. Focus on the bottom, right corner of this pane and simply tap the Save Brush button which will add your brush to the top of the list.

Now, pick a random red for the stroke color, move to your canvas and simply draw a bunch of paths around the white areas left inside your tracings. Don't bother to close these paths or to make them perfect. Just make sure that the start and end points lie above your green piece of text and that the paths don't go over the edge of those traces.

Step 7

Move to the Layers panel, and enable 'Select Multiple Layers' using the button at the bottom of the pane. This will allow you to select more than one layer at a time. Select the "gaps" and the "green" layers and return to the bottom side of your Layers panel. Tap that cogwheel icon and go to Merge Layers.

Step 8

Keep focusing on the Layers panel, open your "green" layer, select that piece of text and then close the panel. Focus on the right side of your titlebar and tap the middle icon. Go to the Path panel and simply tap the Convert Text to Outlines. Make sure that the resulting shapes remain selected and move to the Combine panel. First, tap the Union command and then tap the Make Compound Path command.

Step 9

Using the Move Tool, select all the shapes that are part of your "green" layer and go to the Combine panel. Again, start with the Union command and then tap the Make Compound Path command. In the end there should be only this compound path inside your "green" layer.

Step 10

Make sure that your green compound path stays selected, focus on the right side of your titlebar and tap the leftmost icon.

Move to the Effects panel and tap the existing Stroke. Drag the Width slider to 5 pt, set the Position to Inside, check the Round Cap and the Round Join buttons and then tap the stroke color to open the color panel. Make sure that the color is set to black (R=0 G=0 B=0) and drag the Alpha slider to 15%.

Return to the Effects pane and tap the cogwheel icon next to the stroke effect. Go to Blend Mode, select the Soft Light blend mode and then tap the Done button. The blend mode for an effect can always be seen at the bottom, left corner of the Effects pane.

Step 11

Make sure that your green compound path is still selected, focus on the Effects panel, tap the cogwheel icon associated with the existing stroke and simply go to Duplicate. Select the newly added Stroke (the bottom one) and decrease its Width to 3 pt.

Step 12

Make sure that your green compound path is still selected, remain focused on the Effects panel and duplicate the bottom Stroke. Select the newly added Stroke, decrease its Width to 2 pt and change the Blend Mode to Normal and then open its color panel. Replace the existing color with R=39 G=255 B=1 and drag the Alpha slider to 40%.

Step 13

Make sure that your green compound path is still selected, remain focused on the Effects panel and add a new Stroke using the plus button from the bottom, right corner of the pane. Select this newly added Stroke, make sure that it lies below the existing strokes and then add the attributes shown in the following image.

Step 14

Make sure that your green compound path is still selected, remain focused on the Effects panel and check that little box that stands for your Drop Shadow to activate it. Change the Blend Mode to Soft Light, enter 0 pt in the X box and 3 pt in the Y box, drag the Size slider to 0 pt and then open its color panel. Replace the existing color with R=25 G=76 B=0 and drag the Alpha slider to 50%.

Step 15

Make sure that your green compound path is still selected, remain focused on the Effects panel and add a second Drop Shadow using that same plus button located in the bottom, right corner of your panel. Select this new Drop Shadow, drag it below the existing effect and simply enter the attributes shown in the following image.

Step 16

Make sure that your green compound path is still selected, remain focused on the Effects panel and add a third Drop Shadow. Select this new Drop Shadow, drag it below the other two effects and simply enter the attributes shown in the following image.

Step 17

Make sure that your green compound path is still selected, remain focused on the Effects panel and activate the existing Inner Glow effect. Drag it above the existing Drop Shadow effects and then enter the attributes shown in the following image.

Step 18

Focus on the Layers panel, add a new layer and name it "white". Drag it to the top of the panel and make sure that it stays selected.

Pick the Brush Tool, drag the Width slider to 2, keep the Smoothing at 5% and then open the Saved Brushes pane. Select the top, default brush, set the stroke color to white and then draw several, subtle paths above the dripping section from your text roughly as shown in the following image.

Step 19

Move to the Layers panel, make sure that your "white" layer is selected, focus on the bottom side of the panel and then simply change the Blend Mode to Overlay and drag the Alpha slider to 50%.

Step 20

Return to the Layers panel, add a new layer and name it "black". Drag it to the top of the panel and make sure that it stays selected.

Pick the Brush Tool and make sure that the brush used in the previous step is still active. Set the stroke color to black and then draw several, subtle paths below the dripping section from your text roughly as shown in the following image.

Step 21

Move to the Layers panel, make sure that your "black" layer is still selected, focus on the bottom side of the panel and then simply change its Blend Mode to Soft Light.

Step 22

Focus on the Layers panel, add a new layer and name it "dots 3". Drag it to the top of the panel and make sure that it stays selected.

Pick the Brush Tool, drag the Width slider to 3, keep the Smoothing at 5% and then open the Saved Brushes pane. Select the brush that you saved in the beginning of the tutorial, set the stroke color to white and then simply tap on your canvas to easily add a 3 px wide dot. Use this technique to add a bunch of similar dots and spread them roughly as shown in the following image.

Step 23

Move to the Layers panel, make sure that your "dots 3" layer is still selected change its Blend Mode to Overlay and drag the Alpha slider to 30%.

Step 24

Focus on the Layers panel, add a new layer and name it "dots 2". Drag it to the top of the panel and make sure that it stays selected.

Pick the Brush Tool and decrease the Width slider to 2 pt. Move to your canvas and add a bunch of 2 px dots near those 3 px dots roughly as shown in the following image.

Step 25

Move to the Layers panel, make sure that your "dots 2" layer is still selected change its Blend Mode to Overlay and drag the Alpha slider to 30%.

Step 26

Focus on the Layers panel, add a new layer and name it "hair". Drag it to the top of the panel and make sure that it stays selected.

Pick the Brush Tool, drag the Width slider to 1 pt, keep the Smoothing at 5% and then open the Brush Settings pane. Drag the Roundness slider to 100%, ignore the other two attributes and then move to the Contour. Select the left end of that orange path and drag it to the top, left corner and then select the other end and drag it to the bottom, right corner. These points simply set the level of thickness that your brush should have at the start and end points, but you can easily add more points along the path to create more complex brushes. Simply double tap on the orange path whenever you wish to add more points for your brush.

Now, set the stroke color to R=47 G=28 B=23 and use this brush to add some tiny hair pieces across your text as shown in the following image.

Step 27

Finally, return to the Layers panel and add one last layer. Drag it to the bottom of the pane, name it "background" and make sure that it stays selected. Pick the Rectangle Tool, create a shape the size of your canvas and fill it with R=198 G=221 B=64.

Finished Design

Congratulations, you've finished the tutorial!

Hope you've enjoyed learning some of the techniques and processes presented in these steps. As always, feel free to adjust the final design and make it your own.

Graphic File: SlimeText.idraw