Photoshop CS5: An Introduction to Materials

Photoshop Extended CS3 introduced 3D and marked a milestone in the application’s history.  Photoshop CS5 moves the evolution of 3D forward with many features including a better 3D environment, an easier way to create and apply materials and the highly anticipated Repoussé; which adds a new dimension to Photoshop’s 3D abilities.

I was fortunate enough to work with Adobe to create the materials for Photoshop CS5.  Thirty-six of the materials shipped with CS5 and a collection of over a hundred more are available to download at Photoshop.com.

In Photoshop CS5 Extended, we have a great collection of materials created by Kevin Bomberry of Able Pear Software. The properties are carefully determined resulting in visually realistic and beautifully rendered materials.

--Zorana Gee

Over the course of the next few weeks I will go over how some of these materials were created including glass, metal, organic, wood, stones and tiles.  I will present methods I use and the reasons behind them that will allow you to create an unlimited amount of materials on your own.


BACKGROUND PATTERN
I’d like to introduce you to the first element I created for the task of developing and creating the materials: the Material Test Background.

As you can see the Material Test Background is a 10 x 10 checkerboard of black and white with an ID in each of the 100 squares.  I labeled the columns 1 thru 0 (zero being ten), and the rows, A thru J.

Each of the 10 rows corresponds to a color or greyscale value; red, green, blue, yellow, cyan, magenta and grey at 20%, 40%, 60% and 80%.  This allowed me to see the properties of the material on as it is rendered on the 3D object.


The Material Test Background also serves a dual purpose as it can be applied to an object to view the UV Map; the way the material wraps itself around the 3D object.


STAGE/SCENE
The second thing I had created were default scene consisting of the background image, a 3D object and three lights: a key or main light, a fill light and a background light.  This provides a consistent scene where I can develop the materials with constant results.

You can create a scene using a variety of 3D objects directly in Photoshop with either the 3D > New Shape From Layer or 3D > New Mesh From Greyscale menu items.


Two things to note are that 32-bit images work best and where possible I try to keep at least one dimension of the document to a power of 2 (512, 1024, 2048, etc…),

The document info gets scaled during the conversion to prevent huge poly count, which can cause chunky results. Documents with dimensions less than 512 pixels get scaled in half. Documents with dimensions greater than 512 pixels get scaled to 512 pixels.

VECTOR VS BITMAP
At this point I would like to talk about the difference between bitmap and vector information and how it affects the material with regard to resolution.  This is an age old argument on what to use when creating content: bitmap data, like when using one of the painting or brush tools directly on a layer of the canvas, or vector elements like those of the shape or pen tool and paths.

Bitmap images are made up of data in the form of red, green, blue values for each pixel of the image.  Vectors are made of points, lines and bezier paths.  If you enlarge a bitmap it becomes pixelated as it creates the new colors for the new pixels; reduce an image and you have to get rid of pixels of color data.  Vectors scale up and down without degradation to the shape itself.

If you apply a low resolution bitmap to a texture channel will find that in the rendering is blocky and that you need to use a high resolution image to get good results.  As a result I tried to create materials that used vector information.

Additional links to articles on Vector vs. Bitmap (raster) images:
http://www.photoshopsupport.com/shoptalk/vectors-and-bitmaps.html
http://www.prepressure.com/library/file-formats/bitmap-versus-vector
http://www.sketchpad.net/readme.htm

AN INTRODUCTION TO MATERIALS
In addition to using vectors I used Smart Objects and Smart Filters making full use of Photoshop’s non-destructive and advanced features.  This allowed for dynamic and easily editable materials that Photoshop users can tweak and customize to make them their own.

I won’t go into the details of the 3D tools as they are covered in Help and by an excellent upcoming book 3D in Photoshop: The Ultimate Guide for Creative Professionals from Zorana Gee and others on the Photoshop team; which I will come back to at the end of this article.  I will however talk about the properties of the materials that we will be working with in the examples as we move through this series of tutorials.

CREATING A TEST SCENE
For our introductory example you can use one of the scene templates above or easily follow these simple steps:

