Week 10B

Homework for class

Render News (header) (one page, after cover)

The Third Annual: Render Logo Animation Competition (Subheader)

It is that time of year again! Head to Render’s Website to enter! Entries can be based on a known logo but it is preferred that it is an original logo. Designers can enter at the student or professional level, but be prepared to enter a valid school email to register at the student level.

About the Cover (Subheader)

The cover is a graphic created by Millersville University student, Emily Clawson. She used the program After Effects in the Adobe Creative Suite to create the video. (Possibly more?)

Pantone Universe (Subheader) (or something with a font)

Have a love for Pantone colors? Head to our partners website to see their most current merchandise. Show off your favorite pantone color via a phone case or a new watch. Even your newest sketchbook can scream pantone.

Storyboarding: How do You Utilize it? (2 pages)

To many a storyboard is the natural progression of an idea that is leading to a motion graphic. Some dive right into sketching, others read scripts multiple times and jot ideas on sticky notes. Regardless of how you storyboard, in your head or on paper, you do it.

It’s Textbook (Subheader)

The textbook way to go about starting a storyboard, for those who are trying to get back into doing them to strength their work is to brainstorm out the idea. This allows ideas to flow out and be judged against other ideas, which gets the design to their best idea.

 Once they have this great idea the next step is to rough out that idea in sketch form, no need to make it perfect. It is common practice to include detailed notes and time code  below and above to describe and work through the idea further. Then once some kinks are worked out it is time to open the program of choice and refine it and possibly even create vector art.

The Tools (Subheader) (start of second page)

Tools that can be utilized in this process is really any sketchbook that the designer is most comfortable with but if they prefer to keep things more organized one of the newest edition to the moleskine collection may be the thing for them.

(The Moleskine Pocket Storyboard notebook is great for advertising creatives, graphic designers, filmmakers, and cartoonists. It comes in two sizes, pocket (3.5inx3.5in) and Large (5in x 8.5in). The large version has 104 pages with 4 frames per page with room towards the bind to write notes. Half of the pocket size is set in a similar way and the other half has two frames that take up the full page. Every Moleskine product is thread bound and has a cardboard bound cover with rounded corners, acid free paper, a bookmark, an elastic closure and an expandable inner pocket that contains the Moleskine history.) The large notebook retails for $19.95 while the pocket retails for $13.95.

Help You Help Yourself

As the designer they may have a pretty clear vision of what the finished piece will look like, the client, on the other hand, does not. This is where created a detailed storyboard in very important. Once the clients have piece of mind or the designer has gained their trust then maybe there will be less need to show a clean cut idea.

Whatever you do to create it allow it to be in the best interest of your art, the method that allows your creativity to flow is the method that you should follow.

New To Render

Here are the latest and greatest that we have decided to showcase in this issue of Render. If you would like to see your displayed here send it in to render.com/newtorender to see if you can make it into the next issue. Be sure to share your favorites. 3 to 4 videos with little blurbs about them?

Review: 
ECAbrams Tutorial
I am going to review an after effects tutorial. Include a good and bad chart/ graphic and a final score. Imagery will be screenshots of the tutorial. A small section may discuss Abrams as a person.
Evan Abrams has been working in After Effects since 1995. He posts tutorials on his youtube channel every weekend and is great about answering comments or questions. Visit his site: http://evanabrams.com/

Are you linked in to the Motion social media world?

When hearing that question many immediately think of video media outlets like vimeo and youtube, yes these are great resources, but as you sit at your mobile device do you realize the networking possibilities you could be missing out on? (discuss dribble, mograph, motiongrapher?)

Dribbble (subheader)

What are you working on? Dribbble is a community of designers answering that question each day. Web designers, graphic designers, illustrators, icon artists, typographers, logo designers, and other creative types share small screenshots (shots) that show their work, process, and current projects.

Dribbble is a place to show and tell, promote, discover, and explore design.

Headquartered in Salem, Massachusetts, Dribbble began as a side project and is now a tiny, bootstrapped and profitable company helping the world's design talent share their creations and get hired. Dribbble has become a go-to resource for discovering and connecting with designers around the globe.

Motionographer (subheader)

Motionographer (pronounced like “oceanographer”) seeks to be a source of inspiration for filmmakers, animators and designers by sharing:

outstanding work from studios, freelancers and students

