Tag: Adobe photoshop

Project #2 Arrange & Rearrange

DemelzaB Leave a comment

When visiting the museum of natural history (see previous post) I took notice of the different arrangements of objects. The way the objects were arranged made them easier to view and navigate around the museum.

I saw the impact different arrangements had on the objects when researching artists who work with collections.

Now it was my turn to investigate for myself…

Primary Research

Task 1: Arrange & Rearrange

Having my objects collected, I then had the job of photographing them in several arrangements.

Twigs

arrangement: random, chaotic, jumbled
arrangement: divided by shape type. 1) straight 2) forked 3) curved.
arrangement: tall to short
arrangement: circular & in size order

Leaves

arrangement: random
arrangement: by colour and evenly spaced into a grid formation.
arrangement: artistically, centered around the largest leaf at the bottom, centre. Stems pointing towards this central leaf. Greenest leaves around the outside.

Feathers

arrangement: random
arrangement: divided by neat (bottom) and messy-shaped leaves (top) Divided by a central gap.
arrangement: light to dark, horizontally placed.
arrangement: grouped into smaller piles. categorised by colour (light, mid and dark).

Task 2: Re-direct the attentional focus

I then took separate photos of the individual objects from a group. I needed to select an interesting aspect of the object to focus on. For example, with the twigs (below), I picked out the following elements:

  • dark and light contrast, split at centre
  • fork in the twig and it is long and thin
  • an oval ‘mouth’
  • lichen growth
  • scratched markings on the surface
  • fluffy catkins
  • round markings
  • fork in the twig, colour is slightly green
  • kinks/ knuckles create an interesting twisty shape
  • smooth surface, rusty red colour

I then needed to create a grid with these photos. In the example below, I made sure to connect the lines from one photo to the next, so that the images would meld together visually.

Leaves

I was more drawn to the leaves when selecting a topic to explore further. I then produced 2 grids using some of the same leaf images, and switching others.

Placing the stems in a direction that guides the eye around the grid. I used negative space to break up the composition and kept this space to the bottom right area.
Placing the greener elements to the right and left, with the rusty colours in the centre.

I found this task more challenging than I was expecting. Because all the leaves are quite different, I wasn’t sure how to place them harmoniously.

How I made the grid in adobe photoshop:

  1. place embedded
  2. resize the image, accept (tick)
  3. rectangular marquee tool
  4. select the square
  5. mask
  6. unlink the mask from the picture
  7. v for move tool
  8. w rows to move it around
  9. to resize, edit> transform> scale >accept (tick)

Sustainable campaigns & animated GIF

DemelzaB Leave a comment

Sustainable campaigns- group presentations

Watching the class’ group presentations, gave me new ideas for how a sustainable campaign can be presented.

Notes:

  • Greenpeace- Detox (guerilla marketing) The use of props gets across the message instantly.
  • Mental health awareness week- get outdoors
  • WWF focuses on 4 animals. I noticed the importance of focusing onto specific aspects of an issue. If these posters tried to cover every animal affected, it would be less punchy.
  • Ocean agency- coral
  • Reimagine by Landrover- electric cars
  • ‘Tomorrow starts tonight’ IKEA – Mother London Creative group (healthy lifestyle)
  • Use of metaphor. Transform by swapping context:
  • ‘steps’ IKEA also Mother London
  • Use of icons- Kiehl’s- formulating a better future- use of colour (green for sustainability)
  • HS2 Rebellion – use of photos from the construction site! This sends a powerful message because we are seeing the actual site of the destruction with our eyes. In terms of the Tesco/Greenpeace campaign we could use this strategy to demonstrate the effect Tesco are having on rainforests.
  • They also use cartoon illustrations to represent the destruction taking place and its potential effect on communities.
  • Texture in the font. Illustration and handmade signs. Different designs for different audiences. Designed for the location or for online.
  • Wild East UK- bold letters:
  • Not looking at the whole problem- by zooming into specific animals
  • Find your way- mindgrowing.org
  • Use of sketches- play on words , colours blue and green relate to Earth. (taking into account the implications behind colour choices.)
  • Quirky/ chunky font=relaxed. Focusing on 1 word instead of the whole title.
  • Design company the lovers
  • Attacking the viewer- questioning their humanity ‘are you a robot?’ targeted at the digital era. (Greenpeace)
  • Nature is speaking- using a different voice for each aspect of nature e.g. ocean, ice, mountains.
  • Extinction Rebellion- photo of house submerged. House designed and built by them to suggest rising sea levels. Strategic placement.
  • Greenpeace and Extinction Rebellion both use shock factor.

Animated GIF workshop

Working in PNG is best for animated GIFs.

