Mini Mag :: Final Product

Well the research and inspiration is a finished chapter now. I have spent the time actually trying to create some “art”. i have created my background in Illustrator and I’m now starting to work out how to present it. I have also created the little illustrator flower in Illustrator. I will use this in my magazine as well.

The illustrator icon is created by using a tracing image of the icon. I had some troubles creating the gradient until I figured out how to use the transparency gradient mask and discovered that the grayscale palette dont give a a black colour that is fully black, meaning its not fully transparent. So I had to choose black from the rgb or cmyk palette instead

The wall paper I created in Illustrator is done by using different gradients, shapes and blending modes, blending paths etc.

The first thoughts have also gone into how I might present the first two pages. I’m still not fully satisfied but you get the idea.

I’m still not totally clear on how I want to present the actual tutorial, but I have a rough idea.

Mini Mag :: Inspiration

I went on to buy two magazines to get some inspiration, I got

I found severeal good ideas inside these two issues, they both contain a lot of good tutorials and some creative layouts. I have taken some photos to illustrate my point This first one is an example on how I might present my work on the first two pages. I like the idea of showing the final product on a page of its own, to try and catch attention, especially the dark red work perfectly for that purpose

The next one here could give a bit of inspiration to how I might show the different steps in the process. I like the black square and the slightly rotated screen shots, it adds a bit of contrast and still it fits perfectly within the overall page

Im certainly going to “steal” this idea of showing the steps on the first page. This could go together with the final product and then have a few of the thumbnails beside, showing a few of the steps and leaving no doubts to that this is a tutorial with a start and an end point

I don’t know why but this tutorial was just presented in a way that gave me an idea of presenting the tutorial in a symmetrical manner over the middle of the two pages. I know this is not symmetrical but it just gave me an idea that I want to try out and see if it works without confusing the reader. I think it could work well with the other idea of the black square and the rotated images, but I will have to try that out when I have the images ready

This is the research I have done so far, The idea is to produce a desktop background for a computer. I chose this because it was easy and did not include a lot of steps, so it would easily fit within the 4 pages.

Mini Mag: Research – Developing Ideas

I have spent the last week developing ideas for my Mini Magazine, which should consist of 4 pages A4. I have finally decided on an idea that I want to go with and have come out with the first sketches.

I started out with two main ideas, the first one being to create a mini comic book. But having to think of and developing new characters and then drawing them and tracing in Illustrator seemed too much. The other idea was to create a tutorial like magazine where I would create a piece of “art” in either Illustrator or Photoshop for then after that showing how I did it in four pages. This seemed like an obvious idea for me since that would free me of any worries about copyright on images since it would then be my own work that would be featured in the article.

I did also in the process consider other ideas such as snowboarding, formula 1 or football as some of my own interest areas. Some problems there though especially with fooball an formula 1 would be to get good images that I could use in my magazine. It would be hard to get anything other than a couple of staged photos, featuring unknown actors. And since the actual people that these things are a pretty big deal in these areas it would be kind of flat if I couldn’t use pictures of them. I probably could buy them but I didn’t fancy that solution. A quick search on istockphoto revealed nothing great and I pretty quickly discarded the idea.

Typography :: Installing New Fonts

First find a font directory on the Internet where you can download your font, either free or if you can afford a paying site. In this example we have used dafont.com

 

Find the font you want to download and install, here we have chosen a standard sans-serif font called Walkway. Click to download the file and save it on your hard drive.

 

Extract the content to your computer and open the folder so that you can see all the different font styles. Depending on the font you have downloaded there might be more or less files in here. For the Walkway there is quite a lot of styles so there are a lot of files that we need to install.

After that navigate to your fonts directory on you pc or mac. On a windows machine it is called fonts, in the windows folder on a MAC its in your system folder. Now just copy and paste the fonts you want to install and fire up your application and check, they should all be ready to use.

Typography :: Jargon

Here is a very quick list of the most used words and phrases used when working with typoghraphy. I have grouped them into two groups to easier navigate through the list.

Families, Types & Formats:

Type refers to a single character, and could be any character used including numbers and symbols (“, Kk, 10)

Typefaces are actually font families. This refers to families of the same fonts that differs slightly. An example could be the myriad family which consists of: Myriad, Myriad Std and Myriad Pro

Size & Spacing:

Font is a particular set of characters defined within a typeface. For example to use the example from before where the typeface was Myriad, here a font could be Myriad Pro

Variants is the variant of a particular font, for example the font Myriad Pro has a ton of variants including:

• Regular

• Italic

• Semibold Italic

