Let’s start with doing a drawing, which is not in perspective and then converting it so that it is in perspective.

We’re going to draw a simple window. To make things easier, I’ve grouped all the objects within this.

Basic Window

Now bring up your Perspective Grid, by clicking on the Grid Tool in the toolbar.

Choose the plane from the gizmo, you’d like to put the window into.

Now use the Perspective Grid selection tool to drag your window and you’ll find it jumps into that plane.

Jump into Plane

As before, we’re going to make a few more copies, so using your PG tool, drag the window whilst holding down the Alt key. Remember you can repeat the copy by using Ctrl/Cmd D.

Copy and Repeat

Now I’m going to copy these into the right plane:

By dragging an object using the Perspective Grid selection tool, it will stay within the plane it was drawn in, even though you click on a different plane in the gizmo. So how can we change planes.

The key to this is using a shortcut. If you hover over the gizmo, you’ll find that next to the left plane there is a 1, the right plane a 3 and the horizontal plane a 2. The no-plane is a 4.

To copy the windows from the left to the right plane, I selected them all (Ctrl/Cmd A), started dragging them using the Perspective Grid Selection Tool, and whilst I was dragging them, I held down 3 on the keyboard, which will snap them to the right hand grid – whilst also holding down the Alt key in order to make a copy.

Copy into Right Plane

If you wish to stack objects in domino type fashion, you can move them along their ‘Z’ (depth) plane. by holding down the number 5 on the keyboard, whilst moving them. I’ve done this whilst holding down the Alt key and using Ctrl/Cmd D to create a stack of windows / shapes.

First one of stack example

Domino Style

Enjoy the Perspective Grid, and create some funky stuff!

Initial Grid

The most important part of the Perspective Grid, is knowing how to get rid of the jolly thing when you don’t want it!

There are 2 ways to get rid of it.

If you are in the Perspective Grid tool, you can go along to the little gizmo that sits in the top left hand corner

Gizmo

If you click the little x in the top left hand corner of this gizmo, this will remove the Perspective Grid from your artboard.

The second way to get rid of it is to go to the View menu, and go to Perspective Grid, and choose Hide Grid.

Hide Grid via View Menu

If you choose to keep the Perspective Grid on and you start drawing with one of the basic drawing tools, ie Ellipse or Rectangle, you will find that you are drawing in a certain plane. You can change the plane you are drawing in by clicking on the appropriate plane in the little gizmo.

Left Grid

Right Grid

Horizontal Grid

If you don’t want to draw on any plane, then click the area surrounding the little cube, inside the circle of the gizmo – No Active Grid.

No Active Grid

If you want to move an object around whilst still keeping the perspective, do not use the standard Selection Tool. Instead, use the Perspective Grid selection tool.

Perspective Grid Selection Tool

The green circle was drawn with the left grid using the gizmo, and likewise, the blue rectangle was drawn using the right grid using the gizmo.

Shapes

To copy an object, use the Perspective Selection Tool and hold down the Alt key and drag and it will copy in perspective. If you then use the shortcut Ctrl/Cmd D, it will then repeat this copy.

Copy & Paste Shapes

In the next blog post, we will look at the Perspective Grid in more detail.

Photoshop CC

Some of the new features announced in Photoshop CC include:

• Camera shake reduction – helps to reduce motion blur in your photos.
• Smart Sharpen – analyses images to produce the best possible sharpening, while minimising halos and noises.
• Adobe Camera Raw 8 means edits can be applied as a filter to any layer or file.
• New Healing brush enables you to work with a brush stroke instead of just a circular area.
• The new Radial Gradient offers powerful controls to draw attention to the focus of an image
• Upright tool automatically straightens horizons and applies perspective corrections without distorting the image
• Edit rounded rectangles, and adjust corner radii at any time.
• Select multiple paths, shapes and vectors at once.
• Build web designs in Photoshop that can easily be turned into responsive websites thanks to integration with Edge Reflow.
• New workflow from Photoshop CC to Edge Reflow CC will enable creatives to build web designs in Photoshop that can easily be turned into responsive websites.
• Conditional Actions let you automate routine processing jobs using if/then statements, allowing you to automatically choose between different actions.
• lots more

InDesign CC

New features in InDesign CC include:

• Faster performance, especially when exporting PDF files.
• A new updated user interface, more consistent with other Adobe tools.
• HiDPI and Retina display support.
• Font previews let you browse through fonts and see each one applied to selected text.
• Save to Cloud lets you make your files, including layers, accessible on any device. Changes are tracked, so you can access previous versions.
• EPUB / HTML enhancements making it easier to produce high-quality EPUB files from InDesign.
• Improved CSS export options
• Create QR codes within InDesign and more.