We would use Illustrator to create the slides and PhotoShop to animate the separate slides, exporting them into a GIF.

  1. Export for screens
  2. Window > timeline > create frame animation
  3. Clicking the plus adds new frames.
  4. Allow enough time to read the text. e.g. 2 seconds.
  5. Press play to see the animation.
  6. Mp4 file plays on Instagram- can’t upload a GIF on Instagram.
  7. GIF file> export > save for web
  8. Opening the GIF in a new tab, allowed me to view the GIF full page.
The timeline appears at the bottom of the photoshop screen. By clicking the small arrows, I can change the time each slide appears on the screen.
The layers can be viewed in this right-hand window. We needed to click on/off the eyes to hide the layers we didn’t need.
The play button allows me to see a preview of the animation.
The save for web window.
Opening the GIF in a new tab of the browser.

Project 3 – short animation- group work

  • The task for next week is to create a short animation. We are in the same groups as for the expressive type exercise. The aim of the project is to make the GIF extracting key points from the article on deforestation.
  • We must first define the problem (intro), highlight the causes and then conclude the issue. (The CTA of the article).
  • The type must be easy to read and understand, since the purpose is for it to be on social media.
  • We should refer to the demo to get an idea of what helps an animation to flow and be legible.
  • The animation could be longer than 11 frames e.g. 20 secs in total.
  • Don’t overcomplicate it! Stick to just 1 font. Use a font with high legibility- could be from google fonts. Typography style- use the type manipulation that we used in Project 2.
  • Simple, punchy is best.
  • Need to communicate the idea of deforestation. This can be done with the graphics as well as the actual words.
  • Stick to short phrases. Extract some data from the article. Could make the numbers bigger. Some slides could show just one word. Using colours to stress the message. 1080px x 1080px. (size of insta post)
  • present on 28 Feb
  • 1 GIF for the group.
  • Just typography- no images.

Ideas from group discussion:

  1. Ben- forming the script from the text
  2. Demelza- putting these into individual slides with Illustrator
  3. Holly- animating the slides

We considered the use of:

  • Bold to thinner type
  • Bright colours to dull
  • Last phrase blurs into blank page
  • Could disintegrate at the end
  • look at google fonts, send them the options
  • Barlow condensed
  • Could use 3 colours- bright green- to muddy green- to black
  • Keep it simple, use just 1 effect.
On Illustrator, I made a few examples of how we could animate the effect of disappearing or loss. I then consulted the group, to see which effect everyone liked the most. We all agreed on using the pucker tool (top line)

Ben sent his script for the animation.

I transformed the words into slides, on illustrator. (below) I liked the rhyme and rhythm he has used.

From reading the brief, I saw that the GIF needed to include the causes, effects and solution for deforestation.

I therefore, needed to script the rest of the GIF myself, because of time restrictions. (left)

I sent the PNG files of the slides to Holly and the illustrator file to the rest of the group. I invited the group members to change anything they didn’t like before the animation stage.

I shared with the group, the plan for the slides. This would allow Holly to be able to work from the plan with the PNG images.

Feedback for the animated GIF

  • The transitions are a bit too fast
  • The gap in ‘are cut down’ is not immediately obvious
  • Too many effects overall e.g. the black outlines on the word ‘Earth’s’

Un-creative writing: further experimentation

DemelzaB Leave a comment
Il Pleut, Guillaume Apollinaire, 1918
Lewis Carrol, Mouse’s Tale, 1865

Using the text I came up with from the random word generator, I played around further with the tools I’ve learned so far.

The reason I like this collection of words, is the double meanings.

‘Palm’ could be a palm tree or the palm of a hand.

‘Match’ could mean a pairing of 2 objects or people, football match, or a matchstick used to start a fire.

This is found often in poetry.

I typed the words using the type tool in adobe illustrator. I then turned them into vector images and experimented from there.

Below are the first 4 examples. I included italic font in the second image, to place emphasis on the adjectives ‘Blank’, ‘revolutionary’ and ‘perfectly’. I liked the effect this had of almost breaking down the text. I feel it made it easier to understand.

In the fourth experiment, I formed the words into a bridge shaped structure to illustrate the word ‘bridge’. I enlarged the ‘A’, as I felt this letter also has a bridge-like structure.

bridge-copyDownload

Placing these images into adobe photoshop, I was able to add these effects:

‘Radial blur’
‘Ripple’

I then went back into adobe illustrator and experimented with the words again.

  1. Large to small and cluttered to neat. I feel this suggests a large blank space and a small match.

2) Disorder to calm, like a wave crashing on the shore or something disrupting the flow.

3) Use of serif font (Bodoni) sets the middle sentence apart from the rest of the text and suggests something more formal.

4) Image trace> line art> increase stroke> outline>invert fill. I then went back into the image with the pen tool and added lines to help the words be more legible. I arranged the words in a way that feels more free and perhaps palm-leaf-like.

bridge-2-copyDownload

When there are words with a double, or triple meaning, the way they are presented/ arranged can help suggest to the reader which meaning you want to get across.

Letter stamps

Text from the receipt in previous post