5 fundamentals of color correction

Posted on Mar 10, 2010 by Neil to General

When it comes to advertising and design, your works impact is directly linked to the quality of your images. Digital photography has brought professional level imagery to the masses. However, mega-pixels don’t necessarily equate to quality. If your levels are off, it wont matter how high res your file is. To insure your photos look their best it’s important to take a few simple steps to unlock their potential.

First off open your image using Photoshop or a similar image editing application.

1.Curves
Take a look at the image – does its general color appear to be in balance? If so you can move onto the next step otherwise the first step is to balance your color. Easiest way to do this is to use auto curves. Under Image>Adjustments>Curves> Find Auto curves. This easy tool automatically balances out your image – most of the time. In some cases the tool produces unexpected results which are obvious. in this case simply chose undo. If the image still needs color adjustment the next option is to manually adjust the color using curves. digital photos shot with pocket cameras tend to be heavy towards the red channel – esp ones shot at night. Under the curves menu select the red channel and go the center of the curved line tool and drag the curve slightly upwards – doing this will reduce the amount of intensity for the red channel which will reduce the redness in your image.

Tip: In any image find a neutral grey area. You can easily identify problems by sampling color from grey areas. Any neutral grey should have an even value – ie: Red 150, Green 150, Blue 150…..if you see Red 200, Green 150, Blue 150 – simply pull back your red channel untill its balanced. Doing so unlocks detail and turns a bad image into a usable one.

2. Levels
Next how does the images brightness look? Is it to dark? Using Image>Adjustments>Levels> you can easily adjust either the highlight regions , mid-tones or shadow areas by sliding the levels adjusters from side to side. enable the preview check box so you can see how the changes will affect your image. Use levels sparingly – its a powerful tool that can dramatically improve an image but if taken too far will compromise its quality.

3. Brightness/ Contrast
We’ve just covered brightness using levels. However there is also a tool called brightness / contrast. This may sound misleading, but I wouldnt use the brightness tool to adjust brightness – use the levels instead. Its way more precise. The contrast slider on the other hand is critical. Using this key tool add between 3-8 points of contrast to make your image pop. Adding contrast almost always makes your image look better – just don’t add to much or you will lose detail in the highlight and shadow areas.

4. Sharpness
Sharpness enhances the crispness of an image. it can take an image that may be very slightly out of focus appear crisp. However it can not make an image that is completely out of focus appear in focus. When used correctly sharpness greatly enhances the quality of an image. Additionally, when you take a large image that has a perfect amount of sharpness and reduce it down for web use – it always will require an additional UnsharpMask adjustment to look its best. Like any image adjustments its key to use the right amount – always preview your adjustment to insure you haven’t used too much. the best tool to use to adjust sharpness is UnsharpMask mask located here: Filter>Sharpen>UnsharpMask

5. Saturation
This step is not always necessary but it can come in handy if you have an image that needs to “pop” off the page. You can crank up its color saturation by using Image>Adjustments>Hue/Saturation. Dont use the hue slider on top – this tool is unpredictable and should be avoided unless your going for very dramatic effects. However the saturation tool is a great way to add a bit of color to what may be a lackluster image. What it does is increase the intensity of whatever colors are already in the image. Again the key here is moderation so use it wisely, or your image will appear enhanced. I recommend bumping it up by 5-10 points. This will make the image come to life without looking fake.

There you go. These 5 simple steps can unlock the quality of what may have otherwise been an unusable image.

Tags: curves, fireworks, mega-pixels, photoshop, saturation

Add a custom watermark using batch command.

Posted on Feb 19, 2010 by Neil to General

Have you ever needed to add a copyright, photo credit or logo to multiple images on a site? If the answer is yes – heres a solution that covers not only basic text credits but can also incorporate type effects , image adjustments, re-scaling, renaming and or resizing to multiple images with a single pre-saved command. (For this entry we used Fireworks but Photoshop is equally capable)

Heres how:

1. First create a document that matches the target size of the documents you plan to process.

2. Use this as a canvas to create and place your watermark, photo credit, or logo. Feel free to adjust the placement and appearance using transparency or any type of image effects needed. In the next few steps you will be laying this file on top of any images you wish to watermark so keep that in mind.