feature stories that give readers a closer look at influential studios and individuals

commentary that sparks discussion or introspection about the creative process

miscellaneous items that Motionographer contributors find interesting

Motionographer isn’t just about motion graphics. Inspiration can come from anywhere, and the Motionographer contributors hope to provide you with interesting material regardless of the medium in which it was created.

Mograph (subheader)

Mograph is a very discussion board/ forum based social networking site. It is very simple to create an account. In their main Forums tabs the user is able to showcase W.I.P or finished work, reels, see job listings, news, resources and tutorials. The site has a constant stream of content and can allow users to receive feedback from all sorts of viewers.

Mood Board: Updated

Above is the updated moodboard based on the feedback I received in class. I took away over half of the after effects screenshots because it was decided they were overwhelming. In their place I put more pictures of pattern to help give the feel, the motion of the magazine's brand. I do feel that this is an improvement from the last one looking back because the screenshots did take up about a third of the moodboard which is not the vibe I wanted a client to get.

Week 10A

In class I received feedback on my moodboard that the Ae aspect is a little overwhelming so I am going to go back into in a find more pattern or mood imagery to show. Another suggestion was to have pictures of magazine layouts but I feel I ended up covering that in my barnes and noble post.

I received a masthead suggestion that it could look like the characters are entering, which I felt could really work. Also, maybe including film elements or apps/ technical aspect into my articles. This is also something I am going to look into because I need to rework my content now that I understand the guidelines better.

Week 9 Out Of Class

Initial Research
I think I am going to go with render as the name of the publication because I think it gives a more high end feel like the demographic of audience is looking for then storyboard. Before diving into my moodboard and article ideas I did a little more research to see if my idea was out there already/ what was its competition. What I found was there was really not anything like this out there that I could find. Sure there is design magazines out there; even concentration specific magazines for web and print and ones strictly about photoshop, but there was none strictly about motion. As seen in the screenshot below other disciplines like industrial and interior design are all included in some of the same magazines.

 The design magazine that I felt included motion the most was a magazine called layers.

This magazine covers all of the Adobe programs, so it covers every section of graphic design.

I also looked into movie/film/fx magazines thinking that they may have things in common with my possible idea. Surprisingly all of the ones I found went so far into the movie aspect with reviews and interviews that my idea and them were not at all similar. Same with the fx magazines, then went very in depth with lighting and makeup and cg, really a lot of things that I would not cover. Through this research I really got to see that there is really not many, if any strictly Motion graphic magazines.

Sections and Possible Content

For the Required section of "Render News" The three stories that I think will be included is;

• a competition/contest section, The Third Annual Render: Logo Animation Competition- It can be a known logo but preferably an original logo. There entries can chose to enter at the student or professional level, if entering at student level a school email will be needed to register.
• The Feature Font of the Month- within the text will be a link to the font, since the readers have a large amount of disposable income the font will not be free
• The third will probably be an About The Cover, I am hoping to make the cover a video background so this section would discuss it in a small amount of words and say who it was by.

I think the feature article will be titled Storyboarding: How do You Utilize it?. This section will include how people storyboard, what tools they use, how it effects their finally piece, and how they make changes.

Another section will review a tutorial that was done by a prominent person in the industry. It will be a standard section in each issue of Render so it will be within the heading of Review but its title will be The title of the chosen tutorial.

The last section will be titled New to Render. This section will showcase work by young up and coming motion designers

Moodboard
Below is a screenshot of my moodboard. There are photos of different textures/patterns/backgrounds that give a sense of motion this helps portray the feel of my magazine. There are photos that are screenshots of After Effects and their menus to help show the tutorial/technology side. Other photos are of videos, the complete/finished product that could be showcased in an issue of Render. In the bottom right corner there is examples of different ways of storyboarding; sketching, using pen, or using the computer. I feel that this gives it a more realistic feel to show initial sketches by a designer, I think that is something that my audience would like to see. In the bottom left corner is the swatch of colors that I think should be within the magazine, deep grays and light grays, a magenta and 2 shades of turquoise to pop off of a dark background, and a yellow as an accent color, it relate to how a palette is highlighted in After Effects. The different typeface options  are also at the bottom; I am not set on a certain one yet. I do think that I want a clean, thinner line, sans serif for the header though. I also included a few body copy options, I am leaning towards sans serif. I think I will have a clearer decision on that once I decide on Header type. I feel that the imagery and color gives render a vibrant yet still sophisticated feel and covers a wide range of the Motion Design world.

