Typography and Promotional Image Research

    The first thing we looked at today was how to manipulate typography in Adobe Illustrator to achieve some different and unique results. Illustrator has different fonts you can choose from, but to make each of these fonts more unique to the style you are aiming for, you can use anchor points to stretch and distort every single edge of the text into some new shapes. By right clicking on the text, and selecting 'Create Outlines' you are presented with every anchor point on each letter. From here, you can use the direct selection tool to play around and find new ways to change the look of the text.

Four different variations of the same text, created in Adobe Illustrator

    We then looked at the dimensions of promotional material you would use to advertise a game on Steam. By using the Inspect tool in Google Chrome, you can select an image and it will tell you the size of the image. In this case, the profile image on the produce page is 397 x 186 pixels, with a pixel density of 72ppi, as is standard for screen display.

Profile image on the main product page on Steam

    On the main steam page, there is a grid of all the different games, with some images being bigger than others. The small images are 265 x 152 pixels, and the large images are 546 x 313 pixels.

Main Steam page, consisting of a grid of different sized images

    Another storefront that is particularly good for indie titles is itch.io, a site where anyone can put there game on there for free or for a cost. Itch.io has a storefront that is more visually dynamic than Steam, using animated gifs to show the different games that are on offer in action. The layout of the page is they have two large images for featured titles, followed by a grid of smaller images. 

Itch.io storefront

 

Creating a Website from a Preset Layout

    So far we have looked at building websites to our own specifications, using our own created layouts and building that site. Today, we were given a choice of four different layouts and had to emulate one.

    This was the layout that I chose to build from, a website for a movie. I chose this layout because I liked the large, bold splash images and the bold text as well, it's a very simple style but one that takes skill to pull of correctly. Using Sublime Text Editor, I had to build this site from scratch, and upload it to GitHub.

    The main skill I used in this task was creating div elements, and positioning them throughout the page using margins, paddings and floats. In this layout the elements don't all cascade vertically or horizontally in a linear way, so to position the elements in their correct places isn't as easy as it first appears. I also used different typography and images throughout the site, so creating an interesting style using these was fun.

    This is the finished website.

Animating GIFs with Illustrator and Photoshop

    We looked at creating some simple sprite animations using Adobe Illustrator and Photoshop. GIF is a good file format for creating simple pixel art sprites, as GIFs have a low memory usage so can be loaded quickly, they have transparent backgrounds, and they can be animated. I created a simple pixel face in Illustrator, and then by creating different layers, copying and pasting the face over to these layers and changing some details for the next frame of the animation (eg. eyes blinking, smiling), I can easily create an animated sprite.

The four PNG files for each frame of my animation, before they were put together in Photoshop

    The next step is to export these different layers as PNG files, so that they can be put together into an animation cycle in Photoshop. In the export window in Illustrator it gives you some options, the first of which is resolution, which is always 72ppi (pixels per inch) for screen display. The next option is anti-aliasing, which basically means that the pixels on the edge of your image will be smoothed as not to create jagged, harsh edges on your sprites or models. For intricate hand drawn art or models this may be good, but for simple pixel art this will just blur the image, so I chose no anti-aliasing. Then I just checked that background was set to transparent, and exported as a PNG.

    To put these layers into an animated GIF, I loaded them up in Photoshop, and opened the 'Timeline' window. In this window, I created four different frames, and loaded each PNG into it's respective frame. I played around with different delays on each frame to make the GIF animate at the speed I wanted, and when I found the optimal result, I exported it. To export GIFs in Photoshop, I went to 'Save For Web', and changed the file format to GIF. I also lowered the amount of colours in the image, as my sprite didn't have many different colours, and lowering the total amount of colours in the document will decrease the file size and make the image load faster. Once exported, I had an animated GIF that I can post to the web, or use in Gamemaker for a project.

Finished GIF

    This technique is a very quick and easy way to create game art that has character, even with just basic animations.

CSS Layouts and Spooky Trading Cards

    Today we looked at structuring a webpage using CSS styles such as width, heights, floats and clears. The task was to create a series of trading cards using a combination of different divs, and I chose to make a halloween themed set of cards.

Spooky trading cards, made by floating different divs

    Firstly I created the main card, using a div to create a 'cardcontainer'. This container then held four smaller divs, one for heading, image, sub-heading and information. Naturally, divs fall into place vertically so creating this cascading effect for the cards was easy, and was just a case of choosing different widths and heights for each section. The next thing was to center the information inside the card, which is achieved using the 'margin: auto;' CSS style. Once the four divs lay centrally, one after the other inside the container, the next thing to do was to fill them with content, including a background image for each card and also a background image for the 'image' div. After this I had one finished card.

    After creating the remaining eight cards by copying and pasting, they all cascaded vertically, whereas I wanted to have three rows of three cards, as pictured above. To do this, I floated the cards using the 'float: left' style, which would have all of the cards next to each other, until there was no space left on the row, at which point the cards would move onto the next line. To get the three rows of three, I created ' div class="clearfix" ', a class which clears content onto the next line. I placed this div in my code after every three cards, and this gave me my three rows of three.

    To move all of the cards into the middle of the webpage, I created a 'maincontainer' div, that went around all of my cards. Giving this a 'margin:auto' style, and setting 'width:960px' centred my cards on the webpage, leaving plenty of space either side to show off the background image of the entire page.

Creating Art Assets

    In my game, I am implementing a simple pixel art style. Over the half term break, I made some rough art work to generate ideas, and found that I would struggle to create all of the art assets in the style I initially wanted over course of production due to limited time.

    I decided to create some very basic pixel art that I felt was still adequate for my game, and these are some examples of what I came up with.

Enemy

Player

Bullet

Shotgun

Building Roof

Revolver

     I used a web based sprite creation tool called Piskel to create these assets, a simple tool that allows you to create pixel art. I used this program because I don't always have access to Adobe Illustrator, for example when I am at home, and so I wanted to find a tool I can use to create art assets even when not at college. I exported the images in GIF formats, due to the small file size, the transparency of the image backgrounds, and the lower quality of GIF images that is usually a drawback of that particular format won't have much of an effect due to my pixel art style.

    Piskel allows you to export files in any format very easily, and once you have exported a GIF, it's just a simple case of naming it (eg. "building_roof.gif") and moving it into my art assets folder. In Gamemaker it is very simple to import images, and it will even split animated GIFs up into their different frames.

    All of my game files, including art assets, are backed up to my USB drive, my home computer, and my Google Drive. I am also creating weekly version updates of my game on GitHub.