Wednesday 30 October 2013

OUGD504: Creative Suite: 1

In CMYK the lightest colour is normally added first, with the overlay of the 2 other colours, cyan and magenta the colours mix and create different colours. Black is used because it keys together the other colours and refine the shadows and it adds in extra depth.

There are multiple ways to apply colour in illustrator, clicking show options on Colour allows you to adjust the CYMK levels individually which is great if you're wanting to do something related to screen-printing and commercial.


 You can create swatches by dragging in a colour from a object into the swatch tool bar.


Alternatively use the colour picker.


It's good practice to get rid of all the swatch colours to allow you to then work from fresh and make up your own swatches so you don't mess up printing.


If you select Small list view you're able to see what your colours are, (For example: CYMK colours, and registration marks.) and what they are called. Only use registration marks if your creating printers marks.


Then add in your own, when you create them this way you have full control of the CMYK levels and whatever colour mode is necessary. Once created it'll take on the swatch name, which will be the amounts of each colour. It's best to keep them like this so you know whats in them.

You can pick a colour in the Colour tool bar and then create a new swatch from them too.


You can also use the colour picker to create colours that you can create swatches out of. 


You can also have a pre-existing art-work piece, you can then get all the colours from that piece of art work (if it's created in illustrator), by going to the swatch options and clicking 'Add used colours'/'Add selected colours'. This then adds all the colours.


Once that's done, the swatches should all have a little triangle, this means it's globally selected and if I was to edit this swatch it would edit the object's colours on the document. So If i had a black box that was globally linked, I could change the black on the swatch bar to a red and the box would then become red. This only works if Global is selected. 


If i have one of the global objects selected I'm able to then work with tints, once selected. This allows me to work better within very limited palettes. 


I can then add these tints to the Swatch list by clicking Add to Swatch from the Colour options. What is great about this is that if I was to change the original colour the tint as well will also change automatically.


This doesn't just work for one tint, but it will be applied to all so you can create a range of tints.


Spot colours are colours that aren't mixed with CMYK, they can be used for things such as a one or two colour print job. So you'll be using just two inks. Cheaper then CMYK. Doing this you can get special colours that aren't able to be produced with CMYK, such a fluorescence colours. Such as getting a colour that's for a brand, such a the colour used for the Sainsbury's. This is achieved by using a spot colour, it gives you consistency. (Pantone)



You can find such spot colours within the Pantone Solid coated range, you can tell that they're spot colours by the little triangle in the corner of each colour it has a little black spot to signify that. 



To gain more tonal range you can also adjust the tint of them. This is alot better of the CYMK method, using just one spot colour you can achieve more colours with tints.


If I want to transfer my library of swatches for a client/project, for a later use I can save my swatch library  to transfer to Indesign and Photoshop I click 'Save swatch library as ASE' (When doing this save the file with the rest of the work so it's easy to access instead of it been hidden with a file somewhere) 

 If I want it to be transferred to another illustrator file I save as the option below.

If I then want to access this in a new document I simply have to follow this route within the Swatch tool bar:



Tuesday 29 October 2013

OUGD504: Designing for Web (Workshop 1)


Web standards, standards to follow when designing for the web. We need to know these limitations to know if our website will fit within these limitations.

Web standards include acronyms, abbreviations. For example: HTML, CSS, XML, PHP.

HTML - Hyper text markup language
XHTML - Extended: HTML

CSS - Cascading style sheets

WYSIWYG - What you see is what you get. (e.g.: Dreamweaver, what you see when making it is what you get)

SEO - Search engine optimisation (Getting websites to end up on Google.)

FTP - File transfer protocole. 

URL - Uniform resource locator

XML } Server side coding languages, mostly for e-commerce.
PHP

UI - User interface (Designers)
UX - User experience (Your reaction to a website)
WWW - World wide web

Typing code has a set standard. Eg: A capital where there is supposed to be a lower case will make it not work.


Limitations, designing for the lowest common denominator.

I'll need to design for someone who's screens not too good. 

One limitation is colour, originally there are only 216 colours that a website can use. These are called Web-safe colours. These colours are reproduced now using HTML where there is a three or six digit code:


Red
#FF0000
#FF0

White
#FFFFFFF
#FFF

Black
#0000000

The combination of RGB is able to produce up to 16 million plus different colours, this is present in Photoshop colour picker where you're able to find the RGB colour codes:

The combination of Red, Green and Blue values from 0 to 255 (256 unique shades for each value) 
Red 256 x Green 256 x Blue 256 = 16, 777, 216
The wider range of colours are able to be produced in CSS that aren't available in HTML, If you wanted pure red in CSS you would input: RGB (255, 0, 0). You are able to find the hexadecimal colours in photoshop if you wanted using web-safe colours.

The problem with CSS colours is that it's not consistent, it may look correct on one screen, but on another it might have the possibility to be different on another because some monitors may not be able to support the colours that are present in CSS. This is the reason Hex colours are Web-safe colours over CSS. Whenever you break the rules of web design it has the possibility of it been very inconsistent. (Websites on Awwards for example).

If you're designing towards a target audience who would have a new computer, it generally would be okay to make it using CSS, and web-safe only for a audience who may not.

Web-safe Fonts

For a chosen font to be displayed consistently across different computers, a standard font must be used, this means you can't use custom fonts from places such as Dafont. 

A font-family is needed to be specified, so for example, Helvetica font family, if they didn't have this font Times new roman would be displayed instead. Fonts need to be specified to be there as a back up if Helvetica wasn't there for example Arial, This is called a fall-back option. 


Web safe serif fonts:


Georgia, serif
“Palatino Linotype”, “Book Antiqua”, Palatino, serif
“Times New Roman”, Times, Serif


You need to put in the " " so it knows those are the ones that are specified for your chosen web font.


Web safe sans-serif fonts:



Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
“Trebuchet MS”, Helvetica, sans-serif
Verdana, Geneva, sans-serif

There is also monotype web safe fonts too. 

You can break this web-standard. 

The way you do this is by installing a font to a website, the problem with this is that it breaks the copyright laws of a font. For example installing Futura to a website, you will be illegally distributing that font.

A free font from Dafont is free for personal use, if it was installed to a website, you'd be breaking the law. 

However you can install a font using @font-face, you are able to install fonts to a website, yet you just can't install fonts that don't have a license. 

Font squirrel is better then DaFont for Web-safe fonts. 

Click on Web-font kit on font squirrel.



 But always read the license, JUST in case.

Pixel resolutions, the original computers at CERN originally displayed images at 640 x 480. These are all the resolutions now. Some people still design for the 640 x 480 and thats a problem, because theres so many different resolutions. It's unsolved as a problem.

640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (Macs) 

The current solution at the moment is responsive web design. 

File formats

You have to work with Lossy images on the image, in print you work with Lossless so the images don't lose quality. You have work with lossy images in web so they can compress and adjust to different web resolutions. The main lossy file types are: 

PNG
GIF
PDF
JPEG

72ppi (96ppi / 220ppi) Most people still work with 72ppi because it offers small file size and little visible difference.


Dreamweaver:

This only opens up the once, after that it'll be looking for the root file for the website so it won't be there because i'll be on a different mac. 


We're starting by making a HTML document, it opens up to the simplest website we could possibly make.

Because Dreamweaver is a WYSIWYG, we can view the code and the website as if it was live.


The top line of code isn't needed, for it to work, it's just there for the web standard, so is the line below partly, par the HTML. 

<HTML> 

What this means is that it's html from there onwards.
If there's ever a </HTML> it means that's where ends.

Everything has to be opened and closed, as a web standard.

<head>

Is where web functionality is, if you wanted to put any other coding language you would specify it within the head. It's stuff that won't be shown on the site.

<meta>

Used for keywords, to find it when searched. We don't really need it just for now.


This is the most barebones website.

<title> 

This is the title of the website, it's possible to add favicons here.

<body>

Anything you want in the body is visible on the website. This is where the content goes. 

When working in dreamweaver, everything has to be within one folder, just like indesign. Within indesign you can package, however in dreamweaver, it lacks this function.

When creating a website on here, the files have to be within User work.

Get used to this workflow of being incredibly organised. 
When creating a folder for the work, no spaces, no capitals, and no funky characters.


everything will be inside these two folders, images been the subfolder. 

Then in Dreamweaver, to create a new site: Site > New Site.
The naming here doesn't have to follow conventions.


We save this site in the User-work folder as index.html. Index because this is our homesite and is a universal standard for creating webpages.


Im able to preview by clicking on the globe to see what the website would look like once it goes live on the internet.


EVERY time you make a change to the website, save it. Then view it so you are able to debug before anything becomes a problem.

Because I've just typed in some text, it appears as time new roman plainly.

For next weeks session, attempt to design the front page of the site I want to create. (3 Scamp Examples, with annotations) - Site map, Decide on font, colours. etc.


Friday 25 October 2013

OUGD504: Design for Web Worskhop 1

Research using the following methods:

Qualitative Research
Research that is conducted to find out the target audience's opinions. Information rich.

Quantitative Research
Research that provides a lot of data and numbers. Good for insight at large quantities. 

Primary Research
Primary research is new, not old, information.
Secondary Research
Secondary research is research performed on old data. E.g. New analysis on data gathered last year.
Segmentation
You hear a lot about ‘Market Segmentation’. It means the market of the product, or service, is segmented into groups. Those groups, or segments, represent a part of the customer group or audience. They are usually grouped by demographics such as sex, age, ethnicity, income, occupation etc.
Focus Groups
Moderated groups discussions, selected to represent target audience and users.
Visual Research
Gathering visual imagery, useful for solving problems and for inspiration.

In the studio we were tasked in groups of 3 to help each other with our concepts for the websites, using our summer brief as a launch pad for our concepts. Like how we did in with the Concept workshop. I started of by using Monopoly as my concept to start from.


   What is your subject matter?
  • Origins
  • Contextual Background. I.e: Capitalism, Consumerism.
  • Culture
  • Board games
   What are you trying to communicate?
  • Cultural background in Monopoly.
  • It's origins and original purpose.
  • Using Monopoly as a method of teaching.
   Who will be / could be your audience or ‘end-user’?
  • Young adults 18-25
   What will be the most appropriate / effective form of content?
  • History
  • Facts
  • Interactivity
   What is the function & Purpose?
  • Inform
  • Educate
   What Sector/ Industry is it is it?
  • Education
However after a talk with Phil, I decided this probably wouldn't be in my best interest to do this as I would be just repeating what I'd be doing in the other modules, such as Consumerism. I decided to pull back and go back to with something revolving around games/ board games.


Grace decided with out help to go with Ancient Egypt after struggling with Hieroglyphics at first, we noted down all the different topics for the content she could look into which really helped because theres so much to Egypt to cover.

Ant went with James Bond 007 film franchise, he apparently already had his concept thought up, by the time we'd finished discussing there wasn't much time to come back to discuss what he'd put.



After thinking on it, while doing the rest of the groups sheets, I thought I'd go with doing Playing Card games, creating a website to teach with them. This is because after having a quick look on my phone at what existing playing card games there is there was an apparent lack of them, ones that did were rather alienating to any audience that might have been interested in learning to playing card games. It's hard to quickly learn them from walls of text and I'd like to solve this.

   What is your subject matter?
  • Playing Card games
   What are you trying to communicate?
  • How to play card games
   Who will be / could be your audience or ‘end-user’?
  • Young adults 18-25+
  • Families (Parents), 30 - 40+ 
   What will be the most appropriate / effective form of content?
  • Infographics
   What is the function & Purpose?
  • Educate
   What Sector/ Industry is it is it?
  • Games
As rough as this currently is, It gives me a good idea of what I'm targeting now. The next task in class was to come up with the top 5 web pages that might be on our website. I couldn't make it to five, and I came up with:

  • Home page
  • Most popular
  • Categories
  • Games (A-Z)
Adding in anymore would be simply fluffing it out with unnecessary pages.




The next task was to attempt to draw out how we envision the site would perhaps look based on the needs and requirements from the previous 2 tasks, I found this task really hard as I had not really looked at any material that would be me inspiration to what a website actually looks like.

 It's difficult to actually just design a website straight off without looking at other examples, or simply looking at any old website because there's so many different things going on it's hard to exactly imagine at first how it'll all fit together.

Because of this I think my designs came of boring, It's difficult when you don't have material to work with, or an understanding of interesting websites. I drew what I thought would work as a website and because of this I got negative feedback, mainly all saying the same thing, such as it's boring and no one was sure exactly of what it was yet which is all valid, because it's true.


For next weeks session:
What is already out there on the web? You will research your chosen area of exploration. Gather as much information on existing design, design thinking and consumer needs etc.… that will help you to produce the best design for web representation you can.

For Tuesday:
You are required to print off 5 of what you consider to be the best designs and bring in to next weeks session.

Wednesday 23 October 2013

Card games

Learn Card Games 

Modern, Family games

Family games

Accessible

Instructible card games

Easily understandable


Infographics

Monday 21 October 2013

OUGD504: Laser cutting Induction


To start at the Laser cut induction, we had a Health and Safety talk, been told what we can and can't use with the laser cutter. These been Metal and mirrors, anything reflective for that manner. However you can use reflective acrylic, it's matte on one side and a mirror on the other and this cuts fine. The main reason this is obviously the laser is gonna reflect about the room if it does hit a mirror.


You can't cut glass either, it shatters, but you can engrave it (if it's flat) and raster it. But you're limited to just this.
The other main problem that was raised is from cutting acrylic sheets, they have fumes that come off them so you're limited to just cutting this for an hour so it doesn't harm too much. However long exposure can have some effects. However, acrylic cuts really nicely, especially the fluorescent sheets, this is because it doesn't leave burn marks behind.


How you get the file to the laser cutter is through a program that is installed on the machines next to the laser cutter which is called Ethos, it's a specialist program just made for the laser cutter to create the designs to cut, you're limited to cutting up to A1 however. You can import straight from a illustrator or photoshop file, meaning you can also cut raster images. (Only in grayscale which produces a really 
nice effect.)


The different types of cut the machine can do are:
  • No cut - No cut.
  • Raster - Creates a image, using the grayscale values as height values.
  • Cut through - Cuts through the material.
  • Engrave - Engraves the material.
  • Kiss cut - Like engrave but very faint.

How to: Operate the laser cutter machine.
  1. Turn the Laser cutter on if it's not on already.
  2. Place the material on the bed
  3. Loosen the nut on the laser and place the spacer on top and bring the laser back down and tighten the nut. (This focuses the laser perfectly to the material.)
  4. Then press the online button, which is a little hand.
  5. Then press the load media button, which is a piece of paper.
  6. Use the arrows to place the red dot of the laser onto the bottom left corner of the paper.
  7. Press enter.
  8. Then move it to the top right, with at least 3cm of space from where the artwork is gonna be.
  9. Press enter.
  10. Insert your work into the Ethos program, and make sure it's all correct.
  11. Then apply the different cut lines to the lines of the art-work.
  12. Change the material type.
  13. Then send it to be cut.

Laser cutting examples: