Watch the following video to understand the method practically:
Video Credit: ETC Prolearning
Hello guys, today I’m going to teach you – How to make an amazing E-commerce Banner without Photoshop that too Free, Easy and Quick.
Step 1 :
First of all, you have to download a model’s image from any website of your choice. Then, open the website remove.bg. This website helps you to remove the background of an image.
Step 2 :
You have to upload the model’s image in remove.bg or if you have not downloaded the image then search the image on Google then right click on the image that you like and ‘copy image address’ then paste the image URL in remove.bg. Now, the image will appear with its background removed.
Step 3 :
Now, open a website named LunaPic which will help you to bring the shadow of an image known as “Drop Shadow Effect”. Upload the model’s transparent image by clicking on the ‘choose file’ button. By using the drop shadow effect, your image will look really effective and beautiful. The image is uploaded, so click on Borders then DropShadow. In drop shadow, they have given the range (size) of the shadow through which you can increase and decrease the effect of shadow. By writing the figure of the shadow’s size, click on the Apply button which is given exactly beside the size.
Many times you want to make a banner in which the wall is there at behind. At that time, you can use this shadow effect to make the picture more beautiful.
Step 4 :
Now, open Canva and make your account on this website. Now, click on Custom Dimensions and take the width = 1200 and height = 300. A blank page will appear on which you have to make a 3D capital letters “DENIM”. Click on ‘Elements’ given in the left column. Type ‘D’ in the search bar. Now you will see a character like a frame, click/drag that onto the blank canvas. In the same way, bring the remaining letters [E, N, I, & M] also. Keep the same space between all the letters to make it look good. Now, this is the image frame, so whichever image you’ll add in it that will come.
Step 5 :
We’ll open a website where we can create a gradient effect. I’ve used this website many times before and it’s super amazing. Search “PINETOOL GRADIENT MAKER”. A lot of websites will appear but click on “Online Image gradient generator – PineTools” or click on the name of website, I’ve attached the link. Now, two boxes of gradient colors will appear in front of you in which the options must be given. You can take any size of your choice but in this one, I am taking Width (px) = 1200 and Height (px) = 1200. Take 1st gradient color, HEX = #fdd54f and 2nd gradient color, HEX = #f8049c . On this website, many features are there such as you can create angles, change orientations and zoom in / out effects. Click on generate after making changes. I’ll take Orientation (degrees) = -62.88 and Zoom (%) = 206.71 then generate and download it.
Step 6 :
We’ve to go back to step 4. This trick will look a little longer but after doing this method you’ll realize that you can do a lot many things in Canva by bringing it from outside. Upload the gradient effect image in Canva. Drag the gradient image & drop it in each character of “DENIM”. Now download this image in png form.
Step 7 :
Now, the best part has arrived. You must have seen the DENIM word written. To make that, open LunaPic (it is a free tool). Upload the DENIM image made in Canva. Click on Adjust & then Perspective. 4 dots will appear on 4 sides of the image. Drag the upper both corners backward to get the desired position. Click on Apply and then Save the image.
Step 8 :
Open Canva and click on Custom dimensions, take width & height as 1200. Upload the transparent image of the model and place it in between the canvas. Click on Elements then Gradients, now take the gradient as I’ve shown you in the first picture if you want to make the same banner. Rotate it by 157 degrees and place it on the left side of the model. The gradient picture that you have chosen has 2 colors so change it by these codes: Blue = #fdd54f and pink = #f8049c. Take a line type gradient and place it on the left side – upwards. Click on the line then on duplicate, so you’ll get the same line like that, take 2 lines on the left side & 2 lines on the right. Now we’ll add text which is very important because if you’ll choose the wrong font then it’s going to look bad so, to choose the correct font according to the banner is important. Below the Elements, click on ‘Text’. You’ll see many boxes of fonts in which a few words are written, from that you’ll get an idea of what fonts your banner needs. Go down and you’ll see a box in which THANKS GIVING DINNER would be highlighted in vertical. Now click on the small fonts and delete it. Now write “THIS WINTER GO BLUE WITH OUR NEW DENIM JEANS”. Remove Bold thing from these words: ‘go blue with our’ and set the words in a vertical line as shown in the first banner. You can also reduce & increase the spacing of words, I’ve taken Letter = 30 and Line height = 0.96. Use the same fonts and write “BUY NOW”, reduce the size of fonts a little bit and place it below the model a little right side. Take the amazon.com logo from Google and place it on the right corner (below).
Now, this lecture has come to an end. Upload the DENIM image that was made in LunaPic and place it on the shoes of that model. The shoes of the model must have got covered through that image. Click on the DENIM image and an option will appear upwards i.e. Position. Click on it and then on Backwards.
Finally, your banner is completed.