Ad Banner Design with Photoshop
Ad Banner Design with Photoshop is a hands-on course in designing advertising banners in Photoshop, from arranging images, copy and call-to-action buttons to multi-size artboards, animated banners and exporting GIF and MP4 files. It suits marketing teams, page admins and business owners who have used Photoshop before, and you leave with your own set of campaign banners.
- Duration6 hours · 1 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
Advertising banners are something marketing teams and business owners make almost every week: website banners, social media ads, Stories images and promotions for chat channels. Each channel needs a different size and aspect ratio, the copy has to be readable on a phone, and the file has to be small enough to load quickly, so making banners one file at a time takes a long time and the results rarely look like a set.
This course uses Photoshop 2026 to design banners, starting with how to rank the image, copy and call-to-action button, setting up several sizes with artboards, and preparing product images with Select Subject, the Remove tool and Generative Expand, then adapting one design to every size with smart objects. You then build animated banners with frame animation and the video timeline, export GIF and MP4 files while keeping file sizes down, and finish with a workshop that produces a full campaign banner set for every channel. (1 day, 6 hours, Beginner to Intermediate level.)
What you’ll gain
- Rank the image, copy and call-to-action button so a banner communicates in a few seconds
- Set up banner files in several sizes for the web, social media and mobile with artboards
- Prepare product images and backgrounds with selection tools, the Remove tool and generative AI
- Adapt one design to every size quickly with smart objects and Creative Cloud Libraries
- Create animated banners with frame animation and the video timeline
- Export GIF, MP4, JPEG and PNG files with good quality and file sizes that suit each platform
Who this course is for
- Marketing teams and page admins who make banners and ad images regularly
- Business owners and online sellers who want to make their own promotional images
- Website administrators who change homepage banners for each campaign
- People with basic Photoshop skills who want to move into advertising work
Prerequisites
- Able to use Windows or macOS
- Some Photoshop experience, such as layers, selections and adding text
- No design background is needed
- A laptop with Adobe Photoshop from your own Creative Cloud plan, or the trial version
Curriculum
Course Details
This is the 2026 edition of the Creating Advertising Banners with Photoshop CC course. It runs for 1 day, 6 hours (09:00-16:00), as lectures with labs and workshops, at Beginner to Intermediate level for people who have used Photoshop before. The content has been rewritten for Photoshop 2026 in Creative Cloud and focuses on banner work, building on Adobe Photoshop 2026 Basic to Intermediate with multi-size artboards, smart objects, Creative Cloud Libraries, Generative Expand, frame animation, the video timeline and GIF and MP4 export. Learners use Photoshop from their own Creative Cloud plan or the trial version, and take home the course handbook, banner size templates and their workshop files.
Day 1: Designing Static and Animated Ad Banners
Section 1 Principles of Effective Ad Banners
- What a banner is for: awareness, a promotion or a click, and how that shapes the design
- Visual order: hero image, headline, supporting copy and call-to-action button
- Short copy that reads on a phone, strong contrast and space around the text
- Keep colours, fonts and logo consistent with the brand in every piece
Section 2 Lab: Standard Sizes and Setting Up Artboards
- Common web banner sizes such as 300x250, 728x90, 300x600 and 320x50
- Social media ratios 1:1, 4:5 and 9:16 for posts, Stories and Reels
- Set up an RGB document at screen resolution with safe zones the app interface will not cover
- Lab: create one file with several artboards and guides for each size
Section 3 Lab: Preparing Product Images and Backgrounds
- Cut out products with Select Subject and refine edges with Select and Mask
- Remove distractions with the Remove tool and Content-Aware Fill
- Extend an image to a new ratio with Generative Expand and Generate Background
- Lab: place a product on a new background with a realistic shadow
Section 4 Lab: Type, Call-to-Action Buttons and Layer Styles
- Pair Thai and English fonts, and set size, weight and line spacing
- Build call-to-action buttons and price tags with shapes and layer styles
- Readable text effects: stroke, drop shadow and gradient overlay
- Lab: place promotional copy and a button so they stand out without clutter
Section 5 Workshop: Your First Static Banner
- Workshop: design a homepage banner from product images and a sample brief
- Check the design at actual size on a phone screen
- Revise it based on feedback from the instructor and other learners
Section 6 Lab: Adapting One Design to Every Size
- Use smart objects and linked smart objects to swap an image once across every size
- Keep logos, colours and text styles in Creative Cloud Libraries
- Rearrange the layout for landscape, portrait and square banners
- Lab: turn the Section 5 design into a set of web and social media banners
Section 7 Lab: Animated Banners with Frame Animation
- Open the Timeline and choose Create Frame Animation
- Make Frames From Layers and set the delay for each frame
- Tween for sliding, fading in and changing opacity
- Lab: a looping 728x90 banner that rotates promotional messages
Section 8 Lab: Motion with the Video Timeline
- Keyframe position, opacity and style on the video timeline
- Move text and products smoothly with smart objects
- Combine several images and short video clips in a Stories piece
- Lab: a vertical 9:16 animation a few seconds long
Section 9 Lab: Exporting and Controlling File Size
- Export As and Quick Export for JPEG and PNG across several artboards
- Export GIFs with Save for Web (Legacy): colour count, dither and looping
- Render Video to MP4 for Stories and Reels
- Ad platform file size limits, and how to cut file size without losing sharpness
Section 10 Workshop: A Full Campaign Banner Set
- Workshop: take a campaign brief and design one master banner
- Adapt it into web banners, social posts and Stories, both static and animated
- Name files and organise folders for handing over to a team or agency
- Present your work and walk through a pre-launch checklist
Schedule & training options
For individuals — public rounds
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
For organisations — in-house / private
- Tailor the content to your team’s tools and projects
- Your dates, at your office or live online
- Quotation with tax ID for procurement
Instructors
Frequently asked questions
What are the common ad banner sizes?
Common web banners include 300x250, 728x90, 300x600 and 320x50 for mobile. Social media usually uses 1:1 and 4:5 for posts and 9:16 for Stories and Reels. Platforms change their specifications from time to time, so check the latest sizes and file limits before each delivery. Learners take home an artboard template with the most common sizes.
How do I turn one design into banners of several sizes in Photoshop?
Set up one file with an artboard for each size, and place product images and logos as smart objects or linked smart objects, so a single change updates every size. Keep colours and text styles in Creative Cloud Libraries, use Generative Expand to extend the background when the ratio changes, then export every artboard at once with Export As.
How do I make an animated banner in Photoshop?
Open the Timeline panel and choose Create Frame Animation, keep each element on its own layer, build frames with Make Frames From Layers or by duplicating frames, and use Tween to create motion between them. Set the delay and looping, then export a GIF with Save for Web (Legacy). For smoother motion, use the video timeline with keyframes and Render Video to MP4.
Who is Ad Banner Design with Photoshop for, and what do I need to know first?
It suits marketing teams, page admins, business owners and website administrators who make their own banners. You should have used Photoshop before, such as layers, selections and adding text, but no design background is needed. Bring a laptop with Photoshop from your own Creative Cloud plan or the trial version. If you have never used Photoshop, take a basics course first.
What can I do after completing Ad Banner Design with Photoshop?
You can design banners that communicate quickly with a clear order of image, copy and call to action, adapt one design into web banners, social posts and Stories in every size, make animated banners as GIF and MP4, and export files small enough for ad platforms. You also take home the campaign banner set made in the workshop.
Can Ad Banner Design with Photoshop be run in-house for our team?
Yes. IT Genius Institute runs in-house training and can tailor the workshop examples to your brand, products and the banner sizes your team actually uses. Contact us through the website for a quotation.
Related articles
Articles are published in Thai.