3. Save the doc using transparent background png name it template.png.

4 .Open a sample file you wish to apply the watermark to.

5. Now chose import file and import template.png to your canvas. Then save the file using any name you wish.

6. Go to history and select the steps you just made (import and save).

7. Export these steps as a command (name it whatever you like – for example: watermark.js). This will export a .js file including whatever steps you took which will be reused later.

8. Now your ready to batch process as many images as needed.

9. Under file pull down to batch process – keep in mind you don’t need to open any files – its all done using the finder from this point.

10. Chose batch and add all the files you wish to process. You can add files from multiple folders and multiple locations.

11. Click next step and scroll down to commands – you should see the command you created and named at the bottom of the list. (note: you can also apply any of the pre-made commands to your batch process at this time)

12. Complete the steps by selecting your settings and press the batch button to start the process.

13. Go get some coffee while your computer goes through the list of files and completes the task for you.

When working on large scale projects the time savings of batch process can be significant. The downside is getting your commands right is tedious and can produce unexpected results – so it pays to experiment untill you get it right. The plus side is once you have your  test file to where you want it – batch process will rip through as many files as you can throw at it.

Try batch processing next time you need to resize, rename or apply effects to a large amt of images – you’ll be surprised how much time it saves.

Embed Video Content in Acrobat

Posted on Feb 8, 2010 by Neil to General

Adobe Acrobat is a document format with the ability to display contents uniformly across all platforms. Acrobat’s ease of use and page up/down functionality is flawless  - making Adobe Acrobat the defacto format for sharing digital documents.

For most users Acrobat is limited to text and images. Although Acrobat has had the ability to embed video for quite some time – only advanced users with scripting knowledge were able to utilize the feature. In Adobe’s latest release, Acrobat can embed video content with a simple menu item click. This exciting new feature allows acrobat documents to hold multimedia content – further extending Adobes lead in the document sharing world.

Embedding Video into your PDF doc (be sure you have Acrobat 9 PRO) :

1. First, click on the “Tools” menu item in the menu bar at the top of the screen.

2. In this menu click “Advanced Editing.”

3. Now click “Movie Tool.”

4. Using the Movie Tool draw a rough outline of the box in which the video will appear on your page.

5. Once you have drawn your box, you’ll be prompted to browse for the  location of the video you want to insert into the PDF file. Locate the video on your hard drive.

6. Name and save your .pdf document.

7. Thats it – the video should be embedded into your .pdf.

Always be sure to test the .pdf prior to sending out and also be aware of your file size. Embedding video is now simpler than ever;  however if you embed a massive video- your recipients may not be able to download the file.

for more information on how to embed video using Acrobat visit:
http://www.adobe.com

Tags: acroabt, Flash, pdf, video

Rounded Corners Using Photoshop

Posted on Jan 21, 2010 by Neil to General

Using rounded corners in photoshop is a breeze with the new rounded corner tool. Before the rounded corner tool the only way to round images was to use either vector paths imported from illustrator or make a rounded selection path from artwork imported from other applications. The problem with this technique was that it left little room for minor adjustments since the rounded corner image or shape had to be created in a different application. To get it right you would need to import the image into illustrator, adjust the rounded corner shape to the right size then bring that shape back into photoshop. This complicated things and made customization a pain.

In photoshop CS the tool pallette now includes a shape tool. Select this tool and hold down…..a series of shape options including the Ellipse, Polygon, Line, custom shape and the rounded Rectangle Tool. Each of the shape tool options has its own set of properties you can customize.

heres a simple walkthrough of how you can add rounded corners to an image:

- First open an image file

- Now add a new layer in the layers panel

- On this layer using the shape tool draw a Rounded rectangle. Notice that once this tool is selected and the layer is active you can adjust the radius of the corner…..

- Using the Magic Wand or Direct Selection Tool select the rounded shape

- Choose the select drop down and save your selection

- Now in the layers panel chose your image and cut it from the canvas onto your clipboard

- Load the selection shape using select>load selection.

- You should now see a dotted “marquee” outline of your shape / saved path.

