EeepZork!

i’m currently in the middle of creating a theme for PC based docks (Rocketdock, Objectdock, etc…). i just finished an icon set for Adobe as their shortcut icons are somewhat “lacking”. so today I’ll show you how i did it.

here’s what the final product looks like (i put in a background so they stand out better, the final result has a transparent background):

i have heard this method called everything from “Technocoloring” to “Retro-Coloring” to “Old Skool (with a K mind you) Colors”… i call it color matching. why? because that’s what the primary tool used is called “match color” and i’m sooooo not trendy.

so what’s the point of doing this? the list can get pretty long but i usually find most people like it for looking cool and the “WTF factor”*. why am blarghing about this in the first place? well, i had to use this process for a client recently and it can bring about some interesting results.

so! off we go into color matching!

*i really need to write about the WTF factor…..

first things first, fire up ye old Photoshop. I’m using CS4, but this works on pretty much all the latest versions of PS (just don’t ask me for help, I’m already lost).

Part the 1: Open
select the file you want to use and open up that bad boy. simple!

Part the 2: Layers
the first thing you’re going to want to do is create a new layer. you can name this layer if you want, but we won’t be creating any new ones… so ball’s in your court.

Part the 3: Rule of threes!
make sure you’re highlighted on the new layer and select the rectangular marquee tool.

//tangent… those of you not familiar with the rule of threes when it comes to photography, google it please. Not for me, for you.
\\end tangent

with the rectangular marquee create a section that cover’s one 33.3% of the image.

