So, are you looking to buy a gift for someone who enjoys the outdoors, or just likes photos of beautiful scenery? Well, I live in the Pacific Northwest, and I try to capture some of it’s beauty with my photography. I’ve posted many of my images on my photo blog which is over at the Preeminent Productions Store. You can order right from there. Those image orders are managed by FotoMoto. I also have other images posted on Fine Art America. You can view them here. Photos are printed with top of the line, Epson printers. You have the choice to order plain prints, canvas prints, framed prints, or acrylic prints. All shipped within 3 days and with a 30 day return guarantee! Don’t stress over that last minute gift idea anymore! Here’s the perfect solution for your “what do I get him, he has everything” problem, or the “she’s so hard to shop for” issue. If you have any questions or requests on images, please don’t hesitate to contact me.

Web Development, Graphic Design, and Photography. I can work with any budget, let's get your project started today!

I’ve been really playing around with using the two new CSS3 properites -transitions and transforms- in my projects lately. This little, quick tip only uses transitions and one image. Now, of course the number of images used will vary depending on what you decide to use this for. I included “Navigation” in the title of this post, because this method would be perfect for your navigation. I needed a rollover image for some social media icons for my newest project that I’m working on. Before I even thought about bringing in any css3, I did what I normally do and fired up Photoshop. Open up your icon or image of choice. For this example, I’ll use this Facebook icon:

This image is 50px by 50px. So what we do is, expand your image’s canvas to a height of 100px. The width stays at 50px. In other words, exactly double the length of your canvas. Now create a new copy of your icon and move it down the canvas exactly 50px. You now have two icons that are exactly the same. Now you need to apply your desired changes or effects to either one of them. Top or bottom one, doesn’t matter. In my case, I’m going with turning my top icon to glossy black:

Save your image for the web. Most likely, you will want to save it as a .png file.
Ok, now we are ready to fire up your favorite coding program, so that we can give a slot machine effect to it!

You want to create your link in your html, and give it a class:

"http://facebook.com" class="facebook">My Facebook Page

Then, in our css file, we’ll declare a few things for this link. We can easily target it by using the class of “facebook” that we gave it.


.facebook{display: inline-block;position: relative;text-indent: -9999px;width: 50px;height: 50px;background: url("../images/fb-new-roll.png") no-repeat 0 0;}


It’s important to note the height that we declared there. Our full image will be double that number, but we only want half of it to show. We have also sent our text off the screen with the indentation. We also declared what directory our image is at, along with the fact that we don’t want it to repeat, and it needs to be positioned at “0″ in it’s default state.

Now we will declare what we want to happen when our users hover over the icon:


.facebook:hover{background-position: 0 -50px;}


Simple, right?! All we’ve done is said for the image to be moved down by 50px, or half of your own image’s height.
That will give you a perfectly good, working css image hover-over.
But let’s add in one more thing for that “slot machine” look.

Go back up and add in some fancy, new css3:


-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;


This is telling the browser to slowly transition that image move. In other words, my image will move down 50px, and it will be done in 1 full second, instead of instantly.
The reason why you see that declared more than once in the css, is because we still have to target individual browsers with all those different prefixes.
-webkit is for Chrome and Safari
-moz is for Firefox
-o is for Opera
-ms is for Internet Explorer 9
Then the one without a prefix is future proofing your code for the day when we don’t need to use the prefixes.
This won’t work in older browsers, and certainly won’t work in Internet Explorer 7 or 8, but it doesn’t matter! The rollover will still work just fine. It just won’t transition slowly.

So, your code with the css3 transitions included should look like this:


.facebook{display: inline-block;position: relative;text-indent: -9999px;width: 50px;height: 50px;background: url("../images/fb-new-roll.png") no-repeat 0 0;
-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}


I hope this helped some of you beginners, and maybe even showed you developer veterans something you can try using in your projects as well!
Please let me know what you think in the comments.

Web Development, Graphic Design, and Photography. I can work with any budget, let's get your project started today!

