[photoshop]affiliate Button Tutorial How to create one?

[Kubi 0]

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!

 

Step1:

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

 

Step2:

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.

 

Step3:

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.

 

 

Step4:

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.

 

Step5:

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;

 

 

Step6:

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.

 

Step7:

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.

 

Step8:

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,

sepiasfx.net/forums

Edited December 22, 2016 by OpaQue (see edit history)

[Plenoptic 0]

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

[snlildude87 0]

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.

[wassie 0]

very nice tutorial,good expaining. Maybe add some animation to it.

[Dawiss 0]

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 .. 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

[Eikon 0]

Really simple tutorial. I'm gunna try it out when i get to my home computer where I have Photoshop. I probably shouldn't be browsing the forums at work

[DreamCore 0]

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.

[Kubi 0]

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.

[iGuest 3]

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.