Creative practice/ Workshop - The Grid

In this session we were explained what is The Grid and for what it is used. We were ask to collect pages from magazines to lay pages beneath a sheet of layout paper and to try to suggest what the original design grid might have been. We had to draw in the grid lines and to take as many measurements as we think might have been relevant to the designer who used it as a basis for the page layout. Our second task was to visualise our own version of a grid using CS6 InDesign.

THE GRID:
...a structure comprising a series of horizontal and vertical lines, used to arrange content.

"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice. ”

Josef Müller-Brockmann

Grids enable you to build solid structure and form into your design. In its most basic terms, a grid system is a structure comprising a series of horizontal and vertical lines which intersect and are then used to arrange content. In even more basic terms (which make it easier to understand!) a grid system is a way of providing a system that designers can work with to structure and present content and imagery in a much more readable, manageable way. Тhе grid system providес a solid base that to grow a design from.

Two kinds of nonprinting grids are available: a baseline grid for aligning columns of text, and a document grid for aligning objects. On the screen, a baseline grid resembles ruled notebook paper, and a document grid resembles graph paper. 

Baseline Grid and Document Grid 

An example grid, the Gerstner , on the Gridset app website.

CAPITAL magazine, with its Complex Grid designed by 

''Complex grid'' designed by Karl Gerstner for Capital Magazine

How to make ''Complex Grid'' :

http://whatype.com/texts/the-complex-grid/''Complex Grid'' tutorial 

There are different types of Grid:

Golden section: 

No book about typography would be complete without a discussion of the golden section, a ratio (relationship between two numbers) that has been used in Western art and architecture for more than two thousand years. The formula for the golden section is a : b = b : (a+b). This means that the smaller of two elements (such as the shorter side of a rectangle) relates to the larger element in the same way that the larger element relates to the two parts combined. In other words, side a is to side b as side b is to the sum of both sides. Expressed numerically, the ratio for the golden section is 1 : 1.618.

Golden Section

Golden section

Single-Column Grid:

The simplest grid consists of a single column of text surounded by margins. By asking for page dimensions and margin widths from the outset, layout programs encourage you to design your page from the outside in. (The text column is the space left over when the margins have been subtracted.) Alternatively, you can design your page from the inside out, by setting your margins to zero and then positioning guidelines and text boxes on a blank page. This allows you to experiment with the margins and columns rather than making a commitment as soon as you open a new document. 

single-column grid 

Designing in Spread:

Books and magazines should be designed as spreads (facing pages). The two-page spread, rather than the individual page, is the main unit of design. Left and right margins become inside and outside margins. Page layout programs assume that the inside margins are the same on both the left- and right-hand pages, yielding a symmetrical, mirror-image spread. 

double spread page 

Multicolumn Grid:

While single-column grids work well for simple documents, multicolumn grids provide flexible formats for publications that have a complex hierarchy or that integrate text and illustrations. The more columns you create, the more flexible your grid becomes. You can use the grid to articulate the hierarchy of the publication by creating zones for different kinds of content. A text or image can occupy a single column or it can span several. Not all the space has to be filled.

multicolumn grid

Designing with a ''Hang line'' :

In addition to creating vertical zones with the columns of the grid, you can also divide the page horizontally. For example, an area across the top can be reserved for images and captions, and body text can “hang” from a common line. Graphic designers call this a hang line. In architecture, a horizontal reference point like this is known as a datum.

Hang line designing 

Modular Grid:

A modular grid has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right. These modules govern the placement and cropping of pictures as well as text. 

modular grid 

Phototype/How to use text in Photoshop

In this session with Oli we were shown how to add different effects to type and how to make 'type mask'  so we could place an image in the text.

We used Adobe Photoshop program. To add different effects to a type first we have to create a new layer with type on in, then with double clicking on the layer it opens a window with different 'Layer styles' , from there we could add whatever effect we want. we could play around with ''Drop shadow'' to add shadow to the type, contures, textures, etc. We were also shown how to warp text by going to ''type -> warp text'' that opens a window with different styles of warp. 

how to warp text 

warp text: Arc style

warp text: Arc Lower style

warp text: Flag style 

To add image to text we had to choose an image we want to place in the text, then with Horizontal to Vertical Mask Tool, type the text inside the image, then create new layer,  Click on ''Edit -> Copy merged -> Edit -> Paste'' that paste the text with the image in it on the new layer. here's a simple example: 

Vertical Typing mask ''Love''

Final result 

Here are some of the work I did in college:

Here I used as image in text the 9 planet surfaces. For each planet I made new layer, then I ''Multiply'' some of the layers, and on some of the word I changed the ''Transparency'' 

Basically I experimented with different things, just to see how they work 

Adobe Indesign practise/ CD Covers/ Reid Miles inspired

In this session we  again discussed Reid Miles album covers. We had to explore the basic methods he uses in his designs.  In his work you can find fundamental principles which repeat in a lot of his designs. For example using coloured letters as well as a range of different typefaces. With the different type faces he would alter and mutate them to take on their own identity, often overlapping them or enlarging them to take up more space. In his style he typically uses small pictures that take up a  small amount of space or incorporated them in to one of the larger letters or shapes. Another part of his identity is adding an effect to the pictures on the album covers. He would often take the pictures himself or use the work of Francis Wolff. Apart from the effect he would often play around with the perspective of the picture for added effect. Although there are many colours and effect within the design, the actual background is almost always a plain colour, something neutral as not to take away from the design itself but to compliment what he has already done.
In this session we had to try and replicate his style and the techniques he used:

Home practise on making Reid Miles inspired CD Covers. Here i tried to accent the typeface, overlapping the letter.  The pictures and text were chosen at random. I edited the picture  in photoshop in the style of Reid Miles. To achieve this effect  I chose a bold typeface which is too big for the album and overlapped the letters. I have changed the kerning and the tracking of the letters.

This is the 1st finished design.

I changed the placement of the text to give the design more balance, so this is the final finished design.I would change some things like the text as it could be more readable, but this was my first attempt.

This was the inspiration for my design.

This is another take on  one his design. I tried to replicate the use of pictures in shapes. I decided to use triangles instead of stripes.

This is the finished design

This was the inspiration for my second design

In this design I decided to use numbers instead of letters. I created the numbers in illustrator using different typefaces. I used the pathfinder tool to cut them in the way that I needed. After i sent the file to indesign and finished the design with random names.

This is the finished design. In this design I would have liked to change the position of ''Us Three''.

First I built the Numbers in Illustrator 

This is the original that inspired my design.

Photoshop/ practice on different effects and adjustments

In this session we were shown how to invert a colour photo into black and white photo and some other effects using Photoshop.
There are two ways of inverting a colour photo into a black and white photo. First is by Selecting the image -> Image -> Mode -> Gray scale 

the original photo 

Inverted into Black & White photo 

OR Select -> Adjustment -> Black and White 

We were shown how to bring colour to black and white image by Duplicating the layer with the original photo, changing it to an Black and White image and then playing with the ''Opacity'' - by this way we bring back colour to the image.

the original coloured photo

The photo after inverted it into a Black & White photo, and then bringing back colour with the ''Opacity'' tool 

We were show how to put a different colour to the image. We had to create a new layer, fill it with the colour we want and then click on ''Multiply''.  That blends the original photo with the colour. Then we can play around with the opacity to change the intensity of the colour.

We were shown how to put a photo over another photo.
Choose a photo. Create a new document with a photo we want to place above. Then go to  Edit-> Copy. Go back to the document with the original photo - Edit -> Paste special - Paste into, then play with the ''Opacity''  to reveal the photo under.

The first ''Document'' with the photo I chose 

The second ''Document'' with the photo I want to place above the photo from Document 1 

Back to Document 1

Playing with ''Opacity'' to reveal the photo under 

We were also shown how to make image in typeface:

Type text with  ''Horizontal  type mast tool'' -> Select -> Inverse -> Make new layer -> Fill the new layer with colour -> Press "Enter" 

Typing mask

Fill the new layer with colour

We looked at different Effects in Photoshop, such as adding to a photo a ''Newspaper'' effect

We tried different effects from the ''Filter Gallery"