Wednesday 26 October 2011

Typeface experiments

I have been experimenting with possible typefaces for my cracker mail outs. I want something friendly and inviting and fairly lighthearted.




Cracker ideas and research

Nets :


Design inspiration.....



Alternative net idea - love the shape but wont "snap" so not as effective.


how to make a christmas cracker

I have been researching how to make a christmas cracker so I can make some to send to agencies this week/next week in light of getting visits and potentially a placement for christmas - and just for keeping in touch with companies I have already had contact with. After looking at a few different nets, I decided that this is probably the best net for me to use as it is the least complicated in terms of folding - I am not especially interested in designing for complicated packaging nets so it makes no sense for me to promote what I do with one. For this design I will first make my own paper - screen print onto really thin stock and that will be the basis of my design. Within the cracker will be my business card and a note - or similar to explain the cracker and to point people to my website.



Required Supplies and Equipment
  • Wrapping paper (cut to 7.5 x 12 inches) -- crackers made with lighter weight papers will tear apart easier when pulled.
  • Stiffener ends (cut into 2.25 x 7 inches -- use 60-70 weight white card stock, such as 67# Exact Vellum Bristol.
  • Fortunes, jokes or riddles.
  • Cracker snaps.
  • Paper hats.
  • Small gifts or novelty items (at least one per cracker).
  • Cracker rollers (1 pair).
  • Cardboard tubes (2 x 4 inches).
  • Low temperature glue gun.
  • Scissors.
  • Curling ribbon.
Make Your Own Christmas Cracker
 
Step by Step Directions
1 -- Insert rollers into ends of cardboard tube (if fit between tube and roller is not snug enough, add a little masking tape to smaller (red) end of roller).
Make Your Own Christmas Cracker
Make Your Own Christmas Cracker
2 -- Lay roller-tube assembly on back of wrapping paper making certain tube is centered across length of paper. Apply a small drop of glue from glue gun to bottom middle edge of paper and roll tube back over glue.
Make Your Own Christmas Cracker 
3 -- Place snap under front (leading) edge of roller-tube assembly, making certain snap is centered across length of paper.
Make Your Own Christmas Cracker
4 -- Roll paper onto roller-tube assembly to within a half inch or so of paper's end. Make certain paper rolls evenly (straight) onto tube.
Make Your Own Christmas Cracker
5 -- With glue gun, run a narrow bead of glue along back of paper about a quarter inch in from top edge. Roll paper over glue keeping glued seam pressed against work surface for several seconds to allow glue to harden (placement of glue bead may have to be adjusted slightly inward if glue flows out of seam onto outer surface of wrapping paper).
Make Your Own Christmas Cracker
6 -- While holding paper cylinder in middle (one hand grasping cardboard tube), remove roller from each end of cylinder.
Make Your Own Christmas Cracker
Make Your Own Christmas Cracker
7 -- Roll stiffener end into slightly smaller diameter cylinder than cracker and insert into end of cracker until even with outer edge. Do not cover snap during this procedure -- it must remain free in end of cracker.
Make Your Own Christmas Cracker
8 -- Spread stiffener out firmly against inside wall of cracker end and glue into place with glue gun.

9 -- Repeat step 8 on other end of cracker.
Make Your Own Christmas Cracker
10 -- Using thumb and forefinger, crimp (gather) one end of cracker between tube and reinforced (stiffened) end.
Make Your Own Christmas Cracker
11 -- Securely tie a 10 - 12 inch length of curling ribbon onto the gather of the cracker using a double knot. Then clip off the loose ribbon ends.
Make Your Own Christmas Cracker
12 -- Insert gifts/messages into open end of the cracker. The fillable central part of the cracker measures 2 inches in diameter by 4 inches in length. Your items must fit comfortably into this space in order for the cracker to be closed and finished. When filling your crackers, make certain you do not push the cracker snap into the center of the cracker.
 
13 -- Repeat steps 11 and 12 for open end of cracker.
Make Your Own Christmas Cracker
14 -- Check the finished end of the cracker to make certain the snap is located near the outer rim of the cracker and not too far down into the cylinder. Reposition with fingers as necessary.

Your cracker is now finished and ready to be shared with your party guests.
Make Your Own Christmas Cracker
Some practice is usually required to make a consistently well-wrapped and formed cracker. Techniques such as the one described above using solid core centers, rollers, and stiffened ends have been found by many people to be among the easiest methods for making nice looking crackers. Other techniques and directions for making your own party crackers can be found at the following web addresses:

Friday 21 October 2011

Web session 1

- Internet created 1990 by Tim Bernard Lee (Brit) and a Belgian dude
- They used to work for CERN (Hadron Collider)
- First ever server was a NeXT server - Created by Steve Jobs after being sacked from Apple - then earn't enough money to buy Apple.
- HTML (hyper text markup language)
- URL = Domain name
- WYSIWIG - what you see is what you get
- Dreamweaver can only accurately show you what your website will look like if it's html - css it struggles.
- Java script (plug ins) - hard to hand code - but you can steal and customise existing pieces of java script.
- It's okay to re-use other peoples java script
- CMS : content management system (like facebook - constantly updating)

Two kinds of website :
- Static website - less useful - nothing ever changes (e.g.ads)
- Dynamic website - interactive

Working with a client :
- sketch out design (scan) and site map
- draw up contract
- no more than 3 changes to the design (after the sketch has been agreed)
- After 3 they have to pay per hour
- make sure ALL pages link to one another
- get client to put together some inspirations (e.g.
- create swatches of the colour palette you are going to use (with hex codes) before you start
- choose fonts and font sizes before you start
- £500 for diy website - basic - took simon 6 hours - without working with a coder and creating something really complicated should really charge more than this. (£200-£700).
- Promotion - word of mouth only gets enough business.

- Most websites are 800px x 600px - follows 1990's guidelines.
- breaking these guidelines is more interesting...
- e.g. scroll left to right rather than up and down
- buttons tend to be square/rectangle (rather than shaped) because html responds to this. This is changeable in CSS.
- Need to make sure you website works accross multiple browsers - including iphone screen.


MAKING A WEBSITE IN DREAM WEAVER 

-Never use numbers/glyphs/spaces/caps/no more than 8 characters

create new html. site
to link to route folder  :  site>new site>
this should now show in the files panel

link server : when you buy website you will be sent the details to add to this page to make your site go live

 Home page must be saved as index. 
Html tables must add up - like a jigsaw - cells in a table must be specific size to fit into the table.

create a table :

good practice to add 0's rather than leave boxes blank
Some browsers read blank as 1

table so far...

have to edit height in code - space after width>select heigh and edit





&nbsp means 'nothing'


Change bg colour so can see shape in the live preview

star after file name means it hasnt been saved since changes have been made :

SAVE webpage then preview in safari.

10px gap between design and top of screen is impossible to remove in html - can in css

default alignment is left - changeable in code or design mode.


To create table inside table - click inside table and then insert>table again.



go to code - add height 

Merge cells




(add colour)

too bump up boxes and make it add up - click on bottom cell- add table then change height to 400px in code....




colour each section to make it easier to differentiate between them while working :

CSS WEBSITE

site>new site> link to new css route folder


html works by - separate pages of code
css - one page of code (style sheet)

create new html page and save, then create new css file and link to css route folder.
save as 'style sheet'
to link style sheet to html site - on html site go to icon and link to css site



'notes' can be used to organise css - e.g. /* css document */ (in grey) = the note doesn't show on the site

Creating a 'div'

alt + 3  creates a # symbol

wrapper/container means table (equiv. in html)
curly bracket { brings up all the specifications possible.
using spaces and new lines keeps it tidy.




semi colon finishes it ;
add width and close with }

CODE IN HTML :

space it out to make it clear to read
add 'div' to code - as you type in div id=" it will bring up 'container)
add </ and it will bring up </div> to close
make sure close brackets!

too add colour to box on stylesheet after width> space> background colour 
(semi colon to close)

This should then change colour of box in html design view

(dimensions of box were wrong - switched round dimentions in css and saved ) =

to centralize box add 'position' to style sheet
chose 'absolute' 
this allows you to remove gap between table and top of page (absolute positioning)

KEEP SAVING TO PREVIEW IN HTML!!!!!!

safari preview:
to centralize :
Margin-left = minus half of full width

design view will probably no longer work - dreamweaver can't handle it

refresh browser if live safari view doesnt add up

add this to css
then edit in html code - insert div inside container div- use tab key to tab in new div to make it clear
new preview :

next stages would be to add the boxes etc.