Weekly Summary: Week Two

2 weeks down, 3 more to go. This week was a little more tough only because I did not have a good photo editing software until later this week when I got photoshop. I do not think I have ever done any sort of design work with pictures so this was definitely a new experience for me. It was pretty cool to see what you can do with some photos with enough skills in photo editing. Obviously all my creations were very amateur but it still let me get a good taste for what is possible with photo design. There was a pretty big learning curve for me especially after I got photoshop. I had to watch a few tutorials to figure out certain things which took some time. Once I got a little more comfortable with using Photoshop, the rest of the assignments got a little easier to do. There was also the Design Blitz that I did. It forced me to look at mundane objects in my house in a different way. Again, I am not the best photographer but I think I was still able to make some everyday items in my house look slightly more interesting.

Overall, this was a pretty tough week but I definitely learned a lot about design from all the struggling. Also it forced me to learn how to use Photoshop a little better which is nice because that could come in handy in the future.

Daily Creates

Design Assignments

GIF Assignments

My Design Blitz

Vignelli Canon Reflection

 

My Comments

Vignelli Canon Reflection

After reading Vignelli Canon, it put the process of design into a different perspective for me. One of the first things that caught my attention was when he spoke about syntactical design and showing the example of the NYC Subway map. It made me realize that there is actually a careful process that goes behind making these diagrams so they look easy on the eyes. He also mentions a few times about vulgar and irresponsible design. He relates these things to essentially criminal actions. Not being a designer, this was surprising to me since I had no idea how passionate people could be over a design. Though then I realized how bad design can definitely frustrate me, though I would think of it in terms of a software or website user interface. Boring designs or just a complicated one can be very annoying since it just makes it difficult to understand what is going on or it simply turns you off to the concept. Another way I relate to hating bad design was in programming. I have had many run ins with trying my best to help a fellow classmate to fix a bug in their program but their code is written so horribly and it visually looks like a cluster f*ck to the point where I start to get frustrated.

Vignelli also has a section on logos which I found particularly interesting because I believe company logos are pretty significant. He seems to be very keen on companies not changing their logos because he thinks they should respect the history of their logo which has been deeply rooted in their customers minds with respectable connotations. I think this is true for the most part since people do tend to freak out when a company make a pretty dramatic change to their company logo. Recently Instagram made a compete re-design of their logo which got a lot of hate since honestly it looked very amateur. Even though people who made those claims were not professional designers, they still have an inherit sense of how design should be.

His section on Typography was also interesting to me since I do 95% of my work on a computer. He talks about how every aspect of the typeface is thought about such as the spacing, weight, and typographical alignment. A font can change a lot about how your design looks, which I have found to be very true. I have found that a simple change of your font can immediately change the look and feel of your design.

The color section was something that I understood from his perspective since he talks about knowing what colors to choose for certain scenarios. I think this is something we see al around us, certain colors invoke specific feelings or thoughts in our mind. This is usually why restaurants will use the colors red, green, and blue since those colors are more associated with food brands.

Overall Vignelli Canon made me appreciate design which I now realize is all around me. Even as I am sitting here in my basement I am surrounded by design. From the carpets, this table, and even this water bottle sitting next to me. Also with our electronics such as laptops, phones, and TVs. Design plays a part in creating those devices and making them look sleek and pleasing to the eye. I think nowadays digital design has become extremely important since we live in a digital world and pretty much everyone around us owns a smartphone now. Companies now spend a lot of time designing good and minimalistic user interfaces for the apps we use to make them as intuitive as possible. I think this is a very different aspect of design compared to what Vignelli talks about since now you are incorporating user interactions with the digital user interface that you are designing.

I’m So Adventurous

footPicture

For the Are We There Yet? design assignment, I created the image above of me supposedly relaxing on a cliff.

Behind the Creation

Apparently pictures like this are very popular nowadays where someone takes a shot of their feet hanging in mid air while they are looking down some high place. Unfortunately I am sitting shirtless in my basement right now but then I was like “Hey, I have this picture of my legs and this picture of a cliff…why not?”. Now I can fit in with todays culture while being able to sit shirtless in my basement on a Saturday night 🙂

Here is the original:

IMG_5914

The Process

To make this image, I used the same methods as I did for my Slipknot Entertaining the Kids assignment. I have the tutorial in there which is exactly identical to how I created the image above.

 

My Geeky Tattoo

tattoo

Here is what I made for the Tattoos 4Life assignment. Pretty geeky…

Behind the Creation

I thought this would be sort of funny as a tattoo. “delete[] poop;” is programming syntax for C++ for when you want to deallocate or destroy the memory block that poop is pointing too. The tattoo would be meant for being above my butt so the arrow pointing down is pointing at my pooper. So essentially I am deallocating my poop, yeah I know it’s kind of stupid. Also the “[]” means that this is an array which is a type of list so poop is pointing to multiple instances or occurrences of fecal matter. The semi-colon is just a marker to signify the end of a line in C++ (and other languages). So yeah, this is my tattoo design if anyone wants an idea for their next tattoo.

The Process

I used the Mac word processor Pages to create the text for the design with the arrow.

Screen Shot 2016-05-27 at 9.11.07 PM

I opened the Pages application and clicked the “New Document” button in the bottom left of the window

 

Screen Shot 2016-05-27 at 9.11.18 PM

I selected a blank document from the template selector. After selecting the blank template I clicked the “Choose” button in the bottom right to create my new blank document to use.

 

Screen Shot 2016-05-27 at 9.14.08 PM

I then type in what I wanted and using the right menu adjusted the size of the text under the “Font” section.

 

Screen Shot 2016-05-27 at 9.14.18 PM

After adjusting the size of the text, I changed the text to Lucida Console since this is usually how text looks is most IDEs for code editor softwares.

 

Screen Shot 2016-05-27 at 9.14.50 PM

“delete” is known as a reserved word for C++ since it does special functions for you as needed. These reserved words are highlighted a special color so the programmer can know he or she is using a reserve word. I highlighted the text and under the “Font” section in the right menu I went to color and selected blue. Depending on what color scheme you have for your code editor this color will be different.

 

Screen Shot 2016-05-27 at 9.16.10 PM

I then inserted the arrow below the text. I selected the “Shape” option in the top menu bar which brought down a list of shapes that I could use. I selected the arrow for this design.

 

Screen Shot 2016-05-27 at 9.16.48 PM

I adjusted the size of the arrow using the little white squares around the arrow image and in the right menu it now gives me options to make other adjustments such as rotation since I have the arrow selected.

 

Screen Shot 2016-05-27 at 9.17.02 PM

In the right menu bar while having the arrow selected, I went to the “Style” tab to change the color of the arrow to what I desired. I made 4 variations of this image by changing the color of the “delete” text and the color of the arrow and took screen shots of each of them.

 

Screen Shot 2016-05-28 at 6.34.10 PM

I took screen shots of the four variations I made and then went to photo shop to put them into one image. I went to “File” and selected “New” to create a new blank canvas.

 

Screen Shot 2016-05-28 at 6.35.52 PM

I then set the dimensions of the image in this dialogue box to what I desired. After I was done, I clicked “Ok” to create the blank canvas.

 

 

Screen Shot 2016-05-28 at 6.36.42 PM

After I created the blank canvas, I went to “File” and selected “Open” to open the 4 images I made of my custom tattoo.

 

Screen Shot 2016-05-28 at 6.37.43 PM

I then dragged the tabs containing the custom tattoo images down so I could have a vertical split view of the tattoo images and the blanks canvas.

 

Screen Shot 2016-05-28 at 6.38.11 PM

I could now simply drag and drop the image into the blank canvas one by one and move them around on the canvas to align them.

 

Screen Shot 2016-05-28 at 6.42.48 PM

After dragging all the images into the canvas and aligning them properly, I was ready to save the image.

 

Screen Shot 2016-05-28 at 6.43.55 PM

I went to “File” and selected “Save As” and saved the canvas as a new JPEG image.

 

 

 

 

Slipknot Entertaining the Kids

slipknot_kids

For the Change of Scenery assignment, I created the photo above. I guess the daycare decided to hire the heavy metal band Slipknot to entertain the kids.

Behind the Creation

As strange as it may seem, I am a fan of rock and heavy metal. I don’t keep up with it nowadays but heavy metal was actually the first genre of music I ever got into. I listen to a very wide range of music, if the song is good I will listen to it regardless of what genre it is. I tried to pick a very colorful background and then I decided to pick a daycare. The band dresses in a very animalistic manner with grunge masks and clothing. So putting them in this type of environment makes them look ridiculous.

The Process

So I finally got around to getting Photoshop on my laptop so this assignment was not as hard to do since I did not have to use some crappy online photo editor.

Screen Shot 2016-05-28 at 6.00.22 PM

After opening photoshop, I opened both of my image files which are seen by the two tabs containing the image of the band that I want and the day care background

 

Screen Shot 2016-05-28 at 6.00.46 PM

I dragged the tab containing the slipknot image to the bottom of the window so I could get a split vertical view of both my images

 

Screen Shot 2016-05-28 at 6.01.15 PM

Then in the left menu, I selected the “Polygon Lasso Tool”. (You might need to right-click on this button to switch to the Polygon Lasso Tool).

 

Screen Shot 2016-05-28 at 6.01.53 PM

Then I used this tool to select around the band members to select the area of the image that I will crop into the day care image. Once I was done, a dotted line appeared around the area that I selected. (I just showed you how it looks for the tutorial, I obviously did a better cropping job than this for the actual image).

 

Screen Shot 2016-05-28 at 6.03.12 PM

I pressed Command+J on my Mac (Control+J for Windows) to then create a new layer for the cropped portion of the slipknot image. You can now see the two layers in the right menu.

 

Screen Shot 2016-05-28 at 6.11.23 PM

I then clicked the eye on the “Background” layer in the right menu to remove the background and only show the parts that I cropped out.

 

Screen Shot 2016-05-28 at 6.04.00 PM

Since I was in a split tab view, I dragged the bottom tab down a bit so I could see the top tab containing the daycare image. I can now simply drag the cropped out image of the band from the bottom into the day care on the top.

 

