Fitness.com
Advertisement
Go Back   Sports Forum > Community > Graphics > Tutorials

Tutorials

Have you found a great tutorial? Have you made your own tutorial?


» Current Poll
Best 5 club teams in history of Football:
Liverpool 1977-1978 - 100.00%
1 Vote
Real Madrid 1956-1960 - 0%
0 Votes
Juventus 1985 - 0%
0 Votes
Milan 1989-1990 - 100.00%
1 Vote
Ajax 1971-1973 - 0%
0 Votes
Santos 1962-1963 - 0%
0 Votes
Torinho 1940's - 100.00%
1 Vote
Ajax 1995 - 0%
0 Votes
Flamengo 1981 - 100.00%
1 Vote
Benfica 1961-1962 - 100.00%
1 Vote
Total Votes: 1
You may not vote on this poll.
» Stats
Members: 48,616
Threads: 84,986
Posts: 1,031,252
Top Poster: Rindalik (4,430)
Welcome to our newest member, kucoco
If you register for free, you will be able to post threads, vote on polls and lots more. If you have problems with the registration or logging in, please contact the administrator.

Reply
 
LinkBack Thread Tools Display Modes
Old 12-28-2004, 08:51 AM   Glass Interface Panel Post #1
Senior Member
 
Join Date: Feb 2002
Posts: 2,202
Rep Power: 10
theKeeper is on a distinguished road
Default Glass Interface Panel

This overall effect is exactly the same as the method used for the glass button tutorials you've no doubt seen around. The only difference is the shape it's being applied to.

[size=16px]Creating a Glass Panel Shape:[/size]
To create that shape, do the following. Then after you've made the shape, simply apply the same steps to it from one of the tutorials you've seen on making glass buttons.

1) Create a rectangular selection the size you want the viewscreen to be.
2) Press 'Q' for the Quick Mask mode. Gaussian blur by 5 pixels.
3) Press 'Ctrl+L' to open Levels. Drag the left and right sliders toward the middle. Watch the mask shape become more sharp around the edges. When the edges are nice and clean looking again, press OK. Then press the 'Q' key again to exit Quick Mask mode.
4) Now add a New Layer to your document, and fill the selection with a Linear gradient, using the colours of your choice. Just make sure the darker colour is at the top.
5) Under the EDIT menu choose Transform/Perspective. Grab one of the bottom corner control points and drag it inward until the shape appears the size you want it. (the angle is about 37 degrees) Press the ENTER key to apply the transform.

Seems like a bit of work, but once you know the routine, it takes less than a minute to do this.

( see example 1 below )

[size=16px]Creating the Glassy Effect:[/size]
So you've created your elongated viewscreen shape. Name it 'ViewScreen'. Now ctrl-click the layer to select the shape. Then add a new layer above it. Hold the ALT key down and use the rectangle selection tool to select the bottom half of the viewscreen selection. This deletes the bottom half.

Enter 'Quick Mask' mode (Q key), and Gaussian Blur the selection mask by 5. Press Ctrl+F to repeat the blur.
Open the LEVELS filter and drag the left & right sliders toward the center until the edges of the selection mask get real clean.

Exit Quick Mask (Q key) and fill the selection with a white-to-black Linear grad, going top-to-bottom. Deselect. Set the layer to Screen.
Open the LEVELS filter again, and this time, drag the very bottom "black output" slider a little to the right. Stop when you can start to see the bottom edge of the highlight. Then drag the "white output" slider a little to the left. Until the highlight becomes a bit dim. You'll have to use your own eyes for this step because your gradient will be lighter/darker than mine was. So i can't give you an exact number. Just make the adjustment(s) until it looks good to your eye.

Ctrl-click the layer to select the highlight. Contract the selection by 3 pixels. Inverse the selection and Delete. Deselect.

Duplicate this highlight layer. Click the original layer, below the duplicate, and apply a 3 pixel Gaussian Blur to it. Then drop the Opacity to about 60%.

Add a New Layer. Ctrl-click the ViewScreen layer to select the shape. Then grab a soft brush, and make it a size that'll fit within the bottom half of the viewscreen window (in height). Now, using white, paint a strip along the bottom half of the viewscreen. Set the layer to Overlay, and lower the Opacity to 50-60%.

