Header Ads Widget

Web Banner AD Design | Photoshop Tutorial

Hello Guys, Sincerely wish you all, I am beginning this tutorial. Today's theme of discussion is how to design a web banner using Adobe Photoshop. Stay with me in this episode. I will describe step by step how to create this web banner. This tutorial is best for those who want to learn basic web banner design. This tutorial is for basic knowledge for beginning-level designers. Those who want to learn web banners quickly can follow this tutorial. Before you start the design, make sure you have all the design ingredients.


Design Ingredient:

  1. Adobe Photoshop ( Note: Use latest version software )
  2. Stock Files
  3. Fonts Name - Bebas
To Get This Design Stock Files Click Here



The first step to designing anything is to create a new design artboard document with the proper size. To do this, open up your photoshop software by clicking on its icon thumbnail. When photoshop is loaded fully and open its interface. After that, go to File>New or press Ctrl+N from your keyboard to create a new document. When you press Ctrl+N later that a dialog box will open. Here you have to give a document name and put size (width 1000 x height 350 px). The document Resolution is 300ppi. And make sure you select RGB color mode. Then click on Create to make a design artboard. Our design artboard canvas is ready. Now we can start our design.



At this level, our task is to bring the model photo to photoshop and delete the yellow background behind her. To make the model photo background transparent. Go to the photoshop top File menu and click on Open. Then select the model image from the computer store. Then click on open to bring the photo on photoshop artboard. Now click on the Pen tool from the right side taskbar and make a path surround the girl. Make sure you selected the Path option from the pen tool properties upper drop-down box, not the shape. To make a selection, we have to chose the path option, not the shape option. After doing the path around the girl, press Ctrl+Enter for your keyboard to make this path selection. 



Now click on the top Select menu and go to Select and Mask or directly press Alt+Ctrl+R from the computer keyboard to open select and mask properties. Now use the right side edge brush that I have marked by the black box. and run this soft round edge brush over the hair area of this girl to make this hair transparent. After that, go to select Mask left side properties. From here, increase the Feather 0.3 and make Contrast 17% and then click on the Output Settings in there click on Output To drop-down box and select New Layer with Layer Mask then click on Ok to Make the photo completely transparent. So we can put the model photo on any background.



In this design stage, we will prepare the banner background. To do this, we have to bring the blue background image as well from your computer store. Bring the background photo use the same process that we have did to bring the model photo. Then click on the top Filter menu and click on Blur. Then click on the Gaussian Blur from there. In the Gaussian Blur properties, increases the Blur a little bit so that the background all edge will become smooth and perfect blur effect create on that image.



After making the background smooth, we will also add some more effects to the banner background. To accomplish this, drag the camera lance effect image from your computer store and drop it into the main design Artboard. Now bring this layer bottom to the girl image layer. And make the layer mode Normal To Multiply. So that we only get the camera lance effect visible on the banner background and other background parts of the camera lens effect are hidden.



At this stage of the tutorial, we will create a pattern overlay effect on the background. To make the pattern overlay effect, we need to create a rectangle shape that covers the whole design Artboard. To make that shape click on the right side Rectangle Tools or press U from the keyboard and then drow a rectangle shape over the total design artboard. When you drow a rectangle shape, you will found shape properties on the top menu bar. From this shape, properties pick up a blue color. After giving the shape color, we will apply the pattern overlay effect on the blue shape layer. To implement the pattern effect, double-click on the blue shape layer thumbnail to open its Blending Option. Now checkmark the Pattern Overlay box and select the pattern that I have marked in the screenshot. After that, change the pattern mode Normal to Multiply. Then make patter Opacity 73% and Scale 61% and click on Ok.



In the part of the design, make the pattern fade over the background. You have already seen the rectangle 1 layer is the pattern layer. For that, we have to fade rectangle 1 layer, which means the patter effect layer. To do this, make a Layer Mask of rectangle 1 layer by clicking on the layer mask icon. Then active the layer mask by clicking on the white mask thumbnail. After activating the rectangle 1 layer mask, click on the Gradient tool. When you click on the gradient tool, you will found the gradient properties on the top bar. from there, select a (Black & White) transparent mode gradient. And drag the mouse cursor right side to the left side over the design artboard to implement the fade effect. Now decrease the opacity of the rectangle 1 layer 100% to 24%.



In this particular step, you will create a button to highlighting the specific text. To do this, click on the Rectangle tools and select the Rounded Rectangle Tool, and draw a round shape below the "Play Now" text. After making that shape go to this layer Blending Option by double click on the layer thumbnail. The blending options dialog box checks the gradient overlay box. From the gradient properties, select a blue color gradient. Then click on Ok.




This step is the last step of this web banner design. At this level, we will type all the text using the Type tool and align the text perfectly. And then bring the other buttons from the computer store. Then we will resize them by pressing Ctrl+T. So far the tutorial is Complete.



If you have any difficulty understanding this tutorial, you can leave a comment directly. I will try to answer your questions as best I can. You can also watch the video tutorial of this text tutorial. I hope you get answers to all your questions about this tutorial. Thank you all for patiently reading this tutorial for so long.



Post a Comment

1 Comments

  1. The combination of colors in the works you show is always so good. I hope you will make a post on how to use colors and light right.

    ReplyDelete

If you have any quary let me know