Photoshop actions are extremely helpful if you have multiple images you need to modify, be it color correct, optimize, resize, etc., so web designers listen up because this can come in handy. The first thing you need to do is open up an image in Photoshop, and then under the Window menu, select Actions (alt+F9 for PC) to open up tour actions.

For this example I have chosen several changes such as converting to B/W, resizing, and adding text, but you may replace the following with whatever you may need to do to your own images. So the next thing you want to do is in the Actions window, click the “new layer” icon (second from the left) at the bottom of the window, and a dialogue box will appear for you to name and label your new action with a color and hot key.

Once you have named and labeled your new action, you will want to press the Record button and begin your series of changes (once you click record, the actions will be keeping track of every change you make and saving it in order). For this I have chosen to 1)convert my image to black and white, 2) add a curves adjustment layer, 3) resize the image, and 4)optimize it for the web. Once you have finished making changes you will need to click the square “stop” icon on the bottom left of the Actions window to stop the “recording”.

Once you clicked the “stop” icon you will see your new action with a list of everything that you’ve done to the image as you see below. You will see the action called “Example Action” and its corresponding list.

Now to utilize this new action that you just created all you need to do is open a new image, select the action from the Actions window, and click the “play” icon which is third from the left at the bottom of the window and you’re all set.

This feature can be your best friend if you are creating thumbnails or same sized images for a website because it saves you from having to do these same changes image after image and you can save them for as long as you need. Many photographers also use this feature if they find a certain technique to convert to black and white, or add contrast so they can have almost custom filters at the press of a button.

No matter what direction you are taking, the textures you use throughout your elements are going to play a big role in its success. As a designer who has experimented with grunge elements in the past, I can tell you first hand that second-rate, pixelated or poorly done textures are only going to hurt your work. So when I came across the following page, I thought it could be a great resource.

BittBox.com has listed several sources of high resolution textures and supporting images in one place, including photographic textures and purely abstract “grunge” textures. You can find the page at:

http://www.bittbox.com/tag/textures/

Adding these textures to any text, web page, poster, etc. can give it that little edge and push it over the top from a good design, to a great design. Enjoy!

Editing your RAW photos in the RAW dialogue not only eliminates the need for almost 90% of your Curves, Levels, Exposure, and Color Corrections in Photoshop, but it offers a plethora of options otherwise a pain to reproduce. Now you may open JPEGs in the RAW, however it is not as much of an advantage as the image has already been compressed in a lossy process.

The RAW menu

Once you have opened up a RAW image in Photoshop (.NEF for Nikon, .CRW for Canon) it will open the RAW dialogue which you can see above. Before I get into the sliders, you can see at the bottom you may edit the color space (I almost always use Adobe RGB (1998)) and bit-depth among other setting if you are editing a RAW image. This can come in handy if you do not have a color space choice in your camera menu or you shot with one you do not care for.

Because it would take a ridiculously long post to cover all the options in this RAW dialogue, I will only cover the options in the first Page, but for more info or tutorials on the other options check out adobe.com.

White Balance (Temperature and Tint):
This is one of the most helpful tools in the menu. You can use this tool to correct any white balance problems or global color casts that many cameras have. Although we would like to think auto white balance is perfect, IT’S NOT!!! There is also a drop down menu where you can choose presets, however I choose to use custom editing.

Exposure:
This option is self-explanatory. You can slide the fader to the left and right in order to increase or decrease the exposure of the image.

Recovery:
Recovery is a bit mysterious, but as I understand it dragging the fader to the right affects the highlights that are currently clipping and does so by adjusting the equivalent of the curves feature.

Fill Light:
Fill light concentrates more on the mid-tones, and acts like a “digital light”, filling the image with a brightness, however it tends to flatten images.

Brightness:
Again this feature is pretty self-explanatory, sliding the fader to the left or right either globally brightens or darkens the image, but use this feature in moderation as it can also flatten the image.

Contrast:
This feature obviously affects the contrast in the image, which is the difference between the darks and lights in the image.

Clarity:
This is one of the the most intriguing features in the menu. It is essentially a selective contrast on steroids. What it does basically is intensify lights and darks in addition to altering the background near the dark or light with a lighter or darker value. It can really do wonders to make a photo”pop”, but be careful as you can get some nasty halos with this one. Also, you can slider the fader to the right to get a soft effect.

Vibrance:
In essence this is a “smart” saturation. It will increase saturation of the colors in your image that are not already bright or saturated.

Saturation:
Saturation is the last option, and it again is somewhat self-explanatory. Sliding the fader to the right thus increasing the saturation will cause all colors in the image to become more vivid and saturated, so use this one with moderation as an over-saturated image just looks amateurish.

One last note, all of these adjustments are GLOBAL and will affect the entire image, any fine tuning will need to be done in Photoshop. You can see how helpful the RAW dialogue box can be in “processing” your images, and it conveniently collects these features (and many more I haven’t covered) in one place so you can start with an excellent photo.

