Enter: P.O.S.

Influenced just as much by Mos Def as he is punk bands like Minor Threat, he fuses his styles seamlessly to produce a unique sound that may put a smile on your face, or may make you want to punch yourself in the face. In order to keep up with the downloaders he released a new album with unique artwork. There are solid slides and 6 transparent slides in the booklet so the fan can rearrange the booklet and create unique artwork for themselves. Pretty cool. Here is a video of the booklet being rearranged.

And here is a link to his first single “Goodbye”

Do you think the artwork will boost sales?

SUCCESS IS MINE!

One thing I don’t think I’ll ever understand is the UFC 93 betting lines, I guess you can say I’m not a better myself. Unless of course it’s at the horse races and I can make $2 bets, ooohhhh boy, big money big money!

And for any of those who care last month I got my blue belt in Brazilian Jiu Jitsu. YAY

Also things are going great at Lightpost Creative, we are getting very busy for the upcoming year. We recently upgraded to WordPress 2.7 and it is awesome. At first I was lost and wasn’t sure about the whole layout change, but now I like it. I also like the built in plugin search that it has, it makes things a lot easier when installing plugins since it can download, unzip and install for you with just a click of a button.

First Impressions

Signing up for Second Brain was easy, you create your Username and in no time you can start adding your services from the Dashboard. The Dashboard slides down and you can add a bookmark with a url or import your content from other sites. On the explore page you are presented with recent updates from Second Brain users and have the option of seeing recent collections as well. A collection is useful because you can separate your content into groups that you can easily go back to. For instance, if I wanted one for only design inspiration, I could create a collection and only add the articles or videos that I want to keep in it. You can either share your collections or have the option of keeping it private.

There is also a People page where you can see recent people who have signed up, the most followed, most viewed etc. When you follow people you can go to your homepage and their recent updates feed into yours for you. Another cool feature is the tag cloud. Second Brain collects all the tags from your services and creates a tag cloud for you that keeps all of them together. It’s nice when I want to see everything tagged Design that I’ve ever marked in another service.

Final Thoughts

One thing that I wish it had was a way to look at the users personal website. If I’m going to follow someone on Twitter I scan over what they’re saying then I look at their site to see who they are, usually gives you a very good impression. If they had that I think it’d be a good idea to have your own sites RSS feed added in your Second Brain.

I’m glad I signed up for Second Brain and I will continue to use it, I’m sure in the future it will get nothing but better. Anything that makes my life easier is okay with me.

Another reason to sign up is their sweet contest to win a Macbook Air and other prizes. If you sign up a new account and have great content, you could be picked to win. There are a ton more features that I didn’t mention that you just have to check out yourself, ya I said it.

Also on another side note my Image Sprite Navigation with CSS tutorial made Vandelay’s list called 45 Photoshop Tutorials for Better Navigation, check it out!

What is an image sprite?

Image sprite originated from old nintendo games - what developers had to do to keep the game from having to load a new image each time a different character entered the screen was store all of the images into a grid - once they had this grid they could call different sections of it and tell it to display it on the screen. The same big image was loaded one time, from then on different sections were called and displayed on the page.

How to use image sprites to create a CSS navigation

What we are going to do is copy the old image sprite technique used in video games, and apply it to our CSS. How you ask? We can do this in by off-setting the background position of each list item in our nav. Let me break this down step by step to help understand this concept.

1. First thing I did was create a very simple image for my nav bar, you can make one the same as mine if you are following along or if you’d like, it should be clear enough to make your own.

2. Once I was satisfied with my image, I exported it as nav.jpg. Once you have that image exported, change something on your navigation, you can change the color of the background, underline it, drop shadow or anything you want as long as the text for the titles don’t get too close to each other where they are interfering. Once you have made these changes, export the image again but call it: nav-over.jpg.

3. Now that we have two images, we need to combine them together into one image. Open both of the images, with nav.jpg selected, go to the Image > Canvas Size… option. Select the top of the image as the anchor point and change the units of measure to percent. Now make the height 200% and click ok.

Now our nav.jpg is in the top of its window, with blank space beneath it.

4. With Snap turned on, drag nav-over.jpg into the same window as nav.jpg. Place it exactly below it so it fits perfectly into the newly created space. Our new image should look something like this.

5. Now resave nav.jpg with both of the images combined, this is going to be the image we use for our navigation.

Once you have the image saved, we can start applying HTML and CSS to get this sucker working.

6. First we need the HTML, here we can make a simple unordered list that includes a different li for each of the buttons we created in photoshop (in this case 4.)

