Laura Jones

Graphic Design Student at the University of Salford

[itsagraphicdesignblog]

Making My Wix Site Live

www.lejones711.wix.com/mysite

Maintaining a simplistic, clean layout, in order to draw the most attention to the illustrative work itself.

[itsagraphicdesignblog]

Lynda Tutorials

Graphic Design Tips and Tricks Weekly

1. Key Points?

Tracking ( spreading out the gaps between type) slows down reading pace, and quiets the setting. This encourages the reader to savour the words -  we have a subconscious desire to experience suspense.

Black/white are equally dominant - the most dominant one on the page is the one that is the most different from the background.

Shades are hue + black, tints are hue + white.

2. How could these skills be used in design modules?

The use of tracking could be particularly important within branding projects, in order to effectively convey the tone of voice and identity of the brand. The power of black and white is something that is useful to consider for Directions Within Graphic Communication - the monochrome restriction encourages a deeper consideration relating to how depth and contrast can be created.

3. Other tutorials to watch? 

I want to continue to watch these tips and tricks video - they offer simple techniques that can instantly make designs more powerful and striking.

F2 Design - Letterpress Printing and Poster Design

1. Key Points?

Dirk Fowler is a printmaker who creates commemorative gig posters, placing emphasis on the importance of creating handcrafted items, as it offers a more personal connection.

Saul Bass - ‘ I want to make beautiful things even if no one cares’

His limited use of two colours throughout his work creates an interesting level of simplicity and contrast.

2.  Skills to use in design modules?

The key is simplicity , this would be particularly useful when designing posters for events/brands ( such as Sounds From the Other City). The effective consideration of colour is something that could be used across all modules, and would work particularly well in the context of print making.

Learning Graphic Design : Things Every Designer Should Know

1. Key points ?

Design begins with a ‘story’ - should work with client to define what this, what they are expecting to get out of the project.

Simple photos should be used when they are smaller elements on the page, and a focal element should be considered - this makes page layouts more dynamic, as it encourages the eye to move around the page.

Setting type boldly helps to create tension, as does using a combination of serif and sans serif typefaces.

2. Skills to use in design modules?

Working with a client is the key part of the design process, especially concerning branding projects, and this is an important skill to develop - you should be able to deduce what the client wants, even if they cannot explicitly express it themselves.

[itsagraphicdesignblog]

Drypoint - process

I began by tracing out my image on tracing paper.

I then reversed the tracing paper, and retraced the image onto the metal sheet.

Following the guidelines created from me tracing the reference image, I then used the sharp etching tool to create indents. It is important the indents are deep enough to pick up ink, but they shouldn't be deep enough to go through to the other side of the metal sheet.

Other tools can be used to create interesting textures - for example wire wool can be used to create a hazy, cloudy texture.

Once the design has been completed, a scrap of cardboard should then be used to drag ink down the metal sheet, covering the engraved design.

A piece of a cloth called a ‘scrim’ is then used to remove the excess ink from the plate.

Tissue paper is then used to further remove the excess ink, care should be taken not to remove the ink from within the indents. It is possible to create localised areas of white space through focussing on rubbing the ink off a certain area.

This is what my plate looked like after I had removed the excess ink.

In order to create a good quality of print, the paper must be damp ( not sopping wet), in order to allow the ink to actually touch the paper. The paper should be left to soak, then placed under the blotting papers to remove the excess water.

The plates are then placed on the printing press, with the paper being placed on top (using a reference sheet to ensure the design lines up). Tissue paper and the material is then placed on the paper, and the wheel on the printing press is turned.

This was the outcome of my first attempt at drypoint!

After following the normal inking up process, colour can then be added. This then follows the process of lino printing, where the ink is rolled out on the table, then transferred onto the plate. It is possible to block out certain sections ( such as my face in this example), using newsprint.

This was the outcome of making a two colour print.

The remaining ink left on the printing press also can create some interesting textures and patterns.

[itsagraphicdesignblog]

Drypoint - practitioners

Drypoint is a process in which a design is drawn onto a metal plate, using a sharp pointed tool. It is called an ‘intaglio’ process, as the ink remains in the  indents in the plate, creating the image.

GEORGE BASELITZ

