Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


Arrows And Buttons Page 2

April 1, 1998

... Part 1. Click here to go back to the previous section.


Create The Arrow Body Layer
  • "Drag" the Arrow Base layer to the "Create New Layer" icon.
  • Relabel the Arrow Base copy to Arrow Body (double click on the Arrow Base layer to open the "Layer Options" dialog box and rename).


Create The Arrow Body Part.
  • Load the Arrow Mask selection if necessary (Select > Load Selections... Arrow Mask).
  • Fill with black (Edit > Fill > Use: Black).
  • Deselect the arrow shape (Ctrl+D). Bonus Image


Emboss Preparation 1: Set foreground and background colors.
  • Step 1 is to click on the tiny b&w "default color" icon.
  • Step 2 is to click on the double headed "reverse colors" icon.

    ..Step 1 ..........Step 2 ......Final Setting.
    Bonus Image Bonus Image Bonus Image


Emboss Preparation 2: Blur edges.
  • Filer > Blur > Gaussian Blur...
    • Check select Preview.
    • Radius set to value (1.7).


Apply Emboss: to the Arrow Body.
  • Select the Arrow Body layer if necessary.
  • Apply the Emboss Filter (Filter > Style > Emboss...).
    • Check the Preview option.
    • Angel set to value (141 degrees).
    • Height set to value (7 pixels).
    • Amount set to value (132%).


Create The Final Colorized Layer.
  • Create a new layer above the Arrow Body layer.
    • Select the Arrow Body layer.
    • Click on the "Create New Layer" icon.
    • Relabel the new layer Colorized 40%. Bonus Image

  • Load the Arrow Mask selection (Select > Load Selection > Arrow Mask).

  • Modify the Mask before colorizing.
    • Contract the mask (Select > Modify > Contract... by 1).
    • Soften the edge (Select > Feather... by 1).
    • Fill the mask with 50% gray (Edit > Fill > 50% gray from the list).

  • Colorize The Arrow (Image > Adjust > Hue/Saturation...).
    • Check select Colorize
    • Hue set to value (-140).
    • Lightness set to value (+20).

  • Complete the process by setting the "Layer Opacity" to 40% as shown above.


Add The Dimensional Text Layers.
  • Deselect the Colorized Arrow (Ctrl+D).
  • Create a new layer above the Colorized Arrow layer by clicking on the "Create New Layer" icon.
  • Relabel the layer Black Text Face (see "Create The Arrow Body Layer" above)..
  • Set the Toolbox colors to default (see "Emboss Preparation 1" above).
  • Choose the Text tool. Select the Text Tool from the Toolbox (press the "T" key).
  • Open the "Type Tool" dialog box (click in the arrow point).
    Bonus Image
  • Fill in the requester as per sample above as a guide.
  • Nudge the text into position (Ctrl+arrow keys). Bonus Image
  • Duplicate the text layer (drag the text layer to the "Create New Layer" icon).
  • Relabel the layer White Text Highlight.
  • "Drag" the Highlight layer below the Text Face layer.
  • Nudge the Highlight down and to the right by one click each.
  • Colorize the Highlight to white (see Colorized Layer from above).
    Bonus Image
  • The Layers Palette should look like the sample below.
    Bonus Image


Arrows And Buttons Page 1
Introduction to Web Design with Adobe Photoshop | Table of Contents


Up to => Home / Authoring / Graphics / Tools / Photoshop




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers