Lots & Lots of Screenshots - Utilising Software & Examples

LOTS + LOTS OF SCREENSHOTS

UTILISING SOFTWARE // EXAMPLES

PROCESSING Processing is a free java script coding tool that I was unfamiliar with at the start of the year. We were asked to produce a special study on a process that we hadn’t utilised before and I thought learning processing would benefit me and my work greatly.

While it was a struggle at first to understand how the code worked and what I could use it for. I started to feel more and more confident and was able to create a rating system, a design criticism tool & a grab and drop game.

I love using processing and the outcomes I can create with it now, which is why I’ve used it for the majority of my university projects this year. I hope to use it in the future and enjoy the challenge of solving problems it likes to frequently raise.

I’m going to include screen grabs of code from my website concept & community consensus tool and go through parts of the code to explain what’s going on and how it works.

TABLE TENNIS CODE EXPERIMENT REPURPOSED USING PHOTOSHOP

FIG1.

FIG2.

FIG3.

FIG4.

While creating my website prototype in processing I had learn a new way of coding. FIG1. shows 9 if statements, they refer to the integer(int) screencount. So the line of code states that if the screencount equals 1 then run screen1(); which is the first tab/screen. This is the same for the rest of the screens. Once you create a new tab it automatically makes another Processing file into your existing folder and can be used to seperate code out making it accessible and easier to manage.

FIG2. Once the screen is clicked and dragged up or down the screen moves in that direction. This is necessary because the image sizes are longer than the screen will allow. As you can see the image is 1000,1413 pixels but the actual screen size in the setup is 1000,700 so the rest of the code allows the user to move the image up and down on screen.

FIG3. is the code used to create the mouse click hitbox to move the user onto the next desired screen. The code is the coordinates (quickly worked out using Illustrator) and FIG4. is annotated, corresponding the code to the spaces I’m referring to on the website concept.

PROCESSING COMMUNITY CONSENSUS CODE

4/8 ARRAYS CREATED FOR THE ICONS TO RANDOMISE)

IMAGES LOADED FROM THE DATA FOLDER TO BE REFERRED TO LATER

MOUSE COMMAND + COORDINATES FOR PRESSING ICONS AND THE RANDOMISATION OF ARRAYS

Community Consensus is one of the more complicated pieces of code I’ve created this year. I’ve included three screenshots that snippet the code into labelled sections but in reality it’s over 350 lines long. I was worried when I was first introduced to Processing because I thought whatever I created would be quite basic and not very visually appealing but once I started to get the hang of loading images in and using the code to effect those images it started to get interesting. I was able to replicate my style using programs I’m comfortable with like Illustrator to create and setup elements to be used in the code.

I also love how these tools work in harmony with each other, discovering that I could use Illustrator to map out my design so that I knew to the pixel where everything needed to be. This made writing code swift and less about guessing how things were going to look when I activated it.

ILLUSTRATOR CS6 Retro I know, I’ve become accustomed to using CS6, I’m able to utilise it the most effectively out of all the creative programs at the moment and I really enjoy using it .

I’ve been using Illustrator since 2014 to create all sorts of design. Some good, some bad and of course some ugly. I still believe I’m a long way off being an expert but I feel confident when using it and I’m competent at it. My logo, website concept design and coding adventures have all started on Illustrator. So naturally there are a lot of examples of me using the program to create fun, bright design that compliments my style and practice.

I’ll be looking at how I created my logo design, wow & sweet icons and how I use Illustrator to work out coordinates for Processing.

ICONS CREATED IN ILLUSTRATOR, RANDOMISED IN PROCESSING

I created the text using text on path tool and placed the text on a circular curve.

I select round join making the stroke smooth.

Go to ‘Type’ and select outline text.

Once outlined I expand the text to get the stroke outline as well.

I then merge the text together so the letters are whole.

While the text is selected I go to ‘Effect/3D/Extrude & Bevel’ To get my chosen effect I experiment with the input until I’m happy with the way it looks(use preview to see text change). Then hit OK.

ILLUSTRATOR CS6 PROCESSING + ILLUSTRATOR

RESIZING ARTBOARDS SO THE ICONS CAN BE EASILY COORDINATED AND CODED.

FINDING THE X & Y CO-ORDINATES OF THE ICONS USING LINES IN ILLUSTRATOR TO GET THE VALUES AND EXACT POSITIONING.

ILLUSTRATOR CS6 LAYOUTS & UV PRINT READY FILES

CREATING LAYOUTS FOR MY WEBSITE CONCEPT.

COLOUR

BLACK

RAISED TEXT

UV PRINT READY FILE FOR BOOKLET 7- VOID.

WHITE

INDESIGN CS6 Similar to Illustrator I have an older version of InDesign, but that doesn’t stop me from designing good quality, clean layout design. I thrive on the details and making things look perfect and using InDesign it becomes much easier to do so.

I used InDesign to design all my research and development booklets. With an array of tools at my disposal, I try to make the work look interesting, aesthetically pleasing but most of all bright and colourful.

Layout is crucial to presenting your work, you could have the best final pieces ever but if you don’t present them correctly it could be determental to the overall project. I’ll be using this opportunity to show a few tools I use to make my life easier on InDesign and hopefully yours too!

IMAGE FROM CRIT-ME BROWSE PAGE (PORTFOLIO WORK)

USE THE FRAME TOOL TO QUICKLY CREATE A LARGE BOX WHERE YOU WANT THE IMAGES TO GO, THEN WHILE HOLDING DOWN USE THE ARROW KEYS TO CREATE ROWS AND COLUMNS.

CHANGING THE TRANSPARENCY OF A BLOCK COLOUR SO IT EFFECTS THE COLOUR OF THE IMAGE BEHIND MAKING IT EASIER TO READ THE WHITE TEXT.