Screen Shot 2016-05-28 at 6.04.17 PM

After I moved the image of the band, I made the top tab bigger since I was working here now. I went to “Edit” and selected “Free Transform” to resize the image layer containing the band.

 

Screen Shot 2016-05-28 at 6.04.34 PM

After resizing the layer to what I wanted, I clicked on the “Move Tool” which is the first item in the left menu. I then applied the transformation by clicking “Apply” in the dialogue box.

 

Screen Shot 2016-05-28 at 6.06.46 PM

The I went to “File” and clicked “Save As” to save the image to my local computer.

 

 

 

My Design Blitz

For this design blitz, I took some pictures around my home of objects that exemplified 4 concepts of design. The 4 design concepts were Balance, Rhythm, Proportion, and Unity.

FullSizeRender 2

This picture represents Dominance. Dominance allows for depth and weight into your photo. The larger jar is more significant in this picture than the smaller one. If the jars were separate, then there is not real reference to the visual weight of either jar, it is not until they are together that you can see the contrasts. This is similar to how diagrams show the size of the Earth relative to the Sun, which makes the Earth suddenly appear very tiny.

 

FullSizeRender 3

This picture represent Balance by taking a picture of this symmetrical bench. This allowed to create a visual balance throughout the photo since all of the visual weight is evenly distributed.

 

FullSizeRender 4

This photo represents Unity, these ones are usually my favorite. When looking at this photo, your mind naturally wants to close the gap between the tan cushion behind the orange one. Though let me ask you this, is the tan cushion one long cushion or is it two small tan cushions put together? It is not obvious from looking at the picture, which is why I like design like this since it makes you a little curious as to what you are looking at.

 

FullSizeRender 5

This photo here is supposed to represent Rhythm with a flowing pattern. To me the swirl of the icing on the cup cake gave me a sense of spiral motion, though I guess others could interpret it differently. This photo shows a nice flowing pattern on the icing and to me it is a very pleasant one (it also helps that the cup cake was very delicious).

 

FullSizeRender

This photo also represent Rhythm though this time is is with a regular pattern. Photos like this can be very intriguing as well such as the one I took. I think it helps to zoom in close on the subject since it make the regular pattern pop some more. This one creates a sense of texture when looking at it and, similar to the symmetrical design, a balanced visual weight.

The Savage Bruce

giphy

Here is my GIF for GIF Your Sassy Animal assignment. As you can see, Bruce is giving some serious sass. Not really he’s just playing.

Behind the Creation

Bruce is my one year old cat and like most cats we play hide and go seek. Usually he will be around a corner and I slowly stick my hand out and he will jump on my hand, it’s extremely cute. People have told me that it is not always alright to let your cat use your hand as a toy, and they are probably right. When he was a kitten I use to do it all the time and there was no harm but he is bigger now and I still let him play with my hand. He does hurt me a little bit on occasion but I have gotten use to it so I never really care for it, though I could see why a person who is meeting him for the first time would be freaked out by that behavior. He mostly play bites, and you will definitely know when he is actually mad at you vs when he is playing.

The Process

I used the same tool I used for my Messi Breaking Ankles GIF assignment, Giphy. The process of creating this GIF was exactly the same. I uploaded the video from my phone to YouTube and just copied the video URL into the creator for Giphy. If you want to see how I made the GIF, then refer to the tutorial in the other assignment I mentioned.

A Little Motivation For You

faceplant_poster

Here is the poster I made for the Motivational Poster (3 stars) design assignment. Credits to Taylor Nguyen for the photo. Yeah, turf burns are no joke.

Behind the Creation

As I was scrolling through the design assignment bank on the ds106 website, I saw this assignment and immediately knew what I was going to do. The person in this picture who did the unfortunate dive then face plant is Robert Blake. He is a good friend of mine that I met this past semester since we both coincidentally took the same 3 Computer Science classes during the same section. He is currently a Junior at UMW and a very talented ultimate frisbee player for the UMW Men’s Ultimate Frisbee Club. We spent some long nights together working through painful projects and assignments for our classes. It felt just a bit better to share the late night stress with someone else rather than enduring it alone, so to thank him I made this motivational poster 🙂

The Process

To create this poster, I used the online photo editing tool LunaPic

Screen Shot 2016-05-26 at 8.39.00 PM

I went to the “Draw” drop down menu and selected “Motivational Poster” to get started (how convenient right??)

 

Screen Shot 2016-05-26 at 8.39.11 PM

This brings up this screen from where I can click on the “Choose File” button to locate the image on my local computer to upload.

 

Screen Shot 2016-05-26 at 8.47.09 PM

After finding the image, it loads up below and I now have the option to set the text for the Title and Caption of my motivational poster. I put the desired text in these fields. There is also an option to change the background and foreground colors but I chose to leave these values as they were. I then clicked the “Create Motivational Poster” button which generates the actual poster.

 

Screen Shot 2016-05-26 at 8.48.32 PM

The motivational poster is now created and I can view it in the image viewer. I scrolled to the bottom of the page where I clicked the blue “Save” button which allowed to save the motivational poster to my local computer.