Design Ideas and process
I have always wanted to design a logo of my own. A logo is usually the first thing that catches the eye and it is important to give a strong first impression. A good logo is memorable, giving people a sense of comfort because it is representative.
The first one was one of my earliest designs and the whole logo was hand-drawn. I used a semicircle around the letter S. The letter S stands for my name and the semicircle means I am not perfect and I still have a lot to learn. The open half-circle represents the willingness to accept other people’s opinions and gain more knowledge. And the lines and patterns in the letter S represent my inner thoughts.
The second design is an improved version and one that I am quite happy with. My name is no longer handwritten but by a type tool. I really like the colours of the logo, so I will keep the colours. The flower on the left seems to steal the attention from the letter S, which is already patterns inside there. The whole design has become a bit confusing. By removing the flower and the semicircle on the left, the letter S catches the attention back. The whole design is no longer too complicated, but not too simple or boring.
I think the logo from the last one is too pink and gives the stereotype of femininity and girly. I wanted my design to be welcoming to everyone, so I adjusted the background colour and the pattern colour. This is one of my favourite and most satisfying designs. It doesn’t feel too girly without giving up too much of my favourite colours. This version is simple, as I have added some small designs to it. The absence of the half-circle design means that I am no longer in my comfort zone, but open to different opinions, criticism and change.
After reading the essential and recommended tutorials, I feel that I have a better understanding of illustrator. It is useful for me to follow and go step by step. I have more confidence in using drawing tools. I also tried different typefaces, and I enjoyed playing around with different styles, colours and patterns. Because of my lack of experience, I am not sure when to switch tools.
I will do more practice and hopefully, I will become more proficient in illustrator.
I really like watching tutorial videos on youtube. I’m a beginner in illustrator and I got a lot of inspiration from them. I feel that I can find answers to many of my questions in YouTube tutorial videos, and they even inspire my creativity and imagination. The YouTube tutorial video, ‘5 MIND BLOWING Logo Design Tips’, has really helped me a lot. I got a lot of great and straightforward tips so I had a good start and process in creating my logo. I am very grateful for these tutorials as they have provided me with useful advice. This helped me to design my logo with fewer mistakes and less downtime due to their clear instructions. I’m glad I finally finished a design that I like and am more satisfied with. I would like to develop more skills in illustrator, and I hope that with more practice I will be able to enhance my knowledge of using illustrator.
Resources for research and inspiration
During the research, I came across a resource that impressed me, which was not very long and straightforward to the point. It states 5 principles of logo design and which are simple, memorable, timeless, versatile and appropriate. I understand that a logo is to communicate with the readers and create something that resonates and is memorable. Examples are also stated in the blog which allowed me to take them as references. Those ideas inspire me to look at similar materials the common and popular logos have. I referenced different logos, for example, Facebook, Youtube, Twitter etc. I found that most of them are simple in both the illustration and colours. This helped me develop my own logo design and I decided to keep my logo simple. There isn’t more than one object in my logo design and I keep the whole logo in two colours.
Design Ideas and process
I’m going to introduce the podcasts and for the first one, I’ve used a light pink (#fde9f4) background. I think it’s a milder colour, and I’ve put a computer illustration in the middle. I think that graphic communication often requires the use of Adobe software on the computer, and Photoshop is very useful software. Photoshop is also the software I use to create my podcasts.
I believe different typefaces give the reader a different understanding and feeling. In the podcast, the illustration is behind the text and the colours I chose (#bddbd9, #e3d7ed) are lighter and smaller in size because I didn’t want audiences to focus only on the computer and ignore the text I was trying to convey. The text in the bottom left corner is relatively unimportant, so the size is smaller and placed on the bottom left. But I didn’t want my readers to miss this information, so I used a brighter colour (#fff4de). It’s a great way to get the reader’s attention without stealing my theme and ending the whole podcast.
For the second podcast I used a brighter yellow colour as the background, I think yellow is the brightest of all colours. Many people think it is a colour that represents happiness, optimism, enlightenment and creativity. I wanted this podcast to have a positive feel, so I chose this colour (#ffde59). The theme of my podcast is graphic design. Above this theme, there is an illustration with different buttons representing different topics. The illustration is not complicated, as I wanted my work to be simple and easy to understand. In the design, I have taken reference from the general layout of a podcast on the phone. So I put in the forward, backward and in-play graphics under my theme. I chose to use the in-play graphics rather than pause because I think the knowledge of graphic design is endless and can’t be suspended. If in doubt, you can go back, master it, go forward, but you can’t stop.
For the third podcast, I used the colour orange (#cf6b49) because I think orange gives people a sense of energy, warmth, and health. Instead of using a brighter orange colour, I used a milder orange colour. As the podcast is seen through the screen, I wanted this colour to soften the irritation to our eyes and make my readers feel comfortable watching it. The second main colour is white, which represents innocence, safety, understanding, possibility.
I wanted my work to bring out a positive feeling. I used the illustration of the headphones because a podcast is an audio file for easy listening. The square at the back is an irregular illustration that draws attention to the pattern without being too obtrusive.
The text at the bottom is the theme of typography, which is obviously a little larger than the graphic communication on the right. Although typography is the theme, it is because I think it is closely related to graphic communication. I wanted to draw the reader’s attention to the graphic communication but not steal the whole thing, so I added a soft beige (#efe8d8) rectangle to the back. The flowers on the side are to add a sense of life to the monotonous background.
I did a few different versions and colourings in photoshop at first and used different photos to piece together, but the results were not very satisfying and not what I had expected. Because I wanted my podcasts to be a simplified style, I decided not to use photos. I started to gather more information and re-imagine my idea, then simply drew the layout and illustration of the podcast on my iPad procreate. This first draft has given me a strong knowledge of what typography is available when I am actually working on my typography. What can be used, what can be changed or what style I can use. And how I can change my typography depending on the size of each image. I think this is very important and I enjoy the process of discovering different styles. I then went to photoshop and split them into different layers and put different colours on them, and could balance the size, space and layout etc. I enjoyed the process, I’m a beginner in Photoshop, so I watched some basic YouTube tutorials, I got a lot of inspiration and made a lot of different versions, I’m glad I finally finished a design that I like and am more satisfied with. I would like to develop more Photoshop skills, as I think I am weak in colour mixing and I hope that with more practice I can enhance my knowledge of using Photoshop. This is a short video I watched on Photoshop skills, it was easy to understand and helped me a lot when I was making these podcasts. Because I needed a basic understanding, it was important to build my inner mind.
Resources for research and inspiration
I referenced different podcast graphics, and these six gave me the most inspiration. I referenced the gentle but attractive background colours in figures 5 and 6.
My inspiration for podcast 1 came from the computer in figure 1. Graphic design and computers co-exist, so I added illustrations to my design.
The inspiration for Podcast 2 came from figures 2 and 3. Because podcasts are usually designed for the player, I used this concept. The illustration comes from the player in figure 4.
Podcast 3 is a little different from the first two podcasts in that I have taken references from Figures 5 and 6. The two-coloured background in figure 5 creates a prominent illustration, which I really like, so I have added similar elements to my design.
I wanted to take a moment, in the calm before the storm, to thank our wonderful team of Part 3 students working hard to deliver our degree show on Thursday 17 June.
This is our first year hosting our show online, and the students are learning new skills on the fly in an incredibly fast-moving field. The event is completely student-led, from the branding through to the final delivery. Reading has always had great strength in allowing students to experience a range of real world professional experiences as part of their studies, and for degree show team this is more true than ever.
The show is traditionally a time when new graduates, employers, parents, alumni, staff and younger students come together to celebrate not only the graduating class, but everything that the Department represents. Looking at the list of registered attendees, it seems we will keep that atmosphere going in the switch to online. I’m looking forward to seeing so many people from our community on the night.
So well done to Alex Ganczarski, Caitlin Wilson, Rory Tellam, Edoardo Sarli, Matt Dawson and Darcie Richmond. Your work for your peers, and for the wider Reading Typography community is greatly appreciated. The design work looks wonderful, the attention to detail is fantastic, and your dedication to making an impact on the future careers of all your friends has been inspiring.
Roll on Thursday!
For my week 3 task, I continued my software skill development by creating three creative images in Photoshop. This task aimed to help me to explore further and expand my creativity. From the last term, I demonstrated my design skill on the topic of a podcast cover. Therefore, I decided to accomplish another topic choice for this time. I always wanted to create artworks for my cat, but I never had a chance. This task was an opportunity for me to achieve it. In my last term, I watched a bunch of videos to help with my skill development. Nevertheless, I nearly forgot all of them that make me realised the balance of quality and quantity. Instead of watching numerous tutorial videos, I decided to focus on one skill topic and practise in-depth.
The first two design are both oil painting portraits of my cat. I watched the same tutorial video but with different authors to compare their approach towards this topic. For my last design, I made it a review practice of what I have learnt in Photoshop so far. I combined all the skill and created the final piece.
I first used the lasso tool to select the head area and applied a content-aware fill to replace it with the background colour. After that, I cropped the head part of my cat by using the lasso selection tool again. I copied and pasted the head on the painting. I then applied a layer mask onto it and started using the brush tool to erase the unwanted edges. Before applying the oil paint stylisation, I added one more layer of unsharpen mask. It can bring back the details of the image. I further adjusted the level values and colour balance to match with the painting itself.
For my second design, I repeated the same procedure as the first one. Dispiratively, I used the stamp tool to copy the collar pattern as one of the clone sources after using the content-aware fill. The shadow underneath adds depth to the head part and creates dimension to the painting.
After I decided to use the painting ‘Summer is icumen in’, I then inserted my cat image and started resizing and adjusting its perspective. Apply the oil paint filter to make the image look like having painting strokes on it. It was different from the last two design. I altered the levels of stylisation to match with the original painting at the back. The cat looks like it is floating in the air, so I used the brush tool to draw a shadow and blend the colours. I additionally used the eyedropper to help me get the exact shade in the painting to prevent colour differences.
This video is a tutorial on how to create an oil painting portrait for your pet. The author applies different layers of filters to edit the image from a digital form to an oil painting. I followed his instruction of stylising the pet image with an oil paint filter. This filter can add a brushstroke texture to the image and creates harmony with the original painting. Apart from using filter layers, he makes level and colour adjustments to the image to achieve a more satisfying result. The level adjustment depends on the original value of the photo. It is impossible to copy all of his value changes because we were using different pictures. Therefore, I had to adjust to other value levels to see if it works in my case.
This tutorial video has a similar process as the previous one. However, one point that is worthy of drawing attention to is the use of the stamp tool. Although the content-aware fill can approximately cover up the head, the texture near the neck will get blurred out. As a result, the author finishes its touch up by using the stamp tool. He uses the stamp to copy the pattern of the collar and starts pasting them around the neck. For my second design, I followed his way of creating an oil painting portrait. Compared with the first tutorial video, his method can keep the detail part of the collar and makes the whole piece look more well-finished. Overall, I prefer this tutorial more.
The following tutorial is an introduction video of the brush tool. The brush is the core tool that I used in my third design, so it is essential to learn about its functionality. This video talks about the importance of adjusting different brush hardness levels. A softer brush can build up layers and create smooth edges. It usually uses to blend colours. A soft brush can also embellish an image easier. On the other hand, a higher brush level can draw out a sharp line, so it generally uses for outlining. Therefore, I adjusted the brush hardness to 0% when I was blending.
After finishing this task, I am interested in exploring further with the brush tool, especially experiment with different types of brushes. I have experience in drawing in Illustrator but never tried to draw in Photoshop. Accordingly, I will start to develop my drawing skill by practising with the brush tool or watch some drawing time-lapse videos to observe how people utilise the brush tool in Photoshop.
Resources for Research and Inspiration
My main inspiration for this task is the series of oil paintings named ‘Dogs Playing Poker’. General artists usually express an image by painting a human as the character, but Coolidge used personification to paint dogs playing poker. This surreal approach is interesting to investigate and discover. Therefore, I put this idea into my first two designs, editing my cat head onto a human portrait.
All of my designs focus on the style of an oil painting. When I was searching for the image option, I chose portraits that painted during the Renaissance. I found out they usually had a bulky collar that covers their neck. This clothing decoration can make the process of editing easier because it avoids extra works.
Recently, oil paintings with a soft pastel colour scheme have become a famous aesthetic. I have an album on Pinterest where I collect this kind of oil paintings. It is also the inspiration for my third design in this task.
To conclude the topics I have done so far in Photoshop, I tended to research vintage and retro themes. In the last term, I designed a series of vintage podcast covers. For this week 3 task, I used renaissance paintings as my inspiration. It might be a good idea for me to explore other kinds of approaches, such as combining neon colours and glowing effect to create a futuristic style.
My chosen discussion task will be formatting a flyer in InDesign. This was the task I struggled with the most, but also, I think, benefited from the most.
Although I do have experience with formatting text in InDesign, it is something I find difficult, so I wanted to explore this task fully so that I could build up this skill a little more, as I believe it is an important one to have as a designer, especially as a designer interested primarily in typographic design.
Initially for my design I wanted to create something that mirrored the aesthetic of other promotion used for the podcast. After looking at the podcast website, as well as the promotional material online, I came up with a first design idea.
I wanted to keep a similar colour scheme, yellow and blue, to match the official promotional material, as well as some of the key imagery. One design in particular caught my eye, which was one featuring a silhouette of a head with the title “rethink’ where the brain would be.
I used this as inspiration, creating a forward-facing silhouette in blue with an open eye in yellow. While experimenting with this, I decided that I simply didn’t like how the shapes and colours worked together and decided to move on to a second idea. This time I planned to use a different silhouette, more like the one in my original inspiration. Again, although I had used a similar design, I found it looked slightly wrong, and decided it would be best to move away from this idea.
Eventually I settled on a new, somewhat simpler idea, using an image of the presenter, still using the gradient blue hues I liked originally, and combining two fonts that I felt worked well with the tone and image.
Although I already knew the basics of formatting text in InDesign, it was definitely helpful to have access to and have the opportunity to find tutorials to make the process more simple and more effective.
Looking at the tutorials for formatting text to refresh my knowledge really helped me get a better understanding of how I might bring my knowledge of formatting text for book design into formatting text and image for a flyer or magazine. Although the two processes were somewhat different, with the help of the provided tutorials I was able to use a combination of fonts, weights and sizes relatively easily in the setting of a flyer alongside image.
While I have never had experience with using hyperlinks in text before, I found it to be easy to understand and incredibly useful for other projects, especially for its usefulness in designing for screen or in web design. I also found it useful to be able to format a hyperlink directly into text without disturbing the layout and being able to apply paragraph styles to it.
I was unsure how to use certain text formats that I wanted to try, so I looked at some simple software tutorials to help me further my understanding. I wanted to learn how to type around an ellipse, so I looked at some software tutorials that advised on how to type around a pre drawn shape or line. This tutorial (https://www.youtube.com/watch?v=6SU8FwJhNiQ) on creating text along a path. This was a simple tutorial, but I feel it will be incredibly useful in the future with other projects.
I would like to further develop my skills in using typography on indesign following along with the more complex provided tutorials.
Resources for research and inspiration
When beginning research for this task I wanted to consider first what the current promotional material for this podcast might look like, and how I could incorporate that into my design. I went to the page for the podcast itself, noting colour scheme, font, image and layout. Again, this was a combination of blue and yellow colours, which I really liked and tried my best to incorporate into my final design, specifically keeping the blue gradient colours, matching them to the image used, in complementary contrast with the orange/yellow tone for some of the headers, and an off white for the main body.
Once I had landed on my third and final design idea in the process, I wanted to do some research outside of the provided software tutorials and design tips on how flyers and magazines are designed. I first looked at some sites on magazine design, such as this one (https://yesimadesigner.com/anatomy-of-a-magazine-layout/). I also looked at Pinterest for inspiration and ideas surrounding magazine, leaflet or flyer design. I decided I liked the use of a large image with an abstract shape being used for the title text, with the key text around or underneath. I also liked abstract, bold fonts in combination with simple, clean ones, using bold colour combinations to create a contemporary yet welcoming effect that draws the eye.
I looked at further image and design for media collections for inspiration, this time specifically centred around podcast or video promotion or informational design. Again, these often use an eye-catching logo or the presenter or creator in an image to draw attention, using large or bright yet simple lettering and phrases combined with smaller, slightly less visible from afar text to draw the audience into reading further about the media. I attempted to achieve a similar technique through my design, while trying to maintain a simple decorative aspect.
This term, we have undertaken various tasks that have allowed me to improve my skills in Photoshop, Illustrator, InDesign, and AfterEffects. The task that I enjoyed the most during this term was the Photoshop Creative Images task. I created three images that I am happy with.
DESIGN IDEAS AND DESIGN PROCESS
DESIGN 1 – FLOATING THROUGH SPACE
For my first idea, I wanted to create an image that altered reality so I chose to manipulate an image of a man floating through space. To start to design process, I browsed for stock images on Pixabey and found one of a man that looked like he is ‘floating’, and one of the stars that I could use as the background. I removed the man from the background of the original image by using the pen tool to create an outline around the figure. By selecting a new layer via cut, I removed him from the background and deleted the layer that i didn’t need. I then brought the images of the stars into photoshop and placed this layer underneath the figure. I then adjusted the brightness, contrast, and saturation of the images to make them look more authentic, and work in harmony with each other.
DESIGN 2 – FLOWER MASK
The second image I chose was of a woman’s face submerged by water and flowers. The effect that I wanted to achieve was flowers covering one-half of her face. To achieve this effect, I used layer masks and the brush tool to make a ‘shadow’. Firstly, I created a new layer mask and selected the part of her face that I wanted to remove. I then imported a picture of flowers and placed it underneath the existing layer so that you could see the flowers through her face. I used the selection tool to scale and position the flowers to fit the image and adjusted the existing layer mask, using the black and white brushes. I wanted to manipulate the image to make it look like the flowers were on top of the water and her lips were overlapping the flowers. I found it difficult at first but managed to get the hang of it after some time (and some tutorials). When I got to a point where I was happy with the mask, I tried to make the flowers look more realistic by adding a shadow. To achieve this, I used the black brush tool at a large size and 0% hardness to recreate a shadow around the flowers.
This design was my favourite that I created during the task. My idea for this image was to create a feeling of movement within an image. This was heavily influenced by Şakir Yildirim’s image called ‘crawler’. However, I did not follow the exact technique he uses to create his images. To make this image, I found a picture of a boy walking from a side-on perspective and imported it into photoshop. I then used the direct selection tool to copy his figure into a new layer and duplicate this layer many times and positioned them in such a way to look like the boy is walking from one position to the other. I kept one of these separate and placed it in the middle, and grouped the rest of them together. I merged these layers together and used the ‘motion blur’ filter to blur the figures, and did the same thing with the figure in the middle but made him less blurred to make it look like he was coming ‘back to life’, or transforming from one figure to another. the final figure on the far left and right I kept as normal but used the blur tool to blur the edges. This made the figure blend in more with the background ensuring that it didn’t look cut out of the image.
I found the tutorials provided to us helpful to get started with this task. They refreshed my memory and I found it useful to focus on layer masks and using nondestructive techniques in my work. Using these techniques made it so much easier to go back on my design choices, and saved me from having to start all over again if I changed my mind. I often find that watching tutorials before taking on a task actually helps with my idea generation itself, and inspires me to get started.
I found the following tutorials particularly useful when working in Photoshop for this task. When using the tutorials, I tried not to follow them exactly but used them to get a rough idea of how to achieve an effect, and tried to find my own way of working. Each of these tutorials provided me with a better understanding of how tools within Photoshop work and inspired me to use Photoshop in different ways.
CREATING SHADOWS IN PHOTOSHOP
This tutorial on creating shadows in Photoshop came in helpful for my second design with the flowers to replicate the effect of a shadow. I used this in an attempt to make my image look more ‘real’ so I tried to follow the way light would naturally behave in real life. This tutorial inspired me to think about the perspective of light, and the depth of the image while I was editing. The tutorial covers how to create shadows on different surfaces. he uses the brush tool at 0 hardness, which is the technique is the technique I used in my own work. He also goes over how to create shadows for a curved surface, and more complex objects, which I didn’t need for this task in particular but will come in helpful in the future.
PHOTOSHOP TUTORIAL – FLOWER FACE EFFECTS
This tutorial helped me to grasp a better understanding of layer masks in photoshop and how to work with two images, one on top of the other. During the tutorial, she used the pen tool to create a stroke to select the parts of the original image that she wanted to remove, and uses the bevel and emboss layer style to make the cut outs look more 3D. she uses a layer mask to remove parts of the existing image to make the flowers appear on top of the face, giving a realistic effect. This tutorial was helpful to figure out how to make the flowers in my own design overlap with the face of the image.
MOTION BLUR EFFECT IN PHOTOSHOP
This tutorial introduced me to the motion blur effect in photoshop, one that I wasn’t already familiar with. I found that it was a really simple and easy way to introduce a sense of speed/ movement in my own image which was precisely the effect that I wanted to achieve. It also helped me with using layer masks, cutting out objects with the quick selection tool.
SOURCES OF INSPIRATION
The second image that I worked on for this task was inspired by the album art for Shawn Mendes’ album cover. I really love this album cover and wanted to create an image with the same sort of feeling. I wanted to edit an image that inspired by, but not a direct copy of the original. I used an image of a woman rather than a man, and only including half of her face instead of placing one half on top of the flowers.
There is a collage artist called Marcelo Monreal who also creates similar portraits, of people and flowers which also heavily influenced this design. I find that his work very appealing aesthetically but also in the way it makes me feel. His portrait creates this feeling of contentedness that implies the subject is at one with nature, which is how I would like to think my image would create too. You can find some of Monreal’s work here https://www.instagram.com/marcelomonreal/
My third design was inspired by the work of Şakir Yildirim. In particular, the portraits created using the liquify tool in Photoshop. Looking at his work inspired me to introduce a sense of movement, or duplication into my design. Yildirim’s work, specifically in ‘crawler’, creates a sense of motion, or almost a sense of transformation depending on how you interpret it. I find it fascinating that you can capture, or manipulate this very real sensation within a 2D image, which is the idea behind my third and final design for this task. You can have a look at Yildirim’s work here https://uk.gestalten.com/blogs/journal/new-perspectives-with-sakir-yildirim and find out how he uses Photoshop to achieve his portraits here https://helpx.adobe.com/uk/photoshop/how-to/liquify-filter-motion-effects.html
Overall, I really enjoyed this task. I have been able to improve both my skills and confidence with using Photoshop while creating some fun images that I am quite proud of.
Produced using Adobe Illustrator.
Carrying on from my previous Illustrator task, where I initiated my exploration with mesh and pattern tools, I wanted to further develop my skills and experiment with typefaces, this time, with monograms.
I was also interested in taking inspiration from past design trends, patterns and angles, primarily to help me visualise and aid me in my creation/experimentation phase.
Design Ideas and process:
Influenced from the popularity of social media apps like Instagram, a fusion of retro-kinetic (more popularly seen in Japanese Design trends) and retro-serif typefaces have taken over, paired up with minimalistic colour (like neutrals and pastels) and styling (in regards with packaging and branding). I was also curious to see if there could be a possibility to embed a 3-dimensional element to
This was something that I was really interested in carrying over, in my creation of monograms, with of course a hint of my own style and personality.
Some of my initial design ideas leaned towards the more retro-serif style, with elegant and curvy serifs, paired up with smooth cursives. Something that would be considered a lot more ‘trendy.’ But I also loosely sketched out some designs with a focus on height and patterns, with an element of movement in it. I also envisioned the use of sans serif fonts, but this was something that would require a lot of experimentation and exploration.
Soon enough, I was not really pleased with some of the results that were being resulted with retro-serif experimentation, so I decided to shift my focus to the retro-kinetic approach more (plus it would flow beautifully into my previous sticker-based design project).
One of my first design ideas was achieved through the use of the pathfinder and envelope distort tool, where I proceeded to create an outline of the letter ‘r,’ with the typeface Base Mono Bold, before using the rectangle tool to create parallel lines until half of the page was covered. The next step was to use the pathfinder tool to ‘divide’ all of the lines created and sending them to the ‘back’ of the page. All that was left to do was to combine the outline of the letter with the pattern that I created.
To assist me with my basic understanding on how the mesh tool works with typefaces, I decided to browse through a selection of videos on YouTube, just to get a glimpse of the process and understand any additional tips that could have been provided. Apart from using the mesh tool, I also wanted to develop a small portion of skills in regards with the warp and 3D tools and also generally see how different people approach the creation of monograms. Some of the mesh tutorials, especially with the combination of the pathfinder tool, took me quite a while to practise out, since despite it looking to be a fairly easily process, turns out there were small little details to focus upon, in order to have the final outcome (which was a really encouraging challenge for me).
Resources used for research and inspiration:
As established previously, most of my design work has been inspired from previous/existing/upcoming design trends and to ensure that I stay true to some of those elements, I always begin by creating a mood board consisting of other designer’s work, textures, fonts, colours and shapes, before constantly referring to this visual aid. It is a great reminder about some of the elements that could have been forgotten about. In terms of researching about design trends, different websites and blog posts reminded me about some of the features that I had previously seen on social media platforms.
For the TY1SK module, we were allowed to choose four tasks to complete over four weeks, and one of the tasks was ‘creating vector objects’ in illustrator. We had to create an illustration for a social media banner, to accompany podcast for the novel ‘Homegoing’, by Yaa Gyasi.
I chose to complete this task because I wanted to further explore illustrator, and I wanted to increase my skillset. I was also really fascinated by the theme of this novel and that is why I chose this task for my blog post.
Design ideas and design process
I decided to use the same colours seen on the ‘Homegoing’ book cover, in my banner design, which I think would allow the viewers to see the banner and immediately recognise the book cover. I also kept the hexagon element in the centre of my design to hug the African continent, while pointing to the sisters either side. The African continent immediately offers context with Ghana to the viewer, with Africa being at the centre of heartache and home-going. I kept the symmetrical layout, suggesting a mirrored image. I think portraying the half sisters in a silhouette form makes the depiction universal. I wanted to portray their cultural connection to Africa and each other, and their vulnerability.
I wanted to create my own pattern, but still keep the geometric shapes found in African designs. Using the shape tool, I created a few rows of connected triangles and filled them with red and orange, similar to the book cover. Then I duplicated my triangle rows to create a pattern for the background. A useful video helped me to turn my pattern into a swatch which I could then place inside any shapes/outlines of my choice. I selected my design, trimmed it into a square shape, opened up pattern options, and chose ‘make pattern’. This turned it into a swatch.
A screenshot showing the first step of creating my pattern
A screenshot showing the second step of creating my pattern
A screenshot depicting how I turned my pattern into a swatch
I drew the outline of Africa, and placed it in the centre of the banner, filling the shape with my pattern. I also placed the pattern around the edges of the banner, leaving a white hexagon around the outline of Africa.
I decided to incorporate flowers with a similar appearance to those seen on the cover, but gave them less visual impact so that it doesn’t distract from the sisters. The flowers are also mirrored symmetrically, and lean in towards the centre, guiding the focus of the viewer to the place of home-going.
A screenshot depicting the flowers that I drew and included in my illustration
To depict the spiritual side of the novel, the belief of death allowing a slaves spirit to return home, I decided to fade Esi by reducing the capacity. I think it shows the distance between her and Ghana, but also her soul. I kept Effia’s opacity 100%, and I tilted her head downwards to show her shame and sadness for being married to a slave trader.
I experimented with a gradient background, however it did not compliment the other elements of my design, so I removed it. I still incorporated the gradient effect on my Africa outline, fading it in from the left. I think this depicts the lost cultural connection and identity of the displaced slaves.
A screenshot displaying the outline of Africa fading in, and the two half sisters, Esi (faded) and Effia (head tilted downwards)
A screenshot displaying the attempted gradient background
To emphasise the complexity of ‘love’ and brokenness of slavery, injustice, greed, and racism, I placed a broken heart on the African continent, where Ghana is located.
The typeface ‘Avenir’ is a geometric typeface which fits with my geometric design, but it also has a human touch which relates to the circumstances depicted in the novel. It is very clear and easy to read.
The essential and recommended videos that were provided, were very insightful and useful. Watching the videos reminded me of how to use the pen tool, shape tool, direct selection tool, and the shape builder tool in my designs.
The ‘Combine shapes’ video taught me how to combine shapes, by selecting the objects you want to combine, and using the shape builder tool, drag across the shapes to combine them into one shape. I did not use this skill in my banner design either, however it is something I could use in future designs.
I was unfamiliar with the Image Trace command, so that tutorial was insightful and I will definitely be using that skill in more of my designs in future, especially if I hand draw an image that I want to bring into illustrator.
I was not sure how to turn my triangles pattern into a swatch which I could then place as a fill into any shape/outline, so I found a useful video to help me, called ‘ How to Create Patterns in Illustrator Tutorial’, https://www.youtube.com/watch?v=n34-YmNJMrc .
Dansky showed two ways of turning a pattern design into a swatch/pattern. I trimmed my design into a square shape, selected the whole shape, went to window, pattern options, and at the drop down menu I just selected ‘make pattern’.
Resources for research and inspiration
To help me with my illustration for the banner, I read a summary of the novel on https://www.bookbrowse.com/reviews/index.cfm/book_number/3418/homegoing
It helped me to understand what the novel is about, and to gather my ideas of how to portray the two sisters. The summary gave me insights into the existing book cover design choices. It gave me ideas about how I could portray the two women in ways that depict their similarity, differences and connections.
It made me aware of their lost identities and also a sense of disconnect, because they are not even aware of each others existence. Reading the summary made me realise that there is a much deeper meaning behind the novel ‘Homegoing’. It is not just about the two sisters, it is also about so many other women and men, and slavery, greed, racism, and injustice. However there is also hope for reunion and home-going.
I found a very inspiring video tutorial called ‘Illustrator Tutorial | Web Banner Design (Shopping)’, https://www.youtube.com/watch?v=a9vzcdbPMOs Graphic designer, Kaukab Yaseen explained a variety of different skills and techniques to use, and showed how to create gradients, as well as blending an image into the side of his banner design and making the image to appear like it was fading into the rest of the banner.
Although the gradient background did not work with my illustration, I did still take inspiration from this video, by fading in my drawing of Africa. It also further inspired the idea of fading away Esi’s body by reducing the opacity, which I did to depict the idea of death allowing a slave’s spirit to return home.
I researched for appropriate typefaces for banner designs, and found useful information in a blog called ‘Most appealing Banner Fonts to use in 2021’ https://email.uplers.com/blog/most-appealing-banner-fonts/ ,and from this blog I found the typeface ‘Avenir’ which I found very suitable for my banner design.
Design 3 different animations for the Typography & Graphic Communication course.
- include the text Typography & Graphic Communication
- include a background (colour/image)
- explore different ways to animate the text
DESIGN IDEAS AND DESIGN PROCESS
- For my Classic design I wanted to demonstrate the process I have learnt throughout this task of applying text effects to my text. My intention for this design was to display those skills as clearly as possible. Therefore, I have chosen just two typefaces on three different layers, with one text effect on layer two and one on layer three. I went for a muted, natural colour pallet to reflect the simplicity of this design and so as not to distract from the applied text effects I applied.
- Each layer makes sense on their own and could be observed in isolation, and the style of the text effect reflects the connotation of the words themselves. The text effect on the word ‘Typography’ is a nod towards kerning, as the space between each letter gently increases. The effect on ‘Graphic Communication’ plays more with more with the graphic element of text effects, bringing one letter in at a time in a jumbled way to eventually reveal the words.
- This idea was inspired by my podcast work earlier on in this module. I really enjoyed exploring designs which had an urban, messy edged style which experimented with different ways of layering elements, playing with colour, and embracing imperfections.
- In urban environments there is often a lot of movement and bustle played in and around stationary objects. I continued to explore the impact of adding effects to all layers, one layer, or some layers. In this design all of my layers are animated, but I found having the ‘&’ as my stationary object once it arrives brought a solidarity and grounding to this design, enabling the chaos around it.
- I then wanted to explore how text interacts with the background. I experimented with colour, texture, and image.Here I applied an effect to an image for the background as well as applying effects to the text which sit on top of it using Adobe Bridge.
- This design was really fun to develop the use of bold text and unpredictable movements and it really portrays the style I was aiming for.
- Having made many explorations with the different text effects supplied by Adobe, I wanted to push myself to explore other ways to utilise the tools in After Effects, to bring movement and interest to my text through developing my understanding of the other tools available. This design really challenged me and grew my skills and understanding of After Effects and was the most technically difficult idea I produced. I am really pleased with the outcome and think the effect works well.
- My favourite idea explores the use of external movements of shapes, to simulate the movement of my text. I watched a few Youtube videos of water effects in AfterEffects and found one that explained the software really well and was easy to follow. This design creates the effect that the text is filling with water, and then it disappears in the same manner. I first followed along with the video using the text ‘liquid’ and then reproduced it again with the text ‘typography and graphic communication’ to meet the brief.
- To create this design I first opened a new project and created a new composition at 1200 x 695, 1080p, 25 frames rate.
- I then went to ‘Layer’ and created a new solid layer and set the colour to dark blue and locked the layer by clicking the lock icon.
- In the Layer menu again, I created a new text layer and entered my text. Using the select tool I moved it to the centre of the frame and pressed ‘y’ to adjust the anchor tool to the centre also. Adjusting the text to the font and size that I desired was rather simple as it echoed the same process as in other Adobe software.
- Once I was confident the text was in the middle of the frame, I created a shape layer and using the pen tool I drew a rough rectangle shape around the text and filled it in with a lighter blue thank my background. It was important that this blue was markably lighter than my background so that it could be easily visible, but still dark enough that I had room for two further increases in tint for the desired effect.
- With the rough rectangle shape selected, I went to the effects panel at the right of the screen and searched for ‘wave warp’. To apply this to my shape I clicked and dragged it from the results bar onto the shape layer in the timeline. I then adjusted the default settings, such as wave height and wave width, until it had the effect I desired.
- Through pressing ‘p’ on the keyboard, I could click the position stopwatch and create my first keyframe. To get the progression correct, I first set the keyframe for the wave at its highest, then moved to the start of the timeline and set the wave to being under the text, I then set another keyframe. I set a third keyframe in the middle of the timeline, at around the middle of the height of the text.
- To enhance the wave effect as we play along the timeline, I adjusted the ‘s path’ of the shape. This meant it could weave up the screen like a snake, adding to the effect of water filling the text. To do this I moved the handles on the path line that was created from moving the shape downward from the last position to the starting point of the water.
- For a smooth transition from one keyframe to the next, I selected all the keyframes at once and hit F9. This activated ‘easy-ease’, creating seamless transition. I further added to the realism of the water effect by rotating the shape slightly with the rotate tool. With the shape selected, I clicked on the rotate tool and could click and drag anywhere on the shape to rotate it around the anchor point.
- Once I was happy with the shape, I turned it to ‘Alpha Matte’, this made it a mask over the text layer meaning the waves only appeared within the shapes made by the text. I could then copy and paste the text and shape layers on top of the existing layers (using command+c followed by command+v).
- With my two new layers, I selected the shape layer and adjusted the settings of the shape. I changed the colour to a lighter shade of blue, increased the wave height and increased the wave width. So that my first layer could still be visible, I then moved these two copied layers down along the timeline. I also adjusted the keyframe positions to see how this impacted the effect. It took a bit of experimentation to find the position that worked nicely in unity with the first layer but once I found a position I liked I could repeat this process again to create a third layer with a lighter colour.
- It was important that I didn’t move the text layer each time I copied the layers, otherwise the shape of the letters would be distorted and lose form and clarity. For this project, it was not something I wanted to push the boundaries with.
- Having all three shape and text layers in a position I liked, I selected them all (excluding the background layer), right clicked and created a pre-compose layer and gave it the name ‘text’. This brought all the layers into one, though when I double clicked on it I could still access all the layers within it. I copy and pated the third shape layer back into the composition menu and move it to the top.
- This layer is going to become a mask layer to the entire animation. Firstly I was to change the colour of the layer to something really obviously not part of the design. I chose bright green. This was so I was clear that it was a mask layer and not part of the design. Once the colour was changed I could see clearly where it was and I positioned it towards the end of the timeline, roughly where the shape of the text is just filled up.
- This bright green shape layer doesn’t need any further detail adjustments, though if I wanted to do something different I could have done. Because it was in a different place along the timeline (and so out of sync to the previous shape) I didn’t see the need to make any adjustments.
- Making sure the text layer was selected, I made it an ‘inverted alpha matte’, meaning that it will work out the previous animation as it rises up the screen.
- I then selected both layers and pre-composed them again.
- A nice additional detail to the design was the effect of rising bubbles inside the letters. To achieve this I added a new adjustment layer, and in the effects menu I searches for bubbles and click and dragged ‘CC bubbles’ onto my adjustment layer. I was able to change the setting to produce the size and shading that I liked, through pressing ‘t’ for opacity, I reduced the opacity of the bubbles as well.
- Using the ‘bubble amount clock’, I added keyframes along the timeline. Starting with an amount of bubbles, letting then increase in number, and then decrease to zero as the word disappears. This was the most challenging part for me, to get the right number of bubbles at each keyframe. The same as I did to the keyframes on the wave shape layer, I selected all the keyframes on the bubbles and pressed F9, for easy-ease, ensuring a smooth transition between bubble quantities.
- Finally, I duplicated the final text composition layer above the adjustment layer and turned the adjustment layer to ‘alpha matte’. This kept the bubbles within the text shape, like a clipping mask in Illustrator, and had a really nice overall effect.
To view this animation right click and open in a new window:
- Exporting my designs to a GIF was at first a much more fiddly process than I had thought and so I used a few websites to help me understand the process. First from Adobe Effects into Adobe Media Encoder, then export from Adobe Media Encoder as an mp4, import into photoshop, then export as a GIF at an appropriate size. This was a big learning curve for me as it was not something that I had done before but once I got the hang of it it became rather simple.
- Other challenges in this task were getting to grips with a new set of keyboard shortcuts. I also found myself trying to use keyboard shortcuts familiar to me on other pieces of software, however quickly found that almost every key seems to have a different but useful function in AfterEffects, once you know what they are. Becoming familiar with these shortcuts will be both useful, and important if I am to learn to work at a professional standard, which includes working accurately at an efficient speed. Shortcuts also help you to have greater control over your project.
- I also found adjusting keyframes and their default settings tricky to figure out at first as some of the ways of doing this changed with each effect, but I eventually enjoyed the process of combining multiple effects and learning how and where to position the keyframes.
This was my first time using After Effects and so all of the tutorials this week were extremely helpful in building my basic understanding of this software and developing some core skills to begin experimenting with different design ideas and the tools available. I found focusing on text and the available text effects a great place to start and it inspired me to try more advanced design ideas, such as the liquid effect I have presented here. I most appreciated the explanation of keyboard shortcuts as I didn’t find them as intuitive as other Adobe software and so it was really good to have my notes to refer back to to know the most efficient way of achieving each tool/command.
I found Juan Villanueva’s work really inspiring as an example of what is possible in After Effects and text animation. It is great to see real life examples of how the skills can be used and it encouraged me to consider how and where these ideas might be applied. Considering the application of my designs inspired me to think of potential audiences, and that inspired new ideas that pushed me to develop my skills further.
Something I very much want to strengthen is my control of keyframes and effects, this is something i’m sure will come as I spend more time on the software and understand how it works better. It will also take me a little while to figure out the shortcuts and discover all the tools and effects on offer but I was really encouraged by how quickly I picked up what I did this week and I look forward to using After Effects more in the upcoming weeks.
This was a really enjoyable week for me. Having started the week with no clue how to work this software, I am now really excited to continue projects that further develop and strengthen my skills and understanding of Adobe After Effects.
RESOURCES FOR RESEARCH AND INSPIRATION
My inspiration this week started with thinking about and looking at examples of text effects in movies and music videos, as well as GIFs. This, along with the work of Villanueva inspired me to consider the context and use of my designs. I also wanted to explore text effects that I have noticed recently and found appealing, this ultimately led me to my final design of liquid type. The two main videos I used to develop my final idea and learn how to export to GIF properly were https://www.youtube.com/watch?v=Ua8o_hs6Xko and https://www.rocketstock.com/blog/making-animated-gifs-from-after-effects-comps/. As I was searching on YouTube for a liquid effect tutorial I was amazed at the number of diverse and interesting design tutorials that there were and this inspired me to challenge myself to develop my skills further in my own time. Some of these tutorials I watched but felt my skills needed improving before I attempted and I am looking forward to going through some of them in the future, as each showcased a variety of ways in which After Effects can be mastered and help to strengthen my skills. Much of my research this week, however, was about learning a new piece of software and trying to get to grips with its basic functions within the context of the application of text effects. Working my way through the supplied tutorials enabled me to have a rudimentary understanding of what the software could do, and watching a variety of design ideas on YouTube inspired me to push my creativity and skills further.