Saturday, September 17, 2016

Hexadecimal Color Coding and Fonts

Hexadecimal Color 

Hexadecimal color coding is a way to display color in HTML. It is represented by #RRGGBB; the R representing red, the G representing green, and the B representing blue. Hexadecimal has a base of 16 digits, which range from 0-9 and A-F. The letters are higher than the numbers, so F is like a 16. The higher the number/ letter, the lighter the color will appear and vice versa.

 We incorporated our web design knowledge with our knowledge of the hexadecimal color coding to create a webpage. Looking at the HTML coding, you can see that the body has a lot of similar looking coding. But you can see that each is a different color with a different hexadecimal color code. We started off by doing the rainbow. For example, to create red you make the RR part the highest, which is FF, and leave the rest as zeros. Then we made a lighter color/pastel section. To create the lighter colors, we made the colors less vibrant. To do this, for example, the color red: You keep the RR turned up all of the way but make the other spaces in between dark and light by making them eights. Lastly, we made a section of "colorless colors." Black is the lowest number (#000000) and white is the highest (#FFFFFF), so to create gray, you meet half way. Gray would be #888888.The hexadecimal color coding does not always have six digits. If there is a color that has the same digit in each place, it can be shortened to just three digits. For example, #FF0000 can be shortened to #F00.

 This is what the Hexadecimal webpage looks like.


In addition to creating the hexadecimal page, we made a font page as well. We first learned the eight core web fonts. Some of which are serif fonts which means they have little 'lines' or feet at the end of them, while some are sanserif which means they do not. The serif fonts include:
  • Times New Roman
  • Georgia
  • Courier
The sanserif fonts include:
  • Arial
  • Verdana
  • Tahoma
  • Trebuchet
  • Comic Sans, which is a very controversial font. Many people hate it because it is commonly misused, disproportionate, and is overused.

After being educated on these fonts, we used created a webpage for it. We included the eight core web fonts by doing the same thing as creating the color page instead with fonts. We created a div style and set the font family to whatever the font was. We then typed: The quick brown fox jumps over the lazy dog. We typed this to display the letters of the alphabet because this simple sentence includes all of the letters in the alphabet.



    This is what the font webpage looks like

Monday, September 12, 2016

Photoshop Reflection

In Graphic design we started working with Photoshop. Photoshop is used for editing pictures, so that is what we did. We edited a wide array of pictures, after watching tutorials instructing how to do it. When Photoshopping an image, it is important to be as precise as possible, or it will be easy to tell that the picture has been altered. I learned this the hard way through editing the pictures.

Content Aware Fill Tool

We started off simple by editing out unwanted marks and scratches that were on the wall behind the man. This was done by selecting the marks with the content aware fill tool, and then pressed delete. It is a very handy tool because it gets the job done easily, fast, and well. This is my favorite tool that we learned this week because it is very useful and easy to use.


We then got the opportunity to better our skills by using the content aware fill tool once more. First we selected the logo on the man's surfboard, and then we moved it up higher on the surfboard. Because the bottom of the the surfboard is slightly a darker color than where the logo was moved to, we also had to adjust the background color to match. 

                                         Spot Healing Brush

Secondly, we used the spot healing brush tool. The boy had dirt splotches all over his face, so we had to remove them. To do this we used the spot healing brush. The spot healing brush requires a sample background color selection to accurately conceal the blemish. You just select the background color, and color over the dirt, and it is gone. I really like this tool because, like the content aware fill tool, it is very simple to use, does a great job, and is very fast. 


Clone Healing Brush

Next, the clone healing brush tool was used to remove a tag from the girl's coat. Unlike the spot healing brush, the clone healing brush selects the around colors automatically. All that needs to be done is draw over the tag to erase it. After this, we added some texture back into where the tag used to be. I could have done better with this step. My 'texture" turned out being very sloppy and unnatural looking, although it is not very noticeable if it is not zoomed in. 

                                Clone Patch Tool

There was a pole perturding through the man's head in this picture, so we edited it out. We used the clone patch tool to remove the pole and then go over it with the background sky color. If you look closely, the sky is a slightly different shade to the far left because I could have done a better job using the tool. This is a useful tool, but I'm not very good at using it. 


Patch Tool

The man had a political shirt stating that "everyone poops," so we removed it from the picture. This was done using the patch tool. First we drew around the graphic, then moved it to a space that was the color of his shirt. The tool recognized the color of the shirt automatically and changed the graphic to the color.


                                           The Collage

The most challenging of the Photoshop tutorials was the collage. It involved everything that we learned from previous videos and even threw in some new things as well. Too many tools and steps were used in the making of the collage to list. We started off with three pictures of which we arranged to look like it does to the left. This sounds simple but it was quite the process. We had to get another picture to continue her sleeve because it was cut off, expand the background/ scenery, and color in the sky. I did not do so well on expanding the background as you can tell by the obvious vertical line on the left hand side of the picture. This was a very frustrating project but was educational.


Challenge

Lastly, the class got to use our creativity and newly learned skills. We were given a photograph of a man, along with multiple scenery pictures. We were then told to let our imagination soar. I had no idea what to do, so I just winged it. I probably did everything wrong, and I couldn't even recall what  did, but in the end it actually turned out looking pretty decent.