As we studied in the last topic, how to design infographic templates.
Which represents our company and the brand.
Whatever will be our info, using a graphic element, we will create an infographic template and we will give it an introduction of our company.
We saw that.
After that we saw how to make a patterned background.
Means if you have an object but you don't have a background and you wish to design, we saw that pattern background how to design.
Today's topic is, we are going to learn how to make web banners.
Then I will give you information about your brand, like if you have opened a youtube channel, or you have a shop which sells clothes online, or some other brand.
So how will you design it, what all things you can cover in that.
Meaning which type of fonts are needed, what type of logo, what all colors to be used.
We will discuss all this and after that we will see how to design letterhead.
Meaning when you hire a candidate in a company, at that time you have a letterhead.
All the things are mentioned in that so we will see how to design that.
After that save the date and invitation cards.
Save the date meaning if you are getting married, and you are giving invitations on the whatsapp or somewhere else then how to make those invitation cards. We will see that.
So let's go to photoshop.
First of all we will see how to make banners.
For banners I have downloaded some of the items from google.
Like this BG.
After that this banner of fashion sale.
Then I downloaded some of the texts.
You can design those texts and all on your own.
For that what you need to do is in photoshop, download fonts in photoshop.
And use them, then only you can include such types of fonts.
So here I have to do for my shoes or any of your bags.
So I will meet you after downloading an image of shoes.
Here I have taken shoes from a browser and I have cut them.
Now let's see how to set this.
so firstly we will transform this and then we will flip this.
so that it matches according to that.
and we will decrease the size proportionally.
and we will choose a gaussian blur filter for this.
and we will give a very light gaussian blur.
a very light one.
so this is done.
After that , the text which i have downloaded , i will show you how we can use those texts with this.
so i will see on my second computer , second screen , i will input this.
so wait a second.
so this is our first tagline , in which it will return that there will be written as a sale of 50%.
we will use that kind of a tag in this.
After that , we will put the text.
So here the text is done.
and here we can add one more thing.
that i want to show you.
We can do something like this.
and we will give color to this yellow color and it will contain our text.
and we will write an “order now”.
and the color will be dark black in the text.
size will be increased.
so i have increased the size and we will put this in the middle
or else we will select this both , we can take the text in the middle , after selecting it.
let me see if i have some more images downloaded or not.
Let me see.
no , for now i only have this image. I have done this much only.
so , in this you can also double click on the shoes , we will see an option as drop shadow.
so i will increase the opacity of the drop shadow to the fullest.
and the color we will put as black.
and we will increase the distance so that it shows like there is a shadow.
and the opacity will be low.
so there we will get the fill that we want.
we will give a very light spread and we will increase the size.
So from this , we will get the effect of the shadow , and we will turn on the anti-aliased .
And from here , which shadow do we want? A smooth one.
We can do many types of shadows.
we can choose this also. so this one looks good.
this is preset as we set the spread and stuff according to ourselves , so it will be preset where the shadow will affect.
so here it is done. our banner is ready. this banner , you can use on your website ,as 50% off fashion sale is going on,
if you click here , it will be ordered now.
so you can use this banner on your front page.
so here you can add your phone number too , you can add your logo.
For example, the logo you made , you can add it here , your phone number , email address ,address.
or else you can add a hyperlink to order so whenever someone will click on order now , you will get a different option from there.
so that he can add details like phone number , address , from where it will come , which size it would be , you can write all this here.
and what colors are available that you can add.
so this was all about how to design and make a web banner.
You can make the same kind of banner for youtube , if you have a youtube channel , so you can design the banner.
For example , if you have a gaming channel , you can design a gaming banner.
So let's move on to our new topic today.
If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.
Create a new Photoshop document with a width of 1600 pixels and a height of 440 pixels. In the RGB Color mode, make sure the resolution is set to 72 pixels per inch. Simply open the file you downloaded previously if you're using the template.
Mockup. Before we start designing, we need to plan out the requirements, looks and the functionality.
Set up the Canvas. So we have a blue print for our layout.
Design the Header.
Make a Texture Pattern
The goal of web banner design is to make the most clickable banner ads possible. Banner ads are pictures that advertise a product or brand and link to the advertiser's website and are embedded on web pages.
Banner ads are a popular type of online advertising that uses images rather than text. The goal of banner advertising is to promote a brand and/or to drive traffic to the advertiser's website from the host website.
Incorporate a product image into the banner.
Image should be resized to suit the banner
Optional: Change the colour of the backdrop.
Fill in the blanks with colour.
Fill the banner with text.
To the banner, add a button.
Save the JPG file and the Banner Design Template to your computer.