Advanced Typography / Task 3 Type exploration and application
Week 9 - Week 14 26/10/22 - 29/11/22
Riko Matsuyama 0351470
Advanced Typography / Task 3 Type exploration and application
Instruction
Lecture
All lectures were completed in Task 1 and Task 2.
These links were provided by Mr.Vinod during class.
https://www.instagram.com/36daysoftype/
https://brailleneue.com/?fbclid=IwAR1SYUed4IqiCHJLiWpQ3oTV1luLjGiRrSdNSeZL0xkWgTDe-UpAmzU3skk
Task 3 Type exploration and application
Task 3 Type exploration and application proposal slide
Finally, I chose this typeface. This is the Kpop group logo, I think this future is the narrowness of width and sharpness. The width of the letters is very impressive, so I used them as a reference.
 |
| Fig1.1: group logo |
 |
| Fig1.2: fandom name |
Before sketching, I determined the height and width of each letter of the alphabet. For uppercase letters, all are the same width except WM and I. WM is wider and I is narrower. For the lowercase letters, the height and width vary from group to group.
 |
| Fig1.3: height and width of alphabet |
Based on the original font, I start to drow a sketch. The size and width are already decided, so the sketch is a little rough as I sketched to determine and confirm the shape of the alphabet. It was a little difficult to draw different alphabets with similar shapes.
 |
| Fig１.4: sketch - uppercase, lowercase, number, characters |
After I had finished deciding on the general shape, I traced it with a pen to make it easier to see.
 |
| Fig1.5: sketch - uppercase, lowercase, number, characters |
First, I created a foundation based on the line widths, sizes, and heights
of the original fonts; even alphabets that actually have curves, such as s,
o, and G, were created without using curves.
|
| Fig1.6: make a chape |
|
| Fig1.7: used bases |
The shapes used for the foundations were not placed randomly but were
adjusted so that the center points were aligned and symmetrical from left
to right or top to bottom depending on the alphabet.
|
| Fig1.8: make a base |
|
| Fig1.9: process, cross |
|
| Fig1.10: uppercase B |
B R P K
|
| Fig1.11: B R P K from left base |
L O U T I Z
|
| Fig1.12: L O U T I Z from left base |
G C F E J
|
| Fig1.13: G C F E J from left bae |
Y X
|
| Fig1.14: Y and X from left base |
It was a little difficult to determine the length of c and d. I put it
between b and d to see how they balance. c and d are almost identical in
shape.
What was interesting was that even though they were almost the same
shape, C looked the best in length to the blue and D looked the best in
length to the orange part, of the left base below the image.
|
| Fig1.15: length process of C and G |
Use this corner created from the original typo face to create the
best-looking shape. The original typo face does not have these corners, but when comparing
the typo face with and without the corners, I thought it would be better
to have them.
|
| Fig1.16: used corner |
|
| Fig1.17: the process of S |
The angles of the diagonal lines used in H, A, M, etc. were based on the
original font.
|
| Fig1.18: diagonal line of H, A, and M |
|
| Fig1.19: Illustrator |
This is the final design of the upper case. Next, I created the
lowercase letters, which were less difficult to create than the
uppercase letters.
|
| Fig1.20: final design of the upper case (17/11/22) |
For uniformity, all lowercase letters are exactly half the size of
uppercase letters. Widths are the same as for uppercase letters except
for m and w. Those two are wider.
|
| Fig2.1: height between upper and lower |
Shapes like a, c, and x fit exactly half the size of the uppercase
letters. Shapes like b, k, and h, which are partly vertical, have their
height aligned with that of the uppercase letters. Shapes that are
long on the bottom, such as g, p, and j, have their bottom lengths
aligned.
|
| Fig2.2: height of each |
The i and j dots were initially just squares, but I felt they were very
ordinary, so I changed the angle of the squares to a slant. As a result, I
felt that a sense of unity was achieved.
|
| Fig2.3: i and j |
I got feedback from Mr. Vinod in the week 11 class that I should change
the design of n, so I redesigned it. The first shape looked hollow and
uncomfortable when lined up, but after the change, it no longer looks
uncomfortable.
|
| Fig2.4: the process of n |
|
| Fig2.5: n in the sentence |
This is the final design of the lowercase.
|
| Fig2.6: final design of lowercase (17/11/22) |
I raised the center of gravity of the 2, 3, and 5 up so that all the
numbers do not cover the shape of the digital numbers. The height is
aligned with the E and F of the alphabet.
|
| Fig2.7: height of 235 |
As with the alphabet, the corners were shaved to improve the shape at the
end.
|
| Fig2.8: with and without corner shape |
Finally, I created the characters, but the @% & * were particularly
difficult. I used the shapes and sizes of existing fonts as a
reference.
|
| Fig2.9: process of & |
|
| Fig2.10: process of @ |
|
| Fig2.11: process of % |
The size of the characters differed depending on the existing font. I
chose a size that would feel comfortable when lined up in a
sentence.
This is the final outcome of the numbers and characters.
|
| Fig2.12: final design of numbers and characters (17/11/22) |
After everything was created, the finished fonts were placed in the Font
lab and adjusted. I lined them up side by side and checked for any
discrepancies in height.
|
| Fig2.13: lowercase 1 in Font lab 8 |
|
| Fig2.14: lowercase 2 in font lab 8 |
|
| Fig2.15: lowercase 3 in font lab 8 |
We adjusted some of the lowercase letters because they were distorted in
shape and some lines were thicker when copied and pasted from
Illustrator.
|
| Fig2.16: Font lab |
|
| Fig2.17: characters |
I have created several short sentences incorporating the
characters.
|
| Fig2.18: short sentences |
After this, I exported and installed the fonts.
|
| Fig2.19: installed font |
The final design of all.
|
| Fig2.20: final design of numbers and characters (17/11/22) |
|
| Fig2.21: uppercase and lowercase (17/11/22) |
Task 3 Type exploration and application
The original font I created is the group's font, so I thought I would
create merchandise for this group and apply the fonts that were
created.
|
| Fig3.1: merchandise |
I received feedback from Mr. Vinod in the week 12 class. Suggest keeping
in mind it's not about visuals it's about a typo face. You try to ensure
that your typo face is center stage, large or big. The picture that you
selected is nice, it's very quiet. In this case (flower image) you might
wanna use a small (typo face), it is fine cuz it's a very quiet picture,
it might work.
|
| Fig3.2: feedback, week 12 |
Since it is the typography that should be emphasized, the size of the typo should be considered. I decided to use images for the album and illustrations for everything else.
1. CD and Album cover
These are the actual album covers of the group. The typography is placed
small in relation to the whole. This design is very simple, which I like.
These are used as a reference for the creation.
|
| Fig3.3: album cover design |
.webp)
|
| Fig3.4: mercenaries of group |
Use this material. For the jacket, I will use the image I found.
|
| Fig3.5: cd and cd box |
I was looking for images related to this group. To find ideas, I watched
a music video of this group and was impressed by these flower scenes, so I
looked for images of flowers.
|
| Fig3.6: music video, flower |
|
| Fig3.7: flower image |
The color of the brightest part of the image was used as the font color.
After that I cropped the image and added the font. I changed the width and
size of each.
|
| Fig3.8: title |
|
| Fig3.9: layout |
Three different designs were created. These are the final designs. The
images we used are vertical, so I changed all, the areas to be cut.
|
| Fig3.10: 3 album cover design |
|
| Fig3.11: Illustration of cd |
I created my own hand-drawn illustrations and pasted them onto the
cd. Then I combined the two using Photoshop.
|
| Fig3.12: illustration of cd |
The final design of the CD and album cover
 |
