All posts by GP Animations

About GP Animations

Flash Developer, Mobile Application Developer, Illustrator, Animator, Graphic Designer

(Procreate) Inktober 2018: Day 1

It’s officially October 1, which is the first day of Inktober and Procreate Inktober. I’m not going to be making a blog post for each day just to display each drawing, but please follow me on Instagram and Twitter if you’d like to stay updated.

Inktober2018_Day1
Inktober Day 1 – Poisonous (Affinity Designer for iPad)

Since I’m going to be attempting to participate in both Inktobers this year, my drawings will probably be more on the simplistic side in order to fit in 62 drawings around my daily life. That being said, I would like to experiment more this year and may try some different styles, or even different mediums. Maybe I’ll switch up between Procreate, Affinity Designer, pixel art, and pen and paper.

ProcreateInktoberDay1
Procreate Inktober Day 1 – Houseplant (Procreate for iPad Pro)

Will you also be participating in both or are you favoring one over the other?

Pixel Art

I’ve been experimenting with different software that allows you to draw pixel artwork easily. My first test was in Affinity Designer since I’ve been using it on a regular basis anyway. This was as easy as creating a grid and then using the rectangle tool to fill in the squares. It’s simple enough to complete as long as you have a good idea of the grid size you’ll want to use.

Screen Shot 2018-09-23 at 11.01.07 AM

I then tried a website called Piskel, which is free to use. One really nice feature of Piskel is that you can create animated gifs and export them.

Screen Shot 2018-09-23 at 11.06.18 AM.png
Creating an animated gif in Piskel

You can change the both the grid size and the exported frame size in Piskel depending in your needs and since free and available as a website, it’s definitely a very approachable way to create pixel art.

Self

Finally, I tried a free iOS app called Dottable. This app, much like Piskel, is pretty easy to learn and has a small learning curve. I’m not sure if it can easily produce animated gifs like Piskel, though. One big positive it has is that it allows you to convert any photo from your device into pixel art. This can be a big time-saver whether if you want to use the converted image as-is or even just as a starting point.

IMG_0001

What pixel art software do you like to use?

Procreate Inktober

Yesterday I wrote about Inktober and how last year I exclusively used the beta Procreate to participate. This year, I was considering alternating days between Procreate and Affinity Designer.

Coincidentally, hours after I published the Inktober blog post, Procreate announced that they’re going to be having their own version of Inktober this year.

procreateinktober
Procreate’s Inktober List differs from this year’s regular Inktober.

The rules are very similar, each day of October you’ll draw a black and white illustration based on a daily theme. The difference for Procreate’s version is that you’ll use Procreate for iOS and tag your drawings on social media using @Procreate and #ProcreateInktober.

In which Inktober will you be participating? I may try to do both and use Affinity Designer exclusively for Inktober since I’ll be using Procreate for the other.

Inktober 2018

October is quickly approaching, which means it’s almost time to begin Inktober 2018. Inktober was originally started by Jake Parker in 2009, and has gained more and more participants each year. This is when people all over the world ink one drawing each day in October to a daily theme. Most people use paper and ink, but if you’re like me and tend not to carry around pens, ink, brushes, and paper, you can also participate digitally, which is what I did for last year’s challenge.

Above are some of the drawings I did last year while beta-testing a new version of Procreate for iOS. In case you couldn’t tell, I like to draw a lot of nostalgic-based artwork. You can check out some of the retro t-shirts I’ve made at my home page if you’re also into that sort of thing.

inktober2018
Inktober 2018 Prompt List

This year, I’ll probably alternate between Procreate and Affinity Designer for iOS since I always have my iPad Pro on me.

When you complete your daily drawing, be sure to tag it on social media using #inktober and #inktober2018 so everyone can check out each other’s work. There are a lot of very impressive pieces done each year, which can be pretty inspiring to see.

Let me know if you’ll be participating this year!

Quickly Creating a 2-D + 3-D Cartoon

