Top 10 Things... Fonts and Colours

Fonts & Colours:

I have been thinking about fonts, images and colours that relate to my top ten of cupcake flavours, so that I can use these in my intro and idents.

To make this task easier, I have thought about some keywords that represent cupcakes, and then I can find fonts and colours that suit these keywords to go with the primary and secondary images I have already collected:

Girly // Decorative // Pastel // Chocolate // Butterflys // Fashionable // Sweet // Childish // Glamourous // Tempting // Small // Flavour // Delicate // Sprinkles // Pink // Sugar // Flowers // Bright Colours // Glitter // Love // Luxury // Elegant

Top 10 Things... Subject Related Research (Secondary)

Cupcake Flavours

Secondary Research

What is a cupcake?

"They cheer you up and make you smile" "The cupcake has so many things going for it. Theres the element of built-in portion control. Fairness without the fuss." "Cupcakes are a luxury and a treat." "Cupcakes satisfy our inner five year old." "The darlings of the fashion pack." "Designers dream."

Recipe Books:

I've looked at these books for recipe ideas and as they contain beautiful photographs of cupcakes.

Cupcake Magic - Kate Shirazi

Gorgeous Cakes - Annie Bell

Homemade Treats & Gifts - Best Food

Delicious Cakes & Biscuits - Best Food

Cookery Book for Girls - Igloo

Recipes To Try:

Out of the cook books, here are some cupcake flavour recipes that I would like to try:

Vanilla; Chocolate chip; Triple chocolate; White chocolate; Buttercream butterflies; Rose and lychee; Strawberry and banana; Coconut; Banana and cinnamon; Orange iced cup cakes; Pistachio and hazelnut; Lemon curd; Cherry; Carrot; Ginger; Cranberry and fruit; Muesli and apple; Blueberry and oat; Banoffee; Truffle; Cappuccino; Coffee and walnut; Black forest gateau; Mocha; Fruitcake; Battenburg; Fondant

Internet Photographs:

Here is a large wealth of secondary images of cupcakes with different flavours and many with very fancy decorations.

Which channel?

I have thought about which channel to put my show on, it could be a cooking channel available on something like sky, but as I would want my programme to reach as many people as possible, its best to choose one of the free view channels. I was thinking about channel 4, as it has programmes like come dine with me, but channel 4 is more about the comedy, or itv1, as this has shows for women, such as loose women, and so my baking show could be shown after. However, the look of my show that I am going for is quite sophisticated, so I think I will choose bbc2. In this case, I would want my show to get a prime time slot, at about 7pm.

All BBC channels cooking and baking shows:

ITV cooking and baking shows:

4od cooking and baking shows:

BBC 2 cooking and baking shows:

Out of these shows, I only really like the into to 'Great British Food', all of them having a bit where the presenter talks for a minute at the beginning which I obviously won't be having in my intro! I will be having a look at tv intros specific to cooking and baking on my design context blog later.

Top 10 Things... Subject Related Research (Primary)

Cupcake Flavours

Primary Research


Cupcakes can either be sweet or savoury, but here I will focusing on the popular sweet ones, gathering relevant research to make me an expert in the topic I will be creating an intro for a tv show for.

Possible flavours


Basic Vanilla, Chocolate Chip, Carrot, Ginger, Walnut, Lemon, Coffee, Black Forest Gateau, Cherry, Triple Choc, Jam, Buttercream Butterflies, Fruit, Berry Mix, Blueberry and Oat, Muesli and Apple, Banana and Cinnamon, Orange Choc, Banoffee, Truffle, Cappuccino, Coconut, Raisin and Currant, Rose and Lychee, Lavendar Honey, Caramel, Red Velvet...


Ways to decorate

Sprinkles, choc spread, icing sugar, coloured icing, fresh fruit, cake toppers, cream, lemon curd, piping icing, sweets, chocolates, flavoured frostings, edible glitter, sugar paste roses and other creations, food colouring, edible glitter, glace cherries, drags

Questionnaire:

