Unit 02 Materials, Techniques and Processes

Materials, Techniques and Processes Analysis sheet

Material/Technique/ Process Name
Pencil.

Variations or types
2B 2H pencil, lead sizes, colour pencils.

How do you use the material/ Step by step instructions for technique or process?

Grip the pencil between your thumb and forefingers and move the tip over the paper to write and draw.

Relevant dimensions or constraints

A pencil is a Hexagonal Prism joined to a Hexagonal cone. Pencils are constrained by many things. for example, Pencils can and often will smudge on your work if you are not careful. This happens because small amounts of the graphite does not set on the paper, until you accidentally drag your hand over the lose graphite, making a smudge. This can be avoided by drawing from the top to the bottom of your sheet, and trying not to touch the paper with your hands. Pencils are also restrained by the fact that there are many materials that they wont work on. but that shouldn't be a problem for me as i will only need to draw on paper for this project.   

Linked techniques

Pen

Health and Safety issues related to Material, Technique or Process

Pencils used to be made of lead, but because lead is poisonous to humans we now use graphite. The biggest danger from graphite pencils is being stabbed. If you are stabbed with a pencil then you should clean the wound and bandage it.  Graphite also conducts electricity, so sticking them in electrical sockets or electrical components is inadvisable. 

all of these show different drawing techniques such as overlapping lines, depth,
form, light, direction, scale and movement    

Evaluation (How you found exploring each Material, Technique or process)
This task taught me that every object and shape is made up of these 7 basic lines. I found that lines showing depth and scale are great for showing an objects size and distance. in particular, depth is great for showing distance as the lines start to fade as you move away from the viewers perspective. Scale is great for showing the size of objects, particularly vertical objects such as buildings because they appear to get smaller the higher you look.

Other types of basic line types instantly reminded me of certain objects or things. For example, when i think of overlapping lines, an image of clouds always appears in my head, as i have illustrated above. And when in came to drawing lines that show direction, I instantly though of a peacock because of their tail feathers. when I started to think about lines showing movement, i thought of someone throwing a tennis ball. however, I am not fully satisfied with the way that I tried to draw the movement, so i think that lines showing movement is something that i should practice more.

I was also not so successful when I tried to draw lines showing light. the most obvious way to show light with lines is with the tone and thickness of your pencil stroke. For example, a thick line with a dark tone suggests that it is shadow. i attempted to draw a house that was lighted from the top left, meaning that most of the right side would be darker than the left. but i was not happy with what the image turned out like, the shadow was not the right shape and it didn't fade well, it just suddenly gets dark. I have never been that good at drawing lines that show light or shading, so i should get some practice soon.     

Material/Technique/ Process Name
Pen.

Variations or types

biros, fine liners, gel pens.

How do you use the material/ Step by step instructions for technique or process?

Grip the pen between your thumb and forefingers and move the tip over the paper to write and draw.

Relevant dimensions or constraints

Most pens are cylinders attached to a cone tips. Pens are constrained by 2 main things. Pens can run out of ink, and they also leak. Probably the greatest constraint of pens is the fact that they can run out of ink, and it usually happens when you need them most. Unfortunately, pens that don't run out of ink have not yet been invented, so the only solution is to bring spare pens and/or ink refills with you. Pen leaks are a huge constraint as they can ruin your work if you are unlucky. To try and prevent this from happening try to avoid buying cheap, badly made pens to minimise the likely hood of your pen breaking and leaking on to your things.  

Linked techniques

Pencil.

Health and Safety issues related to Material, Technique or Process

The pen tips can be sharp enough pierce skin if enough pressure is applied, so you must be weary of the tip when you use a pen. if you do suffer a significant injury due to a pen, the treatment is the same as a pencil wound. clean the cut, and cover it with a bandage. Pen ink can be dangerous if ingested as it can cause ink poisoning. Ink poisoning has been known to cause headaches, skin irritation and even nervous system damage. This is probably because of harmful components of pen ink, such as liquid solvents. If someone shows symptoms then seek medical care immediately. DO NOT make them throw up unless instructed to do so by a medical expert. It should be noted that more than an ounce of pen ink must be consumed before you need medical treatment. I cant see any reason why i would drink an ounce of pen ink, so I think that I will probably be alright.  

My pen line drawing techniques sheet

3D boxes shading 

Evaluation (How you found exploring each Material, Technique or process)

This task helped me to improve my line drawing skills, and it improved my ability to identify what sort of textures I should add to different objects. Before I did this line drawing task, I didn't know much about textures, or how they link in to games design. I now know that they are extremely important as they can give character to objects and help you identify what they are supposed to be.

