There are a lot of sites out there that tell you how to put their ready made social networking
buttons to work on your website. But while this is great for people who can find something they
like on these sites it's not that great if you are like me and realized that if you wanted something
that wasn't just kind of okay you might have to make it yourself. You might want to make your own for
all sorts of reason, maybe you don't feel what's out there really fits your websites theme, maybe
you feel like there is something about the nature of what your site is about that makes using the
what's out there just wrong, or maybe you just don't like colors, or the shapes everybody that are
ready made.
Good news you can make your own, and you can make them any shape or color you want.
Since I originaly wrote this I've replaced my social networking buttons however for this tutorial I'll be
explaining how to make the social networking buttons like ones I had previously used here
on espdigiart.com
You will need:
Computer
Graphics software (this tutorial is written for people who use gimp)
Your own creativity
A silhouette of the social networking sites symbols (you can either draw them yourself or find them online)
1. Open a new file in gimp, since it's easier to make the icon smaller if it's to big than it is
to make it bigger when it is to small without losing quality I used a 1060 by 1060 canvas to create
this button you can make the canvas another size but keep it square once you've done this make the
background layer invisible you don't need it
2. Add a new layer and make a star shape in that layer with the path tool, when you have the shape
you want then stroke the path, this outline is the serves as the edge of your button (so make sure
the stroke you use is thick)
3. Use the eraser tool to curve the points on the star
4. Select the inside of the star shape using fuzzy select than make a new layer, and fill the star
shape in with the color you want to use as the main part of the button
5. Keep this area selected and make another new layer, set the layer type to grain merge the use
the blend tool and set the gradient, the set the gradient to FG to BG and reset the forgotten
color to black, the shape should be radial, and fill the star shape with the gradient from upper
left to lower right
6. Some colors will need more layers of shading than others so duplicate this last layer and change
the setting to grain extract, duplicate this layer at least once more, if you aren't happy with
the shading then duplicate the layer more than once (you might have to play around with how many
layers of grain extract and grain merge shading layers you need)
7. Go back to the outline, select it then use filters ? light and shadow ? drop shadow once the
drop shadow layer is made move it so that it's above only the outline
You might want to use this same still and shape for several different icons and/or
with several different colors so now is the time to save the a the blank star, or duplicate the
image
8. Open your silhouette of the networking icon you want and paste it into the center of the
star and adjust the size of the icon in the star if needed make sure the layer with the icon
on it is above the background of the main color of the button but below any of the shading layers
make sure that you have the icon the size you want and have it placed on the star the way you want
it to be when it is finished because after this step you don't want to move it
9. Now that you've got the icon silhouette in place select it using the fuzzy select tool and invert
the selection, next select one of the grain extract layers and cut what's selected. Then move that
layer so that it is the lowest shading layer.
10. The next step is to select the the layer with the colored star in it, and select the star itself
then use filter -> decor -> add bevel set the thickness to maximum, keeping the bump layer doesn't
really add anything to the picture so I don't advise you keep that since it will get in your way,
you'll have to repeat the adding of the bevel several times, I repeated this step 3 or 4 times for
but you might decide is to many times, or that you want to repeat it even more because the it isn't
beveled enough.
Make sure you the bevel in the image is to your
satisfaction before proceeding to the next step
11. Once you've got the bevel all set then next step is to make a new layer from the visible image and
place it above all the other layers. This might seem like a crazy step to list but it's intended to
make the drop shadow more more noticeable.
12. When you are done save/export a copy of the finished project as a png file so that you preserve the
transparent background.
A couple of notes:
You can use any color you want for the color you like for the networking symbol in the button, as
well as the outline, and the main area of the button. So feel free to experiment. Who says you
can't make them in the shape of your favorite animal? Or even a car a shoe or a person if that's
what your into? Have fun with it.
When you are ready to place the buttons your web page specify the height and width properties in
the image tag to insure that the buttons are the right size.
Once you've learned to make a star shaped social networking button then you might find that other
shapes will be easy by to figure out if you are willing to experiment.
If anyone ever tells you that doing it yourself means it isn't as good tell them that those icons
are custom made, your icons aren't as good as what's out there they're better (at least for you
and your website)
|
