Ribbons and Banners

If you usually browse around many websites & design galleries, you have probably noticed the trends of using elements like ribbons, badges, and banners in web design techniques. You would be surprised how many websites have included new styles of design. Beta testers often use these ribbons to classify the current release version of software and mobile apps. You’ll also find the banners which are wrapped around free download or featured articles in blogs.


How to Create a Ribbon Banner in Photoshop?


Create a Rectangle


– Open a new Photoshop file.

– Select the marquee tool and create a rectangle.

– Create a new layer.

– Double click on the color chip to select the fill color.

– Switch foreground to background color on the color chips.

– Then hit (Ctrl+ backspace) this should fill the rectangle to the color you selected on its own layer.


Make duplicates


– Switch to your move tool by hitting the letter “V” on your keyboard.

– Click on the rectangle.

– Hold the alt button then right click on the mouse and drag the rectangle down.

– Do this again to end up with three rectangles.


Warp your Rectangle


– Select the top rectangle.

– Go to edit >> transform >> warp.

-Then warp it to the shape you desire.

– Hit Enter key after you are finished with the warp tool.

Place a gradient on your warped rectangle


– Double click on the layer that is warped. Your layer styles will populate.

– In layer styles select gradient overlay.

– In gradient overlay change the angle to 0 degrees.

– Change the blend mode to multiply.

– Next, make final adjustments to the gradient by moving it with your move tool.

– Lastly, hit ok when you are finished. It is located in the right hand corner.


Warp your text


– Select your type tool.

– reset your color chips by selecting the black and white chips.

– Type out the word “EGEEK”, select any style you like.

– Rasterize your type by right clicking on the type layer and selecting rasterize.

– Go to warp tool and size the text.

– double click on the layer again and change the text color to white.


As the CSS & HTML styles are becoming more robust and they are more widely supported, the options for fun modern design elements that can be created without graphics are virtually limitless, so you can use different new techniques to improve your web designing & to show your creativity with advance technology.


Ribbons & Banners


Pros & Cons of Banner Advertising


Saves Time

A pro of banner advertising is that it saves you the time of having to find advertisers on a continuous basis. It also saves you from having to manage and bill for the space. As long as your site continues to generate traffic, you will be served with advertisers.

Less Profit

A con is the lower pay in banner advertising. You get a smaller cut because you are not selling the space directly.

One Monthly Check

A pro for this type of advertising is the one monthly check you receive. You do not have to wait for the multiple advertising checks to come in on time.

For more reading about technology news in singapore and seo to online marketing do view more about other pages.

Sourabh Bhunje

Sourabh Bhunje, B.E. IT from Pune University. Currently Working at Techliebe. Professional Skills: Programming - Software & Mobile, Web & Graphic Design, Localization, Content Writing, Sub-Titling etc. http://techliebe.com/about-us

Leave a Reply