GWA1 Progress

this is the first page of my layout transferred to indesign, initially it was like this: 

(background is white) 

after asking mr. cheo, he agreed with me that this revised layout looks better: 

i made the layout in such a way that allows me to place short paragraphs separately, as my topic is about health myths. this is what it looks like with the content inserted: 

i have decided to use the modular grid to try and create something un-boring but after laying it out on InDesign i realise that it's too simple and needs some additional touches like adding asymmetrical lines, some more photos, and it would look a lot cooler if i can find a way to overlap the text over the pictures.

i still need to add some more colours, images, and adjust the text.

Inspiring newsletter

this email newsletter is one that really caught my eye! 

they had an interesting play around with the typography. the style of the ketchup text attracts attention, and i like it because it's appropriate to their slogan/catch phrase "what's cooking, good looking?". people are also naturally attracted to food, i reckon. the size of it also resembles proportion, and these 3 'headings' are placed in a way that is in accordance with the direction that the eye travels in.

there are also little details like ketchup splatters and a shaky line at the bottom, it's a nice touch. they also applied proper placement so that it doesn't look too cluttered and messy. the font used is also easy to read, and the colours are complimentary to the ketchup and pizza. 

overall, it has an interesting concept. 

Layouts

this is my progress for the group project! i used the modular grid to create some layouts. by the second or third layout, my creativity started flowing. at first i felt like it was difficult to picture anything on the grid, but after some time, i realised that the grid can actually help with imagination and it can be manipulated so that it's not boring.

but these are the two that i ended up using:

Week 14 - Studio B

today we learnt how to create book files! a book file allows you to compile different documents and save them as a whole, so all the pages are combined. this will be useful for us when doing our group project as we will need to submit all our documents combined together, as a book!

to create a new book file, go to File > New > Book. type out a name for the book and then save. to tell the difference between book and document, just look at the extension. the extension of document is .indd while book is .indb (the b stands for 'book' clearly). no document or new window will pop-up, just a book palette.

this is an empty book file:

to add documents to the book, just click on the plus sign at the bottom of the book panel. in the book panel, you can rearrange the documents according to pages. the book panel will also tell you how many pages it has, and what number page are those. to save the book, just click on Save Book As in the book panel menu. to create a PDF of the entire book, just go to Export Book To PDF in the book panel menu.

Week 14 - Studio A

this lesson we learnt about style sheets. a style sheet acts as a format or a set. any type of edit applied to objects and text can be saved as a set and this set can also be applied to upcoming objects and texts. it saves time and effort, you don't need to do the same thing multiple times. there are:

1. character styles
options under the character panel like font size, kerning, leading, tracking, etc.

2. paragprah styles
controls paragraph attributes like indents, spacing, alignment, and headings.

3. object styles
controls strokes, text wrap, and fills.

4. table styles
spacings, strokes and fills.

5. cell styles
text, strokes, and fills.

styles can be found under Window.

it has all the five styles. setting up the individual styles are easy, just click on the third icon from the left at the bottom of the palette and it will create a style format/set. it will be named Basic Paragraph and when you double click that a pop-up window will appear. from there, you can change the different elements and options of a paragraph. indesign can also detect separate paragraphs.

to apply a style, just highlight the text click on the paragraph style (name) on the palette. however, paragraph styles do not allow for individual words to be styled. hence, this is where character styles comes in.

Week 13 - Studio B

this lesson we learnt some more techniques that will be useful when creating our newsletter.

how to type in a cool shape/flow:

this is really easy. use the pen tool to create a path in the shape that you want. then use the Type on Path tool to type your text. it follows the flow of the path. and this text acts just like any other text. the size, font, kerning and tracking can all be adjusted the same way.

how to fill text with artwork:

this one is really cool! this method enables you to have your text in any pattern or design that you want. to do this, you require a thick font, so that the artwork filling up the text can be seen. after typing out the text, go to type > create outlines. this basically converts the text into an image. change the fill to None. while having the text selected, go to File > Place and choose the image. the image will automatically be placed within the premises of the text.

there is also another method to place an image into text that develops the same result. after creating outlines, copy the image and go to edit > paste into. 

this is an exercise for the lesson that we had to do at home: 

i changed the colour scheme and some other stuff so that it looks nicer and sweeter to me. :-)

