By Denny Whipple
If you use Windows 7 and you find that you can no longer see the sound icon in your system tray, here's a quick way to fix the problem. First, though, probably the system policies have been changed on your machine. Who cares? You just want the damn icon back so you can adjust the volume. There are a ton of registry modifications that you can go through but if you're not interested in going this risky route, then simply go to this link (Download RestoreMyTrayIconsPlease Registry Hack) and download the file. Unzip it and run it. Log off and log back in to Windows and your sound icon will be replaced.
Here you'll find information to keep your computer running smoothly as well and tips and tutorials for Photoshop.
Tuesday, March 29, 2011
Friday, March 18, 2011
Create an Etch‐a‐Sketch Drawing in Photoshop
Find a picture of an etch‐a‐sketch. Google Etch a Sketch.
Open an image that you want to have in the Etch‐A‐Sketch. I’ve used a raccoon image.
Remove the background of the image using any method (selection, erase, etc).
Then use Levels to darken the image slightly. Access Levels by Control‐L or Image/Adjustments/Levels.
Then desaturate (Control‐Shift‐U).
Then choose Filter>Sketch>Graphics Pen.
You can experiment with the settings but these seem to work best.
Then select all (Control‐A) and copy (Control‐C).
Go to the Etch‐A‐Sketch image and paste.
Use Free Transform (Control‐T) to resize the image and position it over the Etch‐A‐Sketch layer.
Now, change the blending mode of the top layer to Linear Burn. That’s it!
Open an image that you want to have in the Etch‐A‐Sketch. I’ve used a raccoon image.
Remove the background of the image using any method (selection, erase, etc).
Then use Levels to darken the image slightly. Access Levels by Control‐L or Image/Adjustments/Levels.
Then desaturate (Control‐Shift‐U).
Then choose Filter>Sketch>Graphics Pen.
You can experiment with the settings but these seem to work best.
Then select all (Control‐A) and copy (Control‐C).
Go to the Etch‐A‐Sketch image and paste.
Use Free Transform (Control‐T) to resize the image and position it over the Etch‐A‐Sketch layer.
Now, change the blending mode of the top layer to Linear Burn. That’s it!
Sunday, March 13, 2011
Problems with Gmail security in Chrome
by Denny Whipple
A couple days ago I noticed that when using the Google Chrome browser and accessing my gmail account, there was a red slash through the https: portion of the address in the address bar. My email account was not secured and after doing some research online, I determined that the problem was being caused by an extension that was installed in Chrome. The article that I read said the problem was being caused by an extention in Chrome called fastestchrome. I checked my extensions and I didn't have that particular extension installed but I did have one called the GamePlayLab plugin. I disabled this and whoopdedoo, gmail is now encrypted in Chrome.
This is how to check your extensions and then disable extensions in Chrome. Go to the wrench icon on the right side of the address bar at the top of the browser window. Click it and then choose Tools and then choose Extensions. When you click Extensions the browser will open a window that shows the extensions you have installed. If you don't see the two extensions that I mentioned earlier in this article, you'll have to experiment by disabling one extension at a time and checking gmail until you get the right one disabled. When you get the correct one disabled gmail will now be encrypicted again in Chrome.
This problem only happened to me in Chrome and not IE or Opera. It's something that Google needs to address but at least you can use this method to get gmail encrypted again.
A couple days ago I noticed that when using the Google Chrome browser and accessing my gmail account, there was a red slash through the https: portion of the address in the address bar. My email account was not secured and after doing some research online, I determined that the problem was being caused by an extension that was installed in Chrome. The article that I read said the problem was being caused by an extention in Chrome called fastestchrome. I checked my extensions and I didn't have that particular extension installed but I did have one called the GamePlayLab plugin. I disabled this and whoopdedoo, gmail is now encrypted in Chrome.
This is how to check your extensions and then disable extensions in Chrome. Go to the wrench icon on the right side of the address bar at the top of the browser window. Click it and then choose Tools and then choose Extensions. When you click Extensions the browser will open a window that shows the extensions you have installed. If you don't see the two extensions that I mentioned earlier in this article, you'll have to experiment by disabling one extension at a time and checking gmail until you get the right one disabled. When you get the correct one disabled gmail will now be encrypicted again in Chrome.
This problem only happened to me in Chrome and not IE or Opera. It's something that Google needs to address but at least you can use this method to get gmail encrypted again.
Saturday, March 12, 2011
Backgrounds in web design: Going from PSD to code
By Ryan Boudreaux
In my previous post entitled “Backgrounds in Web Design: Creating a theme.” I illustrated the process of creating a layout using Photoshop to build backgrounds with various elements including buttons, images, textures, layers, text, colors, and placement. In this segment I will demonstrate taking the PSD file and converting it for display in HTML using CSS style coding.
All files referenced in this post are available in the download, “Website design from PSD to Code.”
The companion gallery, “Creating a website from Photoshop to CSS code,” contains the full-size images.
First, let’s open up the PSD file in the download, shown in Figure A. (You will have to download the file and unzip to access all of the files.)
Remember, you want to organize your layout in such a way that you can put them into defined divisions in rows, columns, blocks, or tiles so that they can be rendered in coding. The text and images in the PSD layout are added on top of the background layers and can be placed easily with styling code. It is the background elements that will need to be sliced, and before making the slices, I will copy the Body Background layer wood grain and save it as a separate gif file named WoodGrainBg.gif. All the images and slices are included in the download.
Building the code
For the code we will insert some divisions for the header, body and footer sections along with two columns inside the main section. To do this, we will create a set of division <div> tags along with several elements in an HTML document and then add some CSS to lay down the styling and placement.
The initial HTML is shown here in Snippet 1 and the file can be found in the download as InitialPage.html:
Snippet 1
Snippet 2
/*CSS Styles */
body {
background-color:#EBEBEB;
}
#header {
border:1px solid red;
}
#footer {
border:1px solid red;
}
.container {
width:1000px;
margin:0 auto;
border:1px solid red;
}
#right_column {
margin-top:10px;
float:right;
top:0;
right:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:5px;
padding-right:20px;
}
#left_sidebar {
margin-top:10px;
float:left;
top:0;
left:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:20px;
padding-right:5px;
}
Starting out, I want to display the foundation of the layout with simple divisions separating the header, main content, and footer from the body. Everything is contained within the <div id=main> starting with the <div class=container> which is set to 1000px width, and this includes the three primary content areas <div id=header>, <div id=main_content>, and <div id=footer>. As you can see in the CSS, the body background layer is set to a light gray. I’ve added a 1px red border just for sake of visualizing the elements as displayed in Figure I:
Now that we have the basic layout shapes with the primary elements in place, it is time to add some style with the images we sliced in our previous steps, adding in the body background image, the header, main content body, and footer image slices. Now I am going to add in more styling code and remove the red border within the CSS, as shown below in Snippet 3.
Snippet 3
The food collage background image FoodImages.gif and the soup image Soup.gif will be contained within their own divisions named #headImage, and #footImage respectively. And because these images will be aligned above and overlap several other divs they will be assigned a z-index number of 2, and all the other div elements will be assigned z-index of 1. The higher number z-index assigned to an element will render it above all the lower-assigned numbers, so that any element assigned a higher numbered z-index will always be above the lower numbered elements. This allows us to layer several div elements that may overlap within the document.
The CSS for the <div id=headImage> and the <div id=footImage> is shown in Snippet 4.
Snippet 4
#headImage {
background-image:url(images/FoodImages.gif);
background-repeat:no-repeat;
width:495px;
height:460px;
position: absolute;
z-index: 2;
float:left;
margin-left:-250px;
margin-top:45px;
}
#footImage {
background-image:url(images/Soup.gif);
background-repeat:no-repeat;
width:475px;
height:185px;
position: absolute;
z-index: 2;
float:right;
margin-top:90px;
Note in both the #headImage and #footImage CSS that the z-index: 2 are set, the positions are absolute, and width and height are also defined. The margin settings shift the images in placement within the container, and these can be adjusted depending on desired placement.
The full CSS updates are shown in Snippet 5 and found in the download file as ImagesAddedStyle.css.
Snippet 5
body {
background-color:#EBEBEB;
overflow-y: auto;
overflow-x: auto;
margin: 0;
padding: 0;
}
#main {
background: url(images/WoodGrainBg.gif);
background-repeat:repeat;
overflow-y: auto;
overflow-x: auto;
z-index: 1;
}
#main .container {
overflow:visible;
}
#main_content {
background: url(images/Body.gif) top center repeat-y;
margin:0px auto;
float:right;
width: 1000px;
color: #403116;
font-size: 1.2em;
overflow:hidden;
z-index: 1;
}
#contentText {
margin: 0 20 10 200;
padding-left:170px;
padding-right:30px;
}
#header {
background:url(images/Header.gif);
background-repeat:no-repeat;
background-position:center;
overflow:auto;
padding-bottom:240px;
color:#030303;
z-index: 1;
font-size: 1.2em;
}
#footer {
background-image:url(images/Footer.gif);
background-repeat:no-repeat;
background-position:center;
margin: 0 auto;
color:#030303;
padding-bottom:160px;
padding-left:35px;
z-index: 1;
overflow:auto;
font-size: 1.2em;
max-height:300px;
}
#footer .leftContainer {
width: 450px;
float:left;
text-align:left;
position:relative;
padding-right:20px;
}
#footer .rightContainer {
width: 475px;
float:right;
text-align:left;
position:relative;
padding-right:10px;
}
.container {
width:1000px;
margin:0 auto;
position:relative;
}
#right_column {
margin-top:10px;
float:right;
top:0;
right:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:5px;
padding-right:20px;
}
#left_sidebar {
margin-top:10px;
float:left;
top:0;
left:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:20px;
padding-right:5px;
}
/* Images CSS styles */
#headImage h1, #headImage small {
margin:0px;
display:block;
text-indent:-9999px;
}
#headImage {
background-image:url(images/FoodImages.gif);
background-repeat:no-repeat;
width:495px;
height:460px;
position: absolute;
z-index: 2;
float:left;
margin-left:-250px;
margin-top:45px;
}
#footImage {
background-image:url(images/Soup.gif);
background-repeat:no-repeat;
width:475px;
height:185px;
position: absolute;
z-index: 2;
float:right;
margin-top:90px;
}
Note the following:
In my previous post entitled “Backgrounds in Web Design: Creating a theme.” I illustrated the process of creating a layout using Photoshop to build backgrounds with various elements including buttons, images, textures, layers, text, colors, and placement. In this segment I will demonstrate taking the PSD file and converting it for display in HTML using CSS style coding.
All files referenced in this post are available in the download, “Website design from PSD to Code.”
The companion gallery, “Creating a website from Photoshop to CSS code,” contains the full-size images.
First, let’s open up the PSD file in the download, shown in Figure A. (You will have to download the file and unzip to access all of the files.)
 |
| Figure A |
In Photoshop we will make several slices of the main content background section starting with separating the header section from the body, and then the footer section. The body background will be a separate division and we will eventually create divisions with <div> tags in the coding to piece it all back together.
Remember, you want to organize your layout in such a way that you can put them into defined divisions in rows, columns, blocks, or tiles so that they can be rendered in coding. The text and images in the PSD layout are added on top of the background layers and can be placed easily with styling code. It is the background elements that will need to be sliced, and before making the slices, I will copy the Body Background layer wood grain and save it as a separate gif file named WoodGrainBg.gif. All the images and slices are included in the download.
Making slices
First, turn off all the other layers in the PSD file with the exception of the Content Background layer, all the Button X layers, and the Text layers that name all the buttons. Keep them visible and active as shown in the Layers dialog box in Figure B.
 |
| Figure B |
Then select the Slice Tool as shown in Figure C.
 |
| Figure C |
Then, using the Slice Tool, draw a box shape over the header area, then another box for the main body content area, and then one more for the footer area, as shown in Figure D.
 |
| Figure D |
Now, select the Slice Select Tool as shown in Figure E.
 |
| Figure E |
When you double-click over the first slice for the header, a dialog box opens as shown in Figure F.
 |
| Figure F |
Add the name for the slice, in this case Header. Once the three slices are named, save the file by going to the menu path File | Save For Web | Save, or (Alt+Shift_Ctrl_S). All the slices will be saved as separate images as shown in Figure G.
 |
| Figure G |
Since the food images overlap somewhat with the header and body backgrounds, we need to make that slice separate. Next ,we will hide those active layers and make the food image collage at the top left of the header and body sections visible, therefore creating a fourth slice for that section, as shown in Figure H.
 |
| Figure H |
Then we will name and save the slice as we did in the steps for the first three above. I named this slice Food Images. We now have four slices that will be used to build our main sections of the header, body, and footer portions of the layout.
Building the code
The initial HTML is shown here in Snippet 1 and the file can be found in the download as InitialPage.html:
<div id=main>
<div class=container>
<div id=header>
<p>Header Stuff Goes in Here</p>
</div>
<div id=main_content>
<div id=left_sidebar>
<p>Left Column </p>
</div>
<div id=right_column>
<p>Right Column</p>
</div>
</div>
<div id=footer class=container>
<p>Footer Stuff Goes in Here </p>
</div>
</div>
</div>
<div class=container>
<div id=header>
<p>Header Stuff Goes in Here</p>
</div>
<div id=main_content>
<div id=left_sidebar>
<p>Left Column </p>
</div>
<div id=right_column>
<p>Right Column</p>
</div>
</div>
<div id=footer class=container>
<p>Footer Stuff Goes in Here </p>
</div>
</div>
</div>
The initial CSS is shown in Snippet 2 and is available in the download as the file style.css:
/*CSS Styles */
body {
background-color:#EBEBEB;
}
#header {
border:1px solid red;
}
#footer {
border:1px solid red;
}
.container {
width:1000px;
margin:0 auto;
border:1px solid red;
}
#right_column {
margin-top:10px;
float:right;
top:0;
right:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:5px;
padding-right:20px;
}
#left_sidebar {
margin-top:10px;
float:left;
top:0;
left:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:20px;
padding-right:5px;
}
Starting out, I want to display the foundation of the layout with simple divisions separating the header, main content, and footer from the body. Everything is contained within the <div id=main> starting with the <div class=container> which is set to 1000px width, and this includes the three primary content areas <div id=header>, <div id=main_content>, and <div id=footer>. As you can see in the CSS, the body background layer is set to a light gray. I’ve added a 1px red border just for sake of visualizing the elements as displayed in Figure I:
 |
| Figure I |
Adding the background image slices
Snippet 3
body {
background-color:#EBEBEB;
overflow-y: auto;
overflow-x: auto;
margin: 0;
padding: 0;
}
#main {
background: url(images/WoodGrainBg.gif);
background-repeat:repeat;
overflow-y: auto;
overflow-x: auto;
}
#main .container {
overflow:hidden;
}
#main_content {
background: url(images/Body.gif) top center repeat-y;
margin:0px auto;
float:right;
width: 1000px;
color: #403116;
overflow:hidden;
}
#header {
background:url(images/Header.gif);
background-repeat:no-repeat;
background-position:center;
overflow:hidden;
padding-bottom:185px;
color:#030303;
}
#footer {
background-image:url(images/Footer.gif);
background-repeat:no-repeat;
background-position:center;
margin:auto;
color:#030303;
overflow:auto;
padding-bottom:235px;
}
.container {
width:1000px;
margin:0 auto;
}
#right_column {
margin-top:10px;
float:right;
top:0;
right:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:5px;
padding-right:20px;
}
#left_sidebar {
margin-top:10px;
float:left;
top:0;
left:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:20px;
padding-right:5px;
}
background-color:#EBEBEB;
overflow-y: auto;
overflow-x: auto;
margin: 0;
padding: 0;
}
#main {
background: url(images/WoodGrainBg.gif);
background-repeat:repeat;
overflow-y: auto;
overflow-x: auto;
}
#main .container {
overflow:hidden;
}
#main_content {
background: url(images/Body.gif) top center repeat-y;
margin:0px auto;
float:right;
width: 1000px;
color: #403116;
overflow:hidden;
}
#header {
background:url(images/Header.gif);
background-repeat:no-repeat;
background-position:center;
overflow:hidden;
padding-bottom:185px;
color:#030303;
}
#footer {
background-image:url(images/Footer.gif);
background-repeat:no-repeat;
background-position:center;
margin:auto;
color:#030303;
overflow:auto;
padding-bottom:235px;
}
.container {
width:1000px;
margin:0 auto;
}
#right_column {
margin-top:10px;
float:right;
top:0;
right:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:5px;
padding-right:20px;
}
#left_sidebar {
margin-top:10px;
float:left;
top:0;
left:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:20px;
padding-right:5px;
}
A few notes on the CSS coding update:
- I’ve set the body overflow y and x to auto and given the margin and padding a setting of 0 each, this is to set the align the page in all browser versions.
- The main background image WoodGrainGb.gif is set to repeat with auto overflow y and x. so that in any screen resolution or browser window the wood grain background will cover the entire viewing area.
- The #main. container element is set to an overflow of hidden; this is to allow the food collage image div element to layer above the other div elements.
- The #main_content body.gif background image is set to repeat vertically and centered with a margin of 0px, and auto.
 |
| Figure J |
Adding the remaining images
The CSS for the <div id=headImage> and the <div id=footImage> is shown in Snippet 4.
Snippet 4
background-image:url(images/FoodImages.gif);
background-repeat:no-repeat;
width:495px;
height:460px;
position: absolute;
z-index: 2;
float:left;
margin-left:-250px;
margin-top:45px;
}
#footImage {
background-image:url(images/Soup.gif);
background-repeat:no-repeat;
width:475px;
height:185px;
position: absolute;
z-index: 2;
float:right;
margin-top:90px;
Note in both the #headImage and #footImage CSS that the z-index: 2 are set, the positions are absolute, and width and height are also defined. The margin settings shift the images in placement within the container, and these can be adjusted depending on desired placement.
The full CSS updates are shown in Snippet 5 and found in the download file as ImagesAddedStyle.css.
background-color:#EBEBEB;
overflow-y: auto;
overflow-x: auto;
margin: 0;
padding: 0;
}
#main {
background: url(images/WoodGrainBg.gif);
background-repeat:repeat;
overflow-y: auto;
overflow-x: auto;
z-index: 1;
}
#main .container {
overflow:visible;
}
#main_content {
background: url(images/Body.gif) top center repeat-y;
margin:0px auto;
float:right;
width: 1000px;
color: #403116;
font-size: 1.2em;
overflow:hidden;
z-index: 1;
}
#contentText {
margin: 0 20 10 200;
padding-left:170px;
padding-right:30px;
}
#header {
background:url(images/Header.gif);
background-repeat:no-repeat;
background-position:center;
overflow:auto;
padding-bottom:240px;
color:#030303;
z-index: 1;
font-size: 1.2em;
}
#footer {
background-image:url(images/Footer.gif);
background-repeat:no-repeat;
background-position:center;
margin: 0 auto;
color:#030303;
padding-bottom:160px;
padding-left:35px;
z-index: 1;
overflow:auto;
font-size: 1.2em;
max-height:300px;
}
#footer .leftContainer {
width: 450px;
float:left;
text-align:left;
position:relative;
padding-right:20px;
}
#footer .rightContainer {
width: 475px;
float:right;
text-align:left;
position:relative;
padding-right:10px;
}
.container {
width:1000px;
margin:0 auto;
position:relative;
}
#right_column {
margin-top:10px;
float:right;
top:0;
right:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:5px;
padding-right:20px;
}
#left_sidebar {
margin-top:10px;
float:left;
top:0;
left:0;
width:475px;
min-height:600px;
overflow:auto;
padding-left:20px;
padding-right:5px;
}
/* Images CSS styles */
#headImage h1, #headImage small {
margin:0px;
display:block;
text-indent:-9999px;
}
#headImage {
background-image:url(images/FoodImages.gif);
background-repeat:no-repeat;
width:495px;
height:460px;
position: absolute;
z-index: 2;
float:left;
margin-left:-250px;
margin-top:45px;
}
#footImage {
background-image:url(images/Soup.gif);
background-repeat:no-repeat;
width:475px;
height:185px;
position: absolute;
z-index: 2;
float:right;
margin-top:90px;
}
Note the following:
- z-index 1 setting has been added to the #main, #main_content, #header, and #footer style elements.
- #footer .leftContainer, and #footer .rightContainer styling has been added so that the footer image and text can be aligned and separated within the footer.
- #headImage h1, #headImage small allows an <h1> and a <small> text within the header image, with the text-indent set to -9999px. This helps with SEO keywords without having to render the text on screen
I have added several paragraphs <p> of Lorem ipsum filler text within the main content, left sidebar, right sidebar, and left footer divs to help with visualizing the full layout with text and images. You can view the layout with images rendered in Firefox as shown in Figure K and the HTML is found in the download file ImagesAddedPage.html.
 |
| Figure K |
Thursday, March 10, 2011
Designing websites without code
A trend toward creating websites for the masses without knowing a line of code seems to be catching on. I will briefly highlight the three platforms that many organizations are using, and without going into too much detail, I will describe some of their attributes and inroads they have made in the web development community.
Several content management systems (CMS) have amassed a large following in the past several years, including WordPress, Drupal, and Joomla. These three are at the top of the list, but there are plenty of others out there to choose from. Each of these systems utilizes a graphical user interface that bridges the gap between coding your own and getting content into production. If you are creating customizations of themes and templating, this still requires coding, but many folks use these platforms straight out of the box.
There are benefits to these systems and while some of them do require a longer and steeper learning curve, with little skill, you can have a decent website up in hours or days.
WordPress
WordPress, the semantic personal publishing platform, for example, is probably one of the easiest for the novice web designer. Many hosting providers will automatically install WordPress and set up the MySQL database for the backend — all you have to do is assign an administrator, a few passwords, and you are all set. Adding content is easy with the dashboard; type or copy text or code by hand, and you are done. WordPress also features an import and export utility that is helpful. And now that WordPress is into version 3.01 it has moved from the “best blogging platform” and into a full-fledged content management system. Examples of organizations that currently utilize WordPress for their web development platform are Reuters, Flickr, Harvard Law School, OpenID, and 2Advanced Studios.Drupal
Several United States Federal government agencies are using Drupal as their web development platform today, including the White House website. The EPA is currently looking into using it for its public website. Drupal is currently used by many other well known sites such asGrammy.com, Intel, AT&T, and CNNGo.com, to name a few.Joomla
Joomla is a more advanced CMS, and its functionality requires a bit more expertise than, say, a WordPress installation, but it still offers an easy interface to quickly build inventory control systems, data reporting tools, reservation systems, integration for e-commerce systems, and custom product catalogs. Joomla CMS platform is currently utilized for powering these sites: Deep Purple (that’s right, the rock band), Epson R&D, andPorsche Brazil just to name a few.Five tips for efficient file management in Windows 7
The Windows 7 environment will spook some XP users at first. It isn’t an extension of XP; it’s an entirely new interface. Although the underlying file structure is the same, there’s less to file management. The truth is, storing and accessing files in XP and earlier versions required some knowledge of the file structure. Windows 7 doesn’t require that knowledge — the file hierarchy is behind the scenes. Consequently, users new to the PC will find Windows 7 easy to use, but those upgrading from XP might be a bit disoriented.
You can also pin individual files to their respective application’s list. With the file open, right-click its program icon on the Taskbar. In the resulting list, right-click the file, as shown in Figure C. Once you’ve pinned a file, you can quickly open it. Simply right-click the program icon and choose the file from the Pinned section. You’ll also see the most recently used files, but that list will change as you open and use new files. The Pinned list doesn’t change unless you add or remove items.
1: Get to know the Documents library
Documents is the XP My Documents folder, only better. It’s no longer just a folder. Documents is now a library. (I’ll explain libraries next.) When you save an Office file, the application will default to Documents, just as it used to default to My Documents. While you’re learning Windows 7, save files to Documents because they’ll be easy to find later. Just click the Start menu and the Documents library is right there, with all your files. Or open Windows Explorer and click Documents in the Libraries group. Until you learn your way around, saving your files to the Documents library will save you a lot of confusion.2: Use libraries for quick access
In earlier versions of Windows, you saved files to folders. Windows Explorer displayed the file structure as dozens of folders housing hundreds of files. Depending on your folder structure, some files might be several subfolders deep. Now, remember the old file cabinet analogy? Imagine a long line of file cabinets. Functional, yes, but efficient? Not always. And the more folders and files you added, the more of them you had to wade through to get to what you needed.A Windows 7 library is more like a storeroom. Imagine that you’re in a hall with several doors. The sign on the first door reads “Documents.” You open a door to find a few file cabinets storing all your files. The second door’s sign reads “Pictures.” File cabinets filled with your pictures are inside. Windows 7 knocks the older linear C:\ hierarchy of dozens of folders down to a handful of libraries.
Libraries don’t actually store your files. Your files are still stored in the traditional linear hierarchy. Libraries simply pull related folders into one spot for quicker access. It’s a virtual view of your hierarchy. I recommend that you try to adjust to the library structure, but if you truly hate it, you can display a more traditional view. To do so, choose Folder And Search Options from the Organize menu. In the Navigation Pane section, check the Show All Folders option.
3: Avoid the HomeGroups password pitfall
HomeGroups are like libraries but they work with networked PCs. Any machine that’s part of a HomeGroup can grant read and write access to other machines in the HomeGroup. As you might expect, HomeGroups are password protected. But rather than letting you enter your own password, Windows 7 generates a 10-character password for you. Write this password down and don’t lose it! You’ll only need it once, when you connect the first time. Once connected, you can change the password to whatever you like.
I don’t know why Windows 7 forces this generated password on us, but it does, hence the warning. It’s easy to get distracted and forget the password or lose it before you have a chance to connect that first time. In addition, this new feature works only with Windows 7 machines — an unfortunate decision on Microsoft’s part because most of won’t be able to utilize it.
4: Save time with jump lists
Jump lists are one of my favorite features. You pin applications and files you use often to the Taskbar. It doesn’t matter where you actually store the file. Once it’s pinned, you have quick access to it. To add a program, do the following:- Click the Start menu.
- Find the application and right-click it.
- Choose Pin To Taskbar, as shown in Figure A. Windows 7 adds an icon, shown in Figure B, to the Taskbar.
Figure A
Figure B
Figure C
5: Work efficiently with two instances of Windows Explorer
It’s easy to work with two instances of Windows Explorer open at the same time, thanks to Windows 7’s new snap behavior. First, open Explorer as you normally would by clicking the Explorer icon in the Taskbar. (That’s a nice feature in itself.) Drag the window’s title bar to the left until Windows 7 displays an outline around the left half of the screen. Release the window and Windows 7 will snap the window to the left half of your screen. To open a second instance, hold down the [Shift] key and click the Explorer icon on the Taskbar again. Repeat the process above, but drag the second instance to the right and release. You end up with two windows, side by side. Moving and copying files is a snap with two instances of the Explorer open.Now, here’s a useful tip for the keyboard users. After opening the first instance of Explorer, hold down the [Windows] key and press the left arrow key. Doing so will automatically align the window to the left side of the screen. Open the second instance, hold down [Windows] and press the right arrow key.
Tuesday, March 8, 2011
Stretching Part of an Image in Photoshop
By Denny Whipple
Find an image that lends itself to being stretched.
Open the image and select the object that you want to stretch.
Activate Layer 1 and Control Click one of the icons on a layer with just the selection on it.
I turned of the “eyes” of the selection layers and pressed Delete on Layer 1 to remove the selected area.
Now if you zoom in you’ll see that there a zig zag thing going on at the top of the window. To fix this I’ll use the Clone Stamp tool but first I’ll merge the all the layers making up the stretch.
Find an image that lends itself to being stretched.
Open the image and select the object that you want to stretch.
What I did on this image of the BMW is use the Magic Wand tool with the selection being subtracted and then I inversed the selection.
Copy the selection to a new layer (Control J).
Turn off the Background layer and clean up layer 1’s image. I’m going to erase the white under the car but I’ll leave the shadow for now. I can remove it later if I think it needs removal.
Next, I made a selection on the image where I think it will be easiest to piece the extended parts together and then I made several new layers with this selection.
Activate Layer 1 and Control Click one of the icons on a layer with just the selection on it.
I turned of the “eyes” of the selection layers and pressed Delete on Layer 1 to remove the selected area.
Turn off Layer 1 and erase the front part of the car (again with Layer 1 copy selected).
Now turn off the “eye” on Layer One copy and activate Layer 1. Erase the front of the car.
It’s a good idea to rename the layers so I’ll do it now. You can see the names in the next screen shot.
I used Ext to represent Extension Piece. At this point I don’t know how many extension layers I need. have 5 but I can delete or add layers if I need them as I progress.
Now I used the Crop tool to enclose the entire image and then I pulled the left and right sizing handles out to stretch the canvas.
Now I’ll move the front of the car to the left and the rear of the car to the right. I turned the Back layer back on to do this and I also held down the Shift key so the images didn’t go up or down.
I don’t know exactly where the pieces will end up in the final image so I moved them out close to the edges of the canvas. I can move them in later if I need to.
Now turn on the Ext 1 layer and move it (don’t forget to hold the Shift key!) either left or right. I moved it right in this example and aligned it with the front of the car.
Now I’ve used up all the Ext layers so I’ll duplicate Ext 5 several times so I have enough to continue the stretch. Also, I’ll rename the layers so It’s easier to determine which layer is where.
Now I’ll continue to move layers to fill in the area between the front and rear.
At this point I was satisfied with the length so I moved the Rear Layer to the left to complete the car.
Now I reduced the canvas with the Crop tool.
Now if you zoom in you’ll see that there a zig zag thing going on at the top of the window. To fix this I’ll use the Clone Stamp tool but first I’ll merge the all the layers making up the stretch.
Now to start cloning. Take your time and do a good job.
I’ve got a good section completed but as I go farther towards the front I keep getting wavy areas so I’m going to make some selections and then fill them with the color that I need.
I also made a second selection to fill in the black under the white line. I used the Eye Dropper to sample the color that I needed and then I Alt Backspaced to fill the selections. I still need to fix the area where the curve starts as well as the staggering in the window.
To fix the curve at the top front I used a small, hard paint brush and I kept pressing the Alt key to sample the colors I needed, then I switched to the Clone Stamp tool and picked the Square Brush set and constantly re‐targeted the areas to get the pixels from. It’s about half done in the next image.
I also made the black area at the top of the window nice and clean by using the Rectangular Marquee tool and filling with the black that I sampled with the Eye Dropper.
I used the Paint Brush with a hard edge to fill in the black trim line at the bottom of the window and I kept resampling with the orange and back to black, etc, to get the bottom edge right. I would click a dot with the brush and then hold down the Shift key and click at the end where I wanted the line to end to complete the filled area.
Next I’ll select the headrests copy them to a new layer and continue to create new layers with them to place them along the window.
To finish it off I’ll put another door in behind the first head rest. I’ll look at the original image to see exactly where it should go. I’ll make a careful selection of the seam in the door and the door handle and copy these things to new layers and move them into position. I’ll make sure that I select the shadows under the door handles, too. Then I select the window pillar and make two copies of it in layers and move them into position. I also painted the windows with a sample of the rear window color. I also used the Burn tool so it looked like the back window.
I merged all the layers except the Background and then increased the canvas size, moved the cars around so they could both be seen on the canvas. Then I gave it a new background.
Here’s another example that I did with a World War II bomber.
Sunday, March 6, 2011
Make the Windows Key a good habit in Windows 7
s you may know, the Windows Key was introduced on the first Microsoft Natural Keyboard in 1994, and while it is now a mainstay on just about every PC keyboard, I am still surprised by the fact that not many people use it to their advantage. Sure, lots of folks use Windows Key to open the Start menu or in combination with the [Tab] key to launch the Windows Flip 3D feature, the rotating carousel-like interface for switching between tasks. However, there are many other really handy, timesaving features that the Windows Key can provide for Windows 7 users if, and only if, you take the time to learn the keystrokes and make using them a habit.
In this edition of the Windows Desktop Report, I’ll tell you about my favorite Windows Key shortcuts and show you how to make them habit forming.
In this edition of the Windows Desktop Report, I’ll tell you about my favorite Windows Key shortcuts and show you how to make them habit forming.
Windows + R
Ever since Microsoft removed the Run command from the Start menu in Windows Vista to make room for other features, people have been clamoring for its return. In Vista that means using the Local Group Policy Editor and enabling the Add the Run command to the Start Menu setting. In Windows 7, it’s a bit easier — you go to the Customize Start Menu dialog box and then select the Run command check box.However, why bother returning the Run command to the Start menu, where it can be considered a waste of space, when you can easily launch the Run dialog box with a simple Windows + R key combination. Give it a shot, and you’ll see how easy it is.
Want to make it a habit? Go ahead and remove the Run command from the Start menu. Then you’ll be forced to use the Windows + R key combination. Sure, it might feel like a pain at first, but after using Windows + R for a while, you’ll forget all about the Run command on the Start menu.
Windows + E
Probably one of the first Windows Key combinations that I learned was Windows + E, which is used to launch Windows Explorer targeted on the Computer folder. However, making this one a regular habit has always been difficult since I became so used to accessing Computer and Documents on the Start menu as well as on the Quick Start menu. And, in Windows 7, Windows Explorer is pinned to the Taskbar.Once I decided to make a concerted effort to use the Windows + E combination, it became easier to ignore those icons. But I found myself slipping back to my old ways too often. So I decided to force the habit.
To do so, I first unpinned the Windows Explorer icon from the Taskbar. Then I went to the Customize Start Menu dialog box and selected the Don’t Display This Item under the Computer and Documents sections. Both of these actions are illustrated in Figure A.
Windows + G
When you use this Windows Key combination, all your Gadgets instantly come to the foreground and float over top of the open window, as shown in Figure B. When you click anywhere on the window, the Gadgets drop back to the background.Figure B
Windows + Spacebar
While Windows + G brings the Gadgets to the foreground, pressing Windows + Spacebar activates Aero Peek, which makes all the open windows transparent, thus allowing you to instantly see your Gadgets, as shown in Figure C.Figure C
Windows + Break
Probably one of the easiest Windows Key combinations to make a habit for me was Windows + Break, which brings up the System window, shown in Figure D. I suppose it was the mere fact that I never actually used that key for anything, so it was easy to remember.Figure D
Windows + L
I got into the habit of using this one at work in order to shield confidential information from prying eyes. Every time I get up from my desk, I press Windows + L to lock my system, thus requiring that you enter the password to regain access. It was easy to make this a habit since it is so instantaneous and very easy to use.Windows + 1-9 & 0
This set of Windows Key combinations is pretty neat as it allows you to sequentially launch or access the applications displayed on the Taskbar. Moving from Start to the right, the first icon is accessed by pressing Windows + 1, the second icon, by pressing Windows + 2, and so on. If the icon is pinned to the Taskbar and the application is not running, pressing the Windows Key combination will launch the application. If the application is running, pressing the Windows Key combination will bring that application to the foreground.This one is difficult to make a habit since there are multiple ways to switch tasks, but once you get used to using the Windows Key for some of the other operations I’ve mentioned here, you will find it easier to remember and use this Windows Key technique.
Subscribe to:
Posts (Atom)