Reply to thread

Message: <blockquote data-quote="thimal3000" data-source="post: 5504596" data-attributes="member: 135087">The Vista Window at a Glance Before you try to design something, it’s almost always a good idea to examine the way something should look first. Let’s take a look at a Vista “Window”. <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/vista_window_example.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Making note of all the important parts of this design will help us remake the design ourselves.  Let’s start with the Main Window . The Main Window The main window makes up the entire frame of the window, and holds all of the windows smaller components. Therefore, it seems like a good place to start. We’ll begin by creating a new document (Choose the document size based on how large you want your window to be).  The background I’ll be using is shown below.  <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/background_example.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> We’re going to place the main window in the center of this new document.  To create the box, select the Rounded Rectangle Tool from the toolbar, and then set the radius of the rectangle to 5px in the Options Bar.  Select a foreground color of Black, and create a nice sized rectangle across your canvas.  <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/black_rectangle.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Set the Blending Mode of this shape layer to “Lighten“. Doing this will keep the shape intact, and make blending options 100% visible, while making the black shape invisible. Go into the Blending Options (Right Click Layer > Blending Options) and apply the following: <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/framedropshadow.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /><img src="http://www.tutorial9.net/wp-content/uploads/2008/01/frameborder.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /><img src="http://www.tutorial9.net/wp-content/uploads/2008/01/frameinnerglow.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /><img src="http://www.tutorial9.net/wp-content/uploads/2008/01/framebevel.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /><img src="http://www.tutorial9.net/wp-content/uploads/2008/01/framecolor.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /><img src="http://www.tutorial9.net/wp-content/uploads/2008/01/framegradient.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/customgradient.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Phew…  That’s a lot of styles…  <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/mainframe.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> It sure does come out looking nice though! The Light Rays As we’ve seen in the real Vista Window, there are some nice rays of light that appear to be passing through the main window. We’re going to recreate that effect now. Turn your Main Window Layer into a selection (Ctrl + Left Click Layer Thumbnail).  Create a New Layer Set above this layer.  While this layer set is selected, create a new layer mask to reveal the selection (Layer > Layer Mask > Reveal Selection).  Any layers placed inside of this layer set will only be visible now inside of this mask.  <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/lightlayermask.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Create a new layer, and place it inside of this Layer set.  Using the Rectangular Marquee Tool, make a thin selection extending from the top to the bottom of your canvas, and then using the Paint Bucket Tool, fill the selection with White.  <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/lightrayselection.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Deselect everything (Ctrl + D), and then Rotate this layer using Transform (Ctrl + T, or Edit > Transform > Rotate). Try to make it angle out a bit, to about -45*. You can enter in this value in the options bar, or hold shift, and rotate the layer in intervals (default of 15* intervals).  <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/transformray.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Apply a Gaussian Blur (Filter > Blur > Gaussian Blur) with a value somewhere between 2-5.  Using the Eraser Tool (Large, Soft default brush 200-250px, 0% hardness), go just slightly over the right edge.  Decrease the layer opacity to the 10-30% range. <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/singleray.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Complete this series of steps several more times to create a few similar light rays. Try to overlap some, and change the blur value & opacity to get a nice collection of rays. <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/lightrayscomplete.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> At long last, the Main Window is completed!  Now to move onto the Inner Window. Creating the Inner Window Be sure to be working above all other layers & layer sets at this point. To begin, we need to create a shape for the inner window.  Draw out a rounded rectangle shape, just as you did to create the shape for the main window.  <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/innerwindowframe.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Set this layers Blending Mode to lighten, as you did with the original.  Apply the following blending options to this shape layer:  <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/inner_window_outer_glow.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /><img src="http://www.tutorial9.net/wp-content/uploads/2008/01/inner_window_stroke.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Create a new Layer Set, and create a layer mask based off the inner window. In this set, you’ll have your Window’s contents. You’re window might look something like shown below: <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/vista_inner_window_complete.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> That’s a pretty slick lookin’ Vista Window if you ask me! Final Remarks   This is an excellent design technique for interface & layout design when used in moderation. I’ve seen it used in website designs for blogs, forums, and of course Microsoft new Operating System. There are a few notable “Extras” tacked onto the Windows Vista version of the design (such as the “Minimize”, “Maximize”, and “Exit” buttons, as well as the title), but those probably aren’t quite as practical in everyday design. With your new knowledge in blending options, you could probably replicate the exact look yourself! <img src="http://www.tutorial9.net/wp-content/uploads/2008/01/vista_window_final.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </blockquote>

Verification: Hath warak paha keeyada? (hatha wadikireema paha)

Top Bottom