Color Echo/ Activity 11

In this activity we were supposed to find a digital image then create a background and add text that were composed of colors found in the original image.

This was the original image that I started with. I took this image and removed the background so there was only the redskins helmet.

This was my first attempt at color echo. The off white background was from the white circle next to the picture of the Indian. The burgundy color of the font was from the helmet. I then tried to create a more intricate background like the example in the book.

I used the paint tool to draw alternating stripes. The burgundy color was from the helmet and the yellow color was from the yellow tip of the feather. Some of the stripes were not completely straight evenly spaced or lined up where they went behind the helmet.

Here the lines are perfect straight and where they go behind the helmet they come out at exactly the right place because I put the stripes on a different layer. I had some problems with the text at first because one of the stripes was the same color as the text and I had to go back and add space between the strip and the text. Some of the stripes are at different angles and do not have uniform space between them. I think since the lines are perfectly straight this makes the gaps and different angles look worse. I like the one with the and drawn lines better. I also like the space between the line and the helmet rather than just the helmet laid over top of the lines.


During this class period we also discussed hue and saturation. I added some images discussing the change in hue and saturation.

This was the original image that I started with.

The first thing I did was to set the hue to -30. This added more blue than the original image contained. The purple places in the ocean turned to dark blue and the red places on the mountains turned more pink.
Most of the green areas on land turned yellow. But, there was still some green places left.

I change the hue again and this time the image looked completely different. None of the colors were in the same area as they were in the original image. The ocean is now green and yellow and the land is light blue, dark blue, purple, and red. Next I put the hue back to the default settings and played around with the saturation.

This is the original image with a little change in the saturation. All of the colors are the same but they are more dull.

Here I set the saturation all of the way down and there are no colors left. Everything is in a gray scale.

Text Safe Areas/ Activity 10

For this activity we were supposed to create text safe areas over a background.

I continued with the brick themed background from activity 9. Here I created a solid white text safe area (0% opacity) with black text. The black text with a white background creates a bigger contrast and is easier to read.

This image is the same as the previous one but, I changed the opacity of the text safe area (25%). I think this text box is more visually appealing and it still maintains the contrast between the color of the text and the color of the text box safe area.

This image is similar to the previous one I just changed the opacity to 50%. This makes it so you can see more of the background through the text safe area. But, at 50% opacity the text safe area still maintains enough contrast from the text that it is still easy to read.

This image the opacity of the safe text area is set to 75%. This makes it easier to see the background behind the safe text area. But, the more opaque text safe area reduces the contrast between the text making it more difficult to read the text. I used a text that can be used on top of the brick without using a safe text area but if this text could not be read without a safe text area it would really difficult to read with the opacity set at 75%.

Here I used a black background with black text and a white safe text area at 75% opacity. Since you can see through the safe text area to the background there is not a lot of contrast between the text and the background making it more difficult to read.

I used the same background but set the save text area to 50% opacity and it is much easier to read. Pending on the text color and the background the safe text area will have to be set to different opacity to increase readability.

I decided to play around and create a safe text area that was not white whit text that was not black. I think this is easy to read but not very visually appealing. With a different background and different colors I think a colored safe text area can almost be incorporated into the design creating something that is more visually appealing than the original.

On page 189, there was a picture of a safe text area that did not have a solid straight edge. I tried to replicate this and created a safe text area then added glow, and changed the size and transparency until it was close to what I wanted. I think this is more visually appealing than just a rectangle safe text area that is used in the other images.

Legibility/ Activity 9

For this activity we were supposed to find a background and place text over it and make sure it was legible.

Here I used a brick background with white text. I thought the white text would have good contrast with the darker color bricks and keep a two color theme. The text did not stand out as much as I wanted it to. Even though there was contrast between the brownish red brick and the white text, there was not enough contrast between the color of the mortar joints and the color of the text.

Here I used the same background and the same font. I made the font color black and I also made the font bold. This black color create more contrast making the text stand out more. Making the text bold also helped for it to stand out more.

Here I decided to play around with more different backgrounds and text. I placed white text over the darker black background. Since there were not very many white stars in that area it did not effect the contrast like it did on the brick background with white text.

Here I wanted to experiment with another background. I made the text at an angle because sometimes when wood is stamped it is not always straight. Also every example in the book and the ones that I have done had the text straight so I decided to have some fun an make the text at an angle. The black text contrasted with the wood so it was easy to read the text.

Icons/ Activity 8

Activity 8 was to find an image and create an icon of that image using basic shapes and colors.

