Adobe Creative Cloud Guide

In May of 2013, Adobe walked away from selling boxed-versions of software and moved exclusively to selling subscriptions to software such as Photoshop and InDesign. What does that mean for you?

What is Creative Cloud?

Adobe’s Creative Cloud, CC replaces the old model of Adobe “CS.” Users pay a monthly fee to access Adobe’s entire software library, cloud storage and more. You are able to install the software on 2 computers, Mac or Windows.

  • Full versions of the Adobe desktop applications: Adobe Photoshop, InDesign, Illustrator, Dreamweaver and more
  • Services to help create mobile-ready websites, content and apps
  • 20GB of cloud storage
  • Access to Béhance ProSite for portfolio development and hosting
  • 1 Year commitment billed monthly (yearly billing also available)
Guide to Adobe's Creative Cloud Software

Guide to Adobe’s Creative Cloud Software

Share this Image On Your Site

Please include attribution to AscendTraining.com with this graphic.

I use Photoshop, does that mean Photoshop is “in the cloud” like Google Docs?

No. The software is installed on your computer, but a license check is performed every 30 days. Photoshop and your files reside on your hard drive, just like before. You will need internet the first time you install CC.

If I cancel my subscription, do I lose my files?

No. You will need to make sure you save your files as compatible formats with earlier versions.

What exactly do I get with my subscription?

Acrobat Professional
After Effects
Audition
Bridge
Digital Publishing Suite (DPS)
Dreamweaver
Edge Animate
Edge Inspect & Edge Code
Edge Reflow
Edge Web Fonts
Flash Professional
Ideas
Illustrator
InCopy
InDesign
Kuler
Lightroom
Muse
PhoneGap Build
Photoshop
Photoshop Touch
Prelude
Premiere Pro
Scout
Speed Grade
20 GB Cloud Storage
Béhance Online Portfolio
Adobe Typekit

Any other benefits?

This is a big change for those in creative communities. One real benefit is that this model helps facilitate team-based workflows. If you have multiple people working at an organization, Team Licenses is the way to go. Team licenses give management the ability to add users, transfer software to a different user, or revoke licenses. So if someone quits, it’s very easy to transfer their license to the replacement employee.

 

Intelligent Upsampling in Photoshop CC

The Image Size Window and Intelligent Upsampling

The Photoshop Image Size window has received a major update! The new upsampling and downsampling algorithms allow for better results in enlarging and reducing the size of your images. Downsampling has always been a more manageable option, since you are simply omitting pixels. The only problem area has been that images tend to lose detail. Photoshop CC offers us the option of Bicubic Sharper, which helps retain detail when downsampling.

Intelligent Upsampling means you can take a low resolution image and make it print-ready!

Image-Size

Upsampling has always been the thorn in our side. Enlarging images in Photoshop means you are asking it to “invent” pixels that were not there previously. We often ended up with blurry images with a lot of artifacting. The new Preserve Detail algorithm does a MUCH better job of preserving edges. You can manually choose Preserve Details or Bicubic Smoother to get better results.

Upsampling Options

  • Automatic: Photoshop evaluates the image and resamples based on what type of image, and whether you are scaling up or down.
  • Preserve Details (enlargement): Photoshop uses a Noise reduction slider to decrease noise when enlarging images. This would be helpful if you have an image with a lot of detail, like a map, or photos of jewelry.
  • Bicubic Smoother (enlargement): This is based on Bicubic interpolation and produces smoother results. Best for images like landscapes or close-up face shots.
  • Bicubic Sharper (reduction): When you are reducing the size and need details to retain detail.
  • Bicubic (smoother gradients): This method gives you the best gradients.
  • Nearest Neighbor (hard edges): Preserves hard edges and creates a smaller file. Can result in jagged effects. Not a great option.
  • Bilinear: Adds pixels, not a great option.

Adobe Edge Reflow: Adapting with ‘Responsive Web Design’

We live in an age of screens. You are looking at one right now, and so am I. In our modern lives we are constantly staring at screens of various sizes, and as the diversity of resolutions and aspect ratios has grown over time, so has pressure on web developers to adapt their designs to the changing demands of the end-user.

The first reaction of many developers to having to cater to different screen sizes has been to create multiple static comps for the same project. But the drawbacks of this approach quickly become apparent when you imagine trying to design 4 or 5 versions of the same website, while trying to keep the design clean, functional and aesthetically consistent. You would then have to update each one separately every time the client makes a change. This could rapidly turn into a time-consuming nightmare!

So the need for intuitive designs that can automatically adapt to different screen widths can no longer be ignored. We coined this philosophy ‘Responsive Web Design‘ but until now developers have mostly been forced to either try and repurpose their existing tools to find work-arounds they were not designed for, or work directly in code  - which despite being accurate and clean, can hinder the artistic spontaneity that can be so important to the design process.

The newest addition to Creative Cloud, Edge Reflow, allows you to simultaneously design for different screen sizes using a visual workspace to set media breakpoints and is one of the only tools specifically designed with Responsive Web Design in mind.

Screen Shot 2013-03-14 at 11.14.47 AM

Screen Shot 2013-03-14 at 12.07.10 PM

 

As content is added, resized, edited and moved around on the canvas visually, Reflow translates these changes into CSS script in real-time in the background. This gives you the choice of working either visually, using the canvas to create a layout as you would in Illustrator or InDesign, or by editing CSS values in the context-sensitive side panel to alter the individual attributes of an object:

 

Ever-present at the top of your canvas is the media breakpoint bar. This is where you set color-coded breakpoints for each screen size:Screen Shot 2013-03-15 at 12.59.14 PM

Once you have settled on a layout for one, clicking on the next breakpoint causes the page’s content to manouevre automatically to try and fit within the new width (normally in an unhelpful way). You can then tweak the layout, replace or remove objects and reformat text until you are happy, and then move onto the next breakpoint.

Screen Shot 2013-03-15 at 1.15.39 PM

Reflow is very clever in its use of color-coding for content-specific attributes in the side-pane. When an object is selected, the backgrounds of related attributes change to match the color assigned to the layout in the breakpoint bar. This allows you to quickly see if a value is specific to the breakpoint you are looking at, or if it was originally set on another.

The beta still lacks the ability to choose your own colors for these labels, and although the CSS code Reflow writes as you design is very clean and uses a full array of CSS formatting controls, it does not yet allow you to name layers or text styles.

There are of course other flaws that will hopefully be addressed once the beta has been picked apart and the full version is released, but there is also some very nice extended functionality potential in Reflow being used as part of the Edge suite. Such as being able to preview your design on different devices in real-time using Edge Inspection, and the possibility of incorporating assets created in Edge Animate.

We are looking forward to the full release. It should tide us over until they come up with round screens, or say, 3D websites… and when that day comes, may the God of Responsive Web Design have mercy on us all!!

Photoshop CS6 at your fingertips

Being a designer means working to deadlines – which means time is always of the essence. Working quickly and efficiently within Photoshop is essential and there comes a point when your poor mouse just can’t scurry around the screen fast enough to keep up.

Adobe have always included keyboard shortcuts to reduce the little guy’s workload, but one issue with these is that they have been tweaked and moved around over the years, and it can be a little irritating to have to go against muscle memory, established over countless hours of working, to learn the new shortcut for something you have always used. My fingers still seem to be reminiscing about the good ol’ days of Photoshop 7: holding down cmd+Z to start the ‘undo’ time machine. I still forget to press shift every time!

Another, less trivial drawback has been that shortcuts have never taken into account that a tool as incredibly diverse as Photoshop allows (nay, encourages) us to pursue our desired results in a plethora of different ways. We all have our favorite tools and no two users work exactly the same way – so why do we all have to use the same shortcuts? If I constantly use smart objects, then I’m going to want my keyboard to be littered with ergonomically friendly shortcuts for adding and editing them. Someone else may never use smart objects and would make better use of those same convenient keys for, say, zooming controls.

Well, CS6′s answer to the problems with shortcuts was to give us another shortcut:

cmd+opt+shift+K

(ctrl+alt+shift+K in Windows)

…which opens the new keyboard shortcuts customization menu:

Photoshop CS6 Keyboard Shortcuts Customization Menu

This new feature for CS6 allows you to optimize your shortcuts for exactly the way you like to work. You can overwrite default shortcuts that you may have a grudge against, bring back retro shortcuts that your fingers still try to use, or you can introduce entirely new ones to save yourself even more time.

Through this menu you are able to edit shortcuts for menu commands, tools, and palette menus. More than one key command can be assigned to one action, and Photoshop will tell you if you have any conflicting commands and show you the duplicates so you can fix them.

One very useful feature, especially if you often use Photoshop on multiple computers, is the ability to save your configurations and export them as a handy .kys file. Being able to save means that our preferences can now survive version updates and the obsessives amongst us can now gradually build our dream set of optimal shortcuts (some dreams are cooler than others) and keep them forever!

Quick Tip: Using Dreamweaver for your CMS Development with Drupal, WordPress, Joomla, etc

Drupal, WP and Joomla icons next to each other

Are you looking to do some theming or plugin development for a common CMS (Content Management Systems) such as Drupal, WordPress or Joomla? If that’s the case, then this tip may be useful for you. Dreamweaver CS6 has a neat option to provide code hinting for common CMS’. Start by setting up your server and local environments in the Manage Sites panel then open up one of the PHP scripts for whatever CMS you may be using. Once you have a document open, go up to the Sites menu once again and find the item “Site Specific Code Hints”. A window will come up, but as long as it is a common CMS, Dreamweaver should automatically recognize which CMS it is, so all you should have to do is click OK. After you have done this, Dreamweaver will add a config file to your local site and from then on out you will have code hinting for your custom web development with your CMS of choice.

A New Way to Debug your Website on Many Devices

Adobe Shadow Icon

 

Adobe has just released a public beta for yet another useful application for web development. The current title is Adobe shadow. Now I haven’t had much time to play around with it as of yet, but I’ll provide the run down.

 

What Adobe Shadow is used for is previewing your website on not only your browser, but also any mobile devices you can find. The application has two pieces: the application itself, which can be downloaded as a beta currently at Adobe Labs; and second is a Google Chrome extension. This means you will need to use Google Chrome currently when debugging your website, but if you aren’t already using Chrome, you should be. It is in my opinion the best browser and is also rated as the most secure browser.

 

Once you have installed both pieces, you then register all of your mobile devices. iPhones, iPads, and Android devices are currently supported. After the setup you can view and debug your website simultaneously on your computer and all your devices. This is great to not only see how your site works on all of your testing devices but also debugging your Javascript and other code that exists on your website.

 

This will work great testing your HTML 5 and jQuery applications and will also be quite powerful in conjunction with Dreamweaver CS5.5 and it’s mobile support.

Tech Tip for the Web Designer

For those of you that are new to web design or would like to get started in the field, or if you are like me and just too lazy to code your CSS, I have a great tool for you! I recently stumbled on this web app CSS3 Generator which allows you to style a box to your liking using a simple graphical interface. Once you have the box styled, press the “Get the Code” button and you have the CSS code necessary to style any object on a site you are working exactly like you have styled the box. This works great with Dreamweaver and using HTML5.

Photoshop Express – Photoshop for the iPhone/iPad!

Yes, Adobe has made a version of Photoshop for iPhones and iPads, and the best part? IT’S FREE! Here is a link to a video that demos this new app: http://www.youtube.com/watch?v=2hui0p_qI-Q

This is a great application for photographers looking to edit their photos on the go or for casual user who would like to edit or enhance their photos. Not only does it allow simple editing and enhancement all by touch, but also gives you the option to upload directly to Facebook and Picasa or share to friends via email.

Photoshop Express, I’m sure, will have photographers and graphic designers very excited, but another reason this app is so significant is that it is a precursor to having full desktop applications that have gone completely  mobile. This very well could be the beginning of the end for desktop computing in general.

Quick Tip from Jerome – Dropbox

If you have a Flash or InDesign project that you are putting time into both at work and at home or just have files that you access and edit frequently from multiple machines, then Dropbox is a tool that you should look into. Dropbox is available for essentially all platforms, mobile, Mac, Windows, and even Linux. Once you have installed Dropbox and logged into your account, it creates a Dropbox folder in your home directory. Anything you put in that folder from then on is synchronized over the internet to any other devices on which you have Dropbox installed. For mobile devices you merely open the Dropbox app and you then have access to these files as well. Bear in mind that Dropbox is completely free for up to 2GB of storage, not a bad deal at all!

Now if you are feeling saucy and really want to take full advantage of this great tool, you can further its usefulness by using symbolic links or “symlinks”. What these symlinks do is to redirect anything you put into a folder into another folder. For example, if I created a symlink between my Documents folder and a folder on my Dropbox, then anything I put into my Documents folder will go right into my Dropbox. Pretty slick. Just know that it will remove the original folder from your system. In the case of our example, my Documents folder would disappear unless I removed the symlink. So be sure to back up. (It wouldn’t be a bad idea to know how to remove this symlink either.) Are any other ActionScript 3.0 developers salivating over this besides me? What this means is that you can have all your 3rd party or home brew libraries and classes stored in the ‘clouds’ and any updates you make on one machine goes to all. Now that’s better living through technology.

Need help with this symlink business? Here’s a link:
Symlink Tutorial

The End is Near, Part II

Time is quickly running out for Ascend Training’s regularly scheduled CS4 classes. Our last CS4 hands-on training will be:

Dreamweaver CS4 Level 1, Chicago, Aug 30 – Sep 1, Deerfield, Oct 11 – 13

Ascend Training is happy to put CS4 classes on our regular schedule for groups of 3 or more people. We will also be happy to provide our CS4 curriculum for our on-site training. Any of our students taking CS4 classes are still eligible for 8 months worth of free retakes in the CS5 version of the class. Those retaking a class in CS5 who have originally taken CS4 classes will also have the option of buying the book used in the new class.