Thursday 9 May marked the opening of the exhibition designed by Aaron James and Olivia Moors for the Global Goals campaign. Displayed in the University library were posters promoting the 17 Sustainable Development Goals, designed by Part 2 students in the Department of Typography & Graphic Communication. The project originated form a professional relationship between sessional lecturer Greg Bunbury and Project Everyone, a charity led by Richard Curtis.
The exhibition allowed students from across the University, not only our own department, to see the hard work the Part 2s had put in to bringing these goals to life. It was extremely rewarding to be able to see our own work on display for everyone to see. The opening event also allowed us to get a feel for how our posters could connect to the viewer, seeing how well the message came across, watching faces react, and hoping the work inspired change in people’s thinking or actions.
At the opening, there were short talks from James Lloyd, Eric Kindel, Greg Bunbury, and Hannah Cameron from Project Everyone. Everyone was sure to congratulate the students on their work, especially Aaron and Olivia for their contribution to the exhibition itself. But what stood out to me were Greg Bunbury’s words. He talked about creating work that means something. Creating work with a message. He mentioned that you should always create work that you care about, and that you believe in. I feel that this was the most important part of the project for the designers involved. We had the chance to create some meaningful work possibly for the first time, with the intention of getting a real message across. And through this exhibition, we were able to see the impact those messages can have.
Students and visitors exploring the impactful work
I’m Ethan Nunn, a first-year student on the BA Graphic Communication course hear at Reading. As part of our TY1 SK module, we were asked to reflect on one of our self-selected tasks we’ve been working on for the last few weeks; I have chosen to write about what I’ve learnt about Photoshop, especially in developing creative images.
I’m unfamiliar generally with developing creative images; I see myself predominately as someone who uses such images, not create them. Thus, my knowledge of Photoshop’s more creative features is lacking substantially. This week, I’ve chosen to start correcting this, to develop a breadth of knowledge across all of graphic communication.
Design ideas and design process
In this task, I had to develop three different designs – they’re shown below. In this article, though, I’ll be dealing with only one – design idea 3.
Design Idea 1
Design Idea 2
Design Idea 3
Design Idea 1 was used to develop skills related to curves and image editing generally, with a specific focus on colour in images.
Design Idea 2 was used to develop skills related to Photoshop’s Patterns feature, and also to develop skills related to Smart Objects and Filters.
Design Idea 3 was this design idea, and will be spoken about at more length in this article.
I’ve selected Design Idea 3 as the focus of this article as it contains by far the most interesting inspiration and goals besides technical improvement in Photoshop. Read on!
Design idea 3: Inspiration
To begin with, let’s talk about inspiration. I was inspired predominately by a YouTube video I’ve recently watched – Dots by Posy, available here here on youtube.com. Below are a few stills that served as particular inspiration, from the same video:
Inspiration 1 – CMYK halftone dots viewed under a hyper-macro lens.
Inspiration 2 – CMY halftone dots viewed under a hyper-macro lens.
I was also inspired, for this task, by a love of magazines, especially Emigre. The Emigre magazine was published between 1984 and 2005, and was known for its incredibly adventurous design, as well as its more nuanced debate around the interaction between writer and designer. One of our tutors, Eric Kindel, wrote an introduction to a the magazine and the discourse surrounding it in 2017 to promote the Department’s then-running exhibition – it’s well worth a read.
Specifically with Emigre, I was inspired by the enormous blocks of both type and graphic that drew attention to the chaos of the page layout. The rectangular blocks, however, still succeed in bringing some hierarchy to the page: clearly there is a grid involved somewhere, and across pages articles generally remain in the same place and in the same type.
Page 6 of issue 11 of Emigre magazine (actual page number 8), showing clearly large blocks of type and graphic “getting in the way” of reading the numerous articles printed on the page.
I set about designing an image that adopted the same principle of Emigre in that the work of the designer is above – not below – the content that it works with, but in a pictorial sense. I also wanted to include some referencing to colour halftones.
Design idea 3: Process and tutorials
I started out by assessing which photograph I wanted to use. Eventually I settled on this photograph that I had taken over the winter break of Balfron Tower, located in Tower Hamlets, London, showing detail of its lift shaft. I liked particularly its perspective and colour palette, which is typical of a building in the brutalist style.
My original picture, showing the top of the lift shaft of Balfron Tower, London
I then considered how I – as the “designer” – could become more involved in the photograph. I firstly considered cutting out the photograph using Select and Mask. I used this tutorial to remove the background of the photograph.
The process of using the Select and Mask tool to remove the blue background
But although this was the most obvious tool, it did not really inspire me – maybe because the background gave the photograph that rectangular framing that used to such a great (and successful) extent in Emigre. In addition, the magazine did unexpected things; removing the background was expected.
Reconsidering it, I came to an understanding – via its brutalist architecture, Balfron Tower represents equality – each floor is laid out the same, and the exterior finishing is the same across every storey – yellow-grey stonework. I thought, therefore, that it might be interesting – and unexpected – to undo the removal of the background and select the only thing in the photograph that isn’t the same – the lift machinery at the top.
To select this part of the building, I used an entirely new tool – the Quick Selection tool (specifically, Marquee Quick Select), using another tutorial I found online. Dragging a rectangle shape over the lift machinery was a simple-enough operation – more difficult was the operation of refining the selection, which I needed to do with the brush tool.
Using the Quick Select tool in Photoshop.
I then created a new colour fill layer and set the layer blend to Darken, after reading article on using blending modes. I was extremely happy with this result. Although I experimented with other colours, in the end I chose a full red: the contrast against the sky worked particularly well to create discomfort in the viewer and achieve the aim of not meeting users’ expectations.
The colour fill being applied to the mask made from the selection; layer blending mode: Darken.
It was time now to insert the colour halftone layer. On the day of designing this poster, I had come across an extremely large billboard; approaching it at a human scale allowed me to take a close-up image of the CMYK dots the printers there had used. I cropped, distorted and enlarged (all three activities being outside the scope for explaining in this blog post) such that I had the following image:
The overlay image source, cropped and edited for exactly this task.The final layer tree for the file.
Applying it to the image that I had achieved an incredibly effective result, and resizing and moving the image, as well as setting the blending mode to pass through, yielded the final design idea, which I was extremely happy with.
The final design idea for this task. I believe it hits my aims reasonably well, but the colour halftone perhaps overly takes over the image and excessively removes the users’ understanding.
Reflecting on the design process and my knowledge of Photoshop
My knowledge of Photoshop has definitely increased since I started this task, and I suppose that the idea of going against the norm – through the inspiration provided to me with the Emigre magazine – helped that pheonomenally. I explored masking, selection tools and different types of fills; and perhaps, to me, the most confusing part of Photoshop – blending layer modes – is finally figured out.
Whilst I am happy with the final outcome, and have technically learnt lots, I am unhappy that the dots from the halftone effect perhaps excessively remove understanding from the user. It is a fine balance when positioning oneself as the middle person between the author and user, and here I feel as though I got somewhat carried away in the design I lost sight of the user, who may not even be able to understand that a tower block is being illustrated.
With that all said, my decisions were guided by my inspiration, and it cannot really be argued that Emigre represents the very best of layout and accessibility – indeed, its purpose is to not do this. In this way, my image does work. The likelihood of me using this same graphic style again is limited, but the tools I have learnt will be exceptionally useful as I traverse the world of Graphic Communication.
To develop my skills further, I could take a look at LinkedIn Learning or another online learning platform – but what works for me generally is trawling through the menus of an unfamiliar application and finding out what it can do from that. Now, just to find the time to do just that!
Since the Formatting Text task only briefed me to create one final outcome, it was a challenge for me to narrow down my expansive design thinking into a single concept! Pictured above is my finalised flyer, and I truly believe in creating this, I have learnt valuable skills for the future when using InDesign.
In starting this task, I applied colour to the parent page to formulate the background. I decided to make this a fair shade of pink since I felt like it reflected the name of the Radio 4 show – Rethink Fairness. Swiftly moving forward, I copied the assigned body into my text frame and started to apply paragraph and character styles. This stage was very important for me since it helped to create a textual hierarchy within the flyer, highlighting important elements by using different sizes and weights. One of my character styles was for a hyperlink, so it was crucial for me to link the Radio 4 show correctly to my ‘click here’ text. When applying my stylesheets, large amounts of white space were generated, and I struggled to tackle these initially. However, I quickly overcame this challenge and thought to experiment with the ellipse tool to create a decorative pattern using circles. To add contrast within the pattern, I altered the opacities, and this proved to be effective. I finished the flyer by changing the titular ‘Rethink Fairness’ text. Originally, I had made this sit on a straight line, (as seen in some of my screenshots below) but I felt that this wasn’t as exciting as it could be. Instead, I opted to use the ‘type on a path tool’ to curve the text, and I feel like this makes it work well in conjunction with the roundness from the circle pattern above.
Figure 1: Applying a solid, pink rectangle to my parent pageFigure 2: Applying paragraph styles to my body textFigure 3: Applying character styles to make certain pieces of text bolderFigure 4: Using the ellipse tool to create circlesFigure 5: Using the pen tool and type on a path tool to create my curved textFigure 6: Changing the opacity of my circles
Software Tutorials
For most aspects of this flyer, I felt confident in exploring InDesign at my own accord. This is because I have recently become very familiar with using paragraph and character styles in particular due to work from another module. However, I struggled with setting my ‘Rethink Fairness’ text in a way that was interesting, so I followed this helpful tutorial on how use the ‘type on a path tool’ effectively. In the video tutorial, I was initially prompted to use the pen tool to create a curved line. This took me several attempts since I wasn’t pleased with how some of the strokes appeared, but eventually I drew out two lines which were ready to be used. At the left edge of each line, I clicked using the ‘type on a path tool’ and entered the titular text. (‘Rethink’ on top, ‘Fairness’ on bottom) At this stage, I could play about with modifying new paragraph and character styles until I was satisfied with my final outcome. The tutorial I watched was simple, easy to use and helped me in learning a tool I hadn’t yet used in InDesign.
Design Resources and Articles
In my previous experience with using InDesign, I hadn’t needed to hyperlink any content before, so I was initially unsure of how to tackle this when needing to link the Radio 4 content for this Rethink Fairness flyer. However, I found this article which guided me through the steps on how to achieve this successfully, and how to stylise it properly. Firstly, I was prompted to select the text I wanted to hyperlink, and in my flyer, this was simply a ‘click here’ feature. I then navigated to Type > Hyperlinks & Cross-References > New Hyperlink, with a dialogue box appearing shortly after. Here is where I inputted the link for the ‘Rethink Fairness’ website. Submitting the changed settings in the dialogue box created a new character style for the hyperlink, so I altered this in order to make the text bolder, allowing it stand out from the rest of the body.
Figure 7: Adding a hyperlink to my flyer
Not only has this article aided me in this task, but the knowledge I’ve learnt from it will come in very handy for the future, especially when formatting bibliographies that include online resources!
Learning Throughout the Module
Throughout the Spring term tasks, I feel like I have hugely increased my confidence when working with Adobe programs. Although my quiz results from Autumn and Spring have remained the same, it shows that the volume of information I know hasn’t decreased by any measure. I believe these results aren’t a pure reflection of my learning within TY1SK because they highlight my general knowledge, rather than the valuable in-program skills that I have developed and prioritised in this module.
Nevertheless, my skills have improved vastly, particularly when working with InDesign and Photoshop since these were the two programs I knew the least about prior to the tasks set. From mastering stylesheets in InDesign to perfecting image editing in Photoshop – I am in a very comfortable position to use these effectively in the future! On the other hand, I have also grown my After Effects and Illustrator knowledge throughout doing these tasks. I already knew quite a bit about these programs, so I thought it may be a challenge to expand my pre-existing skills. However, I was able to learn new shortcuts and utilise effects I hadn’t before in the past within both programs, and it was super helpful!
I was set the task of creating effective layouts in InDesign, to which I would create two magazine layouts and then choosing a final design that I was most satisfied with (Design 1) that I felt demonstrated the best and most effective layouts for a magazine.
Creating this design, I had to use typefaces that I had no prior experience to using, Suisse Int’l Book and Bembo. When forming ideas and my inspiration, I used an album cover as my main inspiration for my second design, as I had a particular interest in it as I loved the colours and typefaces that it used. I also believed the idea of using aspects from an album cover design (Figure 1) was something that wasn’t in trend nor had been explored much in the design world. The topic of the magazine has no relation to the album cover, I used it simply for inspiration in my design.
Figure 1. The 1975’s ‘Notes on a Conditional Form’ album cover, released in 2020
Having collated my inspiration for this design, I began by setting the grid and format for the document (Figure 2), opting to use a three column grid for this layout. In my previous experiment I used a two column grid that I thought felt too much like a book rather than a magazine (Figure 3). The three column grid allowed me to experiment with my text much more and allowed for an easier and smoother reading experience.
Figure 2. Setting up a three column grid in InDesignFigure 3. My first idea for creating a magazine layout, using a two column grid
I would use my knowledge of using paragraph styles in InDesign to typeset the text appropriately (Figures 4-6). Making it easy to differentiate between a header and the body text. I would also explore creating appropriate styles for different aspects of the magazine, such as audio links and titles for the books. By the end of my design, I would finish with around nine different paragraph styles that were used for my typesetting.
Figure 4. Use of sample text to demonstrate the 3 column grid, as well as some very basic typesettingFigure 5. First iteration of typesetting with actual body text and headings includedFigure 6. Near Final iteration of typesetting, an appropriate use of spacing between paragraphs as well line length
Software Tutorials
As well as having inspiration for my design, I had support from many online tutorials to assist me in my work. A tutorial that I found most useful was a video that guided me on how to create a grid in InDesign. I wasn’t too familiar with the following process so I thought following a tutorial was the best route forward.
I would begin by creating a new document, exact to the standards set by the brief, turning to the ‘Layout’ tab at the top of the screen and setting a colour in the ‘Ruler Guides’ section. I would then return to the ‘Layout’ tab, then to ‘Create Guides’ where I would start setting the number of desired columns and rows, as well as the measurement of distance between these guides using a gutter. Before finalising my grid, I made sure to set the grid to align to the page.
I felt this tutorial was very beneficial to me in creating my magazine layout and solidified my knowledge and understanding of knowing how to use InDesign professionally.
Along with the tutorials and inspirations used when creating my design, I found other resources in my research that I found useful to creating my designs. I looked at magazine design layouts that I could find online that were effective and that I felt demonstrated what was an effective layout. These helped me to develop a better idea of what a magazine layout actually looked like, and how they were handled by a user.
I would also use Pinterest for mood boards to generate ideas. I feel its a great and effective website tool to source inspiration for designs and I have used it in previous projects. I felt it very useful here as it gave me near endless amounts of inspiration, demonstrating different techniques of formatting images for a magazine layout, as well as different styles of grids and columns which I found very useful as I struggled to come up with ideas for designing an interesting format.
Having now used InDesign for this task, I feel so much more confident in creating formats using grids and guides when setting up my document. This was something that I had explored in this task and I feel I can use this in my other modules, especially when creating work files for any upcoming projects. I also covered other softwares such as Illustrator and Photoshop which I feel much more comfortable using.
Specifically for Photoshop, I learnt how to use adjustment layers more effectively, and how they can be used to alter the colour and brightness of an image. In Photoshop I learnt also how to remove certain aspects of an image using the select tool, and then the content-aware fill. This was one of the more useful skills that I learnt across the module and feel I can apply it in my works, whether it be personal or works related to the course.
In Illustrator, I got more comfortable with using typefaces and creating an outline to alter the design to my own needs and requirements. Though this was useful, I feel I still need to develop my skills further in Illustrator as there are many skills I am unfamiliar with.
For the ‘Editing Images’ task, we had to make a change to an image. This included, but was not limited to, changing the colour of a part of a photo, lightening or darkening an image, or removal of objects from the background of an image.
Idea one
For my first idea, I chose to add the effects of noise and threshold. This effect is quite popular on media such as recreations of vintage horror posters and album cover art, so I decided to give it a go myself. For this image, I added noise through the camera raw filter instead of the filter gallery. This is because the grain on the camera raw filter is more precise and allows the user to adjust the amount of noise they want. I then applied threshold and adjusted it accordingly so that the background and foreground did not blend into each other. The background was fairly dark apart from a couple of bright stage lights, meaning that it was not difficult to get the balance right. I wanted to add some colour to this rather than leaving it black and white, so I added a blue rectangle that covered the entire image on a layer on top of everything else. To apply this colour to the black parts of the image, I set the blending mode of this layer to screen.
Adding grain to 83 through the camera raw filter.Adding threshold to the image in order to create a more distressed effect.Adding a blue rectangle on a top layer, this will be my colour to replace the black.Setting the blending mode of the layer to screen, this applied to colour.Final product
Idea two
For idea number two, I experimented with gradient maps. I chose an image that I knew I could incorporate a lot of bright and colours with high contrast into. Going into gradient map automatically inputs one black and one white handle at either end of the gradient bar. I added more so I can add more colours into my gradient map. I chose vibrant colours that make the image look clearly distorted and more interesting. I then wanted to add texture to this image, so I added grain through the camera raw filter and a paper texture I found online on top. For the paper texture layer, I changed the blending mode to screen in order for the texture to be applied to the image. I also changed the opacity of this layer to 28% to avoid it being too overpowering. This is my favourite outcome from this task, as it is very visually interesting and eye catching.
Adding more handles to my gradient map.Adding my chosen colours for the gradient map.Going to camera raw filter, I added grain of size 36.Changing the blending mode and opacity of the paper texture layer.Final product.
Idea three
For the third idea, I created a duotone image. This involved working with channels, which I hadn’t done prior to this. Before starting the duotone, I adjusted the image using curves to increase the contrast of the image. I did this in order to get an effective final result that provides high contrast between the two colours. After doing this, I navigated to the channels and selected the RGB channel that provides the most contrast. In this case, it was green. I made the green channel a selection by clicking on the dotted circle icon at the bottom and pasted it on top of the background layer as a solid colour. This solid colour would be the highlights, so I chose a light blue. I then selected the background and made it a solid colour which would be the shadows, for which I chose black.
Adjusting the curves of the image to create a high contrast.Selecting the green RGB channel.Pasting the green channel on top of the background as a solid colour and choosing a light blue for the highlights.Repeating the previous process with the background, I chose black for the shadows.Final product.
Software tutorials
I did not know much about working with channels and how to create duotone images. I used a tutorial (https://youtu.be/TVJqG8HrJwc?si=nCwqflv4arL7hVF8) to help me with this. It gave me an understanding of RGB channels and when to use each channel to achieve different effects. I learnt that in order to create an effective duotone image, the channel with the highest amount of contrast should be selected. To create less visually intense duotone images, channels that provide less contrast should be selected.
To create the gradient map, I followed a YouTube tutorial (https://youtu.be/kjKfz9KXgPo?si=-KILb-3zMc9vX5_l) in order to achieve this effect. As I was new to this, I chose a tutorial that used vibrant colours rather than trying to piece different colours together myself. This was so I could get a basic understanding of gradient maps before personalising them completely. This video taught me that gradient maps are quite customisable, as extra handles can be added in places of the user’s choice.
Design resources and articles
Finding inspiration for this task was not difficult, as I took inspiration from images that I commonly see on social media. The work of Jesse Nyberg (https://jessenyberg.design/) features effects I attempted to recreate such as using noise and threshold. He also utilises gradient maps in his work, that mainly consists of posters. Looking at his work helped me develop my design ideas as it gave me an idea as to how to make my work look appealing. For example, I knew when to stop adding noise in order to make it look not too overbearing, and I chose colours in my gradient map and duotone image that were cohesive.
An article I found (https://proedu.com/blogs/photoshop-skills/what-is-threshold-in-photoshop) gave me further understanding into the threshold tool and included links to useful videos.
Learning throughout the module
Throughout this module, I have learnt a lot of new skills. During the first term, I developed basic skills in Photoshop, Indesign, and Illustrator. This was useful as I had no prior experience of using Adobe apps. I learnt how to work with adjustment layers and the filter gallery in Photoshop, along with learning how to deal with paragraph and character styles in Indesign. In Illustrator, I learnt how to manipulate type into shapes. During the second term, I used After effects for the first time. This was challenging but I learnt the basics of the app such as how to use graphs and add effects to texts such as glow. I also became more familiar with different Photoshop tools such as masks, channels, and how to use the pen tool to cut out images. In Illustrator, I learnt how to manipulate type itself rather than morph it into different shapes.
This design takes inspiration from luxury brand monograms. I chose a serifed font, and through disconnected strokes, combined my initials ‘TM’. The simplicity and clarity makes this design very effective as a sophisticated logo.
I began by sketching several variations of ‘TM’ monograms on paper, I find that using pencil and paper for this initial idea generation process allows for numerous quick generated designs that do not worry about being neat or technically perfect and instead focus on depicting the way in which the letters interact with one another or the feeling that they convey.
Taking it into Illustrator, I started by typing a capital ‘T’ with the text tool in Illustrator. I used ‘create outlines’ to convert this type into an editable vector image.
I edited the-now-vector letter by deleting anchor points with the direct selection tool.
I then shifted into wireframe mode and created guides to stick to, which is frequently used in logo design to create a uniform, clean, alignment.
Finally, I looked at the finer details; to reflect the curve of the terminal on the ‘T’, I edited the control handles for the anchor points on the top of the ‘M’.
Design idea 2
This design idea takes a much more playful approach than the first. It pushes the boundaries of the concept of a monogram logo with its inflated 3D form, however, it still combines the letters ‘T’ and ‘M’. This type of design would be great for social media posts, possibly incorporating a short animation of the logo itself inflating.
Design idea 3
This design took a more corporate, industrial approach, and captures a completely different feeling to the previous two. It relies on heavy geometric shapes, slightly softened by an applied transparency gradient .
Software tutorials
Throughout this project, I watched several video tutorials to assist in my illustrator learning.
I used this youtube video on the latest generative fill tips and tricks for illustrator, to help me gain a greater general understanding of current illustrator tools. This is where I thought of using generative fill to generate a pattern to apply over the monogram: Generative fill
Another tutorial that I relied on when creating the inflated monogram, was a tutorial on how to inflate shapes and objects in Illustrator, as I was keen to experiment with some sort of 3D elements within the module this term: 3D inflate tool
One of the software tutorials linked at the bottom of the brief that I used when creating my Monograms in Illustrator is how to outline fonts. This is a key step in editing type as a vector and this tutorial reminded me on how to use the shortcut “cmd+shift+o”: Outline type
Design resources and articles.
I suffer from relatively strong colour blindness, and therefore often rely on taking existing colour palettes from existing designs, or those that can be found in the real world. A resource that assists me in choosing colour combinations, is ‘Adobe Color’, which allows you to copy colours by their hex codes: Adobe Color
To inspire me with my design ideation process, I created a moodboard of existing monograms on Pinterest as advised in previous feedback from TY1SK1: Pinterest board
Learning throughout the module.
This module taught me many valuable software skills through the numerous tutorials that I read/watched and through pushing me out of my comfort zone and encouraging me to explore previously unused tools within the software. My biggest learning moment of the module was getting to grips with After Effects. I used in-depth design tutorials sourced from the website Skillshare which gave me a great understanding for the basics of the software. As Illustrator is the Adobe software that I feel most comfortable with, learning After Effects complimented this perfectly, as it builds on the vector images created in Illustrator.
Tables in InDesign can be very useful when organising content, making it quicker and easier to understand. Most people will have explored making tables in Word or Excel, but designing them in InDesign allows for more creativity and control.
I was tasked to design and format content into a table. Before this I had never made tables in InDesign before, however I now feel confident in using and explaining the basic features.
Software Tutorials
Since it was all new to me, I started off by reading through the materials given to me on the brief. I found that the information from the Adobe Website was a great way to learn the basics of creating tables. Another tutorial which I felt explained the basics but also went a bit further in giving more detail on styling tables was by Yes I’m a Designer on YouTube.
Design Ideas and Design Process
Initial Idea
Figure 1 – initial idea
My initial approach to the task was for the whole design and timetable to be portrait. The table size used in this design was 5 rows by 2 columns. I felt that the size of the table in this design was too squashed and so it made the information difficult to read as it was quite small. This lead me to think of having a landscape design as this would fit the content better and allow for the type size to be larger, improving legibility!
Final Design
Figure 2 – adding type
I started off by setting up my document with top & bottom margins of 14mm, and left & right margins of 10mm. I then began adding in the information that would not be kept inside a table: the title of the podcast and its description. The typeface for the title is Greycliff CF, and for the body text is Poppins.
Figure 3 – table dimensions
To create the table, I used the following dimensions: 2 Body Rows, 5 Columns; and for now I kept the default table style that InDesign sets.
Figure 4 – table addedFigure 5 – adding table data
I then added in each set of information to the corresponding cells, and used Paragraph Styles to style the text.
Figure 6 – removing table lines
Using the Table Styles panel, I chose to remove the lines surrounding each cell of the table as I felt they were unnecessary for my particular design since the content was already well divided enough.
Design Resources and Articles
Uxcel has some useful information to consider when designing tables. It discusses how to best design tables in terms of scannability, legibility, alignment, and styling.
Learning Throughout the Module
At the beginning of this module I had only just started to become familiar with using InDesign due to a book design project in another module; and before that I had only ever used InDesign once or twice during A levels. I feel that this project has taught me about many different design tools and skills, but has also helped me to become more comfortable when using Adobe software and its variety of features. This task in particular was helpful in discovering how to create & style tables, as well as getting me to make use of paragraph styles.
I have always found illustrator to be one of the areas of design that is most difficult. This is not only because I find the tools quite complicated to use sometimes, but also because I am not very confident in my drawing skills. This is why I want to focus more on my illustrator task and talk about how I have been able to improve my skills over this task.
Design 1
Figure 1: My original final first design, balloon inspired
When beginning this task, my original approach was to use the inflate tool to create a metallic balloon like logo (figure 1). Which I ultimately ended up scrapping because I could not figure out how to not have the effect be pixelated. This was a positive though as I then took a step back and made the design less complicated, I took a more vintage style approach to the design through the extreme curves and the smooth style of the typeface.
First of all, I found an appropriate balloon-like font on adobe fonts, which was Ziclets, and selected the type tool to place my initials onto the page. I then used this tutorial to outline the letters to make them editable (figure 2), this brings up anchor points which we will use to extent the letters. Afterwards this tutorial helped me figure out how to use the pencil tool to alter my type. This was done through selecting the pencil tool, clicking on the anchor point where I wanted to start the extension and then dragging it to the anchor point to where it should end (figure 3). I lowered the F down slightly so there was space on the right side of the J at the top and at the bottom of the F. Consequently, I used the pencil tool again to extend the ends of each letter so they are slightly wrapped around each other, and to make it more aesthetically pleasing I changed the colour to green, duplicated the layer and changed the colour to a lighter green on top to make a shadow effect (figure 4).
Figure 2: Outlined text to make letters editable
Figure 3: Extended letters using pencil tool
Figure 4: Final first design
Design 2
Figure 5: Highlighted grid and pathfinder tool used to connect boxes
For the second design, I followed this tutorial on making an initial logo using a grid and the pathfinder tool. I first drew a vertical line on the page, used the option key (⌥) and dragged to the right, then I pressed command ⌘ and D to duplicate the line across the page. I highlighted the lines used the option key (⌥) and dragged again, rotating until it made a diamond pattern, making sure that it is not rotated too far that the logo will appear too slanted in the end. Afterwards, I selected the pathfinder tool, and dragged across the boxes I wanted to use to make my letters (figure 5), adjusting the letterform and extending the grid wherever I need to (figure 6). Finally, I selected the extra lines outside of the filled boxes and deleted them leaving the logo, and to separate the letters, I found the line dividing the letters and changes the fill colour on each side to different colours.
Figure 6: Adjusted letterform and gridFigure 7: Final second design
The software tutorials were the most important part here because I would not have known that using the pathfinder tool on a grid was a technique that I could use. The inspiration behind this design was sports logos, specifically adidas and the way that the logo is slanted towards one side which can be seen here, which is what I wanted to imitate in my design. I am not sure why I assumed that logos like this were done without a grid, but it makes much more sense after watching the tutorial. The final design is shown above (figure 7).
Design 3
For my final design, which is the one I feel is most effective, I went for a traditional calligraphic style logo where the serifs were altered and connected. Firstly I looked at my original sketches and found the one that I thought would be interesting to execute on illustrator.
Figure 8: Outlined initials
We start off with the letters being placed on the page, and here I used the typeface Rizado Script. Next, the text needed to be outlined which was done the same way it was in the first design, this is by selecting the text and right-clicking to bring up the menu, then selecting create outlines to make the text editable (figure 8). I then connected lines using the pen tool (figure 9), and used other letters from the typeface, applying the rubber tool to create the parts which I would employ to help connect the lines and the serifs together to make a fluid logo. I had not thought to use other aspects of other letters to enhance my logo if it were not for this tutorial which explains how you can use that technique as a feature of the design. As a result of this, I inserted the letter O into the file and used the curves from half of an O to falsify having looped serifs (figure 10 & 11).
Figure 9: Pencil tool to connect lettersFigure 10: Connecting extension to create new shapeFigure 11: Using character O to create new serif
The linked tutorial above really helped me for this logo, it also covers parts of illustrator which was provided through multiple links on the brief just in one video. Going into this task I thought that I would be using the pen tool for everything because that is what I have always done. I surprised myself though, specifically in this final design as pretty much only used tools which I did not know existed before I started this task. The final design is shown below (figure 12).
Figure 12: Final overall design
Software tutorials
Most of the tutorials I used were ones that I found on my own through YouTube, I did review the tutorials that were recommended on the brief, but I found that lots of the YouTube tutorials covered lots of the same things. I was able to find out about approaches that I had not considered before through video tutorials, such as using a grid and connecting the sections together to fill them.
Although some of the software tutorials such as the bubble text tutorial were just consolidating skills I already had, the ones that had completely new tools I feel have increased my confidence in Illustrator by a considerable amount. The tutorials I used for my task are linked in the walkthrough for each design.
I definitely still feel like there are more skills that I need to learn and develop on this software, like most people would as software is constantly changing and developing. Something specific which I would like to learn further is using the pen tool, as although I used it extensively in this task, it took me quite a lot of time to get used to it and make my work smooth and even. There are still gaps in my knowledge which I can improve by finding more tutorials.
Design resources and articles
The first thing I did after reading he brief was create a Pinterest board and started adding logos which I found to be effective and aesthetically pleasing (figure 16). I personally like Pinterest as it shows me what is trending in my own age range.
I also did what most people probably did for this task, which was just search up ‘initial logos’ to see what comes up. Through this I managed to find some images which were useful displaying different letterforms and styles, like (figure 17). Additionally, I browsed this website which includes different logos for a range of companies, which was one of the things that I think most people would think of when they hear the word logo. I liked these ones specifically because it just shows a list of a wide range of logos from clean sharp lines to elaborate, intense designs.
Learning throughout the module
Despite my scepticism in this module being self-directed, it has allowed me to work at my own pace and solidify my knowledge in software that I (naively) thought I knew well.
I began with previous knowledge of a few pieces of software, that being Photoshop and Illustrator, but through this module I have been able to learn about InDesign and After Effects which I did not know existed! Finding out about, and learning how to use these new software’s has been what I believe to be the most important part of my year. I now know the purpose for each of these individual software’s and what part of design they are mainly used in. Such as Illustrator being for logo design and InDesign for setting out any text.
Skills that I have improved while doing this module include cutting out hair in photoshop, especially curly hair which I found to be very challenging, but most importantly I have been able to improve my time management skills. Although last term my time management skills were not too bad, I definitely improved this skill during this half of the module. I was completing each task on a set day every week which has been a highlight for me because it has relieved some stress.
Hierarchy: The classification or assortment of subjects regarding their importance.
Hierarchy in typography is arguably the most important consideration when creating layout. It writes subliminal messages within the page that tell the reader what’s important, what should they look at, what should they read first. This is why it is so important you don’t mess it up.
The task at hand was to format an effective layout for a double page spread. The content would be an article on novel characters which break character norms. The text would be supplied, but it was up to layout the content, edit the hierarchy and format an effective DPS.
Software Tutorials
Prior to the spring term my knowledge in Adobe software such as Photoshop and InDesign was already quite extensive and I have had much experience in these applications. However, I found that it is useful to have a refresher in some of the more niche or hidden features of these. To do so I have searched for a few tutorials, most notably in InDesign, to boost my knowledge in these fields and solidify my skills as a designer, and bring them to fruition.
I also came to use less familiar software, such as Illustrator, which posed as new and interesting challenges to overcome. While challenging at first, after a few tutorials I found myself quickly becoming more confident.
One of the more useful tutorials I used was a creative cloud download which ran down on the importance of tracking and leading in text and how this can be used in InDesign.
I began by creating the InDesign file I’d be working in. This consisted of a double page A4 spread with facing pages. The margins were set at 16mm as this would create plenty of space in the center of the page for the body text, while keeping a healthy distance from the edge. It was after this I implemented the baseline grid, which would help me to layout my text later.
This feature in InDesign is vital to formatting a good layout as it allows you to evenly space the lines of text on your page. This is becomes especially prominent in the body copy where it can assist in organizing masses of text with just a few mouse clicks.
With this done, my next step was inserting the main body of text. This is where the Importance of layout and hierarchy became too apparent.
I found that there was too much going on, the text was in big chunks that was harder to digest. Some lines didn’t have enough space between them do divide the different subjects, and some had too much space, making something of minor importance seem more so. I believe this made the reading experience awkward and unrewarding.
I amended this by firstly splitting the text into columns which split the text into more digestible parts that wouldn’t fatigue the reader. I also spaced the paragraphs apart by an entire line to show that they are not connected, and bundled the “reading:” and the reading list onto the same line to establish their connection as before it appeared as though they were unrelated.
I then began establishing the typographical hierarchy, using different type styles and sizes to differentiate the relevance of the text. For example, the headings of the sections would use a semi-bold variant of Acumin Variable Concept, where as the body would remain in regular form. I saved these as paragraph styles, which would later help me to format the text far more efficiently and in uniform.
Following this, I created the left page, which consisted of images of some of the books mentioned in the article. It is important to involve graphics in double page spreads as it helps to create visual relation to the article content and also balances out the text, reducing the likeliness of a reader being discouraged by the masses of reading.
My final change was adding the title and introduction paragraph. I wanted to integrate these into the image page so separate them from the body text, but also didn’t want them to get dwarfed by the imagery. The solution to this problem was containing the text in a dark band, and using white text to create contrast to set out from the background. I also used italic type for the title, and increased the tracking, to set this text apart from the rest.
Design Resources and Articles
Before making too much progress on the layout design I found myself experimenting with some features to explore my options, as well as watching some tutorials on some of the features I was less familiar with to prepare me for the task ahead. For example, I needed to recap on how to more efficiently format text using paragraph styles using the tutorial below.
I also revised how to set up a baseline grid as this was a feature I had only recently practiced and was not entirely confident in using, nor did I fully understand it’s utility. I feel however that this task has helped me to appreciate it’s uses.
For the image page, I used high quality jpeg covers of the books relevant to the article.
Learning Throughout the Module
Throughout this module I have picked up many new skills, as well as reinforced ones I knew already. One of which is understanding the importance of using a baseline grid in typography. The vitality of this feature has become obvious to me during this task and I have increased my understanding of how to set one up.
I also think my ability to create a pleasing and useful layout has been improved through not only looking at other material for reference, but through trial and error, and experimenting with the layout rather than keeping a tunnel vision on one idea.
However, next time I would try to be more ambitious with my layout. I think I could have created something much more interesting by having images placed on the same page as the body text. This would have posed some new challenges for me to overcome and offer more experience in how to establish the layout and hierarchy of a page.
An exhibition by second-year students in the Department of Typography & Graphic Communication
The work featured in this exhibition are posters designed in response to a brief inspired by Project Everyone, a United Nations Global Partner dedicated to promoting the Sustainable Development Goals (also known as the Global Goals). The work aims to inform, engage, and inspire individuals, organisations, and institutions to take meaningful action towards achieving the goals by 2030.
The task
The project to promote the Global Goals was devised and led by tutor Greg Bunbury. Each student was given the task of creating a compelling poster and supporting materials to promote one of the seventeen goals. Their work needed to incorporate graphic, typographic, or illustrative elements, and feature the ‘Halftime’ campaign hashtag #ImagineWinning, as well as project branding and a call-to-action.
The exhibition
The display of twenty-nine posters has been installed in the Department’s exhibition space, grouped under four headings: economy, equality, environment, and well-being. The exhibition was designed by second-year students, Aaron James and Olivia Moors, as part of the Department’s Real Jobs scheme. The exhibition project was supervised by tutors Sara Chapman and Geoff Wyeth with support from Department colleagues. The posters and other exhibition graphics were printed by the University’s Creative and Print Services.
The exhibition has been made possible by a generous award of funding from the University of Reading’s Arts Committee. Following its display in Typography & Graphic Communication, the exhibition will travel to the University’s library foyer where it will be installed for an additional run.
