Sophomore Final Blog Post

Final

  In the past couple of days I have done some new assignments as well as changed my index page.

Index page

  Before my index page had a gray background, and was basically just a simple div with links to my different projects inside of it. However that is changed now. The first thing I started off by doing was I picked a color scheme. I wanted something that was interesting, not boring, but also didn't hurt to look at. In the end I decided to go with a soft peach/pink kind of color with some purples and greens and browns in there. The next thing I did was update all of my project links as well as add a description for each one of them. I then also put links to things like my blog, and websites that have helped me this year. I also added an image of myself at the top. Here is a picture of what my index page now looks like.  Here is my index page

My favorite project

  My favorite project from this entire year is probably the one that I did for my final last semester. We got to do a website on what we wanted. I was really excited because I got to do what ever I wanted. I decided to do a website on deaf culture. The reason I chose this topic is because I love sign language, and not many people know very much about deaf culture. So I thought it would be cool to use that as my topic. I had a lot of fun making the whole website. One of my favorite parts was creating the heading and all of the graphics that I used in the website. I also enjoyed picking a color scheme. I am really happy with how it turned out.

Summer time!

  What am I doing this summer? Well I am doing an internship with my church as well as going on a missions trip with my youth group. I am also hoping to get a job this summer, I already babysit but I really want to get a more steady job. I will probably also go camping with my family. And of course I am going to sleep in and spend time with my friends and family. But the rest well your guess is as good as mine.

Next year

  Next year I will be going into web design. The thing that really helped me decided on web instead of graphic design is that I really enjoy coding as well as creating websites. With this I will also get to make some of my own graphics for my websites which I also really enjoy doing. I am really excited for everything that I am going to learn next year. 

  Until next year! Have a great summer everyone!

Create your own product

  The product that I created is called Musical Gum. I came up with this product because that day I was getting frustrated with my headphones, they kept getting caught on everything. So I came up with a kind of gum that when you chew it, it plays music that only you can hear.
  I started off with deciding what I wanted this product to be, and what it would include. Then I started in with my template. After I had the main template done, I picked a color scheme.
  I wanted the colors to be kind of welcoming, and catch your attention. So I went with a light blue color for the background with some brighter colors to attract attention.
  I then went to a website that generated nutrition facts, and made a nutrition label. There is also a website that creates a bar code for you, so I did that too. I also wanted to have something on the package that had to do with music. I found this image that was labeled for reuse and put that on my template.
  I also created little star like icons advertising new flavors and coming soon to grab attention. To do that I just used a star shape and then copied and pasted it multiple times and rotated them so that I got the shape shown on my template and package.
  I then tried to do the 3D revolve of the bottle, however I could not get the label to show up on the 3D revolve. So I went on to the box 3D revolve, this went really well, I didn't have any problems with getting the sides on to the box. So I went back to the bottle and found that a few of my symbols that I had used on my box worked on the bottle. So I just put those on the bottle. I am not very happy with how the bottle turned out, but I couldn't get it any better in the time that I had.
  Finally it went off to print. When I got it back and folded it all together. When I folded and glued it all together I saw that my glue flaps were a little off, but other than that I thought that it turned out pretty good.

Advertisement:
  Almost everyone has used headphones before. So almost everyone has had the problem where the cord of their headphones get caught on something. For example if you are running, then the cord gets caught on your hand and the headphones get ripped out of your ear.. ouch. Well now you will never have that problem again. INTRODUCING Musical Gum!! Just pop the gum into your mouth and start to chew. Then music will begin to play inside your mouth. No one else will be able to here it, and the flavor is long lasting too! No more long cords that get tangled in your backpack, or get caught on everything. No more gum that looses its flavor in 5 minutes. You now get the best of both words. The gum comes in all kinds of musical flavors. Pick the flavor based on what kind of music you want to listen too. Pick the gum flavor based on the box color. Blue is winter mint flavor, Pink is bubble gum flavor, and so on and so on. The options are endless. Get your box of Musical gum while supplies last.

E-magine

Add caption