In the line drawing task, I experimented a lot with lines that exaggerated the object that they surround. One example would be the circles that I put around the base of the cone. I also experimented with shading by drawing different types of lines closer together. On the cube both of the side faces had the same type of line on them, but on the right face I drew the lines closer together to make it look like it was in the shadows. I did the same on the cylinder. The top of the shape is covered in circles, but because I drew them so small, it looks shaded. I also experimented with shading on the circles on the far right of the page. I am happiest with the top circle, but I don't think that the other two are as successful as they don't actually look like they have been shaded.

On the second sheet I tried to draw shadows on the cubes that were cast by a light source, represented by the arrow. This was a good task for me as I have never been very good at drawing shadows, so it was good practice. This task is effective as you don't only have to draw the shadows, but you also need to figure out where the shadows should be. I think that I mostly got it right, but to improve my confidence with shading, I should try the task again.    

Material/Technique/ Process Name
Paper Prototyping

Variations or types

You could use paper prototyping to test web, app and game design.

How do you use the material/ Step by step instructions for technique or process?

You use paper to create a basic prototype of your product. This is done by first of designing your home page. then for every link or interactive element of the page you add something to represent a button, my group used post-it notes. Once you have added all of the buttons, you then design webpages for every one of the links. Then, if any of the link pages need buttons, add them and design new webpages if required. Then you should have a finished webpage paper prototype. If you want to test it, pretend that your paper prototype is an actual web page. Start on the homepage. Press buttons to take you to the linked webpages. If your paper prototype works, you should be able to navigate from the homepage to linked pages and back. If not then your prototype is either missing pages or buttons to link to pages. To solve this find what you are missing and add it.

Relevant dimensions or constraints

My group did our paper prototype on A4 paper. The paper that we did our paper prototype on was the normal international size for A4, which is 210  X  297mm. Paper prototyping is constrained by the fact that some development teams fear that it will make them look unprofessional. When designing an interface such as a web page for a potential contractor, you want to make your design look good so that the contractor will chose you to make the interface. But if you show your potential employer a few pieces of paper, they may not take you seriously and not offer you the job.

Linked techniques

Pen and/or Pencil.

Health and Safety issues related to Material, Technique or Process

When using paper you must be careful not to cut yourself on the sharp edges. If you receive a paper cut, make sure you clean and bandage the cut. You should also wear safety goggles to prevent others from throwing paper airplanes in your eyes. If your eye gets cut (also know as a corneal abrasion) by paper or by another material such as sand or dirt, you should seek medical attention. You could also rinse your eyeball with a saline solution or blink several times to try and remove small particles that could be causing irritation. If someone gets a corneal abrasion, you must make sure that they do not rub their eye or try to touch their eyeball as these actions can aggravate corneal abrasions. The injured person must also try to avoid removing any objects that may be embedded in the eyeball as this could cause further damage to the individuals eye. Instead, ensure that they seek medical attention immediately. 

My groups paper prototype

Evaluation (How you found exploring each Material, Technique or process)

I found that paper prototyping is a good way to preview how your finished product will look as you design every page that will be included in your final product. For example, a home page, a contacts page, a photo gallery. But the most useful thing about paper prototyping is the fact that the process of it makes it hard to accidentally forget parts of the webpage, and if you do,  its also easy to find out what you have left out if you have overlooked something. For example, if I was testing my prototype and found that I created a link on my homepage to the photo gallery page, but didn't create a link back to the homepage on the photo gallery page, I would know that to fix the problem all I would have to do is add a link on the photo gallery page to the home page to fix the problem. Paper prototyping is so useful because it is so easy to fix problems. If I tried to create a coded webpage prototype, It could take a long time to fix problems and it is often tedious. Using paper, all you have to do is just add a link using pencils and paper.

When I worked in a group to create a paper prototype of a new Poetry Slam website, it went very well. The thing that probably took us the longest was coming up with the design for the new website. But we came up with the idea to have all of the different pages to open on a space on the home page instead of them opening new pages or tabs. this sped up our work as we only had to design a home page with a space for the other pages to open onto. we then created a few A5 size prototypes for the other pages that would open onto the space on the home page. 

Material/Technique/ Process Name
Thumbnail Drawing

Variations or types: sketching characters, landscapes, web designs.

How do you use the material/ Step by step instructions for technique or process?

My thumbnail drawings were of a web page that I was developing for The Poetry Slam. I started by coming up with five basic webpage designs on lined paper. I then downloaded a 12 column template sheet from www.960.gs. I then used the four blank templates to come up with improved designs for the poetry slam website. The first one that I designed was based on the Idea that I came up with on my paper prototype. The other three were designs that I came up with after I looked at an assortment of random websites for inspiration.

I then picked my favourite thumbnail drawing and developed it. I picked my first design. I didn't really change much, but I did remove two of the buttons and I also added names to the buttons so that the viewer knows where they go. 

Relevant dimensions or constraints

My first 960 gs thumbnail sheet had four A6 size boxes on an A4 sheet. My final thumbnail sheet was an A4 sheet that was mostly taken up with the one thumbnail design. The main draw back of thumbnail drawing is the fact that because it is drawn on paper, you don't know what sort of problems you may run into if you try to create your design digitally. and because 960 gs is measured in pixels and paper is measured in centimetres, there may be distortions when you try to convert the 960 grid from pixels to centimetres.  

Linked techniques

Paper prototyping.

Health and Safety issues related to Material, Technique or Process

When using paper you must be careful not to cut yourself on the sharp edges. If you receive a paper cut, make sure you clean and bandage the cut. You should also wear safety goggles to prevent others from throwing paper or other objects in your eyes. If your eye gets cut (also know as a corneal abrasion) by paper or by another material such as sand or dirt, you should seek medical attention. You could also rinse your eyeball with a saline solution or blink several times to try and remove small particles that could be causing irritation. If someone gets a corneal abrasion, you must make sure that they do not rub their eye or try to touch their eyeball as these actions can aggravate corneal abrasions. The injured person must also try to avoid removing any objects that may be embedded in the eyeball as this could cause further damage to the individuals eye. Instead, ensure that they seek medical attention immediately. 

My initial webpage designs I drew on lined
paper.

Four developed web designs using 960 gs.

My final 960 gs poetry slam webpage design.

Evaluation (How you found exploring each Material, Technique or process)

I have found that thumbnail drawing is a great way to quickly come up with a group of basic ideas and then develop them until you have a final design. Thumbnail drawing is a useful development technique as you could take a quick sketch and use that as a basis for a design that could be used in a future project. Because of this it is especially useful for developing character, object and landscape designs as doing various rough sketches of the design encourages the creator to use their imagination and it gives them more to work with when it comes to finalising the design.

The creation of the 960 grid system has also made thumbnail drawing an efficient way to design webpages as well. the 960 grid can be opened in a number of design and editing softwares such as photoshop as well as being printable. this makes it much easier to accurately recreate digital versions of paper designs as they use the same grid system. 960 gs also makes it easier to come up with initial webpage designs as the printable grids are lined and all the same size, so you don't have to waste time with measurements.       

Material/Technique/ Process Name

Building Textures.

Variations or types

Digital textures, artistic textures, real textures (e.g. tree bark).

How do you use the material/ Step by step instructions for technique or process?

I decided to learn how to make a texture seamless as it is a useful skill to know when animating and making games. The first step to creating a seamless texture is to take a picture of a texture or to download one from the internet. The texture that I used was one that I downloaded from www.DeviantArt.com. Once I downloaded the texture, I opened it in photoshop.

the unedited texture in photoshop.

Before I started the process of making the texture seamless, I noticed that the top right of the image was way darker than the rest of the image. So I decided to crop the dark bit out as it would make the texture look strange when I made it seamless.

Cropping out the dark part of the texture.

I then used the offset tool to make all of the edges of the texture meet up, as it is the edges of the texture which stop the image being seamless.

Using the offset tool.

  
The lines where parts of the texture doesn't meet up are the old edges of the image, which means that the new edges of the texture are from the middle of the image, making it seamless. But I need to get rid of the lines in the picture otherwise the texture wont look right. I did this by using the clone stamp tool to clear up the lines in the texture.The brush that I used was the 'rough dry brush' set as 80% opacity.

Using the clone stamp tool.

The lines are gone thanks to the clone stamp tool.

But it still doesn't look that good. So I clicked Edit -> Define Pattern and opened a new image. I then clicked on the paint bucket tool to colour the layer. I then clicked pattern overlay and picked my texture to create a repeated pattern of the texture.

The finished seamless texture.

    

Evaluation (How you found exploring each Material, Technique or process)

I have found that this is a very good method to use photoshop to create seamless textures that can be used in certain aspects of my work. It is extremely useful as it saves users from having to hand draw textures so that they will fit the object they are covering. It also looks pretty good when it works out well, and you can use your own images as textures rather than downloading them from the internet, making your work more original and unique. It is also a pretty quick and easy process to remember, meaning that even people who are less skilled at photo editing can use this technique.

However, the textures don't always turn out that well, which is usually because the clone stamping step of the process didn't turn out well. It is defiantly the hardest part of the process as it is so tedious, it took me five or six tries until I was happy with the result. It is a problem for someone with low photo editing skills, but the problem can be resolved with practice.    

Material/Technique/ Process Name

Wire Framing

Wire framing is a useful way to design a webpage using a number of different software programs. For my wire frame design of the poetry slam website, im going to use photoshop.

Talk about improving colours and the font placement.