Part of my day job is creating animated cartoons for online learning courses. For my latest project, it was decided to have it set in an apartment with two-dimensional cartoon characters superimposed. Given the time frame, I tried to find the easiest and fastest way to model the apartment in 3-D using inexpensive software with the smallest learning curve.  Planner 5D met all of my requirements, so I decided to give it a shot.

Planner5D1
Planner 5D on Windows 10

One thing I really liked about Planner 5D is that it’s available for Mac, PC, and mobile devices. This was handy because I could work in it anywhere and could easily show off different layouts to the team even if I wasn’t near my desktop computer.

Planner5D3
Planner 5D on an iPhone 8 Plus

It also has a lot of built-in models that you can quickly drop in and customize as needed, which was a huge time saver. I was able to learn the software, create an apartment for the project, revise as needed from team feedback, and render out all of the stills in about 2 business days.

Planner5D2
Some of the options of pre-built assets Planner 5D has available.

For the characters, I quickly sketched out some ideas in Procreate on my iPad Pro based on the descriptions given to me by the instructional designer during our meeting. In this case, the main characters were a college student and his anthropomorphic ostrich roommate.

I imported the sketches into Adobe Animate, traced them, and broke them into individual graphics so they could be easily animated.

Animate1Animate2

I then imported the background images that were created and rendered in Planner 5D and animated the characters on different layers. The Keyframe Caddy extension for Adobe Animate is a huge time-saver and cut down the amount of time it took to lip-sync the characters to the dialogue.

Animate3

If you’re looking to make an animation in a similar style, I hope you also find these tools useful. I know personally, it was very handy to have software like this to cut down on production time.

Affinity Designer

A few years ago, I was commissioned to create an online course about Affinity Designer. This was when Affinity Designer was still fairly new and not a ton of illustrators used it. Fast-forward three and a half years, and it’s become one of the best graphics applications for both desktop and iPads.

MixTape
Affinity Designer for Windows interface

Truth be told, just based on the work I had after creating the course, I stopped using Affinity Designer for awhile. When I heard they were debuting a version for the iPad, I quickly regained interest and bought it on its release day. It immediately became one of my favorite iOS apps that I own and I’ve used it almost every day since.

Di0tzfrWwAMEZ9X
Affinity Designer for iPad

The iPad version is full-featured and not just a watered down version. Also, sticking to Serif’s business plan, there are no subscription payments involved, everything is buy-once, keep forever. It’s definitely worth your time to watch their tutorial videos about using gestures to control the app, as they’ve done a great job translating mouse clicks into finger gestures.

Since the iPad version release, I’ve been drawing in Affinity Designer so much that I had to update my website to display all of the new illustrations I’ve completed. Everything from t-shirt designs, concept art, and final products that I’ve used for my day job have been done all on my iPad.

GP Animations
http://www.GPAnimations.com

I love that if I’m on the go, I can just grab my iPad and take the project I had open on my PC or MacBook and open it in the iOS version of Designer. It’s really as simple as just opening the file from Dropbox or Google Drive and finishing your work on the go.

I also have the PC, MacOS, and iOS versions of Affinity Photo, but I haven’t had a chance to use them extensively yet. I did play around with some of the features for some quick photo editing and it seemed pretty intuitive just like Designer.

AffinityPhoto
Affinity Photo interface

Overall, if you haven’t tried Affinity Designer and Affinity Photo and you’re tired of paying for Adobe Creative Cloud, you really should check them out. If you’re an Adobe InDesign user, they’re also making Affinity Publisher, which is currently in Beta as of the time of this writing. Now if I could only get them to make an Adobe Animate CC replacement, I could completely drop all Adobe products…

Huggable Melodies Books & Game

I was recently commissioned to illustrate the next installment of the Huggable Melodies series, Sniffly Sandborn in a Trip to the Hospital.

Screen Shot 2015-09-06 at 9.12.20 PM

