How to Customize a Photoshop Template
With the increased popularity of animated gifs and video, you can use a predesigned animated template to add animation to your website and social sites. For example, you can post a video to your Instagram posts or stories and upload a video as your Facebook cover. You will be surprised at what you can create with Photoshop Timeline animation.
There are many places on the web that offer predesigned Photoshop templates and it's easy to customize these templates for your specific needs. Let's take a look at how to replace some of the generic template placeholders with your own content.
FontsThe first thing that you might see when you open the template into Photoshop is the message about missing fonts (see screenshot). Of course, if you already have the fonts used in the template installed on your machine, you will not get this message. Most fonts used in design templates are free and there are many places with free fonts. If you do not wish to install the missing fonts, Photoshop will automatically choose the best replacement font.
Live ShapesSome layers contain vector objects, called Live Shapes in a Photoshop template, and can be recognized by the small icon at the lower right corner of the layer thumbnail (see screenshot). Usually, these shapes have a default color and you can change this color to match your needs. Clicking on the thumbnail will open the Color Picker. Just use the controls or type in the color code to set a new color.
Layer StylesLayer Styles may be applied to just about any type of layer in Photoshop. You will recognize these layers from the fx icon at the right of the layer name (see screenshot).
To edit the Layer Styles, double click on the layer to open the Layer Styles window. As you can see (see screenshot), you can change the color, pattern or gradient overlay of the object, as well as apply inner shadow, outer glow, drop shadow and more.
Smart ObjectsThere are several uses for Photoshop Smart Objects in design templates, with photos and videos the most common. Also Smart Objects can be placeholders for logos and other graphics that you will want to replace for your own brand. You will recognize these Smart objects by the small icon at the bottom right of the layer thumbnail (see screenshot). These Smart Objects may have Smart Filters or other adjustment layers attached.
The template designer will usually give you instructions as to the purpose of the Smart Object. For example, if a photo is contained in a Smart Object, the instructions might be in the layer name, such as [background image here]. Once you double click on the layer thumbnail, the Smart Object will be opened in a new .psb temp file (see screenshot). You will edit the contents of the Smart Object in this temp file. The easiest method is to copy and paste the new content into the temp file or drag/drop the contents in to Photoshop from the Desktop or folder. Once you save the temp file and go back to the template, you will see the Smart Object updated.
The dimensions of the temp file will be the same as the Smart Object's size in the template. If your replacement content doesn't have the same dimensions, you can resize and change the position of the content inside the Smart Object layer.
You may choose to replace the Smart Object placeholder image with a color fill. From the top menu, click Edit - Fill and set the contents to Color in the Fill window (see screenshot). When the Color Picker opens, choose a color.
Some Smart Objects are link together and when you replace the placeholder with your own content for one Smart Object, all the other linked Smart Objects will update. Of course, you only need to edit one of the linked Smart Objects. To prevent confusion, I set the layer name to [do not edit] for all but one of the linked Smart Objects.
Text LayersText layers contain text objects. Of course, you will want to change the placeholder text with your own information. You will recognize these layers by the T icon on the left of the layer name (see screenshot).
Usually the layer name will indicate the type of information needed, such as [business name here]. Double click on the T icon to select the text box in the document. Click in the text box to change the words in the document. You can also edit the Font, Font Style, Font Size and many more options in the Character window (see screenshot).
ExportIf the template is not animated, you will usually export the template as a .gif, .png or .jpg, depending on the purpose of the template. If the template is animated, you will want to export as an .mp4 video or animated .gif for the web.
To export, or render, the template as an .mp4 video, click File - Export - Render Video (see screenshot). In the Render Video window (see screenshot), give a name to your file and choose a save location. Set the Format to H.264, which will automatically render the video in the .mp4 format. Set the Range to All Frames and click Render. Once your template has rendered, you can view the video in QuickTime.
Save as Animated Gif
To save the template as an animated .gif, click File - Export - Save for Web (see screenshot). In the Save for Web window (see screenshot), set the file type to GIF and Looping Options to Forever. Keep the other default settings and click Save. To view the gif, open it in to a web browser.
Working with AnimationFor most animated templates, some of the design elements, such as photos, that need to be edited will be visible for only parts of the entire animation. To see these objects that you wish to edit, just move the Playhead along the Timeline until the objects are visible.
Most animated objects are designed to move within a specific area of the scene. If you move or resize these objects, the animation may be broken. So, only make changes to animated objects if you are familiar with Photoshop animation.
When you replace the placeholder content with your own content for an animated Smart Object, you will need to do one extra step. If the Timeline is not open, click Window - Timeline. By default, the new content will end at 5 seconds on Timeline. We need it to extend to the end of the animation. So, drag the right edge of the track to the expand over the entire Timeline (see screenshot).
Benefits of a Free Creative Cloud Membership
Welcome to Adobe Fonts
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Editor's Picks Articles
Top Ten Articles
Content copyright © 2022 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.