Archive for August, 2010

Digital Painting in Photoshop CS5 – Part 2

Thursday, August 26th, 2010

In today’s post, I want to show you the variety of new natural brushes in Photoshop CS5. We will stick with the default brushes included in the software, although there are many more available for download online.

First, these are the new natural brushes in CS5:

They can be found in the brushes pulldown menu in the options bar (while using a brush-based tool) or in the Brushes panel.

These are the different strokes created with the brushes. These were created using a mouse so they do not have variable stroke pressure for the demonstration:

However, using a Wacom tablet and stylus, you can create a great, natural effect (especially if you use one with the new 6-D controls). When using a stylus, it can be helpful to use the Brush Preview (found under View>Show>Brush Preview).

Using the Brush panel can also yield fun results just by adjusting a few of the brush settings.

Here is an example of the various results by adjusting the Bristle Qualities:

Even using the default settings will give you a variety of results. If you do choose to adjust the Bristle settings, be sure to save the brush, or it will reset to default when you select another style brush. You can save your new brush by clicking the “New Brush” icon on the bottom right of the panel.

In the next session we are going to put these brushes to work, painting a simple shape and experimenting with various techniques.

HTML5 Overview – 5 Dollar Friday at C2

Friday, August 20th, 2010

Another Friday, another five bucks.

We had great turnout for our discussion of HTML5 on Friday afternoon, Thanks to everyone who attended.

As promised, here is a list of the links visited during the demo of HTML5 and related technologies.

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 28 Tips

HTML5 Slideshow

CSS3 Generator

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

Guide to 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

Digital Painting in Photoshop CS5 – Part 1

Tuesday, August 17th, 2010

This week I am starting a new series of how to create a digital painting in Photoshop CS5.

Today in Part 1 I will show you the different Mixer Brush settings. To choose a proper setting, you must first understand the different options at your disposal, starting with the Blending Brush Combinations.

This is the Mixer Brush, found in the tool bar, under the normal Brush Tool:

Once selected, these are your options:

1. Brush Type   2. Brushes Panel   3. Current “Load” (Swatch)   4. Load the brush after each stroke   5. Clean the brush after each stroke

6. Blending Brush Combinations – (This is what we will showcase today.)

7. Wet settings   8. Load amount   9. Mix ratio   10. Flow (think opacity)

11. Airbrush Option – this causes the brush to react like a spray can with poor results.  (I never use this option.)

12. Sample All Layers.

Blending Brush Combinations gives you a preset group of “useful” wet, load and mix combinations. Each one has a different reaction to your image and can give you great results once you are familiar with their settings.

The Blending Brush Combinations go from very little mixing to heavy mixing in order, starting with “Dry”.  Here is my starting image:

I have chosen the “Round Point Stiff” Brush from the Brush Type menu (1).

Whenever painting from a photograph, I find it helpful to lock the photo layer and paint on a new blank layer using the Sample All Layers option (12) using the clean/load brush after each brush stroke  (4&5). I sampled an average skin color from the hand. Here are the results from each blending combination:

Next week, we will take a look at the new Natural Brushes in Photoshop CS5 and the options available for each. For now, try using the Mixer Brush with different Blending Combinations and see what results you can get using just one brush.

Have fun!

This is How a Conference App Should Be

Monday, August 2nd, 2010

Developers and mobile designers take note! Normally I post tips, tricks and product information on the blog, but today I thought I would switch it up to talk about a great mobile app.

James Conway and I are attending Photoshop World 2010 in Las Vegas at the end of this month. Normally to figure out the schedule of events you would review the website, literature and try to coordinate classes. However, Photoshop World has taken this to the next level with a very cool iPhone/iPad app from Shawn Welch (@shawnwelch). This is how a conference should use mobile devices. I dare say this is the Swiss Army Knife of conference apps.

First you can search for events and classes by date/time, instructor or course track. But that’s just the start – you can also search for exhibitors and other events throughout the conference. It live updates for room locations, schedules, and information to keep you completely up-to-date with information.  It even has a built in Twitter feed complete with #psw searches for Twitter users and news feeds from Photoshop World. You can also use Bump technology to share your schedule and information with other attendees.

Bundle all that with maps for the hotel and convention center and you have one very useful tool for this conference. Hopefully mobile developers, designers and other conference organizers will take note of this very clean design and usability to bring similar apps to other events.

 

Adobe Quark logo