Unbelievable

This was created for the new Cinema format TV that Philips is coming out with. If that isn’t awesome enough by itself, they also went out and hired Stink Digital to do an amazing stop motion project to show off the TV’s ambient lighting feature.

When I see stuff like this it makes me feel like I’ve failed as a designer. Truly incredible.

Posted in Misc., Motion/3D | Leave a comment

A LIST APART Survey Findings, 2008

Sorry I wasn’t quicker on this. I’ve been a little busy. A LIST APART released the findings of their massive survey last week. They polled over 30,000 web folks and came up with some interesting data. Arguably the most interesting fact of note was that even amidst a crazy recession a lot of us felt that our jobs were professionaly and financially secure.

They’ve setup a temporary link to view the findings here: http://aneventapart.com/alasurvey2008/

Interesting Findings

  • Over 80% of the field remains male and white/caucasion.
  • Over half have some form of a college degree
  • Almost a quarter of us are freelancers or self-employed (he. he. he…)
  • The highest category for “Years in the field” was 10+ (That is definitely interesting)
  • Average salary appears to be between $40,000-$59,000 a year
Posted in Industry News, Web Design | Tagged , , | Leave a comment

Do You High Pass?

Okay, so what am I talking about here? What is high pass? Is it a new version of the chest pass in basketball? No. It is not. It’s a way to sharpen your images in Photoshop. I know, I know, you PS geeks out there are saying, “Unsharp Mask is better.” Well, that may be true in certain instances. However, high pass focusing on the sharpening of edges. Anything that is not an edge is left alone. Trust me this is a good thing.

Let’s say your attempting to pop a subject in the foreground. Your trying to get some punch. Well, let the high pass filter take care of that.

Step 1 – Find your image

This guy is awesome

This guy is awesome

Go hit up your stock photo site of choice or grab an image from your own library. I tend to use high pass on a wide range of subjects. Using high pass on human subjects can sometimes provide a worn and weathered look. In this case, that’s what I’m going for.

So bring your image into Photoshop and let’s get going.

Step 2 – The high pass layer

Go ahead and duplicate your original layer by dragging the layer over the “new layer” icon to duplicate it. You’ll then want to set the blend mode of your new layer to “overlay.” Make sure this layer is on top of the original. With that layer selected go to Filter -> Other -> High Pass…

Overlay, and high pass filter

Overlay, and high pass filter

Step 3 – Final adjustments (but you can be done if you want)

You should be able to see the beauty of the high pass filter at this point. Of course, you can continue to make other adjustments. In fact, you probably should because we haven’t touched levels, curves, etc. I would also recommend running your high pass filter after you’ve done your color correction and touch up work. It’s a last step type of thing. Here is the comparison. Notice the punch?

Comparison, high pass on the right

Comparison, high pass on the right

Final image

Final

Final

Posted in Photoshop, Tutorials | Tagged , , , | 4 Comments

Did You Know?

This is too good not to post.

Posted in Misc. | Leave a comment

MattHaliski.com Is Done. Finally.

It’s been a long time coming and I’m pleased to announce that MattHaliski.com has finally gone live. MattHaliski.com is my portfolio website and now shows a decent amount of the work I’ve been up to for the last few years. I believe I have all the major kinks worked out of the code, but if you happen to stumble across any bugs please let me know.

About The Site

The idea for the site came about when I was checking out digg.com and saw that the Apple patent patrol had discoverd some newly filed patents on behalf of Apple. They appeared to be showing a 3D desktop environment and that really got my mind going.

MattHaliski.com

MattHaliski.com

I started toying around the idea of a 3D site/desktop and how it might work. Little did I know that creating this site was becoming more and more like building an OS than a simple portfolio website. At this point the site is a pseudo 3D environment. I haven’t really started exploring the idea of depth. This site has a slew of features that aren’t ready for me to “turn on” quite yet. But, they should start to give the impression of a true 3D space.

Portfolio Site Advice

Okay, so I haven’t had a portfolio site up in at least a couple years. If you are in this boat, drop everything you are doing and get to work. I can’t possibly tell you how much I underestimated the building of this site. Gathering all the assets to display was, by itself, a complete nightmare. Here are some tips of mine regarding your portfolio.

  • When you finish a project, grab all that you can, and archive it. Don’t throw it in a single folder that you’re going to have to sort through later. And please, please, please don’t tell yourself that you’ll come back to doing it, because you won’t.
  • Keep your site up to date, especially if you’re a web designer. Prospective clients and employers are judging you on what’s up there. Showing off two year old work is not always desirable.
  • Build your site so that it’s easy to update. It shouldn’t be a chore to throw up more work. If it is, chances are you won’t do it.
  • Let the work speak for itself. It’s a hard balance to build a site that looks and functions well in it’s own right, but has the main purpose of displaying other work. Don’t overdo it.
  • Be open to criticism. There is no one right way. I got a lot of feedback on mine and it is going to lead to some good improvements. I just had to have thick skin.

That’s about it, go check it out and let me know what you think. You all can feel free to offer up advice as well.

Posted in Flash/ActionScript, Misc., Web Design, Web Development | Tagged , , , | Leave a comment

I’m Still Here

Just wanted to let everyone know I’m still alive. I’ve just moved into a new house. Had to wait almost two weeks for internet, and I’m still stuck with DSl. At least I’m connected now. Won’t get cable internet for 45 days. Bummer.

On top of all that I’m finishing the basement, which will become my office. So I’m not really setup to spend hours at the computer yet. i’ll be back soon with more posts. I just have to get to painting first. Thanks for waiting.

Posted in Misc. | Tagged , | 2 Comments

What The Font?

I just stumbled across a very cool iPhone app. This is essentially a mobile version for you designers out there what have been to MyFonts, and used their WhatTheFont tool. It allows you to take a picture using your iPhone’s camera, crop around the desired letters, and then upload to their site for font detection. I’ve had pretty decent results so far. Anything it didn’t get exactly gave me something close enough for me to use.

This is a handy tool to have on you at all times. As a web designer, I’m more often than not discovering type faces I like away from the computer. I see enough Verdana and Times every day as I work. Anyways, definitely check out the app. It’s free, so what can it hurt?

whatthefontLearn More Here

Posted in Computers, Industry News | Tagged , , , , | 1 Comment

TweenLite/Max New Release

Hey guys. Again, I want to apologize for my slowness in posting these days. I’ve been working like crazy on my portfolio site and getting ready to move into a new house. It’s been nuts. But, I just noticed that TweenLite/Max was updated yesterday. Don’t worry, everything is backwards compatible so don’t worry about screwing up some of your existing code. It’s a pretty big and cool update so I’d suggest checking it out. And when I say “big” I mean it’s even supplemented by a 21 minute video to explain everything.

For those of you that may not know, TweenLite/Max is a bunch of classes that can, and should be, used in lieu of Flash’s built in tweens. Take my word for it, Flash’s built in tweens suck. They suck bad. Don’t believe me? Check out Jack’s demo here.

Version Highlights

  • Plugin architecture – probably the biggest change to this tween class. In the sprit of keeping things “lite”, users can now selectively add the plugins they want. Simply, use features from TweenMax in TweenLite without suffering the extra filesize.
  • TweenFilterLite is dead – pretty much what it sounds like.
  • New “frameLable” feature – allows you to tween to a frame label on the timeline. (Do people still use the timeline?)
  • New “setSize” feature – bad ass.
  • New “remove”, “index”,  and “addFilter” properties for filter tweens – Allows you to remove a filter when the tween completes, define a particular index number in the target DisplayObject’s filters Array, and/or force TweenLite/Max to create a new filter even if there’s a filter of the same kind already applied to a DisplayObject.
  • New “transformAroundCenter” feature - damnit, now that’s just cool. All tweens based on the center of object as opposed to the registration point. In fact, I’m going to use it right now in a project.
  • New “colorTransform” feature – some intense colorTransform shizzle. I don’t necessarily use these, but a cool feature.
  • Changed “shortRotation” syntax - can now affect 3D rotations!
  • Speed improvements – up to 40% faster under heavy loads. Can’t argue with that

Plugin Explorer

There’s also a new fancy plugin explorer to help in the transition to the new version. View examples and determine file sizes with this gem.

pluginexplorer

Posted in Flash/ActionScript, Web Development | Tagged , , , | Leave a comment

A List Apart: The Survey 2008

Hello peeps. You should all go to A List Apart and fill out their 2008 Survey. Starting in 2007 they began aggregating data about our field, the web. This is information for us by us. Last year’s data was an interesting read and can be checked out here.

Go take the survey!

Posted in Industry News | Tagged , , | Leave a comment

Drawing lines with ActionScript 3

Drawing lines with code may not make much sense at first. In fact, it can seem like a lot of work to simply draw a single line. Realistically, you’re probably not going to paint the Mona Lisa. Although, if you do be sure to give me some credit along with this post. Practically speaking, you’re probably going to use AS3 to draw in situations revolving around dynamic content generation. Let’s look at an example.

Suppose your importing photos at runtime that are of different sizes. After the photo is added to the stage, you want to apply a 15px black matte to give it some pop. One way of accomplishing this would be draw it out using some code. It’s not terribly hard, and it doesn’t care what size/dimensions your picture is. Let’s check it out.

A photo with a black matte

A photo with a black matte

Step 1 – Import your photo

I’m not going to go into detail about how you load external images into Flash. That requires it’s own post. If you don’t know how to do it, just do a quick Google and you should get a slew of examples. Once, you’ve done that go ahead and add it to the display list so we can see it on the stage. Cool.

Step 2 – Determining Height and Width

We’re going to want to store the height and width of the photo into some variable for future use. It might look something like this:

//Store the height and weight (Note: "_loader" is what you've
//added to the display list
var _w:Number = _loader.width;
var _h:Number = _loader.height;

We now have everything we need to start drawing out our lines that will create the black matte. You’ll want to make sure you import the display class if you are working in a doc class or creating a new class all together. The rest of the code should be commented out pretty nicely.

//Display related (obviously you wouldn't call this here)
import flash.display.*;

//Put the loader into a sprite
var _photo:Sprite = new Sprite();
_photo.addChild(_loader);

//Create a new sprite to hold our lines
var _lines:Sprite = new Sprite();

//Draw out the lines inside the sprite
_loader.graphics.lineStyle(15, 0x000000, .5, false, LineScaleMode.VERTICAL, CapsStyle.NONE, JointStyle.MITER);
_loader.graphics.lineTo(_w, 0);
_loader.graphics.lineTo(_w, _h);
_loader.graphics.lineTo(0, _h);
_loader.graphics.lineTo(0, 0);

//Create a sprite container to hold both the lines and photo
var _container:Sprite = new Sprite();

//Add the photo first, then the lines
_container.addChild(_photo);
_container.addChild(_lines);

//Finally, add the _container to the display list
addChild(_container);

Understanding lineTo

At this point you’re probably wondering how the lineTo method works. It’s pretty simply when you wrap your head around it. The two numbers you pass to the method are the next x,y coordinates. We always start at 0,0 unless stated other wise. So, in our example we start at 0,0 and draw a line to an x coordinate of _w (the width of the photo), and a y coordinate of 0. In other words we’ve drawn a line across the top of the photo. The next line is drawn from the upper right corner to the bottom right corner. And on and on until we’ve created a fitted rectangle around our photo.

We also have the ability to style our lines which is where lineTo comes in. Here is a link to Adobe’s reference page so that you can get the low down on what each property stands for. I’ve just done a black stroke essentially.

Last Steps

We’re technically done here and you could leave it as is. You should have a photo on the stage with a nice matte around it. The one remaining issue is that the matte covers up a bit of the photo. This happens because the coordinates given apply to the center of the line. Thus a 15px line has 7.5 pixels on either side. To correct this you just need to perform some simple logic that adjusts for the overlap and moves the center of the lines out 7.5px. That will be your homework. Enjoy!

Posted in Flash/AS, Flash/ActionScript, Tutorials | Tagged , , , | Leave a comment