Tutorial #5: Glass Pill - Focus Fanatics
Ford Focus Forum
HomeContact UsAbout UsGalleryDiscussion ForumsMarketplace



Go Back   Focus Fanatics > 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 Ford Focus Tire & Wheels FocusFanatics Merchandise

Reply
 
Thread Tools Display Modes
Old 06-26-2004, 01:32 PM   #1
gthang
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
Click image for larger version

Name:	tutorial-5-web.jpg
Views:	387
Size:	48.3 KB
ID:	3091  

gthang is offline  
    Reply With Quote
Sponsored Links
Advertisement
 
Old 06-26-2004, 03:37 PM   #2
gthang
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
Reply

Bookmarks & Social Networks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not 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

Forum Jump

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 Ford Focus & General Car Chat 5 08-25-2005 04:59 PM


All times are GMT -5. The time now is 07:39 AM.


Copyright 2002-2014 FocusFanatics.com. All Rights Reserved : Terms of Use : Privacy Policy : Advertise Information : Site Map

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 Acura TLX or Fiesta ST. You can find all Ford Focus and Focus ST related information here. Join our Ford Focus discussion forums and chat with local Focus enthusiasts in your area.