My First WBL Field Trip

     Today I went to my first WBL trip to the Metropolitan Museum. We went to see people's works of art (obviously) and analyzed their techniques such as their usage of color or size of shapes. The first piece of art we saw was called "Between Earth and Heaven". Our group had many interpretations of

the work. But what details were important were how it was made and how it was presented. The thing that may pop out when you see this is the gold. The gold parts of the quilt was made from using foil from thrown out liquor caps. While what the message is about Earth and Heaven may be open to interpretation the other message this work tells us is to recycle. We can make beautiful things out of what seems to be waste. We can give old or thrown out things new life by reusing them, changing them, and making them new. This is important to web designers since web designers always need new ideas and sometimes the best thing to do is to remix what's old so it becomes something new. The quilt is also presented not straight but with waves in it. This gives us the illusion of motion which may be a useful trick for a web designer. Another piece of work we saw is one with 3 rectangles [I don't its name. :( ] Here you might just see 3 rectangles colored differently but there is a bit more to it. The

Man, it sure would be nice if my camera lens didn't have to go
all blurry here.

Oh, don't mind me trying to take a picture of the deer. You can
get into the shot, I'm cool with it.

rectangles are different colors and these colors invoke different emotions since that's what colors do. The color and emotion is balanced by the varying sizes of the rectangle. The red, the brightest color of the work which invoke an emotion like anger, is the smallest rectangle. The larger rectangles are the brown and black rectangles, the darker colors, which keep the red rectangle from getting all the attention. The blue background unifies the whole thing. This is important to a web designer since web designers might want to create a balance in their work and they can use color composition to achieve it. One last piece of artwork we saw was a deer made out of crystal and acrylic spheres [I know, it would've been sooo much better if I was able to say the name].  When we first took a look at this work we thought it was simply glass balls glued to a wooden model of a deer. The reason many of us thought this is that the balls magnified the surface underneath to make it look like wood grain. In reality the balls were attached to a taxidermied deer, it was the fur that looked like wood. This is important for a web designer since a web designer can use the concept of making familiar things look different to enhance their work.
     These works of art are not for everyone. These pieces of art may be more attractive to some than others. Perhaps none of the work I've shown you grabs your attention. That's something a web designer must know creating his/her website. The design of the website needs to be unique to the personality of the designer but also be appealing to the audience the web design wants to target. Not everyone will like the website but the goal is not to get everyone to like the website, it's to get the people who matter to like the website. I would make my work appealing to a particular target audience by paying attention to fine details like lines and shapes. For example, if I'm making a website for senior citizens I might want to use curved lines in the border and shapes with soft edges since many seniors are not too keen on things that are erratic in design. If I were making a site for hyperactive teens that may like rock music I may use zig zags and shapes with jagged edges. These would tie in with the erratic and explosive nature of the audience. I can make a website design unique to me by incorporating my personal preferences into the design. For example, the colors I use can be based on my favorite colors.

I probably should've made a better facial expression taking this
picture. Whatever. The other people to the right of me are fellow
classmates that went with me on the trip.

   

Lab 10 Reflection

     Often images are edited to make them look nice. This can be fixing a black and white photo or making a sunset out of a cloudy day. You will see many times that images are not in their original form but edited. Lab 10 felt like it had multiple labs in it. We had 5 pictures and our job was to use editing tools in Photoshop to make them look a certain way. In short; we changed some colors in a Family Guy poster, blurred objects in an image of soldiers, fixed a black and white photo, desaturated the background of a photo, and created a sunset. These tools were the magic eraser, blur tool, dodge tool, burn tool, paint bucket tool, sponge tool, and gradient tool. The paint bucket tool filled an area with color based on the color similarity of the pixels in that area. Blur tool is self explanatory, it blurs an area of an image. Dodge lightens areas of an image while burn darkens areas of an image (both do this based on midtones, shadows, or darkness). The sponge tool saturates/desaturated areas of an image. Gradient tool, also self explanatory, creates a gradient or blend between multiple colors. The magic eraser erases parts of an image based on a range of colors.
     In Photoshop blending mode is used to determine how multiple colors will be blended into each other. For example, under normal blending mode there is a smooth transition from color to color while darker color displays a lower value of color based on the blend. The paint bucket could've been useful in my 5th lab using paint brushes. This tool would've let me color large areas more quickly. The blur tool would've been helpful in the 7th lab where I could've used it to blur the area around the turkey. I found the paint bucket best fit for me. It was very easy to use, all with a click I could change an area's color.

Before

Before

After

After (Back Blurred)

After (Front Blurred)

Before

After

Before

After

After

Before

       

Project 2 Reflection

     Silhouettes, you may know them as the default profile picture in social media if you have not put your own profile picture. But silhouettes are shapes, usually a person or an object, that are a solid color and have a definite outline which matches the outline of the original subject. In our second project for Visual Design we used the concept of silhouettes to make silhouette and letter tracings.
     First, we needed to find a picture of someone who inspires us. I chose 32nd US president Franklin Delano Roosevelt. We also needed to find one of their quotes, for which I chose FDR's famous "...the only thing we have to fear is fear itself..." quote. It's here the project splits. We needed to hand in two JPEGs, one of a silhouette with lettering tracing and the background one color and one where the silhouette is not one color but rather made up of at least 8 pictures that tell us about the person. In both, however, there was first making the actual silhouette of the person. To do this we fist opened a new file in photoshop and opened the picture of our person. We then selected the person using any of the selection tools. I used the polygonal lasso tool since all other selection tools got me a selection with bumpy edges. This is where the project splits up.

     For the silhouette with pictures after we selected our person we went to Select in the menu bar and clicked Inverse Selection. Then we created a vector mask for the layer with the selection. The layer went from looking like a simple picture of a person to that same picture linked with a mask that looked like a silhouette of our person. We then added at least 8 meaningful pictures. We made sure that these pictures were below the layer with the mask to make sure the pictures get cut off at the outline of our person, hence making sure it stays a silhouette.
     The 9 pictures I used were an American flag with 48 stars, a picture of the White House, the Seal of the President of the United States, a picture from D - Day in WWII, a United Nations poster from the 1940s, a poster of the New Deal CCC program, a poster of the New Deal Social Security Program, a campaign poster for FDR, and a picture with a heart with dumbbells in it. The American Flag with 48 stars is put there because FDR was an American president and when he was president there were only 48 states and 48 stars on the flag. The Seal of the President and the picture of the White House further show he was the president. The picture of the D - Day landing show that FDR had an important role during WWII. FDR had an important role in the creation of the United Nation, hence the poster of the United Nations from the time period. The New Deal was a group of American government programs that FDR used to help the country recover from The Great Depression. The CCC program was one of these programs and I put it's picture in my project to symbolize FDR's New Deal. The Social Security Program was another New Deal program which still exists today, so I included it as well. FDR's campaign poster reflected the love the American people had for him as he is the only US president to be elected 4 times. The picture of the heart with dumbbells symbolizes his strength as a leader.

     For the letter tracing after we selected our person we made a vector mask and duplicated this layer. We worked on the duplicate layer and labeled it Cutout. We right clicked on our mask and clicked Add Layer Mask to Selection. After that we right clicked and selected Delete Layer Mask. This created a cutout of our person. Next, I selected my cutout by holing the command key and clicking the picture of my cutout. I then went to the Paths tab and clicked the menu selector. I selected Make Work Path and saw a new path called Work Path. I then went back to the Layers tab, selected the Text tool,  clicked on the line of the work path, and started typing my quote. The text went around the outline. The text was initially jumbled up at a few places but by tweaking the font size and spacing of the text I got it to a state where it is readable and understandable. Then I make the entire backdrop of the picture one color and made sure that the text layer was above the color layer so it can be seen and that the text had a color that made it stand out against the backdrop.
     The quote that I chose was "So, first of all, let me assert my firm belief that the only thing we have to fear is... fear itself - nameless, unreasoning, unjustified terror which paralyzes needed efforts to convert retreat into advance." The reason why I chose this quote was it is a very well known and popular quote. It also teaches you a good lesson. That sometimes your fears can keep you from progressing and moving on to do other things.
     These skills are important for a web designer because these skills help a web designer make their work more interesting. For the silhouette with pictures we needed to use meaningful pictures that told us about the person and a lot of the pictures were symbolic of what the person was about. This skill can help a web designer use symbolism in their work. For example, if a web designer is making a logo for a phone company that has been around for a long time they may want to express that fact by incorporating a silhouette of an old fashioned phone into the design.  This makes the logo more interesting and symbolic. Perhaps a web designer wants to make and ad more interesting. If the web designer wants to put text in an ad with an object as the subject they can try putting the text around the object so that the viewers attention goes to both object and text equally. These skills overall enhance a web designer's work and make it more interesting.

