• Home
  • Artist statement
  • C.V
  • Portfolios
  • Photo Gallery
  • Blog
  • Info
  • Contact
  Myungja Anna Koh

Tutorial

Create an animated ad banner using Photoshop

6/22/2021

0 Comments

 
  Some works become series when working on paintings. For example, a rose that I've been drawing recently for a painted flower store project is growing, and one day it will become a large painted flower shop. When I think of warehousing these tasks while doing all the step-by-step tasks, the fatigue piled up will disappear, and I will be happy all day long. So, today, I want to show the step-by-step growth by dividing these works into one category, so I will make a banner to introduce the results on a project basis. 

First, open a new Photoshop document 300 pixels wide and 250 pixels high. The size of a standard banner ad. Since the banner is only used online, you can keep the resolution at 72. 
Picture
​Add one more layer.
Picture
​ Load the image you want to use and paste it on a new layer.
Picture
​Use the Rounded Rectangle Tool (U) to create a button near the bottom of the ad. 
Picture
​Add a mask as shown below to highlight the new shape layer in the Layers panel.
Picture
 ​Select the drop-down menu and choose Bevel and Emboss. Set the style to 50% for Inner Bevel and Depth. 
Picture
Add a new layer to the file and use the Type Tool (T) to create a button "Buy painted flowers!.
Picture
Picture
Then create another layer and use the Type tool again to create the basic message for the banner.
Picture
Go to the window timeline to create the animation.​
Picture
 Now let's create a simple animation to make the banner a reality. With the first animation frame selected, toggle the button layer and both text layers invisible.
Picture
​Create a new frame in the Animation panel. Redisplay the default message layer in banner ads. Move the text up so that only the last line is visible. In the Layers panel, set the opacity of this layer to 40%.
Picture
​Create a third frame and move the text further down so that most or all of the text is visible and increase the layer opacity to 70%.
Picture
Create a new frame and move the messaging text to its final batch. Increase the opacity to 100%.
Picture
Create a fifth frame and display the button and button text layers. ​Each frame will have “0 seconds” displayed below the thumbnail. Use the drop-down menu to set Frames 0.5  sec. Click the “play” icon in the animation panel and you will see the banner ad in action and you can adjust the timing if necessary.
Picture
Create another layer to give the button a twinkle effect. And make the background button of the text invisible, leaving only the text 
Picture
​Create the 7th action flame layer, select the layer with the button and text together.
Picture
 To complete your banner ad, go to File > Save for Web & Devices. Select GIF as the file type from the second drop-down menu at the top and click Save. 
Picture
Below is the completed GIF file. I hope you all start a successful business by creating your own awesome advertising banners.
Picture
0 Comments



Leave a Reply.

    Myungja Anna Koh

    Artist

    Annakoh search bar

    Categories

    All
    Art & Data Analysis
    Book For Artist
    Coloring Book
    Daily Art
    Digital Art
    Drawing
    EcoArt
    Guinea Pig
    Illustrator
    IT Tip For Artist
    K-Culture
    Marketing For Artwork
    Photoshop
    Travel
    Weebly

    RSS Feed

    Archives

    June 2022
    May 2022
    April 2022
    March 2022
    February 2022
    January 2022
    December 2021
    November 2021
    October 2021
    September 2021
    August 2021
    July 2021
    June 2021
    May 2021

    ConveyThis
Powered by Create your own unique website with customizable templates.
  • Home
  • Artist statement
  • C.V
  • Portfolios
  • Photo Gallery
  • Blog
  • Info
  • Contact