Author: Jonathon Haley

I decided, for this week’s Photoshop assignment, to take NBA star Giannis Antetokounmpo (popularly known as the Greek Freak) and merge him with a Terminator’s face, serving the dual purpose of looking really cool and giving a scientific explanation for why he’s so good at basketball. I put Terminator Giannis (pronounced YAH-niss) against a dramatic backdrop complete with storm clouds and lightning.

While I do think it looks great, it’s also pretty obvious that it was made by a beginner to Photoshop…but that’ll change in the future.

First, I took an image of Giannis and removed the background. The image isn’t a pure photograph – it appears to have been put through some kind of filter, making it look slightly less than real, with more emphasis on Giannis making him stand out from the background more. After a few minutes of Google searching I did find the source photo and can confirm that it’s a real picture of Giannis that had been slightly processed – so it’s already been Photoshopped most likely. I then removed the background through a combination of the Magic Eraser and regular Eraser tools.

Next, I went looking for a Terminator image that could be photoshopped onto half of Giannis’ face – the half that’s slightly closer to us. This meant that the Terminator would need to, like Giannis, be facing slightly away from the viewer. After a bit of searching, I found exactly what I needed.

I flipped the Terminator around to look in the right direction, and then removed his (his? its?) body and neck, leaving only the head.

After that, I copy-pasted the Terminator’s head into the same project file that Giannis was in. I put the Terminator and Giannis side by side, and rotated and resized the Terminator’s head (as well as moving it over Giannis’ head) until it was the correct size and rotation. I then used the regular Eraser tool to remove the far half of the Terminator’s face, leaving us with a half-face mask. I placed this onto Giannis, and then zoomed way in to erase the bits of ear, neck, and hair that were sticking out from behind the mask. The hair especially was a bit of a problem, as I wasn’t sure at first exactly how to cut it at the point where the mask begins. Eventually, I chose something that looks pretty convincing, I think.

With that, the transformation was complete. The last, easiest step was to paste our new human cyborg onto one of the carefully selected backgrounds. I actually chose two different backgrounds, and I do like both of them. This one is “beauty in simplicity” exemplified:

But I went with this instead, as my final creation.

Here’s the link: https://shanghai.nyu.edu/