Adventure to Barnes and Noble

Below is a picture of me in the periodicals section that Alyssa took when we went to Barnes and Noble.

   Above is two publications I looked through. The bright colors on the covers of each caught my eye as did the graphics of the HOW magazine. Below is the type of page I think of for my Render News section. Somewhere soon after the cover with short articles on the page and some imagery. 

Above is two pictures of a review page. There were many elements that I thought worked and that I could apply to my own project even though the content is different. I liked that review was just in the corner and the title was the thing being reviewed. I like the pullout of a summary checklist and final score to help the reader quickly understand the content.

Above is an impact spread that I enjoyed. I thought covering the entire screen with an image or video is something that the audience would really enjoy on a device. Also the small amount of text allows a lot of visual rest.

This section/ layout is something that I thought might work well for the article showcasing others' work. The video could be embedded in the interactive spread and there could be a small amount of copy about the piece and the designer.

Week 9B

During class today we critique our double page spread layouts. I overall received good feedback and only a few criticisms, like lighten the green boxes a little and maybe state at the end that he has left the chat, and maybe rework the last spread a little so it is less content heavy. Given the choice I am still unsure if I will want to currently redo my layouts.

Week 9A

Today in class I handed in my 3 double page spreads. Then the class received more of the specifics on the next project, the digital publication project. We are going to design a cover and 5-7 pages (landscape and portrait style) for our magazine. The topics is up to us but we did receive information about our readers, so there is someone to design for. Our homework was write 50 words POV about our concept and create a name.

Homework

The concept of the magazine is to be only about the field of motion design. I feel that there is nothing else out there taking on this topic in the form of a real magazine in the United States. Article ideas I have are; a feature article on a certain influential designer, firm, or company (or all three), a review of a recently posted tutorial, dos and don’ts of After Effects (maybe a info graphic) and the last section could be showcasing student work.

I have narrowed it down to two possible names for my digital publication:

• Storyboard, because it is the initial section of any project. It is where ideas are built and fleshed out before moving on to the actual program. It is also an interesting name for a magazine since it would be full of stories/articles
• Render, because of the render queue in after effects, it being what we do to complete/ show a project. Also, because of its actual meaning of to do, show, exhibit, present, which is what the magazine would do

Out Of Class: Completed Layouts!

Above are the completed screenshots from InDesign of my layouts. As stated in the last post I added the pixel grid to all spreads. It fades in and out and is a consistent element of the piece. The chat 'bubbles' are squares to reference the pixel idea. I felt the rounded rectangles was too disconnected from the piece. I changed the organic lines to thinner greener lines to reference world web wide feel. I felt that it is a lot more successful and the green connected to the rest of the layout (instead of the grey). Originally the last spread had grey on it but it felt too heavy so I changed it to the blue of the computer screen. To have continuity I added the same blue to all the spreads, it is the same blue in the title.

Below is the photos of my mounted spreads.

Week 8B

After the skype talk we had during class we had a lecture on digital publication. There are four main formats used in digital publication:

• .epub- Electronic publishing (not interactive) essentially a micro-website in HTML (anyone can read)
• .folio- Adobe's digital publishing suite (InDesign), has more capabilities
• .azw- Amazon Word, a proprietary file format for the Amazon Kindle Devices
• .pdf- Portable Document Format, interactive capabilities, slow download speed, no security 

Then we discussed e-readers and different online magazines. After class I was able to get feedback on my layouts. One of the main components that was working was the pixel grid, this is something I am now planning to include in all 3 spreads to assist with continuity.  

Off Campus Event! Zurb!

On October 3^{rd f} for the Introduction to Interaction studio we went to the Zurb Event in Harrisburg at the Dixon Center.  Zurb is a fifteen year old company who has had clients like Yahoo, Ebay and Netflix. In the beginning of the talk the presenter, Matt Kelly, discussed responsive design. Responsive design works on all media screens with a flexible fluid grid. He talked about framework which is a program his company created. Responsive Navigation Patterns were also discussed like, Hide N’ Cry and Off Canvas. Kelly stated that a negative to responsive design is optimization. For example, sometime images and other media get cut as screen sizes get smaller. In the second part of the talk Kelly discussed Zurb’s design process and showed the attendees a few case studies. The five parts to the process are, define, ideate, prototype, build, and analyze. He went in depth about each step and gave examples. For a lot of the stages he mentioned a lot of tools we use in class like, mind-mapping, site maps and wireframes, which I thought really showed how relevant the things we are doing in class really are.