Illustrator CC

New features in Illustrator CC include the following:

• Art, Pattern, and Scatter brushes can contain raster images, so you can paint with a brush made from a photo.
• Integration with Typekit and sync fonts to your system
• Import multiple files into your Illustrator layout at the same time
• CSS code generation for copying and pasting into your web editor.
• Instantly switch between area type and point type.
• Create pattern with auto-generated corners.
• Automatically package fonts and linked graphics into a single folder.
• Links panel shows all of your placed elements – text and graphics.

While some people find it strange not buying software as an outright purchase, it actually works out quite cost effective if you have historically upgraded every couple of versions.  The pricing for Creative Cloud also means you can get started with the full range of Adobe products for around £40.

The Baker framework logo

This was not something I had come across before, so I thought I would look it up and see what it was all about. The Baker framework is an html5 ebook framework, specifically designed for publishing ebooks on iOS devices, using open web standards. Since these devices use the webkit rendering engine you can add audio, video, and animations within your ebook pages. Leveraging CSS3 you can change your layout in a responsive way, so that your ebook works in portrait or landscape modes. The framework itself is open source, using the BSD license.

This framework is based upon the HPub specification (html publication), and is specifically designed for creating rich content books with a simple specification. Looking over the example you get when you download Baker, I must say the whole structure is much simpler than the epub structure. Here is a simple example that I created by exporting from InDesign using the in5 plugin…

Baker book

All the pages are controlled by a simple json file. Again much simpler than the epub specification. The order of the pages can be seen inside the json file (book.json). All-in-all a very nice setup. Since this is for iOS devices, this means that the current details are mac-based.

Also, you can download an Xcode project, which opens up Xcode and then you publish your book out properly. Since Xcode only exists on a Mac, you therefore can (at the moment) only create output for newsstand using a Mac. The files of course can be created anywhere as they are only html5, json, javascript, images, etc and thus could be setup using any IDE that you are comfortable with.

It is the final output that has to be done on the Mac (as far as I can see). Reading the documentation it looks like you can package your HPub book as either a newsstand publication or as a standalone app. Both ways, however, require you to use Xcode, and thus do your publishing on a Mac.

I must say that I really like this idea, and the code and file/folder structure is really simple and logical. It is html5-based and you can add all sorts of stuff with CSS3 and JavaScript. I definitely plan to play around more with this framework.

<meta name=”generator” content=”In5 v1.4.6″>
<meta name=”viewport” content=”width=device-width”>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

The first meta tag is obvious, and the next one is commonly used for mobile/tablet work to set the viewport. But the next two are interesting. Reading them you can see that they look like they change the behaviour of the web page. So let us look at the safari documentation and see what it has to say on these meta tags.

The apple-mobile-web-app-capable meta tag sets whether the web application runs in full-screen mode (if set to yes). This is really handy, and I can see this being very useful for on-line presentations and as such.

The apple-mobile-web-app-status-bar-style meta tag sets the style of the web app status bar, and has no effect unless the previous meta tag is set. You can choose default (status bar is normal), black, where the status bar has a black background, black-translucent (the status bar has a black and translucent background). If the setting is default or black, the web content is set below the status, however if you set it to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.

Coupled with the Mac version of Safari being able to remotely debug your web pages, this makes for some interesting results for you to play around with. So when you are exporting to html5 from InDesign (using the in5 plugin) check the source code, and see what else you can do.

text render 1

But look what happens when I set this to HTML with local font embedding (where possible)…

text render 2

The heading is text, it can be highlighted, and it is in the font that you chose from within InDesign. Here is what the css looks like…

css custom font styling

Lovely! However be careful, this means that the font you choose from within InDesign will actually be downloaded onto the viewer’s machine – this is a breach of copyright for a lot fonts. So only do this if the font you are using is open source. Google has a good list of open source fonts, as does font squirrel, and dafont.com. However always make sure that the license allows you to use it how you wish. If you cannot find a license, do not use the font.

Another nice feature is the ability to mark this page and its contents as things that need to be cached for offline viewing. When exporting with in5 go to the advanced options and set the Application cache to Cache all. Then click done and look at the result…

cache manifest file

html cache setting

In the next post on this subject I will talk about the Baker ebook format and how the in5 plugin helps you.

