Most affiliates can be put in one of two categories:
- A good coder that thinks rainbow gradients and bevel emboss are essential for every design created.
- A good designer that thinks PHP, CSS, and HTML are online gangs that write encrypted letters to each other hidden behind websites.
I’m the latter category. So for all you coders/misinformed designers here are some Photoshop tutorials relevant to affiliate marketing.
For all you seasoned Photoshop pros you probably know how to do all these examples below, so I left you a little game at the bottom of this post.
Resizing Images:
Resizing images is something you gotta be efficient at, especially if you are using Facebook Ads or Plenty of Fish Ads. Here’s how you do it:
- Open your image.
- Create a new image using the dimensions 110 x 80.
- Drag your previous image into your new image file.
- Press Command T (Mac) or Control T (PC).
- While holding down shift+alt (this will keep the proportions of your transformation and will keep it centered), drag a corner of your image inwards to fit in the new 110 x 80 dimensions.
Adding borders to images:
- Click on the “F” icon (Layer Styles) at the bottom right of your layers window and select “Stroke”.
- The rest is pretty intuitive. For this example I used size 3px and “inside” position.
Raise images out from background:
When I have previously split tested flat creatives vs raised creatives, the raised creatives have always come out with higher CTRs. It takes a few extra seconds to increase you CTR by following the steps below:
- Create a new image with the dimensions you want.
- Click on the rectangle tool and make a white rectangle.
- Select the rectangle then press the little “f” icon a the bottom of your layers window.
- Select “Outer Glow”.
- Make “Blend Mode” normal. Select the color black. I like to have my opacity at 32%. Spread at 0%. Size at 6px. Now press ok.
- Now just duplicate that rectangle by clicking on “Layer” on your menu bar then “duplicate layer”.
Button:
A juicy call to action button is key for any creative or landing page.
- Click the rectangle tool.
- Your menu bar should change where you can select “rounded rectangle tool”. Make the “radius” 10px.
- Now download these Web 2.0 Styles.
- Once you have downloaded and installed the styles into Photoshop, select your rounded rectangle and click on the style you want in the window above your layers window.
- Now click on the “f” at the bottom of your layers window and use “Drop Shadow” moderately.
Improving Image CTR:
Another easy CTR booster is by just blurring the background and increasing the Brightness/Contrast.
- Select the Polygonal Lasso Tool from the toolbar on the left and trace round your subject.
- Once you have done that, copy and paste that selection so that you have a new layer solely of your subject.
- Now select your background layer. Click on “Filter” on the top menu bar then click “blur”. Select “Gaussian blur”. I usually opt for 1.5 pixels.
- Try tweaking brightness and contrast settings for both layers to make your image stand out more. I can’t really give you any example settings here because it is really dependent on the image you decide to use.
Animation:
You can get really creative with animations. Photoshop only allows you to do really basic stuff with it. If you want to get more advanced I definitely recommend Adobe Flash.
This takes a bit more explaining than I care to do. Plus these guys have already done a great job at writing this tutorial.
——————
Extra for experts:
Now for the Photoshop pros answer these two impossible questions and win a gold star.
How many times does Jean Claude Van Damme clap within a minute?
What does the girl in blue say to Van Damme ?
Gotta love Photoshop! I really like the technique you use when you blur out the background and play with the foreground brightness. Dramatically improves the image yet basic.
This is my favorite source for high quality Photoshop video tutorials: http://psd.tutsplus.com/tag/videos/
Dude thanks for the Web 2.0 styles. My buttons were bland but now they are sublime!
Great post man. Photoshop is probably one of the most vital tools in an arsenal.
Cheers for the PS tips, didn't know any of them. I definitely fall into the first category. Well, kinda, I'm not a good coder, I'm a great fucking coder.
Love the Tiger ad, lol. Looking at that animation makes me dizzy though.
Great post man! Thanks for the great tips!
great write up.. learned a couple things and thanks for the gradient link..
OMG, Jon Claud is disturbing… I love the little twirly point he does at the end.
If you didn't think he was gay before then watch the clip again and yes I agree somewhat disturbing didn't even recognize him at first – lol
oh $hit….Breakin' the movie! Afrika Bambaataa dayz. The guy with the beret after that part above is sick.
Looks like an extra from Breakin 2 Electric Boogaloo
Great post man- thanks so much for the tips!
Another great post, Lorenzo.
I've been using Fireworks for most of my design stuff but now I'm thinking of jumping over to Photoshop for the extra control and additional effects available.
Keep the great info coming…reading your blog is never a waste of time.
in keeping with the van damme theme…
Damn Mr. Green. Your posts are impressing me with their usefulness. I hope you don't run out of tricks anytime soon. Thanks for sharing some real skillz…
I love photoshop. I went to college for design and did two semesters of just photoshop. Fantastic resource for sure.
Thanks
I want you to have my babies, Mr. Green!
…that's what the girl in blue said
Hey you not only gave Photoshop tips but that for improving CTR as well.
Lovin' the blog as usual, Mr Green
Have fun in SF!!
Nice tips! Just added the outer glow to a few of my creatives for testing.
Thanks!
LOL, Van Damnme in the movie Breakin' – Now that's classic.
Oh man.. i had no idea that Jean Claude was in breakin'.. that pic is freaking priceless.
just like this post.
Ive been silently watching your blog for a while, and might i say, i love your content.. but that pic of Jean just made me have to comment.
Great tip on creating a blur in the background and raising the foreground contrast.
Great post! Have been using the Web 2.0 Gradients for quite a while, one of my most used items in photoshop. Really easy to expand off of them to make them different too.
A+ Posts my man.
Man props for a great post. Its amazing how these small things can make a big difference. Going to do a post of blogs I read and you're posts lately are definitely putting you near the top of the list. Keep it up man.
OMFG, lorenzo. my favoritist blog everrr! hope to see you in new zealand for your winter, not mine
Excellent post! Now you've got me convinced to go back to school.
This is fantastic!!! I like Photoshop. Thanks for your information.
Very informative tutorials. Before I was involved with Internet marketing, I designed sigs and did other gdx work. It's nice to see that you can use other skills to help profit.
Thanks for the tutorials. I had no idea the web 2.0 buttons were so easy to make. Very nice theme here as well. You put a LOT of work into your posts.
DUDE, I combined your tips from this post and the ogilvy Mafia ads and created a .325% CTR WINNER!!!!
http://screencast.com/t/YzQwODVmZ
Once I play out this campaign I'll show yall the demos/stats and shit, but Mr. Green, you da man.
Good stuff man! Let me know how it goes.
Taking action!
Another good way to go about making the image stand out from the background is using the 'Smudge' tool right under the paint bucket icon.
Yes Photoshop remains the cream of the crop, however it's pricey and Gimp can do everything Photoshop can do PLUS it's free.
You can't beat Adobe. Whether its photoshop or illustrator they are the best!
Outstanding post, you have pointed out some wonderful points , I besides conceive this s a very wonderful website.
Wow, I guess I am not the only one having all the enjoyment here! Keep up the excellent work, thanx.
Okmulgee Attorney
Wow, it's amazing how these small things can make a big difference. Going to do a post of blogs I read and you're posts lately are definitely putting you near the top of the list, Nice..
You're actually such a legend Señor Green, muchos man love.
[...] Photoshop Guide For Affiliates Most affiliates can be put in one of two categories: A good coder that thinks rainbow gradients and bevel emboss are essential for every design… [...]
Your posts are impressing me with their usefulness. I hope you don't run out of tricks anytime soon. Thanks for sharing some real skillz…
Read more: http://www.mrgreen.am/affiliate-marketing/photosh…
Was looking through your archive blogs, and stumbled upon this; you've reminded me why you're my favorite blog poster. Great information!
Very great post. I simply stumbled upon your blog and wished to say that I’ve truly enjoyed browsing your blog posts.Please write more so that we can get more details:) thanks for all this.
this is a great one. the flash ones in adobe is definitely helpful.
and van damme dancing is so funny. hahaha
What’s up to every one, for the reason that I am truly eager of reading this blog
Hi there, I discovered your website by way of Google whilst searching for a related topic, your website got here up, it appears great. I’ve bookmarked it in my google bookmarks. I am not certain the place you’re getting your information, but good topic. I needs to spend some time learning much more or understanding more. Thank you for excellent info I was looking for this info for my mission.
nice blog. keep going!
Thanks for the tips. Im pretty new to ads and stuff. For the most part I've just been throwing up any image that looks decent with out much thought. My CTR are horrrrrrrible! I'll be trying some of your tips!
Nice touch with the Van Damme