To inform my research, and give me a genuine idea of what the top 10 cupcake flavours were, giving the people responding an extensive list of choices to choose from, based on the cupcake flavours in the cook books I have looked at. I also asked a few other questions, in case my response went in a different direction, but now I feel as if these were not necessary, all that it is important is finding my top 10.

Results

I collected 26 responses to my questionnaire to get an idea of what cupcake flavours people like the best.

1. Do you like cupcakes? A lot [13] A little [12] No [1]

2. Please choose the most appealing cupcake flavours from the list:

I wasn't surprised to find out that the most popular flavours were the basic ones, as they appeal to even the fussiest of eaters.

The ten most popular cupcake flavours are:

3. Whats more important - the flavour or the decoration? Flavour [20] Decoration [6]

4. Have you ever tried savoury cupcakes? Yes [5] No [21]

Photographs:

Cakes I have previously created:

I love baking cakes, and eating them! I think baking is good because its therapeutic and relaxing, and you make something which is pretty and tasty. Here are some of the cakes I have made:

Previous Work

I even did a project on cakes for my graphic design A level:

Top 10 Things... Initial Ideas

Initial Ideas... Top 10:

Cupcake flavours / crafts / recycling tips / doctor who villains / 90's children's tv shows / fast food choices / superheroes / girls clothes shops / disney characters

I have tried to think about ideas that I already know a bit about, such as the things I looked at over the summer for my what is good research brief, and thought about things that I am interested in, and can easily find visuals for.

Out of these ideas, the top ten cupcake flavours is my favourite. Over the Christmas holidays would be the perfect time to try out some different recipes, and I could easily collect lots of visual research. I think its a topic that anyone can get involved in, and I could do some primary research, in the form of a questionnaire, to back up my findings. I need to find a way to make this topic seem interesting to everyone, and not too girly, as with this topic there is a specific audience.

I think my programme would be on a food channel, and the content of the programme would discuss cake flavours, and then provide the recipe. It could also be on a channel like channel 4 or itv, at about 5pm, the same time which cooking shows are shown.

The idents would contain a sneak peak of the recipe that would be featured in that show, containing illustrations of the cupcakes, and photographs of recipes being made.

Digital Design Production... Time Sequencing Workshop II

Review

Last Weeks Workshop

Timeline Task

In this workshop, we got in to groups of five and showed each other our responses to the timeline task and then discussed what we thought was good about this way of working, and then problems that had arisen from it.

GOOD

- Shows pace

- Is a good starting point for planning on after effects

- It is easier to tweak frames on paper than it would be on the computer, as you have to think about how your changes effect what you have already done

- Good way of showing your ideas to other people

- Interesting to see what other people have done who had the same words as you

- Using title safe zones helps you to prepare for design for screen

- Using annotations and arrows helps to make your work easier to understand

- Perspective lines help you to understand spatial movements

PROBLEMS

- 5 frames is not enough to convey the concept of the sequence

- It was time consuming to hand draw and colour each frame (could scan and print instead)

- Fitting all five frames on to a short space was hard

- The maths involved in lengthier sequences was difficult as its something we haven't done in a while

- It was hard to decide which frames actually were key frames

- Some sequences had key frames equally spaced out, which makes you think there needs to be a more dramatic temporal change

- Use of colour - felt like we were just adding colour to decorate, but it needs to try and have some relevance, also think about gradients

After discussing these issues with our group, as a whole group we talked about time lines and what we can do to improve.

- There doesn't always have to be something in each frame, if you think about kinetic typography videos, the first frame is often blank, with the objects then appearing, also, the zoom may be so focused in on something all you get is a wash of colour

- 1 second is a long time! Consider pauses and different paces, there doesn't always have to be many things happening at once

- Use issuu to blog the timeline work: take a photo of the sequence as a whole then zoom in on the sequence in detail. Blog the problems that you have come across

- Use Gickr to turn gifs into a digital flipbook sequence

- Think about the way you can break the lines down, they don't all have to be even, if more action is happening at one part than another

Next time, I think I will scan in and print off my frames, (the way we worked in the initial time sequencing workshop), as I can be quite a perfectionist so spent far too much time drawing the frames and colouring them in. I will also print them a bit smaller than the credit card size they are, to make it easier to fit them into a smaller space. I need to stop being so precious about my storyboards, and not be afraid to draw lines and annotate where needed, to save time and to help me improve.