Simple InDesign layout

I am now going to change the main content from one column to two, the top three boxes I will merge into one, and then duplicate the page 4 times, so I end up with 5 pages total. Within each main content box I will place a picture, and place a title at the top, indeed you could use InDesign’s Live Caption featured here to get your titles automatically placed. Also using the Live Caption feature means that the title will then update when you place a new picture into the same box as the previous picture. So we now have this…

html5 slides

With several pages now, we can use the Export html5 with in5 command to see what get when we have this sort of setup. Selecting this command and looking in the Basic options notice that we can set the Page format (currently set to Slider – Fade in). We can also enable swipe navigation (for tablets, etc).

indesign export to html5 with in5

So when I now click on OK my web pages becomes…

html5 slides

…making sure that I set up my output to Web. Nice and easy. I get buttons on the left and right to click on, can change the Page format to these…

Continuous scroll (Vertical/Horizontal)
Liquid
Slider (Vertical/Horizontal/Fade In)

…and re-export in just a few seconds. Very nice. But what about the other choices of exporting? Well we have two more – iPad Web App and Baker framework (HPUB). The latter I will not cover in this post but we will now have a look at the former. If I change my output to iPad Web App and click on OK what do I get? Well a new folder, containing my output. But when I open up the index.html so generated, this message appears…

in5 message

Firstly we get a nice link that we can use to send an email to our iPad. So we can easily test this on our tablet – but you must make sure that you have uploaded your files to a web server, as emailing a link to a file on our desktop computer will not work. A tablet cannot just look at such a file, it must have a proper url. However this is easy to do and very easy to test. Just upload the folder called html5_output onto your web server and open up the index.html file generated by the export. Click on the link, send an email to yourself and voilá. A nice set pages that swipe on your tablet.

A word of warning, do not connect to an address with localhost in the name – it seems that the browser within an iPad does like that and you will get a connexion error. Just replace the words localhost with the actual ip address of the machine, e.g.

192.168.15.15:8888/html5_output/

Refresh the page if necessary and you have a lovely little web-based app that swipes beautifully. Anyway, that’s it for now, and I will blog another time about something that I spotted when outputting to a web-based app and also about the Baker ebook framework output option as well.

Currently the plan is make a simple platform, side scroller, and isometric game, and maybe a simple word game during the course. This will give me plenty of scope to showcase various tools, apps, and JavaScript libraries. Here is a list of JavaScript game development libraries that I have come across so far…

JavaScript libraries

sheetenginejs
createjs
isogenic engine
melonjs
kinecticjs
impactjs
box2dweb
cocos2djs

Applications

construct2
stencyl

As you can see there are quite a few, and some are simpler than others, but these are the ones that I plan on covering in the course.

createjs
box2dweb
sheetenginejs
isogenic engine
kinecticjs
impactjs

The list of topics and libraries that I plan to cover will no doubt change, and if any of you know of any libraries please post and let me know – I am always curious about anything new.

I also plan on covering the basics of creating your game assets, 2d and 3D, and on how to get your 3D artwork out to a game – say using Blender to create a character and then using whichever JavaScript library to create and control your character within your game.

in5

Firstly I will create a simple page, based on the web intent options. Nothing fancy, just 1 column, 1024 x 768 pixels. First I will layout a few simple boxes, and then colour them in. I am not worried about content as of yet, I just want to see what the InDesign export to html command does compared to the in5 plugin.

Simple InDesign layout

So what happens when we export this to html, using InDesign’s own export command (File > Export)? Well we do get some options, three panels to be precise. The first one is a general set of options…

InDesign to html general options

Here I will select the document option (I have only one page in my document, so this option is fine). I am not using XML so I will base my html layout on my page layout, and I have not lists, so the rest of these options I can leave as the default.

My next set of options are for images, and at the moment I have no content, so I am not going to change anything here. I can set my image format here, choose whether to optimise my images or not and set my alignment and spacing options.

InDesign to html images options

Let us look at the last set of options – Advanced. This is dealing with CSS and JavaScript – I have no styles set up at all, and I am not applying any JavaScript here, so I will not changing anything. At the moment I am purely concerned with layout.

InDesign to html styles and scripts

So now with a simple layout, coloured boxes in effect, let us see what we get when we use InDesign’s File > Export > HTML feature. I get an html page, and a folder holding my css. Looking at the web page there is only one div, no colour, nothing. No multiple boxes, no layout comes over at all. The code is html5 though, it has an html5 doctype, but nothing has come through from the original layout…

