So you're here because you're a die hard Fanatic of Adobe.
You've bought every product available, you've gone into debt, you sold your house to buy them.
As a Fanatic, you want everything, EVERYTHING. One problem, you're not too sure on how to use all these nifty 'little programs'. Notably Photoshop.
Oh yeah it's a problem for you, because you desperately want to know how to design those Nifty Adobe Icons that seem to be used for a lot of the Adobe Products nowadays.
- "Uh yeah so is this some kind or RPG site or what ever? Do i need to play an RPG to follow this tutorial or what?"
Today i bring you what is the Internet's Best Way to re-create those icons. (That's my opinion from what i searched, hey i did click one or two links on google, they weren't good).
Let's GET TO IT!
- All right first things, we're gonna create a canvas. Bring up a nice 500x500px canvas, give us some space.
- Fill your background with white. You can name this layer Background if you're feeling nerdy.
- Create a new layer, and name it Icon. (or don't name it, I don't mind you know.)
- Now we're going to be creating a large icon which you can resize later. It's easier and allows for better detail.
So grab your Rectangular Marquee Tool and use the following settings if you will.
- Now click on your canvas to bring up your selection. Fill this selection with Black. Now Deselect (CTRL+D).
- Now this is one of my favourites. With your Icon layer active, hit CTRL+A to select the whole of your canvas.
Now hit CTRL+X to cut the selection (this will delete and copy your box to the clipboard).
Hit CTRL+V to paste your box. Your box is now perfectly centered.
Finally, hit CTRL+D to deselect.
- Now with our box nicely centered, we're ready to start. So go to the Blending Options for your Icon layer and use these.
- Oh yeah, we're designing the Adobe Photoshop CS4 icon today, so it's blue.
You should now have the base of our sexy icon.
- Next create a New Layer and name it Gradient. (Ooh kinky, a Gradient! I'd never have guessed!)
- Set your Foreground colour to #6fb3fc
- Take the Gradient Tool and use these settings.
- Now you need to CTRL+CLICK your Icon layer. This will select it, but then make sure you still have the Gradient layer active.
- Now we're going to drag the Gradient in the selection. Now i've explained this in detail so that you can get the Gradient perfect (hopefully!)
So, you have your Icon layer selected, and your active layer is the Gradient layer.
With your Gradient Tool, Hold SHIFT (draws a perfectly straight line) and drag a gradient like this.
You need to start the Gradient from where i started it. That is not directly at the top of the Icon, but about a centimetre away from the top.
Also try and center your Gradient. It doesn't matter too much, as you can see my Gradient line is not perfectly centered either.
You need to finish/drag the Gradient to the bottom of the Icon.
- Woot! Now you have the icon! This is what you should have. But we're not quite finished yet!
- How does Adobe differentiate all those Products if they all use those icons? Colour! Yep, yep, but something else...? Hmm? Name!
Yep so we're going to be adding some text in there, in this case "Ps" for Photoshop. We're re-creating the Photoshop CS4 Icon here remember.
It's not publicly known what font is used for the icon by Adobe, but Myriad Pro is the closest match there is.
If you don't have that font you'll have to play around with another font. It's not too important, it's not at all required for this Tutorial anyway.
So set your foreground colour to Black and go ahead and type in "Ps".
- When you're happy with your Ps text, Right Click on your Ps layer in the Layers Palette and select Rasterize.
We're doing this so we can center it within the box. So use the same technique we used at the start of the tutorial.
CTRL+A, CTRL+X, CTRL+V, CTRL+D. Easy.
(Note the screenshot above already has the text centered). - Now set the Fill Opacity of the Ps layer to 70%.
- CTRL+CLICK on your Ps layer to select it. Then make your Icon layer active by clicking on it in the layers palette.
Now hit Delete or Backspace on your keyboard.
With the Ps layer still selected, make the Gradient layer active. Hit Delete or Backspace on your keyboard. - VOILA!
A perfect replica of the Adobe Photoshop CS4 Icon! - However. There are always perfectionists out there (i'm one of them), and if you really are a perfectionist worthy of this name,
you'll have noticed that the Inner Shadow at the top Icon should not be there.
Or maybe you are a perfectionist but didn't really look at the Photoshop CS4 Icon and didn't notice.
Anyway, let's get that sorted. Oh yeah only do this step when you're happy and satisfied with your Icon/Logo. - In the Layers Palette, click the little Eye Icon next to the Background layer to hide it.
Now Right Click on your Icon layer and select Merge Visible.
Now you can un-hide your Background layer. - Zoom in to the top of the Icon (make sure your Icon layer (not Background) is active) and drag a selection like so.
Notice how it's the just the Inner shadow which is in the selection.
- Hit Delete/Backspace on your keyboard. Zoom out!
BEAUTIFUL! PERFECT!
And Check this out! SOUSHI's version NEXT TO the Original, Official Adobe Photoshop Icon!
If it wasn't for the font, it would be absolutely perfect!
Yeah, you can use these for anything really!
There we go, another quality Tutorial from Soushi Tutorials! Hope you enjoyed it and make good use of it. GET CREATIVE!
Be sure to leave a comment or two if you have the time, I really appreciate it! Don't fear to show me what you came up with too!