Lab 9 Reflection

     The way text looks can be very important to a design. You may know of different types of fonts like Times New Roman and Arial but besides these the fonts many other things can alter have text looks. The color of the text, the outline, maybe even the textures of the text. In my 9th lab for my VD course I used Blending Options to change how text looks.

     We started off by typing our name and copying it 5 times, so we had six total copies of our name. I did extra and my first name and last name separately instead of only doing my first name. Next we used the various Layer Styles in the Blending Options to change the appearance of our name. We right clicked on the layer with our name and chose Blending Options to access the various styles. One of the Layer Styles was Bevel and Emboss creates various combinations of highlights and adds shadows to a layer. Bevel and Emboss have two sub styles, being Contour and Texture. Contour helped me change the color gradient and opacity repetitions as well as the sculpting (ridges, bumps, etc.) and shadow of the text. Texture helped me apply  texture, such as bubbles, to the text.  The other Layer Styles I used were Drop Shadow; which adds a shadow behind the text; Inner Shadow; which adds a shadow inside the text to make it look recessed; Outer and Inner Glow; which added a glow either outside the edges or inside the edges of the text; Satin; which applies and interior shading; Color, Gradient, and Pattern Overlay; which applies the layer's content with a color, gradient, or texture; and Stroke; which adds a color, gradient, or pattern outline to the text. We experimented with each of these styles chaining various setting within the styles. For example, the second Jawad from the top uses the Drop Shadow. I changed the angle of the drop shadow so that the shadow of the letters were next to the letters themselves. I also adjusted the color of the shadow to be dark blue and adjusted the shadow's distance to be further from the letters.
     These skills are important to a web designer because a web designer must know how to make the smallest of detail appealing in their work. Text may not be something that is the main subject of  a web designer's work but it must look good never the less. In advertisement a web designer may not make text the main focus but should make it blend in. If this add is for a sculpting business the wed designer may want to consider making the text look like it has a chisel effect. This will help set the theme of stone sculpting. Even for logos, where the main subject may be the text itself, you still want to make it look appealing. If this logo is for a medicine company then you don't necessarily have to apply a texture or streak to the text that sets the theme for medicine. You may want to make the text very simplistic since simple logos are very appealing even if they don't have any symbolism. So you might just want to use Arial font since that font is a very simple font. Blending Options help a web designer make their work overall more appealing and interesting.

References

Adobe Support (2017, Feb 15) Layer effects and styles. Retrived from https://helpx.adobe.com/photoshop/using/layer-effects-styles.html

Lab 8 Reflection

      A subject of a photo is usually the person, object, or thing that is the main focus of the photo. Attention can be brought to the subject of a photo via emphasis. One way to emphasize the subject of a photo would be to  have the subject be more detailed than the background, or everything else that surrounds it. In our 8th lab we put emphasis on a turkey using photoshop.

     This my Thanksgiving card I made for my lab. The top of this JPEG is all white space because the card is a foldable. I added space to the top by increasing the canvas size of the original photo of the turkey. This was done, however, after I put emphasis on the turkey. The way I did this was first using selection tools to select the turkey. In this lab I used the magnetic lasso for selection as to not create many sharp edges and it was easier to select the turkey with the magnetic lasso than other selection tools (I tried). After the turkey was selected I went to Select in the menu bar and hit Inverse. This selected everything but the turkey. That means the entire background of the photo was now selected. Then I right clicked and selected layer via copy creating a layer with the background only and not the turkey. I then added a vector mask to this layer by hitting the vector layer button at the bottom of the layers panel. I selected the mask and went to Filters. I went to Blur and was given various choices for the type of blur I wanted. I ended up choosing the Box Blur. I also got to adjust how blurry I wanted the background to be by moving the sliders that determine the radius. I moved the blurriness down from default since that background didn't look too natural. I wanted to make the turkey have more detail but I didn't want to take away too much detail from the background so that it feels unnatural. After I was satisfied I added some text and increased the canvas size.
     So why would these skills be important to a web designer? A web designer needs to know how to emphasize things in their work. This is to help them draw the audience's attention to what the web designer wants them to pay attention to. Sticking to turkeys, if a web designer was designing a website for a turkey farm they would want whoever was visiting the web sites to pay attention to all the turkeys the farm has to offer. They wouldn't want the viewer to get distracted with thing that don't matter like the scenery that surrounds the farm. Emphasizing a subject makes a web designer's work more beautiful and it is important for a web designer to know how to emphasize things in their work to make it more attractive and make the viewers pay attention to what matters the most.

I'm using Ps CS6 instead of Ps CC in this screenshot

Lab 7 Reflection

     We've all heard of filters in social media platforms such as Instagram or Snapchat. Usually these filters add something or change your appearance in a photo of yourself. In Photoshop there are also filters that can change how an image looks. In my 7th lab for my Visual Design class we were trying out the various filters of Photoshop on some of our pictures.

     Above you can see the various filters I have applied to the photos I've used in the lab. To the top left you can see a very distorted image of myself. The filter that was used was Liquify. The Liquify filter allows you to distort an image by pulling it, pushing it, doing rotations, plucking areas to make it smaller, and bloating areas to make it bigger. I did all of these things to the picture of myself and created some extra dimensional being. The rest of the photos were a picture that I took during my photography hike in the very first lab of this course. To these photos I applied a filter from the filter gallery which I did by going to Filters in the menu bar and selecting Filter Gallery. From there I had a multitude of filters I could select. The filters were arranged into categories; things like Artistic filters, Texture filters, etc. It was from these categories we chose the filter we wanted to apply. We could change a few setting in the filters themselves. The Stain Glass filter I used above had a setting for the amount of cells for example. I adjusted it to have more cells from its default amount since I wanted to keep some detail of the original photo. The background of this lab is purple and yellow clouds. This was done by first creating a layer above the original white background but below all other layers. Then I went to Filter in the menu bar and there went to Render => Clouds. This created clouds in the background but I was able to choose clouds to my liking by changing the foreground and background colors in the tool bar.
     These skills are important to web designers because web designers must know how to add special effects to their work. Filters can help web designers set a theme for their work for example. If a web designer is designing a logo for an art school they may use a filter from the artistic category because they want to make the logo show that students will be learning art and thus setting the theme of art. Filters can overall enhance a web designer's work and it is important for web designer to know how to use filters to create appealing work.