E-magine was a lot of fun. I got to see everyones different projects. Which I thought was really cool. It gave me a chance to see the types of things that I could do in the future. I also enjoyed seeing how creative everyone is and all of their really awesome ideas. I also got to hang out with my friends. 

Responsive Web Design

Questions

What is responsive web design: Responsive web design is a way of creating sites to provide an optimal viewing- easy to read, to navigate, and minimum resizing and scrolling required for a range of devices.

Why is responsive web design important: It is important because many people don't just use a desktop anymore, but also mobile devices and tablets. So responsive design allows you to have just one website that can easily be viewed on multiple different devices.

What are media queries: This is a CSS module that allows content to adapt to different conditions such as screen resolution (screen size)

What are breakpoints: Breakpoints are the point at which your sites content will respond to provide the user with the best layout for their device.

A Responsive site

Desktop view

  I found this website by searching "responsive web design web sites".

Desktop view with drop down menu.

  This first screen shot is of the website on a desktop at the normal size. It has the navigation at the top, it has a one column design, you can only scroll down as well. And also when you hover over the tabs in the navigation bar then a bunch of options come down. 

Tablet View

 This screen shot shoes what the website would look if it were on a tablet. The only thing that changed was the top menu. The drop down menu is the same. However instead  just the name, the tabs, and the shopping cart on top there are some new things. There is a wish list, sign in, search, and store locator options. The logo is also now right above the drop down menu.

Phone view

  This screenshot is what it would look like if were looking at this website on a phone. everything has shrunk down, but not so that you can't read everything. Instead of having everything going horizontal, it is all going vertical. So now the web page is longer, but it also means you don't have to scroll left and right all the time just to read something. Another huge thing that changed is the menu. Instead of it being in the middle it is now on the left. And instead of hovering over it you have to click on that button. and it comes out from the side. throughout all of the view the text did not change very much. It might have gotten smaller as the screen gets smaller, but only by a little bit. The images did shrink a little, however they are still very easy to look at and see what it is, the same goes with the content in the website. They didn't compromise being able to see it and read it by having the content go further down rather than shrinking it all to see it all at the same time.

 

Phone view with drop down menu

   

The website I used:   http://us.aritzia.com

Desktop and Mobile Trends

Bounce rate, pages, and time.

   A bounce rate is the percent of visitors of a specific site who navigate away from the site after viewing only one page. As the years has gone by this percentage has slowly risen. As the bounce rate has risen the amount of time people spend on a website has dropped. The reason is that viewers are now looking for a specific thing when they go to a website, so as soon as they find what they are looking for then they exit the site without looking at the rest of the website. This also means that the number of pages that the average viewer looks at is considerably less than if they were looking at the website to look at all of it's content instead of looking for one thing. 

Desktop vs. Mobile

  In the past couple of years research has shown that there has been a shift in how people view websites as well as for how long. In the past every body just used a desktop to look at the website that they wanted to look at. However that was before we had phones and tablets that could do the same thing. Now with all of the smart phones that are out and available, people tend to look at a website with a mobile device instead. This in a way is good however. It allows the viewer access to a website incase they are on the go and can not reach a desktop right away. It allows the viewer to get the information they need at any moment. But as the amount of viewers looking on mobile devices go up, then the amount on desktops go down.

   When someone uses a mobile device they tend to not stay on the website very long, which also means that they look at less pages. Because more people are using mobile devices to look at websites more often these days, web designers have to make sure that their website is both desktop friendly and mobile device friendly. This means that they make it so that the website can be shown on a smaller screen and still be useable, and so that the users do not have to zoom in and scroll a ton just to see a little of the website.

Links

   http://www.emarketer.com

   http://marketingland.com

   http://www.smartinsights.com

   

Consumption Poster

   This is my Top 10 poster. I really enjoyed making this even though I ran into a few problems along the way. However I still enjoyed creating it.

Step 1:

   The very first thing I did was create a list of all the things that I couldn't live without. I then took 10 of them and wrote why I couldn't live without them.

