An exhibition in the Department charting the development of Chinese type and type-making technologies.
Chinese typeforms are the visual form or shape of Chinese characters in a typeface. They reflect the function of reading Chinese and the aesthetics of Chinese calligraphy. Compared with Latin typefaces, the larger Chinese character set and the complexity and diversity of its typeforms have always presented a challenge to type makers, typeface designers, and typographers.
This exhibition charts the development of type and type-making technologies in China, from the invention of movable type in the eleventh century to the design of digital typefaces of today. It documents the rich variety of Chinese typefaces created in different eras using varied techniques and technologies, presented in high quality digital reproductions.
The exhibition is an abridged version of ‘Way of Type – Modernisation of Chinese typography’, originally curated by Jieqiong Yue and Zhao Liu, and is a collaboration between the University of Reading and the Central Academy of Fine Arts, Beijing. It represents the first exhibition in the UK featuring Chinese typeforms and type design.
Open weekdays, 10 am to 5 pm. Closed bank holidays.
Installation photos
‘Way of type – Evolution of Chinese typeforms’: introduction panel.Main exhibition. Early Chinese movable type (left wall), Chinese movable type in Europe (right wall).Main exhibition. Chinese founts of missionaries (left wall); Chinese typewriter (end wall), based on posters by Thomas Mullaney; Type design in modern China (right wall).Main exhibition. Double Pigeon Chinese typewriter. Donated to the exhibition by Mr Xing Li.Main exhibition. Typeface specimens and font production materials.Contemporary Chinese typography. Typeforms shown on screen and in Chinese-language portfolios.Contemporary Chinese typography. Fifteen-piece puzzle for constructing typeforms.Exhibition window graphics.
Credits
China team Academic chair: Di’an Fan
Curators: Jieqiong Yue, Zhao Liu
Coordinators: Xi Yang, Ping Ju, Liping Du, Yanan Zhang
Assistant designers: Kui Zhu, Yue Chen, Peilin Song, Congyu Zhang, Kushim Jiang, Yangzhi Duan, Tengqi Zhaoxu
UK team Academic chair: Eric Kindel
Curator: Xunchang Cheng
Visual designers: Xicheng Yang, Huati Wulan, Ahmet Berke Demir
Production: Geoff Wyeth
Special thanks Thomas Mullaney, Yiyuan Ma, Li Xing
Texts by Min Wang, Mingyuan Sun, Zhongxiao Cong,
Xunchang Cheng, Guoyan Ji
Guided by China Foreign Languages Publishing Administration
Organisers University of Reading,
Central Academy of Fine Arts,
China Center for International Communication Development
Co-organisers Department of Typography & Graphic Communication
Co-Innovation Center for Art Creation and Research on Silk Road of CAFA
Special thanks Hanyi Fonts,
Arts Committee (University of Reading),
Shenzhen Graphic Design Association,
TypeTogether, LiuZhao Studio
This project only consisted of creating one design, this design is my final piece. I began by researching leaflet layouts so I could understand the concept and layout of them to be able to create my own. I used a step by step tutorial on how to create a flyer linked here (https://helpx.adobe.com/uk/indesign/how-to/make-flyer.html) this gave me modern ideas and a good base layout to follow. My goals for this flyer was to create something people would be interested in reading, that wasn’t too much information that people would get bored. I feel like I did well by having a large image whilst having enough text for people to understand what the flyer was about and then when and where you can listen to this radio show. All of the information was placed into indesign using paragraph styles for headings and paragraph layouts and then character styles for bullet points and hyperlinks. I used shape tools to add an image into the flyer, the image I chose is of a man, however, I see it from a creative perspective, he looks as though he is thinking about something and that ties into the theme of rethinking. The radio topics are about rethinking fairness in education, religion and health, personally I believe this picture depicts that so simply. I used the type on path feature to curve the title to the image, I did this because it fit well with the shape of the image. By using bullet points and changing the colour of the dates I could make them stand out without having to make them a large type size that would not fit with the flyer. Finally, I took a screen grab from the bbc website so I could use the same colours for my flyer.
Colour swatch from the website.Character Styles I used to create my flyer.Paragraph styles used in my flyer.Clickable URL – linking to the website.Bullet Points used to help the dates stand out.
Modern flair element to remove negative space.
Software Tutorials
To help me with my design I used paragraph and character styles, at first I had to understand what the difference was between the two, character styles are best for lists or bullet points whereas paragraph styles works for paragraphs and headings. By watching this youtube tutorial it made me feel ,ore comfortable on my understanding of these styles and their purposes. I have very minimal indesign knowledge but our book project at the beginning of University helped give me a good level of understanding. This helped me to create order through my Title, headings and paragraphs. https://www.youtube.com/watch?v=3gW25FEVJlA
I also watched a tutorial on how to curve text in indesign using this tutorial (https://www.google.com/search?client=avast-a-2&q=how+to+curve+text+in+indesign&oq=how+to+curve+text+in+indesign&aqs=avast..69i57j0l7.4608j0j1&ie=UTF-8#kpvalbx=_S54XZO_JA8vXgQaprZboDA_30). This helped me find a new tool, the type on path tool which allowed me to write along the image I had previously imported, this is much easier than having to envelope or warp.
I also used a tutorial offered on the brief (https://helpx.adobe.com/uk/indesign/how-to/make-flyer.html). This tutorial allowed me to follow along each section and feel comfortable when following along. Being able to see how to input an image so easily and be given modern examples of designs. This is why I placed a blue rectangle along the introduction to give a contrasting colour and fill some negative space.
In the future I want to learn how to use parent pages in more depth for larger documents to allow for a faster and easier solution to creating documents. I would also like to improve my character style knowledge and further develop its purpose. My next idea will be to try and make a magazine to improve my indesign knowledge.
This source that I found helped me from beginning to end starting with the settings to get my A5 flyer and the circle for my image. Learning how to place text and get the right size and leading to ensure that my text is legible. I used the step by step guide from adobe and the youtube video to influence my flyer.
This tutorial helped me discover how you place bullet points into the flyer, I was very confused until I learned that you have to create a character style and then add a bullet point in and place your distance measurement.
https://www.bbc.co.uk/programmes/m000qx05
This is the link to the BBC website that I created the flyer for, by researching the business I was able to understand what the company does and what they expect from the leaflet. I saw that the three main colours featured on their website are blue, orange and fushia, I swatched these and tried to incorporate these colours into my flyer, however, I couldn’t seem to get a perfect match.
Learning throughout the Module
TY1SK had a quiz module and I struggled with a few questions, however, I have improved since the first time I took the quiz back in October which shows that I am learning from this module. Teaching ourselves this module can be difficult at times but it means that you learn a lot because it is the only way you will find out. In the beginning of the year I had no graphics knowledge but after 6 months of learning I feel like I am really starting to understand Adobe software. I have excelled most in illustrator because I have used it the most, doing the movie poster and the pictograms and now the leaflet as part of TY1DP1. I need to work a lot more on my photoshop skills because the only learning experience I have is from skills and it is very minimal, I believe learning to edit photos will improve my images for my essays. Finally, Indesign was extremely hard to learn, I learned how to create a penguin book in indesign which gave me the ability to understand how to use parent pages and paragraph styles, character styles, folios and much more, however, because I didn’t keep using it this knowledge had to be learned again. This module has really helped me understand different kinds of adobe software and improves my ability in class and assignments throughout other modules.
This Illustrator task encouraged me to explore how the tools can be used to manipulate letters in various unique ways.
Design Idea 1
In this letter logo, I focused on using the envelope distortion and pen tool. I began by drawing a custom shape which then warped the initials into a distorted shape when clicking the envelope distortion tool. Duplicating these initials and positioning them above the original set of letters afterwards, resulted in an aesthetically pleasing letter logo.
Design Idea 2
In my second design, I combined two different fonts together, Savoye led plain and Srisakdi. I further experimented with various line weights and colour combinations using the colour swatches and used a brush definition of a charcoal feather for the initials to highlight them as the focal point.
Design Idea 3
My third design for this task I believe is my most successful as it allowed me to expand my skills within illustrator even further and shift my design skills out of my comfort zone by using the curvature tool to a higher standard and through using the transform tools to complete the logo.
I began by adding my letters which were written in a serif font and made these letters outlines to allow me to change and adapt the format/shape of the letter entirely.
After manipulating both letters I discovered that the letter D due to having an internal shape within the centre led the letter T to looked very different in comparison so to resolve this issue I added a triangle shape into the middle of the T and used the curvature tool to match the T with the curve style seen in the letter D.
This design task allowed me to experiment with the colour swatch palette, I attempted to experiment with extreme colours and display how contrasts can be used to bring out the contents within a shape. I approached this idea by filling the circle shape with a bright red colour as this brought out both the colour black and white used for the letters.
Then I duplicated the 2 letters and altered the size of the letters and positioning using the transformation tools resulting in a more appropriate layout for a letter logo.
To complete the logo, I added another eclipse shape with a weight of 2pt compared to the outside eclipse which had a weight of 5pts, this helped develop the logo even further. This design idea for the task is the most effective as it shows a range of variations between layout, shapes, and line thickness
Software Tutorials
As I was unfamiliar with creating letter logos, I watched a range of tutorials to assist me along with some articles which helped me gain knowledge on various transforming methods in a step-by-step format. I began with learning the basics which involved warping text into a simple shape using the envelope distortion tool, the tutorial began with displaying how to transform the text into shapes such as a triangle or an eclipse. However, I wanted to also learn how to warp text into a custom shape within illustrator which I grasped an understanding of through another youtube tutorial. This not only explored how the envelope tool is used within the process but also how the transform tool and the direct selection tool can be used to create unique shapes which results in a creative displacement of letters. Another tutorial I watched showed how to create outline fonts in illustrator, this helped me expand my text skills further as this turns the letters into individual shapes which can be directly manipulated when using the direct selection tool. This tool shows various anchor points which are included in the piece of text, displaying what can be changed, distorted, etc. A software skill I would like to learn in the future is creating 3D type, this can be done through making a 3D drop shadow and by adding various textures, and gradients which bring the text further out of the page. I believe this would allow my skills to be able to develop further as I could combine both the 3D drop shadow with the warped text which uses the envelope distortion tool.
Design resources and articles
I read a design article to expand my knowledge on the various text effects in Illustrator, the article described how the effects can influence the texts shape, format, or overall look. The article influenced me to see how each of the 3 designs could use different formats, effects and colours which would result in a unique, contrasting letter logo which shows contrasts when placed aside different type logos.
After seeing one of the text effects included in the article titled grainy & shaded type it encouraged me to change my type in my second design to use a brush definition of a charcoal feather. This led the initials to seem printed/painted on which I believe could bring curiosity if seen by audience members as this effect contrasts with the computerised lines created with the pen tool.
An additional article I read was on warping text which provided me with tips, one being on adjusting the spacing between objects before wrapping the text and use a clipping mask when you want the text to flow around a complex shape, such as I the one drew in my first design idea.
Learning throughout the module
Throughout this spring term module, I have increased my knowledge of using adobe software and this is reflected in my quiz results improving from last term’s. However, I did guess two of the answers within the quiz which asked questions on more advanced technicalities within the adobe software, such as, what to save certain files as, so to improve I will research each of the software’s pre-sets and save settings.
Last term I also received feedback to explore vector-based work, I believe I successfully achieved developing my skills within this area by choosing a task which specifically asked for vector objects to be drawn. I will push myself to continue to explore using vector-based work in the future.
Within the module, I learnt how to add guides within InDesign which assisted me in creating a layout of a table, this task pushed me to improve my text formatting skills in an eye-catching and striking way. If I was to improve my work created this term, I would create a timetable which does not use any lines and has a minimalistic style, this is because this format would be a complete contrast with my other table.
My first design idea for this task was to combine black and white with coloured elements. Nearly all the images used are my own that I had taken before, so I decided to pick the one that would be most visually interesting using this effect. Therefore I picked a photo that had red elements which I felt would really stand out against the black-and-white filter. In order to create this effect, I used one of the tutorials provided in the brief by adobe, which explains how to combine black and white and colour elements without destroying the original image. My second design idea was to edit an element of an image to manipulate reality. My thought process was to cut out the inside of the tree, using the quick selection tool and replace it with an image of a snowy landscape, to make it seem like the tree leads to another place. My third design idea was to remove the background of an image to again, manipulate reality. My idea was to use the quick selection tool and layer masks to remove the background and replace it with an image of a starry night. However, I feel my most effective design is my fourth idea which was to distort an image by adding a glitch effect.
For this design I watched a tutorial I found on youtube to help me create the effect. I started by turning the image into a smart object and then decreasing the saturation so that the image appears black and white. I then duplicated the image and adjusted the colours in the advanced blending options.
Decreasing the saturation to make the image black and white.
I then moved the top layer to the left slightly to reveal a glitch effect.
Adding the glitch effect.
I then wanted to add more distortion to the image by selecting sections of the image and adding a wave effect.
Using the wave tool.
I then selected more sections and pulled them out to make the image look cut in and out of, and below is the final result.
End result.
Software tutorials
For my first design idea, I used one of the tutorials provided in the brief by adobe, which explains how to combine black and white and colour elements without destroying the original image by using layer masks. I found the tutorial useful as it provided step-by-step images with short descriptions of what to do underneath, which allowed me to go at my own pace. For my second design idea, I watched another tutorial provided in the brief which explains layer masks and multiple non-destructive ways to edit an image. I found the tutorial useful as it provided me with useful knowledge on the multiple ways I can use layer masks that I didn’t know before. For my third design idea, I used the tutorial provided in the brief on how to use layer masks to remove a background using the quick selection tool. The tutorial also shows how to deselect an area with the quick selection tool by holding down the alt key, which I found very useful. I also used my own tutorial I found on youtube to help create the glitch effect on my fourth design idea. The tutorial goes through how to convert a layer into a smart object and how to change the colours in the blending options to create the layered glitch effect. You can access the video here: https://www.youtube.com/watch?v=QWiKrixVSbM.
Design resources and articles
Additional resources I used include an article I found online that goes through the different ways you can edit photos on photoshop. It goes through all the different elements from adjusting colour balance to using the spot healing tool. You can access the website here: https://www.zdnet.com/article/how-to-use-photoshop-in-5-easy-steps/. This website helped refresh my understanding of photoshop as I hadn’t used the software in a while and had forgot some of the basic tools and adjustments
I also used this article: https://blog.flipsnack.com/30-fully-editable-magazine-layouts-to-help-you-out-of-a-creative-rut/ to help me with my magazine double page spread. The article helped me understand the basic arrangement of a double-page spread and what common components appear.
I also used the website pixabay to add any extra images I didn’t have in my camera roll, such as the starry night image.
Learning throughout the module
Overall, I have now learnt how to edit images in photoshop without destroying the original image by using layer masks. I have also learnt how to use guides in InDesign to help me layout my work in a neat and concise order so that all my image and text elements are aligned properly. Furthermore I learnt how to use After Effects which is a completely new software for me. I now know how to animate text, how to add shapes, how to add effects through adobe bridge, and how to create gifs through media encoder. In addition, through my illustrator task I learnt how to over lap letters, how to re-size letters and how to create 3D text in illustrator, all through researching and watching different tutorials on YouTube.
Having used After Effects very little before this task (under 2 hours), I wanted to make sure my design ideas covered a wide range of skills and complexity. I needed to develop my software skills in After Effects so that I could better understand the programme. My first design idea was a simple fade from black to orange, and I experimented with some basic text animation.
My second design idea was much more refined, making use of more intricate features such as layer mask and smart animating the text to create a custom effect.
My third design idea was based upon my experiences from existing media. I remember seeing an advert on YouTube for a speed reader that had words flashing in the same place. I liked the effect it caused, it was memorable and got the message out very quickly, in an understandable manner for any audiences.
I think my most effective idea was the second idea, although I liked the third one the most because I made it without a tutorial, which meant it was rewarding when I encountered problems and solved them. Design idea 2 made use of some more intricate features of Adobe After Effects, such as utilising layer masks and animating objects. The design featured the title of the podcast, ‘Type Talk’, and from behind that the words ‘a podcast’ emerged. The tutorial I followed for design idea 2 taught me how to use layer masks to create layering effects in After Effects, encouraging me to play with the settings when animating with the mask applied. I considered the use of colour in my design, with the title being more dominant as white, and the extra info being dark grey. This created an interesting composition because the focus of the gif is on the moving object, however the colour hierarchy suggests that the focus should be given to the title, which was not animated.
I began the process by making shape layers and adding text [fig 1 & 2]. I needed to get all the design elements on the page before I could start animating. I added the line in the middle as a shape, and the text where I wanted their final positions to be. I followed a tutorial explaining how to set up and use layer masks and the track matte feature [fig 3 & 4]. This allowed me to use the animation features [fig 5], hiding the secondary text behind the primary text, creating the effect of the secondary text sliding out from the white line in the middle [fig 6].
Creating a shape layer [fig 1]Editing text in the character panel [fig 2]Creating a layer mask [fig 3]Using the track matte feature [fig 4]Using the animation features [fig 5]Using layer masks to hide the secondary text [fig 6]
2. Software tutorials
I primarily used software tutorials to develop my technical ability. I had minimal experience of Adobe After Effects before this task, so I used tutorials to speed up my learning curve. In the first design that I created, I used the fade tutorial to show me the basics of adding effects to objects and how to make two effects run simultaneously. (After Effects CC : How to Fade in and Fade Out) This tutorial helped me understanding how to apply effects, and to begin to understand how to use keyframes to change an effects properties.
For my second design idea, I chose a more complex animation to create, but chose one with a tutorial I could follow closely. (After Effects Simple Line Text Reveal Intro Animation Tutorial ) This would allow me to understand some of the more complex features of After Effects, further developing my software skills so that I could create my own animation without any help from tutorials in my final idea. I also had to use tutorials to help me solve smaller technical issues, (How to Enable Track matte in after effects CC) such as when following the text reveal tutorial, he had an option selected that was showing track matte, but I had to click on some buttons to be able to access the track matte feature.
The most comprehensive tutorial I followed was the After Effects Simple Line Text Reveal Intro Animation Tutorial, as it had chapters describing what was happening in which part of the video, and that enabled me to return to the video to see what I did not understand fully and have a recap. One area of the video highlighted that I did not understand was using the graph editor on individual keyframes. Consequently, if I wanted to develop my After Effect skills, I would look for a more specific tutorial or article explain how the graph editor works.
3. Design resources and articles
As I stated earlier, I had little experience of using After Effects before this task. I used the articles below to refresh my knowledge of what After Effects was used for and what it was capable of. Both articles proved useful in explaining to me what After Effects did, making me feel like I understood its capabilities more. Consequently, this meant I felt more confident in creating my GIFs, either when following a tutorial or creating my own idea.
I used this forum to help me solve a specific problem I was facing. When trying to create the desired ‘buzz words’ effect for my third idea, I was struggling to apply the animation correctly. The forum below helped me correct the animation, meaning I could edit how fast the buzz words appeared.
My inspiration for ideas was based upon general media that I had seen before. The third idea, which I believe was my most independent and creative idea, was based upon some previous advertisements I had seen. I cannot remember the brand, but it was for a speed-reading tool that made text you were reading appear in the same place. The theory of the advert was that you could read faster when words flashed in the same place, upping your words per minute. I remember thinking the effect was successful and wanted to replicate it in one of my designs.
4. Learning throughout the module
Throughout the module, I definitely improved my skills in After Effects by a large margin, improving a wide variety skills. I began the module with little experience and ended it with three pleasing designs and several extra hours experience spent using After Effects. I learnt how to perform basic functions like adding layers and editing keyframes, as well as exploring more complex features such as using layer masks and combining that with an animation.
On a broader note, I noticed an increase in my results on the scored quiz between the start and the end of the module, as well as an increase in confidence in my ability on certain areas in the quiz. I would say that overall, this module was a success as I developed my technical abilities significantly. I feel that sometimes I could have made more coherent designs, however when remembering that I was deliberately choosing areas of design that I am weaker at, I am pleased with my designs.
Sue Walker and Josefina Bravo have produced guidance in the form of a toolkit and a dataset for the design of instructions to support home and community diagnostic testing. This derived from the AHRC-funded Covid Rapid Response project ‘Information Design for Diagnostics: Ensuring Confidence and Accuracy for Home Sampling and Home Testing’. The work was also support by funding from the University of Reading’s Rapid Response Policy Engagement funding from Research England, which enabled consultation with research users and implementors of the toolkit.
The toolkit, organised in 5 sections provides guidance on writing, visual organisation and how to engage with your users.
User-friendly point-of-use instructions for home use diagnostic tests provides evidence-based guidance and tools for manufacturers of tests, service providers and content and design specialists who produce instructions to accompany diagnostic tests for home and community use.
The toolkit, organised in 5 sections provides guidance on writing, visual organisation and how to engage with your users. A related data set includes templates and illustrations for download and use.
The resource includes templates and illustrations for download and use
This exhibition, now open in the Department of Typography & Graphic Communication, explores the concept of the male gaze in twentieth-century British illustration, and is curated by Cătălina Zlotea.
The exhibition analyses the work of the British illustrator, Charles Mozley (1914–1991), through a contemporary lens. It does so by foregrounding two female stereotypes depicted in advertisements, ephemera, and fine art lithographs made by Mozley between the late 1940s and the early 1980s. The exhibition arrangement creates contrast and conflict between the image of the middle-class “virtuous” woman – a virgin goddess placed on a pedestal – and the “loose” woman – an anonymous sex object signalled through hair colour and scanty clothing. This female presence, recurrent in Mozley’s work, demonstrates the quality of the artist’s draughtsmanship while connoting middle-class masculine virtues, follies, and sexual desires.
The exhibition is open weekdays, 10 am to 5 pm. Closed bank holidays.
About Charles Mozley
Charles Mozley was born in Sheffield where he studied painting and drawing at the Sheffield College of Arts and Crafts. In 1933 he won a scholarship from the Royal College of Art and moved to London to study painting. After graduating, he taught life drawing, anatomy, and lithography at Camberwell School of Arts and Crafts. Following the Second World War and for the rest of his career, he worked as a freelance artist.
Prolific and versatile, Mozley was among the artists commissioned by Frank Pick and Jack Beddington for prestigious London Transport and Shell-Mex advertising campaigns. He also created designs for the advertising agency Colman, Prentis & Varley, for theatre and film production companies, and for many British publishers. He painted a mural for the Festival of Britain, contributed to the popular “School Prints” and “Lyons Lithographs” series, and produced ephemera for restaurants and the wine trade. Alongside commercial work, Mozley continuously painted, made prints, and exhibited in solo and group shows.
The long list of commissions, as well as the works held by the Charles Mozley Trust, provide evidence that Mozley’s pictures were widely seen in Britain in the second half of the twentieth century. As Nicolas Barker has remarked, Mozley’s work is “a graphic-mirror of the post-war era”, making it a valuable resource for the study of visual culture.
Credits
Curator: Cătălina Zlotea
Exhibition design: Cătălina Zlotea, Hannah Smith
Exhibition consultant: Eric Kindel
Archive consultant: Sallie Morris Production: Geoff Wyeth
Thanks to the Charles Mozley Trust, which has supported this exhibition and the doctoral research by Cătălina Zlotea that informs it.
Installation
Selected works by Charles Mozley highlighting key projects.Overview of the exhibition space contrasting the “loose” woman and the “virtuous” woman, as subjected to the male gaze.Illustrations by Mozley depicting the “loose” woman.Illustrations by Mozley depicting the “virtuous” woman.
Photoshop is arguably one of the most popular pieces of design software, used by over 90% of professionals. In the industry, photoshop is primarily used for small clean-ups and corrections, but what can we do with it when unrestrained and opened up to a new plane of imagination?
Design ideas and design process
Design 1
Final Edit
For the first edit I wanted to make sure I had a good grasp on the tools I learned from the ‘Editing Images’ task. I decided to make a collage style image so that I could focus on each of the individual elements, and then putting them together. To begin, I created a new fill layer on the document, and set the colour to a dull yellow colour. Then I needed to create the arch shape, in order to do so, I used the shape tool to draw a rectangle and circle then combined them to create the arch. Next, I created a new layer and made the fill a light sky blue and used a downloaded brush to paint clouds, effectively making a sky background. To apply this only to the arch, I masked it by selecting the blue layer and holding down option (alt), which gives the option to create a mask that only applies to the layer below it, in this case the arch shape. Now that the background was complete, I inserted the main subject. I did this by using the select subject feature on the original image, then copying the selection into my main document. To get his elbow outside of the arch, I created a layer mask and used the brush tool to erase the corresponding mask area. For the flowers, I decided to go with pink and white as they provide a nice contrast to the background while also complementing the subject’s shirt. I places the flowers in and arranged them in a way that frames the subject. To create some depth, I repeated the same steps as before the bring the areas of some of the flowers forward. As a finishing touch I added some text as there was a lot of lank space, as the subject is a member of a group I like, I added some text relevant to that aspect.
Design 2
Final edit
After refining my skills with my first edit, I decided that I wanted to try and create something more complex and more diverse in terms of the tools that need to be used. Whilst looking for tutorials I came across one on how to make a flower face cut out image and chose to follow this one. I started by importing the photo into photoshop and using the pen tool to draw paths around the areas that I wanted to cut out. Then I right clicked on the path and chose ‘make selection’ then pressed M for the marquee tool make the path into a selection, after this I right clicked again and chose ‘copy via cut’ to separate the selection from the main photo. I also created a solid black layer under the original photo to serve as a background for the cut out areas. Next I used a bevel & emboss effect in the cut out areas to give them more depth. I then placed in the flowers I wanted to use and changed the hue and saturation of them so that the colours and brightness would match well with the purples and blues in the photo. I arranged the flowers as I wanted them to appear in the edit, then went to the main photo layer, held down control and clicked on it to create a selection, then went to my flower layer and created a mask on it and pressed control + I to invert it. This allowed me to then use the brush tool to paint over parts of the flower that I wanted to appear i front if the photo, to create the effect that the flowers are growing outwards. To finish it off, I reselected in the visibility for the cut out parts and readjusted them in a way that was distinguishable from the rest of the face, but not too isolated.
Design 3
Final Edit
This edit is far simpler in comparison to the first two, however I thought it was important to not only focus on changing the main subject if the image, but also pay attention to the background and how it can alter the impression a photo makes on us. I started this edit by cropping the original image and placing it into photoshop as well as the new background on another layer. I then went to Select > Select and mask, then pressed select subject, this selected the person in the image, I could then use the sliders to refine the selection if I wanted to. This then created a mask which isolated the subject and brought it in front of the new background. Now I had to change the lighting of the subject to match the background. I did this by going to Filter > Neural filters > harmonisation, which analyses the two images and adjusts them to match. However after applying the filter I wasn’t satisfied, so went back and adjusted the saturation and CMYK sliders until I was happy.
Software Tutorials
As I have no prior experience with photoshop, I mainly used lengthier Youtube tutorials that went into more depth and explained each tool. I had no confidence with the tools, however after watching and following the tutorials, I feel that my skills have made a significant improvement.
As the first edit built practised knowledge I learned from a different task, I did not use a tutorial so that I could make sure I actually understood what I was doing.
This tutorial on how to make a flower face image guided me through the second edit. It mainly utilises creating masks from specific selections so that they can be added to or subtracted from, for example when choosing how much f the flowers I wanted to have ‘outside’ of the face. The tutorial was very clear and showed the progression through each step well, so it was easy to follow along and see the effect of each step which was a major aid in learning about what he use of each step was.
Changing a background of an image was much easier than expected thanks to Adobe’s analysis software, Adobe Sensei. This has made things such as selecting the main subject or the background of an image much easier, and needing less fine tuning from the designer themselves. This also applies to matching the lighting of the subject to the new background using the neural filters. Even though this technology is making these editing process much easier, it is still important that we implement our own flair and opinion, for example when using the harmonisation filter, I did not think Adobe’s result worked, so had to make adjustments myself.
In future projects, I would like to begin using tools that I have not used in this task, and explore further into the full range of photoshop’s abilities.
My sources of inspiration for these edits were these projects that I found on Behance while looking through the ‘Photoshop’ tag. I really liked the first two images as they caught my eye straight away with the bold colour palette and layering of the different layers. This helped inform my decision to implement this effect in my own design, as well as the the bevel and emboss feature that is used on the skin cut-outs.
The second two photos are my inspiration for my third edit. I found the one with the mushroom was so fun and really tells a story just from one picture. On the other hand, the cloud edit is dramatic in a way that leaves you to think, and the way the lighting matches both the person and the background made me want to try and achieve that effect in my own work.
Learning across the module
As a whole, this module has immensely improved my design skills and sparked new interests in different softwares. The first part of the module began to develop our understanding of each piece of software, and now we have developed our skills and are practicing them as professional designers would. I think this development is really shown throughout my work, not only in the final piece but especially in the process, the steps that I am taking to reach the end goal have become more refined. This shows me that I have achieved one of the goals I set for myself at the end of the first submission: “I feel that I need to improve my efficiency in using the program by learning more keyboard shortcuts past the realm of basic ones like the selection arrows and the pen tools”. The other goal for myself, “I would also like to improve on the way I view my own work, because at times I find myself being caught up in details that don’t end up being necessary, and trying to overcomplicate designs to make them look more complex when they don’t need to be.”, I think I have improved on this, but have yet to fully conquer it, though this only means I have more opportunities to learn.
For the Illustrator task of drawing vector objects, we had to create a social media banner for the podcast by Yaa Gyasi: Homecoming. The first thing I did in the design process was research more into what the podcast was about. After seeing that this novel turned podcast spanned over 300 years following the lives of two sisters and the generations below them and their struggle with slavery, it was important to me to portray these themes in the advert of the banner. I also had listened to the start of the podcast to help me better understand the project I was designing.
My next step was to look at other examples of the cover of both the novel and the podcast. Although there where a couple of different variations of them, one commonality throughout was the use of the warm red, yellow and orange colours, particularly in the herringbone pattern. I decided this was something I was going to implement in my own design as to keep it recognisable to the podcast and to follow the brief whereby it should complement but not directly copy the cover design.
Creating a Silhouette Using the Pen Tool
My first idea was to use the cover on a different layer to use the pen tool to create a silhouette of the character on the cover. At first I had just outlined the head, however with the key theme of the podcast being slavery and oppression, I wanted to add in the shackle around her neck as I felt this was an important feature that creates necessary tension within someone seeing the design.
Software Tutorials
Editing the Anchor Points
One problem I encountered when using the pen tool was that I was struggling to get a perfect circle. To fix this instead fo using the pen tool I watch this video https://www.youtube.com/watch?v=lZZ0iYmgmvc which details how to use the pathfinder tool to combine objects. To achieve the final look I created an ellipse which I then combined with the illustration of the silhouette.
Although I found this effective, I still wanted to learn how to create a smooth ellipse using the pen tool as knowing how to do a task multiple different ways would come handy in the future. I read this article https://helpx.adobe.com/illustrator/how-to/draw-edit-curves.html and attempted to draw the ellipse and then covert and edit the points to create the same smooth effect which also worked however I find was a longer way of doing this.
Design Resources and Articles
Creating a Grid for the Pattern
Including the one mentioned above, I read different articles throughout this task to help not only refresh my knowledge on illustrator but to also learn new skills. One of the first ones I read was from the brief: https://helpx.adobe.com/uk/illustrator/how-to/drawing-tools-basics.html which really helped me form a basis of where to being on illustrator and what tools to use such as the pen tool which was the first tool I chose when creating this design.
As mentioned on my Trello board, I struggled with how to achieve my desired output for the pattern of the design. First I wanted to do this by drawing vector objects however realised this would be time consuming and ultimately lead to disproportioned blocks. https://creativebeacon.com/make-easy-grids-in-illustrator/ This article helped me create a grid that I could use to make it look as though the thoughts and feelings of the story are represented in this feature of the design as they are then coming from behind the silhouette of the head, or ‘her mind.’ Alongside this I used this video https://www.youtube.com/watch?v=bwaG6n37i2k to help me understand how to fill in certain portions of the grid with the different colours from the original cover.
Learning Across the Module
The skills I have learnt from this module can been seen throughout all of the different softwares. I feel more confident in Photoshop and Illustrator, particularly in Photoshop when it comes to editing and removing objects from pictures. This was the focus in my week 3 plan and I am happy with the outcome I produced whereby the feedback I received from peers was that the removal of the arms from the photos was very successful.
When comparing the quiz results I can see that my understanding of what software to use for each project has improved as this was something I identified as a weakness at the start of the Autumn and Spring term however now I feel I can confidently decide what software to use for when. One thing that the last two quizzes picked up on is that I need to work on are the specific features of the software such as what colour settings are best to use e.g. RGB and CYMK, along with how different resolutions affect the work. I feel as though this knowledge is something that can be easily learnt compared to learning all the different tools and what can be achieved in each of the softwares which will take practise to learn. In the future I am going to read more articles and watch videos on understanding colour schemes and basic document setups for adobe software as I think this will help me.
Whenever I start a new project I like to look at ways that other people have gone about similar projects so i started off by looking on sites like pinterest to see how other people had designed stickers. However when I looked there wasn’t any stickers that were advertising anything similar to what i wanted so i had to experiment quite a bit by myself. I brainstormed a few ideas and the ones that I ended up going with follow,
Idea One
This was my initial idea for the sticker design. I’m not too sure what gave me the idea to make a sticker of a sunset at the beach for a typography and graphic design podcast but i dont think that it works as well as a sticker as either of the other designs do. I think there is too much going on in this design to be at such a small scale too. these are both things that i keep in mind for my future designs and I think that those ones the mistakes that I made in this designs are less apparent.
Idea Two
For this design I decided to go with a very generic image for the middle with circular text going around the outside. I think that this design looks a lot more like a sticker than the original design does and it is a lot better scaled for its use. I also used a lot less colours in this design, limiting myself to just two colours. I also decided to use a very boring sans serif font to make sure that it was legible because I knew that I was going to be putting it along a circular path.
Idea Three
For this design I decided to use a more abstract shape for the outline that I think would work well as a sticker as it is all composed of smooth curves. I was initially going to put the text filling out the whole sticker but I then decided on having a few more layers around the outside that I used a gradient to colour. For this design I decided to use a few more colours than i did for the last design but they all look quite similar because they are all different brightness of the same colour.
Software tutorials
I am going to explain the process to making the wavy text effect i used for my last sticker design idea. To begin i make a curvy shape using the pen tool that vaguely resembles the words that i want to fit into it. In this case i had a smaller word between two much longer words so i was going to end up with white space anyway. Once you have created your shape you then need to write out your text. I find the effect to look better when you use text that is too big for the space that you are trying to fill, like in this image.
This means that when you use the effect the space will be filled in much better. You then need to make sure that the shape is above the text so that the effect works. Finally to make your text fit into the shape that you want it to you need to select all of your text layers and the shape that you are trying to put the text in and then select Object > Envelope Distort > Make With Top Object. Then your text should fit itself into whatever shape you had selected. You can then edit the shape using the Direct Selection tool if there are any changes that you want to make to the shape.
