logo

Making Star Shaped Social Networking Buttons



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

twitter facebook



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)
2012-present E. S. Pfahl. All rights reserved. No part of this website may be reproduced or used in any form or by any means - - graphic electronic or mechanical, including photocopying, recording, taping, information storage and retrieval systems - - without written permission of E. S. Pfahl