Archive for the ‘Knowledge Base’ Category

October 15, 2012 1

Making mobile design workflow easier with Adobe Edge Inspect

By in Knowledge Base, Tutorials

At the end of September, as part of the Creative Cloud Suite, Adobe released Edge Inspect, a tool to enable you to preview and inspect web designs on multiple devices.
Edge Inspect achieves this by enabling you to wirelessly connect a mobile device to your computer through the Chrome browser. Whatever is displayed in the browser, is automatically displayed on the mobile device. This is excellent when you want to quickly see how a change to your css affects what is looks like on a range of mobile devices.

The idea
As a designer, I wondered if I could utilise this syncing to mobile devices, but instead of displaying HTML and css, I could display a mockup jpg or png of a mobile site – seeing the mockup on the mobile would help me hone the design before I handed it over to a developer to code.

The setup
Firstly what I had to do was download, install and set-up Adobe Edge Inspect. This is a 3 phase process:

  1. Download and install Edge Inspect from the Creative Cloud. If you aren’t a paying subscriber to the Creative Cloud you can still get hold of Edge Inspect by logging in with an Adobe ID – as a non paying customer you will be limited to connecting 1 device at a time.
  2. Download and install the Edge Inspect app to your mobile device/devices through your device’s app store
  3. Install the Edge Inspect plugin for Chrome from the Chrome Web Store

What you can’t do with Edge Inspect is load an image into Chrome and just expect it to display on the mobile device. I had to get localhost setup on my computer and sit down and get a bit creative with some code!

The outcome
Now just getting an image to display in a web page would be too easy, so I thought it would be much better if I could load a series of images and compare a number of designs at once. What would be even better would be to split the designs into separate folders and dynamically load the images in from a specified “project” folder…this is what I eventually came up with.

How it works
In this example I have 2 folders set up called folder1 and folder2. You specify which project folder to get the images from by changing the name specified in the url – “dir=folder1″

I also thought it would be intuitive to navigate through the image using the swipe functionality on smartphones and for this I found a fab free javascript and css photo gallery for mobile devices called PhotoSwipe, which I downloaded and incorporated into my script.

If you  load the page in Chrome and connect your phone with Edge Inspect, you can navigate through the images by swiping left or right on your smartphone.

Improvements
At the moment all images are the correct dimensions for my phone, a Samsung Galaxy S3. I found when viewing the images on an iPhone, they didn’t resize to 100%  viewport width and also when viewing the images in landscape, they again didn’t scale accordingly!

Despite needing to make some functionality improvements, in its current form, I have still found it very useful to get a rough idea of what a specific design might look like on a mobile device, before getting a developer involved.

You can download the source code for this example here.

 

Tags: , , , , , ,

September 14, 2012 Off

First mobile post

By in Knowledge Base, Miscellaneous

I have just downloaded and installed the WordPress app for android and this is my first ‘roaming’ post!
Just to make things slightly more complicated my host blocks the xmlrpc.php method for updating blogs but thanks to a nifty little plug-in called ‘rename xmlrpc’ I am able to update from my android device…no holding me back now!

May 22, 2012 Off

InDesign CS5 wont export to PDF!

By in Knowledge Base

I am not talking to InDesign at the moment! I fell out with it over the weekend, when I booted up my PC to finish off a design test piece for a job interview and it decided to go all gaga! 4 hours later, almost a total PC re-build and dramatically grayer hair, I finally managed to get everything up and running again and thankfully got the test piece in on time!

To rub salt into the wound, I subsequently needed to re-export an existing InDesign file I had to PDF. I went through the exact same steps I usually do, but it was refusing to produce me a PDF! InDesign didn’t even give me the courtesy of telling me what the problem was in an error popup!

After numerous reboots, update installations, re-saving of the original InDesign file to another location and with a different file name…all to no avail I might add, I finally stumbled across the solution.
The .indd file was pretty large and bloated so I exported it to an IDML file (InDesign Markup file) which flushed out all the unwanted data. I re-opened this IDML file in InDesign and exported this successfully to a PDF!

Please InDesign, just be nice to me!

Tags: , ,

April 24, 2012 1

Adobe Creative Cloud CS6

By in Knowledge Base, Miscellaneous, Research

Adobe Creative Cloud CS6
 
The buzz word this year is “The Cloud” and Adobe have done their bit adding another couple of oktas, by releasing Adobe Creative Cloud CS6.

In Adobe’s own words…”Adobe Creative Cloud is the digital hub that lets you download and install every Adobe Creative Suite 6 application; access online services for file sharing, collaboration, and publishing; and benefit from new apps and features as soon as they’re released — giving you the freedom to create anything you can imagine.”

How does it work?
Adobe Cloud works on a subscription model. If you sign up for a year, you get it at the monthly cost of £46.88 or if you just pay on a rolling 1 month basis it works out at £70.32 a month (inc VAT)
During your subscription you can download and install any of the applications from Creative Cloud CS6, but as soon as you stop your subscription, they cease to work!

So what do you get for you money?
The list of software available to you through the subscription is amazing – it includes:
Photoshop Extended, Illustrator, InDesign, Muse, Acrobat X Pro, Flash Pro, Flash Builder, Dreamweaver, Edge Preview, Fireworks, Premiere Pro, After Effects, Audition, SpeedGrade, Prelude, Encore, Bridge, Media Encoder, Business Catalyst, Typekit and Story Plus and 20GB of cloud storage. Unfortunately it doesn’t include any of the Touch Apps which have to be purchased separately at a cost of £6.99 each.

So is it worth subscribing?
The major plus to this subscription model is that you get access to the latest feature updates as soon as they are released, and you don’t have to scrape together the funds to purchase another copy of said piece of software.
If you compare the yearly cost of subscribing to the service with the one off cost of an OEM copy of the Adobe Master Collection (which is what you are in effect getting access to) which retails at £2,667.60, it equates to paying for it over a 4.7 years period with the added benefit of feature updates.

Will I be subscribing?
I am the lucky owner of a copy of the Adobe Master Collection CS5. The work that I do means that I predominantly use Flash Pro, Illustrator, InDesign, Photoshop and Dreamweaver…and haven’t even installed any of the other applications in the suite so the subscription seems less appealing to me due to the reduced number of applications I want or need access to.
The other, more important issue is that many of the clients I do freelance work for are not up to date with the newest version of the Adobe Suite either – this causes problems when working with InDesign and Flash and having to provide them with source files that they can open and work with! I would gladly pay the subscription if Adobe produced a little app which enabled you to save back to any older version of Flash rather than limiting you to just saving back 1 version.
Unfortunately, for now I will be sticking with my OEM copy of Adobe CS5 as it is more than adequate for my needs, but I am sure at some point in the future we will all be heading down this subscription route!

 

Tags: , ,

March 22, 2012 Off

Beautiful Stamen map tiles

By in Knowledge Base

Stamen have released some amazing map overlays that are free to use where ever you use OpenStreetMap Data.
There are 3 styles available – Terrain, Toner and Watercolour. Toner, a very graphic, black and white style with ‘Pop Art ‘ style shading, and Watercolour, are probably the 2 most pleasing options and certainly make a welcome change to the usual Google style Maps we see everywhere on the Internet now-a-days. Below are 2 examples of the Watercolour and Toner style maps depicting the same part of Oxford – unfortunately no data is available for this area to show an example of the Terrain map style…but Oxford is pretty flat so it wouldn’t look very interesting anyway!

Watercolour

Toner

Tags: , , , ,

March 9, 2012 1

Flash to HTML5 canvas

By in Animation, Knowledge Base

With the announcement by Adobe in November 2011, stating they were no longer going to be actively developing the Flash Player for Mobile Browsers, and as a designer and animator who has been using Flash now for the past 9 years, I have been quite releived, and excited, about the developments being made in Flash to HTML5 conversion.

Google Swiffy Google have made good headway in creating a tool for converting Flash animations to HTML5 using Swiffy. Swiffy is currently in 2 forms, a plugin for Flash CS4 (or newer), which enables direct export of files to HTML5, and an online conversion tool you can upload and convert swf’s to HTML5.

By no means does Swiffy provide a ‘one button click’ solution for converting all your swf’s into HTML5, but they are constantly improving and releasing support for more and more Flash functionality – a full list of what is currently supported can be found here. I have been surprised how many of the animations I have put through Swiffy so far have converted successfully.

Adobe CreateJS Adobe are also working on their own toolkit for CreateJS which will allow direct export of content created in Flash Pro to HTML5. The video below shows Tom Barclay, Senior Product Manager for Flash Professional, giving a ‘sneek peek’ at this future functionality.

What should be good about Adobe’s own solution is that it will be more developer friendly. Instead of a socking great thesis of code that Swiffy churns out, Adobe’s should be more structured allowing easier, post editing and tweaking by a developer.

I am sure most people only think Flash is a tool for creating overly animated and extravigant websites, annoying banner adverts, and games, but it isn’t! For the past 8 years I have been working for a company that produces interactive animations and activities for schools, and there is simply nothing else on the market (at the moment) that provides a framework to build activities with such visual engagement, interactive functionality and flexibility, quickly and easily, like Flash does…but I excitedly await the new developments being made.

Tags: , , ,

  1. Pages:
  2. 1
  3. 2
  4. 3