- With the dotted “marquee” path still showing chose Edit > paste Into. This will p[aste your image inside the selection shape creating a mask.

- There you go - you should now see your image masked by the shape of your saved path with rounded corners.

- Use the layers panel at any time to make minor adjustments, add shadows, glows or whatever you chose. You can also scale or fine tune the masked image untill its positioned perfectly.

- Export the file as a transparent background png to maintain your transparent background. this way you can overlay the file onto other images or designs seemlessly.

In photoshop theres so many tools and techniques - the possibilities are endless. A good approach is keep an open mind when photoshopping, since many paths can take you to the same goal. Dont be affraid of the tools. Drag layers around reorganize them adjust their transparency. experiment with the tools provided. Often your best designs will reveal themselves to you as a result of a layer interacting with another layer in a particular way that looks good. You may see things that improve the design or detract from it. If you like the way something looks duplicate it onto its own layer. You can then turn that layer on and off or toggle between the two and compare. Doing this allows your designs to evolve in ways that often exceed your initial expectations. With tools like Motion Blur or Zoom Blur combined with all the different layering possibilities...... there are no limits to what you can create using photoshop.

Here is the canvas with tools like layers, Selections, and Rounded Rectangle Shown.

try this site for more inspiration and maneuvers - http://psd.tutsplus.com/

How to purchase / register a domain name

Posted on Jan 13, 2010 by Michelle to General

As a website design, development and marketing company, when a client first comes to us to request more information on creating a website for them, one of the first questions we ask is: Do you already own a domain?

While seemingly an innocent question, from our agency point of view, I have come to realize that the sheer terror this arises in some of our clients, requires a straight forward step-by-step guide to complete this task.

The domain name’s goal:
The domain name itself has one main goal. The main goal of a domain name is to give the public an idea of what information they might see when they land on your site.  Some examples of this are: WebDesign.org, Hotels.com, SEO.com, etc.  When performing a search within Google, if these sites were to appear within the results, based on their domain name, you would have a fairly good idea as to what you could find on their site.

Now that we have the domain name’s goal clarified…Ready to begin?  Grab yourself a cup of coffee, sit back, deep breath and now we can get started…

For the sake of simplicity, I am going to setup a senario for you, and reference it throughout this how to.

Senario:
Tina is a small business owner.  She has a friendship bracelet store in Key West, FL.  Tina has decided to expand her market reach, by venturing online.  She wants a website to feature pictures of her friendship bracelets, show her store’s location and allow her customers to purchase her friendship bracelets online.

Step 1: Research Domain Name Options

The best place to start your domain name research is with your companies brand name, or variations of that.  Start by making a list of your companies brand name and variations of. 

NOTE: it may be helpful to include addons such as LLC, INC, etc.

Tina’s Brand Name List:

1. Tina’s Friendship Bracelets
2. Tina’s Friendship Bracelets, Inc.

Once you have a list of brand name domain name options, start making a list of services/products your company offers, company location and any other relative terms you may come up with.

Tina’s Description List:

1. Friendship Bracelets
2. Friendship Braceletso Store
3. Key West
4. Florida
5. Key West, FL

Step 2: Check Domain Name Availability

The next step is to check the domain name availability.  Utilizing a few different websites, you can do this quickly and with little effort. Register.com is one of my personal favorites.

In a best case senario, your brand name is available and you can move right along to step 3; however sometimes that is not the case.  If you are not that lucky as to have your brand name available, you can utilize these sites to type in different variations of the two lists you have made.

Tina’s Example Variation List:

1. www.friendshipbracelets.com – taken
2. www.tinasfriendshipbracelets.com – available
3. www.tinasfriendshipbraceletsinc.com – available
4. www.friendshipbraceletskeywest.com – available
5. www.keywestfriendshipbracelets.com – available
6. www.friendshipbraceletsflorida.com – available
7. www.floridafriendshipbracelets.com – available
8. www.friendshipbraceletsstore.com – available
9. www.friendshipbraceletsstorekeywest.com – available
10. www.keywestfriendshipbraceletsstore.com – available
11. www.friendshipbraceletsstoreflorida.com – available
12. www.floridafriendshipbraceletsstore.com – available

Step 3: Purchase / Register Domain Name

Once you have determined if your domain name is available, you can now move forward and actually purchase it!  A common mis-conception is that you need to purchase a domain through your ISP; however it is just a mis-conception.  There are many sites that will let you purchase your domain.  Some examples are: www.register.com, www.godaddy.com, www.networksolutions.com, etc.  So, my advice here is to shop around.  Different sites will have different costs.  Additionally, another great option is to purchase your domain when you sign up for your hosting account (how to on this to follow), because they will sometimes add on one domain for free when you sign up for hosting.  Most all of these sites have a simple step-by-step process walking you through the purchase of your new domain.  They usually run something like this:

1. Enter domain
2. Enter contact information
3. Purchase domain

That’s it…you’re done!

Advantages of actionscript tweening vs timeline tweening

Posted on Jan 11, 2010 by Neil to General

So what is a tween? As defined by wikipedia:

“Inbetweening or tweening is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings between the keyframes which help to create the illusion of motion. Inbetweening is a key process in all types of animation, including computer animation.”

In adobe flash, an easy way to tween is using the timeline. place an object on your stage add a keyframe then dupicate the keyframe, drag it across the timeline to the required location then select the two keyframes. now in the properties panel with both keyframes selected add a motion or shape tween. At this point the two keyframes are grouped and you can move the object in the first keyframe to one location then move the object in the next keyframe to another location. You can even change its color, rotate , scale, etc. since the two keyframes are tweened when you publish the movie you will see the object move in the whichever way you have defined. The tweening creates all the frames between the two keyframes.

At this point you can chose to make this animation its own movie clip then assign that clip to play when you hit a button or you can use the movie clip to add transitions to your flash presentation.

However using the timeline to tween has many limitations.

More advanced users use actionscript to create movement on the stage. Actionscript allows you to use math to create advanced forms of tweening with properties such as easing, elasticity, bouncing, and more precise color control. Additionally, actionscript tweening allows for sequencing of movements, delays, and even callbacks which tell the movie to execute the next action only after the previous event has taken place.

The best part of using actionscript is that it is non linear. Meaning that its timeline independent. With a timeline tween, once you define its movement it cant really change. You can tell it to stop then go again but its still linear. If the animation was done using actionscript I can at any point tell it to do something else. For example I could make a button that on press tells the logo to turn black and rotate 360 degrees while increasing to 250% of its original size.  I can cause this action at anypoint during the previous animation and it will affect the animation seemlessly. In other words midway through an animation i can tell it to start doing something else and it will smoothly change its course and begin its new set of instructions. you cant do that with timeline tweening.

Using actionscript to create tweens also has its own limitations. For one thing its much harder to do. For basic tasks such as fading imgs or moving type its a good idea to stick with basic timeline tweens. In fact most animators use a combination of timeline and actionscript tweens. Since timeline animation is quite visual it can be a good starting point to make things look nice -then more advanced interactivity can be added using actionscript.

for more information on tweening and actionscript visit adobe.com

Tags: actionscript, THAT agency, timeline, tween

The future of web.

Posted on Dec 31, 2009 by Neil to General

Back in 1995 when I first hooked up to the internet things were different. Going online involved an annoying dial in period where your modem made its connection. Once online you could “surf ” the web for design ideas, news items, books, etc. However the content available was limited and it was hard to find quality material. Often your experience left you with little accomplished and much time wasted. This early stage of internet was at some poin labeled internet 1.0 – where the web was just starting to take shape.

Today, the internet and web design have gone to a whole new level. There are agencies THAT specialize strictly in social networking and/or search engine optimization. Most sites are updated in real time and with a few keystrokes into a google search field you will surely find pages of links holding your searched information. Without question the most significant advancement with the internet is the explosive growth of blogging and social networking. These new technologies take internet content to a whole new level allowing individuals connect with people of similar interests and share their personal or professional lives in real time. Posting information in the form of videos, photo albums and memos to certain friends, groups, or even to selected groups based on relevance. now the Internet is not only a resource full of information that can help you find answers, its progressed into an advanced form of global communication. This current phase of Internet use is commonly referred to as web 2.0.

So what does the future hold and when can we expect to be running web 3.0? Its hard to clearly define when that turning point will actually take place but surely its underway and perhaps we are in many ways already into web 3.0. The next phase of the web could be one that takes the existing ability of global communication to the next level. This phase could be marked by web applications able to do seemingly intelligent things. For example applications could extract relevant solutions or options based on your browsing history. The search engines may eventually take into consideration your income level and only post results that reflect that. It would be as if the computer anticipates your needs based on your viewing or buying habits. Without being a living entity a computer improves your web experience through using what could be described as artificial intelligence. Imagine the possibilities? voice recognition? Having a conversation with your digital assistant while getting ready for work? What if your digital assistant detected some stress through voice recognition? “Perhaps you had taken it to far the night before? Let me play some soothing norwegian death metal for you to help get you going this morning…”

What sounded like science fiction 20 years ago is now just around the corner.

Tags: norwegian death metal, SEO, web design

FREE WordPress Theme – THAT Elite

Posted on Oct 23, 2009 by Rich to General

Although we pride ourselves in building custom website design and development solutions for our clients, we cannot the deny the impact that other solutions have made to our community. Wordpress is one of those Content Management Systems that has become a fundamental solution to many individuals and companies alike.

We have created another wordpress theme that is currently in the WordPress Themes Directory called THAT Elite.

What is THAT Elite?

This theme has a clean design which supports widgets. This theme is also extremely simple to customize based on your needs. Through the admin, the theme logo, header banner (based on site section) and ads can all be customized.

What features does THAT Simple have?

This theme lets you customize your logo through the backend as well as some social networks as shown below.

Click here to see the “THAT Elite” the  FREE  WordPress theme live. Any comments about the theme would be greatly appreciated.

FREE WordPress Theme – THAT Simple

Posted on Oct 20, 2009 by Rich to General

THAT Agency has brought a couple of themes to the WordPress Theme Directory like “THAT golf  Theme“, “THAT Music Theme” and now “THAT Simple“.

Why THAT Simple?

THAT Simple was developed to promote clean lines and a sense of clarity. Its not bogged down with a bunch of features that most people might not use, instead we opted to create a clean, simple and sophisticated look. Minimalism is the fore-front of this theme, but its rich features will enable ease of use from hard core bloggers to those beginners looking for something easy they can understand.

What features does THAT Simple have?

Well for one, it does have the ability to support widgets, which is a really good thing to have. The theme is also extremely simple to customize based on your needs. Through the admin:

The theme logo

Simply paste the URL of your logo in the text area and save.

The header banners (based on site section)

Simple add the location of the images and the theme takes care of the rest in resizing the image.

Ads can all be customized.

This is great when you want to try to make a couple of dollars off of your blog. Simple copy the location of the image, and the the link location and that would be it.

Click here to see the “THAT Simple” the  FREE  WordPress theme live. Any comments about the theme would be greatly appreciated.

Google Barcode Logo invades the web

Posted on Oct 7, 2009 by Rich to General

This morning I sat at my desk and opened up my Firefox browser and what did I see? The usual Google Logo was really different. Today it was just a barcode. huh? yes, just a barcode. Intrigued by the logo it was soon realized that today marked the “birthday” of the barcode.

Google has always done some nifty things with they logo on what seems every major and insignificant day on the planet. Well this one seems to caught many peoples eye and curiosity. But what exactly is a barcode?

According to Wikipedia, “A barcode is an optical machine-readable representation of data. Originally, barcodes represented data in the widths (lines) and the spacings of parallel lines, and may be referred to as linear or 1D (1 dimensional) barcodes or symbologies. They also come in patterns of squares, dots, hexagons and other geometric patterns within images termed 2D (2 dimensional) matrix codes or symbologies.  Although 2D systems use symbols other than bars, they are generally referred to as barcodes as well.”

So does Google’s use of the Barcode as todays logo solidy the importance of the barcode in today’s society?

Maybe.  I would presume that 90% of the world has seen or used a barcode before. You can’t go anyone now without someone scanning one thing or another.   Let’s see how people react to today’s Google logo.  Now we wait for conspiracy theorists to add their spin as well as others that really couldn’t care less.

Here is a screenshot of Google’s barcode logo:

Google Barcode Logo Page

What’s your opinion on Google’s new barcode logo?

Here are some barcode’s I created using a cool bar codegenerator:

THAT Agency

IE 6