Holiday season begins…

With the Halloween sugar buzz still resonating in my head, we begin the holiday season. Today we celebrate All Saints Day and march towards Thanksgiving. We will be inundated with countless lists of the best this or that gift for the holidays. I literally received a 3" stack of catalogues the other day and I can only expect it to get worse. Marketers trying to gain an edge over their competitors in a race to Q4 profits…ahhh that Christmas spirit just makes you all warm and snuggly doesn't it?

Happy Halloween!

Happy Halloween! I remember watching the Charlie Brown Halloween special as a kid. It is a great holiday institution in our family and a wonderful memory of a simpler time.

These days my daughters trick-or-treat at a few friends houses and we have a special dinner together. There is not the care-free candy binge of my childhood due to the changing nature of the society we live in. But at least we still have It's the Great Pumpkin Charlie Brown!

Tutorial - Chrome in Photoshop

Anyone who was alive in the seventies will hopefully appreciate this little tutorial. I remember airbrushing these type of effects a hundred years ago…in fact I still own several thousand dollars worth of airbrush equipment. One brush I bought for close to $700 weeks before an update to the Mac OS that made it a more viable solution for the type of work I was doing than the traditional way.

Anyhoo, the chrome effect can be a winner for certain types of projects. There are few steps and as always, once you get the hang of it there is really no end to how you can alter and customize per your vision.

First of all, create a block of text…a heavier weight font is almost necessary for this effect to stand out.


Once you have the basic text. Duplicate it to a new document and give it a Gaussian Blur of a few pixels (this will alter depending upon the dpi of your image).



Save that file out as grayscale image…we will use it later for a displacement map. Now back to the original image. Grab your gradient tool (G) and create a layer on top of the text. On this layer create a gradient that goes from white to transparent and extends to about the middle of the text.



To this layer we are also going to add a layer style…a gradient effect.



We will use the basic chrome gradient from the dialogue box. Which will alter the image thusly.


Next we add an entire Chrome layer on the topmost layer.




At this point, select the text and copy the merged layers (copy + shift + C). Paste that on top of the other layers. Go to Filters > Distort > Displace. Set the parameters to match (although these can be altered per your desired effect). When the dialogue box pops up, locate the blurred text grayscale image from earlier.



You will now have altered the latest layer to something like this. Notice how the horizon has now altered a bit, giving the text some depth and character.



Now we can start tweaking this image a bit. Create another layer and make another white to transparent gradient that goes from the middle of the text to the bottom of the letters. You can drop the opacity a bit…mine is at 50%.



Create another top layer. Select the text and go to Select > Modify > Contract. This will create an inset for the text… I set it to 4 pixels. Then stroke that line with a 2 pixel white line.



Create another layer on top for another soft white gradient. This one has a transparency of 75%



It now looks very similar to a plethora of bad, I mean retro, album covers from the seventies. We can further enhance the image by creating a sense of place with things like a shadow, reflections, etc…



Or to make it really pop, put it on a black background.



Well, I hope this was helpful. It is another manual way to create interest with your imagery in Photoshop while maintaining full control of the image. You could alter, degrade, enhance this in numerous ways that no plug-in could match.

Mahalo…

Picture is worth a thousand words

In an effort to create more quality images, and to just have fun doing things I love, last week I started posting a plog (photo blog). Ideally, it will ultimately showcase new photography, and other visual media, completely disassociated with work; it is strictly ars gratia artis. Some of these images, at the start, may be from a backlog of the literally thousands of images I have taken this year. In time, it will be content created strictly for the plog.

Michelangelo was said to be haunted by the spirit to leave a body of work…now I have not even a thousandth of the skill of the great master. But I wll persevere, nonetheless, in my own small drive to leave a body of work for my girls.

Holy @$#*

Google does it again. Their labs have opened up search for code. They have also opened up what could be sensitive information by indexing anything and everything with the appropriate extension. This could mean trouble for some who make their living by writing proprietary code for a living. It could also mean trouble for the rest of us, when that code incorporates sensitive information within the markup.

I am awed by Google and becoming more afraid of their power.