While we were creating the Amazon/Barnes & Noble versions, we also decided to publish a square format version of Picked-On Poindexter and hard cover versions for each book (coming soon).

Screen Shot 2015-09-06 at 9.14.48 PM

Since Huggable Melodies visits libraries to read the books to children, I thought it might be fun if they had a book-related game to play. I found a site called The Game Crafter that makes custom board games. You just need to supply the artwork, choose what pieces you’ll need and create the project, they’ll do the rest.

11709572_511751172311271_2452322067304350095_n

Click the image above if you want to get a copy of the game for yourself. I don’t have any markup set on the game, so the cost reflects the price set by The Game Center just to produce each copy of the game.

Next up…Drowsy Drysdale!

CartoonSmart: Netflix Style

CartoonSmart recently announced a new subscription plan to their iOS and artwork/animation courses. This is a great way to learn all you want to learn about those topics for a really affordable rate.

Unfortunately, the Construct 2 tutorials aren’t included in the plan, but they’re still offered at a heavily discounted rate compared to Udemy.com.

Thanks to everyone who has already taken the Construct 2 courses. If you haven’t checked them out yet, go to CartoonSmart and have a look!

Screen Shot 2015-05-07 at 6.36.39 AMScreen Shot 2015-05-07 at 6.36.34 AMScreen Shot 2015-05-07 at 6.36.27 AM

Freelance Retirement

Just over a month ago, I decided to accept a full-time position as a technical project manager in a new city. My family and I packed up our house and moved to start a new adventure. This was the first time I would be working in an actual office in almost 5 years, so it was a bit of an adjustment.

After a few weeks of working, it grew apparent that I would no longer have the time to have a healthy work/life balance if I were to continue doing freelance work on the side. I actually did the math, and numerically, there really weren’t enough hours in the day. So I’ve decided to hang up my freelance gloves unless I ever need to pick it back up for financial reasons.

I’ll still try to keep up on mobile technology and write blog posts and tutorials when I have time, but I will no longer be accepting new clients or projects. It’s been a fun decade of always having freelance projects going on the side, but for now, I think I’m just going to focus on one job and my family.

– Greg

Tutorial: SpriteIlluminator

I was recently selected to be able to beta test SpriteIlluminator by CodeAndWeb. SpriteIlluminator helps you add dynamic lighting to your mobile games by helping you create a normal map to add to your sprite.

Since the majority of my mobile games are created using Corona SDK, I’m going to cover how to get started integrating SpriteIlluminator into that.

The first thing you’ll do is import a sprite into SpriteIlluminator. Here I just quickly drew a guy for this demo.

Screen Shot 2015-02-26 at 10.09.32 AM

Next you can add the various effects, such as bevel and embossing.

Screen Shot 2015-02-26 at 10.09.54 AM

You can drag the light source around and see how your sprites will look in real-time, which is very helpful. You can also use the lasso tool to select certain portions of the sprite and add effects just to that part.

Screen Shot 2015-02-26 at 10.12.28 AM

When you’re finished, you can publish out the project and it will create your normal map file.

Screen Shot 2015-02-26 at 10.14.42 AM

In this example, I beveled the sprite and then raised the shirt sleeve, nose, and eyes to make them stand out. Then in SublimeText, I created a main.lua file and did a composite of both the sprite and its normal map. Here you can see how a light source reacts to the sprite.

Screen Shot 2015-02-26 at 10.18.54 AM

If you set the attenuationFactor to 0, you can see the portions are the image that I beveled and raised in SpriteIlluminator.

Screen Shot 2015-02-26 at 10.19.06 AM

And if you reverse the order of the sprite and its normal map, you can see the beveled image.

Screen Shot 2015-02-26 at 10.19.28 AM

SpriteIlluminator is a very easy-to-use and powerful tool to help add some nice dynamic lighting effects to your games. This is obviously a very basic example of what it can do, but hopefully it’s enough to get you started in integrating it in your Corona SDK apps.