Part the 4:
now let our adventure take use to the swatches pallet and select solid annoying red (#ff0000). mash alt+backspace, and now your selection should be solid red.

4.1
select the middle area of the picture and create another section that cover’s 33.3% of the image.
back to the SWATCHES!!! this time select boring old green (#00ff00), alt+backspace it.

4.2
repeat above steps but fill the last selection with wonderful blue (#0000ff).
you should have something that looks like this:

Part the 5:
go back to you layers and hide our pretty color bar layer (click that eyeball, you know you like it!).

Part the 6:
navigate up to the Image menu and select Adjustments > Match Color. it’s time to get funky up in here!!!

this will bring up the match color dialogue box. don’t let it scare you.

set the source as the photo your using, and the layer as our awesome color bar box layer.

FREAK OUT! live preview should have kicked in. interesting isn’t it?

DON’T TOUCH THE LUMINANCE!!! well you can, but it’s not really going to help that much.

FADE! yes, that’s where we want to go! bump that bad boy up… you should start to see an effect on the image. i usually start off with it around 60% to begin with; but that’s just me.

COLOR INTENSITY!!! it’s intense! basically, play around with the slider as you so desire until you get the effect that you’re going after.

that’s pretty much it. if you want to get all crazy (and I know you do) feel free to change up the colors in the color layer.

below are some examples I decided to bust out for this piece (yo).

You can click each image or use the navigation that is inside the lightbox… the choice is yours!

ORIGINAL:

THE RESULT:

ORIGINAL:

THE RESULT:

ORIGINAL:

THE RESULT:

ORIGINAL:

THE RESULT:

ORIGINAL:

THE RESULT:

i’ve been a bad bad person.

after the whole database epic fail i sorta went into a rut about this space.

then i was working on stuff i couldn’t really talk about (damn you NDA’s!!!).

and then (insert excuse here).

so anyways, i’ve decided to give it another go as they say.

i think my first new post will actually deal with………. PHOTOSHOP.

yeah, things have gotten all kindsa crazy around here.

i have been trying to recover the database and it’s not looking good. so far i haven’t been able to recover much of anything so it seems a lot of information may have been lost.

time to go digging through my txt and project files.

until then, i’m going to go be a sad puppy.

u#1. i think it’s dead for good. still looking though.
u#2. not only is the database fubar, so is the backup.
u#3. found a backup from March (ughhh), seems to be working.
u#4. son, i am discontent and disappoint. starting over.

some browsers are currently supporting the CSS text-shadow property, although the others are slowly coming around. even though this property is technically part of the CSS level 3 library, more and more people are using it (and even more abusing it) everyday. here’s something that i find interesting that doesn’t abuse the property, but can add more life to your page.

we’re going to use jQuery to add a the ability to make your elements glow on mouseover. any browser that doesn’t fully support the text-shadow property will still show the glow, but you won’t be able to add the “halo” effect.

so let’s get down to brass tacks shall we? all of the .js files you can download here in a nice .rar file. there are a total of of three files you’ll need to call to make this bad boy work.

basic example

$(document).ready(function() {
$('.glow-me').addGlow();
});


advanced example

$(document).ready(function() {
$('.glow-me').addGlow({
radius: 20,
textColor: '#ff0',
haloColor: '#ffa',
duration: 200
});
});


you’ll want to customize your options in the jquery-glowing.js file. here’s the basic rundown:

this script is pretty straight forward. some people may have uses for it, others may not. i created this for a specific request and i’m still making improvements to it.

so here it is. a news scroll for your site! w00t! this is straight up JavaScript, so no plug-in’s or anything like that needed. works in IE 5+ and FF 1+. it’s very simple to insert into your site. view the demo HERE. you can modify the look and feel all you want. more <3 for CSS. let us get started shall we?

here be the JavaScript!!!


//newsticker.js
TICKER_CONTENT = document.getElementById("TICKER").innerHTML;

function TICKER_tick() {
if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft < = 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth;
if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0;
window.setTimeout("TICKER_tick()", 30);
}


to call the ticker to your page, the .JS DOES NOT go in the HEAD section of your document. it trails right below the actual content in the body.

EXAMPLE:

<div id="ticker" style="overflow:hidden; width:520px" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
This is news. As is this. And This. This is what will display in the actual ticker. And this as well. DO NOT USE <br /&gt tags as it will cause all kinds of crazy, unless that's what you're looking for. Feel free to add any HTML markup to seperate your "news" or what not.
</div>
<script type="text/javascript" src="newsticker.js" language="javascript"></script>


make sure that the JS is being called correctly (absolute path would be nice). in this example, i have it set to pause when someone mouses over a headline, and un-pause on mouseout. now let us edit some variable in the actual .JS to make it more “yours”.

TICKER_RIGHTTOLEFT

i’ve been out trying to get a regular office job again. i like the freedom of freelancing, but i miss working in a team environment. i like bouncing ideas off of other people i guess. i just don’t get this with freelancing.

i’ve been out on a couple of interviews and so far i’ve been shot down in every single one. i think a lot of this has to do with how i come off in interviews. I spent 8 years at the same company so i haven’t really been “out there” in quite a while. it’s bad when it’s a head-to-head interview, but put me in a panel interview and i just loose it. i’m overwhelmed. totally out of my element. scared. yes scared. i feel like i’m on an operating table and having an autopsy performed on me while i’m still wide awake.

i wish someone would take a chance on me. give me a trial run. let me get in and show you what i can do.

yes, this is a “woe is me” post, but i don’t know where else to get it off my chest.

i WANT to work. i NEED to work.

just praying someone will give me the chance to prove myself.

in closing, tomorrow i’ll have a new post (more AJAX and maybe some straight up JavaScript) or two that won’t be full of self-loathing. i promise.

Seeing as I tout myself as a UI Web Designer/Developer I decided to actually post something that is relevant to my “field”. I don’t really use this script that much myself, not because it’s not functional, just that I haven’t really had any projects that could benefit from it.

So what is it already?

It’s a simple tool tip script written in JavaScript (or DHTML if you will). Basically when your user mouses over a specified link a tool top will be displayed. You’ve seen this kind of script before, it’s actually pretty hard NOT to see it in use in today’s web world. I got tired of the regular “box” look and made it a bit more “Web 2.0″. Anyways, here comes the code.

All files are available in .rar format here and are free to download. Below I will explain the different aspects of the code and how to implement it.

The meat & potato’s: The JavaScript.


function showToolTip(e,text){
if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip');
var obj2 = document.getElementById('bubble_tooltip_content');
obj2.innerHTML = text;
obj.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';
}
function hideToolTip()
{
document.getElementById('bubble_tooltip').style.display = 'none';
}

There really aren’t customizable variables in there, and I wouldn’t recommend changing anything unless you have a working knowledge of JavaScript. Make sure you include the JS file in the <head> of your document!

The customizable part: CSS.


#bubble_tooltip{
width: 147px;
position: absolute;
display: none;
}
#bubble_tooltip .bubble_top{
background-image: url('../images/bubble_top.gif'); /*DEFINE THIS PATH!!! */
background-repeat: no-repeat;
height: 16px;
}
#bubble_tooltip .bubble_middle{
background-image: url('../images/bubble_middle.gif'); /*DEFINE THIS PATH!!! */
background-position: bottom left;
padding-left: 7px;
padding-right: 7px;
}
#bubble_tooltip .bubble_middle span{
position: relative;
top: -8px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size: 11px;
}
#bubble_tooltip .bubble_bottom{
background-image: url('../images/bubble_bottom.gif'); /*DEFINE THIS PATH!!! */
background-repeat: no-repeat;
background-repeat: no-repeat;
height: 44px;
position: relative;
top: -6px;
}

