WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




Glass Text Effect

By Nick Ustinov My very last technique, for Photoshop 3.0, that simulates a glass type over a picture.
wpe9.jpg (3043 bytes)Open the image you want to use as a backround.
wpeA.jpg (3342 bytes)Create a new channel (name it "Type") and type your text, with a normal font (here I used Helvetica Extended 80 pts).
wpeB.jpg (2318 bytes)Duplicate this channel and name it "Blur type". Apply Gaussian blur (2 pixels). Duplicate this channel 3 times and name them "Bold Type", "Horizontal displace", "Vertical Displace".
wpeC.jpg (3390 bytes)Select the "Bold Type" channel and adjust brightness and contrast to get a bold and smooth version of your type.
wpeD.jpg (3129 bytes)Invert "Bold Type" channel. On each of "Horizontal displace" and "Vertical Displace" channels, apply the Solarize filter, then "Auto Levels".
wpeE.jpg (2719 bytes)On the "Horizontal displace" channel, apply the emboss filter (angle=0, height=2, amount=130) then a 1 pixel gaussian blur. Load selection from the "Bold Type" channel, inverse it and fill with gray 50%.
wpeF.jpg (2773 bytes)On the "Vertical displace" channel, apply the emboss filter (angle=-90 (if you use an italic font, adjust the angle so that it matches the angle of the letters), height=2, amount=130) then a 1 pixel gaussian blur. Load selection from the "Bold Type" channel, inverse it and fill with gray 50%. Create a new multi-channel document, with the same size as your image, with the "Horizontal displace" channel as first channel and the "Vertical displace" channel as second channel. Save this document as "Glass displace" and close it.
wpe10.jpg (2758 bytes)Create a new channel (name it "shadow") with a white backround. Load selection from the "Bold Type" channel and fill with gray 50%. Set the foreground colour to gray 75%, and apply a 3 pixels centered stroke. Apply a 1 pixel Gaussian Blur.
wpe11.jpg (3419 bytes)Create a new layer (multiply mode) and apply the "shadow" channel to it. Select "Hue-Saturation" and click on "Colorize" (Hue=-180, Saturation=30, Lightness=0). Move this layer a few pixels right and down to create the shadow of your text over the background.
wpe12.jpg (3987 bytes) Flatten layers and apply the Displace Filter (Horizontal Scale=5, Vertical Scale=5, Stretch to Fit, Repeat edge pixels), using the "Glass Displace" as displacement map. To get a more sharp effect, you may now load selection from the "Bold Type" channel and apply the Unsharp Mask filter (Amount=100, Radius=1, Threshold=0)
wpe13.jpg (4203 bytes)Create a new layer (Soft Light mode), with its opacity set to 50% Load selection from the "Bold Type" channel and fill with blue (R0,V255,B255). Duplicate this layer and change the apply mode to "Hue" The opacity settings of these two layers have to be adjusted depending on your background image colours and lightness.
wpe14.jpg (2860 bytes)Duplicate the "Type" channel (Name it "Highlights"), apply the Gaussian Blur (3 pixels) , then the Solarize filter. Select "Auto Levels", and apply the Emboss filter (Angle=-45, height=1,Amount=158), then a 1 pixel gaussian blur. Choose "Levels" and enter 128 in the Input Levels shadow box.
wpe15.jpg (4353 bytes)Create a new layer (screen mode) Load selection from the "Bold Type" channel and apply the "Highlights" channel. That's it !

This article first appeared in November 1998.

Fast Jump to Anywhere on WebDeveloper.com®:


Contact the WebDeveloper.com® staff

Last modified: 20

 

Refresh Daily
Join Editor-in-Chief David Fiedler The Editor With No Time and find truth, justice, and a clue or two.


Browse by Category
[ Site Map ]

ActiveX / VBscript
Browsers
CGI / Perl
Database Connectivity
Design / Graphics
E-Commerce
HTML-Advanced: DHTML, CSS
HTML / Site Authoring Tools
Intranet/Groupware
Java
JavaScript
Multimedia: Audio / Video / Streaming Technologies
Refresh Daily: Editorial Column
Security
Servers & Server Tools
Site Design / Graphics
Site Management / Marketing / Log File Analysis
Tutorials
VRML / 3D
XML


HTML5 Development Center


Recent Articles