Welcome to slayer’s blog | Web Design tips & tutorials
HomeAbout Me
Design, Movies

Archive for the ‘Design’ Category

This post was guestblogged by JoeDirt aka Mihaita.

Ever since i was a little boy i liked Max Payne. My favorite game was Max Payne, my idol was Max Payne. I wanted to be this Video Game person. A few year later, when i heard that Take two announced Max Payne 2, i was shocked, but happy in the same time. My favorite game had now a continue! I got Max Payne 2 for a friend who had internet. In those days i only had dial-up, and it was pretty hard hard and expensive to download a full game. Anyway… i loved Max Payne 2. It was awesome! It had everything you’ll ever want from a video game.

A few month ago i read in a IT magazine a article: “Take two announced Max Payne 3″.  I shouted out loud: “YES! Max Payne 3 is coming!”, My brother looked at me saying “WTF?!” lol. Unfortunately, Max Payne 3 will appear in 2009 :(. But, until then, Max Payne the movie will be in cinemas from 17 October 2008 (USA). Oh, i can’t wait! here’s the movie trailer: http://youtube.com/watch?v=JboQmDIdKWs (from the trailer, the movie looks exactly like the game , you can see the same dark and cold alleys, the same winter nights, the same action and adrenaline)

This entry was guestblogged by lorz.

Some of you may have already found out, but for those who didn’t, deviantART has reached version 6.

Their layout is improved: a new front page design with quick-loading thumbnails and an effective search, the new footer with polls and news, a new site navigation (in my opinion this is their big improvement) and a new message center (but some of you may notice a delay in appearance).

Something that I don’t like: their banner rotating system! Even if you don’t browse the website, it keeps loading on the same page different ads. I find it really unnecesarry. And also, I don’t like the ads that appear while surfing their website.

Although they have a great community there, the administrators are a little bit greedy by placing full page ads while browsing the website. But all in all, they made an improvement to the website and they won’t stop here.

Read more here.

This is a very very very old tutorial that i wrote back in 2006(when i owned the TwistedGFX forum). I found it on my old computer, so i decided to post it(i modified a few things to lower the difficulty level).

As i said in a previous post i started my designer career as a GFX artist, i got 50-100 outwar points for an animated profile picture back then(my outwar name was SoulC4tch3r), so i wrote a tutorial of how to make animated rain.

Step 1:
Grab any picture, and resize/crop it to fit your needs. I resized and cropped this robot wallpaper to look good as a 250×250px outwar profile picture.
IPB Image

Step 2:
open up the image in photoshop, when done press: CTRL+SHIFT+N to create a new layer, after this press SHIFT+F5 to fill the layer with black color( belnding mode: normal ; opacity 100%)
IPB Image

Step 3:
Here comes the little harder part ;) . Go to Filter menu->Noise->Add noise; there set amount between 80->87%; distribution-> gaussian; enable Monochromatic mode.
IPB Image

Step 4:
After you are done go to Filter->Blur->Motion blur; there you can adjust the rain’s lenght. The bigger the value the bigger the rain strokes will be. Remember to set the angle in values between +/-28 and +/-50(depending on the desired alignment of the rain)
IPB Image

Step 5:
Now go to layers box and set overlay mode to your rain effect layer. To adjust it a little you can use Soft Light.
IPB Image

Step 6:

at step 6 repeat all the steps from step 2 to step 5, the only thing you need to change is the angle at motion blur, for example if you selected -31 as i did select -33 now.
IPB Image

Step 7:
now press CTRL+SHIFT+M to transfer the image in Imageready so you can do the animation part also. You can do it in photoshop also by opening the animation box)

Step 8:
Open up the animation box : Window -> Animation
a small box should appear. Now click on the button that is circled once and duplicate the frame
IPB Image

Step 9:
Now that you have 2 frames associate one frame with 1 layer and other with 2nd layer(see bellow)
IPB Image

Step 10:
If you made it to this step congratulations! You should now have a picture with rain on it. Make sure to save the file in a .gif format with no dither.

Result:
IPB Image

Of course you can vary the effects and add extras to them like lightning, brightness modification, clearing th rain from the character’s body. Don’t be scared! Photoshop is your friend!