Task

We were then set a new task.

Choose one of your sequences where there is a lot of action happening. Take the storyboarding system and modify it so that it answers the problems we have discussed. There is no right or wrong way, but you need to understand it. Where are the complex movements?

I've started to go in to a bit more detail on my new storyboard, so that hopefully it is understandable even without me there to explain it. I've written about my choice of font and colour, as these need to be relevant to the word. I feel happy with this way of storyboarding and I think this is how I will continue to storyboard the rest of my sequences. 

My Response

Top 10 Things... Briefing

Brief:

Design & Produce a title sequence and set of 4 promotional idents/stings for a proposed TV programme – ‘TOP 10 BEST/WORST….’ or '10 THINGS YOU NEED TO KNOW ABOUT....' Your response should aim to clearly communicate the subject, concept, content and mood of programme in a way that will engage an audience who have chosen to tune in. You should also aim to reflect the brand identity of the channel that in your opinion would run the programme. 1 x Title Sequence (60 seconds) & 4 x Promotional Stings (4 x up to10second)

Background / Considerations

Title sequences for TV programmes are the most widely viewed examples of Motion Graphics in contemporary visual culture. Their primary function is to present the programme details, set the scene/mood and often establish a brand identity of a programme or series. The ‘TV ident’ is a tricky thing. You have a 10 second window to deliver your message, concept and/or information. Too much going on and it doesn’t make sense not enough and your audience will loose interest. They often come in sets but have to work on their own. If you get it right they can be the most memorable part of a night infront of the TV. If not people will switch channels. You will need to choose subject matter that you find interesting but also offers creative potential. Your audience will be interested in your chosen subject matter to want to tune in. They will probably already hold their own opinions regarding their own best/worst. It is your task to engage them from the start.

Briefing Notes: - Your subject needs to be something you can find research for easily and quickly, and it needs to be something visual. Choose something interesting and manageable (nothing to do with christmas!) - Look at books and on TV for lots of top 10 ideas - Choose which channel your programme would be shown on and look at target audience and the chosen channels way of branding. Is it for dave, e4, bbc? etc. - Keep it simple! - Research existing idents and intros - Find appropriate fonts, colours and images, as you need a huge wealth of visual and factual source material to work from - When we are back, you will need to give a short presentation about your research - We will be having a design direction workshop, where you need to create 5 boards that show what you are going for - All subject related research on design practice blog and research of designers/idents/intros etc on design context blog

After Effects Workshop III...

Keyframe interpolation using illustrator paths

- To interpolate: to insert between fixed points

- Looking at how to manage the terms between the key frame states

- Position: we see the line in which the layer is going to move in our composition window

- The default way after effects decides how the layer will move is a bezier curve, ending with an anchor point which enables you to change how the layer is going to move

- Tool palette in after effects -> pen tool -> vertex tool (rather than being called anchor points as in illustrator) 

- Take the convert vertex tool and click on a point and it will change from being a smooth curve to a corner point. The spacial interpolation has now changed. 

- Example of a mix of bezier curves and corner points

- Have to highlight one or more keyframes. Animation menu -> keyframe interpolation -> opens dialogue box with options to change the temporal interpolation (how things change over time) and the spacial interpolation. Gives further options. 

- Quick way to add key frames: drag the red line to where you want the key frame and click the little diamond on the left of layer name.

- Select all of your key frames, go back to keyframe interpolation option and you can change the temporal interpolation keyframe so it becomes a 'hold' key frame. This means that we don't have any interpolation, so there is no change/movement between the key frames. We can see how it changes our motion path. (The more dots you have along a motion path the slower somethings going to move, the less dots the faster).

From... to ...

- Key frames also take on different shapes according to the properties they have. The layer remains at the position until the next key frame, appearing to jump across the page. (Can right click key frames then change to toggle hold key frame.)

- This would be useful for animating the movement on a clock, with the hands jumping from second to second, or something flashing on and off.

Imported File: Blink Effect

