Tutorial #5: Glass Pill - Ford Focus Forum, Ford Focus ST Forum, Ford Focus RS Forum
Ford Focus Forum
HomeContact UsAbout UsGalleryDiscussion ForumsMarketplace

Go Back   Ford Focus Forum, Ford Focus ST Forum, Ford Focus RS Forum > Off-Topic Discussions > Photos & Camera Fanatics

Photos & Camera Fanatics Post your photoshop, photography artwork or camera tips and tricks here.

Search This Forum | Image Search | Advanced Search    
FocusFest FocusFanatics Merchandise

LinkBack Thread Tools Display Modes
Old 06-26-2004, 01:32 PM   #1
NY's Most Wanted
gthang's Avatar
Join Date: Jun 2003
Fan#: 102
Location: I'm somewhere where I don't know where I am...
What I Drive: DUH!

Posts: 1,036
FF Reputation: 5 gthang Good Standing Member
Buy-Sell-Trade Rating: (0)
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:
Distance: 3
Size: 6

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
Color: Black
Size: 2

Step 11: Choose "BEVEL AND EMBOSS" from the styles list on the left. Change the following to:
Technique: Chisel Hard
Depth: 391%
Size: 9
Soften: 3
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:
Anti-Aliased: YES
Range: 100%
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
Angle: 135
Distance: 8
Size: 9
Contour: Cone - Inverted
Anti-Aliased: Checked
Invert: NO

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.
Opacity: 15%

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.

Attached Thumbnails
Tutorial #5: Glass Pill-tutorial-5-web.jpg  

gthang is offline  
    Reply With Quote Quick reply to this message
Sponsored Links
Old 06-26-2004, 03:37 PM   #2
NY's Most Wanted
gthang's Avatar
Join Date: Jun 2003
Fan#: 102
Location: I'm somewhere where I don't know where I am...
What I Drive: DUH!

Posts: 1,036
FF Reputation: 5 gthang Good Standing Member
Buy-Sell-Trade Rating: (0)
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!)
Attached Images
gthang is offline  
    Reply With Quote Quick reply to this message
Gear in this thread - Powered by O'Reilly Auto Parts

Bookmarks & Social Networks

Quick Reply

Register Now

In order to be able to post messages on the Ford Focus Forum, Ford Focus ST Forum, Ford Focus RS Forum forums, you must first register.
Please enter your desired user name, your email address and other required details in the form below.
User Name:
Please enter a password for your user account. Note that passwords are case-sensitive.
Confirm Password:
Email Address
Please enter a valid email address for yourself.
Email Address:
What I Drive
Year, color, and model of your car. Example: 2003 Pitch Black ZX3
Your real name.
Please select your insurance company (Optional)


Human Verification

In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.

Thread Tools
Display Modes

Posting Rules
You may post new threads
You may post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Interior glass that won't clean VonKaiser Auto Washing, Detailing & Paint Protection 10 11-30-2009 09:54 AM
Need help w/ broken rear window glass '01 wagon jakewun General Technical Chat 1 08-14-2007 11:16 PM
got any tint back window tips? wordyahurdd MK1 Focus 18 04-15-2007 03:10 PM
FYI, glass replacement cost for ZX3 xFOCIx General Car Chat Lounge 5 08-25-2005 04:59 PM

All times are GMT -5. The time now is 11:31 PM.

Copyright 2002-2015 FocusFanatics.com. All Rights Reserved : Privacy Policy : Advertise Information

Focus Fanatics Ford Focus Forum offers many fun ways for you to engage with other Ford Focus Owners from across the world. Whether it be about the aftermarket performance modifications, technical how-to's, European tuned suspension or awesome fuel economy similar to the Mazda CX-3, Audi S3, Mazda MX-5 Miata and Acura TLX. You can find all Ford Focus, Focus ST and Focus RS related information here. Join our Ford Focus discussion forums and chat with local Focus enthusiasts in your area. If you own other makes have a look at Challenger Hellcat Forum, Charger Hellcat Forum, Cadillac ATS-V Forum, Cadillac ATS Forum, Cadillac CTS-V Forum, Lexus RC-F Forum, Lexus GS-F Forum, Mercedes GLA Forum, Mercedes GLE Forum, Civic Type-R Forum and Volvo XC90 Forum.


Search Engine Optimization by vBSEO 3.6.1