| Fig3.13: cd and album cover 1 (21/1/22) |
 |
| Fig3.14: cd and album cover 2 (21/1/22) |
The phone case has an image and an illustration (pattern?), both. The
images used were also sought from merchandise or music videos related to
the group.
|
| Fig3.15: phone case |
The image selected is on the right, and the image on the left is the one
used as a reference.
Jellyfish often appeared on album packages and music videos. The chess
scene was also impressive in the music video and was probably the concept of
the song. And I chose leaves as well as flowers.
|
| Fig3.16: MV and album cover, jellyfish image |
|
| Fig3.17: MV, the chess image |
|
| Fig3.18: MV, leaf image |
After selecting the image, I cut it into the shape of a font and added the
font. The colors were chosen to be the lightest colors in the image. This is
to create a sense of unity between the font and the image.
|
| Fig3.19: 4 designs of the phone case |
|
| Fig3.20: Photoshop |
The final design of the phone case
|
| Fig3.21: phone case (18/11/22) |
In addition to the image, we also created a phone case using a marbled pattern. I made it based on the colors of the logo of this.
|
| Fig3.22: group font |
How to make holographic
I created the pattern based on the video above. It was the first time I
used this tool, but it was fun.
|
| Fig3.23: process |
Instead of using the same pattern for all three pieces, I tried to make
the pattern connect when the three pieces are put together.
|
| Fig3.24: photoshop |
The position of the font and the size of the font are also different for
all three.
The final design of phone case 2
|
| Fig3.25: phone case (25/11/22) |
4. T-shirt
|
| Fig3.26: t-shirt |
I created a T-shirt using the material above. Same as the first
poster, I used the color gradient of this logo. I overlaid the logo on
the rectangle and cut out the logo area.
|
| Fig3.27: group logo |
The logo will be pasted on the front of the T-shirt and an
illustration of one of the members will be pasted on the back as one
point. This is the one used on the first poster.
|
| Fig3.28: logo and one point |
I was concerned about the gap between the T-shirts, so I layered
them.
I made sure the logo was not too small or too big.
|
| Fig3.29: design of t-shirt |
The final design of the T-shirt
|
| Fig3.30: t-shirt (17/11/22) |
5. Poster (1)
|
| Fig3.31: used gradient colors |
I created two different posters, the first using these colors. These
colors are taken from the two images below. Each is a group logo
and a concept photo of the album.
|
| Fig3.32: original images of gradient colors |
|
| Fig3.33: original album poster |
I cropped out that part of the image of the member's back view and
changed its color to a gradient of pink and blue. The background
is a gradation of blue and purple. The angle was changed so that the
colors would not be covered.
|
| Fig3.34: illustration of members |
And then I added a font of my own creation. For the date and time
part, I used a different font.
|
| Fig3.35: layout |
I tried several fonts for the date and time part. Finally, I added
textures to make it look like a poster. The artboard was set to the size of a pc screen, so I applied it.
|
| Fig3.36: 4 layouts, different fonts |
|
| Fig3.37: poster, PC screen (18/11/22) |
|
| Fig3.38: poster with texture (18/11/22) |
|
| Fig3.39: poster with texture (18/11/22) |
Next, I tried to create another poster. Last time it was the 1st single, so this time I chose the content of
the 2nd single. The image below is the actual poster.
|
| Fig3.40: the original poster |
I decided to add an illustration of the set from the music video for
the song to the bottom of the poster. After drawing a simple sketch, I
digitized it.
|
| Fig3.41: MV set and sketch |
The structure was designed to avoid overemphasizing the
illustrations. It was a little difficult to come up with the
colors.
|
| Fig3.42: digitalization |
After the illustration was completed, I added the text. I changed the
size of the font and the names of the songs to create a
three-dimensional effect. I also used the original poster as a
reference for the different sizes of letters. NMIXX's logo looked
better when surrounded by lines, I think. As with the first poster, I
changed the font in the date and time section.
|
| Fig3.43: title layout |
It was a little difficult to determine the size, space, and balance
of the title and group logo, as well as a good position and size for
the date and time part.
|
| Fig3.44: layout |
|
| Fig3.45: poster background from MV |
I also tried to put images into the background. This is part of the
music video. The color is dark, so it has a good look without clashing
with the text or illustrations. After this, I added textures as in the first one to give it a poster-like
appearance.
|
| Fig3.46: different background |
The final design of poster (2)
|
| Fig3.47: poster (20/11/22) |
.jpg)
|
| Fig3.48: poster (20/11/22) |
|
| Fig3.49: poster (20/11/22) |
7. Poster (3)
The next is to create a blind package poster. This was a "blind
package" promotion for the group's debut, in which limited pre-orders
of CD packages were made without announcing the group's details. The
image below is the actual poster.
|
| Fig3.50: an original poster of a blind package |
It does not describe the design or other details, only the
contents, and size of the package. I thought this was interesting.
|
| Fig3.51: a poster of a blind package |
|
| Fig3.52: group logo |
I first traced the product in the package from the original image.
Then I adjusted the line thickness. The color of the lines is a
gradation of four colors, which I have used several
times. The color flow is unified. (Blue→Pink)
|
| Fig3.53: merchandise of package |
I typed the content of the poster in a font I created. For posters
#4 and #5, I used a different font for the data part, but this
poster is all my own creation, I thought it would give a
sense of unity.
|
| Fig3.53: text, own font |
Since the background is black, I was thinking of white for the
title, but it looked better with blue and pink.
|
| Fig3.54: difference in title |
And it looked better if only the surrounding lines were used
instead of the filled font.
|
| Fig3.55: filled font, title |
Regarding the layout, the length of each sentence is different, so I
aligned the left part to the right align and the right part to the
left align and it looked better. It was a little difficult to
determine the width of the letters next to each other and the
spacing of sentences above and below.
|
| Fig3.56: left and right align |
The final design of the blind package poster
|
| Fig3.57: poster, blind package (22/11/22) |
Task 3 Final outcome
Type Exploration
Font link:
|
| Fig4.1: final design of uppercase (.jpg)(17/11/22) |
|
| Fig4.2: final design of lowercase (.jpg)(17/11/22) |
|
| Fig4.3: number and characters (.jpg)(17/11/22) |
|
| Fig4.4: uppercase and lowercase (.jpg)(17/11/22) |
|
| Fig4.5: all (.jpg)(17/11/22) |
Fig4.6: type exploration final outcome (.pdf)(17/11/22)
Application
 |
| Fig4.7: final outcome of album cover and cd (.jpg)(17/11/22) |
 |
| Fig4.8: final outcome of album cover and cd (.jpg)(21/11/22) |
|
| Fig4.9: final outcome of phone case (.jpg)(18/11/22) |
|
| Fig4.10: final outcome of phone case (.jpg)(25/11/22) |
|
| Fig4.11: final outcome of t-shirt (.jpg)(17/11/22) |
|
| Fig4.12: final outcome of poster, 1st single, PC screen (.jpg)(18/11/22) |
|
| Fig4.13: final outcome of poster, 2nd single, black background (.jpg)(20/11/22) |
.jpg)
|
| Fig4.14: final outcome of poster, 2nd single, image background (.jpg)(20/11/22) |
|
| Fig4.15: final outcome of poster, 2nd single, color inversion (,jpg)(20/11/22) |
|
| Fig4.16: final outcome of a poster, blind package (.jpg)(22/11/22) |
Fig4.17: task 3 application, final outcome (.pdf)(25/11/22)
Feedback
Week10
General feedback: looking very consistent although I find the upper and lower case is very different in the sense, and interesting typeface.
Specific feedback: When you put both together, it can create an interesting dynamic in the sense that when you write a capital letter and then you write the rest of the sentence, then you write a capital letter again, and you write the rest of the sentence, but it would take up a huge amount of space. that's the only issue. Good style but I don't know how practical it is. You can test it out by creating a fake sentence.
Week11
General feedback: They are consistent and not particularly problematic.
Specific feedback: n is a bit weird. Redesign "n". If you make it shorter(lower "f" letter), it doesn't conflict with any other letter forms that come there (next to). It's your design so you need to rationalize how you will apply and use it.
Week12
Specific feedback: Suggest keeping in mind it's not about visuals it's about a typo face. You try to ensure that your typo face is center stage, large or big. In relation to making sure that always your typo face is playing nice. The picture that you selected is nice, it's very quiet. In this case (flower image) you might wanna use a small (typo face), it is fine cuz it's a very quiet picture, so it might work. But as much as possible if you are able to use it bigger but maybe not in relation to the picture, but large would be better. Illustration or images, it depends on the band. you can use both.
Reflection
Findings
After creating all uppercase and lowercase letters this time, I realized that kerning is very important. Even if you design a beautiful font, if the kerning is not good, it will not look good when laid out in sentences. It was a bit difficult to create the kerning in the font lab, especially between the alphabet and characters (such as @, %).
When applying typos to merchandise, I thought that space was very important as well as typo design. Some merchandise looked better with less white space, while others looked more beautifully designed with more space. It was fun to think about those.
Observations
During the course of this project, I observed the merchandise of many groups and artists. The merchandise very much represents the colors and characteristics of the group or artist. They were fun to look at and were good support for my project. It was also fun and informative to see other students' designs during feedback time.
Experience
The whole project was very hard but fun. At first, I was very surprised when I heard that we had to create all the upper and lower case letters of the alphabet, but I enjoyed At the same time, I thought that typography designers are great. For example, Adobe Illustrator already has a lot of fonts in it, but when I thought that all of them were created by someone else, I thought that creation was interesting and fun.
Further reading
 |
| Fig5.1: typographic referenced |
Typography Referenced
Typographic
Principles
By Jason Tselentis
Designers who rely “purely on instinct” often have the benefit of years of experience, and thanks to their training, can call on formal qualities and aesthetic conditions that have worked well for them in the past.
Contrasts (230) in size, shape, tone, placement, and color all factor into how elements placed in the format look. Being visually literate allows the designer to give words and images shape, bringing it all together as a composition created within the required format.
Good typographic expression is an art, but it is also, without question, based on principles. Designers may use knowledge and experience to design works that evoke a particular period, place, person, or movement. Often, they will do so to further the communicative message required. Many intentionally take liberties and break the rules to create stylistic marvels for the client’s interest, the audience’s, and their own.
If all a designer knows is a handful of principles, then all a designer can create is a handful of solutions. Knowing as many rules as possible helps designers expand their toolbox and decide what to use, and when.
 |
| Fig5.2: t-shirt |
2Creative’s +81 T-shirts include a wealth of typographic information, but each typeface denotes designers by nationality— British, French, German, Dutch—using typefaces from the respected countries.
 |
| Fig5.3: poster |
The office of MOD/Michael Osborne Design created a predominantly image-based poster but gets the reader’s attention by placing the headline in an off-angled element.
 |
| Fig5.4: poster |
In her flattened “Elevate” poster, designer Kelly Salchow MacArthur willfully pulls the reader’s gaze to the start of the word “elevate,” and then back to the composition’s top.
Comments
Post a Comment