<ul id=”nav-example”>
<li id=”nav-example-01″><a href=”#”><span>Blog</span></a></li>
<li id=”nav-example-02″><a href=”#”><span>Portfolio</span></a></li>
<li id=”nav-example-03″><a href=”#”><span>Resume</span></a></li>
<li id=”nav-example-04″><a href=”#”><span>Contact</span></a></li>
</ul>

7. What we have now is an unordered list with 4 different button list items that each match a certain button on the navigation. The reason there is a span tag with the text inside it is because this way search engines see the text, not just an image. We will end up turning the span to display:none so the text doesn’t show.

This is still viewed as white hat SEO because the text matches the same as the text in the images. Be careful because you can get flagged for putting different content in the hidden fields if it doesn’t match the text on the background image.

8. Here is the final CSS of the image sprite navigation, the final example is at the bottom of the post, I’ll break each section of the CSS down piece by piece:

#nav-example {
background:url(”/images/nav-final.jpg”) no-repeat;
width:490px;
height:40px;
margin:0;
padding:0;
}

#nav-example span {
display: none;
}

#nav-example li, #nav-example a {
height:40px;
display:block;
}

#nav-example li {
float:left;
list-style:none;
display:inline;
}

#nav-example-01 {
width: 98px;
}
#nav-example-02 {width: 131px;}
#nav-example-03 {width: 123px;}
#nav-example-04 {width: 138px;}

#nav-example-01 a:hover {background:url(”/images/nav-final.jpg”) 0px -40px no-repeat; }
#nav-example-02 a:hover {background:url(”/images/nav-final.jpg”) -98px -40px no-repeat; }
#nav-example-03 a:hover {background:url(”/images/nav-final.jpg”) -229px -40px no-repeat; }
#nav-example-04 a:hover {background:url(”/images/nav-final.jpg”) -352px -40px no-repeat; }

9. The first part is the sizing and background image of the nav bar, the reason we set the height to 40px is because that is how big my original nav.jpg was before I combined it with the nav-over.jpg. This way only the top half of the image displays.

10. The #nav-example span is set to display none, this is what is going to hide the text of each list item. (Remember be careful not to try to hide keywords in these hidden fields, search engines will penalize you.)

11. #nav-example li, #nav-example a {height:40px; display:block;} - What this line is doing is displaying each list item and link to display block with a height of 40px. This makes sure that each link on the navigation is the same size. The reason it is displayed as block is so we can change the size of it, if it wasn’t we couldn’t change the width and height of each link.

12. #nav-example li {float:left; list-style:none; display:inline;} - The float:left is making it so each list item moves to the left side of each li below it, display inline makes sure they display in a horizontal line. List-style: none changes the li’s to not have a bullet next to them, sweetness.

13. #nav-example-01 {width: 98px;} - This is setting the width of the first button “Blog,” if I wanted to start this button 10px off the left side of the #nav-example I could do it by setting margin-left: 10px. The next couple lines are setting the width of each individual link, this way the 4 link widths add up to the total width of my main navigation(you can measure each link by either making guides or selections). Now comes the cool part.

14. What we have to do is set the a:hover state, the way the background is offset on each hover is (horizontal number of pixels) (vertical number of pixels.) Since we have a horizontal nav bar, the vertical number of pixels to be offset is going to be the same for all of them. For the first one it is going to be 0px -40px, 0px because the background image only needs to come straight up to the top left of the nav, so what we do is tell it to go 0px left or right and -40px vertical, a negative integer brings the background UP. This shows the bottom part of the sprite nav, and since we set the width of the li’s it only shows on the particular li we are hovering over.

15. To get the next number we take the width of the nav-example-01 and subtract if from the previous horizontal offset number(which was 0 in this case.) 0-98 = -98px, I’m a math genius. Now we can put this in for the next li, nav-example-02 a:hover will be -98px -40px no-repeat.

16. We do the same for the next one now, -98-131=-229px. Now the offset for the a:hover on nav-example-02 is -229px -40px. This is moving the top left corner of the li background image to the correct position.

17. Normally if you were to put the a:hover’s background image to nav-final.jpg, whichever li you were in it would show the new background image in the top left corner of it, this is why you have to offset the horizontal value to get the correct section where you want it.

18. Now if you do the same process for calculating each button you’ll end up with the same numbers I do, unless you have your own nav with more buttons or different width, then you’re on your own at this point. Once all the CSS is laid out correctly your nav should function like this one below.

• Blog
• Portfolio
• Resume
• Contact

