Web Courses Academy Blog

How to make an E-Commerce Banner

Author: Carl Heaton
He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.
how to make an e-commerce banner
Quick jump to topics
Sharing is caring

Having a banner for your E-Commerce website is one of the helpful ways in attracting consumers to check out your products and make a sell. E-Commerce banner is a creative way of telling people about your newly arrived products, on-sale items, buy one-take ones, and other featured products. In creating an E-Commerce banner, you need to align the texture, exposure, shadowing, and clarity of your product image to the text, logo and background that you choose.

Having a banner for your E-Commerce website is one of the helpful ways in attracting consumers to check out your products and make a sell. E-Commerce banner is a creative way of telling people about your newly arrived products, on-sale items, buy one-take ones, and other featured products. In creating an E-Commerce banner, you need to align the texture, exposure, shadowing, and clarity of your product image to the text, logo and background that you choose. Producing a bad quality banner for your website gives a negative impression towards your service and products from your possible consumers. To avoid negative impressions, here are some ways in creating an effective E-Commerce banner using Adobe Lightroom and Photoshop.

 

E-Commerce Banner: First – pick an image of a product and retouch it accordingly in Lightroom

  1. Go to Adobe Lightroom, click “File” and add new Catalog. Rename it with your desired file name and click “Save”. (Creating a catalog will take a while to load.) If your new catalog is ready, click “Import” and choose your desired image.
  2. After your image has been loaded, click “Develop” which can be found on the right top of Lightroom.E-Commerce Tutorial Web Courses Bangkok Webcoursesbangkok-5
  3. In Develop mode, you will be able to adjust the exposure, clarity, shadows, lights, etc. of your product image. You can also do some cropping and aligning the image. Adobe Lightroom
  4. If you are satisfied with the editing you did with your image, click “File” again and click “Export”. Save the edited image to your desktop or assign a specific folder for your image.Adobe Lightroom E-Commerce Tutorial

 

Second – Create the banner by adding the edited image and text information of the product.

  1. Open Adobe Photoshop; click “File” the click “New”.  Make the size 960 x 400 pixels and click “OK”.Adobe Photoshop E-Commerce Tutorial
  2. When the Photoshop art board is loaded, click “File” and “Place” to locate your product image, or open the window box where your product image is located and drag the image to the art board.e-commerce banner
  3. Align your image using the Rule of Thirds for right composition. To get rid of the white background, click the Rectangular Marquee Tool and make a horizontal rectangle without touching any shadows or color of the product.e-commerce banner
  4. Press Ctrl + T to and make the adjustment by dragging the small box in the middle of the selected rectangle that you have made. Press Enter and Ctrl + D if you are satisfied with the adjustment. Do the same thing in the vertical area.e-commerce banner
  5. To create a perfectly aligned text with your product image, use Rectangular Marquee Tool to measure the size of the spaces. Also use some grid guides by dragging it from the ruler which is located at the side of the art boards. With the same space size of the product margins, you will be able to find alignment and balance for the next step which is adding text.e-commerce banner
  6. Now, select the Horizontal Type Tool to create text. Select the font that you would think that will fit your banner. Always make the brand name bigger and the description smaller with a thin font. If you want to change the size of your text, simply select the text and hold the control key and start dragging the small box.e-commerce banner
  7. Add some promotional offer (if you have one) and export it with the best quality.e-commerce banner

Learn E-Commerce in Bangkok

If you would like to learn more about Photoshop, Lightroom, Alibaba E-Commerce, and E-Commerce Start-up, check out these courses at Web Courses Bangkok. All lessons are taught in English with professional instructors in a small class of eight.

[text-blocks id=”59336″]

More great articles
There is more where this came from
Join our monthly newsletter packed with course dates, latest articles, free resources and job opportunities
Promise to only send you useful interesting newsletters once a month.