Step 2:

   The next thing I did was I sketched out a few different ideas of what I wanted my poster to look like. Out of the three ideas I decided to sketch a larger version of two of them, because I couldn't decide which on I liked more. 

Step 3:

   Once I decided which design I liked more I went into Indesign and started the outline. I started by drawing the lines of where the text were going to go. I then made boxes for each of the paragraphs that I was going to have. 

Step 4:

   Next I went into Word and typed out all of my paragraphs talking about each of my items. I put each item on a different document. Originally I was just typing straight into Indesign, however the kerning kept getting really messed up and looked really weird. So then someone suggested that I type them into another document and place them into each box.

Step 5:

   After all the paragraphs were finished I went into Indesign and clicked on the text boxes that I put in there earlier. I then pushed command D which is the short cut to place something into it. I then chose my word document and it moved on to the next one.

Step 6:

   Once I had placed all of the text into the boxes and had them shaped the way I wanted I moved on to the photos. I went into Photoshop and edited all the pictures I wanted to use. I then saved them for web so that they would be a jpg. 

Step 7:

   I then had all of my pictures edited. I originally had planned to place all of my pictures as a collage in the background. So I slowly started to add each photo in. About half way in I thought that I didn't like it so I tried to think of something else to do with the photos while keeping the paragraphs the same design. However I couldn't think of anything so I kept going instead.

Step 8:

  After I finished putting all of my pictures in I decided that I didn't like the white background behind the paragraphs, so I played around with putting color behind them. I started that by creating a new layer and locking the other layers so that I wouldn't move or mess anything up on accident. I also made sure that this new layer was below the text layer so that it would appear below the text and not on top of it. I couldn't figure out any other way to do this since I am not familiar to InDesign so I just did this. I created a rectangle out of the color that I wanted it to be and made sure that it didn't have an outline. I then used the direct select tool and moved the corners and sides so that it matched up with the lines I already had. I also deleted the lines that I originally had so that it wouldn't clash with the new coloring.

Step 9:

   I finished the color and the images and the text. So my next step was to print it out to see how it would look on paper. When I printed it I got a couple different peoples opinion on it. One person said that I might think about rounding the edges. A different person told me that I should try to make my name pop more, because at that time it was kind of hard to read.

Step 10:

   The first thing I did next was round all of the corners which meant that I rounded the corner of the images in the corners, and I rounded the corners of the color. This is because I didn't have an outline of the poster, I wanted my other elements to create that outline.

Step 11:

   Next I went in to make my name pop more. I started to mess around with the different effects and decided that I at least wanted a drop shadow and an emboss of some kind. When I played around with them I decided that I really liked the drop shadow as well as the inner shadow. The inner shadow I had not excepted to like, however I did so I went with it. I also made my name and the "top 10" text the same color as the background of the text with a black outline so it would show better. And then I was finished and ready to send it off to print.

   

Saul Bass poster

Start:

   This poster is based off of the movie "Now You
 See Me" This movie is about magic and I wanted to incorporate some kind of illusion. So I decided on making a key within the skyline. Because this movie is based in a city so the skyline works well with that.
   
   I started by sketching out how I was going to make the key. I wanted it to be obvious enough that people could actually recognize it but not so much that it was super obvious. So I came up with having the buildings be next to water so that there could be a reflection in the water that could be the other half of the key.
  
    I then went into illustrator and drew the horizon line and buildings and reflection. I also put a drop shadow on it so that it would have more depth.

Text:

    I then put in the text. However first I downloaded the font. My friend had done some research and found that the font that Saul Bass uses is Hitchcock, so that is the font I chose.
   
   After I downloaded the font I typed in the title. I then copied it and with the copy I reflected it horizontally. I then added the scribble affect to it so that it looks kind of like a reflection. I did the same thing to the buildings. I also then brought the opacity of the reflections.

 Waves:

   I then needed to figure out how to make my water look like water. I wanted to do waves because I didn't want just one solid color.

   
   To solve this problem I created waves by using the pen tool. I wanted it to look like big waves getting smaller to add depth to it. However I didn't like how it looked

