Creating a 300x250 px banner ad

I made the below print screen because one of its ad caught my attention:

it is a 300x250 (the one with the doctor) pixels and which is an ad fairly easy to reproduce as there are not many graphics involved. By doing reverse engineering we could easily reproduce it, here are the elements we may need:

  • a quality background image with a rate of 300/250 so to say 1.2.
  • a logo at the top left and corner.
  • a text starting at the middle of the ad.
  • a shadow effect on the text.
  • in fact this ad was a gif which was showing a button at the bottom of the ad with a CTA "Donate", so we are going to add it too.

Ok, let's start this project, the first thing we will need is a picture with the right rate. In a professional environment you would either hire someone to take the pictures or rent/purchase them on websites such as https://www.shutterstock.com.

In our case, we will look for images that we don't have to purchase, though it will limit our choices, it will allow us to educate ourselves for free, one nice website is: https://www.pexels.com and/or https://unsplash.com.

I went for the following one unsplash-logoCDC

As the size of the picture was 1920 by 1440 I adjusted it on GIMP by modifying the canvas by giving it a width of 1728.

Ok, so now I have my picture that I can use within Inkscape. As the picture is too bright I used opacity. Then I added the text to which I applied a filter for a drop shadow. Then I aligned this text with the image.

Then I added a rectangle for which I rounded the corner. Then I added some text within it that I aligned. Then I added the logo that I took here: https://www.flaticon.com/free-icon/pharmacy_448843?term=red%20cross&page=1&position=1

and the end result looks like this:



Last modified: Sunday, 29 March 2020, 4:58 PM