1.)  Download the Material Text Background image.
(click for full-size image)

2.)  Open the Material Text Background in Photoshop

3.)  Create a New Layer

4.)  Select the 3D > New Shape From Layer menu item and select Sphere from the fly out menu.


Done.  The empty layer is converted to the material of the Shape you just created.


In the simple act of opening an image and then creating a layer to use for the material of a generated 3D object you have successfully created a 3D scene.  This technique can be used with any other photo or image.



INSPECTING A DEFAULT MATERIAL
We are going to look at the default material Denim,using the scene we just created.  Open the 3D window by selecting Window > 3D from the menu bar.


Looking at the 3D window you’ll see that there is a tree of objects and materials starting at the root (Scene).  From the root the first node you encounter is Sphere and it contains Sphere_Material.  Click on Sphere_Material to selected it.


Beneath the tree is the (Property Editor).  When a material is selected the materials properties are visible as well as a Material (Preset) Browser.  Click on the icon in the Material Browser and a drop down list of default materials presents itself.  Select Denim and the denim material will be applied to the Sphere_Material.


The two channels we want to look at are Diffuse and Bump.  You will notice that to the right side of the property value box is a “texture image” icon.  The icons are the folder icon as no texture is loaded for those channel’s properties.  Click on the Diffuse texture image icon and select Open Texture... from the fly out menu.


The (Photoshop) texture is loaded into a new window and we can inspect and tweak this texture.  Look at the Layers of the texture and you’ll see two: Layer 1 and Gradient Map 1.

In this example Layer 1 is the pattern of the weave of the cotton as that is created using a Smart Filter.  It is a greyscale image.  Gradient Map 1 is simply a Gradient Map Adjustment Layer that we use to color the greyscale image create in Layer 1.  If you toggle the visibility of the adjustment layer you will see the greyscale image.



Under Layer 1 you will see the Smart Filter layer and it’s applied filters; Filter Gallery in this case.  Double clicking on Filter Gallery allows us to edit the filter’s properties.


This Filter Gallery is composed of three layers of filters stacked one on top of each other acting a building blocks to the final rendered image.  The layers are from bottom to top, Halftone Pattern, Halftone Pattern and Sumi-e.  Clicking on the layer visibility icon shows us how each filter layer works independently and together to create the final image.

Clicking on one of the filter layer shows us its options and values.  Select the middle Halftone Pattern filter layer.  We can change any of these to affect the filter layer and change the final texture.  Change the halftone type from Line to Dot.


As we edit the texture and save it the results will be applied to the Sphere_Material’s Diffuse texture channel in our original created scene and rendered giving use instant feedback of the material on the object in (near) real-time.


CONCLUSION
The ease of which you can create materials for your 3D objects in just a few simple steps extends the power and capabilities of 3D in Photoshop Extended CS5.  We’ve barely scratched the surface of materials in Photoshop CS5 and as we progress further into the series you will find that the Photoshop team has put in considerable thought into making complex functions and features easy to use.

3D in Photoshop: The Ultimate Guide for Creative Professionals
As I had mentioned in my introduction Zorana Gee and a few other members of the Photoshop team put together an in-depth and comprehensive book focusing on the remarkable capability of Photoshop’s 3D tools.

COMING UP NEXT...
In my next installment Photoshop CS5: Materials series we will explore another default material, explore the filters use to create textures and materials and begin creating our first material from scratch.

Have you upgraded to Photoshop CS5 or downloaded the trial?  Do you feel that 3D is an advantageous feature for Photoshop CS5?  Do you use 3D in your current workflow? Or do you have a material that you would like us to show the creation process of?  Comment below and let us know.

iPad Friday: June 25, 2010

See Also
Last week's iPad Friday

Hello and happy Friday.  Today's iPad wallpapers were are inspired by reflections.  Enjoy.

(click on image for full-size wallpaper)

iPhone Friday: June 25, 2010

See Also
Last week's iPhone Friday