New Waves:

   Since I didn't like the old waves I tried just doing to solid color for the water. I had looked back at all of Saul Basses posters and didn't really see any of them with water so I just decided that this looked more his style than the old waves. So I went with this. I liked it a lot better because it didn't look like it had so much going on, which I liked.

Sunset:

   Originally I had a tried to use a gradient for the sunset, and even though it looked good it was not the style that went with the rest of the picture so I started from square one again.

   

   I decided the next best thing would be to have a small circle right behind the buildings and then have bigger circles as I moved away from the buildings. And the further out you went the colors would get darker. However I didn't really care for that to much. 

   Then I remembered how Saul Bass used the torn paper look for a lot of his posters so I thought I would try that. I went into effects and went down to stylize and then chose roughen. This effect did exactly what I wanted it to do. It gave the torn paper kind of look but still looked like a sunset. I was very happy how that turned out.

Buildings Again:

   I went back to the buildings and wanted to try the roughen effect on them too so that it would match the sunset. However once I put the effect on and got a couple of opinions on what a few other people thought I decided not to put the effect on the buildings. The reason is that it just didn't look right and the smooth buildings were a good contrast with the torn looking sunset. So I went back to how they were before.

Print:

   I then printed out my poster to see what it would look like. When I printed it the reflections looked the same as the text above. So I went in and dialed down the opacity on the reflection. I then printed it again to see how it looks. I decided to make the colors lighter because when I printed it the colors were a little darker than I wanted.






  I finally am done and this is the finished project.

Kerning

Custom Graphic Name

   I started off with the font News Gothic MT. I then typed out my first name then shift clicked under it so that I could type my last name on a as a different path than my first name. I then selected the text and made them into objects so that I could individually edit them how I wanted.
   I moved the letters so that they were a little closer than they were before. Then I started with the A. I changed the legs so that the left one was longer and had a slant at the end to line up with the H. I did this by using the direct select tool.
   I then did the dot of the I. I made it into a leaf kind of shape, again using the direct select tool. Then since the right leg of the A didn't match anymore I went back and made that leg shorter and with a slanted edge. Then I was done.

Post cards

   I did a couple different post cards. Three of them are holiday cards and the last one is a personal card.
 

   Merry Christmas Card

   This first christmas card I started by shift-clicking while in the text tool so that each letter was its own layer. After this I started with MERRY. I created a bevel and emboss for all the letters, however I alternated the bevel from outer bevel and inner bevel. I also created an inner glow as well as a slight drop shadow. Then I added a drop shadow to CHRISTMAS I also then alternated each letter with a glow that starts from the edge and then one that starts in the center. I then placed images that had something to do with christmas in each one. After doing this I realized that the that the glow that started in the center did no look good with the pictures so I changed them to all be glows starting from the edge. After this I realized it was kind of difficult to see the letters, so I added a thicker stroke to them. After all of that I created the gradient background and border. The very last thing I did was go to the shapes tool and picked the the leaves, and put them in each corner.

 Personal Post Card   

   This card was pretty easy. The very first thing I did was look for pictures that I wanted to add to it. I mostly used morguefile.com I also went to google and searched for images that are labeled for reuse. After I had a bunch I went into Illustrator and made the letters for my name. I made it so that each letter was it's own layer.  I then placed the images into my letters. Then I added the background and outline of the letters of my name. After all of this I added my last name to the corner. The very last thing I did was I added my personal logo that I had created earlier this year.

Family Christmas Card

   With this card I wanted to make it so that it would represent my family and so it could be something that we could send to other loved ones. 

   To start I gathered all the images that I wanted to use. Then I put them into the same folder so that I could find them easier when I needed them.  I then spelled out MERRY and made it so that each letter was on a different layer so that I could add a different image to each one. I then stared placing the images in and making them clipping masks. After I was done with that I opened up the shapes tool and made a heart. Then I added pictures to the inside of that too. Then I add the FROM THE CHITWOOD FAMILY and CHRISTMAS text. After this I gadded an inner glow, bevel, and drop shadow to MERRY and the heart. Finally I put in the background. I had a lot of different backgrounds set up, however I liked this one the best.