The image on the left is a picture of a screwdriver I found on the internet. The image to the right is the icon that I created using PowerPoint. For this icon I used a wide rectangle for the handle an oval for the top. A long skinny rectangle for that connected the tip to the handle. I then used three skinny red rectangles so the Icon would have the same red stripes that the image of the craftsman screwdriver did. I made the stripe in the middle a little bit longer so it would make the icon look more cylindrical.

 I created another version of an icon using Microsoft Paint. I used the same simple rectangles and circles as I did in PowerPoint but I then used some of the editing tools in paint to try and enhance the image. Created a blue square then used the eraser to create the concave part of the handle like it was in the original image. I also used the pencil tool to draw the tip of the screwdriver gut that did not come out very well.  

I still did not think I was doing a very good job on the icon so I found an example of a screwdriver icon on the internet and tried to recreate it.

I recreated this image using the combination of PowerPoint and Paint. I used a oval for the handle a rectangle for the shaft and a wedge for the tip of the screwdriver. I then put it together so it looked somewhat like a screwdriver and then copied it into Paint. I used the eraser tool to remove the lines so it would look like one image and not a combination of shapes. I also used the pencil tool to make a smooth transition form the wedge to the rest of the screwdriver.

Gestalt Principles/ Activity 7

In class we talked about the four Gestalt Principles: Closure, Proximity, Similarity, and Continuity. Created images that represents each of the four Gestalt Principles.

The first Gestalt principle I crated a visual for is Closure. We see images and attach meaning to them. If there an image but it is not quite complete our brain will connect the lines completing the image that we have perceived. I created an image to show this. I used two "L" shaped blocks and rotated them so they are almost touching but there is an open space in the middle. The open space is in the shape of a square but not all of the sides are connected. Our brain will connect the lines so when we look at the image we see a square. 

The second Gestalt Principle we discussed in class was Proximity. We group things that are physically close to one another in meaning full ways. In the image that I created there are two groups of 9 of the same size circles arranged in three column by three row square. We would associate the second square as being larger because there is a greater proximity between the circles.

The third Gestalt principle is similarity. Simularity is when we group like objects together. To repersent this I had two groups of 9 circles one group had small circles and the other group has large circles.

The fourth Gestalt principle is continuity. Continuity is when we look for unity in objects. To depict this I had an rectangle with an arrow going through it. In our mind we assume that even though we cant see the arrow behind the rectangle it is still there going in a straight line.

Multi-Image Ad Comparison

For this ad I thought about something that you might see in a magazine. A lot of magazine ads do not have many words. I made the title at the top bigger and the text at the bottom smaller so it kind of guides your eye down the page. The title the picture and the text at the bottom are all centered on the page so everything is aligned.

Evaluating Composition (C.A.P.)

Connection
Can Adjustments be made (large or tiny) to create more relevant connections between elements?
Large scale- I think if I named the posts better the blog as a whole would seem more organize and better connected. I think doing a better job describing what the assignment was would help make a more relevant connection to what the picture is and what it is trying to achieve.
Small- I think I could have done a better job on the grouping assignment. I think the celebration, anarchy, and isolation are only describe what the words are after you read what I did and why. I thing that someone should be able to read the list of works and then look at each of the diagrams and be able to tell what each one is. The cropping in picture one is not very different from the original picture. I should have made more distinction in the cropping so it showed the element I was trying to represent.

If this is a multi page design is there strong visual and thematic connections between the pages?
No, the only thing that is consistent is the black background and whit text. 

Alignment

Do I have a clear answer for any question that a client might ask me about the alignment and placement of each component?
No, I place most of the items where I did arbitrarily without any particular reason.
Are conventions of alginment (flush-left, Flush right, centered, ect.) being consistently followed throughout a piece?
All of the pictures are aligned in the blog because Blooger puts them in the center. Some of the text is left aligned and some of the text is centered. I need to do a better job of making sure everything is consistent on the next project. I think if the items in the blog were aligned better it would make things seem more organized and better put together.
Are there areas of trapped space that could be eliminated? Yes there are areas in the grouping section and in the Picture 2 section. I also did not add spaces uniformly thought the blog. I think it would look better if I added one line of space after each picture or paragraph of writing. That way everything would be the same.


Priority

Is there clear and appropriate hierarchy between elements?
Everything in the blog is organized according to most recent post. Whatever was posted last will be at the top of the blog. There is no hierarchy for order of importance.
Should any large elements be larger or any small elements be smaller?
I think that the grouping exercise the word that is being shown should be a little larger. I is currently a little bit difficult to read.
Is there a pleasing sense of visual flow through?
No, I do not think by blog is very appealing visually. I have never been very artistic and nothing I do or design is ever very visually appealing. I was hoping this course would help me with this. I think for the next checkpoint I might change the colors or try something new to see if it looks better.
Does the eye feel pulled in an opposing direction or pulled off the page by the composition?
I do not think the eye is really drawn anywhere. I kind of have a jumbled mess. I need to work on organizing better. I said earlier that I think having better titles for the posts and having better descriptions of the assignment would help the organization.