Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Hi-Tech Skin (Part 2)

Hi-Tech Skin (Part 2)


With the circular marquee tool, draw a circle that fits nicely in the circular area of your interface.

Get the gradient tool, set it to linear, then fill your circle with a black and white gradient that looks something like this.

Now in a new layer, draw a slightly smaller circle, and fill with a radial gradient with colors that look something like this. Start from the bottom going up. This will simulate caustics (focusing of light). Your image should now look like this.

If you want, set the drop shadow and inner shadow to your blue circle, using the same settings as before. This will add a little definition to the border of the glass circle.

To add the specular highlight to the glass cicle, create a new layer, get out the circular marquee tool, and make acircular selection that is smaller and closer to the top of the glass like this.

Now select the gradient tool, choose radial, and choose colors white fading to transparent. Drag from the top to the bottom of your selection, then adjust the opacity of this new highlight to your liking.

Lookin good huh? Add text or details in the blue circle to your liking. General rule is to stick to the same color as your display, and use a slightly darker shade. That will really sell the look. Sharp drop shadows can really sell it too.

Hi-Tech Skin Tutorial: Final Result

Using the skills you've learned, you should be able to complete this interface. Add details to your liking. Don't forget to "light" each element to make it realistic. When you have large flat areas, throw in some gradients like before to break it up a bit and make it really pop.



Author's URL: Alan Hettinger
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Hi-Tech Skin (Part 2)"

Only registered users can write comment

No comments yet...