Happy Thanksgiving Card

   This card I based off of the fall card. It was really simple. I created the letters then placed the images inside also making them a clipping mask. Then I added THANKSGIVING in a nice font. The very last thing that I did was add a stroke to my text along with adding a drop shadow.

Real Or Hoax Project

   In this project the goal was to take everything that I had already learned and use it all together creating one site that looked good, and worked. With other projects I was given more instructions on how to make everything look right. However on this project I was just given the content that went into the site. I enjoyed this because it allowed me to put my own personal touch on it as well as get to use everything I had learned.

   I first started with creating a basic outline of what I wanted the site to look like. To do this I added the sidebar, main, header, footer and all the essentials. I did not think about the color scheme at that time because I wanted to make sure I had the "bones" of the site first. I then created a css page, at the same time I decided what I wanted the color scheme to be as well as what the text should look like and how I could add contrast into my website. After all the styling was done I then added the content, making an adjustment here and there when I realized something didn't work or would look better a different way. I also asked other people 

   Along the way I learned how to do a few new things. The first thing I learned was how to add a shadow to a box, like in the sidebar buttons, as well as how to add a drop shadow to the words, like in my subheading and main heading. To create it on the buttons I went to the #sidebar ul li a (this is the tag for the buttons) on the css page and add a box-shadow and a border radius. Then I did the same thing with the same amount on #sidebar ul li a:visited, #sidebar ul li a:hover, and #sidebar ul li a:active, so that the shadow would look the same when someone clicked on the button and after they clicked the button. Then to make a drop shadow on the text I went to the type of text that I wanted to add it to (h1, h2, h3, p, etc.) in the css page and add a text-shadow. By doing both of these things I added depth to my page, so not everything looks flat and 2D, it makes it more interesting.

   If I did this project again I would most likely change the color scheme. I would change it so that it had more colors, not just multiple different shades of the same color. I would also try to add something to the background so that it was more interesting. Something like an image that wouldn't attract to much attention but it would something more to it. Or maybe a background with a gradient or a simple design. I would however keep a few things that I did. One thing would be that I would keep the drop shadow on the text as well as the boxes. The reason is that it makes the page interesting and not flat. I would also keep the rounded edges on the boxes, because it again makes it different and gives it a softer feel.

  This project has helped me with things that I can then use in my next project. One of those things is that while doing this project I had times where I couldn't figure something out or a link wouldn't work or something didn't look right. So I then had to problem solve, look at the code for something wrong or ask for help. Because I was not given exact directions on how to do this project I had to figure it out on my own. It gave me many problem solving techniques that I can use in the future. This project also allowed me to put my own touch on it and see what worked and what didn't work. It also gave me ideas that maybe didn't work in this site but I could use in a future project.

  

   This has probably been one of my favorite projects that I have done so far. Because I had to figure things out on my own, as well as take a step outside of the box and try some things that I hadn't done before.

Extractions and Shadows

   In the tutorial Realistic Shadows I learned how to take an object from an image than add a shadow to it while also getting rid of pixel fringe.  To extract you can use the quick select tool or the lasso tool. My favorite way is the quick select tool. Then for the shadow I just copied the object than use the transform tool ( command - T ) to make it smushed so it would create the shadow shape. Than I  used the gradient tool to go from black to transperant. Then I also used the feathering tool to fade it out. Then I used the puppet tool to get the shadow to match up with the feet so that it looked correct. This tutorial was not very hard and showed me things that I can use in the future.