Hello and happy Friday.  Today's iPhone wallpapers are getting a small refresh, or rather large refresh.  Starting today all iPhone and iPod touch wallpapers will be 640 x 960 to accommodate the resolution of the new iPhone 4.

The pair of wallpapers today are inspired by reflections.  Enjoy.

(click on image for full-size wallpaper)

You've got your iPhone 4, now what?

So you waited in line at your local Apple Store and now you're the proud owner of a shiny new black iPhone 4! You synced it with iTunes and marveled at how fast Plants vs Zombies loads. Now what else can you do with it?

Check out iOS 4 walkthrough for a complete rundown of what's new and cool in iOS 4, the new version of the iPhone operating system that ships by default on your iPhone 4. The folks at TiPb also have a detailed overview of the iPhone 4 hardware: iPhone 4 preview. Check it out!

original link

Inside Apple's new Xcode 4 development tool

Apple gave developers a peek at the forthcoming Xcode 4 IDE, and AppleInsider has the scoop on the changes and new features. Some of the highlights:

• A single window IDE
• Interface Builder is integrated directly into Xcode
• Improved version control integration
• The new LLDB debugger

Read the full article for all the details.

original link

iPad Friday: June 18, 2010

See Also
Last week's iPad Friday

Hello and Happy Friday!  Today's iPad wallpapers are a continuation of last weeks collection.  Enjoy.

(click image for full size wallpaper)

iPhone Friday: June 18, 2010

See Also
Last week's iPhone Friday

Hello and Happy Friday!  Today's iPhone wallpapers are a continuation of last weeks collection.  Enjoy.

(click image for full size wallpaper)

All the sizes of iOS app icons

A great post by Neven Mrgan showing the rapidly growing collection of icon artwork needed to support apps or iPhone, iPad, iTunes, and now the high res display of the iPhone 4. Check it out!

original link

AT&T, Apple Struggle to Handle iPhone Orders

Did you have trouble reserving or pre-ording your new iPhone 4? Well, you're not alone. Blame it on AT&T. Evidently their website melted under the punishing load of gadget loving geeks eager to get their hands on Apple's latest and greatest creation.  The Wall Street Journal reports:

AT&T said the day was the busiest for online sales in the company's history, but didn't say how many units were ordered. All iPhone 4s that could be preordered for delivery on June 24 sold out, the company said. Customers who order now will get devices on June 25 or later. There will also be iPhone 4s available in stores on June 24, AT&T said.

Though I was disappointed that only the black model is available to reserve or pre-order (my current iPhone 3G is white), I'm not too fussy about the color, so black it is. But try though I might, it wasn't able to complete the reservation process until late this afternoon. I even downloaded the new Apple Store app to give that a try (unsuccessfully).

I finally did get through the process, with Apple's website telling me "Your reservation is confirmed", though I still haven't received the confirmation email that the page promised.  If you had problems earlier today, I recommend you try again.

original link

Objective-C Tuesdays: C strings

See Also
Looping in Objective-C
Variables in Objective-C
Strings in Objective-C

Welcome to the start of a new topic: strings. We'll cover both plain old C strings as well as the much nicer NSStrings of Objective-C (and their CFString siblings). Today we start at the beginning with C strings.

C strings are also called null (or nul) terminated strings, zero terminated strings or sometimes z-strings. A C string is simply a block of memory where bytes represent characters. The last byte in the block contains a zero value (the nul character) to mark the end of the string.

Here is the memory layout of the string "iPhone" in ASCII encoding. The string starts at memory address 48:

Address	48	49	50	51	52	53	54
Value	105	80	104	111	110	101	0
Character	'i'	'P'	'h'	'o'	'n'	'e'	'\0'

Notice that "iPhone" is six characters long but uses seven bytes of memory, since it has a zero value after the last character to mark the end of the string. Functions that work with C strings depend on the zero terminator being there to know how long the string is. Forgetting to write a zero at the end, or overwriting it by accident is a common programming error when working with C strings. This is a type of buffer overrun error that can lead to security breaches and program crashes.

