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 1

April 1, 1998

Bonus Image Bonus Image Bonus Image
JPEG 3KB .......... GIF 2KB .

No Right Answers: Go your way.

The JPEG arrow has more presence than the GIF arrow. The good looks comes at a price. The JPEG arrow weighs 50% more. At 3KB the weight is negligible but it all adds up.

If the download speed is crucial, plain text pointer links are super light. Plain text is not very exciting but the decision is yours to weigh.

Purely Home Grown: From scratch.

These arrows are buttons and they were created totally in Photoshop.

... Part 1

... Part 2

  • Create The Arrow Body Layer.
  • Create The Arrow Body Part.
  • Emboss Preparation 1.
  • Emboss Preparation 2.
  • Apply Emboss.
  • Create The Final Colorized Layer.
  • Add A Dimensional Text Layers.


Start With Create New... (Ctrl + N).

Create a new file using the sample below as a guide.
Bonus Image


Change Preference Settings: (Ctrl + K)

Change Guides & Grid preference settings as per sample.
Bonus Image


Fill The Background Layer With White.

  • Select the entire layer (Ctrl + A).
  • Fill the selection white (Edit > Fill > Use: White).
Bonus Image

Use "Polygon Lasso Tool" With "Snap To Grid".

  • Turn on the View > Grid (Ctrl + ").
  • Turn on View > Snap to Grid (Shift + Ctrl + ")
  • Select the Polygon Lasso Tool (L or L again to cycle). Bonus Image
  • Start the Polygon Lasso at the tip of the arrow (click on the tip snap-to point).
  • Go clockwise and click on the tip again completing the 7-point Selection.

Bonus Image Bonus Image


Save The Arrow Shape Mask (Selection > Save Selections...).

  • Click OK to accept the default settings.
  • Click on the Channels tab to open its Palette. Bonus Image
  • Double click on the #4 to relabel it to Arrow Mask.
  • Click on the RGB Channel at the top to bring back the RGB color image.
  • Click on the Layers tab to return to Layers.


Turn off the Grid (Ctrl + ").

  • The Snap To Grid is turned off automatically.


Create a new layer (Click on the Create New Layer icon). Bonus Image

  • Relabel the new layer Arrow Base.
    • Double click on Background copy to open the Layers Options dialog box.
    • Enter Arrow Base for the new name.


Click Next to continue.


Beveled Frame Part 2
Introduction to Web Design with Adobe Photoshop | Table of Contents
Arrows And Buttons Page 2


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