Yes I know what you’re thinking. Obviously native methods are faster because jQuery has to deal with older browsers and host of other things. I completely agree. That’s why this post is not meant at all to be anti-jQuery. But if you are able to target modern browsers in your work, using the native C++ methods provided by your browser will not-surprisingly give you a tremendous performance boost in most areas.

I think there are many developers who don’t realize that most of the jQuery methods they use have native equivalents that require the same or only a slighter larger amount of code to use. Below are a series of code samples showing some popular jQuery functions along with their native counterparts.

Selectors
Easily being able to find DOM elements is at the core of what jQuery is about. You can pass it a CSS selector string and it will retrieve all of the elements in the DOM that match that selector. For the most part, this can all be easily achieved natively using the same amount of code.

//----Get all divs on page--------- 

  /* jQuery */
  $("div")

  /* native equivalent */
  document.getElementsByTagName("div") 

  //----Get all by CSS class--------- 

  /* jQuery */ 
  $(".my-class")

  /* native equivalent */
  document.querySelectorAll(".my-class")

  /* FASTER native equivalent */
  document.getElementsByClassName("my-class") 

  //----Get by CSS selector---------- 

  /* jQuery */
  $(".my-class li:first-child")
 
  /* native equivalent */
  document.querySelectorAll(".my-class li:first-child") 

  //----Get first by CSS selector----
 
  /* jQuery */
  $(".my-class").get(0)

  /* native equivalent */
  document.querySelector(".my-class")

DOM manipulation
Another area where jQuery is used frequently is in manipulating the DOM, by either inserting or removing elements. To do these things properly with native methods, you will definitely have to write some extra lines of code, but of course you can always write your own helper functions to make things like this easier. Below is an example of inserting a set of DOM elements into the body of a page.

//----Append HTML elements----
 
  /* jQuery */
  $(document.body).append("<div id='myDiv'><img src='im.gif'/></div>");
 
  /* CRAPPY native equivalent */
  document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>";
 
  /* MUCH BETTER native equivalent */
  var frag = document.createDocumentFragment();
 
  var myDiv = document.createElement("div");
  myDiv.id = "myDiv";
 
  var im = document.createElement("img");
  im.src = "im.gif";

  myDiv.appendChild(im);
  frag.appendChild(myDiv);
 
  document.body.appendChild(frag);

//----Prepend HTML elements----

  // same as above except for last line
  document.body.insertBefore(frag, document.body.firstChild);

CSS classes
It is very easy in jQuery to add, remove, or check for the existence of CSS classes on DOM elements. Luckily it is just as easy to do this with native methods. I only recently found out about these myself. Thanks you Chrome DevTools.

// get reference to DOM element
  var el = document.querySelector(".main-content");
 
  //----Adding a class------
 
  /* jQuery */
  $(el).addClass("someClass");
 
  /* native equivalent */
  el.classList.add("someClass");
 
  //----Removing a class-----
 
  /* jQuery */
  $(el).removeClass("someClass");
 
  /* native equivalent */
  el.classList.remove("someClass");
 
  //----Does it have class---
 
  /* jQuery */
  if($(el).hasClass("someClass"))
 
  /* native equivalent */
  if(el.classList.contains("someClass"))

Modifying CSS properties
The need to programmatically set and retrieve CSS properties using JavaScript comes up all the time. When doing this it is much faster to simply set the individual styles one by one rather than passing them all to jQuery’s CSS function. It really isn’t any additional code either.

// get reference to a DOM element
  var el = document.querySelector(".main-content");

  //----Setting multiple CSS properties----
 
  /* jQuery */
  $(el).css({
    background: "#FF0000",
    "box-shadow": "1px 1px 5px 5px red",
    width: "100px",
    height: "100px",
    display: "block"
  });
 
  /* native equivalent */
  el.style.background = "#FF0000";
  el.style.width = "100px";
  el.style.height = "100px";
  el.style.display = "block";
  el.style.boxShadow = "1px 1px 5px 5px red";

Remember, jQuery is an amazing library that makes all of our lives easier. But you should always choose to use native DOM methods if they are available to you. This is especially true if you are using jQuery inside of loops or timers.

Now of course, I have been hanging around game developers for a while now so maybe I’m a tad over-sensitive about performance. In that world if your game doesn’t run at 60 FPS, you might as well go work at Target. Anyway, hope this post helps some folks!

Live Demo of three.js html/js generated by ActionScript 3 using the Randori compiler – http://renaun.com/html5/as3threejs/

What is Randori?

Randori is a project with various parts and can be found at http://randoriframework.com/. For my example I am using a subset of the Randori project’s capabilities, which is fine as the Randori project is put together in such a way that it allows for this. You can find the various Randori repos here: https://github.com/RandoriAS

Repos:

• randori-sdk: This repo contains all the Randori framework bits you need for both the ActionScript 3 and JavaScript side.
• randori-compiler: This repo contains the ActionScript 3 to JavaScript compiler source files. Precompiled version is located here
• randori-framework & randori-guice-framework: These repos contains the source files for the Randori framework.
• randori-libraries: This repo contains source files for ActionScript 3 classes that stubbed out JavaScript libraries. For example to get three.js code hinting in ActionScript there are stubbed out ActionScript 3 classes that map to three.js classes.
• randori-plugin-intellij: This repo contains an IntelliJ plugin for creating Randori framework based apps and an integrated compiler.
• randori-demos-bundle: This repo contains demo Randori applications.
• randori-tools: This repo contains the Randori Toolset for ActionScript. These tools help to generate the JavaScript interop libraries.

The ActionScript three.js example in this post makes use of the randori-compiler, randori-libraries, and randori-sdk repos.

Setup Randori for Compiling ActionScript

Here are the steps I used to set up my development space:

• Create a folder called RandoriRepos somewhere on your hard drive, and keep track of this folder path for later use.
• Download https://github.com/RandoriAS/randori-compiler/raw/develop/deployed/randori-compiler-latest.zip to the RandoriRepos folder. Unzip the folder, you should see the RandoriRepos/randori-compiler-latest/ folder now.
• Use a git client to clone the randori-libraries repo into the RandoriRepos folder. Or on the command line navigate to the RandoriRepos folder and execute:

  git clone git://github.com/RandoriAS/randori-libraries.git

• Use a git client to clone the randori-sdk repo into the RandoriRepos folder. Or on the command line navigate to the RandoriRepos folder and execute:

  git clone git://github.com/RandoriAS/randori-sdk.git

The compiler is located at RandoriRepos/randori-compiler-latest/randori.jar. Next we’ll compile a simple ActionScript 3 class into JavaScript with the compiler.

Compiling ActionScript to JavaScript with the Randori Compiler

The sample files that I used to create the three.js example in ActionScript 3 are located at https://github.com/renaun/RandoriExamples.

git clone https://github.com/renaun/RandoriExamples.git

You should see a HelloWorld.js file in the RandoriExamples/SimpleClass/randori-output/ folder. The contents should look like this:

To see the HelloWorld.js class in action take a look at RandoriExamples/SimpleClass/index.html.

Well compiling a simple class is not that impressive. Lets get to the real example and show how to use ActionScript 3 and the Randori compiler to create a three.js demo

NOTE: The Randori compiler will not magically convert any of the Flash Player APIs in ActionScript. Whatever you are coding in ActionScript 3 has to be available on the JavaScript side. Meaning we are writing ActionScript 3 code that will map to three.js APIs.

Creating the three.js demo in ActionScript 3

The first thing we need is the ability to reference some basic HTML DOM APIs and the three.js library in ActionScript 3. This is done with stub classes in the randori-libraries repo. But to use them with the Randori compiler we need to create a SWC version of the libraries we want to use. The SWC also allows for code hinting in your IDE, for example in Adobe Flash Builder.

Here are the steps to setup the ActionScript Library Project in Adobe Flash Builder for the randori-libraries:

• In Adobe Flash Builder click on File -> New -> ActionScript Library Project
• Give it a project name of: randori-libraries
• Set the Folder location to: /path/to/RandoriRepos/randori-libraries
• Click Finish
• Open the randori-libraries project properties by right clicking on the project -> Properties
• Open ActionScript Library Build Path -> Library Path and remove the AIR SDK path library
• In Library Path click on “Add SWC…”, enter the following path for builtin.swc and click Ok:

  ${PARENT-1-PROJECT_LOC}/randori-sdk/randori-framework/bin/swc/builtin.swc

• Open up ActionScript Library Build Path -> Source Path and click on Add Folder, type in the following path and click OK:

  HTMLCoreLib/src

• Repeat the above step for:

  ThreeJs/src 
  

NOTE: The randori-sdk repo does contain compiled SWC versions for some of the randori-libraries. If you look at https://github.com/RandoriAS/randori-sdk/tree/master/randori-framework/bin/swc you can see it contains: HTMLCoreLib.swc, JQuery.swc, builtin.swc, randori-framework.swc, randori-guice-framework.swc.

Now that we have the libraries for our stub classes we'll use this in the Randori compiler's -library-path arguments.

You might be able to import the ActionScriptThreeJS Adobe Flash Builder project as is; the project is located in the RandoriExamples folder. The steps below can be skipped if the import works; these steps show how to create a new ActionScript project in Adobe Flash Builder and use the Randori stub libraries.

• In Adobe Flash Builder click File -> New -> ActionScript Project
• Give it a project name of: ActionScriptThreeJS
• Set the Folder location to: /path/to/RandoriExamples/ActionScriptThreeJS
• Click Finish
• Open the ActionScriptThreeJS project properties by right clicking on the project -> Properties
• Open ActionScript Build Path -> Library Path and remove the AIR SDK path library
• In Library Path click on "Add Project...", select the "randori-libraries" project and click OK
• Open ActionScript Compiler and uncheck the "Generate HTML wrapper file" checkbox
• Open the src/ActionScriptThreeJS.as and you should see code hinting for Three class as well as others.