Seeing how a big success my other font collection post was i decided to surf around dafont again and make an other collection of fonts that are great for logos/banners and of course branding.

This time i didn’t use pink as the base color for the text. I used grey because i think the purple(as betng said:“you got to love the slut purple color”) can give a bit more extra to the fonts and this can confuse you.

All the fonts are available on dafont , and you can visit the main font pages by clicking on the previews.

no. 1 - Cicle

no. 2 - Collegiate

no. 3 - Dusthome

no. 4 - Dustismo

no. 5 - Zachary

no. 6 - Eurofurence

no. 7 - Kill

no. 8 - Lacuna

no. 9 - London Between

no. 10 - Mammagamma

no. 11 - Monofur

no. 12 - National First

no. 13 - Santana

no. 14 - Tuffy

Remember that dafont.com is one of the best free font resources, and you can find great free fonts there. For example why buy a premium paid font when you can find a free alternative? Also note that the presented fonts in this post are those fonts which weren’t presented in my previous font collection and they represent the fonts that i like and that have a web 2.0 feel.

Don’t stick just to the fonts presented here! Go ahead and browse dafont.com

The usage of icons can give a more professional aspect to your designs, especially if you use high-quality icons. At this point you might say that you won’t find free HIGH-quality icons.

WRONG. You will find quite many high quality icons, because there are quite many designers who do open source work. Open source work brings designers reputation/traffic to their websites/backlinks and possible custom jobs, so yeah it’s worth to do open source work.

In this post i will present a few icon packages that you will definitely find useful at a time

Website Icon Packages:

1) FAMFAMFAM’s silk icon package
FAMFAMFAM’s icons are the most widely used on the web. His icons are used on huge sites like stumbleupon, and 100% sure you saw his icons on many websites. This is the BIGGEST icon package which contains 1000 icons! All the icons come in .PNG format and in 16×16 px sizes.

The silk icon package is licensed under a Creative Commons Attribution 2.5 License.

2) Pinvoke icons package
This is the first version of the package and it contains 200 10×10px icons and 200 16×16px icons. All the icons come in .png format. I think that compared to FAMFAMFAM’s icon package these icons have better contrast and “more life” in them.

The icons are licensed under a Creative Commons Attribution 3.0 license.

3) Iconjoy website icons packages
There are 2 website icon packages provided by Iconjoy. The total number of icons included in the 2 packages is 26×2 = 52. All icons are in 16×16 px format and come in colored and greyscale version.

Icon file Types: .ico, .icns, .tif, .gif, .bmp, .png

4) Sweetie Basepack
A great package of 182 icons which come in .png format and in 3 sizes: 8×8 px,16×16 px and 24×24 px. You are allowed to make derivatives with the included Photoshop documents

License: Creative Commons Attribution-ShareAlike 3.0 Unported

———————————————————-
You will also find a big list of icon resources on MaxPower’s blog

Feed Icon Packages:

1) Zeusbox Studio Feed Icons Pack
Their feed icon package is one of the best ones available on the web. This is the second version of their icon pack. It contains 10 more feed icons than in the first version. The pack is released under the Creative Commons Attribution-No Derivative Works license.

The icons come in 2 sizes: 16×16 px and 32×32 px. All icons are in PNG format

2) IconJoy Web 2.0 RSS icons pack
These icons are really clean and they look great on a bight web 2.0 design. The pack contains 4 different icon types in 2 sizes: 16×16 px and 32×32 px and 4 colors. There isn’t a license attribute specified.

The package contains the icons in .ico, .icns, .tif, .png format along with the .psd source.

3) Bittbox Glass style RSS icons pack
Bittbox approaches the design of RSS icons form a different perspective. I’m talking about the glass effect here. The icons come in 2 different styles: with and without reflection. License: You may not redistribute the icons on your website.

The package contains 217 icons in .ai, .eps, .svg, .png, .jpg formats and in 8 different color combinations.

4) Bittbox Glass style RSS icons pack
Think outside the box! Why make RSS icons with rounded corners or stuffed into boxes when you can create big RSS icons in circles? This is exactly what Dirceu Veiga did. An icon like this looks great on a design where you used big elements(to keep the scale). License: available at Fasticon License page.