20 years ago…

Been waiting 20 years since the last time they played this good. Although it has really nothing to do with design it is a good day to be a Mets fan. I have my tickets to Game 4 at Shea, if the series lasts that long. Go Mets!

Passionately Pink for the Cure™!

In conjunction with October being Breast Cancer Awareness Month, we will wear pink proudly on our site. The copy below is taken directly from Komen.org and promotes their new initiative in helping to find a cure for this disease.

Passionately Pink for the Cure™ is a new, year-round fundraising and education program kicking off October 1, 2006, in conjunction with National Breast Cancer Awareness Month. The program encourages companies, schools and organizations to take that promise, make it their own, and make a difference by supporting breast cancer research, education, screening and treatment.

Breast cancer touches millions of lives. It is expected that 211,200 women and 1,720 men in the U.S. will be diagnosed with breast cancer, and more than 41,000 people will die from breast cancer in 2006 alone. One by one, we can make a difference! Passionately Pink for the Cure™ is an easy, creative program we hope will have everyone seeing pink everywhere you look, every day in October, encouraging millions of people nationwide to get involved in the promise for the cure. We hope to raise $10 million through the Passionately Pink for the Cure™ program with your help.

Firefox ho!

I have used Safari and Firefox for ages, but the featureset for Firefox has finally made me convert to using it as my full-time browser. I had been reluctant to make the final leap since Firefox still does not address the very handy Services menu in OS X. I use this function extensively, especially while browsing to save snippets of interest, but that was finally outweighed by the enormous amount of features available from the Firefox community.

View source chart - this has got to be one of the cooler ways to look at source code. Visually identifying and separating the code in a cohesive structure that allows an easy way to review the code. This is a great extension that will help anyone looking to learn more about CSS and standard code in general.



Along the same lines is the CSSViewer extension. This extensions pops a window with the CSS code for any DIV you place your cursor over. It is anotehr great way to dissect a page's code and learn more about CSS works (see image below).



Devboi provides a great reference pane for HTML, as well as additional libraries for PHP and Ruby on Rails.

Codetech is a full featured editor that you can use within Firefox. It offers some great features and is free!



Aardvark is an interesting plug that will highlight the elements on the page when you mouse over them. This is good for learning more about the structure of the document, but it also allows you to delete these items from view; handy for removing elements you do not want to print from the web, like navigation.

There are some tremendous opportunities to learn more, be a better programmer and extend the functionality of the software used to develop valid and compliant sites using Firefox. If you are a developer and you are not using Firefox I would suggest you give it a try. It may help streamline your workflow.

Tutorial - Layer Adjustment in Photoshop

An often overlooked method of working with imagery in Photoshop is the use of Adjustment Layers. This provides the means to retouch an image in a non-destructive way. When you select an image and adjust its Levels or Curves you have altered that image, but using an Adjustment Layer for that identical process provides the same results but without altering the original image. This allows the ability to step back to the original image for any reason.

Let's look at an image from a recent trip to Guadalajara.



As you can see the image is somewhat washed out. There is not a wide enough spectrum of lights and darks in the picture. So lets create a new Adjustment Layer to work with the levels of the image. At the bottom of the Layers Palette, click on the icon of a black and white circle (or you can use the menu Layer > New adjustment Layer > Levels) and select Levels.



This creates a non-destructive way to adjust the levels through a layer that you can turn on/off.



Here you can adjust the overall parameters for the level of the image. But if you want finer control, and don't we all, you can adjust each of the channels (RGB). In the drop down select the Red Channel (command + 1). The settings before we manipulate them appear below:



What we want to do is tighten up these settings. We move the outer sliders in on both sides to just where the graph begins:



We follow suite with the Green (command + 2) and Blue (command + 3 ) channels. The Green before:



Green Channel after:



Blue channel before:



Finally the Blue Channel after:



Once we have performed these actions our picture now looks like this:



Through the use of channel operations we have altered our image, but can always step back to the original. Non-destructive editing allows us to manipulate the image in multiple ways while maintaining the original image's integrity.