TIP:
(Hold the SHIFT key while making the paint stroke, to create a perfectly straight line with your brush.)

===============================================

And that's the glass viewscreen effect.
The interface body can be created using a dark Linear gradient on a rectangular shape. To make the 'sunken in' effect for the screen, duplicate the viewscreen shape layer, move the duplicate below the original, apply the bevel & emboss filter using the "Outside Bevel" option.
And if adding any text or images 'within' the viewscreen, simply put those on a layer below all of the highlight layers.

If you need any specific help with the effect just ask. But like i said, the effect is real easy to do. In fact... the elongated viewscreen shape is actually more work to create.
theKeeper is offline   Reply With Quote
Reply

Go Back   Sports Forum > Community > Graphics > Tutorials

Bookmarks

Thread Tools
Display Modes


Similar threads to Glass Interface Panel
Thread Thread Starter Forum Replies Last Post
Missing interface
Missing interface: After I patched the game with the latest patch, I...
Decadent Sympozium Football Manager 6 12-11-2007 10:22 PM
just an interface..
just an interface..: web interface... ...
Amuro^Mushashi Supersized Runway 2 07-25-2007 12:20 PM
Unfamiliar Interface
Unfamiliar Interface: 'lo there. I'm wondering, remember how interface...
Decadent Sympozium Skinning Hideout 2 11-26-2006 08:11 PM
Interface help
Interface help: hello, poor newbie to be rescued.... im making a...
kingo General Photoshop Board 13 05-01-2004 03:36 PM
Glass Interface Panel
Glass Interface Panel: This overall effect is exactly the same as the...
theKeeper Tutorials 1 08-14-2003 02:52 AM

More threads of theKeeper
Thread Date Forum Replies Last Post
Real 3D Type -- using Layer Styles
Real 3D Type -- using Layer Styles: Recently i posted this effect on the PST boards,...
07-25-2003 Tutorials 3 07-26-2003 12:56 AM
Some more useful, FREE filters!...
Some more useful, FREE filters!...: http://www.xero-graphics.co.uk/ :} ...
07-01-2003 Resources 9 07-08-2003 06:30 PM
Great filters... FREE!
Great filters... FREE!: Hey just found this page through a search for...
06-26-2003 Resources 6 06-29-2003 12:34 AM
Creating Textures: your basic grunge wall.
Creating Textures: your basic grunge wall.: Creating Textures: your basic grunge wall. ...
05-25-2003 Tutorials 0 05-25-2003 12:07 PM
Photoshop's "imitation" vectors...
Photoshop's "imitation" vectors...: Hey guys i was just helping someone with...
04-24-2003 General Photoshop Board 18 04-29-2003 08:02 PM

Other threads in forum Tutorials
Thread Date Thread Starter Replies Last Post
MOVED: zombie picture
MOVED: zombie picture: This topic has been moved to General Photoshop...
07-06-2007 Gaussian 0 07-06-2007 09:27 AM
Full Fatty sig tutorial
Full Fatty sig tutorial: Here is a new tut by me: Texture number "1" ...
06-28-2007 dilba 6 07-04-2007 09:48 AM
How To Make An Advanced Sig In Just A Few Steps
How To Make An Advanced Sig In Just A Few Steps: http://xs209.xs.to/xs209/06471/tutorial1pt1.jpg ...
11-20-2006 Milou 20 02-25-2007 02:02 AM
Vaile's Sig Tutorial 1
Vaile's Sig Tutorial 1: heres no.1 of my tuts. ive made a few but only...
06-13-2006 Vaile 17 12-22-2006 02:40 PM
krisss's tutorial
krisss's tutorial: TUTORIAL BY KRISSS
04-29-2006 krisss 8 06-16-2006 08:14 PM

» Online Users: 38
0 members and 38 guests
No Members online
Most users ever online was 2,128, 07-21-2008 at 08:27 PM.

All times are GMT +1. The time now is 10:43 PM.


Powered by vBulletin® Version 3.8.3
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Fitness.com | Weight Loss | Training & Fitness | BodyBuilding | Chinese | Spanish | French | Germany | Italian | Friend Codes |
You are viewing Glass Interface Panel.