Step by step button making experience
I start off with an image (more specifically an image the requester chose). This image was copied
on to photoshop and cropped
from the original preview
to further copy on to an 88px by 31px
Here's the cute little button birthed from the big mama image and I'm the nanny who's going to raise it to be strong, independent, and beautiful. Right now it's ugly and crying, but everything goes through a rough start!
by dragging the image upwards due to a good variety of colours
present to edit.
Note*: not all steps are thoroughly explained aka I don't show how I got to each step it's just showing what I do.
are used to balance colours and enhance both shadows, highlights, and of course the midtones. I put a heavy emphasis on highlights
in this button.
Resulting edit from the levels
settings. Notice how much brighter the image is?
Now I'm using curves
to mess with the tones and contrast of both the colouring and lighting in the image. More emphasis on deepening the tones
The image looks vibrant with rich purple shades.
Now using the basic brightness and contrast
tool to balance out the lighting.
Not much of a transformation, but there's more friendliness between dark and light.
I'm going to attempt to sharpen
the image using the smart sharpen
too and literally I can't stand doing this cause seemingly my photoshop is messed up with sharpening. I do have all the settings correct — gaussian blur
sharpening at 500%
for every third of a pixel
(does that even mean that whatever idc) — though so you are perfectly fine using these settings just I'm dumb.
LOOK OMG it literally did nothing?? besides make the lines be ugly??
the image back up! It's perfectly normal — at least for me?? — to shift the image multiple times before, during, or after
editing to get it in it's nicest place. Remember you're dealing with a very small space so it's best to get the best colour variety to make your button eye-catching and aesthetically pleasing!
my image to start the creation of a nice image smoother and colour brightener. Put your duplicated layer
above your original and set the new layer to soft light
Now we're doing the opposite to the new image: giving it a gaussian blur
. Set the radius to 2.5
. You can increase the amount if you'd like, but try not to go over 4 pixels.
Look how glorious the image looks now praise! Glorious is a lil lame to say but it suits it.
Now we're going to do a pure colour edit
! Pick out midtone colour
from your image — this will most likely be found in your image's background, such as the sky, the grass, or a character's hair colour.
Once you've picked your colour, create a new layer
, fill it with your colour, set it to lighten
, and then set the opacity
to a range of 25% to 50%
depending on how rich of a colour edit you want or what looks nice on your image.
Since I used a very subtle colour edit, only the darker
shades were affected.
First step into texturing the button! I always and only used light textures
in my buttons so this one works nicely. Idk who made it lol ):
Resize and crop
to fit it cosily in the button.
Move it on to the button, put the layer above both the image and the colour edit layer, and then set the layer to lighten
Resulting image. Ya kind of ugly.
Since the red was a little too much for the image and reducing the opacity would be a very ineffective way to fix it, I'm going to edit the actual colouring of the texture using hues
Much better! Now the light actually blends in with the image rather than taking dominance.
Now I'm going to use a really gorgeous and button-specific texture created by the super smart and cute Abi
! She even cropped it to suit perfectly in your button. Thank you boo.
Also hugs and kisses to Nina
for showing me how to most effectively put the texture to work. Copy the texture on to your button, put it beneath any other texture
you have, set the layer to hard light
, and set the opacity
to anywhere from 30% to 50%
Zanggg. Look at dem colours now!
Now we're on to the most important part of the button, the text
! I personally love using the pixel font, 04b03
it, and setting the colour
as the same as the midtone
I chose! Put the text layer
underneath both the texture and lighting
layers to have the effects affecting the letters. Also, shoutout to Bianca
for unknowingly letting me use her request for this tutorial, ty ty!
the text in a nice spot, but you can't read it yet because we still need the text border
To get the range of the border
, CTRL + click
on your text layer's T symbol
and expand the selection by 1 pixel
Once you have your selection, select a dark midtone
colour from the area surrounding your text to act as the border colour.
Create a new layer, place it below your text layer
, fill the selection with your colour, then set the border layer to multiply
Result from the previous step.
Now to do the border clean up that all the fancy button makers do lol. Mainly what you do is remove all ″empty space″
pixels that are diagonal
to your letters or between the gaps
. The way I do it is to create a new layer and then highlight each of these pixels with a white pencil tool
dot to show the spaces.
First make sure you've highlighted your border
layer (click on the layer). Now select the ″empty space″
layer — CTRL + click
— and right click on one of the white dots
. A popup menu will appear and select layer via cut
. Delete both the ″empty space″
and the cut border
Here's the clean
Now I'm going to add some padding to the border to increase visibility of the text. Duplicate
your border layer, put the new layer under it, and add a gaussian blur
of 1 pixel
to the new border.
Notice how the border is more feathery, but the text is much more visible!
Since the text isn't entirely legible, I'm going to lighten
the text colour by several shades — to a cuter light pinkish purple.
ZANGGG that really made the text pop out I did well.
Now I'm going to add a gradient effect
to the text to create a more glossy
looking button. I either set the blend mode to overlay
or soft light
, reduce the opacity
to around 30% or 40%
, and reduce the scale
to around 50%
to create a very sharp and abrupt gradient.
Time to create the button's border
! Select the pencil
tool to draw with.
Pick a colour from the background
that most dominates the outer edges
of the button, but will still blend in nicely with the inner.
I always draw a simple rectangular border
and set the layer to multiply
. Also, make sure to have your border layer underneath all your textures and colour edits
Blend the border in by giving the layer another gaussian blur
of 1 pixel
Now for the inner white border
. Create a new layer, place it above your outer border's, draw another rectangle within your outer border, set the layer to hard light
, and keep the opacity
between 80% to 100%
Final result of the border. Look how much an effective border can do for your button.
The text was a tad too close to the edge of the inner border, so to move the text, select both the text layer
and each of your text border layers
. I shifted them all over to the right by two pixels
Much more spacious and tidier.
Now on to the animation. I decided to have a full shine animation
so pick a very light colour, but not white as you want to keep it smoothly flowing with the colouring.
Select the pen tool
Make sure your pen tool's options are set to paths
(first section with the pen + square).
Create a diagonal
path reaching from outside the bottom
of your button to the outside top
Select the brush tool
Make sure your brush tool's settings are at 0% hardness
and a diameter
of anything from 12px to 21px
Before you do anything, create a new layer
above your text
but below your button's border
. Then select the pen tool
once more and then right click
on your path. Select stroke path
. This will brush a line along your path.
Select delete path
to remove the pen line, but it will keep the brushing.
Set your shine layer
to linear dodge (add)
Give the shine layer a gaussian blur
of 4 pixels
Go to your animation window
and duplicate the first frame. Move your shine layer
all the way off the button to the left side
for the first frame, and for the second frame
, move the shine all the way off to the right side
Select your first frame
and tween the frame to your second frame with 38 added frames
. This is just what I personally think makes the shine look realistic, feel free to shorten the length or make it more slow.
Final result of the shine! The animation repeats itself a little too quickly, so make sure to add a break
in between start to ending frames.
your final frame 4 times
Set the new final
frame's time delay
to 2 seconds
Save the button & you have your completed button request
Thank you so much for reading this button tutorial
! If you have any further questions
or need something within the tutorial elaborated on
, please feel free to give me your feedback