Latest Blog Posts

With Adobe’s recent announcement that Creative Cloud is to now supersede Creative Suite, we thought it might be nice to take a look at some of the new features that have been publicly announced as coming in Creative Cloud, especially in the main design packages.

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.

Recently I blogged about exporting to html5 from InDesign using the in5 plugin. Looking through the various options that this plug-in gave me was an output option to something called the Baker framework.

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.

Running on from my last post on using the in5 plugin to export to HTML5, I noticed that when you chose as an output the iPad web app option, testing this in your browser on your iPad produced an interesting result. The pages were all in fullscreen mode, and they were locked that way. You could not see the normal browser buttons etc, you were fully immersed in the set of pages that you exported. This was interesting, and I guessed that it must be due some meta tags that were telling the browser what to do. Looking at the source code, here are the meta tags created when you export…

<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.

Running on from my last post, where I was using the excellent in5 plugin for exporting to html5, I wanted to mention a couple of the options within the export panels. The first is the text rendering setting.This is in the Basic area of the export panel, and previously I had set this to Images (preserves exact appearance). This means that the titles that I used looked right, but were images…

 

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.

In a previous post I talked about a lovely new InDesign extension called in5. It exported to html5 beautifully. But I had only tried it with simple layout and colours. Now I am going to follow on from that example but I am going to export 5 pages instead, and I am going to add some content. First off here is my original sample from previously…

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.

I am currently in the process of creating a new course (which is always great fun). This time round it will be on HTML5 game development. HTML5 has come a long way since we started training it 3 years ago, so now I feel is the time to create a game development course using html5, css3, and JavaScript. In order to develop games, though, I will uses a few JavaScript libraries to make training easier. There are more and more JavaScript libraries out there, specifically for game development, that it makes sense to use a couple of them. Here I am going to introduce some of the libraries that I have come across. I have not finally decided on which ones to use yet, but I plan to make three types of games  in the html5 5 Games Development course.

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.

Having done a lot of HTML5 work in recent years, I was looking for a quick way to export my information from various applications that I use all the time. Today I am going to show you how to export from InDesign to HTML5. Exporting to html is easy, unfortunately the current export command is very poor. In order for me to export to HTML5 from InDesign properly I am going to use a lovely extensions called in5. This is not free, but if you need to get your content out to a web-based format quickly, especially into html5, then this is a very useful tool.

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

 

Probably one of the biggest announcements to come out of Adobe MAX so far, is the news that Creative Suite is being replaced with Creative Cloud. This means in the future you won’t buy licences of Creative Suite, instead you will subscribe to Creative Cloud to access all the same products.

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.

One of the most amazing new features of CS6 Illustrator is the new pattern tool. It’s surprisingly easy to use, so let’s go ahead!

 

The first thing I’m going to do is create the shape I want to use for the pattern and I’ve created just a very quick flower shape, which I have dragged and dropped into the swatches panel. Do make sure that your shape, you’re going to use, doesn’t already contain a pattern.

 

Initial Shape into Swatches

Basic Pattern

Pattern Options Panel

Brick Offset Option

Change Overlap

To edit the pattern, double click the pattern (the image you just created) within the swatches panel. This now opens up the pattern option area and shows your image, usually surrounded by a number of copies of itself making up a basic pattern.

 

Basic Pattern

 

The first thing we’re going to look at is the Tile type in the Pattern Options panel. It’s set to grid, but by setting it to the other options, you can create offset rows or columns.

 

Pattern Options Panel

 

Have an experiment with this and see what you like. Don’t forget to try out the Brick Offset option below the Tile Type which will change the amount of offset – anything from a quarter to four fifths.

 

Brick Offset Option

 

We’re now going to change the overlap of the pattern. This can be done in one of two ways. Either change the width and height figures – just below the brick offset. Or, go to the button at the top left hand corner of the panel, called the Pattern Tile tool, switch it on and you’ll notice that it allows you to manually drag the blue box around your original image that controls the surrounding area, by the handles.

 

Change Overlap

 

You can control the overlap of your pattern by changing the overlap buttons (near the bottom of the panel). You can either bring the left to the front, right to the front, top to the front or bottom to the front of the overlapping patterns!

 

At the bottom of the Pattern Options panel, you can control number of the repetitions you see in your preview, as well as changing the transparency of the copies using the Dim Copies option. This is an editing feature only and does not affect your final pattern.

 

When you’ve finished editing your pattern, click the Done button at the top of your page. Your pattern is now in your swatches panel and ready to be used as a fill or on a stroke.

 

Next time, we will be looking at how to add to your pattern, edit your pattern in this area as well as scaling and rotating patterns, and building up complex multi-pattern patterns!

As many of you, who have been creating patterns know, creating a decent repetition in Illustrator has always been a lot of hard work. Trying to make your pattern not look too rigid, did require creating a number of copies of the object to be ‘patterned’, offset them, draw a rectangle around the area to be repeated and sending it to the back! If your rectangle was not absolutely perfect your repeat would not look right and you would have weird overlaps.

All this is now gone with the new Pattern Tool.

Below is a screen shot of the design that I wish to create my pattern with.

Original design

All you do is drag the design into your swatches, and then double click it in the swatches palette and this is how easy it is to create using the Amazing New CS6 Pattern Tool!

Final Pattern

Next time we’ll do a detailed tutorial on how to use all of these lovely new Pattern Tool features.

In January we looked at an Introduction to Adobe Camera Raw and some Beauty Retouching:  and Fixing Common Beauty Problems in Photoshop.

Today, with the same image we’re going to look at beauty retouching in more detail, skin softening in particular. This is a convoluted process but the results are excellent!

So, with our image, I’ve opened in Photoshop and just for these purposes, so we can see the results in more detail, I’ve cropped in to the face, and the first thing to do is to duplicate the image; shortcut is Cmd (Ctrl) J or from the menus, Layer > Duplicate Layer. Alternatively, you can drag your current layer down to the Create a New Layer icon on the bottom of the layers palette.

CloseUp

Next we want to Invert the layer, shortcut Cmd (Ctrl) I or from the menus, Image > Adjustments > Invert.

Invert

 

Inverted Image

Then, we need to make this new inverted layer into a Smart Object. There are two ways of doing this from the menus. Layer > Objects > Convert to Smart Object or Filter > Convert for Smart Filters.

You will get a box informing you about Smart Filters being stacked on top of this layer will not preview … – just click OK. Also every time you double click on a Smart Filter or a filter you have added to a Smart Object layer you will get a message – again, click OK.

You will now have a little square at the bottom of the icon on the layers palette.

Smart Filter Added

 

Now we’re going to use the High Pass filter. This is a sharpening tool and normally, the higher you set the radius, the more sharpening is applied to the image. But, because we have inverted the image, what we’re doing is blurring it, so the higher you set the radius in this case, the more blurring of the edges you will have. My image a high resolution, so will add approximately 10. As we’re using a Smart Filter, it is easy to change this later to our taste.

 

High Pass View

 

You will now see that image is a strange grey colour. If you move the radius up and down you will see the image change in the amount of sharpness.

 

Next we’re going to use Gaussian Blur: Filter > Blur > Gaussian Blur. Set it at approximately radius 5 and click okay.

Gaussian Blur

 

Then we want to change the blend mode in the Layers Palette to Vivid Light.

Now, I would suggest zooming into 100% so you can really see the difference in the skin. Trying turning the eye on and off on your layer. You will notice that it is looking out of focus. The best thing to do now is to double click the Gaussian Blur on your smart filter and experiment with changing the radius on that, and the High Pass as well.

You want to be able to see the pores still.

Lastly, add a mask to the layer and Invert (Cmd I) – your mask will go black.

 

Layer Mask – Inverted

Choose your Brush tool and a white foreground colour, and paint the skin back in – using a Wacom tablet is easier for the fine details. You can change the opacity of the brush, for example, when you’re doing the lips you may want to soften them a little but not as much as the skin; or you may want to reduce the opacity of the overall layer if you can’t get the exact result you wish by changing the radius of the filters.

 

Before & After Softening

 

This whole process is about smoothing the skin whilst still retaining some detail in the pores. If you do it by blurring the skin you can lose detail, so this process is fantastic for helping the skin to look realistic and in focus.