|06-26-2004, 02:32 PM||#1|
NY's Most Wanted
Tutorial #5: Glass Pill
This is for those who want to know how to create those awesome web-interface pills that we see almost everywhere. Now this is just a glass pill (virtually invisible). But if you do something right, you can modify the PSD file to make a huge variety of colored pills.
Here's how to create the Glass pill.
Step 1: Start a NEW RGB document with 102x30 pixel size, at 72ppi, with a transparent background.
Step 2: Press the U key to bring up the shapes tool. Now you have to use the Rounded Rectangle tool, so SHIFT + U until you get the Rounded Rectangle tool. Now, up at the OPTIONS bar, click the button whose Tooltip reads "Shape Layers". It should be the second button from the left.
Step 3: Click the DOWN arrow next to the weird star shape on the OPTIONS bar, and tick the option for FIXED SIZE. Set the width to 98 pixels, and the height to 23 pixels.
Step 4: Once you've set the fixed size, click and hold the mouse button over the document, and drag the shape so that it is at the very top and very left of the document.
Step 5: To save you some time when you want to make a bunch of these, after dragging the shape out, Head to EDIT > DEFINE CUSTOM SHAPE. A dialog will pop up. Name the shape PILL. Click OK.
Step 6: After you create the custom shape, open the Layers palette (WINDOW > LAYERS), and right click on the shape layer you've just created. From the right-click menu, select RASTERIZE LAYER (from the Menu bar where FILE is, the equivalent is LAYER > RASTERIZE > LAYER).
Step 7: Now, we are going to add the Layer Styles to make it look like a pill. Be warned, the first style we set will make it completely invisible,but it will reappear.
Step 8: For the first style, in the Layers palette, find the FILL drop-down slider, and set it to 0%. This will make the pill disappear.
Step 9: Next, in the Layers palette again, click the dark circle at the bottom of the palette. It has a little 'F' in it. From the menu that appears, select Drop Shadow. Change the settings to:
Step 10: From the check-boxes on the left, click on the text "INNER GLOW". This will open the Inner Glow options, and check the box. Change the settings of Inner Glow to:
Blend Mode: Multiply
Step 11: Choose "BEVEL AND EMBOSS" from the styles list on the left. Change the following to:
Technique: Chisel Hard
Use Global Light: NO
Text box above "Use Global Light": set to -60
Text box below "Use Global Light": set to 65
Gloss Contour: Click the pattern to edit it, and make it as close as possible to the first graph.
Highlight Mode Opacity: 90
Shadow Mode Opacity: 50
After completing the Graph, click the button in the Custom Contour dialog that says "NEW". This will allow you to save the Contour to the Contours list. This way, you won't have to keep doing the graph every time.
Step 12: Now, from the list on the left yet again, choose "CONTOUR" . Change the settings as follows:
Curve: Click the pattern to edit; Try and get it as close as possible to the second graph. Click the NEW button after creating it to save it to the Contours list.
Step 13: Again from the list on the left, choose "SATIN". Cange the following settings:
Blend Mode: Overlay
Contour: Cone - Inverted
Step 14: Finally, add a "COLOR OVERLAY", with the following settings:
Blend Mode: Lighten
Color: Click the color to edit, and in the color dialog box, find the text box labeled "#". In this text box, input the hex code D1D5FF. Hex codes use the numbers from 0-9 and letters from A-F.
Step 15: You've completed the layer style! But you will want to create a new style so you don't have to go through all this again. Click the button on the right labeled: "New Style..." Give it a name, and click OK (I suggest the name "GLASS PILL").
Step 16: It should come out looking like the first pill in the top row in the image below. If it does, you've done everything correctly. The other pills show what you can do with this same layer style. To do these, create a new layer (SHIFT + CTRL + N). In the Layers palette, drag the new layer below the pill layer. Fill the new layer with a pattern, gradient, solid color, whatever. Now, CTRL + CLICK on the pill layer. This should select the pill shape but not the styles. Press SHIFT + CTRL + I to invert the selection. Make sure that the pattern layer is still selected in the Layers palette. Also make sure that the document is active (When you click in the Layers Palette, this makes the document uneditable because it makes the document inactive). Press the DEL key to trim the unneeded sections of the pattern.
You should Have a good-looking pill now!
Check out this image. It has the buttons that I mentioned that you click during the course of this tutorial, it also has the graphs to make the Contours. I have also attached several examples of Pills for you to look at.
|06-26-2004, 04:37 PM||#2|
NY's Most Wanted
I created this Nexium Pill!!!
I did it the same way as described in the tutorial, but I created a custom gradient utilizing a bunch of tabs that tell the program how you want the gradient to look. Then I added the NEXIUM text. Compare the pill to the pills on the pill's website here.
I have also created a Prevacid Pill, and an Enalapril Pill, and also a Cyanide Pill (Actually, I don't even know what a Cyanide pill looks like; my pill is cyan in color, hence the name!)
|Bookmarks & Social Networks|
|Thread||Thread Starter||Forum||Replies||Last Post|
|Interior glass that won't clean||VonKaiser||Auto Washing, Detailing & Paint Protection||10||11-30-2009 10:54 AM|
|Need help w/ broken rear window glass '01 wagon||jakewun||General Technical Chat||1||08-15-2007 12:16 AM|
|got any tint back window tips?||wordyahurdd||MK1 Focus||18||04-15-2007 04:10 PM|
|FYI, glass replacement cost for ZX3||xFOCIx||Ford Focus & General Car Chat||5||08-25-2005 05:59 PM|