Add the above CSS into your pre-existing CSS file. Modify the colors, font face, font size, etc… Make SURE you upload the image files to a specified directory and make sure your CSS reflects that.

Now implement the tool tip in your page. This can be used in an anchor tag or a span tag. I’ve included examples of both.

Using it with an anchor tag:

<a href="page.html" onmousemove="showToolTip(event,'This is where your text will go. Change at will!');return false" onmouseout="hideToolTip()">Focus Word</a>


Using it with a span:

<span class="tooltip_text" href="page.html" onmousemove="showToolTip(event,'This is where your text will go. Change at will!');return false" onmouseout="hideToolTip()">Focus Word</span>


There you have it.

So I spent most of today in the breadline, looking for a job. Apparently in this market there is no room for Front End UI Developers/Designers. Go USA!

So I’m working on a script that takes advantage of the (that sounds so very, very wrong) MooTools JavaScript framework to create an application like the Lightbox JavaScript app, only much more powerful.

Why? Well, why not? Also, and by no means do I mean to discredit Lokesh Dhakar’s (he wrote Lightbox) awesome code, I just vision it doing more powerful things, not just show pictures. As I was researching, I found that someone else has already jumped ahead of me with this same vision. That person would be John Einselen from iaian7.com. He’s already done some amazing work and I’ll be standing on his shoulders as I modify and tweak code, and of course will give him credit where credit is very much do.

So what is this app going to be? Imagine having the same “lightbox effect” only instead of applying just to images, it would be used for pretty much anything you can imagine. Here’s just a small sample list of what I’ve got in mind:
Flash
Video (almost all formats)
Images (dur)
Web Pages
Audio

PLUS!!!

The ability to read you Flickr stream, Google and YouTube Video, MySpace, Facebook, Veoh, MetaCafe, and others. All you’ll have to do is modify your link, embedded or not. Just one simple statement and there ya go!

ACTUALLY…

It’s not going to be THAT easy, but it will be easy enough. Just a couple of scripts that need to be uploaded to you server, a few lines of code added to your HEAD section, and you’ll be done.

RELEASE…

I’m planning on working on it this weekend, and will hopefully have it up early next week. Until then, if you just CANNOT WAIT, check out iaian7’s app on his page listed above.

Time for beer and hockey.

Cheers!

As a freelancer I get all kinds of requests for all kinds of scripts, most involving security of some sort, but what amazes me is that most of these people never ask for a password strength script. Maybe they have their own solution, maybe they’re just not thinking about it or don’t see the necessity.

In today’s day and age, I think it should be mandatory to keep your data as secure as possible, yes I’m pointing out the obvious over here. No matter what kind of security you implement on your side, your user can be the biggest threat to you in the end. How many people are using “password” or “suzan” as their password. You can limit this kind of behavior and also bring to your users attention the fact that, yes a familiar password is easy to remember, but it is just as easy to crack.

So here is a simple script that implements AJAX and jQuery to display a nice password strength meter for user when signing up. Geek out continues below.

> This is a very small plugin for jQuery.
> Naturally, jQuery is required to run it. You can download jQuery HERE and of course it’s free.

Now let’s get into the meat of this already, shall we?

First up, you’re going to need the JavaScript files from HERE. Unpack the files and upload to the proper directory on your server. Eeezzee peezzzyyy!

Now you need to insert the following code anywhere BEFORE the password field on your page.

<script type="text/javascript" src="js/jquery.js"></script> // make sure you adjust your path!
<script type="text/javascript" src="js/jquery.pstrength-min.1.2.js">
</script>
<script type="text/javascript">
$(function() {
$('.password').pstrength();
});
</script>


Insert the class “password” into the dialogue box so we know it’s identified as a password box. Example:

<INPUT class="password" type=password name="Password">


Now for the last step, adding new tags to your existing CSS file. Something like this should do the trick, but you can change as you see fit.

.password {
font-size : 12px;
border : 1px solid #000000;
width : 200px;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
.pstrength-minchar {
font-size : 10px;
}


And there you have it! All done. You can change a few settings inside jquery.pstrength-min.1.2.js, such as messages, length/height of the bar, etc… just make sure you know what you’re playing with!!!




EXAMPLE:
Password:

Ed. Note: Try using common passwords like “pass” “password” “love” “sex” “1234″, etc.. and see what happens. Common phrases like these can be included in the jquery.pstrength-min.1.2 JavaScript file.