Creating professional animated ad banner using photoshop

Many of us waste our money for the blog expenditure. Advertising is one of the most popular way to uplift our business. Especially, we use graphical banners in advertising platform. The most attractive, professional looking, and animated banner can impress any person that who see the banner in your website. You can make your own professional banner with out wasting your money even you are not skilled in banner designing.



We can design our banner in photo shop, it just take about 20-30 minutes. This step by step tutorial helps you to create professional, attractive and animated banner.

So, let's start with new document. We will use standard sized banner which is 468X60px. File > New. Type width 468px, height 60px and Resolution 300px.

I am creating banner for hacktutors.info So, you have to include your own site brand.

Use the text tool to create your site logo.


Now, we use Ellipse shape tools and create round shape to give a proper looks on the right hand side of the banner.


Give it some color by applying Gradient. Layer > Layer Style > Gradient Overlay.


Apply Inner shadow and Drop shadow as default option. But, you have to change both opacity in 25%.


You can also use white color gradient in background. Add the rounded corner shape tool and created a shape just below your logo for the tag line. Appliy a gradient layer style with the following colors.


Also, apply 2px white color stroke. Layer > Layer Style > Stroke. Then, type you website tag.



Now, you banner is ready to animate. Use Type Tool and type a text for the first frame.



Now, hide that text by click on eye icon.



Again use Type Tools and write your second line. Second line must be in same line as you type in first line.

Now, banner looks like this:



It is ready to animate. Click "Switch to ImageReady" button below the left tools box. But, it is not available in Photo Shop CS4. For the CS4 users, Go to Windows > Animation.

Click the new frame icon. It is also use to duplicate the last frame.



Select the second frame and select the visible text layer and press up arrow twice. It will move the visible text 2 pixel upward.



Now, Duplicate the last frame. Move the text down about 10px. Or press 10 times down arrow. Set the layer's opacity 70%.



Duplicate the last frame. Move the text layer by 12px. Or press down arrow 12 times. Set the layer's opacity 40%.



Again, Duplicate the last frame. Now, hide the current visible text layer and make other text layer visible.



Move the text layer down at same position as other text was. And set the opacity 40%.



Again, Duplicate the last frame. Move the text by 12px upward by pressing uparrow 12 times. And set the opacity 70%.



Duplicate the last frame. Now, move the text by 6px up by pressing up arrow 6 times. Set opacity 100%.



Duplicate the last frame. Move the text by 2px down by pressing down arrow twice.

At the bottom of each frames, you will see "0 sec.", this is the time between each frame. We have set all of these to "0.05" OR "0.1", any, depends on how fast you want it.

To make it good, try to put time to "0.1" to all frames except first and last frame. You have to put "2.0" seconds in the first and last frame time. And it will looks like this:



And finally your banner is ready,


Now at last, Save it for the web with suitable banner resolution.

You can design your own banner by showing your result different from this. This is just an example for you.

So, how is it? Hope this was not so difficult. Feel free to give your suggestion and your opinion. If you are confused in any step, then you are most welcome to ask me any question via comment. You can show me your result after you have done :)

COMMENTS

BLOGGER: 18
Loading...
Hosted by HostGator
Name

Adsense Adsense hacks Advertising Affiliate Marketing Announcement Antivirus Application hacks Applications Backlinks Blog Blogger Blogger Features Blogger Help Blogger Roll Blogger Templates Blogger Widgets Blogging Bluetooth hack Bootable Browsers Business Cell phones Contest Cool tricks CSS Device Download Email Marketing Entertainment Facebook FeedBurner FIFA World CUP Files n Folders Flash Free software Fun with Windows Games Gmail hacks Google Google hacks Google Plus Graphic Hacking tools Hosting How to HTML Info Internet Tips ip address iphone hack Ipod hacks Javascript Keyword Research Make Money Blogging Make money online Mobiles Monetize Nokia hacking Page Rank Password Hacks PC Games PC Hacks Photoshop Promote site Reviews SEO Social Bookmarking Social Media Symbian hack Tips n Tricks Traffic Tutorials USB Virus Web 2.0 Web design Widget Windows Tricks WordPress WordPress Themes
false
ltr
item
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips: Creating professional animated ad banner using photoshop
Creating professional animated ad banner using photoshop
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4guYEhqW2biSAULadOhT40Md5Aztibda9YmYCqOCvvQIo6yMnzmdBTx1ekfaVCt4Gqe0mGB9hGWpSlYlOLNum5C-e_DdjFD4SRa0tKe1h8rOOhkdrKXbPfI9AEN-bg99dhu6_niJfRIY/s1600/a.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4guYEhqW2biSAULadOhT40Md5Aztibda9YmYCqOCvvQIo6yMnzmdBTx1ekfaVCt4Gqe0mGB9hGWpSlYlOLNum5C-e_DdjFD4SRa0tKe1h8rOOhkdrKXbPfI9AEN-bg99dhu6_niJfRIY/s72-c/a.jpg
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips
https://www.hacktutors.info/2010/06/creating-professional-animated-ad.html
https://www.hacktutors.info/
https://www.hacktutors.info/
https://www.hacktutors.info/2010/06/creating-professional-animated-ad.html
true
7369343002377078183
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy