I am a developer so working in Photoshop never really comes easy to me. This week I had to remove a background from an image so I thought it would be great to share this video with you. In this video Terry White shows us how to remove an image from the Background. Although he has done this in the past users want to know how it works when the background is not all the same color. Terry made something that I thought was very complex, really easy!
difference
mixed
The better I get at css (and I am getting better) I really start to understand designers hatred for IE. I guess I always knew it on some level but when you are really trying to write clean code it starts to upset you that you have to hunt down IE6 specific bugs. My advise to everyone working with css is to get your layout/design working in a standards compliant browser and then double back to find out what bugs you need to fix. The bug I came across today (I have before but this is a great fix) is the IE Whitespace bug.
I was trying to create a block level list elements for a navigation like flow. When you use the code below and check the output in FireFox everything is exactly how you want it. In IE though there is extra space between elements. Here is the code and what it looks like in both browsers. The one on the left is FF and the right is IE6.
2<head>
3 <title>Lists Example</title>
4 <style>
5 #navigation {
6 width:200px;
7 }
8 h3 {
9 margin:0px;
10 padding:0px;
11 border-bottom:1px dotted #272727;
12 }
13 ul {
14 margin:0px;
15 padding:0px;
16 list-style-type:none;
17 }
18 li a {
19 color: #759398;
20 text-decoration: none;
21 padding-top: 4px;
22 padding-right: 0px;
23 padding-bottom: 4px;
24 padding-left: 2px;
25 display: block;
26 border-bottom:1px dotted #272727;
27 }
28 li a:hover {
29 text-decoration: none;
30 background-color: #132022;
31 color: #ffffff;
32 }
33 </style>
34</head>
35<body>
36
37 <div id="navigation">
38 <h3>Navigation</h3>
39 <ul>
40 <li><a href="##">Menu Item 1</a></li>
41 <li><a href="##">Menu Item 2</a></li>
42 <li><a href="##">Menu Item 3</a></li>
43 <li><a href="##">Menu Item 4</a></li>
44 <li><a href="##">Menu Item 5</a></li>
45 <li><a href="##">Menu Item 6</a></li>
46 <li><a href="##">Menu Item 7</a></li>
47 <li><a href="##">Menu Item 8</a></li>
48 <li><a href="##">Menu Item 9</a></li>
49 <li><a href="##">Menu Item 10</a></li>
50 </ul>
51 </div>
52
53</body>
54</html>
One solution to the problem I found that I really like was hicksdesign.co.uk. After reading through the comments though some users pointed out that the css may not validate so I ended up going with a solution from the comments. Placing the following code in your css will fix the problem and the css will validate. The final outlook looks good in all the browsers that I tested.
2* html ul li a {
3 height:1em;
4}
5</style>
Like most programmers I always pull out the I am not a designer card so here it comes again. I am not a designer, but I have been using Photoshop for the better part of 6 years now. I was taught by a friend that a very important detail that you must pay attention to when creating layouts is organization of layers into groups and disincentive naming of layers. This helps when passing layouts on to other designers. When they need to make a change to the branding area logo, they can click on the folder branding and find the logo layers.
The reason I am bringing this up is because up until today I have never really had an issue with selecting layers. I received a Photoshop file from an outside designer today with well over 300 layers. The layers included the old site and many layers that did not make the final design. Finding layers to hide for rollover affects was a real pain in the butt. I always thought then when you choose your move tool you then had to select the layer to gain focus. This is a real pain when you have to go searching through all those layers that have absolutely no naming convention to them.
I am almost embarrassed to say this but I had no idea Photoshop had an auto select layer feature. When you have your move to selected you have a feature (that is off by default) for Auto Select Layer. When this is checked you click on an item and Photoshop will highlight that layer. I can not believe this, my job with this huge file just got a lot easier. Again I am pulling out the I am not a designer card, I just hope there is someone else out there without this knowledge!

