Banners in Photoshop (Tutorial)

Language: German

Design your own advertising banners in Photoshop - 10 modern top designs to recreate (tutorial)

Striking. Stunning. Attractive. After this Photoshop tutorial, you'll be able to place your banner ads with exactly these characteristics on your social media channels, websites and newsletters. In over 4 hours, Stefan Riedl will introduce you to 10 top modern designs - and show you step by step how to create them yourself. A training course made for more clicks on your banners!

Simply design it yourself: How to build effective advertising banners in Photoshop
Your learning success: You will be able to create beautiful banners yourself
From job offers to company anniversaries: explained using 10 modern top design examples
For social media, websites, newsletters and more: advertising banners in various sizes
Instructive at every step: how and why you create the banner layouts in exactly the same way
Ideas for your design: get inspiration for contemporary advertising banner designs
Over four hours of practical Photoshop tutorial by design professional Stefan Riedl

Could your banner ads use more attention? Then press play and let this informative and entertaining tutorial inspire you to create new designs and approaches!

Details

Usable with:
content: 4 h Video training
Licence: private and commercial Rights of use
Bonus: including working material

Examples of use

Open gallery

Create a reel banner that redirects to a landing page for a free goodie.
Open gallery

Grab the talent - with appealing advertising banners for your job ads.
Open gallery

Offer? Discount? Promotion? Learn how to create banner ads worth seeing in the tutorial!
Open gallery

Lots of text in the banner? Take a look at how you can perfectly showcase customer testimonials, for example!
Open gallery

This allows you to utilize the space in the Hightower format so that your advertising banner stretches out illustratively.
Open gallery

Whether for social media, websites or newsletters - different banner formats are discussed in the tutorial!
Open gallery

Follow each editing step in Photoshop so that you can easily create the banners yourself.
Open gallery

Discount promotions for Christmas? There are plenty of them. So use the training to design a banner that stands out from the crowd.
Open gallery

Be inspired by different banner styles - for example the big typo look!
Open gallery

Luminous power! See how you can achieve great effects for your banners in Photoshop.

Photoshop - modern design

Advertising banner in Photoshop: 01 | Lead magnet for Instagram stories

In this video, we create a banner (1080 px × 1920 px) that acts as a so-called "lead magnet" and fits perfectly into the format of the popular Instagram stories. The aim here is to inspire the viewer with a goodie (the download of a free e-book) by redirecting them to a landing page.

Ideal for joining in: In the project file for this tutorial you will find assets from TutKit.com as well as a readme with links to the fonts, images and icons used in all the tutorials in this training.

download project file

Advertising banner in Photoshop: 02 | Place job offer on social media

Here we create a job banner that is perfect for social media appearances on Instagram. The 4:5 aspect ratio makes perfect use of the available space in the social feeds. In the video, we go into the cropping of people and the use of identity-creating "corporate patterns".

Advertising banner in Photoshop: 03 | Advertise offer, service

A convincing offer is waiting in the wings? Here comes the banner! In a wide 16:9 format, we use a creative play on words and effective, large typography to advertise a service and incorporate a rating system.

Design your own banner in Photoshop: 04 | Customer review

free of charge

Advertising banners in Photoshop: 04 | Present customer reviews

Project successfully completed? Then share it with your future clients! In this video, we take up the idea of presenting positive customer reviews particularly prominently: in 4:5 format with a trendy cover overlay.

Banner in Photoshop 05 | Banner Melting Skyscraper

Advertising banners in Photoshop: 05 | Melting Skyscraper on the margins of websites

The integration of a skyscraper at the edges of websites is a popular way of attracting a lot of attention. Equipped with a modern long color effect and slab serif fonts, there are many tricks to discover in this tutorial.

Banner in Photoshop 06 | Banner Style Typography

Advertising banners in Photoshop: 06 | Typography style

Typography works! We use a quick clipping technique and blur the font with our motif using blending modes and layer masks. A pattern in the background and calligraphic hand lettering are also used in 1:1 format.

Banner in Photoshop 07 | Company anniversary banner

Advertising banner in Photoshop: 07 | Announce company anniversary

An anniversary coming up? You don't always have to reinvent the wheel. In this video, we use the finished figures as an asset and enrich them with confetti, balloons and bokeh overlays.

Banner in Photoshop 08 | Advent Christmas Sale Banner

Advertising banner in Photoshop: 08 | Christmas, Advent season, Christmas sale

In this video, we create a design that is equally suitable for the Advent and pre-Christmas season as well as for the end of the year. Elegant gold gradients and carefully selected font combinations create a festive character in 4:3 format.

Banner in Photoshop 09 | Banner Big Typography

Advertising banners in Photoshop: 09 | Typography in focus

Special attention is achieved when you leave out everything superfluous in a design. This 1:1 banner is a good example of how impressive typography can be as a stylistic device. The sources for icons, fonts and materials are also discussed.

Advertising banners in Photoshop: 10 | Announce festival events in Facebook posts

The ideal size for announcing events on Facebook: The format can be used perfectly as a header for event pages as well as a classic post. Impressive lighting effects and the matching polygon style create this composition.

Details of the content

Designing modern advertising banners - how to get clicks
Stop and click! If you want to ensure that your advertising banners on the web and in newsletters evoke exactly this reaction: give them modern designs that clearly stand out from the everyday flood of images.
In this four-hour Photoshop tutorial, Stefan Riedl presents ten best-of variants for advertising banners - with different size formats, varied styles and for different purposes.
You'll be there when the advertising banners in Photoshop are gradually cleaned up. You can follow every single step to build the banners yourself or create your own variations based on the examples. You will also find out which sources on the web are particularly suitable for fonts, assets, icons and images to create your own banners.

Launch Photoshop and easily create your own banners

From Instagram, Facebook and LinkedIn to newsletter marketing and your own website - sometimes you need 16:9, sometimes 8:10, and often it's square. That's why your trainer will discuss different ad banner sizes during the tutorial and show you how to make the most of the available space. You will even scratch clouds - with the elongated scyscraper format.

In terms of content, the training addresses typical topics that companies and self-employed people repeatedly convey with advertising banners . Whether you are looking for talent and specialists for your team, celebrating a company anniversary or want to present offers - let the design ideas inspire you to recreate and create your own advertising banner styles!

A tutorial with instructions and inspiration: 10 top designs for your advertising banners

These 10 advertising banner variations will first inspire you, then let you learn and finally design them yourself:

Lead Magnet (9:16): Create a reel banner to redirect to a landing page where you offer a free goodie.
Job ad (8:10): Create a banner ad for your job openings with an identity-building corporate pattern.
Offer/Discount (16:9): Convert potential customers into paying customers - with the help of an effective advertising banner including a star rating.
Customer testimonial/customer review (8:10): Learn how to include lots of text in a banner ad and showcase customer testimonials.
Skyscraper (480 px × 2,400 px): So that your banners on website margins stretch out illustratively: Use the Hightower format!
Style in square (1:1): Ideally suited for social media - show a person and emphasize your style with an XXL typo effect.
Company anniversary (3:2): Design a banner that focuses on the anniversary number and exudes the best party mood.
Christmas/Advent/Christmas (4:3): This year, entice people to your Christmas promotions with a shining golden advertising banner!
Big typography (1:1): Deliberately doing without an image? This way, you can focus entirely and exclusively on the font in your advertising banner!
Event/event (4:2.5): Whether it's a company party, open-air festival or party within four walls - create a banner that invites you to celebrate!