Even with CS 6 still fresh out of the box or in the clouds, there’s an explosion of tutorials showcasing Photoshop’s new features. If you’re like us, you’re probably itching to get your hands on it to try out. Where do you start? Photoshop is already a beast, and it’s about to get beast..ier.

Here’s a list of tutorials to get started on some of CS6 Photoshop’s features.

Timeline for Animated GIF

Brand New Crop Tool

Animation with Audio

Oil Painting Effect

APP Icon Tutorial

3D Tool

Content Aware Move Tool

Admin UI Tutorial

Hipster Type Treatment

Mega List of More Tutorials

This post was originally published in the Creative Services Blog

My feet are still soar and my legs are swollen. As a volunteer, I ran around the Austin Convention Center (ACC) for about 60 hours and consumed oodles of information. What do you do with it all? What does this mean for you? I wouldn’t say that the dust has settled yet because the party around the ACC has exploded on to the rest of Austin with the Music festival portion of SXSW.

Nonetheless, Here is one of the big ideas floating around Interactive.

Look beyond the screen.

Currently, our interaction with the Web and all its glorious content is this.

Screens are getting smaller on the mobile end and much much bigger with our computers. More freedom? Not really. We’re still tied to a screen and dependent on a plug or battery. Our next move is to use the big “screen” we’ve been neglecting all this time: reality.

Here are a couple of keywords that we should keep an eye on: geolocation and artificial intelligence*

Location! Location! Location!

Amber Case, founder of Geoloqi, discussed during her keynote that geolocation can change how we use our devices to interact with the world around us.

At the moment, for us casual users “location sharing” equates to a blinking blue dot on Google Maps. For some of us “check in” on Foursquare or Facebook and hope we don’t get our houses robbed. For most of us, we never understood the proposition of using this technology to tell everyone where we ate lunch.

Case believes that instead of using geolocating to broadcast information on where we are to anyone in our networks, we can use it to gather information in a manner that is timely and geographically relevant.

Imagine your phone telling you that your bus stop is coming up. Maybe someday you could be walking past a building in a new, exciting city, and your phone would let you know an interesting bit of information about it. Perhaps we can set our phones to turn the lights on when we approach the house and off when we leave.

We could be looking at a screen less to find one of many apps, so that we could just live our lives uninterrupted.

HAL, Watson, Siri…

Technological Singularity is near. This was the big take-away from Ray Kurzweil’s keynote. The creator of text-to-speech popularized this theory that greater-than-human intelligence will soon emerge through technological means.

Wait! There’s more…

This artificial intelligence will be able to improve on its own design. Thus, it will be able to improve in an increasingly rapid redesign cycle.

Ok. Now, I’m afraid.

Well, this doesn’t necessarily have to end in The Governator coming from the future to annihilate all humanity. This can be good for us. Seriously. IBM has demonstrated with Watson that computers can consume vast amounts of text, develop an understanding of language beyond basic syntax and vocabulary. The result is a machine that can process nearly all of its nuances and respond appropriately.

What does that mean for the everyday iPhone?

Answer: Siri.

“Siri is pretty good for a first generation application,” according to Kurzweil. Never shying away from making a bold prediction for our futures, he goes on to say that pretty soon we won’t have to ask our phones a question.

We could have a device that is out of the way. Maybe it’s on a belt or sewed into our clothes. Our screen may be glasses or contact lenses. When we’re struggling to find the name of a movie or an actress, the computer would put a unobtrusive hint within our view. It would be like a friendly assistant.

Sure there are plenty of questions from these ideas. There are still many technological barriers and ethical dilemma yet to be faced. Just as we adjusted to a new world connected at first through wifi and then seemingly ubiquitous mobile devices, our lives will need to adapt to these new technologies. However, if Amber Cases’s and Ray Kurzweil’s collective visions are accurate, maybe we would spend less time adjusting to life with our machines. Our machines would help us rediscover life with each other.

*Retitled Accelerated intelligence by Ray Kruzweil.

Reference:
1. Singularity: en.wikipedia.org/wiki/Technological_singularity
2. Geofencing: techland.time.com
3. SXSW: SXSW.com

