Day: June 9, 2020

My Favorite Desktop Programs

by contact@smilingcatmedia.comin Art, Book Publishing, Design, Games, Project ManagementLeave a Comment on My Favorite Desktop Programs

Hello there, I thought I’d share some of my favorite programs and why. This is in no particular order, just wanted to make a quick list. I’m a flexible designer so I’ve worked on a variety of projects and my tools reflect that. This post isn’t sponsored (considering half the tools are free and open-source) or anything just wanted to share some tools I really love.

Here is the list if you want to quickly see what I’m covering.

  1. Affinity Designer – Vector software similar to Illustrator
  2. Affinity Publisher – Publishing & page management software similar to InDesign
  3. Clip Studio Paint – Japanese Comic Software (Supports 3D models, includes 1000’s of free assets, etc)
  4. Krita – free awesome digital paint app
  5. Blender – free 3D/2D modeling/sculpting & animation, video editing and FX tool
  6. Screen to Gif – record gif or videos with this free editor
  7. Github Desktop – The artist-friendly way to save your work
  8. Notion – Kanban boards, tables, lists, Wikis, blog posts, Notes & docs, math equations, websites all in one tool.
  9. Unity – For building games

Runner up tools would be Visual Studio Code, Reaper, FontForge, and well probably some other tools I can’t think of at the moment. I don’t really use these tools enough to add them to this list, but I wanted to give them honorable mentions as a code editor, sound editor, and font editor.

Favorite Design Software

Affinity Designer

A competitor to Adobe Illustrator, for one low price of $50 you can own this lovely software perfect for Vector design work or 2D artwork created from points and paths not based on raster pixels but perfectly calculated curves and lines.

Affinity Designer works on Mac, Windows and Ipad
Affinity Design example of Vector lines on the right and Pixel Live Preview on the left.


Illustrator came out in 1987, and Affinity Designer 2014 (Windows version 2016) and despite the wide gap in years Affinity Design has caught up well and added features Illustrator with its bloated history has not yet received.
The most notable difference is Ease of Use, affinity design makes it easy to get started when working on a design. If you have a few hours you can quickly master Affinity Design.

Some features that Affinity Design has that Illustrator does not is wide file support. Affinity Design also has built-in Persona’s that allow you to easily combine Vector & Vaster images. They also easily allow you to switch a file into any of their software so if you have Affinity Publisher you can easily open up Affinity Design files.

Affinity Design allows unlimited zoom, artboards, undo, and history snapshots. It’s very fast compared to Illustrator but is still missing a few key features such as tracing, mesh tools, blend and knife tools. The filters are lacking as well but for $50 one time vs $250+ per year, it’s worth the price. Many people compare it to CS5 toolset wise which is not bad. My favorite feature would be Power Duplicate which allows me to paste an object at different scales or rotations depending on the last pasted object using Ctrl + C to copy and Ctrl + J to paste with the changes.

Affinity Design alternatives would Inkscape, Illustrator and Gravit… But they just aren’t as good.

Affinity Publisher

Similar to Adobe’s Indesign, Affinity Publisher is available for creating books and print material. It’s easy to use and works well with Affinity Design. I’ve used it to produce three books for print and recommend it as a quick way to work on print production and handle text specifically. It’s still missing a lot of key features but worked well enough for my purposes. Did mention all Affinity software has a spellcheck feature built in?

Here are some books I made with it.

While I could mention Affinity Photo, I still have found Adobe Photoshop to be better overall and haven’t seen a killer feature from Photo that would make me switch but I hope in the future they find a way. I’d like to completely get rid of Adobe at some point.

Clip Studio Paint

It’s built for professionals. If you are looking for a tool that allows you to create comics, books, animations, or anything focused on illustration with a vector attitude this is the software for you. They have an incredible free & paid asset store (Also as an American, the store is super cheap! $20 will last you a good while), amazing brushes, backgrounds and other tools. I recommend this software for artists who are into animation and comics. The downsides is because it is a Japanese product be prepared to work out translating some stuff on the asset store, they have a button to do it for you, but when searching its still good to know to look for 枝 instead of branch as you’ll get better results with the former.
Check it out

Above shows vectors brushes, perspective & ruler tools (they have some amazing tools!), 3D models used to help aid with drawing (I mainly use them for background work) and page management. I think the page management could use a little work but overall it’s great, I use affinity publisher for better page & text management though.

They also allow animation and stuff but the tools are only so-so if you ask me.

Krita

Krita is a great free digital painting & animation tool, it has a lot of special features not found in other art engines. What I use it for most would be it’s filters. It has both Internal and G’MIC filters. And those G’Mic filters! 500+ available filters! It also has the most non-destructive workflow for artists with so many different types of layer options. The reference tool it has is really nice, I wish other companies built something similar. It also has your standard Drawing Assistants, Full Color Management, HDR Painting, Python Scripting, PSD Support, Audio Support for Animation, Customizable onion skinning, and so much more!
I love the how the brush was built to be both a brush and eraser, the Brush Stabilizers are good, as is the Brush Engines, it also has a Wrap-around mode for creating tiles/textures/repeat patterns. πŸ™‚ Great for game art!

How can you not like their cute mascot too?
Wrap around feature, vector libraries, and over 100 professional brushes included
Use Krita to create fun Animation
Tons of free resources on producing comics for web & print
Check out game art resources with GDQuest

Blender

Blender an all in one tool – 3D modeling, Animation, 2D animation, Video compositing, VFX, Shaders, Sculpting, Python scripting, all in real time. No need to wait for rendering! Not with EEVEE! Super easy to use and work with.

If you have worked with other 3D modeling/animation etc tools, they made made it easier then ever to transition so it’s a great time to try it out now. I use it for a lot of different projects and recommend it if you want to get started with 3D modeling.

So much packed into one free piece of software!
Lots of short 1 min tutorials which you can pick after working with Blender for a month
See, that was easy! πŸ˜‰

Screen to Gif

Easy to use free open source screen recorder! Check it out. I use this all the time when I want to quickly create a video or gif of my work and sent it to my client, my friend or whoever else. It’s very easy to use and I enjoy using it. Being free is also a big plus. You can record and edit very easily and I wish I could more software that was quite as nice.

Even has a handily editor so you can trim, draw, edit, play etc
I just realized I could export video… ><

Github Desktop

Yay! Source control! Once you understand source control you will never go back! Github Desktop makes it easy to get started. It’s great for working in games as you can upload your files, makes some tweaks, upload it to the server – realize you made a mistake and revert back. πŸ‘ … Or you can zip up your file, make a terrible mistake, and unzip that last file you saved because you made a back-up the old fashioned way.

In all seriousness it’s like the ultimate undo button with comments and notes, the ability to use branches so you can experiment with files before committing them to the repository. And it’s simple enough artists can use this with Unity, or Love or whatever framework/engine/library you want to work with. If you find yourself hating Unity Collab with hair pulling wait times, you’ll love this, skip the wait, have a better history and work without fear!

Notion

Notion. For those of you who are like, man I wish I had something like google docs but like better.. Well this is for you! Make your notes public websites, or make your spreadsheet private, make it easy to share or hide it away.
You want checkboxes next to your spreadsheets and an embedded pdf? They got you covered!

I like the whole Customize Everything part and the Embed your current tools and drag & drop and just the stuff everything in one spot philosophy. I also like the endless templates available… Not that I really use them much but I like that idea. You can use it for Kanban boards, tables, lists, Wikis, blog posts, Notes & docs, complicated math equations, websites and your own private recipe book.

It’s free but I ended up liking it so much I have the $5 plan for unlimited space.

Unity

My go-to game engine. Before I used Unity, I used GameMaker for many years. I loved GameMaker and it was built well for 2D games. I created art software in it and other games but it was limited in that it could not handle 3D very well. I started teaching myself Unity once I got to the point I wanted to understand 3D. I struggled. I hated Unity, in the beginning, I was overwhelmed with C# the first year but eventually figured it out and now C# is my favorite programming language!

I prefer Unity over Unreal mainly because it’s easier to program in right away and because it runs on low end machines better. If you are looking for something more high end Unreal would be the way to go, but if you just want to make Switch or Mobile games, Unity is better suited.

Designing Good UI/UX is Hard

by contact@smilingcatmedia.comin Art, Design, Games, Project ManagementLeave a Comment on Designing Good UI/UX is Hard

For those looking for a brief UI overview for small projects, a UI Stylesheet works alright. It’s not as fancy as a full on style guide but for smaller projects it may be what you need as you work out different UI ideas. If you are working on anything longer then 2 weeks, I recommend building a style guide or else you will very likely suffer.

  1. Having a style guide gives you a clear vision of why you made these decisions, this reduces debate.
  2. It’s nice to have a document to refer back to 6 months later when you aren’t sure what size this box was or what color you used on an icon..
  3. You have guidelines ready for if you add new teammates!
  4. I personally think the history of the design is an important aspect to add to the guide unless you can expect the specs and requirements to never change on the project.
  5. Creating a guide alongside with UX reasoning also helps you understand why your UI is laid in the way it is.

While working on Roguecraft Squadron (An RTS computer game) I went through many many many many different versions of UI. It was hard for me to see the big picture or what direction we should go in because the gameplay was not fleshed out all the way. Another issue was the speed of development. Originally this game was built in 3 days so the UI was choppy and very light. I didn’t know back then about better ways to think about development.

I did not know how to design for long term projects and that made designing UI very challenging.

Original 3 day game prototype. All art above is my mine. Photo from Feb 2017

I was thinking after the 3 day game jam, since we were so successful, we should continue development on the game. We continued to do so and did user testing at a local game meetup’s among other places. We would have people play and we would try to figure out ways to improve the game and make it more fun. While our user testing with formal experience was limited, we made the best of it. We would basically sit a user down and watch them play and ask them questions were they struggled.

This was April 2017. We tried to add in a tutorial, it would be a few more years before we figured out how to do it right.

I was still learning how to create UI during this process, and things such as 9 slicing. Since this was built in the LΓ–VE Framework it was much more restricted then something like as the Unity Game Engine that has a interface I can work with. While I could build designs, the feasibility of designs was limited because of time constricts and limits within the framework.

Me fiddling about with 12 slices here…

Now as I worked on changing UI throughout the process I realized had we just decided on a style and covered constraints early on it would have saved a lot of frustration in the process. Towards the end we ended up stripping out any fancy effects I had in mind and keeping it very basic so we could finish the project.

The UI in the end – Feb 2019. Very stripped down and purely function over style.
This was further worked on, as you can see the ship now had a selector, and the layout was overhauled
Now you might ask yourself what is a stylesheet?

A stylesheet is a way to glance over all your visual elements so you can see if they work together. I can’t remember the original creator of the this PS stylesheet template but I liked the idea. It was a way to quickly compare elements and see if they worked together. A quick mock-up so to speak. The idea is to test colors, patterns, fonts and other styles together to see if they work together. You can then create different styles and compare them.

Here is an example I made of a stylesheet for Stellaris. I was not part of the team this is just an example.
Here is an example I created during the pre-production of a game I was working on later on.
Here I was trying to make sense of what the game had become!

Well near the end as we decided to overhaul the UI to a simple version then I went about trying to make sense of the UI. At that point colors were random and did not work well together and things were becoming hard to understand, the other problem was we introduced new artists that didn’t understand our UI guidelines (Maybe because we didn’t have any then??) so the art we received was completely in the wrong style. If you work on a project for a few years without proper planning – original designs and plans get muddled. Sometimes the worse thing you can do is continue to try and improve something in your current direction.

What I would recommend if I were to fix this – Ask 3 important questions

  1. First separate out the elements, compare them to one another. Do the UI elements feel like they fit together? Do they all share similar styles, sizes and color schemes? What doesn’t fit? What does fit? Does spacing and size feel right? I feel that spacing and sizing of our UI could have used work. As the art we received from two new artists did not fit but I couldn’t argue that out of the project as it was already commissioned for and we didn’t want people to feel bad.
  2. Second, can you tell what the theme is from the color scheme? Why are the colors chosen? What is the meaning behind the colors? I think overall our UI colors worked but could have been more focused.
  3. Third – do the elements themselves feel like they belong with the rest of the content? (The game in this case). In the last version of our UI I would say no. The rest of the game is detailed, but the UI is strangely not. It doesn’t feel connected to the world in my opinion.

Using this process I believe we could have worked out a UI that felt better connected to the game.

There were numerous time constricts with the design and what the programmers could do so sometimes you just have to let it go and just find doable fixes the programmer will okay for your deadline.

If you want to see behind the scenes on some of the ideas for the UI why not look at the notes on GitHub?

Here you can see the crazy design process on RCS. Design is messy, frustrating, and getting a win like getting the programmer to add a UI back button can really feel like a victory (I mean I really fought for a back button on all the main screens, it was like not until we were going to release 2 years later we added one).

Here you can see my journey of learning how to write better tickets, create better designs, and figure out better project management. Lots & lots of mistakes but I slowly learned how to improve. Not everything is here but here are a few examples of stuff I’ve worked on.

I never claimed to be a good designer and I sure learned a lot over a few years working with designing screens. What I learned most of all is…

Use a style guide next time!
A part of me would like to write a guide on a style guide for RCS sometime when I have more free time. Considering this has been a pet project for so many years, it’s nice to work on in my free time but I always have so many other projects going on, we’ll see when it happens.
Smiling Cat Media