As I do every year, I’ve re-uploaded my Runaway Nightmare Halloween mix that I made a few years ago. This time though, I decided to code up a quick page dedicated to it. I had a lot of fun doing the mix, and I hope to make a better one again soon. But I had even more fun designing the page for it. I used all kinds of CSS3 goodies, along with the HTML5 audio tag for sounds.
Be sure to check this out in a good, up to date browser to see the full effect. Internet Explorer works fine, but doesn’t nearly look as good. Still delivers the mix though, and that’s what is important. As I tell my clients, even though it won’t look that pretty, we can still deliver the message and product to your users on Internet Explorer.
The mix itself has all kinds of scary sounds and songs, perfect for your Halloween party.
You can check it out at The Runaway Nightmare page.

Web Development, Graphic Design, and Photography. I can work with any budget, let's get your project started today!

Do you have a website with a Facebook “Like” button on it? If you said “No”, then what are you waiting for?! The return on investment for social media is widely debated. Some say that it really doesn’t create sales. A customer might come to your page and “Like” it, and then move on without buying or signing up for your product. Well, yeah that is going to happen, but why miss out on the possible sales it actually could bring you? What if one of their Facebook friends sees that they “liked” your website on their Facebook wall, and then decides to come visit your site and buy your product.

Consider this:

So get that Facebook button on your site now! If you don’t know how, then please contact me. I offer very affordable social media packages for every budget. In another post I will go into detail about how having a Facebook fanpage for your website or business is even more beneficial.

So for those of you that DO have your button on your website, are you tracking your likes on Facebook? Did you know you could do that? You could have a page that shows you how many people have “liked” whatever your button is on. Now it’s not going to be full on analytics, but it’s still very handy to be able to view exactly what facebook users have liked your page. They now have become your “fan”.

If you include the right data in your website, then you can easily do this, and you will see this in your account:

Facebook Admin Panel When Tracking Likes

So what do you have to add in order to do this, you ask? Well follow along: (Psst.. It’s really simple.)

1)First you need to head over to this page on the FB developers site.
2)You don’t have to, but here you can start from scratch with a new button if you’d like. Either way though, scroll down past the Attributes section and look at the Open Graph Tags area. This is what you need to fill out in order to get the relevant code for your site or page you want to track.
3)Copy the code that is provided to you. Then put it into your website’s index file, within the “head” section.

It’s really that simple! From now on you can see anyone who has clicked your “like” button!

Web Development, Graphic Design, and Photography. I can work with any budget, let's get your project started today!

Free Design Resources and Bargains Newsletter

I started a free newsletter that features free and affordable design resources, bargains, half-off deals, inspirations, and stock photography. Since I’m a web developer and designer myself, I started to realize that it’s getting harder to keep up with all the wonderful resources and half-off deals that are going around the internet now a days. So I have decided to do my best to help you all out. If you sign up, you will receive my free newsletter once a week. You will see great web, design, and photography related deals, free Photoshop brushes, vectors, fantastic photography, and industry news. I urge you to visit Weekly Design Deals, Bargains, and Creative Resources today!

Web Development, Graphic Design, and Photography. I can work with any budget, let's get your project started today!

Hey guys,
I’m using my iPhone to post here.
First time I’ve tried that. Anyway, if you would like a google+ invite, comment here with your email address. You can use “at” and “dot” to disguise your address some, if you’d like.

Web Development, Graphic Design, and Photography. I can work with any budget, let's get your project started today!