this is another practice that also helps to understand the purpose of a grid better. here, i applied the modular grid/guide so that all the spaces are equal and the outcome looks neat. there are two columns, the sidebar and the main content. i didn't forget to change the leading to the same no. as the font size. 

Week 13 - Studio A

to know exactly where the elements of the layout will lie, a grid can be used. a grid guarantees accurate measurements. it allows acts as a framework for the designers and encourages the flow of creativity. personally, the grids help me to picture different layouts. here are the 3 types of grids that we learnt:

modular:

this grid can be created by drawing a margin all around the paper. then divide it into 6 columns with a distance (gutter) 5 mm between each column. then divide it into 10 or less rows, horizontally.

to make this grid, the paper can be divided into quarters. then, into 3 rows and 3 columns. the rectangle in the middle can be flipped sideways so that it lies lengthwise. the measurements need to be the same, and this rectangle needs to be centered. from then, the edges of the box can be connected to the edges of the paper so that they create straight lines. 

star: 

this grid is more complex to work with, as it is unlike the others: asymmetrical. it is also for a spread, which means that it is 2 A4s side by side, and this essentially makes an A3. to make this grid, draw a line from the bottom right to the top left corner. and do the same for the top right to the bottom left corner. then draw lines from the bottom left and right corners to the top centre of the page. (it looks like a star by now)

there is also the golden ratio and rule of thirds to assist with proportion:

golden ratio:

the creation of this ratio requires mathematics. here is an example where it is being applied: 

the rule of thirds:

the rule of thirds basically implies that a picture would look a lot more appealing if the centre of the image is not concentrated. only one to two third should be occupied.

Week 12 - Studio B

for this lesson we had to do presentations for our ad submissions. we had to explain about our ads and the concepts behind it.

i explained about my ad having an arabic concept, with the man popular for being kicked out of Saudi, Omar Borkan Al-Gala used as positive association, the arabic text and desert background to represent that it's an arabic perfume. there wasn't much of a deep and intriguing concept to it.

i was really amazed when i saw my classmates' works, because some of them look professional and worthy enough to be a poster in the public! most of them had interesting concepts too, it befuddles me how they come up with these smart concepts.

we also got to see the best work from some of the students from other classes, and i must say i am impressed. although it did change my opinion of my own ad. i felt like mine was of low ranking in comparison to the rest. albeit that, i did try my best.

i think that their work has given me inspiration and motivation to do better for our next project.

Look what I made!

i created this with the help of an online tutorial!

first, i created a jelly bean shape brush in Illustrator using the ellipse tool and altering the shape using the direct selection tool. to save this brush, go to Edit > Define Brush Preset.

next, i created a document with a grey radial gradient background. then, i added a pattern to the background in the Pattern Overlay tab under Layer Style. this was the pattern:

and then created the text, MAGIC BEANS, using a downloaded font, Insaniburger. the reason why this font is being used is because it is thick and this will allow the design to be shown. after this, i adjusted the font size, tracking, stroke. 

then i created a work path around the text, and this enables me to stroke/outline the text with a brush, namely the jelly bean brush. this brush can be imported. so that it doesn't look awkward, the shape dynamics is adjusted. 

after that, we style the beans - add colour and depth. i changed several settings under the Bevel & Emboss, Inner Glow, Colour Overlay,  and Drop Shadow tabs. i also added a White Sand texture.

this is an example of a style sheet! this layer style (with the texture, inner glow, etc) can be used for other bean layers so that we don't have to go through the same thing over and over again. the only thing that needs to be changed is the colour, which is under the Colour Overlay tab. 

create a new layer, and using the modified bean brush, we can fill the the text sparsely with it. just remember to copy the layer style from before and paste it onto this layer, then change the colour overlay!

repeat this step for other colours so that the entirety of the text is filled!

i also made the beans look like it's been opened and spilled from the 'M'. 

next, for the beans. i created a path of each letter using the pen tool, then stroked it with the bean brush and applied the layer style from before, then change its colour. 

then we're done!!

Week 12 - Studio A

the first step to designing a newsletter is designing a layout.
here is an example of a nice layout that i like:

photos are also really important! there are three basic shapes for photos: 

1. the portrait:

2. the landscape: 

3. the square: (which is not that popular)

a newsletter also shouldn't have pictures of all the same shapes or else it will look too rigid. it should have different shapes and sizes.

photo guidelines: 

- clear centre of interest

- natural 

- cutline (the picture is cropped in a way that does not interfere with an object/person in the picture)

- bordered, especially for pictures with a white background

- should have some sort of important and relevance to the story

- face should be at least size of a 10 cent coin

a picture should tell a story.

cropping is also really important to set the mood of the photo. a photo should be cropped in a way that it will still be able to tell the whole story

there are also some other things to add that will spice up the newsletter and make it less boring!

- graphs 

- maps

- fats facts

- quotes

- ratings

- timeline

- step by step guides

- infographics

Week 11 - Studio B

here is what i came up with by the end of the lesson:

this exercise was to train us to use both illustrator/photoshop + indesign for our newsletter

this lesson we learnt about indesign, so it was an important lesson. indesign is an important part of newsletter designing because it enables us to determine the layout properly and guarantee accuracy. it's also really convenient when it comes to designing stuff that needs organising.

we learnt how to set up documents, the advised number of pixels for each element. 

we also learnt what bleed, gutter, and margins meant. 

bleed: is the area outside of the edge of the paper and the purpose of this is for the image to extend all the way there, so that if the printing is not accurate there still won't be any visible white spaces.

the area in between the columns can also be adjusted when setting up a new document 

picture

to place any file (photo, logo) onto the document, file > place. photoshop and illustrator files can be detected too 

clicking on the object/picture box will allow you to adjust the size of the frame of the picture, while double clicking will allow you to adjust the size of the actual picture/object

click on bottom right anchor of frame box to align both blue (frame) and red (picture) boxes as the same size

to get rid of the background of an object/image with a PLAIN background, go to object > clipping path > options and choose detect edges. this action will detect the edges of the actual object and get rid of anything other than it

window > text wrap and change settings so that the text is wrapped around the image, and no text will be covered/the image does not overlap text

the different icons at the top with change what type of text wrap it is. but text wrap on an image doesn't look very professional, in my opinion

text

with type tool equipped, click and drag to create text box but without letting go, press up down and left right keys to adjust the number of rows and colums. 

right click and choose fill with placeholder text to fill the text box with gibberish, just for sampling purpose

leading, tracking, kerning, drop cap, can be adjusted under window > character to enhance the typography 

drop cap: where the first letter of the article is bigger than the rest, also usually seen in newspapers

leading: should always be the same number as the font size

adjust grid size in indesign > preferences > grid and change increment every to 12 so that it fits the font size. increment every should always be the same as font size 

view > grids and guides > baseline grid to show the baseline grid to help align the body text 

under window > paragraph, click on icon at the bottom right to align text to baseline grid so that it looks neater

all these things are important to make the text look clean and professional.

save

to save a file, we don't do file > save as because that only allows weird formats 

instead, we export as jpeg or pdf files. important to remember that it is always (PRINT) pdf 

i finally did it

Week 11 - Studio A

newsletter print layout/basics:

 - rule #1
consistency, keep the pages within a similar theme.

 - rule #2
 using the right tools: applications, creativity. typically indesign and photoshop

 - rule #3
fundamentals are: color, layout, typography. these are the 3 things we will be judged on.
color: colour wheel, opposite and contrast colours, complementary colours
layout: creating balance
here is an example of a good newsletter layout:

the layout is consistent, the fonts used are appropriate to the theme of the newsletter, the colours used go well with each other: within the same colour scheme. the placement of the elements are even, it's very neat

- rule #4
create a newsletter in accordance to the audience, create something that attracts them

after this point i was just stuck

Practise

From this: 

To this: 

swag

#12 Research materials/ assig. progress

This is the logo of the distributor: 

This is the logo of the producer:

Mukhalat Malaki, is an Arabic perfume, and its name translates to "the royal blend". The perfume oil's base notes are woody and musky, making it more appealing to men. It contains Turkish rose, Spanish Saffron, Indian Amber, and Cambodian agarwood. The elements of this perfume are expensive, which is why it is named "the royal blend".

These are my sketches for the ad:


1. Background: brown/light brown room
Focus: perfume and words, the rest should be blurred
Elements in the perfume: agarwood and saffron, to be placed alongside perfume bottle
At bottom right hand corner: 'only found at D'FATIIN (+ contact info.)
In center: Mukhalat Malaki written in Arabic, "the royal blend", its translation, and small Swiss Arabian logo (don't want it to overpower D'fatiin logo) (focus: D'fatiin)
Right side: Arab man dressed in royal thoub looking out the window (to symbolise that it's a royal and arab perfume)
Perfume is on a table. Will most likely be using this as I got approval from Mr. Cheo for this.

Cambodian agarwood:

Spanish saffron: 

2. Background: desert and man dressed in royal thoub in the distance, but not blurred

Focus: perfume and fonts

Bottom right hand corner: only available at D'FATIIN, underneath it: Swiss Arabian logo but smaller as emphasis should be on D'fatiin

Simple, but not following the rule of thirds.

3. Background: gold gradient (to represent royalty)/gold satin(?)

Center: average size Swiss Arabian logo, name of perfume

Right side: perfume bottle, simple, focus

Top left: D'FATIIN logo of a bigger size than Swiss Arabian logo, copy underneath to explain perfume and its contents (woody and musky) (expensive ingredients) 

Bottom right hand corner, contact info. (?)

4. Background: desert with man in distance, not out of focus but b&w

Left: big size of perfume, with colour, so as to create emphasis on this and not bg

Name of perfume: smaller, so as to create emphasis on perfume, not name of perfume. alongside swiss arabian logo (small)

Top left hand corner: large D'FATIIN logo (to make sure reader sees the logo)

Uses contrast and size to create emphasis on perfume, uses size to draw attention to D'fatiin logo

I like this idea too but haven't gotten the approval of Mr. Cheo. 

Colors to be used:

I reckon gold, as deep reds, purples, and golds as it represents royalty, riches, stateliness, quality. But dark blues also represent royalty and formality. Maybe maroon as it represents solidity and luxury. Most probably gold and warm tones, deep red and maroon, because the oil has hints of brown, but very mild. However, the bottle has silver details, cool tone, so I could try using dark blues and purples as well. But do these two tones, warm and cool, mix together well? Will definitely need to try and mess with different colours. Excited to see what the outcome will be like. I'm sure these 2 tones will create different vibes. 

Font:

Simple, cursive(?) to symbolize royalty. 

Perfume ads inspiration:

This ad is simple, it is where I got the idea to use a gradient background. 

This ad uses violet to show that that is the scent, just like in my first sketch. 

This ad uses different elements to convey its message. Black and satin ribbon to represent modernness and classiness. I really like this ad. Inspiring. 

This ad is gorgeous, it uses the colour black to show that this perfume gives off a mysterious vibe. Also, the black gives it a more sophisticated and modern look. 

I like this ad. It uses contrast to emphasise on the perfume itself. 

This is one of the few ads that uses sexual attraction to appeal more to people/convey its message. Maybe what its trying to say is that this scent will attract women. It also uses the contrast technique. 

Here we can see that almost all ads for men's perfume are in black and white, or dark colours. Maybe it is to represent mystery and strength, or modernness. This is why I like my fourth idea best, where it's in black and white but uses contrast to draw attention to the perfume. The perfume is woody and musky after all, seems fitting. Most perfume ads also use sexual appeal to its advantage. Very rarely we see perfume ads without models. 

More research on perfume advertising:

In this article, it says: "It’s not easy to sell a smell. That’s why the best fragrance campaigns rely on selling a mood — and often involve people everyone knows or wants to sleep with." 

In this other article, it says: "To successfully advertise a fragrance, you must tap into the human psychology and link your brand with a desirable abstract idea, such as passion, femininity or masculinity." This is why perfume ads are erotic in nature. Well that explains it. But since this perfume I'm advertising is Arab, I don't think it's appropriate. Or is it? The most popular strategy used in perfume advertising is called the "desirable quarry" approach. 

Celebrity advertising is also quite efficient, especially when it comes to perfume advertising. Which is why I'm going to be using this man as a model, Omar Borkan Al Gala, an Arab man that was popular for the rumour of getting ordered out of Saudi Arabia for being 'too handsome'. 

If I can a bigger and more appropriate picture...