Allyson's Floating Mountain

   In this tutorial I learned about morguefile.com, how to use content aware, and how to refine the edges. The point of this project was to take something from one image and then put it into another image without having a pixel fringe.

   morguefile.com is an awesome tool to use when looking for images to use that are reusable. This website has lots of images that are many different sizes. You can search anything that you might need a picture of and it will come up with some really good options. They are also very good quality of images. It is a tool that I have used often and will continue to use.

   Content aware is very helpful when there is something in your image that you don't want to be there. For example, if you are using a really cool image but it has some words in the corner that you don't want to be there.  There a few different ways to do it. My favorite is to open up the marquee tool. then you select the area that you don't want to be there and click delete. This automatically looks at the area around and changes it to match.
 
   The refine edge tool is also a great tool. The first thing you do is you select the quick select tool
which is under the magic wand tool. Then you select everything that you want to keep. After you have all of that you click refine edge which is in your top tool bar. With that you can get rid of any of the background that is left so then you are left with just the part that you want.

   If I was going to do this project again I would add different images in the background. The reason is that I think the birds look sloppy. I would rather have something like a bigger animal on the mountain or a water fall or something that is neater. The thing that I would keep the same is the moon and how I did the sky and mountain. I really like how the moon is in the corner and isn't over powering. I also like the colors of the sky and the mountain. I like how they are not really bright but they aren't really dark either.

   After doing this project in the future I know how to get rid of a pixel fringe from an image if I need to. I also know how to add images into other images so that it looks good. This was a great tutorial for learning how to extract an image and get rid of a pixel fringe.

 

Creative Spheres

                                                                                      Colorful Sphere tutorial- Illustrator

   These two tutorials were very different. The very first thing that I did was made a new folder in my server folder. I then opened a new document in Illustrator. there were a few bumps while doing the tutorial. After a little messing around I finally figured it out and moved on. The tutorial doesn't say that you need to put your name in front, but I thought it would look cool so I added it anyway.
   The photoshop tutorial took a lot less time than the Illustrator one.  This one as a lot less detail than the other one.
   I learned a few different things in the illustrator tutorial. One thing is how to create a circle with an edge. I also learned how to create a shine on top of the sphere. In Photoshop I learned how to make a good shadow as well as how to make a reflection on the ball itself.
   Illustrator and Photoshop are different in many ways. One way is that you can create a circle in illustrator by using the shape tool, then can go back and keep changing. With Photoshop it is a little harder to do that. In the end I really enjoyed the Illustrator tutorial more because I am more familiar with Illustrator. However I do need to practice more on Photoshop so that I can get just as familiar with it as I am with Illustrator.
Sphere tutorial- Photoshop 

Red Spheres

   I made a red sphere in both Illustator and in Photoshop. I think I did better and I prefer Illustrator. The reason is that it was easier to make everything do what I wanted as well as the fact that I know how to do things better in illustrator.

   In my Illustrator sphere there are lots of shadows as well as a darker red. This one looks more 3D. The reason is probably because there are more shadows. There is also a smaller reflection spot, which makes it look more realistic.


   In my Photoshop sphere, the sphere is a brighter color, with more whites than blacks. There are also not as many shadows. This makes the sphere look more 2D than 3D.

.

Personal Logo

 When I started  I sketched everything I could think of. Then went into illustrator and replicated them. After a few ideas I decided that I really liked the box shape. The symbol meaning of a square is loyal, trusted, and sturdy. I think this describes me a little. Just because I am loyal and can be trusted. The colors also mean something. Light blue means stability,  understanding, and softness. Purple is associated with wisdom, independence, and creativity. These describe me pretty well. I am very creative, I like to be independent, I have also been told that I have lots of good advice. Pink is associated with love and caring. This also 
describes me.
   My process was really pretty simple. I first sketched
some different ideas that I had. Anything that I could think of.
Then I went into illistrator. I started on one idea, then I would think of another idea for that design so I just kept going with that until I couldn't think of anything else for that design. So then I went onto my next idea. When I was finished with all the ideas I had I just kinda messed around with different effects, I did a tutorial. But by that time I had pretty much decided on which logo I wanted. While doing this I learned how to create a 3D cube and put text on it so that it looked like it was really on there. The one thing I wish I had differently was create more sketches and spend more time coming up with more ideas. That's also the thing that I would do differently, I would spend more time coming up with ideas.