Well, even though the crazyness of the whole Charlie Sheen situation has calmed down now, I still wanted to provide a little back story on this site. I continue to get steady traffic to I Will Love You Violenty: The Charlie Sheen Story. Basically I was sitting at my desk, finishing up on Christmaslullaby.com, a client’s music website. (You can view the details on that project right here.) My wife had the tv on in the other room, and I was listening to all the nutty things that Charlie Sheen was doing. They were playing some of his brilliant slogans and quotes, and I was like, “I need to make a website dedicated to some of these awesome sayings!” I decided to see how quickly I could knock out a decent looking site that pulled in information and quotes from Mr. Sheen. I knew I wanted to use a bit of CSS3 and maybe even basic HTML5. But I started on paper first, drew out some wire frames/mockups, looked up some good quotes, and within an hour, fired up Adobe Dreamweaver. I opened up my version of the brilliant HTML5 boilerplate, which is a bit stripped down. I don’t need every single thing that comes with it. I started with finding two nice, bold fonts for the logo in the header area. Per usual, I hit up Fontquirrel for fantastic, safe web fonts that would be served up to most visitors, no matter what fonts they have installed on their own computer. I decided to use the font combo of “Great Lakes“, and “Blackout 2am” for the header logo. How fantastic are those fonts huh? Two of my favorites on there, for sure. I then used the nifty, CSS3 text shadow property for hover effects, when you scroll over the logo. For the scrolling quotes, I used a Jquery slider called, Easy Slider, from CSSglobe. Like the name suggests, it’s very easy and quick to setup! For the next section, I used some more CSS3 for the inset box shadows, and used Twitter’s own widgets to import tweets from Charlie and from others who are tweeting about him. For the rest of the site, I kept with the CSS3 box shadows and top and bottom borders, to give the boxes some depth. I’m also pulling in news feeds from a few different gossip sites. Now that he’s not in the news as much, that section is usually pretty light, but back then it was full of all kinds of items. I honestly don’t remember what I’m using to pull those feeds in. It’s not hard to find a script that will do it though. Just search for “import feed”, or “import rss” and you should find something you can use. That’s pretty much it! I guess it’s not that exciting when I write about it, but it was a lot of fun to do. I just wanted to see how quickly I could throw something like this together. In my opinion, it looks good and works, gets the intended job done. In other words, if you come to me and need something put together in two days, I can get it done for you!

I will love you violently screenshot

Web Development, Graphic Design, and Photography. I can work with any budget, let's get your project started today!

I recently finished a quick little coming soon page for a new DIY accessories business. The Bow and the Beautiful. Basically, she just needed a nice looking page where potential customers could sign up for her newsletter. A few days before I began this, I found out about the amazing jquery plugin, called Lettering.js. Lettering is a script that lets you take complete control of each individual letter or words. So I knew I wanted to give it a go in this project. Support for CSS3 is getting better at each new internet browser release, so I use many CSS3 techniques in all of my projects, and this was no different.

the Bow and the Beautiful Logo

So it was time to get the page up and running. I used mostly CSS for styling. The only images that were used is a very small repeating brown “noise” image for the top header area, and the actual butterfly in the logo. Everything else is all CSS. The top shadow and the pink “send it” button is only CSS. All the words in the logo are being styled with the Lettering script, CSS, and Fontsquirrel. Fontsquirrel is an amazing service that helps with providing embedded web fonts into the web page. So all fonts that you use will look just about the same on every browser.

I decided to go with Mailchimp to power the email newsletter signup form. They offer a variety of services, both free and paid. We are using the fantastic free service that lets you send out 12,000 emails a month, and allows up to 2,000 subscribers! Can’t beat that! So when customers sign up, Mailchimp takes care of storing that information for us. She can then go to Mailchimp and send out the newsletters to anyone who has signed up. That’s basically it for now. We are hard at work on the official release of the site. So depending on when you visit, the coming soon part may or may not be there. I hope this provided a bit of an insight on how my projects go, and please don’t hesitate to contact me with any questions you may have!

tB&tB screenshot before official launch

Web Development, Graphic Design, and Photography. I can work with any budget, let's get your project started today!

Skrillex went and dropped a little EP of three free songs on his Facebook page today. It features his track, “Needed Change”, which apparently has been around the internets for a few months now. A track called, “World on Fire” by Flinch, and the third track is called, “Changes”, which is by Zed. Skrillex’s track is great, love it. Digging Zed’s, but Flinches track is just kinda, “eh”. Not bad though. Free music is good!

Skrillex's Free Treats EP

Web Development, Graphic Design, and Photography. I can work with any budget, let's get your project started today!

I call this photo, “Forgotten”. This old shack was seen right off the road during a wonderful drive through Central Oregon’s High Desert. I honestly don’t remember which road this was on, but there are many old shacks and ghost towns out there. I do know that my wife and I were on the way back home from stopping off at the ghost town of Shaniko. It’s a highly recommended drive, for sure.

Forgotten

Web Development, Graphic Design, and Photography. I can work with any budget, let's get your project started today!