Jump to content
xisto Community

[photoshop]affiliate Button Tutorial How to create one?

Recommended Posts

Ok, in this tutorial we're going to create an affiliate button. It's very easy!


Difficulty: Easy

Completion time ~10 minutes

Required things: Photoshop, good brushes, pixel font, a brain.


Ok lets get started!



Open a new image, most Buttons are 88x31. So use that size.



Now we need to add a black ground. Simply; Shift+F5.

Now duplicate your background layer(the black one). This will be the brushing layer.



Grab a brush and brush, alternate brushes, you should only need to do a few clicks since the size is so small. MAKE SURE YOU'RE BRUSHING WHITE, THEN BLACK! ALTERNATE!


You should have something like this by now; depending on your brushes everyone will get something different.





Adding color/Contrast. Click the "yin/yang" button by your layers, and click "Brightnes/Contrast". Add about 30 contrast and click "ok". This will give your image some more depth.



Now lets add some color. Make sure your Contrast layer is selected. Go back to the "yin/yang" symbol, click it, and go to "Color Balance". Mess around with the sliders EXEPT for highlights.


You should now have something like this, depending on the colors you used. I use;

Shadows: +37, +49, and -12.

Midtones: +36, +15, and -35.


You should now have something like this;





Now you need a border. Create a new layer, and select all.

Now go to Edit > Stoke > 1px BLACK.

Now you will have a simple border.



Now for the text.

Grab your text tool and start typing your text in the middle of the button. Make sure you're using a pixel font. Serious1 is a good one.

I'll be using the text, "Sepias FX". Font size 10. Make it white.



Blending. Select your text layer, right click and go to "Blending Options".

I used these settings:

Fill Opacity: 70% Blending Mode: Screen

Drop Shadow: Defaults

Stroke: Default, 1px, black.

Now throw the text layer under the color balance layer and it's blended.




Now all that's left is to save it and host it.

I suggest http://www.photobucket.com/ for image hosting.


My final results:



If you liked this tutorial please register on http://forums.xisto.com/.

Also, if you use this tutorial, please sign up on my forums,


Edited by OpaQue (see edit history)

Share this post

Link to post
Share on other sites

Looks good. I like it. This will help out a lot of people who don't know how to make an affiliate button. A lot of people won't affiliate for the reason that they don't know how to make a button. You should extend on it and use the one you gave me with the animation. Make it more advanced to be used after people get the hang of it :D

Share this post

Link to post
Share on other sites

I say the font could be better. Since you're using a small sized font, it's important to turn off anti aliasing or else your font will be blurry. Besides, you want your button to look attractive so that people will click on it.

Share this post

Link to post
Share on other sites

I like this tutorial but there is little problem maybe try diffrent pixelfont because but this isn't goof pixelfont.. and this is very simple way affilate button :D.. I better prefer animated ones because like snlildude87 sad more intresting affilate button is the more someone wants to click it (I too click on buttons which are intresting).. But good tutorial with some fun :D

Share this post

Link to post
Share on other sites

Nice, but too bad. I dont use photoshop to make my buttions or images. But I will sure use your turtorial sometime when I am going to create a button with photoshop. I am currently using Fireworks 8 as my default image editor. :D

Share this post

Link to post
Share on other sites

That's for all your comments. As we speak, I'm writing part 2 of this tutorial with till teach you how to make an attrative animation.

Share this post

Link to post
Share on other sites
What???[photoshop]affiliate Button Tutorial

Guess I don't have a brain. Thanks for the insult, by the way. But while we are on brains. I have a question. Why didn't your brain give step-by-step instructions instead of "shift f-5 and..." That's where I got lost because when you shift f-5 a pop down menu comes up and you are on you own to figure out which option to pick. Evidently your brain is assuming (and we all know about that) that everyone knows how this  menus options function and  what you are talking about. 

I started going from option to option, on the menu, and starting over again and again with each option. I don't think that worked as intended because, next I went to the brush step trying to alternate from black to white. Nothing even close to what I am seeing here showed up. Actually it allowed me to change the black to white and then I was dead in the water again. I also noticed that I was only working with one layer and that made no sense to me.

I found this tutorial to be a total waste of time, if you are a beginner, because there are several places where you are left to wonder and struggle on your own. I find this to be one of the biggest problems with most tutorials out there.

Two suggestions; don't start your tutorial out with an insult and consider a video to follow along. Video tutorials are by far the easiest to work with from what I have experienced. That is, of course, if the brain of the guy making the tutorial isn't skipping steps or assuming you know what he is talking about.

But hey Brain thanks for the thought.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.