• Bold, Bold Italic

• Black

• Black Italic

• Condensed

• Condensed Italic

• Light Condensed

• Light Condensed Italic

• Semibold Condensed

• Semibold Condensed italic

• Bold Condensed

• Bold Condensed Italic

• Black Condensed

• Black Condensed italic

• Light

• Light Italic

Types of fonts refers the the style of the font ie. Serif or sans-serif:
Sans-Serif is fonts without serifs’ which is easily explained by showing a serif. A serif font is a font where each character varies in size like Times New Roman. It has small handles which makes it easy to read even when the print is small. Sans-serif is then the opposite here the characters has the same thickness throughout the characters, and does not have any handles. An example here could be Arial

Others more sparingly used are script and decorative. Script is used to mimic handwriting and decorative is used for more denotative titles mostly. A well known decorative font is the ones used to mimic old western movies like Rosewood Std. Script is used mostly when signing digital documents, its used to give the feeling of a handwriting. An example could be Brush Script Std

Type 1 or postscript is a type developed by Adobe and is a professional choice of font. Type one is some where identified with the red (a) icon

True Type is developed by Apple and was a reaction on the high license costs of Type 1, True Type can cause problems when it is sent top a printer, it is often identified by the (TT) icon

Open Type is way the most popular and can be seen a bit like the open source of fonts. The source code of these font are more or less open to make changes to a certain set of fonts. Thses fonts also works on all platforms wheter on a mac, windows or linux(O)

Size & Spacing:

Leading is the space used between two lines of text. This can be used top separate headlines from body text or create an easier readable document.

Kerning is the space between individual characters, and is used to space letters or numbers apart. This can be very useful in headlines and other scenarios where it can be hard to read a certain word. These problems mostly occur if you are using very large or very small font sizes

Tracking is the space between a set of words. Usually seen in newspaper columns where each line is exactly the same length. This is also called justification of text

Points is a way of sizing text. 12pt is a standard in most word processors for example

Picas & ems refers to a unit. This would in most cases be 12pt. But it depends on what the default size is, if the default size in a document is set to 18pt then 1em would refer to 18pt, meaning that 2em would be 36pt.SerifBrush

 

GRIDS :: Example

Underneath is an example of a magazine page created using a simple grid system.

I have outlined the grid system to make it easier to identify. This is a very simple outline of the grid and it could be much more complex but this is the minimum grid that could have been used to create the page. This page could have been subdivided into a complex grid system, the grid is only there to make it easier for the designer and most important to make it easier for the reader.

GRIDS :: An Introduction

Grids are used as guides to position elements on a canvas, paper, a website, cd cover etc. Grids are guides that works within the page to help the author to see were different elements can be placed, this could be text blocks, images, pull quotes and so on.

Grids are a standard way of organizing things to allow designers communicate easier with the audience, and most importantly, it’s easier for the audience to understand the message if a consistent grid is used. Audiences know how to navigate and understand a grid despite them not knowing it, this is because we humans a so used to grids being used everywhere, in books, magazines, on the web, buildings, bricks etc.

 

A simple example of a grid is shown here:

 

C.R.A.P :: Proximity

Proximity is the space between elements, and this concept can be used to group elements together that belongs together, or separate elements that should be separated. Sometimes elements can get a completely different meaning by just changing the proximity a little bit. The examples below are from a leaflet The Arena Theatre in Wolverhampton uses to inform visitors of upcoming performances. A little manipulation in photoshop lets me show what a little change in the leaflet can change the meaning of an element.

In the first example you can see how the original page looks:

If we then try to look at the elements were proximity is used to group things, we could look at the header and sub-header

If we then try to change the proximity and group the sub-header with the body text. The meaning of that sub header completely changes.

C.R.A.P :: Alignment

Alignment is important for every design. A symmetrical alignment is important to not confuse the viewer, you don’t want a viewer to stop and think “are these aligned or are they supposed to be offset?” Alignment can sometimes compensates for other thing like contrast. Instead of using contrast you can maybe use some alignment options to draw the eye or separate a side bar like in the example below, where Eric Meyer on his website don’t use another colour for his side bar, just pure alignment.

C.R.A.P :: Repetition

Repetition can as said be used to familiarize viewers with different things. Repetition is really just what it says and I’m not gonna go into to much details because it’s so obvious. I’m gonna use this site as an example.

The repetition used on this site includes the links, the colour is a bit lighter and they have a dotted underline. Another things is the date shown for each post, the same formatting is used on every post. Also the categories in the sidebar are formatted equally, this is so that the user/viewer easily can see whats a category and what is not.