Skip to content

Kismet Arts Tangent

Art Collective

    • Fall Program
    • About
    • Blog
    • Contact

recent posts

  • Project Planning
  • Peppermint Products
  • Writing Prep List
  • Automatism
  • Latha’s Prattles

  • Instagram
  • After Effects, the Fall Quarter Project

    December 5, 2012
    Screen Shot of After Effects Project
    Screen Shot of After Effects Project

    Today is the presentation day of the quarter for my special topics project. This has been a turbulent quarter. I won’t say that I am happy about this class. It has caused me stress. There were days when I couldn’t seem to do anything right and I closed the program, stared at my desktop and then realized that I made a commitment to this topic in some way and that I had to break through the cloud of confusion.

    I could have picked drawing, but instead I wanted to “ride the After Effects Train” and unfortunately it never left the station. I wanted some help with After Effects and I felt that the only way to do that was by doing it Fall Quarter when a handful of others also took on the project. We’ve all been figuring it out separately and perhaps for the best. Today will be illuminating as to what else can be done with this program. I’ve kept close to the Kinetic type route.

    My work

    After some small starts, trying to figure out masks and importing photoshop layers, I realized that my lack of  imagination was stopping me from exploring After Effects in a way that could keep me going all quarter. It was then I devised the test. I created some music samples and then asked everyone to draw some sequences that represented what they saw in their mind’s eye when they heard the sounds. I got back a surprising amount of good and interesting lines and shapes that I then was inspired to make a music video of abstraction.

    The workflow

    I did not keep a log of how long this project took. Next time I will. I estimate that it took about fifteen hours from creating the .aep file to posting it on YouTube. First (after listening through the song a few times) I wrote down the text for the opening words. Sentence by sentence, I arranged the words in Illustrator.

    (Also see previous kinetic type project) For this: Make an illustrator file the same res as your video (super important). type the sentence. Create outlines. Ungroup. Arrange the sentence, nest words, consider emphasis. Then, group the letters word by word. In the layers panel there’s a drop-down menu where it says “send groups to layers” or something like that, I just look for the word (Sequence). Then take the layers out of the original layer. Delete the original layers. Then save.

    Then import your .ai into After Effects. Always use the Illustrator/eps checkbox option and the keep the layer size option. Then create a new composition, drag your ai folder into the comp panel (see here for a diagram of names for panels) then right click and enable time remapping. Then bring in the audio file and show the waveform and align the words to the blips on the waveform.

    I repeated this about twelve times for this project, though I only found out about the waveform bit near the end. The next thing I did was create shapes using the shapes panel. Every shape in the video is done in After Effects.  Inspired by this tutorial, GreyScaleGorilla.  I made a series of sequences where I used the previous sequence as a starting point, creating more complexity.

    Here’s what I ended up with.

    Here’s my presentation. I’ll miss these presentation days. The little things that people say when they are scriptless and describing their process. “Pulling a Nathan” means withdrawing efforts from learning After Effects. “How do to aerobics in a corset” is how Liz described the book she found on in-house designers. And the apt description of her fish friendliness indicator app “Fissues” (rhymes with issues).

    After effects project from Katarina Countiss

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Drawing Teachers

    December 4, 2012
    drawing club portraits of teachers
    drawing club portraits of teachers

    Today in drawing club, we drew portraits of our teachers. Here is Marc (top middle and lower left), Tom (the one with the glasses) and Jason (top right). Drawing people you know is known to reduce stress. Try it. Good luck with finals everyone!

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Project 3: Implementing the Design part 1

    December 4, 2012
    website screen grab as of 12-4-12
    website screen grab as of 12-4-12

    Project 3 is a team project, building a responsive portfolio website for a design firm. My primary role is the coder. Yesterday, I received the files for the logo and the photoshop comps for the website. I am working to match the photoshop comp as best I can. I believe in its design (most of it anyways) and I want to make it work. I haven’t seen a lot of websites like this and I am pleased in its uniqueness, perhaps at the cost of ease of code-abilty. So far it has been smooth other than my switching out the guts of toast’s grid system for 1140 grid’s column styles. (The difference is minimal  The css class rules read “onecol, one col last” now, instead of “grid-1, grid-2.”) I felt like I didn’t understand those. Perhaps it’s because I set up the framework 8 days ago and then didn’t really understand it and then after customizing the code a little, I might have lost what little guides that were put in there to help me understand it. Oh, well.

    The website is a work in progress and seeing it on my laptop, the grey is very faint. I must bring that up with the designers.

    So far, it’s 61 K. Projecting that it will be a about 150% more (adding more photographs and fonts), it’s the lightest website I’ve ever built.

    Project 3 (A work in progress)

    photoshop comps (there are two versions we considered before going forward.)

    (Earlier Post Relating to This Project)

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Brainstorming for Class Advertisement

    November 30, 2012

    The lastest assignment in Advertising: make a trio of posters for classes (my choice). So, I’ve chosen Philosophy  Psychology and Political Science 101. Some have recommended that I choose a suite like 101, 102, 103 of the same subject, but I really enjoy drawing parallells between disparate things. Here’s my brainstorm and thumbnail phase. I think it’s imperative to have these word maps, or at least a list of words relating, because otherwise I forget what I am doing and there’s this big blank where there should be ideas.

    word maps and thumbnails

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Advertisement for SCCC

    November 29, 2012

    Here’s my final version of the SCCC (Seattle Central Community College) ad for Advertising class. I was inspired by soviet Russian space race postage stamps from the sixties. This is my first time working with a photographer being on the set and all and co-directing the shoot. I think this is a significant improvement than my first idea. I’ve come a long way.

     

    (Earlier Post Relating to This Project)

     

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Proof of Concept

    November 28, 2012

    · Very clear understanding of requirements.

    · Understanding of the capabilities and limitations of new technologies.

    · Ability to assess design decisions early in the process.

    · Ability for the customer to visualize early on the look-and-feel of the solution.

    · Reduction in the overall risk of project failure.

    via Proof-of-Concept Design.

    Yesterday, Erik Fadiman recommended (after looking at wireframes) to try out the design suggested by them before going with them. This is called “proof of concept.” Today, I coded a few versions and showed them to one of my designers on the team. He insisted that we have the text or image come out from the triangle. After using CSS sprite and CSS transitions (using CSS Transition), I found Slide in Captions. This is helpful for Blaine to know that this design is possible before putting a lot of effort into a photoshop comp. Slide in Captions is CSS that uses hover state transitions with figure and caption tags. It is easy to implement and customize.

     

    proof of concept triangles

    Proof of Concept for Project 3

    (Earlier Post Relating to This Project)

     

    11-30-12

    Part two: Fadiman and one of the designers on my team though that the slide out caption wasn’t enough. It would have to act more like a pocket. I did some research, had some coder friends look into the problem. With advice from one of my friends, he sent me this link (Sliding Vinyl with CSS3 – ZURB Playground – ZURB.com.) and told me to save it and then take it apart until I find the code that made it work. That was really informative. I got to see where all of these complex things live in this expert document, full of code comments, url hosted images and @fontface. Saving the website, I saw how much code they used (which was a lot of javascript/jquery/things I didn’t understand). In future projects, I’ll definitely put aside at least eight hours just for researching code. I think it’s really interesting and beneficial to see all the different ways one can do something. I want to be one of those web designers that can carry out a vision. I think in this day and age of open source and Google, what can be thought up can be created using tools already available. It’s just a matter of time and expertise after that.

    proof of concept photoshop version
    Fadiman made this up in Photoshop to illustrate what would be needed to prove the concept.

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Project 3: Brand Definition Meeting

    November 26, 2012
    brand definition meeting notes
    brand definition meeting notes

    Today, the team met for an hour to talk about the brand, its name, colors, aesthetic. We started with tone and then a word association brainstorm on “symmetry” which lead to the liking of the words: telescope, angles, free-fall and space. That lead to the new name of our Interactive Strategy Company: Periscope Digital. The brand is geometric and innovative, drawing inspiration from Leonardo DaVinci, Piet Mondrian and the calm ocean.

    (Earlier Post Relating to This Project)

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Redesigning Nation Magazine

    November 26, 2012
    article spread version 1
    article spread version 1

    cover version 1
    cover version 1
    spread version 2
    spread version 2
    cover version 2
    cover version 2

    Before and After Critique.

    (Earlier Post Relating to This Project)

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
Previous Page Next Page

Blog at WordPress.com.

Loading Comments...
  • Subscribe Subscribed
    Kismet Arts Tangent
    Join 102 other subscribers

    Have a WordPress.com account? Log in now.

  • Kismet Arts Tangent
    View site in Reader
    Manage subscriptionsSign upLog in
    Report this content
    Collapse this bar
%d