How to Make Online Shop Banner

Share on FacebookTweet about this on TwitterEmail this to someoneShare on Google+Share on LinkedInShare on RedditShare on TumblrPin on Pinterest

How to Make Online Shop Banner Using Pixlr

1. In this tutorial, you’ll learn how to create this online shop banner for demo OpenCart store. Please note that you can use the banner for any online platform and not limited to OpenCart. You can download the assets by clicking here or you can use your own.

20offbanner-01

2. So, you have this original photo that is 3000 x 2000 pixels. The dimension is too big to use for an online store as it will have negative impact on your web performance. We can easily scale this down in using Pixlr.

big image size - 02

3. Go to File > New Image to create a blank canvas. Change the Width and Height to 1140 x 500. This image dimension is good for modern computer screen and will look good using mobile devices.

file image size - 03

4. Drag the background layer from the original photo into the blank canvas. Just click and hold the layer and drag it over to the blank window and let go to release the photo. To delete the white background layer, you need to unlock it first. Hover your mouse over the lock icon and double click to unlock. Now drag the white layer into the trash bin icon (see the image below). Let’s now rename the background layer to keep things tidy. Double click the layer and rename to slideshow image or anything that works for you.

drag image

drag image - 04a

drag image - 04b

drag image - 04c

drag image - 04d

5. Now let’s resize the image by going to Edit > Free Transform. Grab one of the corner handles and make sure to hold down Shift key to constrain the proportions and resize… Just move the image till you find a good spot. I want some negative space on the right for graphics and text. Press Enter to get out of the Free Transform mode.

free transform - 05

free transform - 05a

free transform - 05bfreetransform-05c

free transform - 5d

6. Next, create the blue box. Make sure to have the marquee tool selected from the tool box on your right. Click the box next to the Constraint and select Aspect Ratio. Make sure the Width & Height is set to 1. Now when you draw a box using the marquee tool, it will always be a perfect square. Create a new layer for the blue box by clicking the layer icon. Set the main color to fill in the box with blue color. Make sure you select the pain bucket tool and click inside the box to fill in.

blue-box-06

blue box - 06a

blue box 06c

setmaincolor-07d

setmaincolor-07e

7. Select the type tool from the toolbox and type 20. See the photos to create the other three text layers. To achieve the final result, we have total of four text layers because of different font sizes. You can use any font of your choice, but I’m using Gotham Bold font for this tutorial.

setmaincolor-07f

text-08

8. Now, create the red rectangle by creating a new layer and make sure to set the Constraint to no restriction since we don’t want a perfect square this time. Repeat the same process from earlier to fill in the rectangle with red color. Select the type tool and enter Shop Now inside the red rectangle.

text-08a

text-08b

9. After you are happy with everything, go to File > Save to save the image file. Play with the quality setting and choose JPEG as your file format. You don’t want to set the quality to too low since that will degrade your image significantly. Click Ok to save it to your desktop. Also, I highly recommend you save a PXD format since that will retain all your layers in case you need to go back and make changes later.

text-09

text-09a

 

 

 

More from buildmyecom

Journal Theme – Installation

Download Links Journal Premium eCommerce Theme Playlist (Click to jump to the video...
Read More