Semester Reflection

What did you do this semester?

This semester in graphic design has been very helpful for me. Though I came in to this class with quite a bit of prior knowledge in Adobe Illustrator, it was helpful to learn Photoshop as well. My skills with both programs have increased by quite a bit, as well as the quality of my designs. We did a few projects to help develop our skills, so I'll talk about each one.

Learning Photoshop

Our first project in this class was to learn Photoshop. We spent a couple weeks following tutorials that would teach us how to use and apply certain tools. A challenged I faced was working with clipping masks. Before these tutorials, I used to just erase what I didn't want of a picture instead of clipping it out. I was just so used to doing it that way, but using clipping masks is a lot better because you still have the rest of the image if you ever need it. I didn't really receive any feedback for this project since I was following a tutorial the whole way through.

Learning Illustrator

After learning Photoshop, we started to work with Illustrator. We were given a tutorial to follow that would help us build a raccoon in a few days. After making my raccoon, we built a scene around it and printed out postcards. Since I had prior knowledge with Illustrator, I was able to work efficiently and had extra time to add some extra polish to my design. I really like how it turned out, the only challenge I faced was trying to think of an original theme for my Raccoon to be placed in. I was given a lot of positive feedback for this project, a lot of people seemed to enjoy it.

Vector Face

Once we finished our raccoon, we moved on to something a little more challenging. We spent a few weeks vectorizing our faces. It was a challenge to create an accurate depiction of myself that I was satisfied with. I learned that making hair in Illustrator is VERY hard and I wasn't really satisfied with how it turned out, even though I spent many hours outside of school trying to make it look good. I used gradients to contour my face, which I feel was a mistake and people I showed agreed with me. I shouldn't have tried so hard to make it just like the photo, because it ended up looking unnatural. I wish I would've had time to change it, but I ran out of time. I do like how it turned out though. I actually made a stencil version and I carved a pumpkin with my face on it for Halloween.

Infographic

This next one is my favorite project we've done so far. I made my infographic over Internet Connectivity Around the World. The idea behind this is that over half of the world is still without internet, and I believe that we should fix that. The whole project took a few weeks to do, and I'm very happy with the result. A lot of people seemed to like it, some feedback I received was regarding the header and the text inside. So I messed around with the way the text aligned and I think it turned out well. I really can't wait to get it printed out full-size, I'm likely going to hang it up in my room once I get it.

Massimo Vignelli

Finally, we did a research project over the history of graphic design. We were each assigned either a style of graphic design, or an artist. I was given a couple weeks to research and create a presentation over Massimo Vignelli. I didn't know much about him before doing this project, but I'm very glad I was assigned him. He did a lot to influence graphic design and designed many long lasting pieces still used to this day, a significant one being the signage for the New York Subway System. I received positive feedback on how well my presentation mimicked the style Vignelli used in a lot of his designs. I'm very proud of this project, I can't wait to present once we get back from break.

How did you use your time in class?

I used my time in class effectively, I was often done with my projects before they were due, which left me time to improve and build upon them. Often times I would help my peers out with their projects if I was ahead and help them catch up. Outside of class, I often find myself looking at other designs, from people doing cool things with typography, to websites, and even architecture. I like doing this because I feel like it can make me a better designer and make me more creative. I'm also on the school's FIRST Robotics team, where my job is to create graphics for the team. This helps to keep me on my toes, the extra practice does a lot.

What are your ares of strength as an employee or graphic designer?

I say my biggest strength is creating layouts for designs. This helps me out with many aspects of life. It obviously helps out with graphic design, but I also find myself applying those skills when working on things like websites too. I like applying this wherever I can, not only to make my stuff look nice, but also to improve my skills.

What are your areas in need of improvement?

I wish that I was better at being creative overall. I want to get better at creating unique designs that look really cool. A goal of mine is to create a new logo that reflects who I am. My current one is a little too similar to other designs I've seen, so that's part of the reason I'm wanting a redesign.

Summary

The thing I loved most about this semester was being able to have a teacher who could give me input on how to make my designs better and actually telling me why it looks better. I feel like the best way to learn anything is to have a mentor giving you input, so that's really helpful. I don't think I would do anything differently. My overall takeaway from this semester is that the hardest part about graphic design definitely is not actually using the program, it's being creative, at least for me. A goal of mine for next semester would be to learn how to mix fonts. I feel like that's a really useful skill to have, and it would help me out a lot, especially in web design.

Overall, I'm very happy with this class. It gives me a place to create and learn how to create higher quality works. I'm fairly certain that I will be continuing graphic design through my junior and senior years. As long as I'm creating, I'll be happy.

Hexcode Color Sampler

I made a website demonstrating how hex codes represent the colors that display on our computers. I added colors of the rainbow, a lighter version of the rainbow, and shades of gray. Here's a demo of what the colors looked like.

#e30000

#ee8800

Learning Photoshop

Overview

I've worked with Photoshop in the past, but with these tutorials, I feel like I have a better understanding of how to use it more efficiently. With these tutorials, I got familiar with:

• The Quick Selection Tool
• Using Refine Edge to get a more accurate selection
• Using the Patch Tool
• The Clone Stamp Tool
• Masking parts of an image

Here are a few of my practice photos

Removing the logo from a surfboard

This is one of the first photos I worked on. Before, there was a logo on the surfboard, but using the content aware tool, I was able to get rid of it all together.

Removing blotches from the background of a photo

In this photo, there were originally signs of wear on the wall behind the subject. Using the patch tool, I got rid of the peeling paint, and the wall looks much better than it did before.

Removing distracting elements from an image

In this image, there used to be a large pole in the background directly behind the fathers head. It was distracting from the subjects of the picture, so using the clone-stamp tool, I got rid of it.