With this week’s assignment, I focused on laying the foundation for my personal website, so that I can easily add more styling, backgrounds, and other interesting stuff later. I built a very simple website, with very little styling, that contains links at the top to various parts of my portfolio, a link to my About page, and links to the Chinese- and Japanese-language versions of my page. The links to my portfolio are currently empty (set to “#”), but will be implemented once I actually have something to show (i.e. after completing some projects for ComLab). The English Index page contains no actual content except the text “Nothing yet”; the Chinese one displays a similar message in Chinese, while the Japanese one displays an error message about not being able to reach the server, but in all three languages (just to mix things up). The About page has been set up and the link to it works, although the actual About section is still very basic, having been mostly copied from the week 1 assignment using only basic HTML. The About page looks very similar to the Index page, and contains the same set of links at the top (including the language links), something I plan to do with all the other pages once they’ve been added (although plans change…). I haven’t made my about page in Chinese and Japanese yet, so the About page link only works on the English page so far. The Chinese and Japanese pages look identical to the English version, except I added separate CSS files for each language (including English) allowing me to manipulate the fonts and anything else I desire for each language. These CSS files (en.css, zh.css, ja.css) are mostly empty for now, but can be expanded later as needed, and as a result each language’s page can contain a different font, different font colors, and other styling, which still retaining the same layout and (aside from the text of course) content.

That’s what the “finished” product, although I’d call it more of a framework at this point, looks like at this time. So how’d I actually build it? Well, I used the html page that we were given for Monday’s CSS assignment, with a few modifications. I had the idea of different language-specific versions of my site very early on, and to allow for this I added a specific div tag for each language: english, chinese, and japanese. I placed the appropriate tag (depending on the page’s language) just inside the body of each html page, to encompass all the text that would be actually displayed on the page, not including the page’s title and meta fields since these don’t need styling. I also added two two div classes, called language and lang-box, to serve a similar function to navigation and navi-box, or content and content-box. These boxes hold the links to the page in other languages, and a dead link to the page’s current language. I also added the other languages’ styling around those specific links, so that i.e. on the English-language page, the button that says “中文” to switch to the Chinese page will display in the font being used for the Chinese page, not the English one.

I also added two other div classes: current-navi and current-navi-box. They’re similar to the other ones but display only the name of the page you’re currently at, on the row below the links to other pages, to make it clear what page you’re on. I made the current-navi-box box and font sizes larger than the others to make this abundantly clear; if that doesn’t make sense, it will once you’ve seen the page. Each page has its own name in a current-navi-box, and the links to the other pages in navi-boxes. Therefore, each page only has one current-navi-box.

Another thing was that since I haven’t added any content to my page (aside from text in the About section), I commented out most of the content-boxes that were included in the html pages. I kept one for each page, to contain the “Nothing yet” message in the Index and the About section’s image and text. I modified the content-box class in the css layout file – since I only need one (at least for the time being), I made it span the width of the screen to allow the text it contains to reach across the whole screen, and made its height such that it goes nearly all the way down to the bottom, but allows you to see the footer without having to scroll (at least on my computer anyway). This way, the location of the header stays consistent no matter how much text or content you add – at least until you add more than the screen can handle and need to scroll, and at that point I’ll need to find a better solution.

One more thing: I’ve put a hidden link somewhere on the website. It’s embedded in an item of text, but doesn’t go to one of the other pages on my site. Hint: What part of the website stays constant, no matter where you go…and is right at the top?

That’s about it so far! I’ve got a solid framework in place to add content, style and interactivity in the near future. All I’ve got to do now is make sure I don’t botch the upload to the IMA server…

Screenshots below, of the four semi-completed pages so far:

Understanding Comics by Scott McCloud brings up some very interesting points not just regarding comics, but also about media in general and the ways we perceive information. He notes that after making a character’s face less detailed and more abstract, we (the viewers) can relate to the character more. This is because the less detailed the character’s features (especially facial features), the easier it becomes for us to project our own ego image onto the character and assume the character’s role as our own. I think this likely applies not just to visual media such as comics and cartoons, but to storytelling in general: the less you specify about a main character (especially when telling a story from a first-person perspective), the more likely an audience will “become” the character, and relate to the events and relationships in the story much more deeply. Since the goal of all storytelling is to engage an audience’s attention, this seems like a very effective means of accomplishing that. As a side note, I’ve been thinking about writing a story of my own, but don’t know where to start; perhaps first creating a character who is not so much a person as an idea, a generality whose shoes you can fill and whose life you can experience firsthand, while still incorporating a few key specifics to drive the story forward – perhaps this would be as good a starting point as any.

Quoting Bernard Lam in The Art of Speaking (1696): “A Discourse cannot be pleasant to the Hearer that is not easie to the Speaker; nor can it be easily pronounced unless it be heard with delight.” What’s interesting about this phrase is that it counters a fundamental assumption we seem to make: that what I say isn’t exactly what you hear. What I perceive as good, might not be what you perceive as good. It comes down to how subjective you think reality is. Lam is saying that a sentence that’s good, that you feel good about, will also be felt the same way by whoever you’re talking with. While you may understand the message of my words differently than how I intended them, the quality of the actual words and sentence is never lost in translation. The medium (the words and, at an even lower level, the sounds and articulation) stays the same, while the information assumes a different form. The medium is truth, the information more of a gray area.

This may be why we find body language to be the strongest indicator of how somebody really feels about something: while they may manipulate their words to mask their true state of being (i.e. what mood they’re in, or how they feel about something that’s happened), the means they’re using to communicate these ideas express the bigger picture. That’s how I interpreted the words “the medium is the message:” to really understand a piece of information, not just at face value but also its context and the deeper implications behind it, it’s necessary to look at the means by which it was delivered to you. That’s why reading something via text or email and being told in person are two completely different things: the information is the same, but the medium is different.

I didn’t understand the meaning of the title too well, until I read the quote by Lam, near the end of the text. This helped me put things into context, and I think I understand it better now.