Week 7B

Today in class I started to work in InDesign on taking my sketched layouts and translating them to the computer.

I was playing with the grid and the headline copy

The entire headline is now blue with the pixel font but the body copy (also not shown in screenshot above) will be in various families of univers. I felt it was a very readable sans serif that has many weights, which can mimic a chat room style since users would normally be able to type in italics and bold. The only difficulty is that because of having a pc over fall break I will have to have my body copy in something different for now.

Above is the start of my middle spread where most of the copy will take place. The lighter grey is the start of the monitor and the brown is the cookie who is looking at the screen.

Week 7A

Today in class I received feedback on my many different illustrations. Below is the form that the group had.

It was a little difficult to fill out since my print outs were not layout based but I did receive layout suggestions. A received a lot of comments from my peers about liking my original cookie. Many today were leaning towards the pixel cookie, which is the one I am leaning towards. I really liked the suggestions I received for layouts, I am going to explore those and a few others and sketch them out for next class and play with the cookies facial expressions.

Week 6 Out Of Class: Cookie Illustrations

For class on Monday I created 4 pages (2 spreads) worth of different illustrations/ concepts for my internet cookie. First I just brainstormed what reminded me of internet, what is a visual representation of it. I thought of the world wide web (like blue streaks), micro chips/circuit boards, and pixels. For colors I thought of shades of light blue or green and my standard cookie colors.

Next I roughly sketched multi-ideas in my sketchbook with sharpies. I tried with sharpies so I could get out of the tight pencil sketches that I tend to do. Throughout this entire process I really tried to push myself out of my comfort zone.

Once I sketched a lot of ideas I started to digitized a few choice ones. I tried to further my knowledge of illustrator and looked up tutorials to create new effects. For example a glow effect and different ways to create depth. The process took a while and during it I took in progress screenshots.

above is my initial attempt at the glow www idea. The eyes were the most difficult part. 

 The start of the half cookie, half microchip (terminator) cookie. To see things I create the shapes in different colors to start with.

 The original tutorial was a text effect but I tried to morph it into an abstracted illustration. (Full Screen screenshot below)

 The start of applying real colors.

 Below are two ideas that did not make the cut. I thought pixelated cookie could look interesting in green to give it a cyber feel, but he ended up looking like a pea. Below that is the start of creating a cookie with micro chips as the chocolate chips, but he looks like a potato...so I also decided to not pursue this idea.

Below are the pages I printed for Monday's class. Overall I just wanted to show the class all variations so they could help me to decide which is the best idea to pursue. I tried to push far from where I started so I could take different elements to create more successful illustrations.

 The first page is where I did variations of the glowing world wide web cookie. I tried different ways to make him glow using blur, color dodge in transparency and gradients. I also did too different color schemes to see what worked best.

 The next idea is the microchip cookie with wire limbs. I tried abstract cookie blobs coming out of him to show he is both. I did a few with drop shadow and one without to see the difference when I printed. Also, to create a good mesh of the idea, I create a chip that was the cookies colors and did not include any blobs. I feel that this is the more abstract ideas.

Above is the pixelated cookie. I started creating this with an impact spread in mind which is how pages 3 and 4 ended up combining. For that idea the grid/white pixels would fade to show text. On the fourth page is a scaled down pixelated cookie to show him in a different position with limbs. The last idea is a different cookie all together, a samoa with fudge binary code. For this cookie I made his eyes green which I felt helped with a cyber feel/idea, this is something I may include in a final version.

Week 6B

Today for class I had the image below as my new illustration that I worked on for about five hours trying to make it flatter and adding texture .

It was decided that this is still not the right feel for the layout. So I will be again changing my style somehow. This is what I will be research and changing for next class.

Week 6A

Today in class we went over our layouts that we had to print. Below is a picture of the feed back I received. It was decided that my drawing style had to be changed.

For next class I will have a redone illustration in this style.