Since C strings are just memory blocks, you declare C string variables as pointers to type char for mutable C strings or type const char or char const for constant (immutable) C strings. (The const has the same meaning before or directly after the char.)

// example C string variable declarations
char *mutable_c_string;
const char *immutable_c_string1;
char const *immutable_c_string2;

Since C string literals are immutable, variables that point to literals should be declared const, or the compiler will complain:

char const *string1 = "foobar"; // okay
char *string2 = "barfoo";       // WARNING! should be const

When you need some temporary storage to receive a C string, it's common to declare a char array.

char buffer[81];
sprintf(buffer, "The answer is %d\n", 42);

Here we use the sprintf() function to write formatted data to a string that's placed in buffer.

You may also sometimes see a C string declared like this:

char const name[] = "foo";

This is almost the same as:

char const *name = "foo";

There's a subtle and mostly unimportant difference between these two declarations. The first one declares an array, the second one declares a pointer to an array. We'll look at the difference between these two in the future when we cover arrays.

Character Encodings
C doesn't mandate any specific character encoding for strings. C strings frequently contain single byte encodings like ASCII or ISO-8859-1 (Latin-1). In a single byte encoding, each byte in the C string corresponds to a character, and the encoding defines 256 characters (or fewer -- some byte values may not be valid characters). C strings can also contain multibyte encodings such as UTF-8 or Shift JIS where some characters are represented by two or more bytes. It's up to the application programmer to keep track of character encoding issues when using C strings.

Most encodings used today are ASCII compatible, meaning that character values from zero to 127 represent the same characters defined by the ASCII encoding. If your program only ever processes ASCII text, you're in luck: you can ignore most encoding issues (at least until some pesky user decides to enter "San José" or "Björk"). In the real world, people use many more characters than the measly 128 in the ASCII set, so it's necessary to pay a little attention to character encodings when working with C strings. When you have mismatched encodings, you get data corruption and unhappy users.

For example, here is the word "Γεεκ" ("Geek" in Greek letters) at memory address 64 using the ISO-8859-7 single byte encoding:

Address	64	65	66	67	68
Value	195	229	229	234	0
Character	'Γ'	'ε'	'ε'	'κ'	'\0'

And here is the word "Γεεκ" at memory address 64 using the multibyte UTF-8 encoding:

Address	64	65	66	67	68	69	70	71	72
Value	206	147	206	181	206	181	206	186	0
Character	'Γ'		'ε'		'ε'		'κ'		'\0'

Even though they represent the same text, the two strings have very different representations in memory. If you fed one string into a function expecting the other encoding, you would get an error at best. Data corruption would be the usual result.

Converting Between Encodings
The standard C library doesn't provide support for converting between encodings. On modern Unix and Unix-derived systems, the iconv() function is commonly used to convert between encodings. Objective-C programs usually use the facilities provided by NSString or CFString. Since NSString and CFString objects are represented internally as Unicode, they can store text from any encoding. To translate a C string to an NSString:

char const *c_string = "foobar";
NSString *ns_string = [NSString stringWithCString:c_string 
                                encoding:NSASCIIStringEncoding];

And to translate an NSString to a C string:

NSString *ns_string = @"foobar";
NSData *c_string_data = [ns_string dataUsingEncoding:NSASCIIStringEncoding];
char const *c_string = c_string_data.bytes;

When converting to a C string, the -dataUsingEncoding: method returns an NSData object to manage the memory that needs to be allocated for the C string. You simply use the -bytes method to retrieve the C string pointer.

If you're using the UTF-8 encoding, you can do this in one step using the convenience method -UTF8String.

char const *c_string = ns_string.UTF8String;