Baselitz’s work uses scratchy lines to create an interesting sense of movement, I like how the layering of colour adds a sense of depth - this process has a lot of potential to create duo colour pieces of work.

ANGIE HOFFMEISTER

I really like the distorted layering here, and the inclusion of negative shapes such as the background circles in the first image create an interesting sense of texture.

[itsagraphicdesignblog]

Screen Printing - Process

Screen printing is a process where ink is pushed through a screen that has been photographically exposed to a UV light, which dictates where ink can/cannot be pushed through, creating the desired design.

CREATING OUR SCREEN PRINT DESIGNS

Firstly, we began by cutting out black paper shapes and sticking them onto tracing paper, ready to be exposed photographically and used to create a screen.

This is what a screen looks like for the process of screenprinting.

As screens are made of fabric, the designs will leave a ghost image. If light can still be seen through the screen, then that means it is still a screen that can be used effectively.

The printing beds hold the screen in place, and create a vacuum, in order to ensure that the print is flat and crisp. The squeegee should be held at a 45 degree angle, and the screen should always be recharged with ink before removing the paper, in order to ensure it does not dry out before the next print.

Markers using masking tape are placed on the bed, in order to ensure that the print is straight, and on the right part of the paper each time. This is especially important when screen prints are being layered, and the paper needs to be in the same place each time.

The first layer of screen printing.

After waiting for the first layer to dry, the second screen can be placed on the paper, which creates an interesting combination of colour and textures.

Finally, the third layer can be added - it is especially effective like this when the ink has been recharged, as it gives a full, crisp finish.

Experimenting with different colours and shapes.

The yellow and pink make a particularly dynamic combination - the creation of the orange through the overlap creates a warm tone.

[itsagraphicdesignblog]

Screen Printing - Practitioners

PALEFROI

I really like the hand drawn, naive style of screen printing executed by Palefroi - they create some interesting textures and patterns within their work.

JARNO LATVA NIKKOLA

I particularly like the use of overlapping colour in this example - it is interesting how dotted circles have been used to create a sense of tone and depth, and the combination of the yellow and pink manages to make a shade of orange. whilst screen printing different layers, it is important to consider the consequent shades created.

ATELIER BINGO

The vibrant, abstract nature of Atelier Bingo’s work is really interesting - the overlapping of shapes creates a sense of movement and excitement, and the juxtaposition of rough and smooth shapes creates a dynamic sense of variety.

OTTO GRAPHIC

ottoGraphic creates helpful guides relating to the screenprinting process, and the use of overlapping colours within the illustrations makes the work seem engaging and tonally interesting.

[itsagraphicdesignblog]

Printmaking - Creating My Own Lino Print

To begin with creating the lino print of my face, I used tracing paper to create my design, ensuring I used thick lines, to make the process of cutting out the lino easier later on.

I then reversed the tracing paper, and redrew over the lines on to the lino itself - the image has to be reversed so that when it is printing onto paper, it is the correct way round. At this point I began to consider which sections I wanted to cut out, and where I wanted the colour to be.

Using the cutting knives and a bench hook ( to ensure safe practice), I began to cut out the lino. A cut into the lino means that this relief section will not be printed, so shall remain the colour of the paper. Where the lino has not been cut is what shall be printed. It is possible to create many different kinds of lines and textures using the different knives and cutting techniques.

Once the design is complete, the lino is ready to be inked up and used to print. Using a roller, ink is rolled out onto the work surface, which is then rolled directly onto the surface of the lino itself.

A registration sheet is used as a base to place the lino on, to ensure that if multiple layers are being built up, the images will line up correctly.

Registration sheet + inked up lino + paper to print onto + newsprint all placed under the teeth in the printing press. The handle is then turned once, and the paper is printed onto. If the image is embossed on the paper, the tension may need adjusting, in order to get the best quality of print. This process should be repeated five times if the lino print is being built up in stages, as an allowance for mistakes.

My initial lino print experiments.

I then used another piece of lino and cut out a different section, in order to layer another colour - the overlapping of colours and misalignment is interesting, and lino printing has the potential to create some complex layered images. If I was to pursue this design further, I would experiment with cutting out more of the face on the second layer of the lino, as I think this could add some more interesting overlapping of colour.

These are the pieces of lino after I had used them to print.

[itsagraphicdesignblog]

Printmaking -  The Lino Printing Process