So we start out with a simple web page with a thumbnail image and some text just to set the scene. In this example I’m simply going to add a JavaScript command to the thumbnail in order to open the full sized image in a new window fit to it’s dimensions. so here is my example web page:

Now to add the JavaScript calling the pop-up window from the thumbnail, you will need to add code in two different places. First, you will need to go into the page code and right below the <title> and <link> (if you’re linking to a style sheet) tags, and add a <script> tag as you can see below in lines 7-13:

Next you will need to find the thumbnail (or whatever element you want to call up a pop-up window) and add an onclick command inside the <img> tag as you can see on lines 19-20 below.

The onclick=”MM_openBrWindow( section will always be the same, however where you see ‘mario.html’ in this example, you will place the web page which you have created with the full-sized image on, or you can simply put the file path to the image itself i.e. ‘resources/Pop-Ups/assets/mario.jpg’ but I usually prefer to place the content of the pop-up inside of a new page so I can have more control over the design and layout. In addition, where you see the height and width values which control the actual size of the pop-up window, you will have to open the web page in a browser and open the pop-up page until you have played around with the values to fit the pop-up content into the window itself. You can click HERE to view my sample page including the pop-up window on the thumbnail.

The last thing I will say about this is that if you decide to put your pop-up content in a new web page, place it inside of a <div> and add an ID or class, and then in your CSS set the “position” to either absolute or fixed (position: absolute; or position: fixed;) and it will cause the <div> container to automatically shrink to the widest element inside of it.

Being interested in type myself, he has been one of my biggest influences from the entire field of design. Though you may be able to date his work from the color or typeface usage, it has enough strength to hold up even today. Here are several of my favorite pieces he’s done:

These four pieces are only the beginning of what this man has left designers to learn from. Lubalin was not only a master of typography and letterform, but he was able to seamlessly integrate type with image as well. He is truly an iconic figure in the world of design, and though it may not show through my work, I owe much of my passion and drive to seeing Lubalin’s work for the first time, having something so beautiful to strive for.

Many designers, even if only subconciously, owe their creativity to this man. To sum things up here, everything Clint Eastwood is to the Film Industry (i.e. rugged, manly, epic, the alpha and omega, commanding, etc.), Herb Lubalin is to the Design Industry. On a side note, check out this really cool website i found while researching tonight, it even has hints of Lubalin-esque flavor! It’s a graphic design and photography studio called Letterform and you can visit them here: http://letterform.net/.

For my project, I have chosen to create a time line which will present a condensed history of typography through an interactive flash application. Beginning with the invention of the printing press in the fifteenth century, all the way up to modern day, the application will survey the rich history of typeface design and layout aesthetics.

Not only will it provide this information, but it will be self referring, that is it will present information on Johannes Gutenberg in the style of his Gutenberg Bible (same layout proportions, dual columns, and in a blackletter typeface), and so on for the other time periods. Covering important figures, typeface evolution (old style, transitional, modern), and the changing layout standards, this application will hopefully prove to be a useful resource for more people than just myself.

I’m also hoping that by utilizing Adobe Flash it will help me learn more about the program, and get a hold on ActionScript 3.0. I have begun to put the beginning of the application together and it has been a bit difficult, but I am slowly catching on and I like the direction the project is headed in.

Throughout the course of my research I have found these really cool and helpful resources. You should check them out, you might just fall in love with them.

www.ilovetypography.com
www.redsun.com
www.typographica.org

*UPDATE: I have since completed several sections of the timeline and uploaded the .swf to my website, you can view it at http://www.anthonydecarolis.com/typography.html.

It will be easiest if you begin with a new file, and set up three separate layers, one for the actual content (button), one for Labels, and one for Actions, then label them accordingly (with the “actions” layer on top). Next you must create the button you want to perform the action. To do this you must simply provide content (text, a shape, an imported image, etc.) and place it on the stage in the “content” layer. Then select your object and under the Modify menu choose “Convert to Symbol”. In the dialogue box,  give the button a name (in this demo I will use “button_btn”) and click the “button” option.  After this, you should give the button an instance name which is located in the field below the button name in the properties bar. In this example I have named the button “begin_btn” and given it my button an instance name of “PlayEnd”. The button name you gave should then appear in your library, and you can begin to style it if you wish.

By double clicking the button you will bring up a new time line that has four states, Up, Over, Down, and Hit. Here you can style the button just like you would an HTML button in a style sheet as you see in the image below.

Once you have taken care of your button states you can select the frame that the button is on, however on the “Actions” layer you set up this time. Next you will need to open your actions window under the “window” menu, making sure you have the same frame number selected as the one your button is on. What you’ll want to do first is import the mouse event you will be using, in this case we want to skip to another frame when the button is clicked, so we will be using a CLICK event.

In the actions window you will begin by typing:

import flash.events.MouseEvent;

This will import all your mouse events. It is not necessary to take this step for the button to work, but I have been told it is a good habit to get into. You may also want to apply a stop action to stop the flash from playing through, to do this you simply type “stop();” above everything else in the actions window. Next you will need to add an event listener to your button, which will “listen” for the users’ events, in this case a CLICK event. Your script should read something like this for that:

button_btn.addEventListener(MouseEvent.CLICK, PlayEnd);
function PlayEnd(event:MouseEvent):void{
gotoAndStop(“End”);
}

You can see where the event listener is being added to my button (begin_btn), with the instance name (PlayEnd) following it. The line of script below it is simply the syntax for defining the function of our event. In other words, it is to set up exactly what happens when the button is “clicked”; and below that you can see the gotoAndStop command, which tells the animation to go to and stop at the frame labeled “End” with additional content that I would like my button to jump to. You may also replace the “End” with the frame number you would like to jump to, however inside the parentheses, do not include the quotations if using only a frame number. In addition, to jump to a new frame and continue playing, simply substitute gotoAndPlay where you currently see gotoAndStop.

Syntax is very important in ActionScript, and I would suggest consulting other sources such as a good AS 3.0 book, or your favorite tech bloggers to learn the basics first. Things such as capitalizations and small punctuation can make a nightmare for you if you miss them in the beginning, so pay attention to what you’re typing and good luck!

I have taken an example of my own work in which I used the Golden Proportions both for the page size as well as the layout. Below you can see the original poster (left), and then the poster with the visible guides I created from the Golden Rectangle (right):

click the image for a closer look

Now I said that I used the golden proportion (1:1.618) for the size of the page, and as you can see the image on the right shows that the entire page is simply a golden rectangle. The easiest way to set up a page with Golden Proportions is to choose a width you want (for a vertical layout like my poster) and simply multiply that width by 1.618 to get your height. In this case, my finished piece was 7in. x 11.326in.

As you can see in the poster to the right, I have left all of my guides, including the original Golden Rectangle, the breakdown into more Golden Rectangles (red), the Fibonacci Spiral (green), and some extraneous guides (blue) I added on my own.

I first broke the layout down into two areas, the upper part which is contained in the square region on the rectangle, and the text below which is contained in the subsequent Golden Rectangle. The word “HELLO.” come up flush with the bottom of the square, and the copy below mimics the “square shape”. In addition, the Fibonacci Spiral enters the text on the exact corner of the period following “HELLO”. It then continues to meet the “E” on its upper-left corner, flush against the bottom of the square, and again curve through the “E” and “L” in the exact middle of the two letters.

Additionally, in the upper area of the poster, the subtext “the transcendence of our transience”, as well as the image of the birds begin to mimic the curve of the spiral. Lastly the blue guide which i simply derived from the diagonals of the entire rectangle and square portion in the upper area of the layout, split the two elements in the upper portion in half, providing a sort of axis to base their position off of.

The biggest thing to remember when you’re creating a loyout using this (or any other) techniques is to use the guides in the layout as a base or loose structure, not a cookie cutter positioning system. Use them to help you, but not tell you where to place various elements. If you are forcing things to fit into a piece, it will always show in the finished product.

When it comes right down to it, this is as much a comparison of the shows, as it is of the survival hosts themselves; so in earnest this is more of a “Les Stroud vs. Bear Grylls”.

Les Stroud of “Survivorman”

Bear Grylls of “Man vs. Wild”

Now I’m going to cut right to the chase and tell you that hands down, “Survivorman” is the better choice, but I will explain my decision for those of you who may disagree. I see how it could be misleading, I mean the host of “Man vs. Wild’s” name is Bear Grylls. That alone is enough to attract my attention, you have a certain expectation from someone with such an epic name, he is named after the most burly animal alive. But the bottom line is that nearly half the things he does on his show are either staged or partially provided by the crew or local people for him. Not Les though, he is out there all by himself, no camera crew, and no staged acts for TV. Now both hosts are briefed and “shown the ropes” by local guides or survivalists before they actually do the show, but Bear Grylls receives help throughout the entire time spent at a location.

Another key point, Bear is from Britain, Les is from Canada…enough said. Now I don’t have anything against either country, but I would have to argue that Canadian might be a little more rugged than Brits. In addition, Les stays out for a week (7 days) every time he does an episode, Bear stays maybe a few days, and has the company of a camera crew with him throughout his travels, that alone is a huge advantage that Les does not share. Lastly, only one of the two hosts was caught sleeping in a hotel during a survival excursion, that being Bear Grylls. Now I don’t believe it was for a “Man vs. Wild” episode, it was something for the BBC, but it is still something to be considered.

I do not want to say that I don’t enjoy “Man vs. Wild” because I do, it is just that I felt it needed to be know that “Survivorman” reigns supreme. Bear Grylls may be entertaining, but he will never be as manly as Les Stroud, and his show will just never be on that same level. Besides, Les is an extremely talented musician as you can see on many of his shows. True, Bear climbed Everest and has done a lot of very impressive things, but he exaggerates the extent of his special forces involvement, and he is just not going to cut it. Because I feel bad for being so hard on Bear, I will leave you with this: