Our favourite creative apps for iOS and Android

Our favourite creative apps for iOS and Android

Contrary to popular belief, we designers aren’t actually chained to our workstations all day long. But even when we’re on the move it’s good to be able to stay creative, sketch out any spur-of the moment ideas and touch base with the office from our iPad and mobile devices.

When we do get the occasional opportunity to nip down to the shops and restock the biscuits, these are a few of the top creative and collaborative iOS and Android apps we use…


“When it comes to type, one of my favourite apps is WhatTheFont (MyFonts, Free). Say you see a font you like on a sign or advert – just take a photo with your iPad or iPhone’s camera and WhatTheFont can help you find out what it is. Interested in where fonts come from? The Typography Manual (Justin Stahl, £2.49) is everything you need to know about type, and a great read.” – Paul

Fontest (No Allegiance, free) is great, as it lets you preview how your fonts will look on Android devices. It comes pre-loaded with six high quality fonts for free, but you can upload your own TTF and OTF fonts, and resize and customise to your heart’s content.” – Liana

 Colour management

“If you need access to all your Pantone swatches while you’re on the move, there’s a solution in the myPantone app (X-Rite Inc, £6.99, pictured top). There’s a whole host of Colour Libraries included, and it even lets you build colour palettes to share with colleagues and clients.” – Liana

“I’d like to add Color Expert (Code Line, £9.99) to Liana’s suggestion. This colour app helps you create colour swatches and sets, and also allows you to pick colours directly from images. Very useful!” – Paul


“There are a tonne of apps I use on both my iPad and iPhone to keep me productive. Acrobat Reader (Adobe, free) lets me view PDFs as they’re meant to be on mobile devices, Feedly (DevHD, free) means I can manage my creative feeds – Google Reader, Google News, Youtube, RSS News Reader – within a beautifully designed app, but perhaps the most vital is the Toggl Timer (Toggl, free) app. As we use Toggl to track time in the office, this is a life-save for when you forget to stop your timer when you leave work!” – Paul

“I’m currently loving the Google Drive (Google, free) storage app myself, as it really helps with collaboration in working on pages, particularly if the clients or collaborators are far away. I also always use Wunderlist (6 Wunderkinder, free) to save links to interesting articles, tutorials and resources that I know I will need in the future.” – Liam

 For more information on Apple iPad, apps and design workflow, give us a call on 03332 409 306 or email sales@Jigsaw24.com. You can also follow @Jigsaw24Design and Like our Jigsaw24 Design Facebook page to keep abreast of our latest design news.

Create a native app using just HTML, CSS and Javascript with Adobe PhoneGap

Create a native app using just HTML, CSS and Javascript with Adobe PhoneGap

It used to be the case that mobile app creation required a hefty programming skill-set in languages such as Objective C or C++. While those skills are still a huge asset in app development, it’s now possible to produce fully functioning cross-platform apps with just a knowledge of HTML, CSS and Javascript (e.g. jQuery Mobile or Sencha), using Adobe PhoneGap for Dreamweaver.

What is PhoneGap?

The PhoneGap Service is the most accessible way of creating apps for us front-end designers, and it’s available in Adobe Creative Suite 6. Acting as the bridge between your coded app and a fully-functioning app ready to use on an iPad or other mobile device, you can code your app at the desired dimensions like you would a website (with Javascript for dynamic elements) and PhoneGap will convert it to an app. The best thing about it though, is it’s free (hooray!). Run by Adobe, PhoneGap is accessible either via the web, or directly in Adobe Dreamweaver CS6 with PhoneGap Build.

Phone Gap _2

The only issue with PhoneGap (and app creation in general) is that Apple requires an Apple developer account – which entails a background check and a fee of around £60 a year. If you try to export the app for iOS without an Apple developer account, it will fail, so make sure you’re signed up before you do all the hard work!

How do I create an app?

PhoneGap uses Javascript languages jQuery Mobile or Sencha to let you use native functions on the device – such as camera and call etc. jQuery is easier to use and has simpler results, whereas Sencha is more advanced but can yield better results. Here’s how:

– Start creating your app in Dreamweaver using HTML (including HTML 5), CSS and Javascript so it is functioning exactly as you want the app to.

– Go to the PhoneGap Build tab under ‘site’ in the Dreamweaver toolbar, and select ‘PhoneGap Build’. The panel opens, and you can choose how to create the project.

Phone Gap _1

– Click ‘create new project’ and then ‘rebuild application’. The server then builds the native apps (Apple won’t work until you add your developer sign in key as said earlier).

– Once the app is built, you can choose to view a simulation, download it to your computer desktop, or generate a QR code to download the app onto your phone.

– When installed, you have a fully functional native app, built using HTML CSS and Javascript (e.g. jQuery Mobile or Sencha). Score!

It’s worth pointing out that PhoneGap is available online for free too, but having it in Dreamweaver where you’ve coded your site makes it much easier to simply click a button and have an app come out of the other end. For more information, take a look at Adobe’s explanation video.

To start creating your own apps using just HTML, CSS and Javascript, you’ll need Dreamweaver’s PhoneGap, available in Adobe Creative Suite 6. Call us on 03332 409 306, email sales@Jigsaw24.com. For all the latest news, follow @WeAreJigsaw24 on Twitter or ‘Like’ us on Facebook.

Top design tips: Data merging and Print Booklet in InDesign

Top design tips: Data merging and Print Booklet in InDesign

For my latest roundup of clever little hints to help speed up your workflow, I’ve aimed my designer vision squarely at Adobe InDesign CS6. Specifically, the Data Merging feature, which lets you quickly customise a document, much like Mail Merge but for whole elements of layouts, and Print Booklet – an oft-overlooked tool for producing professional printed proofs. Enjoy!

Data Merging in InDesign CS6

I’ve used the Data Merging feature in Adobe InDesign CS6 a few times before, but was reminded of just how effective it is recently when a particular job came up. We were asked to create and print 50 proposal documents in-house to send out to companies, with personalised company logos, contact names and company names on each of the 15 pages. Initially the designer involved thought they’d have to create 50 documents, and each one would have to be manually put together – placing 50 logos and ‘finding and replacing’ company names. But the neat little Data Merging script meant we could cut out that tedium. Here’s how it works:

Screen Shot 2012-10-22 At 11.02.23

– You’ll find the panel under Windows > Utilities > Data Merge in InDesign CS6.

– Using this panel will allow you to assign areas of an InDesign document with tags that link back to a CSV file. The CSV file should contain all the personalised elements you require.

– The small example below shows we need to personalise a full company name, company name (shortened version is applicable) and we want to add a photo change – in this case a company logo.

– Once we have the CSV file with our 50 companies, we need to load it into the Data Merge panel. Go to the flyout menu and click ‘Select Data Source…’, then find your CSV file.

– The fields from the CSV file should now appear in the Data Merge panel.

Screen Shot 2012-10-22 At 11.04.51
– Now it’s simply a case of telling InDesign where it needs to put this information. This is done by selecting the type that need to be personalised and then clicking the correct data. InDesign will insert << Company Name >> (or the appropriate data tag) where this data needs to be added.
– To add a photo change, create a blank Frame and then select the data source to fill this, in our case @Photos.
– Once you’ve added all your data fields, you’re ready to create a PDF or a merged InDesign document. There are further options to explore at this point but basically if you click OK, InDesign should create your personalised document for how ever many versions you require.
And that’s it – simple customised documents in a fraction of the time it would take to individually make changes for each company. If you get stuck, there’s more information on data merging at the InDesign community help page.


Print Booklet in InDesign CS6


We produce a range of printed marketing material at Jigsaw24, including catalogues of varying page numbers. For mocking up proofs to check and get internal approvals on, we use another handy little feature tucked away in InDesign – Print Booklet. This allows you to take your chronologically prepared pages and print it as printers pairs. It’s a very useful and straightforward feature for proofing, or if you want to get a flavour of how your document might be working.
Screen Shot 2012-10-22 At 11.44.25
Simply head to File > Print Booklet to open the options menu. From here, you can choose what kind of page arrangement you’re after – 2-up Saddle Stitch, 2-up Perfect Bound or Consecutive. You’ll also find extensive options for creeps, bleeds, margins and more. It’s pretty self-explanatory, but there’s more information about all the options and troubleshooting at Adobe’s community help site.
– Like what you see? Both these features are available in InDesign, and we’ve currently offering great savings when you upgrade from CS3/4 to Adobe Creative Suite 6!
Call 03332 409 306 or email sales@Jigsaw24.comFor all the latest news, follow @WeAreJigsaw24 on Twitter or ‘Like’ us on Facebook.