Music

Some tracks I recorded 😀

Little Warm Thing

Little Warm Thing (acoustic)

SoleMare (“SunSea”)

Piove (“It’s raining”)

Mille Misteri (“1000 Mysteries”)

Advertisements

Give your pictures a ‘graphic novel’ style using Prisma filters – Part 1

Step 1 – Prisma

Prisma is a photo-editing application that utilizes a neural network and artificial intelligence to give an image an artistic effect. The results are surprisingly natural and resemble artworks created by humans.

Prisma is not the only app of its kind, but at the time of writing is one of the most popular, as it’s free and available for both iOS and Android.

Download and install the Prisma app onto your mobile device.

Step 2 – Square Canvas

As the starting point of this tutorial we are going to use a beautiful 3D illustration from CGI artist JC Cooper

morrigan2

Morrigu, by JC Cooper

Let’s start by making the image we want to process into a perfect square, as Prisma can only handle square images. Open the image in Photoshop choose Image > Canvas Size… then resize the canvas to 1080 x 1080 pixels.

resize_canvas

figure 1

We choose a resolution of 1080 x 1080 pixels because that’s Prisma’s output resolution.

After we click ‘OK’ our image should look like this:

image-a

Let’s refer to this image as image A. Now that image A is ready for the Prisma treatment, we save it as a .PNG and transfer it to our mobile device.

Step 3 – Processing in Prisma

Let’s open image A in Prisma. As the image is already square we can skip the cropping step. We process our image with the filters Tokyo and Curly Hair and save the results on the mobile device.

img_2067

figure 2

For the purpose of this tutorial we’ll call the image processed with Tokyo image B and the image processed with Curly Hair image C:

 

Image A = original image, 1080 x 1080.
Image B = image processed with Tokio.
Image C = image processed with Curly Hair.

Now we transfer images B and C back to the computer so that we can process them in Photoshop. This is where the fun begins!

Step 4 – Importing Prisma images in Photoshop

With image A open in Photoshop, select File > Place Embedded… and place the two images created in Prisma in separate layers. Rename the layers accordingly and stack B on top of A, and C on top of B (see figure 3).

a-b-c-layers

figure 3

Step 5 – The Dark Outline

Layer C will give our original image comic-style dark outlines and shadows, so let’s set its Blending Mode to “Multiply” and Opacity to 20%:

c-layer

figure 4

Step 6 – Flattened Colors

Layer B will provide a version of the image with flat-ish colors, which help achieve the graphic novel style we are looking for. We want to retain some of the details of the original version (image A) though so we are going to set Layer B’s Opacity to 60%:

b-layer

figure 5

Of course you can play around with the opacity of layer C and B and find just the right amount of dark outline and flattened colors you want your final image to have.

Also feel free to experiment with different Prisma filters, that you can use as your “B” layer to achieve a variety of different art styles.

Step 7 – Final Result

..and that’s it, at this point we should already be able to get a nice art style that resembles a hand-drawn illustration. Let’s take a look at the image before and after the treatment.

before-after-part1.png

In Part 2 we will take a look at how we can improve our illustration, by removing some of the greyness introduced by the Curly Hair filter and correcting some of the color shift introduced by the Tokyo filter.

I hope you enjoyed this tutorial and please feel free to leave feedback or ask any questions using the comments section below!

New website & blog

wordpressSo here we go, yesterday I launched my new website with revamped graphics (courtesy of the Newsworthy wordpress theme) and blog.
The keyword here being ‘blog’. As my previous website was made using Google Sites and lacked the ability to have a proper blog. Actually it is possible to post blog-entries in a website made with Google Sites but users are not allowed to comment it unless you specifically add an user as an editor – go figure.  I think feedback is one of the most powerful feature of any blog, so I rolled back my sleeves and ‘ported’ the content of my Google Site to WordPress, I hope you like it.

Starling Resources

ImageIn the past few weeks I have been busy updating my knowledge of ActionScript 3.0 focusing in particular on the ability to export ‘Flash’ games to mobile platforms. This has inevitably led me to find Starling,  an amazing free framework developed by Gamua that leverages the power of Stage 3D and GPU rendering.

Starling is, not surprisingly, supported by Adobe themselves and boasts an active and helpful community (which is a very important factor when it comes to pick a 3rd party framework!).

Here’s a handy list of links to learning resources as well as Starling related tools, so that you don’t have to do the dirty work yourself 🙂 

 VIDEO TUTORIALS 

 DOCUMENTATION 

TOOLS

EXTENSIONS 

► Feathers UI
Light-weight, skinnable, and extensible UI components for mobile and desktop.

Sound AS – Lightweight Soundmanager

► Dynamic texture atlas generator
Allows on-the-fly creation of texture atlases and bitmap fonts using  (vector) Flash .swc libraries.

Particle System