Note that this is just a short cut for calling -dataUsingEncoding: with the NSUTF8StringEncoding; the returned C string lives in an autoreleased NSData object. (This is great if you just need to pass a C string along to a C function, but you'll need to copy the returned C string if you want to keep it around.)

Core Foundation provides similar C functions. You use CFStringCreateWithCString() to create a CFString from a C string:

char const *c_string = "foobar";
CFStringRef cf_string = CFStringCreateWithCString(kCFAllocatorDefault, c_string, kCFStringEncodingASCII);

Converting from a CFString to a C string requires that you provide a buffer to receive the converted C string.

CFStringRef cf_string = (CFStringRef)@"foobar";
char buffer[7];
Boolean result = CFStringGetCString(cf_string, buffer, 7, kCFStringEncodingASCII);
if (result == true) {
  // ... conversion succeeded, okay to use string in buffer
  printf("%s\n", buffer);
}

There's a lot more to cover. Computers may be all about numbers, but it seems to me that programming is 90% text processing. Next time, we'll look at C string literals and NSString literals.

App Store app from Apple now available

Apple has been busy with announcements over the past 24 hours with the iPhone 4 reservations and pre-orders going live, introduction of the new Mac mini and also their new App Store app (compatible with iPhone, iPod touch and iPad - iPhone OS 3.0 or later required).

The new app lets you shop the Apple Store, buy products and accessories, read customer review, find an Apple Retail Store, check on store events, set up Personal Shopping, Genius Bar and One to One appointments and more.

Also, as Jerry over at MindTribe pointed out (and did) you can pre-order or reserve your new iPhone 4 in just a few taps without entering your AT&T account information.

The Apple Store app is free and available now.  Do you think you'll download it?  Do you think you'll use it?  And if you do use it, what will you use it for?

Apple announces the new Mac Mini

The new Mac mini from Apple is here and packs more power into a smaller device.  And with more bells and whistles than ever before it's starting to look like an excellent addition (or replacement) for your home entertainment system.

The new Mac mini is a small flat square measuring 7.7 inches across and deep, 1.4 inches tall and weighing only 3 pounds.  Inside it's been updated and now includes up to 8GB SDRAM, 3MB L2 cache, a 1066MHz frontside buss and either a 2.4GHz or 2.66GHz Intel Core 2 Duo processor.

And the graphics and video support have been updated as well, sporting the NVIDIA GeForce 320M processor with 256MB SDRAM, Mini DisplayPort and now HDMI port (HDMI to DVI adapter included) which supports multichannel audio output.  Additional audio hookups includes line in and out minijacks (both digital/analog) and support for Apple iPhone headset with microphone.

It also has one FireWire 800, four USB 2.0 and a SD card slot - perfect for getting images from your camera onto the MacMini.  The Mac mini has a 802.11n AirPort Extreme wireless networking which is a/b/g compatible, Bluetooth 2.1 + EDR and 10/100/1000BASE-T Ethernet with support for jumbo frames.

You can get the choose either the standard Mac mini with a 320GB (5,400 RPM) Serial ATA hard disk the "server" edition with duel 500GB (7,200 RPM) Serial ATA hard disk and both versions include with the 8x slot-loading SuperDrive - the server version comes with Mac OS X Server Snow Leopard.

The power brick is gone (inside) and so there is only the power cord to attach to the wall.  And now thanks to a removable bottom panel, you can easily open your Mac mini to add more memory; just twist the foot and it unlocks, exposing the SO-DIMM slots - and very compact electronics.

I have been recommending the Mac mini for a while (more so with the updated Intel chip version) but lately I have been telling people to wait for a refresh... The time has come.  The Mac mini makes an excellent addition to your home entertainment system.  You can now get rid of your CD and DVD players and instead have this small powerhouse taking up a fraction of the space and doing more than the other components ever could imagine doing.

Put movies, pictures and music on the Mac mini and it's an entertainment dream.  And with the HDMI connector, hooking it up is a snap.  It also works as, well, a computer, and your HDMI ready entertainment system or television is now the monitor.  Browse the internet, check email, play games and even be production all in the comfort of your living room.

It's also a great computer for college students dorm room as a replacement to a tower system.  But for a student, I would highly recommend the new MacBook and MacBook Pro.

And all of the Apple Mac products running Snow Leopard can also either duel boot or run Microsoft Windows Vista/7/others so that those who need their Windows apps can still run them.  It's a win/win situation.

Are you looking to replace your current computer?  Are you thinking about getting a Mac mini?  Do you think that the Mac mini isn't as powerful 'cause it's so small that it couldn't possibly be a "real" computer?  Let us know your thoughts on the Mac mini and if you are smitten with the new device or not.

Objective-C Tuesdays: variables in Objective-C

See Also
Looping in Objective-C
Strings in Objective-C

Last week we wrapped up our look at variables in Objective-C. Here's a quick overview of the posts:

Global variables:

• global variables
• the extern modifier

Static variables:

• static variables
• static variables in functions

Local variables:

• local variables and function parameters

Instance variables:

• instance variables
• getters and setters

Properties:

• @property and @synthesize
• synthesizing properties
• atomic and nonatomic properties
• changing the default property names
• writing a thread safe getter method

Strings is the next topic, which we start today.

Reserve or Pre-Order your iPhone 4 today!

Apple's iPhone page was just updated earlier this morning and now you can either pre-order or reserve your new iPhone 4.

Pre-order and the iphone will be shipped free to your door, ready to use on June 24...whenever the mailman delivers it.

Reserve your iPhone 4 and pick it up on the 24th...  Stores open at 7:00 am, which means that people on the East Coast will be able to start posting and gloating hours before the West Coast people.

As they have the same system they put into effect for the iPad release reservations should make it easy to pick up your new phone without hours of waiting in line.

For the iPad we walked in about 11:30 and were out by 11:40am.  Thank you Apple for making the experience just that much smoother.

Tracking iPad/iPhone app sales

Okay, you’ve finally made your iPad, iPhone and/or iPod touch app and now you need to track sales data.  Currently developers use iTunes Connect to download daily and weekly reports that shows app downloads regions where the app is being downloaded.  It also shows a code to identify sales, updates and chargebacks.

Now that you have this data what do we do with it?  Some people print out the sales figures, tally up the sales and write that number on the top first page and keep a stack of sales records.  Others create a spreadsheet in Excel or Numbers and incrementally import and add the data so they can easily see the sales over the course of the apps life-cycles.  This is handy as they can also denote marketing/press releases (with color) to help identify and measure traffic.  But once you have more than one app it becomes harder to manage.

Then there are the others like our own Don McCaughey who rolled his own code to create both a front end and back end to make sense of the sales noise.  Don did a good job for us by creating a system where the data from Apple is ingested and stored in a database and then presents current and historic data for unified sales, individual app’s sales complete with a graphs.  Don has talked about open sourcing the code so that others can use the system as well.

But what about other options?  Off hand I can think of two other tools, one a paid web service and the other a new free app from Apple.

The paid web-service is appFigures and works much like Don’s solution.  You provide your iTunes Connect credentials to the app service and in pulls and parses your iTunes Connect sales data and provides both charts, sales reports and a few other nice features.  They also provide a 14 day free trial to see if you like the service.

Apple recently released the iTunes Connect Mobile app which works on your iPhone, iPod touch or iPad and presents daily and weekly sales data for app sales, updates and in-app purchases.  And while this is a great app for on the go data, it does save all of your historic data, nor does it provide any type of summation for sales - how much your app has made.

Regardless of which service you use the data that Apple provides you is your responsibility as a developer to download and store (if you want to keep track of your apps sales).  iTunes Connect does not provide a way to look back and see sales for the year or the history of your app’s life-cycle.

How do you track your app sales?  Are you using any of the methods above or have you designed a different method to collect and analyze your app sales data?

iPad Friday: June 11, 2010

See Also
Last week's iPad Friday

Hello and happy Friday.  Todays collection of iPad wallpapers were inspired by scanning electron microscope (SEM) imaging.  Enjoy.

(click image for full size wallpaper)

iPhone Friday: June 11, 2010

See Also
Last week's iPhone Friday

Hello and happy Friday.  Todays collection of iPod touch and iPhone wallpapers were inspired by scanning electron microscope (SEM) imaging.  Enjoy.

(click image for full size wallpaper)