Here is the code for ActionScriptThreeJS.as:

The class contains a main() method that is called by the GuiceInjectorBootstrap class once the class has been instantiated. We'll talk about the bootstrap class in a bit. In the main() method you can see three.js like classes. For example the "//Floor" code was copied straight out of a JavaScript example with minor changes to make it reference class names directly without the JavaScript THREE. prefix (ie: ImageUtils instead of THREE.ImageUtils) and strong typing declarations.

The ActionScript class in the randori-libraries/ThreeJS folder are not guaranteed to be complete and are based on r57 of three.js. But it is enough to show you how to mock up a 3rd party JS library and use it in ActionScript 3 with randori-compiler. It was easy to add missing stuff too, I added the ImageUtils class in a jiffy and had it working with r58 of three.js easily.

Well enough talk we need to compile the ActionScript into JavaScript and see it run. Lets take a look at the compile arguments for this project. There is a shell script that shows the compiler arguments, if you are on a Mac you can easily run it in terminal. Here is the full command; this needs to be run in the command line from the RandoriExamples/ActionScriptThreeJS/src/ folder:

The -sdk-path will tell the compiler where the randori-sdk is and will copy over the required randori js files. The -sdk-path also will link in the swc files from the randori-sdk location, which means we don't have to use the -library-path argument to add builtin.swc, HTMLCoreLib.swc, or the randori-guice-framework.swc (Used by the GuiceInjectorBootstrap.as class). The -library-path references the needed SWC's to compile the ActionScript files. The rest should be straightforward, but here is a link to the documentation for the randori compiler arguments.

The code generated by the Randori compiler is found in RandoriExamples/ActionScriptThreeJS/js-randori. It includes the following files:

• GuiceInjectorBootstrap.js
• ActionScriptThreeJS.js
• randori-framework-min.js
• randori-framework.js
• randori-guice-framework-min.js
• randori-guice-framework.js
• utils/RequestAnimationFrame.js

The current Randori compiler doesn't create a wrapper HTML file but I have put in a request for it to create a basic one. Either way we still have to hook up the three.js library and other application assets. These files are located in the RandoriExamples/ActionScriptThreeJS folder as the following:

• index.html - The three.js example index html file.
• images/checkerboard.jpg - Asset file used in the three.js demo.
• js/ - contains the three.js and stats.js libraries that are included in the index.html

Here is what the index.html file looks like:

So here is where some of the Randori magic happens. The Randori compiler outputs code that the randori-guice-framework.js can do stuff with. What kind of stuff? Well, like dependency injection and lazy loading compiled JavaScript classes when they are needed. The GuiceInjectorBootstrap.as file contains Randori guice classes to handle the loading and injection. All we have to do is pass in the main class file and output folder where the generated JavaScript is located. In this example this is done by the var bootstrap = new GuiceInjectorBootstrap( "ActionScriptThreeJS", "js-randori/" ); code. It loads the js-randori/ActionScriptThreeJS.js file. When it finds that ActionScriptThreeJS is looking for utils/RequestAnimationFrame.js from the [Inject] metadata used in the ActionScriptThreeJS.as file it will go load that class file too. To demonstrate this, run the index.html in the browser and check the network calls in Chrome Developer Tools. It should look something like this:

You can see as it loads three.js, stats.js, randori-guice-framework.js and GuiceInjectorBootstrap.js they are parallel calls. Then it loads the class files, first the ActionScriptThreeJS.js file (which is not included in the index.html script tags). The Randori guice framework then notices that ActionScriptThreeJS injects the utils.RequestAnimationFrame classes and goes and fetches that JavaScript class file. So no worrying about what classes are required to run your code just give it the main class and let Randori guice does the rest.

This is actually where the full Randori framework is pretty cool. The full Randori stack is geared for large applications making use of MVC patterns and dependency injection for some great features. A great place to learn more about the Randori framework for large application development is the getting started section here.

Randori is a fairly new project but it was really fun to play with and something I'll be exploring more.

Links Used in the Post

RandoriAS Project Github - https://github.com/RandoriAS
My ActionScript 3 Three.js Example Code - https://github.com/renaun/RandoriExamples
My ActionScript 3 Three.js Live Demo - http://renaun.com/html5/as3threejs/

A thank you goes out to Leonard Souza for providing the ThreeJS+Randori example - https://github.com/leonardsouza/RandoriAS-ThreeJS

The post Code Three.js in ActionScript with Randori Compiler appeared first on Renaun Erickson.

I insisted on the potential of browser and mobile gamers (compared with classic console gamers). More than 600 millions of people have already opted into using the silent auto update feature. 600M of potential gamers !!! This is twice the number of Xbox360, PS3 and Wii ever sold. This population can be updated to a new version of the Flash player within 30 days. That’s huge and that’s why some leading gaming studios such as Rovio (try Angry birds star wars ), Zynga (try Farmville 2) or King (try Candy rush) move to Facebook using Flash.

I made a quick demo of Kings Road, a magnificent Flash game on Facebook. The game is using Stage3D (hardware accelerated API for 3D experiences in Flash) with the Away3D framework. It’s super impressive and looks like Diable. But yes, it’s just a Flash game that directly runs in your browser. Check this video (review by freemmogamer):

Then I’ve showcased some new Flash and AIR APIs that have been developed recently: concurrency (ActionScript workers), AIR iOS push notifications, multiple SWF support on iOS, OUYA Controller support… Some recent news: the Premium features are 100% free (no more 9% shared revenue for gaming studios), and on Windows 8 modern UI (aka “Metro”), Microsoft used to maintain a whitelist. Now they approve by default your Flash app and if it performs badly (which is rare), the URL is added on a blacklist.

Adobe is working on some new cool APIs such as the Recursive stop API on MovieClips (if yo have nested movie clips, just say .stopAll), LZMA support for iOS and Datagram/Server socket support on mobile devices. Check this cool demo by Luca Mezzalira:

Then I introduced the new Adobe Gaming SDK stack, focusing on DragonBones, The Open Source 2D skeleton animation solution. You can try some demos here: http://dragonbones.github.io/demo.html

I’ve also demonstrated the new features of Flash CC (CC stands for Creative Cloud). The authoring tool will be available on the 17th of June, with all CC apps including Photoshop CC. This videos showcases an overview of these new features:

As promised to the Flash GAMM attendees, here are my slides:

                          

During this session, Greg and I cover these topics:

• What is the App Store reviewal process?
• How long does it take to get an approval?
• How to react is your app is rejected?
• What about hybrid (PhoneGap) applications on the app store? Are PhoneGap apps rejected by Apple?
• Why Apple review is not exact science. What is the part of subjectivity?
• Is Apple picky about the quality of mobile apps?
• How to submit an appeal and directly talk to Apple reviewers?
• Reasons why mobile applications are rejected.
• What do we mean by “native experience”?
• Differences between a native app and a mobile app.
• Weird reasons why an app can be rejected.
• Links and resources to build first class mobile apps with PhoneGap.

As promised, you can also get my slides on slideshare:

Enjoy.

                          

But for developers, most of the time you are going to want to hand-edit your CSS code and potentially do a wide array of specific tweaks for each media query. So what I’ve built is a responsive design feature for Brackets. For those who don’t know, Brackets is our open-source web editor that is built entirely using HTML, CSS, and JavaScript. This fact makes it extremely easy to build visual tools. In the beginning, I was not a believer in the whole building a web editor using web standards. I like SublimeText and that is still what I use today. But after this experience I firmly believe that building such an editor is not only possible, but also could be amazing if enough attention is paid to performance.

I presented some of this tool at the Adobe MAX sneaks event last week in LA, but unfortunately I was arrested before I could finish .

Photo by Kendall Whitehouse

Check out the video and please let me know your comments. It is working pretty solid but it is not ready to be released quite yet as there are lots of bugs and unfinished areas. But I will keep you updated once I find out what the future of this thing is.

One of the primary goals of doing this was to give myself a crash-course in modern web standards. Things have dramatically changed for the better since the days of Netscape 4.7 and IE 5. It was during this time period that I said F this mess and moved to Flash. Now some of you will ask, are you stopping doing Flash now? Hell no. But in my future posts and tutorials, I want to move to helping developers transition smoothly into doing these types of things in JavaScript, because that is where it is all heading.

I can honestly say that I love doing CSS and JavaScript now. What are the biggest reasons? No compiling, no SDKs, and being able to go into the developer tools and hack and tweak your creations live as they’re running.

I look forward to your feedback!
Lee

When Lightroom 5 Public Beta was introduced I recorded a video showing my Top 5 Favorite Features (see below). One of the features that I knew would be a game changer for me was the new Smart Preview feature. When you build “Smart Previews” for your images they are available even if the original RAW files, TIFFS, JPGs, PSDs, etc. aren’t with you. You can perform edits on them in the Develop Module and also output them for web/email as well as use them in slideshows. I was curious as to how much space these Smart Previews would really take up. Last night I did a test. I opened my Portrait/Models Catalog and built Smart Previews for every photo I’ve ever edited. What constitutes an edit? An edit in this catalog means that I retouched (edited) the photo in Photoshop and the edited version is a PSD file in my catalog. To identify these “edits” I built Smart Collections that organize my edits by year.

I simply selected every image that I’ve ever edited as far back as 2006 (a total of 3,669 photos) and built Smart Previews for all of these images. Now keep in mind that all of the original PSDs but my most recent two shoots reside on my file server. They are NOT on my local hard drive in my MacBook Pro. However, I keep my catalogs with me in my Dropbox folder so that they are sync’d to my other Macs as well as backed up to the cloud. There’s no way that I’d want to house these 3,669 images on my internal drive. Nor would I actually have the available space even if I wanted to. However, there have been times that I’ve wanted to use these images in slideshows, email to clients or update my websites/social media presence with them. If Smart Previews would enable me to always have access to these images even if the originals are back in the studio on the server then I’d be elated. So the real test was how much room would the Smart Previews take up?