html page code

So what do we get using the in5 plugin?After installing this plugin go to File > Export to HTML5 with in5 . We are presented with four panels worth of options. However, I am going to just leave all options alone and just click on OK. This is what I get…

indesign to html5 with in5

A million times better. All the boxes have come through, all the colours have come through. Remember, I have not set up any stylesheets within InDesign at all, I just wanted to see what would happen if I just laid out coloured boxes. Here I now get what I was hoping for, coloured boxes within my web pages. Great – but what about the code? What code has actually been produced (both css and html)?

in5 code output

Looking at my screenshot, you see that the html is html5, and it is nicely laid out with divs, lists, and a nav element. Within the nav element, the boxes have been created using the button element, rather than a div. All-in-all a nice structure. But what about the css? Obviously for colour and layout to work, we must had some css generated. Well, a new folder was created on my desktop, so let’s have a look…

in5 folder output

In comparison, here is the InDesign to html folder setup…

indesign to html folder output

Just one file, with very basic css inside. Whereas the in5 output gives me all my layout setup in html5 (divs, nav, lists, etc), plus it has styled it properly (position, colour, etc) and it has even added in JQuery (not that I need it in this example). All-in-all a much better result. The code is clean and simple, and even if I do not like the css and html created, it is very easy to change.

When you are creating a design for a webpage, you frequently have to wireframe/sketch out your design (using Photoshop etc). But then you have to get the result into code. So typically the web developer receives a picture and then they have to start from scratch. Here though, the web developer has a load of code already created for him/her – this means that they can hit the ground running, without starting over. This will reduce your production time significantly.

I will leave it there for now, but I will post shortly about to use this plug-in for creating slideshows, testing your web pages on your iPad, and using the Baker framework for pubs. If you are interested further, we do cover these and many other topics within our advanced InDesign course…

Advanced InDesign

So what does this mean? Here are some answers we have pulled together to try and help you get to grips with this change:

Do I still install the software?

Yes you still install all the products and they will be run locally on your machine. The products simply check back with Adobe’s servers once within every 30 day period to ensure your subscription is valid.

Will it work without an internet connection, for example on a train, in a plane, or up a mountain.

Yes. The software is run locally, you can pull out the internet cable / turn or off the Wifi and it works just fine. Of course you won’t be able to access any of the online services like Kuler or cloud storage features, but the core products such as Photoshop, InDesign, Premiere, etc.. will all run just fine, and you can still save things locally on your machine. You just need to connect up at some point in the 30 day period so it can validate your subscription.

What about Upgrades?

With creative cloud there won’t be major updates once a year like there was with Creative Suite, instead Adobe is aiming to add new features as they are ready on an ongoing basis, with notifications of new features sent to users through the system.

What’s the cost?

There are various options and pricing tiers, but it ranges from £17.58 per month for a single app edition through to £46.88 per month for a the full Creative Cloud. There is also preferential pricing available for Students and Teachers, and if you own a Creative Suite 3 or later licence you can currently get it for £27.34 per month

What do I get in Creative Cloud

OK, here’s the best news, theres a lot. It’s like the old Master collection of Crreative Suite but even better and you get the following tools in a full Creative Cloud subscription:

Photoshop, InDesign, Illustrator, DreamWeaver, After Effects, Premiere Pro, Muse, Acrobat Pro, Audition, Bridge, Encore, Flash Builder, InCopy, Lightroom, Prelude, SpeedGrade, Edge Animate, Edge Inspect, Edge Web Fonts, PhoneGap Build, Edge Code, Edge Reflow, Typekit, Digital Publish Suite (single edition), Behance, ProSite, Business Catalyst, Kuler, Story, Photoshop Touch, Kuler iPhone, Ideas, and more.

OK, you probably won’t use all of these (understatement of the year I suspect), but even if you only used 3 or 4 of the main design tools it probably works out cheaper than buying the old Design Suite and upgrading every 18 months.

What are the advantages

More frequent upgrades
Where buying the box used to cost thousands there is no upfront cost with Creative Cloud.
You get everything, together with a load of online services
If you don’t need it anymore you can cancel it (depending on the agreement you signed).

What’s the catch

It’s simple really, you stop paying, it stops working. The new model bears more resemblance to a mobile phone contract than buying software and it’s probably easier to think of it that way. Overall it will work out less expensive for most people, however if you are one of those people who only upgrades once every 5 to 10 years your going to be paying more, albeit not all in one go.