This post was originally published on the Creative Services Blog on March 20, 2012

“Above the fold” is a design concept that originates from the old newspaper days. Remember that time? Well, back in those days editors would place important news stories and visually appealing photographs on the upper half of the front page. This would entice a perspective reader to buy the paper.

Fast forward to today, where web designers have adopted this idea, and now the most important content is within the first half of the page or 600 pixels. That’s great, but what are the bad points?

This concept has translated into squashing everything humanly possible into a certain number of pixels. As a consequence, the user is not encouraged to explore the rest of the page. If the user does try to look through the rest of the site, then he or she will be disappointed in finding content of lesser caliber.

Who decided on 600 pixels?

Around 2005 the majority of web users were viewing sites at a resolution of 1024 pixels x 768 pixels. So, designing for these screens became standard practice, and the fold was roughly 600 pixels down the page.

What has changed since 2005?

1. According to w3schools, since 2011 the majority of computer screens are now larger that 1024 x 768. That’s 85%!

2. We should also consider mobile and tablet browsing which offer content on significantly smaller screen resolutions. Factor in the option of viewing a site in portrait or landscape modes, then the possibility of pinpointing the fold is especially problematic.

The big picture is that designers have to create sites for screens that are getting larger and smaller at the same time. We can’t guarantee where the fold will be.

But Users are Lazy and Don’t Scroll.

Time for yet another history lesson. Way back in 1997, Jacob Nielsen posted guidelines for sites to avoid scrolling pages for this reason, but he later retracted it because users acclimated to that functionality. Maybe we’re not that lazy.

We still shouldn’t create endless pages that seem pointless to users.

I wouldn’t finish a book that’s boring, nor would I scroll down a page that doesn’t invite me to do so. Life Below 600px illustrates this point well. If the user has a reason to scroll down, then there’s a lot more space to display your content.

So, instead of cramming everything at the top, get the user to explore through the whole site for a more balanced experience.

Conclusion: Designing for the Whole Page

Considering visual hierarchy, the ‘fold’ isn’t an all or nothing rule. The top of the page can still be effective in constructing first impressions for the user. Designing for that space can be utilized for capturing the audience and leading them down the page.

Thinking about the user’s changing behaviors. How does the site look at different screen resolutions? What does the user need to see first when viewing the site on a mobile device or a larger monitor? Don’t be afraid to use the rest of the page. If the design and content are interesting enough, the they will scroll down to the bottom.

Resources:

Wikipedia-Above the fold

Life Below 600

Designing Above the Fold

Designing for the new fold

Browsers Displays

Scrolling Attention

Sketch Sheets

Grids and More Grids

Navigation

Media Queries

Responsive Images

HTML Templates

Responsive Testing

Resources
1. Issues with Responsive Web Design.
2. Extremely useful grids.
3. Responsive Web Design Basics.

This post was originally published in the Creative Services blog.

Communicate the Right Message

Here are a couple of questions to consider before adding an image to your site. Does it add or enhance the message you are trying to communicate? Does it distract or annoy the user?

One great er… bad example would be this image that was meant to memorialize a friend. I had to get over my gut churning reaction to read the description that explained how much this person meant to the writer. It is fair to say that most people would have clicked away from the page or site without reading it. A simple photo would have made a better impression.

Using Faces

What about faces? People are drawn to faces. We are human. That is what we are programmed to do. The question is are your users’ eyes being attracted away the call to action?
Think about line of site. Where do your eyes go first and where are they being led? This image is leading me where this woman is looking. Now, I am off the page.
This image does not lead me anywhere which is still not near the call to action button on the left.
This one is just right.

Add Information

You do not always have to use people. Your images or graphics can add information and make it easier for users to get to the point.

Be Unique

Whether it is this image or the thousands that feature the same exact headless handshake, it is so easy to purchase these images that do little to help your site stand out. Ideally, you want to take your own professional images that showcase your business and organization. The next option would be to buy the rights to an image to keep it from proliferating across the Web. Otherwise avoid using super popular images.

Match your Color Scheme

Does it match your color scheme? Are you introducing colors that clash with the rest of the site. Any new colors tend to distract the users away from where you want them to click or what you need them to read.

How can you get around using an image that does not match your color scheme. If you do not have a designer, you can try Pixlr.com. It is a powerful Web app that allows you to do simple color adjustments and resizing. Be careful. With great power at your disposal, comes great responsibility.

Size it Correctly

So, you want an image to fit in this space on your site. Piece of cake, right? Not always. The space measured in this example is 980 px wide by 310 px high. No problem. Just get a bigger image, right? If you think about the dimensions, then a wider image would leave a lot of the height cut out of that area.

Often times an image like the one above requires an awful lot of Photoshop to get it to work in that space.

Images can be tricky, but if done right you effectively communicate to your users the ‘who’ and ‘what’ of your site.

Resources

Using faces to help get your message across.
Measure it – Firefox plugin.
Editing Images.

This post was originally published on the Creative Services Blog.

• Create Funky Parallax Backgrounds
• Build One Page Parallax Sites

This article was originally published on the Creative Services Blog

Content is king and typography is 95% of design. These are two statements that designers can discuss night and day. Whether or not typography constitutes the vast majority of a design, rock star designers take it into consideration. Ignoring typography would mean the difference between something mediocre and something solid.

In the follow paragraphs, I am going to outline the basic terminology of typography and how you can use it to make your content more accessible to your users.

Type Terminology

What’s the difference between Typface and Font? You may have heard your designer use these terms, and maybe you may have thought, “They’re probably the same, right?” Not really.

Typeface is a collection of letterforms that have been designed to go together. This often happens when a design creates a logo or poster with an original letterform.

Fonts are created when the typeface is carried through for the rest of the characters in the alphabet, numerals, punctuation and icons.

Wait, it gets better. Type Style refers to a modified versions of the font such as bold or italics. Grouping all of the type styles together with the unmodified font makes it a Type Family.

What’s it Communicating

Actually, I’ve seen both bold and italics used to emphasize something in the content. Technically, italics should be used more in accordance to the rules of the grammar taught to us in school. Now, that you’ve shaken off that disturbing flash back, think of italics as a tool for writing titles of books, foreign words, and newly defined terms. There’s a bigger list, and you can check out this site that combines grammar and Web design.

Tips

1. Limit yourself to 3 fonts on a site. You can make contrasting fonts work for you to draw the user’s eye to titles and other points of interests.

2. Consider Legibility and Readability. Legibility refers to whether or not an individual character is recognizable. Some typefaces may look great, but won’t work well when applied to a different set of characters for a logo, title or paragraph. Don’t kill yourself trying to be original. Just be good.

The same is true when applying a font to a title or the rest of the copy. While the ease of reading a short title with a certain font may not be an issue, readability may become a problem when the same font is used for a larger volume of content.

3. Keep it simple… smarty. A little can go a long way. If you’re looking to add some extra energy and you want to look beyond conventional fonts, you’ll probably wander into Display fonts. They’re funky and there’s a ton. Use is sparingly and call it a day.

Let your conventional fonts do the heavy lifting and the display fonts as accents.

Resources:
Basic Rules of Typography
Typography: Why You Should Care?
Further Reading”
Tips on How to Improve your Typography
Typography Deconstructed
Inspiration
I Love Typography

This article was originally published on the Creative Services Blog

When I was a wee, little designer, my favorite color was lime green. In addition to the the lime green shirt that I wore everywhere, I had a packet of green pens and crayons that I used to draw and re-color the world. Was it cute? Maybe. Was it confusing for everyone else trying to understand my interpretation of a green squirrel climbing over a green house with the backdrop of a green sky? Yes.

Color Emotion Basics

Colors do elicit emotional responses. As I developed as a designer, I began to better grasp what color means to users. I learned to use color more deliberately and took the subjectivity out of the decision making. Try to keep these questions in mind when choosing a color palette. What message is the site supposed to convey and who is the site targeting?

Warm colors are often used to bring out fuzzy and happy emotions from users. This is evident with a lot of eating establishments that want their customers to associate those feelings with their signature dishes.

Here’ the logo for a local Austin, TX pizza joint. Get used to this color scheme. It’s nearly everywhere you can park yourself for a bite.

