Just a college student trying to make it through Web Design

Archive for April, 2013

Pen Tool Badge

Being only familiar with how to use the mere basic functions of Photoshop, I heard very little about the pen tool. However, whenever I did hear about the tool, nine times out of ten was usually about how frustrating it is. By completing this Empowered User badge, I now see that those complaining people are correct. The pen tool is very frustrating! Like Felice, Hubbert, and Patterson stressed in their tutorials, this tool takes practice. This Photoshop tool is not just something you can master in a  few hours, but a practice you need to give a considerable amount of time.

However, despite my frustrations with the pen tool, this badge help me see the value of the skill. Although my silhouette and magazine cover are a bit rough around the edges, I could see the potential of creating exact replicas of images even as a beginner. I found myself getting absorbed in deciding which anchor points to put where and trying to practice with different images. The pen tool is definitely a important and one should continue to utilize as much as possible.

W.Vball vs. Long Beach St.- TC

Original picture of volleyball player

For the human silhouette in motion, I used an image of Bojana Todorovic, a UCLA volleyball player, just about to hit the ball. Having played the sport for many years, I know volleyball is a sport where the players are constantly in motion. I chose a jumping play to further emphasize the athleticism of the sport. While creating my silhouette, I encountered a couple of problems. Even though Patterson’s silhouette tutorial helped a lot, I had trouble creating a single shape. For some reason, my pen tool kept wanting to create another shape instead of adding another anchor point. Thankfully, I found that clicking on a smaller distance between anchor points helps.

Silhouette of volleyball player

Silhouette of volleyball player with purple coloring.

Me on the cover of "Seventeen" magazine.

Me on the cover of “Seventeen” magazine.

When it came to finding a good photograph of myself, I was amazed of how much better my pen skills had become. However, I had some trouble using the pen tool on some of the elements on the magazine. For example, I tried using the pen tool on the letters of Seventeen,but it was difficult to get a clean trace because the title was in front of the original cover girl, Rihanna’s hair. However, I think the end result looks pretty decent, especially since I am new to the pen tool.

The pen tool is a valuable skill to have in your Photoshop arsenal. Although I still need more practice, I am glad I now have to foundation to continue to learn how to use the tool to its fullest potential.



Typography Badge

It is a common misconception to believe that design is all about the drawings, pictures, and photographs. However, the key to good design is typography. In fact, the key to great design is typography. With haphazard font-usage or complete disregard for type, the entire vision for a web page, print ad, or anything else can be instantly lost. As long as the designer remembers a few crucial design rules, his or her final creation will be even better. In the following two examples, one for the web and one for print, one can see several elements of critical typography design.

There are many examples of terrible web typography out there. Whether it is because some designers are in a hurry to get the information needed up on the Internet or for some other reason, bad typography is hard to find.

The example used here is from the testimonial page of the Penny Juice website, a company that provides natural juice to daycares and schools. According to Laura Franz’s video tutorial on typography on Lynda.com, good typography should always promote reading. No one wants to try to read when they have to compete with all caps and neon-colored backgrounds. Additionally, the navigation bar to the rest of the pages on the website was at the very bottom. If a user got distracted, or more likely frustrated, he or she could likely move on to another website because the links are not easily visible.


Mini-site 3: “The Accomplishment Games”

This is the "Scroogle" page of my site, "Search Panem"

This is the “Scroogle” page of my site, “Search Panem”

I am happy to say that I think my mini-site #3, a parody of The Hunger Games, turned out pretty OK. I at first had major problems. MAJOR. Not problems like, “oh, that’s cute, you are having trouble,” I am talking about problems like, “wow… you really don’t understand JavaScript!” As it turns out, my knowledge of JavaScript was lacking. Before, I was trying to link the JavaScript files together when I only needed to create local storage variables. Thankfully, I had the opportunity to talk to Dr. Delwiche and was able to get a better understanding. I had to re-do my code is some places, but it was a lot better than trying to fix my mistakes.

Even though I am much, much, more confident with JavaScript, I hope we go over arrays… I couldn’t figure out how to “reset” my storage variables and I think I remembered Dr. Delwiche saying an array could help with that. Or I could be wrong. Regardless, I would like to learn more about JavaScript because it is a very powerful tool.

This site by far has given me the biggest sense of accomplishment! I hope you enjoy, Katniss fans or not!


Wireframe Wizard Badge

Here is the first mockup for the TigerTV website wireframe.

Here is the first mockup for the TigerTV website wireframe.

In a nutshell, creating a wireframe is not only a great option to begin designing the layout of a website, but it should be the crucial first step in the design of any web page. Before completing this badge, I knew nothing about wireframes. Now, I will sketch or digitally create a wireframe as the layout and map for the finalized page. The beauty of the wireframe is that it allows the website designer and developer to focus only on layout, without the distractions of color choice or content. For my wireframe badge, I used the Balsamiq Mockups trial software. After reading about other wireframe software, I decided to go with Balsamiq because it looks hand-drawn but is completely digital. The user can use the icons and pictures already attached with the software or they can import their own images.

I created wireframe mockups for three pages for Trinity’s TigerTV website which include the 1) Trinity Forums, 2) Weekly Shows, and 3) Manager Bio pages. In addition to visualizing the look of the web page, it was also nice to not have to worry about specific content. Take a look at the strategic document here.

Overall, try creating a wireframe. Don’t worry if you don’t have the latest wireframe software… all you need is a pen, paper, and some imagination.

Tag Cloud