OUGD504 Studio Brief 3

BRIEF TITLE   Type Factory
The Brief	Considerations
To create the visual identity and a range of Promotional material for a typographic museum. Taking into account that the     museum has a gallery, café and bookstore	-The different ways that the visual identity can brand different products. -Using this on the web, creating a website/app -Educating and informing the audience
Concept/Proposition
Create an identity for the type  factory with a range of printed  media along with screen designs-web/apps. Signage would be a key essential therefore would need visuals of the venue
Background
The museum would be in the heart of Leeds. The mission: Aims to inform and enthuse its visitors about all aspects of type to promote all things typographic. The museum would host talks by leading advocates, as well as emerging talents The factory would have a range of artefacts and displays that demonstrate the history of type, typographic design with exhibitions.
Target Audience	Mandatory Requirements
Designers that are studying or professionals who want to either learn to be inspired. Secondary school students on school trips	Main focus on the Print side with concepts of web design -Branding-Logo-Identity -Concept of an app or website promoting the museum -Research and development -Design boards-Range of products
Tone of Voice	Deliverables
Professionals yet still have a fun and quirky side to it.	Branding-Logo-Identity Range of promo materials, Posters, signage, leaflets, branded products for the museum, gallery, cafe and bookstore. Concept of an app or website promoting the museum Letterheads, business cards, invoices, name badges, uniform

OUGD504 Creative Suite Session 4

Five Ink Job
9 Errors
INDESIGN- Applying our knowledge to check documents

Errors
First things first we noticed that the fact that the documents colour set up would of needed 6 plates when the agreed amount was a 5 ink job this means that one of the spot colours shouldn't be in the menu. We were taught that it was good house keeping to delete all unused spot colours, to avoid extra cost.

The next mistake we found was one of the images has been output as a jpeg rather than a tif or an Ai file. This means the image has been compressed and the quality wont match the rest of the document.
If you right click an image and go to Edit with then you can re-open the the image within Photoshop which should be the default setting. (hold alt and double click the image) The image will re open immediately to enable you to edit. 

The next mistake we saw was the fact the images have been re-sized on Indesign rather than the source file itself. This will make the document unnecessarily big which could lead to problems in processing the print job or compressing the file. 'Effective PPI:129' which is too small so open it back up in Photoshop and go to image size. Ask the client to higher the resolution to rectify as the res will still be quite low can use more pixels

Some images have been saved with the RGB mode.

Some images have a lower resolution than 300dpi.

Some images have drastically high resolution which could create problems in processing later.

One of the colour swatches has been set as RGB to fix this the swatch was changed in the right colour mode and adjusted to the right tint.
It is an issue if this swatch is in actual fact being used, there is a danger that this is an outer gamma colour. Could come back from the printers not what you had expected. By double clicking on the swatch you can edit the swatch from RGB to CMYK and it will change it automatically.

Something else we found was one the images didn't bleed off the page this could have caused problems in the cropping process.

The website at the bottom of the design is set to be in Registration colour which is something from crop marks, fold marks etc: therefore it will appear on every plate which results in a lot of ink being used and it will come out unclear and the clarity wont be very god- To solve this we simply need to change the type from registration colour to black.


Grey scale image which has had a spot colour applied to it with a spot colour. This is OK to do in Indesign. If was a greyscale tiff file ypu can create a duo tone image by changing the colours by just clicking and using the swatches. (disregard the spelling mistake)

Quick way to check the document go to file then package, makes a copy of the Indesign file this will then allow you to gather everything and make one folder so you can pass everything on to the printer. Before it packages it gives you a summery of the document which shows you all the above issues and more. Will tell you if any links or fonts missing, but also if there are any RGB issues, how many colours and inks we are using.

 To save as a PDF if that what you prefer, go to File, Adobe PDF Presets then go to Press Quality which is for the very best print out. High quality print would be suitable for the printers within College. If you were to make a PDF for email or on Issuu (just for computer purposes) then you use the PDF which has the smallest file size. The great thing about the PDF is that it contains everything, Fonts, images etc. So you only have one file.

OUGD504- Creative suite session 3

File
   New
      Document
Page Size- Depends on what your designing
finished printed trimmed size
If your designing a postcard then needs to be postcard size
Use width and height options
Columns and Margins
Dont have to use them, however will help for layout purposes, if you are working to a certain grid. If you don't ned them, don't use them.
Margins give you the white space around the edges throughout
More options bleed 3mm compensates for any inaccuracy's of the final print. Standard amount. Info you get from the printer
Slug: Specify the area for custom marks or job information.
Crop marks or any additional info that will get cut off when printed
Specify pages: Booklet layout saddle stitch binding example need to be multiples of 4. Consider the binding.
Facing pages- 2 pages will face each other next to each other. Magazines books, editorial etc.
Primary text frame- Multiple pages mainly with text, will put a text box on all your pages.
When you press ok and if you have set out the document wrong go to file, document, set up.

The importance of working with swatch palettes in Indesign
Window
      Colour
          Swatches (simplified palette)
               CMYK, RGB
Gives you the ink mixtures, square that give you more information.
Colour is applied to an object on the Page
                                               Fill or Stroke

The box and the T symbol allows you to fill the Text Box around

Menu

-New colour Swatch

Spot colour library by going into colour mode

CMYK Swatch Maker

Grey square next to the colours in the swatch layout, means global colour. Will change automatically by clicking the globally. If working with multiple pages, will change all there were that colour,

If working with a limited colour palette, can make tint swatches

Options

Select the swatch that you want tints of, adjust the bar at the bottom. IF you change the original colour swatch, it will automatically change the tint swatch as well.

Photoshop considerations

Colour-Before saving switch to cmyk

Image size- Work to actual size, shouldn't enlarge or reduce the image in Indesign

Smaller- Will make problems when process

Bigger-Loose quality

Dpi300 Resolution

File size-tiff or photoshop files PSD

not Jpeg increase the processes when printing, looses quality

Choose PSD files to keep lyres, allows transparency, tiff files doesn't allow it.

Illustrator Considerations

Colour mode- CMYK, specifically the colours that have been made for the document. Colour that have been applied

Save as. Ai can copy and paste vector artwork (never do it in Photoshop)

Indesign Considerations

File and place, Duo tone image

The spot colours from photoshop would be brought into Indesign

Works the same with illustrator swell images will b e low resolution the linked folder for the images can be changed in photoshop and illustrator will be updated automatically

What happens to indesign files when it is ready to print

Window

-Output

-Separation preview

-View separations quality will become higher

Isolate individual inks

bottom three haven't been used

Can check that they are in fact spot colours as you turn individual ones on you can see them as they layer up

Principle of commercial is the same for screen print.

Good practise to delete the spot colours that you do not use to save on expense

File

Print

Output

Can see how it my work, option. 

If you know some arnt being used, press the print icon and turn off

Frequency and angle are to do with half tones

determines the courseness or the opposite

fine grid of dots determine how fine the mage is.

Angle working with mulitople inks. CMYK orinting on top of the each other screen is angles so i doesnt interfere with the other dots. Rotated through angles moiré- to get accents hold down alt press e twice 

View 

Overprint preview

Activate overprint previw box to do with decisions indesign uses to make the plates

overlapping colours when you turn the top one off it will leave a space. Knocking out the yellow has been knocked out of the cyan. So the yellw prints as a yellow and doesn't come out any other colour

Black will always overprint by default 

-Window

-Output

-Attributes

-Overprint fill

they mix the colours, so you can work with more colours by mixing them to keep costs down

 

moiré

 Knocking out

 Overprint

OUGD504 Design for web- Dreamweaver- Session 3

Move root folder into uder work
Open dreamweaver and click manage sites, locate the root folder and it will open
Make the final three buttons in illustrator, make sure you save it as png-24 and illustrator file.
<div id="button"
</div>
Make sure that the buttons are all the same size in illustrator, avoid moving them around the page so that when it is in Dreamweaver it is all alined

 Creating th epages linking all the buttons to the correct pages
<a href=     <----code telling you where it is going
if they are going no where add in #
<a href= "index.html"
add in the different pages such as work. html, about. html, contact.html Resave the pages as save as
then preview and it should have worked

 

This is the webpage

Adding content

With CSS you work with the box model made out of 4 different areas:

Style sheet and add in these measurements:

 

adding imagery

OUGD504 Design for web- Dreamweaver- Session 2

Because we use a server, with loads of other users and computers to open dreamweaver with the work we had done in previous sessions, we need to move the root root folder from the desktop to the userwork. Then go to manage sites then choose the location for the appropriate website. If it has been done successfully, everything you had done should be in the the files panal. Never use options in the welcome page. Always open in the files panel. To open up the code page, click index.html
cmd N
-blank page
  -css
    -create
css can only see the code, not the design

css coding advantages over html, custom fonts, colours advanced layout. Won't need to hand design the coding for all the pages. Links all the pages to keep the design thropughout the website the same.

The way to tell is that it only allows you to view in code.
-Grey text means that it is a note to the designer doesnt actually show up.
/*note here*/   <---- example of how to write a note.
@charset "utf-8";
/*css document*/
DIV ID
Generic CSS code
Font
adding code

4.body{        (the squiggly bracket will open up a drop down menu full of options)
   (press return)
       font family
       font-family:
             Verdana, Geneva, Sans-serif; (gives options incase one isn't available)
} -to close
File then save- Remember no capitals
     CSS styles
        Properties
            chain link
                find the stylesheet to the page

1.<html/>
2.<head>
3.<title> Sophie Abell </title>
4.<link href = "stylesheet.css" rel= "stylesheet" type "text/css">
5.</head>
6.
7.<body>
8. Hello
9. </body>
10. </html>

Going to work with a fixed size
Dimensions 1024x768
Creating the code for the box
Naming Container/Wrapper
#container
width:1024px
height:768px

Every different setting leave a space for easy reading
8. #container{
9.                  width:1024px;
10.                 height:768px;
11.                 background-colour: #6CF
12. }
cmd and S to save
close the stylesheet

7.<body>
8. <div id= "container">
9. Hello
10. </div

Save then check

To position the box/container, underneath background colour (by moving the container it gets rid of the white boarder around)

Position: fixed;       (get a drop down box of absolute, fixed,inherit,relative,static)
top:0;
left:0;

Design decisions
Centre- Nav Top
to align the container to the centre
left:50%;   - still not going to work as it is bang in the middle. Just doesn't work

Make the container back to the left half of its width
Move the container back to the left by- 512px
#container{
                 width:1024px;
                 height:768px;
                 background-colour: #6CF;
                 Position: fixed;
                 top:0;
                 left:50%;
                 margin-left:-512px;

}

#top{
        width:1024px;
         height:150px;
         background-colour:#ccc;
}

Go back to the index page
<body>
<div id= "container">
<div id= "top'>/div>

When adding your designed logo on illustrator, make sure when you open make sure the profile is for web.
When saving click save for web.
PNG-24 (transparent background)
uncheck hide extension
     logo.png
          click save
Go back to dreamweaver
#logo{
          width:150px;
           height:150px;
          positon:relative;
          float:left;
          background-image:url (images/logo.png);
}

Navigation area
create button in illustrator
Once created duplicate layer
In the duplicated layer make a change, for example change to italic, or add a line through
save for web each layer separately
home1.png
home2.png

#button{
width:218px;
height:150px;
position:relative;
float:left;
Insert- image objects- rollover images
Fill in the tabs click ok.
Then you get loads of code already generated (below)

Remember when saving move the root folder back to the desktop out of the user work and click replace.