Cooler hues are commonly utilized to achieve a clean-cut look. Think trust, corporate, and establishment. Financial institutions like USAA want their clients to feel comfortable with investing money with them. It would be risky to use the warmer colors that might express conflicting messages.

Color by Association (the Short List)*

Red: fire, passion, emergency and anger.
Orange: joy and happiness.
Green: nature and harmony.
Blue: peace, calm, and trust.
Purple: sophistication and creativity

*This list can of course be longer. It is important to note that these associations are not set in stone. Plus, there are more detailed studies of color the complexity of psychological responses For further reading, please check out “Psychology of Colors”.

Tips for Using Color with your Content

Now that we have gotten this unpleasantness out of the way, let’s discuss how to use color to enhance your site’s scannability and readability.

1. Grabbing the User’s Attention

Think of color as accents that should be used sparingly. Considering your users’ time, what are the most important things you want their eyes to see first? Headers and links.

As stated above, red might not be the best answer for every site, but here it is used skillfully to draw the users’ eye to the Header first and then to the links below. To avoid diffusing its effectiveness, most of the color on the content should be limited here.

2. Contrast verses Readability

You can use color for the rest of the content, but it is very easy to overuse it and lead to readability issues.

“Avoid the bruise,” are the words my Creative Director stated to me my first week on the job. Sure it addresses the obvious issue here of blue on blue, but it it also means to avoid low contrast combinations.

I know what you are thinking. This has a high level of contrast, but why do you get a headache trying to read it? There is some level of personal preference, but readability test have shown that text that appears to project light (as seen in the example above) creates an illusion of movement. As a result, making it harder to read than black text on a white background. In the case of this blog, we are using a dark gray text on a white background.

Resources

Color can be a powerful tool for your site. Use it carefully and it will work for you, not against you. For some further reading on color and design, check out the follow resources.

“Psychology of Colors” [inventcreativity.com]
“A Look into Color Theory and Web Design” [sixrevisions.com]
“Essential Color Checklist for Web Design” [sitepoint.com]
“Best Colors for a Website’s Content” [newbiewebsitedesign.

This article was originally published on the Creative Services Blog

This Friday we focus on sharing is caring. That’s something the Creative Services team likes to promote to keep the ideas and resources flowing. Here’s a little list sites I gathered from conversations around the Wii that offers a ton of great freebies for Designers and Front-End Developers. You can never collect enough free stuff.

FOR YOUR DESIGN TOOLBOX

1. Brusheezy. Need textures, shapes or just something unique to add that special something to your design? Brusheezy offers an endless source of Photoshop brushes.

2. FreePSD. Looking for a site design or UI layout to start your project? Here’s a great place to get ideas for your blank 960 canvas or to find that missing piece to complete your masterpiece.

3. PSD Tuts + Just a note to the public, PSD Tuts + doesn’t always offer free PSDs to the non-members, but offers a ton of ‘how-tos’ that can be even more valuable.

4. Vector Tut’s + The same goes for Vector Tut’s +. However, I was able to find this awesome pack of free icons to add to my arsenal.

5. Dafonts and Google Web Fonts
Yeah I squeezed two into one. Dafonts is for the project that calls for a unique font that will eventually end up on a graphic on a site. Google Web Fonts are for the designer that wants/needs to branch out of the handful of fonts available on browsers.

FOR YOUR FRONT-END DEVELOPMENT STUFF

1. Aptana Studio – Develop and test your entire web application using a single environment. With support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python. Works on Windows and OSX. What more could you want?

2. CSS Property Index
Clean and well organized. Just the way CSS should be. Search properties in alphabetical order or by category.

3. Lettering Js Web type is becoming uber popular. This jQuery plugin offers “down-to-the-letter” control.

4. Premium WordPress themes After this year’s SXSW, I rediscovered and fell in love with WordPress. The big sell is its functionality. As a designer, it has become a ton easier to cut up a custom design and create functional templates. However, if you’re looking for great browser-tested designs to start off with, this is where to start looking.

5. HTML 5 Demos What is HTML5 and what is it not? To help you get a handle on it all and see what is possible with this new technology, This offers a great list of examples.

This article was originally published on the Creative Services Blog