University of Reading cookie policy

We use cookies on reading.ac.uk to improve your experience, monitor site performance and tailor content to you

Read our cookie policy to find out how to manage your cookie settings

Typography.Network

Read about our latest teaching, research and events on our blog Typography.Network.

 

Visit Typography.Network

Exploring Filters and the Brush Tool in Photoshop
3/25/2021 6:22 PM

Design Ideas

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.

Design Process

Design 1 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. Design 2 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. Design 3 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.

Software Tutorial

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. https://youtu.be/olxy6AH73Go 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. https://youtu.be/nJxM5V40_0c 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. https://youtu.be/Q7MnXostsac 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

https://mymodernmet.com/dogs-playing-poker-painting/ 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.

formatting a flyer in indesign
3/25/2021 5:41 PM

Design ideas

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. [caption id="attachment_17563" align="alignnone" width="211"]first design draft sketch first design draft sketch[/caption] [caption id="attachment_17570" align="alignnone" width="290"] first tester vector graph shape[/caption] [caption id="attachment_17571" align="alignnone" width="236"] second vector sketch to have a good idea of the outline, here i realised i didn't want to develop it further[/caption] [caption id="attachment_17572" align="alignnone" width="300"] initial full colour background before text[/caption] [caption id="attachment_17573" align="alignnone" width="300"] font tests including testing typing along a line[/caption] [caption id="attachment_17574" align="alignnone" width="300"] initial final design used white headers, i later changed this to yellow[/caption]

Design process

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. Page 1 of my final flyerpage 2 of my final flyer

Software tutorials

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.  

Creative Images – Photoshop
3/25/2021 5:13 PM

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.     DESIGN 3 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.   SOFTWARE TUTORIALS 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 https://www.youtube.com/watch?v=uBFmcKfkeTE 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 https://www.youtube.com/watch?v=rAzM_MRwN-U 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   https://www.youtube.com/watch?v=emEhCdnrn_U   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.        

Pronounced Monograms
3/25/2021 4:58 PM

Produced using Adobe Illustrator.   Overview: 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.   Software tutorials: 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.

Homegoing
3/25/2021 4:39 PM

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.

Software tutorials

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.