# Create a custom page

This how-to describes how custom pages can be added to the "Old Animated Books" pack, available on the Unreal Engine Marketplace:  
  
[https://www.unrealengine.com/marketplace/old-animated-books](https://www.unrealengine.com/marketplace/old-animated-books)

Since update 1 of this pack, the template files changed a little bit. It is now possible to create custom text using mask textures but also by changing the base color texture of each individual page (not covered in this tutorial).

This turorial will show you how to create a custom text mask using photoshop and how the texture paramerters of the page material can be used to create different text apperances.

[Old\_Anim\_Books\_Page\_Template\_Resources\_V2.zip](https://docs.suricoon.com/attachments/1)

### Before we start:

- Create an Unreal Engine Project with the "[Old Animated Books](https://www.unrealengine.com/marketplace/old-animated-books)" pack added
- You will need Photoshop or a similar graphics software that can handle PSD files (GIMP)
- Download the following template files: [Old\_Anim\_Books\_Page\_Template\_Resources\_V2.zip](https://docs.suricoon.com/attachments/1)

### 1. Creating the custom text mask

Download the following template files and extract them to a path of your choice

Open the file called "T\_Pages\_A\_to\_D\_TextMask.psd"

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/image.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/image.png)

Now you should see a layout someting like this:

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/7R9image.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/7R9image.png)

The helper lines are indicating the save area, where you can place your content. If you are creating "left" pages, align your content at the left outer helper line and make sure the content does not overlap the inner right helper line. If you are creating "right" pages its the other way round:

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/Jxmimage.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/Jxmimage.png)

Since the texture we are creating is a text mask, we can only use gray scale colors to create our content. White values will be replaced with the specified text color of our UE4 material. Black values will be transperent. All gray scale values between black and white will be some kind of tranclucent.

Let's write some pure white text to the center of our page:

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/ylwimage.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/ylwimage.png)

Now let's export the text mask as PNG.  
Click on File->Save As and choose Format: PNG  
Name it **T\_My\_Text\_Mask\_M**  
Click Save

### 2. Import the text mask to UE4

Open your Unreal 4 project and make sure the "Old Animated Books" pack is installed.

Navigate to the texture folder of your project. (For easier and uncomplicated updating the packs content its recommended use a folder outside of the packs folderstructure to add your custom files)   
Click on the import button of the contetn browser

![](http://web.suricoon.com/confluence/download/thumbnails/2228285/old_anim_books_tut_005.PNG?version=1&modificationDate=1563547964000&api=v2 "Old Animated Books (UE4) > Create custom Pages > old_anim_books_tut_005.PNG")  
  
Navigate to your text mask file created earlier and click open.

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/LMhimage.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/LMhimage.png)

### 3. Create a material instance

In the Content Browser navigate to **OldAnimatedBooks->Materials->Master**

Right click on **M\_Master\_Anim\_Book\_Pages** and choose **Create Material Instance**

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/f9Gimage.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/f9Gimage.png)

Name it **MI\_My\_Custom\_Page** or whatever you want

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/TTuimage.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/TTuimage.png)

Recommended: Move the newly created material instance to a folder outside of the packs content.

Open **MI\_My\_Custom\_Page**

In the Details panel activate the checkbox **Text**

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/zuximage.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/zuximage.png)

Click on the dropdown and type **T\_My\_Text\_Mask\_M**   
press enter

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/A6simage.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/A6simage.png)

### 4. Adjust material parameter

Under the parameter group text you can see the following parameters:

- Text\_Color
- Text\_Intensity (1: Fully Visible, 0: Invisible)
- Text\_Metallic (0: no metallic, 1: fully metallic)
- Text\_Roughness (0: no change, -1 low roughness glossy, 1 high rougness)

The parameters are almost self-explaining. To use a particular parameter we have to activate its checkbox  
  
We want to create some golden letters:

1. Click on Text Color and choose some kind of orange/yellowish color
2. Choose a Text\_Metallic value of 1
3. Choose a Text\_Roughness value of -1

Your text should now look something like this:

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/d11image.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/d11image.png)

### 5. Assigning the custom page

To keep it easy we will now exchange the default material of the skeletal mesh **SK\_Anim\_Book\_01**

I recommend to change the material on the respective actor on your map or to duplicate the skeletal mesh.

In the Content Browser navigate to **OldAnimBooks->SkeletalMeshes**

Open **SK\_Anim\_Book\_01** and go to the **"Mesh"** Tab

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/WqIimage.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/WqIimage.png)

There are 6 materials.

Element 1 to 4 are the page materials

We will assign our custom page to Element 1 (Page A)

Click on the dropdown of Element 1 and type **MI\_My\_Custom\_Page**

Press enter

Done!

We can now preview some opening animations and see what our custom page looks like!

[![image.png](https://docs.suricoon.com/uploads/images/gallery/2022-10/scaled-1680-/9soimage.png)](https://docs.suricoon.com/uploads/images/gallery/2022-10/9soimage.png)

P.S: We have just created a "Left" Page