You can download the icons for Windows/MAC/Linux in 2 sizes and 4 different colors.

The package contains the 4 icons in .ico format, this meaning you can use them in any size you want :)

Social Bookmarking icon Packages:

1) Vikiworks Social bookmark iconset I
Package that contains 12 icons in 3 sizes - Large - Medium - Small. These icons are ideal to use on your blog and/or website if you want to “influence” a bit more the visitor to submit to a particular social bookmarking site.

2) Vikiworks Social bookmark iconset II
This second package contains 10 more social bookmarking icons and is the sequel of the first release. These also come in the 3 sizes just like at the first version. It seems that these icons look a bit more professional than those from the first package. Improvements are always welcome :)

3) Snap2Objects 3d Social bookmarking Icon Package

Add a cool and unusual 3d social bookmarking icon to your blog/website. A 3d icon like this will surely grab attention, maybe a little too much attention :) Icon pack licensed under Creative Commons Attribution 3.0 License

The package contains 5 icons in different perspectives. The icons come in .png format. Remember that these are vector icons, this meaning that the PDF file is also included in the package

4) Snap2Objects 3d Social bookmarking Icon Package

This is yet an other 3d icon set but the icons are shown from a different perspective. You can notice that their shape looks like a pan which just got pulled out of the oven.The package contains the 6 icons in 2 sizes. They are in .png and .ico format. No license info specified.

Remember that the presented icon sets are just bits of the gigantic resource that is available on the web, so if you are looking for some slightly different icons than don’t hesitate to use Google or most importantly Deviantart!

I keep seeing more and more designers that get scammed. They send the design and they never get the payment. There’s not much they can do except to say out loud the name of the guy who scammed them and leave a negative rating for the buyer.

If you got scammed i’m sorry to hear that. If not trust me you don’t want to get into a situation like that! Especially if we are talking about amounts above 50$.

Recently my friend Ben got scammed because he did the stupid mistake of sending the PSD file before getting paid. He never heard of the buyer since then.
To avoid being a situation like the one mentioned above and to smoothly sell your designs you need to follow some really simple steps and make them as rules and follow them(like in Transporter movie,really) :

1 - Never change the deal - For example if someone hires you to design him a directory and when your half way trough he tells you to design a forum instead either tell him to go find someone else or tell him how much extra it will cost

2 - Provide portfolio - When applying for a job(if the customer doesn’t contact you) make sure you provide a link to your portfolio and references. It can really affect a potential customer’s decision after seeing some of your previous work.

3 - Ask the customer as much details as possible - I usually ask about the niche of the site, the desired color combination, the structure of the theme and ad optimization. In this part of the chat make suggestions regarding the informations you asked and always sustain it!(for example: “it would look better if you would place a 468×60 ad in the right corner of the header because the CTR would be bigger and you would fill in a potential empty space”)

4 - ALWAYS watermark the preview you send the customer - Photoshop saves the previews in a high quality format which can be sliced up just like a PSD file and coded. Make sure the watermark’s opacity is 10-25% and appears in a way that the design is clearly visible but the watermark is visible also.

5 - Interact with the customer as often as you can - If it’s possible to chat with him using an IM client than ask him feedback every time you make a more important modification. If your talking via email than email him the watermarked design for revisions(it would suck to make the complete design and in the end not get paid because the customer doesn’t like it)

6 - Set the price before everything - You set the price before you start designing. That price doesn’t change no matter what. If the customer is satisfied with the theme he has to pay the set price. I heard that some designers ask more $ once the design is finished. If the customer really needs the design he will pay the extra fee, but trust me he will never hire you again.

7 - Respect the time frame - If you tell the customer the design will be finished within 48 hours including revisions than respect it! Providing the design at time may be vital to the customer, and if he sees that you passed it he will start getting grumpy and he will have an other reason not to choose you next time.

8 - Keep it original - DO NOT USE ELEMENTS FROM OTHER THEMES!(Except icons and text). Yesterday a guy told me that he downloaded all the template monster collection from a warez forum so he can get inspired from them. If you do this than the design won’t be unique.

