A Little Nature Scene .GIF

I made this little nature scene .gif for someone who likes deer. She drew the flowers at the bottom which I scanned and colored in Photoshop, and did the same with her signature which I animated in After Effects using the write-on tool. The deer was taken from a Youtube video, rotoscoped, stylized, and made into a walk cycle animation. Background is an edited Creative Commons image.

Communication Design Portfolio

Work done through the semester of COM322 by Ethan Howard

Resume

Poster

Postcard

Brochure

Company Logo

Biz Card

Self Promo Site

I recently made a self promo website for this Web and Social Media Production Class.

A portfolio page contains eight productions I have produced. Of these, I selected ones that show the diversity of my skill set (live-action short film, 3d motion graphic, 2d motion graphic short, radio drama, radio news sample, voice acting, abstract/absurd edit, a motion graphic music visualizer, and an example of rotoscoping). This is important as it shows an employer that I am interested and trained in various disciplines from audio production, news, film, and animation. 

The contact page has linked icons to my "professional" social media accounts (twitter and blogger) as well as hyperlinked email and cell number. These elements make the website more user friendly. If an  employer tried to click on an icon to view my twitter and it didn't work smoothly, he might just disregard the entire prospect of hiring me right then and there. It's important that the website is fully integrated as much as possible to the contacts and web content contained in the site for ease of user access. We all get mad when we are forced to use poorly designed websites, so imagine if someone you were looking to hire annoyed you by not properly linking their social media icons? You'd probably not be giving them a call (you can't, since you're on a smart phone viewing the site and the number does not instantly open in your dialing screen, and copy pasting is still too tedious on a mobile device).

The process of making the site was simple thanks to the very convenient sample site folder supplied to me. By looking at an already completed website and playing around with it, I was able to quickly develop an intuition to how the Dreamweaver application worked and also a rudimentary understanding of the code. The process of embedding Vimeo content was easy, as a simple HTML embed code provided by Vimeo is entered in a line of code in the page.
I learned the importance of file organization by seeing the errors caused by unlinked images and elements in Dreamweaver. By frequently checking the live view of the site in my browser, I was able to quickly identify broken elements that appeared normal in the code but did link to the specific image I wanted. After a few hours of working in Dreamweaver I began to start using the code to navigate through elements instead of the split view, in order to familiarize myself with the more efficient method of web design.


Overall, this project was informative and has left me more inclined to learn web design. At first, the process seemed intimidating but working with the split view in Dreamweaver served as good training wheels. While it was easy to learn some of the more straightforward commands there was still a great deal of confusion in getting the elements where and how I wanted them.

Writing for Wikihow

 I created this wikihow page last semester to help those learning rotoscoping in Adobe AE. Detailed below is the process that went into writing this article.

The process of writing a wikiHow page begins with the realization that there is not enough information on how to perform a particular activity on the website. While there may be lots of information on the topic elsewhere on the web, it may not exist sufficiently in the wikiHow format. Lots of places that host tutorials exist on the web, (such as YouTube, company websites, blogs, and miscellaneous sites) but wikiHow stands out for its simplicity and ease of use for its readers, editors, and creators. The format of wikiHow pages makes the information in the article easy to absorb by using a step-by-step layout with pictures that accompany the steps; learning an activity on wikiHow is a simple process.

            After a potential wikiHow creator finds a lack of information on a subject on wikiHow, they should be sure that their knowledge and expertise in the subject is sufficient for teaching others. For this project, the chosen subject was a tutorial on a particular tool in the video layering and special effects software Adobe After Effects. This project was chosen because the creator had recently finished a college course that centered on the use of this program and the tool (Roto Brush) in particular. Rotoscoping is a special effects method that the creator of the article noticed was a common headache for students in the course. During a rotoscoping project in the course, which made use of the Roto Brush tool, the writer of the article was frustrated that specific questions regarding the brush could not be answered with the available YouTube tutorials. Issues that arose included the Roto Brush not responding to edits to the selection area made by the user, and the brush propagating to areas not near the subject. By working through these problems through trial and error, as well as reading information on various special effects websites, a solid knowledge of common problems and solutions with the Roto Brush was developed.

            During the experience of the class, the writer of the article found that there was plenty of video tutorials for the process on YouTube, but no sufficient multimedia tutorials for users who prefer not to watch a video tutorial. The writer was able to identify specific, helpful information learned in the class to the wikiHow that was not found in YouTube tutorials, to be included in the wikiHow. The next step was to gather and organize the information for the wikiHow and also research how to compose the article.

            This reference on the wikiHow website goes into detail about how to create a passable wikiHow article. One of the key points is to create an outline. For this project, the outline was made to include at least eight steps and several tips and warnings for the activity. By creating an outline first, the creator has time between the inception of the article and the writing of the first draft to consider what information, images, and other elements should be included in the article. For this project, it was determined that the tutorial should begin with the basic step of importing footage into After Effects (AE). Since the tutorial is intended for those already familiar with the software, it was determined that basic information of After Effects, such as how to create a new composition, how to create and duplicate layers, and how to export the video, would be assumed as knowledge for the reader.

            While creating the outline, the activity itself, rotoscoping with the Roto Brush tool, was performed and documented for the article. In order for a user to learn a process in software like AE, it is necessary to take screenshots to accompany the text directions. The screenshots were taken at each major step to provide a visual reference to the reader, who could read simultaneously read the article and use After Effects in order to know that they are clicking the right tools, in the correct panel, and so on.

Each screenshot was edited for wikiHow by reducing the size of the image and cropping around the relevant elements of the screenshot. In some screenshots, it was necessary to superimpose arrows and circles to highlight specific, hard-to-see elements of the image.

 One step was determined to require two images to show the contrast between what the reader’s view of AE should look like before and then immediately after the step. In sum, this tutorial relied heavily on having clear screenshots to assist the reader in learning a very visually oriented activity.

            The text of the outline was designed to be inclusive of all the relevant information for each step while also maintaining conciseness. Since there is lots of room for confusion in using a program like AE, which has many expandable features and tools tightly packed into a small space, it was important to be specific about what is being done in each step.

            After the outline was created, and all the information, images, and elements had been gathered, the draft was written in wikiHow code in a text-processing program. The simple code included in the draft serves to organize the information in the article by indicating headers, bold text, and bullet points. For example, by including a pound sign (#) before a sentence, the sentence will appear in bold; or by placing an asterisk (*) in the same fashion, which will create a bullet point. Once the code had been applied to the text, and had been organized into the preview, steps, tips, warnings, and related wikiHow sections, the text was pasted into the new article editor in wikiHow. To do this, a wikiHow account was created, which provides access to the editing tools.  To be sure that the final article would appear as intended, the preview function is used to see how the article will look once it is published. Once final adjustments have been made, and the preview reflects what the article should look like, the article is published and is then subject to editing by wikiHow users and admins.

            Overall, the process of writing a wikiHow article falls into a few steps: Research, Outline, and Editing. Although anyone can create a wikHhow page, care to all of these steps is important for making an article that can withstand the quality control of wikiHow.