I was shocked and thrilled to see how little space they actually took up! Also keep in mind that the above 1.73GB Smart Preview file also contains Smart Preview for other images in that Catalog besides the 3,669 I did last night. Now I will always be able to show and SHARE my work even if the originals are “offline”.

You can get the Lightroom 5 Public Beta here.

The post Having Every Photo I’ve Ever Edited With Me At All Times Thanks to Lightroom 5 appeared first on Terry White's Tech Blog.

One of my first tasks upon downloading Android Studio was to get a PhoneGap app up and running in it. Here’s how to get started. Note: I used PhoneGap 2.7 to create a new project with the latest stable release, however you could use the same steps (minus the CLI create) to import an already-existing PhoneGap application. Be sure to backup your existing project before doing so, just in case you have issues (Android Studio is still in beta/preview).

First, follow the PhoneGap “Getting Started” instructions all the way up to (and including) the command line invocation of the “create” script.

Once you have the Java environment configured just run the create script to create a based PhoneGap project. In this case, I used the following command to create a new PhoneGap project:

./create ~/Documents/dev/android_studio_phonegap com.tricedesigns.AndroidStudioPhoneGap AndroidStudioPhoneGap

Next launch Android Studio. When the welcome screen appears, select the “Import Project” option.

Next, you’ll have to select the directory to import. Choose the directory for the PhoneGap project you just created via the command line tools.

Once you click “OK”, you will proceed through several steps of the import wizard. On the next screen, make sure that “Create project from existing sources” is selected, and click the “Next” button.

You will next specify a project name and project location. Make sure that the project location is the same as the location you selected above (and used in the PhoneGap command line tools). I noticed that the default setting was to create a new directory, which you do not want. Once you’ve verified the name and location, click “Next”.

On the next step, leave the default settings (everything checked), and click “Next”.

Again, leave the default settings (everything checked), and click “Next”.

Yet again, leave the default settings (everything checked), and click “Next”.

For the last time, leave the default settings (everything checked), and click “Next”. This is the last one!

Next, review the frameworks detected. If it looks correct to you, click the “Finish” button.

Android Studio should now open the full IDE/editor. You can just double click on a file in the “Project” tree to open it.

To run the project, you can either go to the “Run” menu and select “Run {project name}”, or click on the “Run” green triangle icon.

This will launch the application in your configured environment (either emulator or on a device). You can see the new PhoneGap application running in the Android emulator in the screenshot below. If you’d like to change your “Run” configuration profile, go to the “Run” menu and select “Edit Configurations”, and you can create multiple launch configurations, or modify existing launch configurations.

it isn’t as readily apparent how one can create a Smart Collection that automatically finds your Virtual Copies – but it can be done! In the Lightroom 5 Beta, choose Library > New Smart Collection and under the Match category, choose  File Name / Type > Copy Name. Then, set the pull down menu to “isn’t empty”.

Enjoy!

Adobe Edge Web Fonts

Check out the video below to see the new interface in action:

Also shown in the video is Adobe Edge Code for live editing/previewing HTML in the browser.

Enjoy!

Audio if Half The Picture: Getting the Best Mix with Adobe Audition:

Best Practices: Encoding for the Web & Tablets:

and the OUTLINE for this class as well.

How To Edit Just What You Want: Ingest and Rough Cut with Adobe Prelude CC:

Using Photoshop with Adobe Premiere Pro: Putting It All Together:

Still some more outlines coming. Stay tuned…

Blog on.

The slides are available here.

• Size (in megapixels). Note: the sub-options include Long Edge, Short Edge, Width, Height, Megapixels, Long Edge Uncropped, Short Edge Uncropped, Width Uncropped, Height Uncropped, Megapixels Uncropped, and Aspect Ratio

•Bit Depth

•Number of color channels

•Color Mode

•Color Profile

•Smart Preview status

•PNG

Note: the last two options, Smart Preview Status and PNG are also available as Filters.

In addition, Lightroom now remembers your last viewed image in a Collection so when navigating from one collection to another, you’ll be restored to that image upon returning to the Collection.

The new website makes easier to find the right font; you can quickly sort the available fonts by language support, font type, or heading/paragraph suitability. Have fun!

Ever since I upgraded to the iPhone 5 and got an iPad mini I’ve been slowly but surely replacing my old 3o pin iDevice cables with newer Lightning cables. While the price of Apple’s Lightning cables are a bit on the expensive side, what bugs me more is being limited to a fixed 1m length. While 3rd party 30 pin iDevice cables are a dime a dozen and can be found in many different lengths and configurations, 3rd party Lightning cables are just now starting to become widely available. There were some really cheap knockoffs that appeared early on and as the saying goes you get what you pay for. I tried a few of the different cables and found that either they didn’t work at all, didn’t work reliably or stopped working after a while. One problem is that many of the cheap ones aren’t “reversible.” That’s one of the main benefits of Lighting cables is that there is no front/back up or down. You can plug it in either way and it just works. Many of the cheap ones only worked one way. I did find some 10 foot cheap 3rd party ones that worked properly. However, over time one by one they simply stopped working or started acting very flaky. I decided to wait until some of the trusted brands I’d used in the past. I wanted both shorter cables and longer ones than the 1m Lighting cables that Apple sells.

6 foot and 10 foot Lightning Cables

One of my favorite sources for low price, quality cables and gear is Monoprice.com. Monoprice has listed both 6 foot and 10 foot Lightning cables for a while now, but they recently started shipping. Before these cables became available I was using USB extension cables to make my Apple cables longer, but I prefer to have a single cable that’s long enough. I bought a few of each length and as I expected they work perfectly. You can get them in either white or black here.

Very short Lightning Cables

CableJive is known for selling a variety of different specialty cables and as I had hoped they just started selling pocket sized 12cm Lighting cables. This cables are short for a variety of different uses when you don’t want a long cable that you’d have to coil up. They are a bit pricey for the length, but they fit the bill for always having a Lightning cable for charging my devices, in my pocket.

Amazon has them here.

Lastly a lower priced 1m Lightning Cable

Amazon has their own brand of cables and they are offering a 1m Lighting Cable for less than Apple sells them for here. Monoprice also has some 1m cables cheaper too, here.

The post Long and Short Lightning Cables appeared first on Terry White's Tech Blog.

View File

Download Source Files

Here’s a link to download the session outline from my class entitled, “Advanced Audio Techniques for Voice-Over Recording”

This includes the images of the microphones mentioned during the class, as well as snaps of many sample external soundcard options, pre-amps, etc.

And the video itself (it’s about 1hr03minutes long):

Additionally, you can also grab the outline for my DSLR Editing for Photographers and Designers Class.

And the video too:

As mentioned during MAX, AdobeTV just published a three-part series I recently shot on DSLR Editing, which includes not only Premiere Pro, but Adobe Prelude CC and a section of DSLR Multicamera Editing, featuring the AMAZING new ‘audio sync’ feature, an exciting new addition to Premiere Pro CC. Those episodes are posted below (Parts 1-3)

Tomorrow I’ll be posting the additional classes, “Edit What You Want: Ingest and Selection with Adobe Prelude”, “Advanced Mixing Techniques” and “Encoding For Web and Tablets”.

Till then…

Blog on.

Keynotes

Sneaks

Sessions

If you attended our JavaScript Frameworks session at Adobe MAX 2013 and would like the session resources, you can find them here:

1) The presentation slides
2) The AngularJS sample Wine Cellar application
3) The Ember.js sample Wine Cellar application

Also see Christophe’s blog for the links to his github account where you can find the Backbone.js and jQuery Mobile versions of the wine cellar applications.

Thanks so much to everyone that attended (especially since it was 8am after the MAX Party ) – we hope it was worth your while

I will post the link to the session recording for anyone else interested as soon as I can find that as well…

For the last few years I’ve used a MacBook Pro as my primary computer. I even sold my Mac Pro tower a few months ago as I just couldn’t justify hanging on to it for the few times I used it to do heavy duty video rendering. Sure it was faster than my notebook, but I just found that I was using my notebook more often than heading over to the Mac Pro. Now that I’m on the MacBook Pro most of the time, when I’m at my desk I want to connect all my peripherals. I’ve got a Wacom Cintiq 24HD display, Gigabit Ethernet drop, a 7 port USB 3.0 hub with a Logitech C920 webcam, Rode Podcaster Mic, Bose Speakers, Apple Wireless Keyboard, wireless Magic Mouse and an occasional external hard drive to transfer data from here and there.

What is the Belkin Thunderbolt Express Dock?

It’s an external piece of hardware that sits on your desk and connects to your Thunderbolt port on your computer. Once connected it adds 1 Gigabit Ethernet, 1 Firewire 800 port, an additional Thunderbolt port, an audio in and audio out port, and 3 high speed USB 3.o ports.

Before the Belkin Thunderbolt Express Dock I would have to plug in the power and four cables before waking my MacBook Pro up. The beauty of a dock is that it can give you not only the convenience of having all your peripherals plugged into one device so that you can just plug in one cable, but it also can give you ports that you didn’t have. For example, on the MacBook Pro 15″ Retina Display Apple has eliminated Firewire and Ethernet ports. While I have the Thunderbolt Adapters to add these ports back in, the Belkin Thunderbolt Express Dock has them built-in plus one that I don’t have an adapter for and that is a standard 3.5mm audio in jack.

The design of the dock is appealing to my eyes and it has all of the connections in the back with a pass through to the front for the Thunderbolt cable (which is not included). I was a little disappointed by the rather large power brick, but then I reminded myself that I won’t likely be traveling with this dock. It’s designed to sit on your desk with everything connected to it so that I just plug in the Thuderbolt cable to my MacBook Pro when I get to my office.

I’ve connected a couple of hard drives to it for testing and  noticed no difference in speed. The other ports seem to work as expected.

