With the tides of internet coding changing, CSS3, HTML5 and jQuery are drastically changing the view of the web. With the ability to produce CSS3 animations, flash integration is becoming less popular as speed and compatibility are what everyone is looking for.

As an ongoing project for this blog, I’ve been learning some of these new techniques and coding tricks. Below is a code snippet for one of the new CSS3 transition upgrades. What this code will do is cause a soft glow to transition in and out when a link is hovered. This code can be adapted in your .css file to apply to other items as well like DIVs or li items. If you noticed on this blog it’s been integrated into the container boxes for my blog content.

For supporting browsers, you should see a slow fade in & out when hovered, if you do not see it then you should try to upgrade your browser… and if you’re still using IE, you should just slap yourself. Silly IE, the internet is for next gen browsers. Good luck with IE9.

1
2
3
4
5
6
7
8
9
10
11
12

a {
	-webkit-transition: -webkit-box-shadow 1s ease-in;
	-moz-transition: -moz-box-shadow 1s ease-in;
	-o-transition: -o-box-shadow 1s ease-in;
	padding:20px 40px;
	position:relative;
}
 
a:hover {
	-webkit-box-shadow:0 0 10px #444444; 
	-moz-box-shadow: 0 0 10px #444444; 
	-o-box-shadow: 0 0 10px #444444;

There are tons of great resources on the web for learning these new standards and techniques. A couple I used for inspiration for this post and tip are:

• Graceful Degradation With CSS3
• Five Useful CSS/jQuery Coding Techniques For More Dynamic Websites
• css3.info
• Google Search for the term “CSS3″. You really can’t fail with google. (take note all you yahoo, or god forbid, AOL, users)

If you’ve got any tips you’d like to share, please leave a comment. Now have some fun coding, and if you REALLY want to see just how powerful these new CSS3/HTML5 features are then just check out the Spiderman Animation made entirely in CSS3.

5 steps to take your images from drab to glam.

Original:

This is the original image, right off the camera, no manipulation:

Final:

Here is the final image. See the vast, but subtle difference:

Step 1:

Open the image and find your focal point. Using some of the same techniques that give the look of a tilt-shift image, enter Quick Mask Mode (shortcut: Q). Once in Quick Mask Mode, select the Gradient tool (shortcut: G) and switch it to “Reflected Gradient” mode.
Now draw a 90º line from the center of your focal point out to one of the edges of the artboard. This step might take a couple tried to get you exactly what you’re looking for, but tweak the settings until you’re happy. This is what mine looked like:
Once you have your gradient drawn out to a place your comfortable with, exit Quick Mask Mode (shortcut: Q) and you should see your marquee.

Step 2:

From your finder menu navigate to ‘Filter/Blur/Lens Blur…’ and enter the dialogue window. From here you will control how much emphasis you would like on your subject, but for normal photos this should remain fairly low as to not give it a “photoshopped” fakeness.
As you can see from the above image, the setting i used offer a sense of depth to the otherwise flat photo. I kept the settings subtle for the effect i was trying to create, but be creative until you achieve the look you want.

Step 3:

Next we will adjust the saturation to really make the colors and the focal point pop. First, Enter the Hue/Saturation dialogue window (shortcut: command + U) and add anywhere from 15-35 to the saturation point.
This will give the image a much more vibrant look without blowing out the colors to a ridiculous state.

Step 4:

From here we will adjust the levels of the image to make sure that our black points and white points are slightly beyond their original histogram starting points.
Enter the Levels dialogue window (shortcut: command + L) and look at your histogram. Make sure you move the Black point past the lowest point of the left graph and visa versa with the White point on the right side. For this image i’ve also moved the 50% Gray point slightly to the right as to make the image slightly darker throughout the mid tones as well.

Step 5:

By now you’re image should look pretty good. Now if you’d like to jab at those colors and depths one more time like i did you can proceed with this step.
What i’ve done in this step is to take all the work we’ve done thus far, and step it up one more time. Start by duplicating the layer you’ve been working on by dragging it to the new layer icon, which will create a copy, or using the keyboard shortcut (command + J). Once you’ve got a copy from your finder menu navigate to ‘Filter/Blur/Gaussian Blur…’ and adjust your settings until you’ve got a nice smooth glow over the image, as you can see above. Now, you may be asking yourself why we just ruined all that work we just did. Well, here’s the exciting part. Set that duplicate layer you just blurred to a blending mode of “Soft Light” and watch the image shine! Adjust you opacity until you’re happy with your final image.

Conclusion:

Well, That’s it. Simple, fast and effective. Once you get these techniques down you’re on your way to editing all your photos with speed. For a tutorial on using the Levels dialogue window, see my post, Tutorial: Using Black & White points in Photoshop to clear up an underexposed picture, for a more in depth explanation of the White point and Black point and how you can color correct photos in a flash.

Today at Churm Media, I was tasked with making a twitter help guide so that our editorial/marketing teams could help spread the word about our brands (@OCMETRO, @OCFamily, @IEFamily). That’s when i realized that if you’re not an internet savvy, hip user then you probably don’t really get the “jump right in and learn how to swim” aspect of twitter. Thus… the twitter cheat sheet. You may even notice a little shout out to a couple tweople (Twitter + people); @Tutorial9, @CameronOlivier, @Sethetter & @Vectips.

Click through to download the full size cheat sheet. PDF Available below image.

Follow this link to download this in a PDF format: Twitter Cheat Sheet PDF (approx. 350k)

Title: Sneak peak Nine Three Studio logo & Glowing text in space.

Client: None, Personal Project

Program(s) Used: Photoshop CS2, Illustrator CS2 (for logo)

Time Span: 10-20 minutes, not including logo

About: Thanks to a GREAT, and fast, tutorial at Denis Designs, I was inspired to give my own take and twist. The tutorial is super easy to follow, and the results, as you can see, are pretty spectacular! Hey Denis, ever think about the tagline “You can’t spell design without Denis.”

Designer Notes: Easy to follow tutorial steps, great result i can’t really say much else! By the way, if you hadn’t noticed, this IS the new logo the site will be using in the re-design that is, god willing, still slated to happen mid year this year. Big plans in my brain… getting them out might be the hard part.

So without further ado, here’s my rendition of the tutorial (via 3nhanced)…. after the jump [click image for full size].

The following tutorial was done in Adobe Photoshop CS3, but 80% of the process can be used on just about any program with a “Levels” function (such as the freeware, open source image editing software, GIMP) while the last 20% can be done all the way back to Photoshop CS1 (this is the black overlay feature achieved by holding the ‘option’ or ‘alt’ key in levels).

» TIP: IT’S ALWAYS GOOD TO MAKE DUPLICATES OF YOUR LAYERS IN CASE YOU NEED TO GO BACK IF YOU MAKE A FATAL MISTAKE.

Step 1:

Open the file you wish to adjust and open the Levels adjustment window » SHORTCUT: COMMAND+L (pc users: CTRL+L). This will bring up your image’s histogram and the palette where this tutorial will focus. Locate the white point slider as seen above.

Step 2:

One of the best features of this tutorial is built right in to Photoshop CS1+. While on the white point slider, press and hold OPTION (pc users: ALT) and begin scrubbing the bar left and right. This will give you a black overlay over your image. If you’re using an older version of Photoshop or a different program you can skip to step 4.

» NOTE: THIS FEATURE WILL ONLY WORK IF YOUR IMAGE IS IN RGB MODE.

» TIP: USING ADJUSTMENT LAYERS IS A GREAT WAY TO INSURE THAT YOU DON’T RUIN YOUR ORIGINAL FILES. THIS IS CALLED “WORKING NON-DESTRUCTIVELY”. IT WILL ALLOW YOU TO KEEP YOUR ORIGINAL FILES INTACT FOR FUTURE PROJECTS, OR TO RETURN TO A PREVIOUS STATE IF YOUR ADJUSTMENT LAYERS AREN’T WORKING FOR YOUR DESIGN ANYMORE.

Abduzeedo has added an awesome post about a fun, creative way to create a CD cover. After i read this post i got addicted, neglected work, and did about 6 of these things… 3 of which actually came to fruition.

Here’s the steps….

Do you know when saw that new band cd and thought: “how in the world did they think of that”? Well, someone out there figured out the equation, and man, it’s really fun.

And what equation is that? Simple:

1. Click HERE. The random article title will be your band’s name.
2. Click HERE. The last 4 words of the last quote will form the name of your album.
3. Click HERE. The third picture, whatever it is, will be your cd cover.

Done! Now you got the formula to make some funny, yet great albums. I’ve actually made about 6 last night, and my favorite, by far, is this one.

So. following these easy steps, Here’s what i came up with.
PLEASE feel free to follow these steps and submit your own. it’s addicting, and fun! see what kinds of covers YOU can come up with!

PSDTUTS – Create a Spectacular Grass Text Effect in Photoshop. Also seen on SwissMiss.

How many steps do you imagine it would take to get tot his final product? i’m not going to lie. i thought at LEAST 25. Well, PSDTUTS did it in 16 steps. Now of course a step counts as a whole portion, but still. that’s pretty effing amazing if you want my opinion, and since you’re on my blog, i’d say so. haha.

For me, the tutorial really grabs hold at around step 8 up until the conclusion. The process of adding the flame and the particles with the brush manipulations are brilliant. Grab your stylus and start making pretty things, because really, we’re designers… that’s what we do!

Create a Spectacular Flaming Meteor Effect on Text
In Text Effects by Fabio

Take typography one step further by having text falling from the sky in a burning inferno. Yes, this is the text-on-fire tutorial to end all tutorials. It uses a little Illustrator for the text and a lot of Photoshop to burn up the screen!

In previous tutorials you’ve seen two smoke effects that I’ve created, but let’s face it, you can’t have smoke without a fire somewhere. So in this tutorial I will show you how to create a fire effect similar to when a spaceship or comet enters the earth’s atmosphere. The image we’ll be creating is inspired by a Nike Ad I saw some time ago. I’m not sure what the URL is, if anyone knows it, please link us up in the comments.

It’s always a good idea to keep your eyes open for inspiration for effects and designs no matter what you are doing. Graphics are everywhere and you can learn a lot by looking at what other people do. Now on to the tutorial!

Follow the Trackback to PSDTUTS for the full 16 step tutorial.

Being a HUGE fan of photoshop and it’s brush options. i’ve decided to post this link for everyone. Take the 20 minutes to do the tutorial, and if you’re in a crunch for time. at least skip to the section about the brush options. It’s MORE than worth any designer’s time, especially if you’re a photoshop junkie like myself!

Mix Cool Retro Curves Into Your Photographs
In Effects by Fabio

I’m a huge fan of James White’s work. I love the way he plays with geometric elements and colors. It gives a retro feeling to the design, but at the same time he uses a modern approach. In an interview, he mentioned that he uses a Flash script to generate the vector shapes. Then he does the rest of the job in Illustrator and Photoshop.

Well, inspired by James’s designs, I decided to figure out my own way of creating that type of effect in Photoshop. In this tutorial, I show you how to mix cool retro geometric shapes into your photos

Follow the Trackback Link to get to the full tutorial, with pictures and easy to follow instructions.

read more | digg story

Click through to read the full article from 3point7designs.com

CSS has brought us many capabilities in terms of typography and the web, but we always seem to be limited to the same 4-5 typefaces over and over again. There is an inherant problem, if the font you specify isn’t on the viewers computer it won’t render in that font. So as designers and developers we end up selecting the ones that we can safely assume is available on most computers today. So most pages use Arial, Helvetica, or Georgia as their typefaces… and the world of the web remains slightly more bland.

But there are quite a few high quality typefaces that are available on most new computer systems and you can always fall back on the common ones. Of course there are options like creating images, dynamic headlines, and siFR… but all of these techniques increase load time and development time. There are plenty of good reasons to be strategic in the font choices rather than using additional technology. I am shocked at how rarely I see anyone taking advantage of these type options, so here is a quick and dirty list of fonts you should and could use in your desgns and stylesheets.

1. Palatino Linotype / Palatino

WINDOWS 97.09% / MAC 78.86%

This is a nice serif font that his pretty good support for both Mac and Windows based machines (97.09% of all windows machines have it, and 78.86% of mac’s). Yet very few people use it and instead default to georgia or times. As you can see it makes for great headlines, and I have used it with success as copy type as well. Worse case you can always default back to georgia, times, etc.

2. Tahoma

WINDOWS 96.09% / MAC 72.02%

I admit this is not one of my favorite fonts, but it does have many instances where it could be used effectively. It doesn’t seem to get used very often despite the fact that it could be an excellent copy font. Again there is always Arial or Helvetica if the machine doesn’t have Tahoma installed.

3. Impact

WINDOWS 95.85% / MAC 88.08%

Admittedly this font probably is overused in non-web related design. Since it is one of the “cooler” default fonts on most machines it tends to get a lot of use. Despite this fact there are plenty of good places to use it, and it works great for well… “impactfull” headlines.

4. Century Gothic

WINDOWS 85.44% / MAC 42.50%

This is a nice elegant font that was overused by graphic designers some time ago, but it has been locked away and shunned for some time now. It may almost be time to pull it back out of the tool chest. Not a huge percent of Mac systems come with it preinstalled, but most new ones do. Depending on your target audience this could be the perfect font to use. If you are worried about the low mac support you could always opt for Futura as well (which has very high mac support).

5. Arial Black

WINDOWS 97.73% / MAC 96.18%

Yup you don’t just have to use plain old Arial. Arial black is a nice bold font that could be perfect for headings, impacting headlines, and hell even a replacement for the Impact font mentioned above. I don’t know that I would use it for body text, but it is an option that should be realized in web typography.

6. Arial Narrow

WINDOWS 87.08% / MAC 91.01%

Arial again! We are not done yet, oh no. Much like arial black, arial narrow is a great font for headlines. Instead of the big bold in your face style of headlines you can use this typeface for more elegant subtle headlines. A nice change from the traditional arial, and can be used much like you would a condensed font.

7. Copperplate / Copperplate Gothic Light

WINDOWS 58.13% / MAC 85.85%

I will admit I hate this font, mostly because it is misused (and people will probably argue that it is not the fonts fault, but the designers). But there are times when it can be used effectively, and it has pretty good support on newer windows computers and most mac based computers. Most likely it will again be for headlines, larger headlines, as it is not terribly legible at small fonts especially when it isn’t properly aliased.

8. Gill Sans / Gill Sans MT

WINDOWS 43.09% / MAC 90.82%

No surprise I like this font. I think it works both in copy and in headlines, and it has fair support in both platforms. Anytime you use a font that has about 50% support rate you want to think about the next logical font to serve, but there are enough options specific to windows that would let you achieve the same typographic message with only subtle differences.

Here are a few things you can do when you recognize that you’re in a lull:
1. Take a deep breath, relax and ENJOY it. That’s right – you’ve (probably) earned it, so take a moment to stop and smell the roses. After weeks of being “slammed” it’s good to take a break. Realize you’re slow, ratchet down a gear, let the stress you’ve built up flow out of your body. Assume a more relaxed state of mind and let your “batteries” recharge. Ok, 5 minutes of that should do it. Now move quickly onto number 2.

2. Re-focus. Now that you realize you’re in a lull it’s important to re-focus your attention. After spending weeks scrambling to keep up with your customer’s requests, it’s easy to feel kind of lost for direction when the demand for your time suddenly dries up. Now that you realize you’re slow, you need to refocus your attention on your company! If you sit around twiddling your thumbs waiting for work to come to you – you will perish. So, now is your opportunity to do all those things you daydream about while you’re slammed with customer work. Here are a few things you might consider:

3. Seek out a new client. Been fantasizing about working for Puma? Great! Write a letter, do a mock-up, contact their art director… Whatever. Just take some ACTION. Sometimes it’s nothing more than a simple e-mail that lands a big design project.

4 Advertise! This could be passing out fliers in your neighborhood, sending e-mails out to people you would like to work for or designing a new marketing piece. There are a thousand ways to spread the word about your services. Get cracking!

5. Drive traffic – Got a blog? Write an article you think people would like.

6. Work on your company systems! How do you organize your projects? How do you keep your books? How do you do your banking?

7. Be a student. Have a piece of software you’ve been DYING to learn but haven’t had the time? Find a tutorial, open the software and learn something! (No. Video Games DO NOT count as “software.”)

8. Get in touch with your clients! Haven’t had time to write thank-you letters? Sometimes a simple note to an old client will spark them to buy more services from you.

9. The important thing is to STAY BUSY. If you use your design lulls to be productive, they will be short lived. And I promise – just about the moment that you’re REALLY getting into your side-work, a new client will drop a massive project in your lap. So set a goal and get to it!

Click through to see the entire Bling Tutorial.

This tutorial will show you step by step on how to create a “Badass Bling Effect” using layer styles in Photoshop. Once you create the layer style, you can easily “blingify” any layer. There is also a video tutorial as well.

Here’s my shotty attempt at it. Don’t let the poor quality fool you, i assure you i am a good designer. HAHA. This was a quick, step by step, learn the tutorial, image… it came out ok, probably should have worked with a larger DPI though. Live and Learn!

I found all these images off quick google searches, so the quality was pretty poor. And i only had about 15-20 minutes before work to get this up finished and posted. But, enough excuses! TO THE BAT CAVE!