Lino print work by Henning Wagenbreth, humorous illustrative work based on the receipt of spam emails.

Lino print by Paul Peter Piech, a 20th century graphic designer, who used linocut work to create work with political and moral undertones.

Lino printing is a process that can produce some interesting, irregular outcomes, and reduction lino printing can create layered pieces of work that have the special quality of being unique - no two reduction lino prints can be exactly the same.

[itsagraphicdesignblog]

Website Evaluation - Peer Feedback

After completing my website, Andrius gave me some peer feedback on my work, offering his opinion on how I could improve my website.

Andrius said that he believed that my website was aesthetically pleasing and visually pleasing, as it fits in with my own illustrative style. This makes my website seem personal to me, and the incorporation of the mustard colour makes the website seem fun and inviting, and not corporate looking.

He also said that the font size is appropriate, and the fact that it is black text on a white background makes it legible, and therefore accessible to everyone. The layout is clean, and the images are aligned in an organised fashion.

To improve my design, Andrius suggested that I should remove the black line that appears at the top of the page, which I agree would help to make the page look a lot cleaner. Also, on the ‘Contact’ page, there is an extra unnecessary button next to my Behance and LinkedIn pages, so I should remove that, to stop the page being cluttered and potentially confusing for the user.

Another suggestion was that perhaps I could add my social media links to the bottom of the page underneath the contact form, just to further improve accessibility for the user. Also, adding a button at the bottom of the page that take you back to the top could be a useful addition, just to make the user’s experience as easy as possible.

[itsagraphicdesignblog]

The ‘About Me’ page

I was struggling to compose the ‘About Me’ page, so I looked into the personal information pages on existing designers’ websites, which was a useful process.

I feel like using third person can make the ‘amount me’ section can make it feel less personal, I find myself less engaged with descriptions like this.

I really like the sense of humour and blunt tone used in this example - it makes me want to learn more about the designer.

This summary seems longwinded - the lengthy paragraphs put me off from reading this. I liked the idea of keeping it more simple and understated, so as not to bombard the user with information.

I went for a simple summary, broken down into manageable paragraphs, trying to maintain a friendly tone of voice.

[itsagraphicdesignblog]

Creating my Wix Website

I wanted the layout of the page to be quite simple and clean, in order to draw attention to the bold colours and chaotic illustration styles. Wix allows you to edit the layout of images, so I ensured the images had a reasonable margin, so that they all fit together coherently on the page.

I added a rollover to each of the examples of my work, in order to add some context to the work, and clicking on the images opens them up larger on the screen.

I also added a contact form at the bottom of the page, in order to improve accessibility, and make it simple for the user to contact me.

I added a specific ‘Contact Me’ page so that my website feels genuine and transparent, and this encourages the user to explore my work further.

I added my looping animation to the top of the webpage, and I think is a visually striking way of welcoming people to my website.

[itsagraphicdesignblog]

Web Design - Wireframing

After deciding upon my template, I mocked up some rough ideas of how I would use the template to present my own work, using Adobe Illustrator.

This will be a parallax page ( using the ‘Emma Brewer’ template), and there will be rollovers on each piece of me work, offering a short description. At the bottom of the page, there will be my contact details. At the top of the page, in the header, I will use the animation that I previously created, as this works well to promote my brand.

The menu at the top will always stay in the same place, to ensure a good level of accessibility for the user. I like the idea of having little illustrations on the ‘About’ page, to further emphasises my brand image. I want to keep the yellow colour running throughout the website consistently.

[itsagraphicdesignblog]

Web Design 2 - Research

The module for this brief is to create a functioning website, using Wix, which is a site that provides you with templates for creating your own website, yet allows you the freedom to personalise it.

Before designing my own website, I investigated the various different template options, in order to assess which would be the most appropriate for the purpose of self promotion for my work.

‘ART SCHOOL’

I really like the bold statement image, as this nicely contrasts the central text box, and also the cleanly tiled images for the actual content. However, there isn't a lot of space provided for information about the work, which is something that I am keen to include, to highlight the motivations behind my work. Also, a contact section could be added to the bottom of the page, to improve accessibility.

‘ODAM LUIRAN’

I really like the clean, tiled approach of this template, and I feel the plain background works well to accentuate the bold colours of the illustration - I need to make sure the background does not distract from the work itself.

‘EMMA BREWER’

The large images are particularly striking on this template, and I like how there is a rollover on each of the images to reveal the title of the work - it is very easy to find out more information about the work. It is very easy to navigate this site, especially with the links to social media at the bottom of the page.

‘DEAN RAVEN’

There is not a navigation menu on the site, which I may feel hinder accessibility, as a lot of people may not scroll all the way down the webpage to find the various subsections. However, at the moment of the page, there are numerous social media links, which is very important in the context of self promotion. 

‘ANNA DAVIS’

I think the lack of menu at the top of the page means it may be confusing for the user to navigate this site. I like how the images of the work have been put into circles, as it creates visual space, and keeps the layout clean and refreshing. However, I feel that the header image and the text is too big, in comparison to the rest of the information on the page.

‘DESIGNTALK’

The line that runs down the centre of the page adds something different to the page, and contrasts nicely with all of the blank negative space. As you scroll, the line extends downwards, which encourages people to continue scrolling, and suggests a level of interactivity, which is engaging.

[itsagraphicdesignblog]

Using Adobe After Effects

I compiled all of my illustrations created using the Loop app, and put them into a file ready to be imported into After Effects, as this would be the best software to use to loop the animation together.

I imported the 154 PNGs into After Effects, which I found to be quite a straightforward process, as the interface is easy to follow. I made sure to set the frame rate to 25, and set the standard ratio of 1920 x 1080.

The animation was running too fast, so I went to Layer > Time > Time Stretch to edit the length of the animation, and therefore also the speed. After experimenting with various lengths, I found that 7.5 seconds long was the ideal outcome, as the speed remains fast enough to be engaging, but yet allows a sense of unsteadiness and imperfection which I really like.

After playing my animation through a few times, I thought that the loop back to the beginning was a little unsteady, so I created two more frames just to link the last and first frames together in a more coherent fashion. I then imported these PNGs into After Effects, and placed them at the beginning of the composition. I feel like this addition has made the animation loop in a more subtle fashion.

In order to render my video, I selected the H.264 codec setting, as this is the appropriate one for video being used in the context of web. I set the quality to 100, but I can always adapt this if, when I come to make my website, the video size needs to be smaller. It is always important to click the ‘Render’ button once the render settings have all been selected.

[itsagraphicdesignblog]

Creating my animation using Loop

Creating my animation on Loop proved to be both a rewarding and frustrating experience at the same time - repeatedly sketching out very similar frames can be very time consuming, and it takes a while to produce just a small section of the animation! I created a little film demonstrating some of the time I spent working on my animation, as I thought it would be interesting to look back on the process. The fact that Loop allows you to draw on top of a reference video is something that I found incredibly useful.

[itsagraphicdesignblog]

Filmmaking 2: Initial Storyboarding

After experimenting with the ‘Loop’ app, I thought it would lend itself well to creating an animation that would represent my interest in illustration. I like the idea of pursuing the ‘drinking tea’ idea, in terms of animating subtle, small gestures, andI would also like to incorporate other actions, such as me drawing. I love the idea of the actions being small - this would make a good background piece for a self promotional website, and will ensure that the animation loops together ( as specified in the brief).

I also like the idea of placing illustration into the real world, so I like the idea of having a photograph of my desk, of which I can layer my animation on top of, as I feel the combination of a photograph and sketchy illustration could be interesting.

[itsagraphicdesignblog]

Trialling using ‘Loop’ app

Experimenting with an animation app called ‘Loop’, where you can create simple illustrated stop motion videos, using a previously filmed video as reference, frame by frame. The interface is relatively easy to use, but is equally frustrating at the same time, as I created my illustrations frame by frame, only to find that, at the end of the process, the app would not let me play or save my animation. This meant I had to manually create a GIF. Also, the middle section of the animation seems quite disjointed, but this is something I could adapt perhaps.

I enjoyed having a quick play around with the app, and I really like the informal, monochrome style of illustration that the app as created, as it is difficult to create neat drawings using this software. I could maybe explore using this app for my motion design, as it is a useful way of creating animation ( as you can easily see the previous frame.)

I liked the simplicity of Loop, in terms of the fact that you can use a video reference to draw from. Modelling drinking tea did not come without its difficulties though.