The Bottom Line

This dock has been a long time coming. For a MacBook Pro owner it’s nice to have. For a MacBook Air owner it becomes an even better accessory since MacBook Airs have even fewer ports built-in to them. I would have loved to have seen one more Thunderbolt port and for the price I feel that it should have included a Thunderbolt cable. Otherwise it’s a solid piece of gear that will make my MacBook Pro feel even more like a desktop computer when I’m at my desk.

You can get the Belkin Thunderbolt Express Dock here.

You can get the needed Thunderbolt Cable here.

The post Belkin Thunderbolt Express Dock Review appeared first on Terry White's Tech Blog.

If you’ve missed Photoshop to Edge Reflow export at Adobe MAX, definitely check it out. It exports the PSD structure including the text content and the formatting, the layer styles and the bitmaps that are composed into a CSS and *.rflw document, which can be later on exported into HTML for a preview from Edge Reflow.

Here is the direct URL (30:15 min) to the ‘Photoshop to Edge Reflow’ part from the MAX keynote.

Project Mighty is a pressure sensitive pen that enables expressive drawing. However, it’s not *just* a pressure sensitive stylus/pen. Project Mighty knows who you are, and is connected to Creative Cloud to enables quick access to your personalized Kuler themes, and a cloud-clipboard for copying assets across devices.

Project Napoleon is a tool designed to complement Project Mighty by bringing an analog experience back to the digital creation process. Project Napoleon is a drawing aid that enables the experience of a T-square or Triangle in the digital/tablet world.

You can check out both of these tools in action in this excerpt from the Adobe MAX day-one keynote:

I strongly suggest checking out the Adobe Featured Blog to learn more about both Project Mighty and Project Napoleon. You can also sign up to be notified and learn more about Adobe’s explorations into cloud enabled hardware at http://xdce.adobe.com/mighty/

I was fortunate to not only meet a bunch of the guys from Maxon (and present alongside one of their finest, Mathias Omotola) but the more I’ve played with this feature (pre-NAB/MAX, and since then) I can honestly say that it sincerely makes 3D ‘accessible’ to the AE compositor who simply thought the 3D/2D worlds were too far apart; or in most cases, simply fearing that 3D was too difficult.

Me and Mathias on the last day of NAB2013

