Archive for July, 2010

New! Photoshop Mini-Course Added!

Thursday, July 29th, 2010

Have you taken our Adobe Photoshop Course and are now looking to become an advanced user? Are you a photographer who wants your photos to pop? Short on time and want to maximize your Photoshop potential? Then we have the class for you!

Introducing C2′s new Adobe Photoshop Retouching Techniques mini-course! This course is designed for Photoshop users to advance their skill set with professional retouching techniques and effects. Not only will you be learning how to clean up those lackluster images, but we will also give you the tools you need to create works of art.

Our Photoshop mini-course is four hours and covers the following topics:

• Workflow and Bridge organization

• Importing and color correction – including Camera Raw adjustments

• Basic, intermediate and advanced portrait retouching techniques

• Advanced selection techniques; complex masks

• Lighting adjustment tricks

• Retouching landscapes

• Photomerge vs. manual stitching

• High Dynamic Range effects

• Filters and Effects

• Preparing for both print and web

and much more!

To find out more about this course or to register today click HERE or contact Kate Barrie, Training Specialist at 414-431-0062. Classes are available in both Madison and Milwaukee locations. Act now!

Why Designers Should Be Using Adobe Fireworks

Monday, July 26th, 2010

After presenting at the Designer/Developer Workflow Conference and seeing recent discussions on the Twittersphere, I started to realize that a lot of designers do not use Adobe Fireworks when creating comps for the web. In fact, a lot of posts would lead you to believe that Fireworks is useless, which is not an accurate perception.

Currently, many designers use Adobe Photoshop to create a webpage design and then pass it off to a developer. The developer will dissect the file, add in some code behind the scenes and output the final comp for the client. In this current workflow, it increases the project expense every time a developer has to touch this file just for comping/proposal purposes. But what if a designer could very easily add interactivity to the comp? Perhaps you need to mock up an entire site and not just a splash page? Well then this is where Fireworks steps in.

Fireworks allows you, the designer, to import layered .psd files (including live text) AND native vector files from Illustrator. You can then use those assets to flush out an entire website, not just a page. It enables you to create animations, rollovers, buttons and links for navigation and more with very easy-to-understand menus and tools. You can then add additional pages to your site using a Master Page (sound familiar?), keeping design elements and navigation consistent throughout.

The argument against Fireworks is “Photoshop has slicing and a Save for Web command, so I will just use that.” My rebuttal is yes, you can use Photoshop to create a flat page with slices with html links and some animation. Now create an entire site to show a client. You would have to create a different Photoshop file or worse yet, a single bloated file with multiple layer comps. Then, try to create a rollover or image swap without using Dreamweaver. Finally, assume that your client comes back with changes to the content or interactive elements of the site (they never do that, right?). Think of how you would have to edit either multiple files or an html file from Dreamweaver.

Editing elements in Fireworks is easy. You can make a change on either the Master Page and it propagates to the rest of the site, or manually choose to distribute to all pages on the site.

In the end, Fireworks is another way Adobe Creative Suite allows designers to take their flat, static designs and push them further into the next phase. Fireworks is something that should be in every designer’s arsenal of skills.

HTML5 Resources

Tuesday, July 20th, 2010

I was lucky enough to be invited to lead a discussion of HTML5 with the Madison Web Design & Dev Meetup group Monday night. Instead of the standard Keynote/PowerPoint presentation, I decided that because the topic was so intimately web related I’d go with a live demo of actual web pages, projects and resources related to the new features of the HTML5 language, focusing, where possible, on features we can use right now. The “live demo” nature gave the group plenty of opportunities ask questions, make comments and offer up their experiences with HTML5.

The Madison Web Design & Dev Meetup is a great group of web professionals of all skill levels and a fantastic resource for the Madison web community. If you’re very experienced you’ll find peers you can discuss the most advanced development topics with and anyone just dipping their toes into web design can get real world answers they’ll understand from working professionals in the field.

You can find all their contact info here:

http://www.meetup.com/madisonwebmeetup/

If you’re interested in learning more about HTML5 (and CSS3 and Javascript) here is a list of the sites visited/discussed during my presentation.

A very short history of the web – from basic text to the equivalent of the printed page

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

http://web.archive.org/web/19961017235908/http://www2.yahoo.com/

http://web.archive.org/web/19961225070933/http:/www.bestbuy.com/

http://www.csszengarden.com/?cssfile=/206/206.css&page=0

Examples of HTML5, CSS3 and Javascript – applications in the browser window

http://www.apple.com/html5/

http://radikalfx.com/files/collage/demo.html

http://www.kesiev.com/akihabara/

http://htmlfive.appspot.com/static/gifter.html

http://mrdoob.com/projects/harmony/

http://html5demos.com/

HTML5 references and browser capability resources

http://diveintohtml5.org/

http://www.w3schools.com/html5/html5_reference.asp

http://caniuse.com/

http://beta.html5test.com/

http://www.findmebyip.com/

http://www.findmebyip.com/litmus/

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

http://html5demos.com/

HTML5 & CSS3 feature detection and Javascript browser enhancement

http://www.modernizr.com/

http://diveintohtml5.org/detect.html

http://remysharp.com/2009/01/07/html5-enabling-script/

http://css3please.com/

http://www.fontsquirrel.com/fontface/generator

Exercise showing the new HTML5 semantic tags in use

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

New HTML5 Attributes

http://www.w3schools.com/html5/html5_ref_standardattributes.asp

New HTML5 Events