- Working with other files: imported 'blink' file as footage. To make the text 'blink' creating new key frames and changing the opacity from 100 to 0 and back to 100 etc... Have to make sure you are clicked on to the opacity option and click the stopwatch next to it, to create a keyframe with the changed opacity. Click on the diamond for the frame you want to change the opacity for and it will be highlighted as yellow. 

- To make whole sequence of events move faster/slower, select all of the keyframes, and hold the alt key and drag either the first or the last.

- To make the temporal change smooth between all key frames, either space the frames out equally 

- Go back to keyframe interpolation menu, and this time change the roving option to 'rove across time'. The key frames will then space themselves out equally between the first and last key frame. They then change from diamonds to dots. Now have a smooth motion between the keyframes. If you move the first or last key frame then all the frames in between will move as well. Can only specify roving time for spacial properties.

Working with Illustrator

1 : Use illustrator artwork to create motion paths.

- Create a new document with the PAL D1/DV Widescreen video set up option

- Create a new composition on after effects. Create a solid layer square shape. Go to illustrator, create a vector shape, don't save the illustrator file, but copy the shape, and go back to after effects, activate the position property of the layer selected, and enable key framing (by clicking on stopwatch next to position), and edit and paste illustrator file.

- This is an easy way to get something to move in a perfect shape, such as with a circle

- The three middle key frames have become roving key frames

- Once you have the path in after effects you can still edit it.

- Layer -> Transform -> Auto-orient: now, the layer orients itself along the path. Another option for when using motion.

2 : Masks

- Layer masks allow you to select which parts are transparent

- Create a new composition, and create a new solid, this time, the solid will be the size of the composition (there is a button to press).

- With our layer selected, use the shape tool, and create an ellipse. We have now created a vector shape which is determining which parts of the layer are transparent and which are opaque, creating a layer mask.

- Expand mask options and there are four mask properties. Each property has a stopwatch option next to it, so you can animate the different properties.

 :: Mask path: to do with shape

 :: Mask feather: make an edge softer or harder

 :: Mask opacity

 :: Mask expansion: contracts/expands the visible part of the layer inside or outside of the mask

- Can select the mask and work with it as you would work with an illustrator shape, e.g. changing the shape. If you double click on a point you get a bounding box, so you can resize the whole thing or move it to a different place.

- If you click on the stopwatch next to mask path property, you can create new key frames, and then drag out the shape, so you can create a vector shape that can be animated. E.g:

- Can also use the pen tool while you have the layer selected to create a mask on that layer

Imported File: Wipe Effect

- Imported illustrator file 'reveal'. Go to rectangle tool, make sure layer is selected, and create a rectangle around word.

- Need two key frames: a start one and an end one. Alter the bounding box of the first one (need to be on arrow tool) so the word isn't showing. Then on the second one the word will be showing. E.g:

Imported File: Melt

- Opened illustrator file 'melt' on illustrator. Text has been turned in to outlines. Copy the characters.

- Create a new composition in after effects. Create a new solid layer which is the size of the composition. With the layer selected, paste the illustrator paths. The paths will automatically become masks. Each illustrator shape has a mask. 

- Select all masks (m is the shortcut) and all the mask path properties will be shown.

- Select the stopwatch next to the mask path with all layers selected.

- You can then move to different moments in time and move along the letters and select individual points to edit by dragging the edges rather than clicking the points.

Imported File: Dots (Illustrator and Photoshop Files)

- Create a new composition on after effects and import files.

- Clipping - another way to work with transparency

- Click the toggle switches/modes option button, to change layer switches around, we are going to use the TrackMat option in the drop down menu for the photoshop layer, choose the type of matte 

- Choose 'alpha matte option', shows only in the layer where there is opacity in the layer above

Imported File: Clouds (Illustrator and Photoshop Files)

- Create a new composition on after effects and import files.

- What we have here is a photoshop file that is much bigger than our composition. We want to animate the position.

- Create two key frames: a starting one and an ending one. Drag the photoshop file so that it starts at one side and finished at the other.

- Add the text layer, and use the same 'TrackMat alpha matte' option as above.

- Try with a white background for a different look.