Nick Campbell (from Greyscalegorilla) and Dave Kiss (from the Maxon team) put together this great video highlighting the workflow, the capabilities, giving you a taste of ‘the buzz’ from the show floor (including clips from the my After Effects/Maxon presentation with Mathias.

NAB 2013 With Maxon, Adobe, And Greyscalegorilla from Nick Campbell on Vimeo.

Not long after we finished our last demo of the day, we caught up with none other than Mr. ScruffyTV himself, Kanen Flowers. Though I’ve known of Kanen for years, we only officially met at the San Francisco Supermeet back in January. In one of those rare, “I met you five minutes ago and I feel like I’ve known you my whole life,” kinda moments, we re-connected at NAB, shared a few laughs, did a quick interview, and then snapped a few post-tradeshow pics in the spirit of fun and total exhaustion.

We were getting a little loopy by the end of the show…

‘Put Your Head On My Shoulder…’

At this point, we just couldn’t stop laughing. Good times.

The weeks that followed were filled with lots of comments from attendees of the show to those who experienced my demos ‘live from the stage’ on AdobeTV; but the nicest thing about all of it? Everyone seemed genuinely excited about this new direction for AE and this much-needed partnership in the 3D modeling world.

At the end of each presentation, Mathias concluded with the line, “Welcome to the family.” Perfect words for a perfect (and long-awaited) coming-together of technologies.

Welcome to After Effects CC and Cinema 4D as they were meant to be: working together.

Blog on.

Thanks to Ray for sharing on twitter!

The first-day keynote focuses on Adobe’s evolution of Creative Cloud and various product updates. The second day keynote focuses upon inspiration – do not miss this one.  I especially liked Erik Johansson and Rob Legatto’s segments.

Day 1 Keynote: A Creative Evolution

About This Episode: The process of where and how we create is dramatically changing thanks to major advancements in technology, and there has never been a more exciting time. Join Adobe CEO Shantanu Narayen, Adobe’s SVP and GM of Digital Media David Wadhwani, and a collection of Adobe visionaries across digital photography, web design, illustration, video and more as we unveil brand new creative workflows and capabilities. We’ll take a look at the present and set our sights on the endless possibilities in our creative future.

Day 2 Keynote: Community Inspires Creativity

About This Episode: Join David Wadhwani, Adobe’s SVP and GM of Digital Media, as he welcomes four incredibly creative minds to explore how they foster creativity and approach their work. You will hear from Rob Legato, an Oscar winning visual effects supervisor; Paula Scher, an iconic graphic designer and illustrator; Erik Johansson, an up and coming photographer and retouch artist; and Phil Hansen, a constraint-based artist that believes limitations drive creativity. We think you’ll leave with more than a few new ideas to incorporate in your next creative project.

You can view all Adobe MAX 2013 session recordings online at: http://tv.adobe.com/show/max-2013/ (Keep in mind, not all videos are up yet, but will be added soon).

Update: Videos of MAX Sneaks also available via the Adobe Creative Cloud Youtube Channel.

Major Update to Creative Cloud

Basically, just about everything in the keynote is related to the major updates for Creative Cloud. This includes the vision and direction of Creative Cloud, and all of the tools and services that you are able to take advantage of with your Creative Cloud membership.

First and foremost, Adobe is shifting emphasis from packaged software releases to focusing on the Creative Cloud. From the press release:

Adobe also announced that the company will focus creative software development efforts on its Creative Cloud offering moving forward.  While Adobe Creative Suite® 6 products will continue to be supported and available for purchase, the company has no plans for future releases of Creative Suite or other CS products. Focusing development on Creative Cloud will not only accelerate the rate at which Adobe can innovate but also broaden the type of innovation the company can offer the creative community.

The shift to Creative Cloud is great for more reasons than I could possibly list in one post. To start:

1. Creative Cloud membership gives you the latest and greatest updates from Adobe, without an upgrade cost, and without having to wait for a boxed release cycle. As soon as updates to the tools are ready, you receive them.
2. Creative Cloud gives you the ability to have your content everywhere. Not only do you get a shared file space in the cloud that automatically synchs across your computers (complete with private folders and versioning), but you can also have creative applications on multiple computers, you can access your files on Creative Cloud from any device (including your phones and/or tablets), and your application settings can be synched with the cloud.
3. Creative Cloud membership makes it easy to share your work. You can share your work with the public (either through Creative Cloud sharing, or through Behance integration).

I strongly suggest reading more about Creative Cloud update here, and learning about the vision for Creative Cloud. There is a lot of rumor and misinformation also floating around, so please, please, please read 5 Myths About Creative Cloud, and be sure to check the FAQ if you have any additional questions. Or, just watch the video below, where fellow Adobe evangelist Paul Trani debunks myths about Creative Cloud:

Contrary to FUD that is floating around the Internet, Creative Cloud is not about anti-piracy, it is not about price gouging, it is not about trying to control you. Creative Cloud is about providing you with the best tools and services to produce creative experiences, collaboration, and adding value to your workflow.

For an external (non-Adobe) viewpoint, check out what others have had to say:

• Forbes: Adobe’s Creative Cloud And The Expansive Future Of The Digital Workplace
  
• PC Mag: A Killer Event
• Scott Kelby’s take on Adobe’s Announcements

I’ll cover more product specific updates in Creative Cloud tools later in this post, but check out the “new features” details to get an idea of what is now available. Or check out fellow evangelist Terry White’s videos on “What’s New In Photoshop CC, Illustrator CC, InDesign CC and Muse CC“.

Improved Desktop Presence

In addition to product updates, the Creative Cloud update also features an improved desktop presence for managing your tools and files.

From the Creative Cloud team blog, this desktop update will allow you to:

• Manage your files and sync them to the Cloud
• Install and update your desktop software
• Install and manage your Typekit desktop fonts
• Keep track of everything in your creative work, from Behance notifications, to collaboration invitations, and even updates to your CC apps — all in a single activity stream.

Behance Integration

It’s now easier than ever to showcase your work and gather feedback. You can now publish to Behance directly from within Creative Cloud. You can learn more about Creative Cloud and Behance community integration on adobe.com, but here’s a sampling:

• Share a work in progress from your Creative Cloud files or within Adobe® Photoshop® and get immediate feedback from the creative community.
• As you perfect your work, upload new versions to Behance. The community can follow the evolution of your project and post comments along the way.
• Broadcast your work on Twitter, LinkedIn, and Facebook from within your Creative Cloud tools, all powered by Behance. All in just a few clicks.
• Creative Cloud keeps track of who’s following you, who appreciates your work, what’s happening with the creatives you’re following, and more — all in a single activity stream.

Creative Cloud membership also comes with the pro features of Behance, including ProSite:

ProSite — a fully customizable professional portfolio with your own unique URL. And with Creative Cloud integration, keeping your portfolio up to date simply becomes part of your usual workflow.

TypeKit Fonts on the Desktop

As part of your Creative Cloud membership, you get access to 175 TypeKit fonts, which can be easily installed through the Creative Cloud desktop application, and are available to your entire desktop. If you were to license each of these fonts individually, it would cost you roughly $25,000. With Creative Cloud membership, you get these with no additional cost. You can read more about TypeKit and desktop font synching on the typekit blog, and see a preview of it in action in the video below:

Product Updates

There are hundreds of new or updated features to Adobe’s desktop applications and services with the latest Creative Cloud update. Here are just a few highlights from the Creative Cloud Team Blog:

• Camera Shake Reduction in Photoshop CC “deblurs” an image by restoring sharpness to images blurred by camera shake
• ACR8 is now available as a filter in Photoshop CC; you can apply Adobe Camera Raw processing to any of the layers in your document
• Touch Type tool in Illustrator CC allows you to design with type in a powerful new way by manipulating characters like individual objects. You can also use multitouch devices as well as a mouse or stylus
• CSS Designer in Dreamweaver CC provides the most up-to-date CSS and properties available via an intuitive visual editing tool
• Editing Finesse in Premiere Pro CC focuses on sleek design and customization capabilities, combined with new editing features and keyboard-driven editing improvements
• Live 3D Pipeline with Cinema4D in After Effects CC lets you add 3D objects to scenes and eliminate intermediate rendering between applications
• Parallax Scrolling in Muse CC allows you to create stunning effects with just a few mouse clicks—images and elements move in different directions at different speeds when scrolling
• Motion Paths in Edge Animate allows you to animate elements along totally customizable paths
• A completely modernized architecture in InDesign and Flash Pro has been rebuilt from the ground up to be faster and more reliable, with a streamlined UI
• InDesign has a great new QR code creator
• Flash Pro has real-time drawing and live preview

Check out the links below to see all of the new features for each one of the Creative Cloud tools that will be available in June (there are too many for me to list individually on this post):

• Adobe Photoshop CC
• Adobe After Effects CC
• Adobe Premiere Pro CC
• Adobe InDesign CC
• Adobe Flash Professional CC
• Adobe Illustrator CC
• Adobe Muse CC
• Adobe Dreamweaver CC
• Adobe Audition CC
• Adobe SpeedGrade CC
• Adobe Prelude CC

In addition to Creative Cloud tools, there have also been updates to the Edge Tools and Services. Adobe Edge Web Fonts has an updated interface on online presence available now, and other Edge Tools have updates that will arrive in June. You can read more about these tools below:

• Adobe Edge Animate CC
• Adobe Edge Code CC
• Adobe Edge Reflow CC

And there have been updates to Adobe’s touch apps:

• Adobe Ideas
• Adobe Kuler (coming soon)

Creative Cloud

You can always stay on top of the latest updates to Creative Cloud on the Creative Cloud Team blog. If you’re not already a member of Creative Cloud, you really should check it out at creative.adobe.com

In this episode (Adobe Photoshop: Favorite Features for Photographers), Julieanne Kost will demonstrate her top 5 favorite features in Photoshop CC including the new Upright perspective correction, Radial Filter, and Spot Removal  features in Adobe Camera Raw 8, Image Upsampling and Smart Sharpening, Live Shapes for Rounded Rectangles, and Camera Shake Reduction.

If you own Photoshop CS6 and are moving to Photoshop CC, you might also want to watch this video (Julieanne’s Top 5 Features for Photographers in Photoshop 13.1 ), to learn about the new features that were added to Photoshop 13.1 (released back in December exclusively for Creative Cloud Members).

In addition, here is a great article with insights about Breaking from Tradition written by Maria Yap, Sr. Director of Product Management at Adobe.

And if you have questions, Jeff Tranberry provides answers in this FAQ – for Photoshop and Lightroom Customers.

And the Creative Cloud FAQ.

And information about Lightroom and Creative Cloud.

• Tap the “V” key to toggle the visibility of the spot overlays.

• Shift -drag constrains the brush spot to a horizontal or vertical stroke.

• Shift -click connects the selected spot with the new spot via a straight brush stroke.

• Command -drag (Mac) | Control -drag (Win)  will create a circle spot and allow you to drag to define the source.

• Tap the Forward Slash key (/) to select new source for existing circle or brush spot.

• Press Delete to delete a selected spot.

• Option -click (Mac) | Alt -click (Win) on a spot to delete it (the cursor will change to a pair of scissors).

• Option -drag (Mac) | Alt  -drag (Win) in the image area over multiple spots to batch-delete (the icon changes to a marquee while dragging.

• Tap the “Y” key to toggle on/off Visualize spots. Note – this is also available as a checkbox and slider in Toolbar.

Photoshop team at Adobe is working on a new feature code-named Project Generator. This is a little sneak peek of what it does and how it helps you to save the time when designing user interfaces and preparing graphical assets for production or development. Together with that it rapidly simplifies the designer/developer workflow within Creative Cloud.

Web Assets generation process is defined using a naming convention of layers and groups. If you add suffix .jpg .png .gif or .svg (yes, shapes) to the layer name, Generator will understand it as an asset to export. You can also export out file in different scale by setting @2x, @1.5x or similar to the layer name.

Project Generator is a fully programmable and extensible pipeline based on Node.js allowing you to completely customize the output using JavaScript. Together with the assets you can get the structure as well and process it into different format e.g. HTML/CSS.

Stay tuned for more and let us know what you think, ping me and @timriot.

Note: this is a sneak peek and the final workflow can differ

Today Adobe took the wraps off all NEW versions of Photoshop, Illustrator, InDesign, Adobe Muse and more. The Creative Suite (CS) Applications have been rebranded Creative Cloud (CC). I’m here to give you your first look at these applications and to share my Top 5 Favorite Features in each one. I’ve created a Creative Cloud Learning Center playlist on my YouTube channel and added my four new videos to it. I’ll continue to add more videos on Creative Cloud in the coming weeks and months. The NEW CC versions will be available to Creative Cloud Members on June 17th.

Note: Currently there are no plans to add new features to Creative Suite. Creative Suite 6 will continue to be available indefinitely for those that aren’t ready or don’t want to go to Creative Cloud. Also Adobe Photoshop Lightroom and Acrobat Professional will continue to be sold as perpetual licenses. This probably brings up a lot of questions and we’ve tried to anticipate as many as possible. Go here to get answers.

I’ll also be rebranding my show from The Adobe Creative Suite Video Podcast to Creative Cloud TV.

The post What’s New In Photoshop CC, Illustrator CC, InDesign CC and Muse CC? appeared first on Terry White's Tech Blog.

I have the honor of being on stage today at the Adobe MAX Keynote in Los Angeles. I’ll be showing some never seen before new technologies and you can watch the LIVE STREAM. That’s right, even if you didn’t make it to Adobe MAX this year you can still watch the keynote. It will air from 9:30-11:30am PT (GMT -7) and you can sign up to watch it here. I think this will be the largest audience I’ve ever presented in front of live and I look forward to seeing you at MAX or at least knowing you’re watching from where ever you are in the world!

The post Watch Me in The Adobe MAX Keynote Live Today appeared first on Terry White's Tech Blog.

For me it all started in 2007 when I went to Adobe MAX Europe in Barcelona. Back then I was an engineer working on Flash Builder. Adobe gave me a ticket but I paid for the flight and hotel. And you know what? It was totally worth it :)

Seven years later I still have the same excitement. Although I know most of the things that will be announced, the show (like the keynotes and sneak peaks) always surprises me.

And lastly, the thing that makes this conference so special for me is the people I came to know, from literally all over the world. With some of them I’ve become friends. Since my first MAX when I only knew five people it seems like a life time. These people add to the cozy feeling I have here at MAX.

Have a great MAX if you are around. Hope to see many of my friends in the next three days!

And here is a very interesting followup article by Jonny Evans.

Monday, May 6, 9:30-11:30 a.m. PDT
A Creative Evolution
The process of where and how we create is dramatically changing thanks to major advancements in technology, and there has never been a more exciting time. Join Adobe CEO Shantanu Narayen, Adobe’s SVP and GM of Digital Media David Wadhwani, and a collection of Adobe visionaries across digital photography, web design, illustration, video and more as we unveil brand new creative workflows and capabilities. We’ll take a look at the present and set our sights on the endless possibilities in our creative future.

 
Tuesday, May 7, 10-11:30 a.m. PDT
Community Inspires Creativity
Join David Wadhwani, Adobe’s SVP and GM of Digital Media, as he welcomes four incredibly creative minds to explore how they foster creativity and approach their work. You will hear from Rob Legato, an Oscar winning visual effects supervisor; Paula Scher, an iconic graphic designer and illustrator; Erik Johansson, an up and coming photographer and retouch artist; and Phil Hansen, a constraint-based artist that believes limitations drive creativity. We think you’ll leave with more than a few new ideas to incorporate in your next creative project.

This year, we have a unified site where you can find all the information you need for each city. I’ve added individual links here so that you can register and come spend some quality time with us, learning about all the new goodies we have to offer in a city near you…

CREATIVE DAYS – EMEA TOUR 2013

• Tuesday, May 21 – Johannesburg (with Rufus and Paul)
• Thursday, May 23 – Milan (with Rufus and Paul)
• Friday, May 24 – Istanbul (with Rufus and Paul)
• Tuesday, May 28 – Warsaw (with Rufus and Paul)
• Thursday, May 30 – Moscow (with Rufus and Paul)
• Friday, May 31 – St. Petersburg (with Rufus and Paul)
• Tuesday, June 4 – London (with Rufus and Paul)
• Friday, June 7 – Barcelona (with Rufus and Paul)
• Saturday, June 8 – Barcelona (with Rufus)
• Tuesday, June 11 – Paris (Rufus and Michael Chaize)
• Tuesday, June 11 – Nordics (me & Paul)
• Wednesday, June 12 – Berlin (with Rufus and Michael)
• Thursday, June 13 – Amsterdam (with Rufus and Michael)
• Friday, June 14 – Zurich (with Rufus and Michael)
• Tuesday, June 18 – Cologne (with Rufus and Piotr Walczyszyn)
• Thursday, June 20 – Munich (with Rufus and Piotr)

So, are you ready? I can tell you I’ll be stocking-up on extra Berocca for this trip!

See you soon…

Blog on.

1) When you apply an Upright mode to a file to correct perspective, Lightroom caches that information (there are a number of reasons for this including but not limited to speed, consistency, future versioning, etc.). This means that if you apply an Upright mode and then decide to check “Enable Profile Correction” (simply because you forgot to do this first), you will want to click the “Reanalyze” option. This will tell upright to forget about those stored corrections, redo its analysis of the image, and compute a new correction.

