I’ll be designing a Twitter icon. I found their logos on this page: https://twitter.com/logo It’s also best to read their guidelines before you work with their logo. I downloaded the PNG for light backgrounds. And since we’re doing a visual design for our blog, you are allowed to manipulate the colour of the bird. (Yay!)
Since, I have Adobe Photoshop CS5 Extended version, my instructions will be catered to that program. If you have GIMP for example, try using the same techniques. They’re all pretty similar, and I hardly use all of Photoshop’s features.
(1) Start with a blank canvas. Hit CTRL+N on your keyboard to bring up the New window or File > New. Name your document so you can be organized! I sized up the document to be about 400 pixels in width, and 300 pixels in height. Open up the Twitter icon that you downloaded from their site as well.
(2) Decide what type of shape you want for your icon. Circles or rounded squares work best for blogs. In this case, I’ll do a circle. Create a new layer. Hit SHIFT+CTRL+ N, or Layer > New > Layer. Name it “Background Icon.”
(3) On your tool palette, find the Ellipse Tool. Pick a colour that matches your blog. Mine is the accent colour pink #ff0084. On your blank file, hold down the mouse and press SHIFT on your keyboard at the same time. By pressing SHIFT, you’re making a perfect circle. (I made the circle big for the tutorial, we can always resize it later)
(4) On the Twitter PNG, we’re going to make it white. There are several ways to do this in Photoshop, but the fastest and easiest is by using Blending Options. Right-click on the image itself, and choose Blending Options. Click Color Overlay. Change the colour to white, and hit OK.
(5) Make sure you’re on the Move Tool, or hit V on your keyboard, then drag the white Twitter PNG on to your circle. It might be too large, so let’s re-size it shall we? Hit CTRL+T on your keyboard or Edit > Transform > Scale. Hover over the corners of the image and press SHIFT while doing so. You don’t want to warp the image to be unrecognizable. Click the checkmark that appeared in the upper top toolbar, or hit CTRL+ENTER on your keyboard.
Bevel and Emboss
(6) Then all you have to do is add some more Blending Options. I particularly like using Drop Shadow, Inner Shadow, and Bevel and Emboss. (Tip: If you use Inner Shadow, it gives a “Papercut” look.)
(7) Do the same to the Background Icon, and you’re done! Remember to re-size the icon to your liking and save as a PNG.
Download the icons here
Right-click and save to your computer.
32×32 Twitter Icon
64×64 Twitter Icon