Any questions can be posted below in the comments and I will try to answer them as clearly as possible.

Look forward to a new and improved article on my San Diego web design company’s blog.

UPDATE: The new post has been created here: CSS Image Sprites Tutorial - Create Multiple Buttons With Rollovers, all questions should be posted there. Thanks for everyone’s interest.

But honestly, I hope someone can stop this fire soon I’ve had many family and friends that evacuated already; good luck and many thanks to the firefighters working hard. For more emergency/evacuation details you can go to the San Diego emergency fire information website. Please pray for all those who have houses, lives and loved ones in jeopardy. Maybe instead of Arnold coming down to do nothing we can get some more able bodied firefighters so we can hopefully solve this problem sooner.

Since I hadn’t downloaded apps for a mac in a while, I got some help from my friend Jay Swain on which apps I needed most, and also which ones would just be nice to have. These are the ones I have so far, and I’m sure there are more to come:

1. Transmit - Transmit is an easy to use FTP client for OS X, it isn’t expensive and in my opinion, it can transfer files faster than Dreamweaver or anything else I have used. In version 3 it now supports more things like Automator, Amazon S3 and iDisk. I highly recommend this program for your Mac FTP needs.

2. Adium - Every new Mac comes with the instant messaging app called iChat. It works great and with my new MacBook Pro, I can even have video conferences on the nifty little camera. I was trying to figure out how I could get my Google Chat working through the same program; answer: Adium. This program can connect to over 10 different chat programs and display them in the same buddy list, this is nice for those of use that have multiple chat apps and want them all thrown into one. The only thing it doesn’t have that iChat does is support for video conferences. I would expect this on the next update though.

3. Quicksilver - If I had to name one app that could speed up my overall production it would be Quicksilver. At first glance, it looks like just a launcher for all your programs, but if you look deeper it is much more. Not only can it help clear up your dock of all those programs, it can also move files, upload files using an FTP program like Transmit (hint hint), search folder contents, que up songs in itunes and even put files in an email. How’s that for a simple launch program. The guys over at Life Hacker wrote a nice article called A Beginner’s Guide to Quicksilver. Check it out.

4. Google Notifier - This is a small app that is very easy to install and use. It’s purpose is to notify you of any new emails or upcoming events on your google calendar. When it sees a new email, it shows a little preview of it in the top right of your screen, from there you can ignore it or open it just as easily. Note: It has been brought to my attention that by default, the notifier sends your password over the network which can be insecure. There is a hack to fix this which I found from Secure Gmail Notifier, an article on macosxhints.com. What you do is hold down Command and Option, then click on the Notifier drop down, from there you select preferences while still holding down Command and Option. It opens up a box with two fields, Key and Value. What you do is type SecureAlways into the Key field, then put a 1 in the value field. Make sure you match the case on SecureAlways. Restart your notifier and it will now be sent through https connections.

5. TinkerTool - This application gives you access to additional preference settings Apple has built into Mac OS X. By doing this you can activate hidden features in the operating system and in some of the applications delivered with the system.

6. Dockless - What Dockless does is remove applications from your dock, this can be important for those who like to keep a clean dock. What I used it for was to remove some of the programs that can just run in the background and don’t ever need to be edited once I set them up the first time.

7. Growl - What Growl does is notify you of any changes in applications that you have running without you having to switch to them. You can be on the internet and have a growl drop down and tell you anything from a download being complete, a new instant message to a song changing in your iTunes. This is definitely one of my favorite new applications.

8. smcFanControl - One thing I learned about my new MacBook Pro is that it can get really hot. smcFanControl lets the user set the minimum speed of the built in fans. This way you can increase your minimum fan speed to make your Intel Mac run cooler. However in order not to damage your machines smcFanControl doesn’t let you set a minimum speed to a value below Apple’s defaults to prevent overheating.

9. Senuti - This is another one of those applications to put the files from your Mac onto your iPod. This is by far the easiest one I have ever used and I definitely recommend it.

10. AppZapper - All of the previous entries were adding apps to your computer, well this one is for removing them. AppZapper is an uninstaller that Apple should have already invented, but hasn’t. It would be nice if dragging an application to the trash would uninstall it, but it doesn’t. When an app is installed it adds preferences, caches, and other support files throughout your computer that can create clutter and confusion. This program can take care of all those pesky files and leave your Mac squeaky clean.

If you have any useful apps that I missed, let me know so I can add them. Also, since I will now be able to update my site more frequently, you can subscribe to my RSS Feed here.