2) Upright will generally work better on raw files compared to non-raw files, because it can take advantage of more reliable metadata (e.g., focal length).

3) Rotated crops and manual perspective corrections on existing images will usually interfere with automated Upright corrections. For this reason, applying any of the Upright corrections will reset the crop and manual perspective adjustments (Horizontal, Vertical, Rotate, Scale, and Aspect controls). Resetting the crop has the benefit of showing the user the maximum amount of image area remaining after an Upright adjustment (of course the crop can then be re-adjusted). Resetting the manual options will yield a better correction. However, in case you have a workflow that requires maintaining manual perspective corrections, Option + (Mac) | Alt  + (Win) when choosing an Upright mode will preserve those manual settings.

I’m really looking forward to seeing many of you next week at Adobe MAX – The Creativity Conference in Los Angeles. The show kicks off Monday for me and my colleague Terry White with the Day 1 Keynote and sessions.

Here’s my schedule, Monday to Wednesday:

• Monday, May 6th – 9:30am-11:30am – A Creative Evolution – Keynote (Register to Watch the Keynote Online Here)
• Monday, May 6th – 2:00pm-3:00pm Best Practices: Encoding for the Web and Tablets (Rm 503)
• Monday, May 6th – 5:00pm-6:00pm Audio Is Half the Picture: Getting the Best Mix with Adobe Audition (Rm 505)
• Monday, May 6th – 7:00pm-8:00pm Meet The Team (Video/Team Adobe)
• Tuesday, May 7th – 2:30pm-3:30pm DSLR Editing for Photographers and Designers (Rm 518)
• Tuesday, May 7th – 4:00pm-5:00pm How to Edit Just What You Want: Ingest and Rough Cut with Adobe Prelude (Rm 511A)
• Wednesday, May 8th – 11:00am-12:00pm Advanced Audio Techniques for Voice-over Recording (Rm 503)
• Wednesday, May 8th – 5:00pm-6:00pm DSLR Editing for Photographers and Designers (Rm 505)

There’s still time to register for Adobe MAX 2013, and you can even save $300 by using this promo code: MXSM13

See you there!

Blog on.

I’m looking forward to seeing many of you next week at Adobe MAX – The Creativity Conference in Los Angeles. The show kicks off Monday for me with the Day 1 Keynote and sessions.

• Monday, May 6th – 9:30am – 11:30am – A Creative Evolution – Keynote (Register to Watch the Keynote Online Here)
• Monday, May 6th – 3:30pm – 4:30pm – Adobe Muse – Creating HTML Websites Without Coding
• Monday, May 6th – 5:00pm – 6:30pm – Self Publishing on iPad – B.Y.O.D. LAB
• Tuesday, May 7th – 10:00am – 11:30am – Community Inspires Creativity – Keynote
• Tuesday, May 7th – 4:00pm – 5:00pm – Adobe Design Evangelists Shootout
• Wednesday, May 8th – 9:30am – 10:30am – Creating Engaging Web Design with Adobe Muse
• Wednesday, May 8th – 5:00pm – 6:00pm – Creating Engaging Web Design with Adobe Muse

Want to save $300 on Adobe MAX? Use this promo code: MXSM13

The post What I’m Teaching at Adobe MAX – The Creativity Conference Next Week appeared first on Terry White's Tech Blog.

Just as an FYI – I had a great talk with the engineer who works on the Import/Export as Catalogs (after I recorded this video), and he provided an excellent synopsis on why those extra collections are there. As it so often turns out, the topic is much more complicated than my little brain imagined:

The idea is that for every single photo that is included in the export, all information related to that photo is included. Let’s take for example that you have a collection of “Tree”. One piece of information that is related to some of these photos is “I’m in the Tahoe collection” so the Tahoe collection appears in the collection panel, containing those photos.  The Tahoe collection doesn’t contain all of the photos it contained in the original catalog of course, but only the photos that were part of the source (Trees) that was selected for export.

Perhaps this behavior seems odd.  We could change the behavior, but it’s a dangerous, slippery slope.  For example, what if the source you selected for export wasn’t “Trees” or “Tahoe” but instead was a folder that contained photos, some of which appear in both Trees and Tahoe?  Should neither of the collections appear in the exported catalog?  I think if we start dropping information from catalog exports, we’ll quickly hit scenarios where we’re dropping things that customers don’t actually want us to drop.

Hence, you now have a simple work around to quickly remove the collections that you don’t need, while still making sure that you still have the option to see all of the information related to those photos when you do choose to export a catalog. : )

In the designer/developer workflow it often happens that you want to export the Layer Style out of a Photoshop layer for custom processing in app UI development – native, web, gaming…

I wrote a tiny script that exports data like Drop Shadow, Gradient Fill, Stroke, Opacity, Bounds, Solid Overlay, Glow and more to a JSON file next to your PSD file.

How to use LayerMiner

Download LayerMiner from Github by clicking ZIP icon.

Download Photoshop from Creative Cloud if you don’t have it.

Install: Copy and paste ExportLayerStyles.jsx and the utils folder under Applications/Adobe Photoshop CS6/Presets/Scripts or similar folder on your machine.

Run: Open Photoshop, open a document, select a layer, go to File->Scripts->ExportLayerStyles, this will export a json file with the layer name next your PSD file, make sure your PSD is saved.

What LayerMiner does

On the image below you can see Effects under Rectangle 1, this part contains a valuable information for a developer, in order to get this info a developer needs to go to each layer style and literally copy and paste the info out. LayerMiner can mine this data for you into readable JSON format in just one click.

Download the sample PSD file: MyPSDFile.psd

Drop Shadow style data:

Data exported from the “Rectangle 1″ layer of this PSD look like this:

{
	"scale": 199.986118740506,
	"dropShadow": {
		"enabled": true,
		"mode": "multiply",
		"color": {
			"red": 0,
			"grain": 0,
			"blue": 0
		},
		"opacity": 50,
		"useGlobalAngle": true,
		"localLightingAngle": 120,
		"distance": 20,
		"chokeMatte": 0,
		"blur": 5,
		"noise": 0,
		"antiAlias": false,
		"transferSpec": {
			"name": "Linear"
		},
		"layerConceals": true
	},
	"innerShadow": {
		"enabled": true,
		"mode": "multiply",
		"color": {
			"red": 0,
			"grain": 0,
			"blue": 0
		},
		"opacity": 75,
		"useGlobalAngle": true,
		"localLightingAngle": 120,
		"distance": 5,
		"chokeMatte": 0,
		"blur": 5,
		"noise": 0,
		"antiAlias": false,
		"transferSpec": {
			"name": "Linear"
		}
	},
	"outerGlow": {
		"enabled": true,
		"mode": "screen",
		"color": {
			"red": 255,
			"grain": 255,
			"blue": 255
		},
		"opacity": 100,
		"glowTechnique": "softMatte",
		"chokeMatte": 0,
		"blur": 5,
		"noise": 0,
		"shadingNoise": 0,
		"antiAlias": false,
		"transferSpec": {
			"name": "Linear"
		},
		"inputRange": 50
	},
	"innerGlow": {
		"enabled": true,
		"mode": "screen",
		"color": {
			"red": 255,
			"grain": 255,
			"blue": 189.997100830078
		},
		"opacity": 75,
		"glowTechnique": "softMatte",
		"chokeMatte": 0,
		"blur": 5,
		"shadingNoise": 0,
		"noise": 0,
		"antiAlias": false,
		"innerGlowSource": "edgeGlow",
		"transferSpec": {
			"name": "Linear"
		},
		"inputRange": 50
	},
	"chromeFX": {
		"enabled": true,
		"mode": "multiply",
		"color": {
			"red": 0,
			"grain": 0,
			"blue": 0
		},
		"antiAlias": false,
		"invert": false,
		"opacity": 100,
		"localLightingAngle": 19,
		"distance": 9,
		"blur": 38,
		"mappingShape": {
			"name": "Gaussian"
		}
	},
	"gradientFill": {
		"enabled": true,
		"mode": "normal",
		"opacity": 100,
		"gradient": {
			"name": "Two Color",
			"gradientForm": "customStops",
			"interfaceIconFrameDimmed": 4096,
			"colors": {
				"count": 2,
				"typename": "ActionList"
			},
			"transparency": {
				"count": 2,
				"typename": "ActionList"
			}
		},
		"angle": 90,
		"type": "linear",
		"reverse": false,
		"dither": false,
		"align": true,
		"scale": 100,
		"offset": {
			"horizontal": 0,
			"vertical": 0
		}
	},
	"layer": {
		"name": "Rectangle 1",
		"bounds": "147 px,111 px,463 px,434 px",
		"opacity": 100,
		"blendMode": "BlendMode.NORMAL"
	}
}

*You can also assign a keyboard shortcut for this script in Edit -> Keyboard Shortcuts….

LayerMiner is open-source

LayerMiner is available open-source under Public Domain on Github, fork it, extend it, innovate, use it, format data in your own way for your own environment.
https://github.com/tomkrcha/LayerMiner
In the following article I will deeply explain how LayerMiner works so you fully understand all it’s internals, but the script is very simple and well-aranged (just 116 lines of code).

However, from an HTML angle, I thought they were interesting. Could you do this interface in HTML/CSS?  The answer is yes, and it is quite easy. Just some borders, border-padding and negative margin.

Demo

That was relatively simple, but it gets more complex when you have a multi-person conversation. Facebook takes the most recent person in the thread and makes them take up half of the “chat head.” Then come the next two, taking up a quarter each.  Then the rest are hidden.

Okay, so I need to pull out of nth child magic to selectively style the first 3 items in a collection of images. Set overflow to hidden, play with some more border radii and BOOM, “chat heads” done.

Demo

Okay, so that’s all been pretty straightforward, so I’d like them to be interactive.  If I click on a multi-member conversation “chat head” I’d like it to expand out the rest of the members. This is very easy. Just a little JavaScript and some class swapping.

Demo

So done, Facebook native interface done in CSS/HTML.  But I think we can do better.  One of my issues about this interface and one that would prevent me from using it in a web based application is that it obscures the content beneath it, it just hangs out covering up anything unfortunate enough to be below it. For me, if I was using it I would want it to float instead of absolutely position. So I can do a few tweaks to make that happen. 

Demo

Now in my demonstration, I pulled the text to be right aligned instead of left aligned, to show the float edge better.  But I’m still not happy with it. Why? Because each of those circles carve a giant square out of the text. And that’s kinda lame because they’re circles.  A few weeks ago a colleague of mine at Adobe, Bem Jones-Bey wrote an article about using shaped exclusions from the CSS Shapes and Exclusion spec.  It seemed like a perfect fit.  So if you have Chrome Canary installed, and the experimental features turned on, you get a much different result:

Demo [View in Canary]

The secret sauce here being the -webkit-shape-outside property.  It basically allows me to exclude a circle from the underlying text around each of the “chat heads”. To find out more about using shape-outside, be sure to check out Bem’s article. It’s just one of the ways that the browser is becoming more capable of rendering a greater number of visual layouts and effects.

Responsive Design in Action (Lab)

This session is a lab intended to get people up and running with Responsive Web Design. We start in Reflow, to get some of the basics, and then move to code to show how to do it as simply and cleanly as possible.

Programming in CSS

This is a run down of how to be more productive in CSS.  It will include some best practices, an overview of some modern techniques, and an overview of some tools to make writing CSS less of a pain.

Goal Oriented CSS

The idea behind this session to break down a design comp, figure out how to markup the vision, and write the CSS it takes to implement it.  I’ll try and tackle a few common design metaphors in the process. A few examples: iOS buttons, framed pictures with shadows, and vignettes to name a few.

Fast Performance with CSS on Mobile

I have the pleasure of tagging along with Paul Irish on the tools and techniques of writing high performance CSS targeting mobile devices.  It will also introduce you to ways of testing on devices that sometimes may be a little bit difficult to get into.

There are tons of other sessions, and of course there is the promise of a year’s subscription to Creative Cloud for all attendees.

If that wasn’t enough, here’s a discount code for $300 off: MXSM13.

So what are you waiting for, sign up! I hope to see you all in LA!

• New Quick View: Use your mouse to hover over color, gradient and image values for an in-editor preview.
• New Quick Docs for CSS: Press Ctrl+K or Cmd+K on a CSS property to view community generated documentation powered by WebPlatform.org.
• Advanced JavaScript Code Intelligence: New JavaScript code intelligence based on the Tern projet. Increased code hinting accuracy, camelCase support and built-in intelligence for RequireJS and jQuery.
• Jump To Definition: Instantly locate a function or property definition in your project by pressing Ctrl+J or Cmd+J.
• Function Argument / Signature Hints: Press Ctrl+Space inside a function call's ()s to see information on its arguments and their types.
• New Project Panel Design: Visual updates to the project panel.
• Install Extensions From Toolbar: Install extensions directly from the toolbar.

In the first situation, you might have a series of unrelated images that all need to have their own set of perspective corrections made to them. In this case, the easiest way to apply Upright would be to:

• Select all of the desired files in the Develop Module.

• Enable the Auto Sync feature (by toggling the switch to the left of the Sync… button).

•In the Lens Correction Basic panel, click the desired Upright mode (Auto, Level, Vertical, or Full) in order to apply the perspective correction to all selected files

With this method, each image is analyzed individually and the perspective corrected.

If you prefer not to use Auto Sync, you can select the first file and apply the desired Upright mode. Then, use the shortcut Command + C (Mac) | Control + C (Win) and check Upright Mode. Note: if the Upright Mode option is grayed out, that’s because the Upright transformations option is checked. Uncheck Upright Transformation and check Upright Mode instead. Then, select the other files to which you want the perspective correction applied and press Command + V (Mac) | Control + V (Win) to paste the corrections.

Or, if this is something you do all of the time, you can create a preset by selecting Develop > New Preset and enabling the “Upright Mode” option. 

In the second situation, you might have a series of related images – such as a sequence of bracketed exposures or a set of time lapse images for which you need the same exact numeric perspective corrections made to each image. In this scenario, you don’t want to run the upright analysis on each individual image because, due to robustness issues, Upright is very likely to return a slightly different result on each of the images in the selection. Instead, what you really want to do is have the upright analysis be performed on one of the images, and then have the result of that analysis (the numeric transformation) copied and applied  to the other images in the set. In order to do this,  copy the settings with Command + C (Mac) | Control + C (Win) and in the Copy Setting dialog, choose “Upright Transforms”. Then, select the other files that you want the perspective correction applied to and choose Command + V (Mac) | Control + V (Win) to paste the corrections.

You could choose to create a preset by selecting Develop > New Preset and selecting the “Upright Transforms” option but I’m not sure that this preset would be as useful (when applied to additional images in the future)  because the numeric values are locked into it.

During a brief visit to my studio between business trips I got a chance to try out the NEW Rogue XL Pro Lighting Kit. I’m a fan of the Rogue FlashBenders and Diffusion panels. I keep a set in the outer pocket of my suitcase because they are completely flat when not in use. This means that on those occasions when I’m on the road and come across an interesting subject to photograph I don’t have to worry that I didn’t bring my usual, larger light modifiers.

The NEW Rogue XL Pro Lighting Kit Changes the Game A Bit

I have all kinds of light modifiers in the my studio and smaller ones for travel and while I always looked at the Rogue FlashBenders as “great in a pinch.” I’m now looking at this new Rogue XL Pro as more of a primary tool for my on the road arsenal. The first thing I like about it is the XL part. It’s large enough to achieve better results. The larger the light source and the closer it is to your subject the softer it will be. So larger is definitely better. I also like the versatility in using it either to reflect light or diffuse it.

The kit comes with everything you need to set it up as a large bounce or as a strip bank softbox. It’s the use as a strip bank that I was most interested in. I use a large strip bank in my studio on a regular basis and I wondered how this much smaller one would perform. To my surprise it worked out even better than I anticipated. I typically use a strip bank to get nice rim lighting, but using it as a main light ain’t bad either.

Shot with a Nikon D4 (f/5.6, 125th, ISO 200, 95mm) and SB 900 speedlight with the Rogue XL Pro attached. The SB900 was triggered with a PocketWizard Plus X.

I was very happy with what I got with one light, but I would be even happier with what I could get with two lights or even three. Nevertheless, when I travel it’s usually with one speedlight unless I expect to or have a shoot planned.

When I head to LA next week for Adobe MAX I’ll definitely have the Rogue Pro XL Kit with me and probably my usual set of FlashBenders. If you have a speedlight and you want better, softer results with something that is EXTREMELY PORTABLE, then you should check out the Rogue FlashBenders and Diffusion Panels.

You can get the Rogue XL Pro Lighting Kit here or here on Amazon.

You can get the Rogue FlashBender Kit here.

You’re probably gonna want one of these too.

and one of these.

Also check out the NEW PocketWizard Plus X

The post Hands On With the New Rogue XL Pro Lighting Kit appeared first on Terry White's Tech Blog.

ExtendScript (based on JavaScript) is an easy to way to begin automating processes in Photoshop. In fact the widely used Photoshop Actions are very much related to ExtendScript.


ExtendScript enables you to access many Photoshop features to get data, process it, save it for a specific use, or just alter the PSD document object model by applying effects, changing positions, and so on.

Download the Photoshop Scripting Guide and Scripting Listener plugin.

To work with scripts just go to: Applications/Adobe Photoshop CS6/Presets/Scripts or similar location on your machine and create a new *.jsx file, for instance GetLayerInfo.jsx.

Open this file for editing in any Javascript editor or use the ExtendScript Toolkit, which offers you debugging, JavaScript console, breakpoints, and more.

Here is some code that writes to the console information about all top-level layers in the PSD file (layer name and the bounds – position of top/left and bottom/right corner).

function run(){
    var layers = app.activeDocument.layers;
    var len = layers.length;
    for(var i=0;i<len;i++){
         $.writeln(layers[i].name +": "+ layers[i].bounds);
    }
}
run();

Save the file, switch back to Photoshop, go to File -> Scripts -> GetLayerInfo and launch it, while you have an document open. In the ExtendScript Toolkit you should see the info in the JavaScript Console.

Now that was simple. To reveal more information about the layer, go to Photoshop Scripting API Guide (download the PDF) and find more under ArtLayer.

Note that if you would like to go deeper in the layers tree into groups/folders, you need to iterate on layerSet property of a layer. Consider the following script:

function run(){
    var layerSets = app.activeDocument.layerSets;
    dumpLayerSets(layerSets);
 
    $.writeln("Top-level layers:");
    dumpLayers(app.activeDocument.layers);
 
}
 
function dumpLayerSets(layerSets){
    $.writeln("--- Processing...");
    var len = layerSets.length;
    for(var i=0;i<len;i++){
         var layerSet = layerSets[i];
         $.writeln(layerSet.name);
         dumpLayers(layerSet.artLayers);
         if(layerSet.layerSets.length>0){
            dumpLayerSets(layerSet.layerSets);
         }
    }
}
 
function dumpLayers(layers){
    var len = layers.length;
    for(var i=0;i<len;i++){
         var layer = layers[i];
         if(layer.kind==undefined){
                continue;
         }
         $.writeln(layer.kind+" "+layer.name +": "+ layer.bounds);
 
    }
}
run();

And the actual JavaScript console output:

--- Processing...
Group 1
LayerKind.NORMAL Layer 1: 0 px,0 px,0 px,0 px
Top-level layers:
LayerKind.SOLIDFILL Rectangle 1: 152 px,116 px,261 px,225 px
LayerKind.NORMAL Background: 0 px,0 px,1024 px,1024 px
Result: undefined

In the next tutorial I will show you how to dump info about Layer Styles, which is a bit more complicated and requires low-level access to Photoshop using ActionDescriptors.

The PSD file used (very simple): MyPSDFile.psd

If you haven’t seen Facebook’s “chat head” interface, here is the quick lowdown. They are little circular icons that will float on the side of your mobile device’s screen to tell you that a message has arrived from a friend. It’s part of the Facebook Home thing, but even if you are on iOS, the Facebook App uses them. I’m not sure if the non-Home Android app has them yet. Anyway, I think this will be one of those UI things you either love or hate.

From an HTML angle, I thought they were interesting. Could you do this interface in HTML/CSS?  The answer is yes, and it is quite easy. Just some borders, border-padding and negative margin. In fact if you look at the HTML, there is no extra code for style, it is done entirely in CSS.

Demo

That was relatively simple, but it gets more complex when you have a multi-person conversation. Facebook takes the most recent person in the thread and makes them take up half of the “chat head.” Then come the next two, taking up a quarter each.  Then the rest are hidden.

Okay, so I need to pull out of n-th child magic to selectively style the first 3 items in a collection of images. Set overflow to hidden, play with some more border radii and BOOM, “chat heads” done. Again, notice the minimal HTML.

Demo

That’s all been pretty straight forward, so I’d like them to be interactive.  If I click on a multi member conversation “chat head” I’d like it to expand out the rest of the members. This is very easy. Just a little Javascript and some class swapping. 

Demo

So done, Facebook native interface rendered in CSS/HTML. But I think we can do better. One of my issues about this interface and one that would prevent me from using it in a web based application is that it obscures the content beneath it, it just hangs out covering up anything unfortunate to be below it. For me, if I was using it I would want it to float instead of absolutely position. So I can do a few tweaks to make that happen. 

Demo

Now in my demonstration, I pulled the text to be right aligned instead of left aligned, to show the float edge better.  But I’m still not happy with it. Why? Cause each of those circles carve a giant square out of the text. And that’s kinda lame because they’re circles. And it makes the choice to hover over the content below, instead of floating, more attractive.  

However, a few weeks ago a colleague of mine at Adobe, Bem Jones-Bey wrote an article about using shaped exclusions from the CSS Shapes and Exclusion spec.  It seemed like a perfect fit.  So if you have Chrome Canary installed, and the experimental features turned on, you get a much different result.

Demo [Open in Canary]

The secret sauce here being the -webkit-shape-outside property.  It basically allows me to exclude a circle from the underlying text around each of the “chat heads”. Now that looks awesome, and I’d definitely prefer that to obscuring the content below. And CSS wise, it was one of the ligher hacks I had to do. To find out more about using shape-outside, be sure to check out Bem’s article. It’s just one of the ways that the browser is becoming more capable of rendering a greater number of visual layouts and effects.   

This has been tested in the latest Chrome, Firefox, and Safari versions. Everything seems to work cross browser except the features that only work in Canary. I haven’t tested in IE yet.

In order to create Smart Previews, the original files must be on-line. Therefore, you will want to make the Smart Previews before taking the images off-line. There are several ways to create Smart Previews in Lightroom:

• On Import – in the File Handling panel, check the option to “Build Smart Previews”.

• In the Library module – selecting your photos (or folders of photos) and select Library > Previews > Build Smart Previews (use this method to create Smart Previews for images that have already been imported into Lightroom).

• In Preferences – choose Preferences > General > Build Smart Previews on Import.

• When exporting as a Catalog – select File > Export as Catalog and check the option to “Build Smart Previews”.

If you have created Smart Previews for files, in the Develop module, the Histogram will notify you as to what you are working with:

• “Original” if there is not a smart preview built for the file and the original is on-line.

• “Original + Smart Preview” if there is a Smart Preview and the original is online.

• “Smart Preview” if there is a Smart Preview and the original is off-line.

When you make changes to a file that is off-line and has a Smart Preview, when the originals become available (are on-line), any changes there were made to the Smart Preview are automatically applied to the original. There is no action that you need to do – Lightroom will automatically apply all changes made to the Smart Preview to the original file. Basically, the rule is that if there is an original, then Lightroom will use the original, if the originals are not on-line, then Lightroom will use the Smart Preview. And of course if the original file is online, both the original and the Smart Preview are both updated as changes are made.

Keep in mind that these smart previews are smaller version of the original files (there are several reasons for this, the most obvious is to reduce the amount of space they take on the hard drive). With that said, since they are only 2540 pixels on the long edge, when applying Sharpening and Noise Reduction settings in the Details panel, the Smart Preview view at 100% will be a different magnification than the original. Therefore, for the most accuracy, you might need to confirm the setting when the files are on-line and you are able to view the original at 100%.

Finally, not only can use Smart Previews to Develop images when they’re off-line, you are also able to use them in the Publish Services panel (in case, for example, you want to publish your off-line files to Facebook or Flickr) and Export them as JPEG. You can even use them to layout a book (although you will not be able to print the book until the original images are on-line as the quality of the Smart Previews will not be high enough to print), and create and output a video slideshow (although again, they can not be used to output a slideshow to PDF because of quality concerns) and create and export web galleries. The best rule of thumb; for the highest quality, you’ll most likely want your original files when outputting files.

Last week I announced that I’d be giving away a FREE Ticket to Adobe MAX 2013 and I have a winner. The contest ran across both Twitter and Facebook. The Winner is Facebook Fan, John Paul Rock! John will join me at the Adobe MAX Conference as well as get VIP treatment at MAX Bash. Congratulations John.

I look forward to seeing all of you at the Creativity Conference – Adobe MAX 2013 in Los Angeles from May 4-8, 2013.

The post We have a Winner and He’s Going to Adobe MAX! appeared first on Terry White's Tech Blog.

Download Drawscript: http://drawscri.pt/
Download Sample Xcode project and Illustrator Assets (*.ai) for this tutorial.

With a free Drawscript extension for Adobe Illustrator you can convert Illustrator vector shapes into Obj-C CoreGraphics code (CG function calls with data).

(Figure: On the left side you can see a shape designed in Illustrator, on the right side a result running in iOS Simulator on iPad)

Setup your project:

1. Open Xcode

2. Create a new Project
File -> New -> Project and choose Single View Application under iOS/Application.

3. Create a UIView
File -> New -> File and choose Objective-C Class under Cocoa Touch
Make sure this class inherits from UIView class and name it for instance DrawscriptView.

4. Setup DrawscriptView
In ViewController.h (header), add DrawscriptView this way:

#import <UIKit/UIKit.h>
#import "DrawscriptView.h"
 
@interface ViewController : UIViewController
@end
DrawscriptView *drawscript;

In ViewController.m (implementation), initialize DrawscriptView:

#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
 
    drawscript = [[DrawscriptView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:drawscript];
 
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}
@end

5. Add the Drawscript code
In DrawscriptView.m, uncomment drawRect function so it’s used. Now you can start adding code from Drawscript panel.

Your DrawscriptView.m should look like this when you include the code generated by Drawscript.

#import "DrawscriptView.h"
 
@implementation DrawscriptView
 
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}
- (void)drawRect:(CGRect)rect
{
    // Drawing code
 
    UIColor* fillColor = [UIColor colorWithRed: 1 green: 0 blue: 0 alpha: 1];
    UIBezierPath* path = [UIBezierPath bezierPathWithRect: CGRectMake(31, 7, 101, 101)];
    [fillColor setFill];
    [path fill];
}
@end

The code for a UI Button with a linear gradient (displayed at the beginning on the screenshot) would look like this for instance:

// Drawing code
 
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
 
UIColor* strokeColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 0.899];
UIBezierPath* path = [UIBezierPath bezierPath];
[path moveToPoint: CGPointMake(486,432)];
[path addCurveToPoint: CGPointMake(472,446) controlPoint1: CGPointMake(486,440) controlPoint2: CGPointMake(480,446)];
[path addLineToPoint: CGPointMake(394,446)];
[path addCurveToPoint: CGPointMake(380,432) controlPoint1: CGPointMake(386,446) controlPoint2: CGPointMake(380,440)];
[path addLineToPoint: CGPointMake(380,432)];
[path addCurveToPoint: CGPointMake(394,419) controlPoint1: CGPointMake(380,425) controlPoint2: CGPointMake(386,419)];
[path addLineToPoint: CGPointMake(472,419)];
[path addCurveToPoint: CGPointMake(486,432) controlPoint1: CGPointMake(480,419) controlPoint2: CGPointMake(486,425)];
[path addLineToPoint: CGPointMake(486,432)];
NSArray* gradientColors = [NSArray arrayWithObjects:
                           (id)[UIColor colorWithRed: 0.4 green: 0.403 blue: 0.415 alpha: 1].CGColor,
                           (id)[UIColor colorWithRed: 0.345 green: 0.349 blue: 0.36 alpha: 1].CGColor,
                           (id)[UIColor colorWithRed: 0.29 green: 0.294 blue: 0.305 alpha: 1].CGColor,
                           (id)[UIColor colorWithRed: 0.364 green: 0.372 blue: 0.384 alpha: 1].CGColor,
                           (id)[UIColor colorWithRed: 0.443 green: 0.45 blue: 0.466 alpha: 1].CGColor,
                           (id)[UIColor colorWithRed: 0.839 green: 0.839 blue: 0.839 alpha: 1].CGColor,
                           nil];
CGFloat gradientLocations[] = { 0, 0.25, 0.5, 0.245, 0.51, 1};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)gradientColors, gradientLocations);
CGContextSaveGState(context);
[path addClip];
CGContextDrawLinearGradient(context, gradient, CGPointMake(433, 446), CGPointMake(433, 418), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
CGContextRestoreGState(context);
[strokeColor setStroke];
path.lineWidth = 1;
[path stroke];