Lab 6 Reflection

     Recently I completed the sixth lab for my Visual Design course. Similar to the fifth lab we were recreating one of our drawings (the same drawing we used in our fifth lab) in photoshop. However, instead of using the paint brush we used shapes to recreate our drawing. The first thing we did was open a scan of our original drawing in Photoshop (mine pictured to the left). Once in Photoshop we used shapes to recreate the elements present in our drawing. The shapes we had avaliable were the rectangle, the rounded rectangle or roundrect, the elipse or oval, the polygon, and a few custom shapes like arrows and crowns.
     With the shapes came many settings for us to play with. The fill let us choose a color for the shape. The stroke let us adjust the outline of the shape. For example, I can adjust the outline of a grey rectangle to be red, be a solid line outline, and be a thick outline. We could create our own shapes by doing various things. By selecting combine shapes we could create one entrire shape by merging two or more shapes. I can create a triangle with a semicircle at one of it's sides by using the polygon tool and the elipse tool with this setting on. There was also a setting where I could subtract parts from front shapes. So I could have a square on my screen but with subtract from front shape on I can take out a corner by using the rectangle to encompass the corner I want out and placing the rectangle to get the corner. By selecting include intersecting shape areas you could make shapes by intersecting two shapes. If you intersected two circles the area where there is overlap would become an oval shape and the area where there is no overlap would no longer be there. By selecting exclude overlapping areas quite the opposite happens. Areas of intersection will be exluded from the shape. With this setting on the two overlapping circles we previously mentioned would no longer form an oval but two connected circles with an oval gap where they would intersect.
     The skills we learned in this lab are important to a web designer because these skills can help a web designer create neat designs like logos. Shapes, unlike the paintbrush, are more exact and defined. A web designer can use the skills of how to use shapes to create neat looking designs such as aforementioned logos. They can also make advertisements or flyers using these skills.  Shapes would be a good application for these things because shapes are so neat, sharp, and defined.

My Final Work

A Screenshot of my Workspace

Lab 5 Reflection

     I recently completed the fifth lab for my Visual Design course. In this lab we used our skills with the paintbrush to recreate a drawing in Photoshop. The first thing we did was draw a picture. It could be a picture of anything, as long as it had 10 elements. My original drawing is shown below (wihout original color).

 

Then we needed to open up a scan of our drawing in Photoshop. Once in Photoshop we used the Paintbrush tool to recreate and even make better our drawing. The Paintbrush has many settings. The first and quite obvious was the color. We were constantly changing the color of our brush to color in the different aspects of our drawing. There was also the size of the brush. The size can be changed so that it can be very small to get the smallest nooks in our drawing and big enough to paint big things rather quickly. Hardness is another setting that adjusts the sharpness of the paint's edges. The more the hardness the sharper the edges. This helped us either blend things in with low hardness or create contrast with high hardness. The tip of the brush could also be changed, anything from soft circles to hard squares and more.

     We also used different clolring techniques that involved our selection skills from previous labs. It is somethimes very difficult to color within the lines of some shapes. However if we selected a particular area, using any selection tool like such as the lasso, we can color in that area without worrying about the color going to areas where it is not wanted. Another technique involed how we took advantage of the properties of layers. Coloring in an element of the bakground such as the sky or ground can be tedious. It can be hard avoiding all other elements of your drawing whether it be painting around them or selecting around them. However if we create a layer that it entirely the color of the background element and put that layer all the way at the bottom it will appear where there is no other element without interfering with other objects in the drawing. This saves time and energy.

     The skills we learned in this lab are important to a web designer because these skills can help a web designer draw and color. The paintbrush gives the user a lot of freedom. Knowing how to use that freedom can be helpful in drawing appealing artwork for the background of a webpage. Or maybe the knowledge of how to easily color with the paintbrush via selection can help a web designer color over a real life picture and make it look like a cartoon. The coloring technique can also help a web designer enhance things like making a man's beard look bushy.

My Final Work

A Screenshot of my Workspace