Cleaning up dirty faces

For this image, I had to clean up the kids face. Before editing, he had a lot of dirt all over his face. To fix this, I used an image mask to get rid of the dirty spots.

The Girl with the Black Hat

For this image, I had to use everything I had learned up to that point, along with a few new techniques, like the content aware scale.

Sol Infusion

For this one, my task was to create an advertisement for a brand of lotion. I learned how to deal with linked smart objects in order to make things quicker to edit and replace in the future. 

The Landscape Man

This was the final project I had to create using the tutorials. I was on my own for this one, there wasn't a tutorial for this one. I had to use my existing knowledge and let my creativity take the wheel. I made sure that I had used all the tools I learned to create this.

I started out with just a picture of a normal looking man, along with some pictures of landscapes. I decided to put a couple of these together in order to make the setting. I placed the man behind the ocean to make him look both large and far away. I changed his clothes and hair to be made out of materials found in nature. I then added a couple of islands in the background to give closure to the picture. I'm proud of the result, and I look forward to working with Photoshop in the future.

WayBack Machine: 3 Sites, Then and Now

Amazon.com

The content on Amazon has stayed the same over the years, they've just added features. Style wise, they've gotten rid of many of the rounded borders and their outlines. The content has also been spread out more in the 2016 version.

In the 2016 version, there isn't as much text, which makes the site easier to digest. Their code has obviously changed between these versions, so let's check out the differences.






This is what their code looked like then:

<a name="top"> <!--Top of Page-->
</a>
<table border=0 width=100% cellspacing=0 cellpadding=0>
<tr align=center bgcolor="#FFFFFF">
<td>
<a href=/web/20000229110136/http://www.amazon.com/g/v11/nav/tabs/top-nav.map/ >
<img width=590 height=75 border=0 src="/20000229110136im_/http" >
</a>
</td>
</tr>
</table>

And here's what the same thing look like now:

<img src="/web/20160616140023im_/http://images-na.ssl-images-amazon.com/images/G/01/gno/sprites/nav-sprite-global-sprite_bluebeacon-1x_optimized._CB29559;
<!--[if IE 6]>
<style type="text/css"><!--
#navbar.nav-spirte-v3 .navsprite {
background-image: url{/web/20160616140023im_/http://images-na.ssl-images-amazon.com/images/G/01/gno/sprites/nav-sprite-global-sprite_bluebeacon-v1._CB327533;
}
--></style>
<![endif]-->
<!-- -->
<script>
(window.AmazonUIPageJS 7 AmazonUIPageJS : P).when('navCF').execute(function() {
(window.AmazonUIPageJS ? AmazonUIPageJS : P).load.js('/web/20160616140023im_/http://images-na.ssl-images-amazon.com/images/I/01o2nt7QnvL._RC|71seGE;
});
</script>

As we can see, the code now is much more complicated to accommodate for different web browsers, when back then compatibility wasn't much of an issue because there weren't many options in the first place.

BestBuy.com

Back when the internet was brand new and connections were slow, the goal of web designers was to design a website that had a small file size. This led to webpages looking fairly empty, as we can see here with Best Buy's website in December of 1996.

Now, in 2016, connections are much faster, so we have more content. This is an an obvious improvement from the old version.







Once again, the code for the old site is much different than the updated version:

<p align="center">
<img src="lites3.gif" alt="Best Buy - Just the Store You've Been Shopping For!" width="599" height="47">
</p>
<td valign="top" width="200"><a href="insert/">
<img src="Insert.gif" alt="Weekly Best Buys" border="0" width="178" height="96">
</a>
<p>A sampling from our weekly
        circular. Check it out!</p>
</td>

In the current version, all of the code is completely different, here's what it looks like:

<div id="header">
<!--<![endif]-->
<a href="#headerskip" title="Skip to content" class="skip">Skip to content</a>
<div class="header-inner">
<header>
<div class="secondary-fullbleed-wrap">
<div class="secondary-wrap">
<div class="value-prop"><a href="/web/20151009082825/http://www.bestbuy.com/site/misc/expert-service-unbeatable-price/pcmcat345300050032.c?id=pcmcat345300050032" data-lid="hdr_shi">Expert Service. Unbeatable Price.</a>
</div>

ChefBoyardee.com

The Chef Boyardee website has also gone through huge changes. The old version is extremely cluttered and hard to look at.

They've cleaned up the website a lot and made it easier to navigate.









Here's the code for the 2003 version:

<embed src="/web/20030801082330oe_/http://www.chefboyardee.com/flash/home.swf" quality="high" bgcolor="#ffffff" width="770" height="500" name="chef" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

I found it interesting that for their website they just embedded a flash file, but in the 2016 version, it's much different:

<a href="/web/20160405091719/http://www.chefboyardee.com/" class="brand"><img src="/web/20160405091719im_/http://www.chefboyardee.com/assets/images/common/chef-logo.png" alt="Chef Boyardee"></a>
            <div class="main">
                <div class="inner clearfix">
                    <a class="toggle-main-menu" href="#"><span></span></a>

Some common themes I noticed between these websites is the use of tables in the older version. As the languages used to create websites are updated, you can create much nicer looking sites and even better looking code. The internet has evolved since it's creation, and it will continue to do so in the years to come.

Motor-Sthetics: Robo-Dough

I'm very proud of what our team has accomplished. We were good with assigning roles in order to get the job done. We struggled most with getting our website done on time, but we came in outside of school and got it done. Next time, I want to set deadlines and make sure they get met. There isn't anything I would really change, but I have learned how to work in groups better. I worked on graphic design, and web design. Here are some screenshots of what I worked on.