9 - Check for Bugs - Check and recheck every bit of your theme for bugs. Even small bugs cna ruin a great design

10 - Most important one - NEVER and when i say never i mean NEVER send the design before receiving the payment! This is the easiest and most common way designers are scammed! Tell the customer to send the money to your paypal/moneybookers id and only after receiving the money send him the design.

Also remember to provide support for your designs. This means that if the customer will require in the future some minor modifications do it without asking any compensation(money). This doesn’t apply at major modifications. If you respect the customer he will respect you.

I really hope this guide is useful to you and will help you decrease the chances (%) of getting scammed to a value below 10%.

I mentioned in a post at the end of last year that i’m switching to professionalism. Well stuff got really delayed because of the health problems BetNg4U had(he couldn’t work for more than a month) so yesterday he started re-coding the theme from bottom up using a new technique to make it look good in all browsers and to reduce load time.

As you can see the design is a dark design, more pleasant to the eye than the white in my opinion. Dark colors always calm my eyes and i like viewing darker colored websites. The themes is as unique as it can get, it will have lots of cool features and more tutorials!

Yes its true that it will be more pleasant to the eyes and you, the visitor will probably enjoy it more than the current theme, but you have no idea how many headaches it will cause me because the background isn’t white. This means that i have to edit all the images in my posts and give them transparent backgrounds(so i don’t have to do this again if i will have an other colored theme) but heck, it’s worth it.

A problem which is still unsolved is the AD placement(extra money is better than no money), but i’ll figure it out eventually.

Unfortunately i can’t release the theme as a free theme because i want my blog to have a unique design for a while. When i’l get bored of it i will release it as a free theme and design myself a new theme so sooner or later you will get to use it ;).

So, if your not a regular reader make sure to check back next week to see the new design :) 

Ya, well people are not born with designing/coding or any other capabilities, they learn it and perfect their skills in time, of course if they like what they are doing. The worst job is when your doing something that you don’t like: time passes slowly and you can’t wait to go home. This is why i would be a sucky coder,lol.

