 |
Nutz & Bolts
"When Shapes evolve..."
When you add the 3rd dimension to a 2D shape, it then becomes a 3D Form. The key ingredient there being the addition of depth to height and width. In 3D software and Dynamic HTML (or DHTML) this dimension of depth is also known as 'the z plane'. Ok enough theory.
Making our shapes bulge
Here are three of the most common ways to create a convex or concave 3D effect out of a simple 2D shape. They are listed here in order of simplicity:
- Using white and black outlines and gradients, on multiple layers, with the addition of Gaussian Blur and/or the Noise filter for certain effects.
- Using the Emboss filter, with the addition of Gaussian Blur for certain effects.
- Using the Lighting Effects filter, which involves knowing how to use the Channels palette as well.
Most often i will use the 1st way. And most often after that i will use the Emboss filter. I only use use the Lighting filter in certain situations when i need a very pronounced effect that includes a special type of lighting to help achieve the effect. This of course is simply my personal preference though. I find i have more control over my effect using method 1. Some people choose to use mainly the Lighting filter, and if that's what works for them, or you, cool. Stick with it.
Now we're going to start our mini Interface project, so we can learn the basics of how to apply each of the methods mentioned above.
We'll be using all 3 methods collectively to create a 3 dimensional look for the Interface. Each method will be used separately to create the different parts of the Interface.
This is how we'll apply each method:
- Interface casing/shell - the Lighting Filter.
- Interface decorative etchings - the Emboss filter, plus black & white layers.
 Interface buttons & highlighting - gradients.
Before you begin this mini project, you'll need to download this special Photoshop light style i created just for this exercise - "Reflections". It works from within the Lighting effects filter. It's yours to have if you like it.
Because this file has no visible extension, i tried downloading it myself here first and installing it to see if it still worked after downloading. Thankfully, it does still work just fine.
NON PC USERS: If you're not able to downLoad this zipped file, Look Here to see a screen shot of the Lighting filter, and see how you can easily create this Light Style yourself.
If anyone has any problems with this file please let me know and i'll email the Reflections LtStyle to you. But if you find that simply clicking the link doesn't work, then try right-clicking on it and choosing 'Save File/Target As' from the pop-up menu. Mac users, i assume you would just press and hold your mouse down on the link to get a similar menu.
If you're not sure of just where this file goes in your Photoshop directory, read this:
Locate your Photoshop folder on your hard drive.
Open it, and find the Plugins folder.
In that folder is the Filters folder.
And within the Filters folder is the LtStyles folder. That's where you put this file. If the file is put into the proper folder, the next time you open the Lighting effects filter, the name "Reflections" will be in the list of lighting styles.
If you can't locate your Photoshop folder, try looking for an Adobe folder first.
Please Note:
In order to not make web pages that scroll on forever here (like i usually do), and to make this as easy as possible to understand, i'm going to use simple step-based instructions. I've also typed out all the instructions on plain white pages in case anyone would prefer to print them out or save them for later reference. And in case anyone wonders, i've only included sample images of the steps that i feel might confuse some folks.
Please keep in mind the sample images you'll see have been compressed and may appear lighter or darker than yours depending on your own system. But that will not effect how it turns out. The following steps have been broken into several pages, so as not to overload any one page with graphics.
Here's basically how the mini Interface will look when we're done all the steps. Except we won't be adding any colour in the exercise. Remember, this isn't a 'show piece'. It's simply an exercise to help you understand the methods used to create it.
((( BACK --- HOME --- NEXT )))
Creating the NUI: Concept of Design / Nutz & Bolts / 2D & 3D / navDesign Summary |
|
|