http://www.w3schools.com/html5/html5_ref_eventattributes.asp

New HTML5 Form Elements, Types and Attributes
(Note: Only the Opera browser currently has a noticeable amount of support for these new features)

http://people.opera.com/brucel/demo/html5-forms-demo.html

http://www.w3schools.com/html5/html5_form_input_types.asp

http://www.w3schools.com/html5/html5_form_elements.asp

http://www.w3schools.com/html5/html5_form_attributes.asp

Geolocation
(Note: these demos are only useable on mobile devices for the most part)

http://www.html5rocks.com/tutorials/geolocation/trip_meter/

http://www.drdobbs.com/web-development/225600440

http://developer.practicalecommerce.com/articles/2066-An-Introduction-to-HTML5-Geolocation

Local Storage

http://www.html5rocks.com/tutorials/webdatabase/todo/

Session Storage

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html

Web Workers

http://html5demos.com/worker

http://www.drdobbs.com/web-development/225701170

HTML5 Audio Tag

http://code.coneybeare.net/getting-html5-audio-tag-and-flash-fallback-to

http://www.html5rocks.com/tutorials/audio/quick/

http://html5doctor.com/native-audio-in-the-browser/

HTML5 Video Tag

http://jilion.com/sublime/video

http://camendesign.com/code/video_for_everybody

http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback

HTML5 Canvas Tag

http://www.kesiev.com/akihabara/

http://www.canvasdemos.com/

http://html5games.com/

https://developer.mozilla.org/en/canvas_tutorial

http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/

http://www.rgraph.net/

http://www.html5rocks.com/

New HTML5 Tags

article
aside
audio
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
input*
keygen
mark
meter
nav
output
progress
rp
rt
ruby
section
source
summary
time
video

*(input itself is not new but there are so many new input types and attributes that I want to draw attention to those)

Existing tags that have been redefined in HTML5 (some subtly)

!DOCTYPE – simplified, shortened
a – used for hyperlinks ONLY, name is no longer valid attribute, must have href.
address – new rule when address is in article tag
b – stylistically offset
em – stress emphasis
hr – paragraph-level thematic break
i – alternate voice
legend – legend can now be used with figure tag and details tag in addition to fieldset tag
menu – list form controls, no longer deprecated
small – side comments and small print
strong – strong importance

Removed Tags

acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
s
strike
tt
u
xmp

Retouched Image vs. Photo Illustration

Thursday, July 8th, 2010

“When is this considered a retouched photograph and when have you gone too far?” The debate has been around for decades, popping into the mainstream media from time-to-time, but never really having a final decision. The first instance I can remember in recent times was the O.J. Simpson covers from Newsweek and Time.

Time was blasted for being irresponsible with their portrayal and lack of disclosure using the enhanced image of O.J.’s mug shot. The debate started up with people citing free speech and artistic license and Photoshop was at the heart of it all.

It has become common to refer to something as being “Photoshopped” (a term that Adobe dislikes, by the way) when referring to retouching. But when do you take it too far? How do you differentiate between reality and artistry?

Here’s my take on the whole discussion– basic retouching (wrinkles, teeth whitening, scratches, smears, etc.) is fine as long as it still represents a realistic view of the subject matter. However, once you start using Liquify to lose weight, blurring techniques to reduce the age of someone or something else drastic, then you have to ask yourself, “Is this still a realistic representation of my subject?” If not, then you have created a photo illustration. Which is fine as long as you give credit where credit is due, every time.

There is no way to regulate this, but if you give the appropriate credit it’s a step in the right direction. I would have no issue seeing a photography credit followed by a retouching credit in a publication or website. If it was an illustration or fictional work, it would give credit to the artist, just as if it were created traditionally.

In the end, you can’t always believe what you see today, but checking the credits can help.

Converting Illustrator Colors to Pantone Colors

Thursday, July 1st, 2010

Have you ever wondered how to find out what the closest pantone color is for your existing Illustrator artwork? How many times have you tried to convert your CMYK color to Illustrator only to find that the swatch options does not include this?

Well, here is a neat trick to convert your existing swatches (and artwork) to Pantone.

First, create a document with shapes filled with default swatches.

Next, go to your swatches panel and delete ALL your swatches.

Note: This step is great for organizing, but is not critical.  If you have swatches you need to keep, you can just skip to the next step, but be aware that you will end up with duplicate swatches.

Then, select the objects you wish to convert (in this case all) and click the “New Color Group” button located at the bottom of the swatches panel. DO NOT deselect your artwork. Keep it selected throughout this process. It saves you a step later on.

Name your group, and be sure to check “Convert Process to Global”. I prefer not to have my tints end up as separate swatches, but you can include them as well if you so choose. Click OK and you will now have a new color group with your existing colors.

Now go to your Color Guide Panel or the Options bar and click the “Edit or Apply Colors” button (the color wheel).

This will take you into the “Assign” section of the Edit or Apply Colors dialog box.

Here are the final steps to complete the conversion:

In the “Color Groups” panel on the right, click your newly created Color Group.

Next, click the “Color Reduction Options” button.

This will launch a new dialog box “Recolor Options” (I know it’s a different name than the button).

Go to the “Limit to Library” pull down and choose your Pantone Library and hit OK.

You have now mapped Pantone colors to your color group. Click OK and go back to your document.

Looking at your Swatches panel, you will notice that all of your swatches in the panel have been converted to PMS colors and your artwork has automatically converted.

 

Adobe Quark logo