Designer buttons  copyright Giulio Porta. All rights reserved.

This project should be viewed and implemented in conjunction with project number 13 the graphic interface design project.

For this project you'll be asked to create a series of buttons to be used as parts of and interface, please refer to project 13 just in case if don't know for sure what an interface is. They could also be used in a "web page" that will be part of your presentation. These button don't have to be  don't have to  be hyperlinked, but they can if want to show their functionality. I'm more interested in the esthetic of the page. The page that you are going to create will showcase the location of these buttons, the relationship among them, such ask side by side or stacked on top of each other. If you are taking my DL course and you are not to keen toward web page design, you can create and image in Photoshop where all button are arrange together, that will give me an idea of your intentions concerning the layout design of your buttons.

Virtual buttons are usually designed to emulate real life buttons. They can be created in both 2D or 3D programs. For this project the best looking buttons can be shown by themselves in a page of your presentation, and eventually that design can evolve in an illustration where the buttons are integrated in an interface design.

This simple illustration here above was inspired by the interface of the media players and ads panels that you may have seen in the virtual world of your PC. All those interfaces try so hard to appear 3D, and that is not a bad thing. You want to try to do the same. In most instances gradients, inner and drop shadows is all it take to make these shape reflective. After having draw carefully the shapes of the buttons with the pen tool, and the elliptical marquee, your shapes should be copied and pasted to separate layers so they can be dealt with as separate objects,

These buttons should be given a 3D appearance, either by making them look like they are bulging out or curved in, just like buttons of the real world, by doing so you'll make these images richer in content and ultimately appearance. That will improve their presence. In order for these buttons to acquire a 3D look a number of other elements need to be added to their basic shape: the illusion of curvature, either concave or convex, and cast shadows (drop shadows)  indicating that the object is raised off the surface or is inset on a surface. Transparency is also an attribute that is easy to achieve in this environment. Transparency can simply indicate that the object's material could be glass, plastic or water.

A background for the button can be useful in  simulating transparency.

Start by creating a background for what will be a  button with a transparent surface. The background is also essential in simulating refraction.

The background may consist of a number of liner elements, such as lines, lines of text, photos or scanned images.

 

 

Draw a circular marquee, for the shape of your button. Hold down the Shift key to draw a perfect circle.

 

 

 

 

 

Copy and Paste that selection that you have just made with the marquee.

Once the background has been copied and pasted inside the shape of the button in a new layer the original background can be turned off in other words made invisible by un checking the eye icon.

By eliminating the background, the button can be paced anywhere, against another background if necessary.

Sorry if I'm not using the same set if lines here, but it does not matter. Anything linear including text will work fine as a background.

Spherizing the button

Go to Filters > Distort > Spherize. This filter will enlarge the pixels from the center of the selection out to their edges simulating the surface of a sphere.

Text

Text is a good linear element that lend itself to spherization, and it is a good candidate for refraction, because text is typed on a separate layer, it can be turned off if you decide that it cannot be worked into the design.

Drop Shadow

To activate the drop shadow effect go to the bottom of the Layer panel click on the Add a layer style icon. And from the roll out menu select Drop Shadow.

Drop shadow are essential in creating the illusion of a  3 dimensional button.

Drop shadow are visible if the object background is turned off, and they should be applied to selection that have been copied and pasted to a new layer so the background will not interfere with them.

Distance and Size

The Distance slider controls the length of the drop shadow

Size control its blurriness.

Applying Inner Shadows several times.

Drop shadows as well as inner shadows can be applied several times, but you may want to copy the layer first by dragging the layer to duplicate into the Create new layer icon.

 

 

 

 

In order to have two or more inner shadows going into separate directions you must uncheck the Use Global Light check box, and change the Angle or direction of the shadow.

 

Highlights

Highlights are very important in creating the illusion that your button could be made out of a hard and reflective surface.

Highlight are more visible when the button surface is relatively dark.

Also highlight are the results of a light source reflecting off a curved object.

In Photoshop v 5.5

In this new layer, where you have pasted the selected button, R + click on the blue bar bearing its name and from the pop up menu select Effects. There are two effect that you need to apply: Drop shadow and Inner shadow, these shadow effects will create the illusion that the drop is curved and 3 dimensional. Experiment with the various parameters until you'll have the type of shadow you desire, move the panel away from the canvas so you can see the changes

In Photoshop v 6

At the bottom of the layer palette click on the icon with the letter f on it, and select Drop shadow.

Experiment with the various parameters until you'll have the type of shadow you desire, move the panel away from the canvas so you can see the changes

Repeat the operations for the Inner Shadow.

Make sure that these two shadow are slightly off set from the drop, that is controlled with the distance parameter, the blur will ad more realism. Work with these parameters till you'll obtain something you are satisfied with.

In v 6 the blurring of the shadow effect is referred to as Size.

At this point you can copy the Layer and experiment with it by adding to it a semi transparent gradient, followed by a Gaussian blur.
The button can be given different personalities, from crystal clear to opaque.

A highlight can be added by using a soft brush, spray lightly, without scrubbing on the surface.

The advantage of having a slightly opaque surface is so that the highlights will stand out brighter.

The opacity of the drop can be set in relation to a given theme, so can its reflections, if any. A number of reflections can be painted, or pasted into the selected shape of the button.

 

A custom made background texture can be attractive, but even when it is  identical to your button background texture, it may not match the background of your button because of issues such as tiling and screen resolution.
Buttons that need to be integrated in a page may look best if they have a flat color background instead of a textured background. In particular if you are not able to resolve the issue concerning the same texture appearing differently behind the button and as a background image, in a cell, or table.
Making the button's background transparent

A button with a transparent background can be inserted almost anywhere, but it should not have a drop shadow.

To make the button's background transparent, use the Save for the Web option, in that panel select .GIF as the saving format, (.JPG do not support transparency), and check the Transparency box.

A drop shadow is basically a gradient, that requires a considerable number of colors to look good. The .gif format, because of its compression, will reduces the numbers of colors, that may reduce the quality of your gradients, giving your button's drop shadows a ragged edge.

Before you actually save your work, resize the button to a relative small size and see how it looks. Size reduction will eliminate some details, this can give you an idea of what you should or should not do to a graphic image according to its use.

Obviously because this graphic image can be multi purpose. It should be saved large as well, for a logo an ad or a presentation.

 

Finally in Front Page assemble all your buttons in a separate page, you do not need anything else in it. Attach a different URL to each button. Also load the large version of the button by itself in a page.

The URL is attached by Right clicking on top of each button ( so the graphic image is activated) and select Hyperlink from the pop up menu, in the Create Hyperlink panel select make hyperlink to a file on your computer, and browse for it.