I really hate coding, you got so many lines to write lots of lines, learn lots an lots of codes and attributes, and it looks really boring. As a designer i can use my creativity @ max, but still i have to respect some standards(to design in a way that the coder has an easier job and the site where the design will be used won’t have a huge load time.

Back in 2005 i was a complete noob in websites and web development and such.I just got my internet connection setup. I had a counter-strike clan and really wanted to make a website for it. I found a great free host(back then) , signed up having no idea how to create a website.

A colleague of mine suggested that i use Web Page maker a easy to use website builder software for newbies. I downloaded ti and i really enjoyed it. used a predefined template for the first version of my website, after which i saw a design somewhere and saved the images from it and manually combined them together with web page maker.

I searched google for some counter strike related images and made the sections for my site. I remember how happy i was when i found a free forum host. I signed up and made my first forum(even though it was remotely hosted). As a web counter i used the crappy bravenet counter and submitted my website to lots of romanian toplists.

When i found about Google Adsense i decided to sign-up and after my account got accepted i placed the ads on my website thinking that i will earn atleast 10-30$/day. Those 10-30$/day turned into 0-0.05$/day. Heck i clicked the G ads 1-2 times/day,well till i found out that i can get banned for doing that.

Meanwhile i joined the free host’s support forum where i showed off my site. Some congratulated me, others critiqued me and suggested that i use dreamweaver than web page maker. This was the point when i realized that the usage of web page maker isn’t a good way. I learned lots and lots form that forum, starting from how to setup my own forum to how to manage a website and how to think stuff over before acting. Also i got the chance to learn a bit of seo also.

A year later i became moderator there. Too bad that the admins who managed it left the hosting company and since then the forum is really empty.

For a long time i was playing outwar(i’m still palying it) and because 100 points cost like 5$ i started making profile and crew pictures. I searched for wallpapers and cut the images out and put text over it. Got 10-20 points for a pictures. After that i met xnight from who i learned a bit of GFX and he basically showed me the road to gfx. We started a gfx forum which ran for 2-3 months after which people started fighting and disputes rised, and i didn’t have a proper webhost so we closed it.

From that point till december 2006(till i found digitalpoint forums) i didn’t do anything significant on the web, mostly played dota/counter-strike/diablo 2 onlineand played ow and made profile/crew pictures.

I also got a free domain name linkyard.net and made a web directory and submitted my directory into directory lists like Directorycritic but then abandoned the project because i had the domain trough accountexec over at godaddy.com and i couldn’t contact the owner.

When i found digitalpoint i think i was searching for some GFX tutorials to make better pics for players on outwar so i can pull more points, and then started browsing around, and saw a make money online with this guide thread and so i signed up and started posting. I was overwhelmed by all the new posts that popped up and posted only in those that i was interested in.

I made my first website design on 5th january 2007 and sold it on 7th january for an amazing ammount of 2$. I think i could have sold for more, but at that time i didn’t have paypal available in my country, so i tried selling using alternate payment options:

“payment trough egold(sorry guys, paypal isnt available in my country), i also accept western union(rofl i cant believe i said that)”

I think i worked like 6 hours on that design, as you can see almost all fonts are pixel fonts(back then i didn’t know that you have to actually have the font on your PC to display it, lol). But heck it was a start, i peaked over at other people’s designs and saw that how and what are the basic structures of a design and did stuff on my own. This is one of the 2 proxy designs i made in my entire life. I don’t like to design proxies, they don’t sell for much.

Tim Garcia, a guy who i knew from outwar and was added to my messenger list(i have no idea how he got there) helped me a lot to start up. I just asked him how i got him in my messenger list and we started talking and started a crew together on outwar which today is a TOP 5 crew. We trusted eachother and this helped me a lot. Mostly because he was from USA and had a paypal account. He let me use his account( when i wanted to send money i told him where to send it, and when i got money i used his paypal email and kept logs of incoming/outgoing $) till paypal was fully available here in Romania also. We are good friends, we chat about different stuffs daily, share opinions and…we still play outwar(we are addicted to it,lol).

For a long time i auctioned my directory themes for 5-20$/piece but then got an offer from Sam to design him a custom directory theme for valentine day/business directory usage. I remember i got 30$ for the job. That was a turning point in my designer career and i started looking for customers who want custom themes. It was a bit hard, because i had low itrader rating and not much of a big portfolio to show, but i got a few people who hired me and that way i slowly built up a portfolio(not the current one), but i still kept selling designs for 5-20$.

Meanwhile i started my own premium directory and in about 6 months my directory got PR 4 and about 60 links have been submitted generating an income of about 150$. I sold the directory to a guy from digitalpoint for 400$, and i have absolutely no regrets.

I saw threads where people were selling wordpress themes so i taught il give it a try and made a wordpress design(in like 5 hours). I enjoyed designing it so much that since then i enjoy designing wordpress themes the most. In my opinion you can be extremely creative at designing wordpress themes.

I progressed and saw that web 2.0 designs get higher bids, and more and more people are looking for them, so i decided to check out web 2.0 standards and examples.

Back in april i started a romanian webmaster community for which i bought hosting from Servage , a vbulletin license and a .ro domain name. The community still runs, and now and then contest are organized. For a while i had revenue sharing implemented, but removed it because no1 benefited from it because the CPC was very low:0.001$-0.005$ because only romanian sites were advertised.

So i designed lots and lots of wordpress themes that i got coded and sold sponsored links on them or just bought the ready coded themes. It was a great source of income, i got like 200$ from 3 sponsored links, till themes.wordpress.net stopped accepting sponsored themes. Then the prices dropped with like 300-400% so i stopped doing it.

I practiced and practiced till i got to a point when i decided that i will no longer auction my themes and i will only make custom themes. I started with charging 40-60$/custom theme design and now i’m charging 170-250$/custom design because the quality of the themes got better and better.

For quite a while i’m only posting in BUY/SELL/TRADE sections of digitalpoint, because in the other categories i rarely find topics i’m interested in. I used to like Reviews section, but it got fiulled with topics where people ask opinions about a forum/blog which they installed a hour before and setup a free theme for them.

I deleted all the designs from my old portfolio and placed only the new custom designs that i made(there are a few exceptions that will soon be deleted).

Now more and more customers come and interact with me, this meaning that i have to search for work rarely. I can thank this to my itrader rating over at DP forums and the references, and ofcourse my portfolio :).

My father was a journalist and even though he wasn’t always there for me i learned much from him and it seems that i inherited the talent of writing. Thats why in august last year i started My blog where i decided to write only about stuff that i like(technology/IT & C).

I decided to release Free themes that don’t have sponsored links(why should i fill your blog’s footer with rubish links?), only a Designed by: link pointing back to my blog, and i will still continue to periodically do it. This helps my blog get more exposure, this meaning more readers. If someone makes a blog and doesn’t have readers than he’s writing for himself.

This said, currently i run my romanian webmaster forum and my blog,projects which i won’t abandon. Also i’m saving and investing money into a future cool project which hopefully will generate a constant flow of passive revenue(free money), but as they say: “to get money, you need to invest money”

Link to the contest: http://abux.info/viewtopic.php?p=79705

The competition started on 16th January and will end on 7th February 2008

The winner will get “an amazing prize of up to 1000 refs”

What i don’t like in that are the 2 tiny words: “up to”. One of my ISP’s slogan is: “achieve speeds up to 2mb/s on the web” . Yeah right, if i would go and start yelling at them that i never get that speed they would explain as this:”that speed is available only in ideal circumstances”

The judging is split in 2 parts: 40% - user votes and 60% - judge votes

Here is an overview of what counts:

- Extremely creative and undeniably unique (20%)
- Perfect colour combination and typography (20%)
- Easy navigation and accessibility (20%)
- Clean, neat, properly-indented with no additional whitespace XHTML Strict / CSS standard-compliant with cross-browser compatibility. (10%)
- Table-less web design (i.e. CSS) that is non-graphic-intensive. Tables usage only when appropriate. (10%)
- Overall impression (20%)

By this time you should realize that any percentage counts and those 1000 referrals can bring you some great cash!

This means that you will have to invest a great deal of work in your design and ask designers to review it before you start coding it, because if your design sucks you will make a BIG mistake if you code it.

So the competition’s requirements are pretty clear: use photoshop to design how you would like bux.to to look like. It’s all about creativity and imagination, you just have to put your ideas on paper(photoshop in our case).

Basically what you need to provide is a sleek design with a web 2.0 feel. Do not implement useless elements in the design like links/content that don’t have their place there.

Make sure you respect the submission guidelines!(use the given pattern) or you will have a big chance of getting Disqualified!

Here’s the submission pattern in case you didn’t see it on the forum:

Submission Format -
Name: …
Username: …
Design Screenshot: …
Design HTML Preview: …
XHTML Strict / CSS Compatible: Y/N

The guys over @ bux.to decided to make the contest instead of hiring an external designer. Its cool of them to interact this way but i don’t think it’s the best solution judging the designs i saw so far.

If you have a bit of creativity and know some web 2.0 terms and you’ve got photoshop than you can easily win the competition.

MAKE SURE THAT THE DESIGN WILL BE WEB 2.0 ! This means no ugly gradient usage, no excess usage of images, and most importantly NO BEWEL AND EMBOSS!

If you will make a design like: http://i11.tinypic.com/6tvids3.jpg than your chances to win the competition will be somewhat close to 0.00000000000000001

A guy from DP wanted to hire me to design him a winning design with a great accent on the winning word. When he told me he wants to pay 100$ for a job like this i was like: “okay, lets forget about it” and said good bye.

As a designer i checked the submissions and to be honest you have quite good chances to win the contest, if your smart that is.

Use any resource you can! but don’t be a dumbass! DO NOT COPY an existing design/website because sooner or later they will figure it out that the design isn’t original.

Notice that the header image from this design: http://nlhu.kooit.net/buxto/ is a copy of a wordpress design’s header image which is sold on Template Monster.

I say it again:Keep it original!

Here are a few resources that can come really handy:

www.dafont.com - Free fonts site

www.dezinerfolio.com - You will find packages of photoshop gradients and styles

www.famfamfam.com - The well known website of FAMFAMFAM’s icons.

www.pixel2life.com - Photoshop tutorials

www.tutorialized.com - Photoshop tutorials

Which designs are in front so far?

As said above i checked the submissions and so far i think these guys lead the competition:

http://img99.imageshack.us/my.php?image=080119123152msie60windoyn8.png

http://www.masteringyourdesign.com/buxto1/

http://www.masteringyourdesign.com/buxto2/

http://i143.photobucket.com/albums/r139/anthony_phan/buxtopng.png

All of the designs look good but they could require improvements.

A special compliment goes to

http://img166.imageshack.us/img166/7964/buxtobf3.jpg

along with a suggestion:

The design is great, it really looks pro, the only problem is that i don’t think that a trashed design(its a design type) would quite fit a website like bux.to

Good luck to all of you who participate, i’m crossing fingers for all of you :)

If you want me to review your design or just share something with the readers about the problem feel free to email me at tom@thaslayer.com

Many people over @ digitalpoint pay $10-20/a banner with animated text(which i also did till i figured out how to do it) and they don’t even realize that its a 5-10minute job. How does that sound? 20 bucks for 10minutes of work.

This is my first tutorial of this type(not GFX), i tried to explain it as clearly as possible, if you didn’t understand something feel free to ask in a comment.

First of all begin with selecting the banner size

Here are the most common standard sizes that clients require banners in:

Leaderboard (728 x 90)

Banner (468 x 60)

Button (125×125)

Skyscraper (120×600)

Wide Skyscraper (160×600)

Now that you decided which banner size you want to use create an empty photoshop document:

In this tutorial i will create a banner (468×60)

First of all you need to decide what base color you want your banner to have(the background, because everything will be made to fit the background’s color(fonts,gradients,styles)

By pressing SHIFT+F5 fill the background with the desired color(i used #1c1d1e)

On the left or right side of the banner put the client’s logo but make sure it doesn’t use more than 35-40% of the space( i created a fast text logo for this tutorial)

Next up add some colors to the banner(Add elements, use the gradients from dezinerfolio if your a newbie BUT DO NOT EXAGERATE!), if we just put the animated taglines the banner will look very empty.

Make sure the colors BLEND! if they won’t blend together your banner will look like a circus.

Also add as many taglines as possible to fill the space, or add renders to the banners(the best free renders resource is located at www.sxc.hu ) also make sure the render fits the niche, here i used a random render

As you see i used 3 taglines, group them then duplicate the group and rasterize it by pressing CTRL+E , hide the original group(untick the eye) .

Now its time to define the other 3 taglines and do the same(make sure they are in the same position as the first taglines were).

Now press the transfer to imageready button to transfer your document to Adobe Imageready.(by using this button all the layers/blending options will be transfered and opened in imageready - also the document will be cleared from photoshop)

Woohoo! If you made it this far than don’t give up because there is just a little road to go till you get your cool animated banner!

Remember when i told you to duplicate the tagline groups? Well this is the time when you will use them, but before everything go to Window menu and tick Animation option

The animation bar should appear in the bottom of your screen:

Now its time to play with the 2 rasterised layers(Tagline 1 group rasterised and Tagline 2 group rasterised)

For each layer apply a Motion Blur of 10 px and angle of 0 degrees by going to Filter menu -> Blur -> Motion Blur

The layers should look something like this:

By pressing the button next to the trash can in the animation bar you can create new animation layers.

  1. In the first animation layer put the Tagline 1 group
  2. In the 2nd animation layer put the rasterized and motionblurred Tagline 1 layer
  3. In the 3rd animation layer put the Tagline 2 group
  4. In the 4th animation layer put the rasterized and motionblurred Tagline 2 layer

You can do this by ticking/unticking the eye in front of the layers on each animation layer.

Now by pressing the arrow that points down next to “0 sec” for animation layer 1 and 3 set “1.4 seconds” and for others set “0.1 seconds”

What? Are you expecting more steps? If so i hate to tell you that this was the last step.

Here’s the final product:

And to repeat what i said at the beginning of the tutorial:

This is my first tutorial of this type(not GFX), i tried to explain it as clearly as possible, if you didn’t understand something feel free to ask in a comment.
If you are looking for professional banners at a very reasonable price i suggest you check out MinibannersZen