Skip to content
January 7, 2014 / monicam

Hello, here comes the new!

IMG_1120 IMG_1121 IMG_1122 IMG_1123 IMG_1124 IMG_1125 IMG_1126 IMG_1127 IMG_1128 IMG_1129 IMG_1130

IMG_1131

What is that, what is that?

Well, it looks like I have  to make a new project. This time the task is to design in pairs an e-magazine, either about movies or about games. Me and my collegue decide to go for movies. The title is “Final Cut” and soon I will post logos I’ve made for it and the final one- just give me a time to find my pendrive in the ocean of many things and nirvana of my messy creativity, it means in my bag.

The task requires us to use a brand new software for us- Adobe InDesign CS6. This software is obviously used to design books, magazines, brochures and all the stuff which needs to have its own layout and which will be read. This is something I was looking forward, because I’m a reading maniac and the history knows the cases, when I had no money for food, because I’d spent them all on books. When I can link two of my passions- my subject of studying and my love for books and magazines- then I’m in!

But how to start with InDesign? Well, whenever I saw guys working on their projects in InDesign (in InDesign, try to repeat it five times in a row, but quickly) all what I could see were a couple of rectangles, placed in a huge rectangle. Now I know that these boxes are called CONTAINERS and their mission is to keep all the content inside, like pictures, headlines (especially in case when they are written with an unrecognised by InDesign font; then it’s worth transforming it into a .jpg image to use it freely for the purposes of the layout) and text.

So let’s begin with!

screen1

First of all it’s nice of you when you will open InDesign and choose  Create New->Document.

On this stage it’s also worth keeping all the files you want to use  in your layout in one, designated file. It will let to avoid any troubles with previewing/ displaying already done stuff.

screen2

Then go to the settings of a new document.

screen3

From the Document Preset choose Custom.

screen4

Define Intent for Digital Publishing (cause I don’t think so you’re gonna fancy making prints out of an e-magazine)

screen5

Choose the number of pages. However you can add as many as you wish later, when you will go from Window->Pages->Create New Page. Just sayin’.

screen6

Then go to Page Size->IPad. Sounds like a product placement, but the truth is that IPads are the most popular devices for reading e-zines, but on InDesign you can also choose from Android and Kindle. Then you have to set up an ORIENTATION (no, not t h a t kind of orientation). Basically our pages are designed to read them vertically, so we set it up for the PORTRAIT orientation, so the width is 768 and height 1024, oppositely to the horizontal position of computer screens (1024×768). So or so in Pages->Create Alternate Layout you can make an alternate layout of each page and to design them to be read in both positions of IPad- horizontal and vertical one. No matter if your IPad lies down on the back or it stays in your hands- still it’s gonna display the things nicely. Yay!

The last thing to set up is a gutter (in terms of reading e-publications it’s a space between pages, visible during move between them) and margins. If you’re more ambitious you can change the number of columns, to make your layout looking deeper, but in the same time you can determine the positions of the content by using containers, so maybe option with one column is good for the beginners to avoid unwanted mess on the page.

screen7

So we are finally IN! As you can see there are margins around the main container (blue box) On the left side there are two arrows for selecting the things-the black one is for highlighting the containers and to get rid of them or to put the rest of such content as text to another container (small red box on the lower right corner). The white one is for selecting the actual content and to transform it- here is important to keep the proportions of images right, cause otherwise they will look awful on the high quality display/folio preview. Actually on any quality display they will look awful.

screen8

So after clearing the main workplace…

screen9

We can put containers inside by drawing their shapes, like rectangles, polygons or eclipses. Luvely fun for the whole family, as they say. For example the one shown below can be used for the title, headline or after little transform for a graphic linked together with a title.

screen10

Now sky is the limit in what you will put inside all of the containers you want to use, what size of them will suit to your ideas best (still remembering about the proportions and equal size of the containers used for images, which is important later with making a gallery).

When it comes to designing the pages, it’s better to do it in Photoshop, and then to import the stuff into the InDesign- at least I found it easier for me and I think it just quicker, even to make a few alternate design of one page, only by switching on/off the layers, or by free transform some of the composition’s elements, instead of drawing the containers and filling them with the contents, which is quite time consuming. So let’s crack on with some page layouts! (I’m really sorry, but probably I won’t be able to put in here all of my 100+ screenshots. However, it’s still a production blog, where I have to write at least a good few words, so I cannot rely only on pics, like a human of Lascaux)

Lego The Movie

I had a good fun with designing that article, because I remember when I used to play with Lego, so I wanted to keep that playful and colorful character of this toy; although after watching the movie trailer I was a bit scared, because the main character Emmet behaves like he would have an ADHD. I’ve picked yellow, green, blue and red as the main colors, because these colors are the most common for the basic Lego pieces. I decided to use Lego Brix font for the title and another text pieces (like buttons), remembering also to match them with Arial, as a part of the house magazine style. But the Lego Brix in 2d version didn’t impress me at all. Then me, a poor soul, who was always struggling with Cinema 4D, decided to experiment a bit with Photoshop 3D workplace.

screen_1lego screen_2lego screen_4lego screen_5lego screen_6lego screen_7lego screen_8lego screen_9lego screen_10lego screen_11lego screen_12lego screen_13lego screen_14lego

As you can see, I was trying different settings of the extrusion ( too big one didn’t look good; as a matter of fact I just wanted to shape the font to make it look like an actual Lego construction) and colours, to pick finally bright yellow one because of its childish and optimistic look. Before I changed a tracking of characters, just to customize the font. The margins I’ve made by using a Lego plastic texture background and cutting some pieces out, and then blending them with colour rectangles- by controlling the opacity of colors and merging them with Lego pieces together I could decide, if I’m going for stronger texture effect or delicate. The whole page looked like this:

lego1

I was so happy with that and for some reason I was sticking to these margin lines so desperately- if somebody would tell me it looks rubbish, I will kill him with my bare hands! Especially I liked the fact, that this design was quite minimal, clear, but still keeping up with a main subject- trust me or not, but I was ready to kiss my computer screen, when finally I saw that. My tutor advised me to play around the pieces of the composition, to rotate them or to change their place, so I gave it a try:

lego 1a

As you can see, still I was in love with my margins. Then I went for another Lego page for the whole Lego article, which in a first version looked like that:

lego2

But after I saw my team mate’s works, I had to fit my pages to his ones, to have a common, house style of the magazine; as you could observe on an example of actually all of the magazines, in every issue there are repeating some heading, sections and logo, so with a pain in my heart I had to get rid of my margins and to go for a slightly different design:

Screen Shot 2014-01-28 at 15.33.58 Screen Shot 2014-01-28 at 15.34.31 Screen Shot 2014-01-28 at 15.34.57 Screen Shot 2014-01-28 at 15.35.55 Screen Shot 2014-01-28 at 15.36.59 Screen Shot 2014-01-28 at 15.37.09

 

And here is a very final version:

Screen Shot 2014-01-28 at 16.48.55 Screen Shot 2014-01-28 at 16.49.41 Screen Shot 2014-01-28 at 16.50.01

 

The film rolls refer to the main logo of the magazine and in a certain way to the name-“Final Cut”. The numbers on a 1st page activate a slideshow, made with a multi-state object tool (each photo is a state; I placed one by one in a one container, then I select them, add a new state and buttons, sending to each photo) and on the 3rd page there is a movie trailer- I downloaded movie trailer from the Internet (evil me, evil Download Helper). The important thing is to keep a video in .mp4 format, because that’s the most likely readable format in InDesign- .MP4 or H. 264. Then I’ ve made a container, I placed a media in there and I fitted it to the page with a content tool and I chose a media player. It’s worth putting any image as a poster for a video, because on a folio preview you can see a blank place, before you will click on to reveal a video- firstly to give a clue for a reader that there is any stuff to click on and secondly to fill the blank space to make it more visually attractive. If you suffer for horror vaculi, here is something for you.

 

I think that this one is more visually attractive and my previous mistake  was that after reading articles on magazine layouts and grids- most of them was about paper magazines- I stuck a bit too much to the idea of clarity, which is essential in case of paper magazines, devoting the interactive side of the project. Actually I forget that people read on their tablets in a different way than they do with traditional press- for instance they can scroll up/down the text, so there is more room for photos/ slideshows or videos on pages.  The things which helped me to understand it better was when I’ ve got for Christmas Samsung Galaxy Note II- a smartphone with a really big screen, but still smaller than an average tablet; I downloaded on it my actual work in .jpg and I started to play with that, like I would read a real digital magazine; that also gave me an idea where to put some interactive stuff, such as galleries and how to swipe between pages. Strange, but it works and in the same time I didn’t need to become an appleboy/ applegirl with Ipad, IPhone and maybe IPaid too.

The Hobbit: The Desolation of Smaug

Again had good fun (my irritated by sitting hours in front of the computer screen eyes say it all) with designing that, partially because of my friends, who in majority love Tolkien- personally it feels like I have to give him a try once again; it wasn’t really a good idea to start reading Lord Of The Rings when I was 10, because I didn’t get it at all. Also it wasn’t a good idea to go to the cinema for the first part of LOTR with my godfather, who is completely mad about Tolkien, so during the whole movie he tried to explain me everything- both of use had  fun, except people in the cinema, who couldn’t stand our constant discussion and his spoilers of the scenes. The sad truth is that after all I remembered only an army of ugly orks and beautiful Arwen and nothing more. And  of course Gollum; I was so sorry for him!

Anyway in terms of the visual side I had  quite strong connotations with dark forests (brown and bottle dark green) and gold ring, so I went for these colours and a sort of Elvish/ Celticish (how to say” a bit like Celtic, but actually nothing like Celtic at all”?) and Hobbiton/ Bilbo Hand fonts; all of these inspired by Elvish language are UNREADABLE. Seriously, I’ve made some typeface moodboards and I had a serious problem to read Elvish letters (so maybe I’m an ork), except one font, named- as I rememeber- L’elf du Noir, which I used to make a button, sending the reader to the page with an interview with Peter Jacobson. Here are some screenies:

Screen1_1st page Screen1_2nd Page Screen2_1st Page Screen2_2nd Page Screen3_1st page Screen4_1st page Screen5_1st Page Screen6_1st page Screen7_1st Page Screen8_1st Page Screen9_1st Page Screen10_1st Page

Actually the way of making that is similar to the Lego one, but I used Tolkien brush (ohhh, that ring, luv the bling bling) and some ornaments for margins, then I applied to them an emboss effect with a bit of glow to add them more depth. The finished page looks like that:

lotr

I like that dagger thing very much, again due to my team mate’s ideas I had to change it a bit and actually after changes I like it more! Hope that if my friends will find it by a coincidence they won’t kick me in my Three Letters-Guess-Which Ones in order to offending their favorite characters with a rubbish layout.

Captain America

The article I was really struggling with, however the word “struggling” is not a proper word, I’ ve just made a few attempts for a final layout. Firstly I wanted to combine American pop culture symbols (Coca cola font, comic book brushes, American flag), but unfortunately I couldn’t download a Loki Cola font on any of the computers I was working on. So I went for Pepsi Cola font- still with the same connotation, but actually Pepsi Cola font reminds me more fonts used for superheroes movies’ title sequences- semi bold and sans serif. But at the end of a day I discovered, that Captain America is a story about young soldier, who became a superhero and he was fighting in the name of his country, so I went for some military brushes (medals and army ranks) American flag colors (white, navy blue, red) superhero things (steel texture in my star page, Captain America’s shield) comic book visual references (background on a video page, color halfone background, reminding screen printing of comic books). Actually that works fine and I like it, especially the text wrapping around Captain’s shield, because on this way I could use a text as a lively part of a design, and still it’s clear to read; I found the Text Wrap option by a coincidence and now I know I will use in future as well.

Screen Shot 2014-01-28 at 15.32.55 Screen Shot 2014-01-28 at 15.33.17 Screen Shot 2014-01-28 at 15.33.32

 

Captain America Star Page

 

Interactivity

As a part of an interactive stuff I wanted to link to every movie title an URL, sending to the cinema’s website, to give a choice for a reader to book the tickets to the cinema for a movie he is reading an article about. In my imagination it was like :”Basing on an article I’ve read I would like to see this movie” and then the user is just clicking on a movie title and he is booking the ticket on the go. Simple, quickly and it fits to the general needs of the young target, who likes multi functionality of e-stuff, and youngsters, who are very likely to do almost everything on their devices, so they are attracted with an offer to do many things in a one publication.

My idea had one, but quite serious downside.

The 3/4 movies we discussed in our magazine hadn’t had their premiere yet, so naturally they are not screened in theatres yet. I had to go for another interactive things then. I added buttons to my pages, sending to the others (absolutely IN LOVE with a fact that InDesign doesn’t require button codes like Flash- it is just a case of adding a graphic, then going to Interactive->Buttons and hyperlinks and adding an action you want to use. The other were  mentioned before  slideshows, made with a multi-state objects- love the fluent transitions between images!

A bit confusing thing was creating  scrolling frames for texts- if you haven’t got enough room for a big chunk of text, it’s a perfect option, although still it sounds for me like Inseption – first of all you need to make a container, then deselect it and to put another one inside, where will be the text, longer than a previous one, but not as wide as the first one. Select that box, fill it with text, then…cut it and select the first one and go for PASTE INTO (I had to write it on my bathroom’s mirror to not to mistake it with a normal Paste). The text appears- do you get my confusion with a fact, that firstly I need to cut the text to actually have it?- and it’s time to go for Folio Overlays-> Scrollable Frame and choose a scroll direction.

Now I think the most time consuming thing was designing the whole stuff and I do regret that I haven’t used more interactive options, like hot spots or scrollable visual content, but I think that for the first time it is fine like it is.

Additionally I’ve made a small animation for the star pages, as an introduction to the main article- my favourite comes from the Hobbit; dark green dragon’s scale and golden ring writing looks so beautiful! My first idea for that intro was featuring dragon’s eye, but it would take more time for drawing an eye, nice shading its structure, the scales and wrinkles around it, so I went for something quicker, but also cool.

Logo

logo2 logo3 logo1

 

I designed the three different logos and finally me and my team mate went for the third one- reminding a bit the other magazine’s logos, but with a twist- film roll piece and “final cut” (which reminds me the way of editing the movies from the past by cutting pieces of the film roll and sticking them together). Everybody was asking me, what I was thinking about, when   I made “AL” in sepia beige. The answer is simple- three letters from the right, three letters from the left, so “AL” is an axis of symmetry and the beige color refers to the color of an actual, unprocessed chemically film roll. In the final version all  letters are black; for me it looks a bit sad, but fits to the Spiderman’s eyes on the cover page. I’m quite happy with a fact, that we have chosen my personal pick as a final logo; the first step to be on the cover, like a celebrity!

Oh, by the way. Once upon a time on our classes we were producing magazine covers to practice with a stuff, and here mine:

coverb

 

As you now, the magazine’s title always goes to the top, to be visible from the stand, the rest was just my funny imagination (of course, kids are not nightmares, they are just little, cute monsters). Actually the font color used for “the cover star Beyonce” writing is too pale, better would be any green,blue or simple black. Somewhere I’ve seen that trick with a title written on a colour block and I think it’s a good idea to take the title out of the colorful background. I like the font I used for the title, although I think it matches more to the magazine like Vogue, classy and elegant. For the first time not so bad!

Advertisements
November 18, 2013 / monicam

As true as ink- shooting a video in True Ink Tattoo Studio

Yesterday- actually a few hours ago- I’ve shot a video for my tattoo project in True Ink Studio. The first question probably is why so late, if my deadline is set up for 20th of November? Well, basically after exchanging messages between me and an owner of that place he let me to shoot a video after 16th of November, due to renovation of the place. I was quite worried about that, because after a long break in communication I thought he is not interested in, and in the same day when I’ve told about the situation to my Tutorial teacher I’ve received a message with a permission for shooting a video and take some photos in the studio. The stupid one is always the lucky one, as they say.

After booking a camera I’ve made a terrible wrong thing, because I went to Amazon website to see an average price of the camera I was using (Canon 100 XJF). When I saw that price and I’ve linked it with my skill to destroy every single electronic stuff even by taking a glance on it I was really afraid of using it. For me, who’s got used to the still image camera there is also a problem with such a weird thing, that you are taking photos, which are  actually moving. So firstly I’ve took a few photos to get an idea of the interior design of the place to make a choice where to put my camera on the tripod (Monika, you were a genius, when you had booked a heavy tripod and then you went on the foot about one kilometer with a camera, still image camera and that heavy guy on your backs). I wanted to place my camera on a safety way, to avoid a situation when somebody would accidentally fall it down (and for sure that somebody would be me) or not to interrupt the tattooist in his work and the customer as well- try to imagine a situation, when I would accidentally poke a customer’s foot with my tripod, he would jump on the seat where he is tattooed and…and well, after meeting with me for the first time in his/ her life  s/he would have an unforgotten memoir and the life lasting souvenir.

Actually I was prepared only to make an interview with the tattooist, because I thought that nobody would like to be shot due to the privacy issues. In my correspondence with  True Ink owner I’ve written that I will respect their decision if they wouldn’t like to be featured on my movie. I’ ve asked the tattoist just a few questions, and his answers has answered(?) for my reflections on the tattooing in the same time. So I’ve asked him, if the tattoos are a kind of the business card for a tattooist, or rather like in case of the customers it is a way of self- expression.  I’ ve asked him  about the most memorable tattoo he has ever done too and the answer really surprised me, when he started to talk about a tattoo of…a sheep, which he has done for his friend on his ribs (ouch, as I know it is the most painful place for having a tattoo) I was also curious about the “job diseases”, such as bad back or neck, caused by long sitting in one, leaning position. I’ve asked also about his on opinion on the programs like “Miami Ink”. Big thanks for Chris for being so patient and answering my questions, I hope he hasn’t found them childishly naive 🙂

Basically I was lucky, because both of his customers- the guy who came for the next session of doing his cover up of the tattoo made by his fella in domestic conditions and a lady, who decided to make a tattoo on her wrist of the nautical knots, as a symbol of the love to her partner, who also has that sort of tattoo- has let me to shoot them! I wasn’t prepared for that, really. So I took a breath and I thought to myself “What the professional camera man/ or my idol Robert Capa/ would do in this situation?” and… I’ve just started to shoot a video. Even if it would not be perfect (today in the morning I will pop in to my college to edit that piece, cause I’m afraid my computer would commit a suicide during handling with it)

At least I’ve used an opportunity and I had a longer time to practice my camerawork- surprisingly looks like I didn’t break the camera down, tripod  still looks like a tripod and not like a set of LEGO, destroyed by a five years old kid. Also I had a chance to take a look on the process of the tattooing and I’ve seen that Chris used two different types of the needle machines- one purely used for making thin lines, contours and bold blocks of colour and the other one for shading and doing a gradient fill of the contours. I could also ask the questions to the customers and for example a lady was shocked when I’ve told her that in my country people in the middle age with tattoos on are still considered as at least not serious and still many people in there have a kind of criminal connotations with tattoo art.

Frankly I’m not sure about the quality of the sound- although I placed a microphone in front of the tattooist and I could see an audio chart on the right upper corner of my display changing, still I do have some doubts about it, I hope that so or so the viewer could hear it. Personally I’m pround of myself, that I haven’t deleted the whole footage by clicking on the wrong button :D- I was sooo scared with a vision of having the camera stolen, broken or whatever and replacing it for a new one for a good money. Yup, looks like I’m a material girl.

When it comes to featuring it to my project, I want to put on the navi map page a button “Video”, sending a viewer to the subpage devoted for a video- to come back from that page an user should click on the button “go back on the map”, because I think that could make more sense than placing a button sending to the subpage on the map, because that page is out of the style from the others and still it keeps a whole navigation quite clear.

Although there are two days to the deadline I’ve got a few bits to fill them in, but hopefully everything will go better than in the case of the other Flash projects- the thing is that now I can imagine the Flash project as a pack of layers and to see relationships between them, which makes it much more easier than before. Looks like also remembering about some small bits, mentioned by me in one of the previous posts, works fine.

Here are a few shots from True Ink:

IMG_0791

IMG_0796

IMG_0808

IMG_0802

IMG_0806

IMG_0805

IMG_0809

And the main reason why I’ve noticed True Ink on the high street…

IMG_0798

They have also a boutique with nice, alternative and wacky on a positive way clothes!!

P.S. My tutor was asking me, if I would have any tattoo and I said “yes”, so here is the thing, which I have in my mind to get it tattooed since 2011:

IMG_0080

Quite unusual for a girl, isn’t it? Especially that I would like to have it on my sleeve- I see no point in having a tattoo, paying for that and then you can’t see it, so actually tattooing sleeves is pretty reasonable. That image reminds me one of the fundamental thoughts of the photography- the decisive moment- and for me, as a foreigner, brings also a nice impact of the meanings of word “shot”- as a shot from the gun and shot from the camera; both on them could change a face of the world around I think…

Edit: after making a whole Flash thing, I want to tell that:

– the video’s sound was good, I mean that you can hear what the tattooist say really fine; I haven’t got an idea with the music for, because on the record you can hear the radio music, so I thought that if I will put another track onto it, then all of the sounds will mix up together in a naughty way. Finally I’ve put a music to the stills with questions and I’ve made fade ins between frames, to make them move smoother and more dynamical. Maybe I was wrong with a length of the whole movie, cause it lasts almost nine minutes, but I couldn’t just cut off the scenes of preparing to the tattooing- I was really impressed with a precision performed by Chris, when he was drawing by hand a few markers on his client’s arm! I am happy that my camera wasn’t too shaky (or rather my hands) and there are some really nice close-ups of the contouring featured. Generally my idea to move with a camera gave me an opportunity to shoot a video from different angles and to make it more visually interesting, so considering a fact that I was really worried about I’m quite happy.

– I had some obstacles, as a result of fact that I have HP with Microsoft software at home and I’ve tried to do some stuff at home- actually that works only in case of Photoshop. After Effects files must be reconverted from Mac to Microsoft and oppositely and after all there is no possibility to reconvert them again or I didn’t get how to do it. The other things is with Flash CC- looks like it is a really good continuation of the Flash CS6, but it doesn’t work with Action Script 2.0 at all; I couldn’t even open my project in Flash CC. Maybe it is a case of limited options in trial version, I have no idea, but luckily I gave to myself more time to construct a Flash thing, so I had enough time to make it.

I have no idea what happened with my music layer, because I’ve put just after the button’s layer (A-B-C-Go-To-Elementary-School-Back) the music one and everything was fine, but it was playing the music continuously, even on the video frame. Then I went to Audacity to cut the music bit off, because I thought that maybe it is a fault of too long file, but still I doesn’t work, maybe the thing is in a .wav format now; neither customising fadings nor putting it on the different frames helped it, I will try to sort it out somehow.

I’m not so happy with my Meaning page with different animations on, revealing the meanings of the tattoos- in my imagination that looked a way better, now when I’m looking on I have an impression of the terribly crowned thing; maybe I should divide it for at least three pages and to stick to images kept in one, particular style, like bits of the Japanese old paintings, going together with a visual tradition and the tattoo history in the same time. But at least I can say they work properly- for future I must remember to synchronise the animations better, but it is my fault that I relied to much on RAM Preview in After Effect, so that’s why some of the bits work too fast in relation to the others, like a bubble speech on the Society page. Looks like once upon a time I will remake it, just to see how it’s gonna work after the corrections of the bits I mentioned +replacing the still images with an animated ones. Anyway, remembering the previous so rubbish projects made in Flash I can say that I can really like that application and it’s not as bad as I thought.

Basically it is all about NOT messing with the layers (unlikely to happy messing I performed before) and some small things, such as putting instances on movie clips or applying actions for the buttons straightly on them. During making a project even I’ve started to think of another one, completely out of the college’s assignments, just to have some fun with Adobe Flash- if I would say the last sentence a few months ago, I will add another sentence, like “Bhihi, I’m going nuts- Flash and FUN? No way”, but maybe I’m going smarter with my age 🙂

Thanks to my Tutor, who showed me how to put transitions into the timeline and to code them (_root. code in the motion tween of the transition and instance name of the movie clip on the button chosen to revealing the transition within pages- ou la la la, that sounded quite complicated, but somehow I’ve managed with that and now the presentation looks much nicer) I could use a graphic I’ve made in PS, inspired by Kabuki mask.

For my project I used only three fonts- Flat Earth Scribe (that looks so cool with an outline of the map!) Dekiru and plain sans-serif Helvetica for bits of information- actually all of them works fine together. And I’ve got rid of the toxic pink-kawaii page, cause in comparison to the other pages that looked HORRIBLE. Instead of there is an old paper look like page with a bubble speech, which turns after clicking on from Kanji symbols to English text- and here I am a bit disappointed with animation, but as I said/wrote/? before on the preview that looked OK, maybe in a hurry I didn’t notice the frame speed, if it is according to the real time or not. Sorry for everybody, who will have to watch it! Next time I will put on my “to-do”list a thing like “watching previous like an insane, all the time, after every change on the After Effect timeline”.

Now my dear kiddos go sleep and pray with me to make my FLV Playback working properly- at the moment it is, but nobody could say what the future brings. Yeah, philosophizing at 4.08 am looks good to me.

November 10, 2013 / monicam

Choice of fonts for the Tattoo Project+ bits&bobs

I would completely forget about uploading a graphic I’ve made for the transitions in my project!! So here it is:

transition

This is something inspired with a make up of actors of the Japanese ancient theatre Kabuki. Like in ancient Greece there were no females involved, so males had to perform female roles as well and they were wearing fancy make ups, shoes on high platforms and generally they looked like guys from the glam rock bands. In fact their outfits were partially belonging to the Body Art, so I thought to myself that it links somehow to the main subject of my project and it will work fine for the transition.

So now kids I’m gonna tell you how to make a transition in Adobe Flash out of the graphic. It needs to be turned to a new symbol->graphic and then in Properties in Style and change the alpha from 100% (full image) to 0%- the point is that at the very beginning it’s invisible and to create a loop of fading. In frame 1 put a stop action and in the middle of the timeline put action gotoAndStop with a number of the frame. Between these frames there should be put a motion tween for a fluent move. It is possible to duplicate a thing in the library for fade-ins and outs and to repeat it with every page you need to.

For the project I have to involve some fonts- it’s clear that for written bits of information I need to use some readable, sans-serif font, because none of the users will play in the game Try-To-Guess-What-An-Author-Has-Written ( the same thing appears when somebody tries to read my handwriting), so here are some:

font4

This one is quite hard to read( at least in case of letter E) but looks goods as a decorative piece with a small number of letters, for example as a button for video stuff (TV)- matching to the whole style and additionally gives that sophisticated look of calligraphy brush strokes.

font

That one probably will be used for navi page for the names of the pages. Before I used Japanese Brush:

font5

But my tutor suggested me that to the map something which looks more vintage will match better. Flat Earth Scribe font looks a bit like a mystic runs on an old map and still has that Asian hint in. The Japanes Brush font could be alternatively used for “Go back to map” button.

font2

font3

These two are alternative options- Korean Calligraphy would look good on a map site and on a timeline bit, but still I do have some concerns about the Chinese Takeaway one- it’s nice, but quite cliche and predictible in Asian-theme project.

But when it comes to music, I’ve found something really nice:

Actually these two compositions for people from West could sounds exactly the same and rather like a few slow hand movements on the guitar’s strings (however I suppose it’s an instrument called shinsen, similar to guitar), but it’s very chilling. So now I’m gonna chill with Adobe After Effects, yay!

November 8, 2013 / monicam

Konichiwa, my tattooed sensei!

I’m saying hello not only to my tutor (sensei in Japanese means teacher), but to the others as well and I’m carrying on with my tattoo project.

As I mentioned in my previous post, for many years I was more attracted with a visual art of the Middle East region rather than Japanese, but I wanted to give it a try. First of all for me it was pretty interesting the contrast between delicate, sophisticated art, ornaments painted on silk or thin, black calligraphic lines, falling into words and sentences painted on a thin paper. The other hand of the Japanese art is tattoo art, linked to Yakuza, the Japanese mafia, which is one of the most famous criminal organisations on the world, so automatically it goes off from the track of the peace, harmony and all of the positive meanings brought by the art by itself. That’s obvious, but in fact tattoos of the Yakuza members are the masterpieces of precision and dignity given to their owners, having their aesthetical roots strongly based in tradition and beliefs. Thinking also about the modernity and the well-known all over the world Japanese kawaii/anime/manga stuff, plus minimalistic interior design or even car design makes also Japan attractive in its enigmatic for European visual culture.

So let’s talk about backgrounds of my project. First goes the map, as a navigation page. I decided to make it look like a map of Japan, according to my previous idea with a map of the whole tattoo world. I used an outline map of Japan (try not to laugh when you will imagine me attempting to draw manually map of Japan, will all of its islands, small pieces and bits and bobs) The shame is that the background has its texture- stylized with a Cronte Crayon filter with canvas settings- and it is not visible very much on the miniature of .jpg format. Before the background colour was peachy coral (maybe I’m a daltonist, but I’m pretty sure there is a colour like this), but the white map looked horrible on such colour; now looks more natural, harmonic and referring to Japanese old paintings I think. Bamboos made with a bamboo brush and treated with an Eraser tool for these sharp edges. Still wondering on the font (Japanese Brush from dafont.com) but if there is any better for the project about Japan visuals than that, which looks like bold, curvy brush strokes? Hmmm… wanted dead or alive.

navi_map_tp

The second one is my favourite one about Yakuza, inspired by Tokyo by night and neons of the city- quite accurate background for, isn’t it? My idea is to make the waterfalls on the bottom changing slightly their colour from the navy blue to red; a bit like on the famous sequence from Bond, but it highlights the thrilling atmosphere around the subject. Including animations of dragon, some cat, which did not care about what’s going on on his fur ( see below; one of the works of artist called Horitomo) and the other popular motives of yakuza tattoos with their short explanations.

background 3_tp

This is an optional page; probably I will use it for a page “Society on tattoos”, because that sickly sweet and candy kawaii background will make a strong contrast with a surprising reaction of Japanese society on the part of their visual traditions. The creatures ears were made of the glyphs like ^, because there is an emoticon used by manga fans, involving that glyph- ^^, which looks like eyes of manga character, expressing a happiness, but I always think that looks more like cat’s ears. And yes, creature’s mouth are made out of a number 3, which is also used in manga emots, like :3. The background is a blend of lilac pink and photo presenting…Ha, that’s the story. I wanted to make the background  fluffy, like a soft toy, but I had no idea how to make it quite realistic- firstly I wanted to use an option Hair from Cinema 4D, but I was not sure how it’s gonna work as a big piece of composition(once upon a time I have to give it a try). I was looking around the house for something nice, candy and hairy and finally I found that hamster chap presented below. That guy saved the background (although I’m thinking about spicing it up with shattered, hairy-alike brush) and his pink robe- a piece of the close-up on the texture was featured as one of the layers of the background. Ave for Hamtaro guy!

background4_tp

IMG_0764

IMG_0765

Delicate background for the other pages, with a kanji calligraphy and a part of Endo Hiroshige painting used in a background with creamy beige  gradient, blended with the other nude beige colour and Cronte Crayon filter to make it look like an ancient Japanese paper. Looks good as a non distracting background for the more colorful, animated stuff.

background_tp

That kitty did not look after his fur properly, so now he has a lot of uninvited guests on. I found it completely accidentally on the Halloween (?) and that would look stunning as an animation. All rights belong to Horitomo, an author of the paintings.

horitomo_5

These guys do not know yet, that they will be a part of my “equipment” page. I suppose that’s the way how cats spend their spare time, when the owners sleep.

tumblr_m8ee36OYyx1qbfahxo1_500

November 4, 2013 / monicam

“You’re my mask, my cover, my shelter”

New school year, new project ahead. Involving a love of my life, it means Adobe Flash CS6. Actually it is not that I don’t like that application, but there are a few things to remember during a work on any stuff in Flash:

-writing a script for button just in a button

-so it means you need to lock the layers to avoid jumps between layers and an accidental writing a code in an action layer (which is obviously used for stop and play codes) I mean I need to, because I’m messing around quite easily.

-writing codes carefully, cause even a lack of one symbol turns the whole thing into a…You-Know-What.

-giving instances to movie clips- looks like it is easy to control even an unlimited number of the movie clips, if the buttons have instances with their names on.

-turning movies/animations into news symbols->movie clips (before rendering them in After Effects or in Premiere in FLV format) and images into graphics. Flash is a cheeky chap and it doesn’t like the other guys from the neighbourhood, until they won’t pretend they are as swagga as it is.

Probably I have forgotten about something, but generally remembering about that stuff will let me to make at least something you can go between people with (we say like that in my country, when somebody has made something constructive/ creative/ or just awake early in the morning and did not forget to buy freshly baked rolls)

The nice thing about the project it’s the subject, because it’s about tattoos.

All of us has even a slightly idea what a tattoo is- for some people it’s just a painting inserted with a needle machine on the dermis layer of a skin, for the others it’s a pure madness and reason to exclude somebody from the society (sometimes I do wonder why people did not exclude from their society celebrities, instead of admiring them, even when they talk bullshits), but the true fact is that tattoo belongs to the part of Body Art and in the same time to the Art as well. No matter if it’s nice or not still it has a strong connotations with culture, history of the origin country, society, or the personal history of a tattooed person.

When it comes to my opinion on tattoos I love that way of a body modification (still better superhero story than having your tongue divided and pretending you’re a snake…) since I was eight and I’ve seen for the first time a person with a tattoo from the close distance. That guy was a bodyguard of one Really-Bad-Boy (please don’t ask what a little kid could do in such company) and his tattoo was a 3D-like scorpio; maybe I wasn’t impressed with a choice of the creature, but with all of its details, shading and realisation, it looked like a real animal. Although I was scared of that guy- who was in a size of my wardrobe-I was looking hours and hours on his tattoo.

Still I’m looking for an opportunity to have a tattoo, but the trouble is that I change my mind in this matter quite often…Right, there is one thing I want to have tattooed for sure…and about five another runner-ups. When I’ve told to my aunt that I want to have a tattoo she was almost crying “WHY?WHY YOU? WHY GOD PUNISHED ME SO MUCH?!”, so that reflects the controversy over tattoos.

Partially it comes from the history, although the first tattoos have been discovered on mummies from 4.000 year B.C- and us we know only rich people where mummified-but also the ancient history brings the stories about the Roman slaves, who were “tagged” by their masters, especially, when they committed a crime and then the story of linking tattoos with criminals have started. That trend is quite strong in a conservative societes in Eastern Europe, who remember when the criminals where going out of the prison after finishing off their sentence and the tattooed symbols were giving an idea of what kind of crime they made and how many years they’ve spent in prison or even how they had behaved in.

For me tattoo is a statement, a constant statement of a very meaningful idea, memoir or value, which is worth keeping it forever on a body, which for every single human is a map of life, with its wrinkles and characteristic features. I don’t get a point of people, who are tattooing theirselves on the stag night party, like I don’t get a point of anybody, who says that “Fifty Shades of Grey” is a literary masterpiece.

Firstly I planned my project to look like a cross between a tattooist’s sketchbook with a bit of gothic style, until I ‘ve found it:

kvd

 

and that:

orig-12785141

 

Books written by the most famous female tattooist in the world, Kat von D., including her journal, drawings and stuff. I liked to watch “Miami Ink”, just because of amazing talent of the whole crew- I wasn’t convinced to a form of American soapie documentary about people, who wanted to have a tattoo of their dog, which passed away, smashed by a truck. No, no, no, the Grumpy Cat doesn’t approve that. (BTW- Kat von D. had a couple of sphinx cats named Ludwig and Beethoven. They don’t have a fur, so I was wondering, why she hasn’t tattooed them yet)

My first idea was covering a map of the world in a navigation page and an animation on the intro, showing a human skull- quite popular motive for a tattoo-from sketch to a final tattoo. Map of the world would send an use to the chosen page, dedicated to chosen country and its tattoo style, with usage of popular tattoo font, like Ink In The Meat (yummy!) and with a separated page for a video stuff (studio tour+ interview with tattooists from the True Ink studio), looking like an old TV.

Probably that could work, but the trouble was with a time and with finding a common style for all of the countries- pretty hard to mix up Celtic style with Polinesian for example; otherwise that could look like a viking on his last-minute holiday on the warm, Hawaian beach. So I decided (no, “decided” is a wrong word…My tutor gave me a suggestion, that the first idea is good, but I need to stick to one country to avoid a mess and complications, so pretty thoughtless-as usually- I said “Japan then!”) to stick to the Japanese tattoos, which I found very interesting, elegant and…dangerous in the same time. I’m surprised with that discover, cause basically I’m more interested in Middle East culture and visual art than in Asian, but I want to give it a try- finally the good designer should also be able to take a part in projects which are far from his main point of the interest.

More details on Japanese tattoos and the stuff for my project soon, and now…

942_SJGB_Pstr_FlagGrl(1)

Put a blame on mame, boys. And on Jerry Sailor, the very first well known nautical tattooist.

March 11, 2013 / monicam

Houston, we have Adobe Flash

When it comes to my Space Project so far I learned a few things useful for making all of the graphic stuff. Here are some:

1. Making planets in Cinema 4D.

Actually it’s clear that planets should be 3D for the needs of that project. I thought it will be more complicated, but it’s not.

Firstly you need to create a sphere, by clicking on the green cube (making a sphere by clicking on the cube…Geez, sounds more like one of many wacky Salvador Dali’s thoughts). Then click on the “Materials” to add a new one, which will represent a look of the planet- let’s say it will be a pic of the Earth. On the list choose “Colours” and add a pic of the Earth, I mean some earthmap. Click “Load” and “OK” to make it as a new material, and then click it from the Materials ‘list.

That looks good-at least reminds the Earth better than the previous white ball. But still looks a bit flat, isn’t it? So let’s go back to “Materials” and choose “Bump” option, load a pic of the Earth bump, then choose a strength of an effect (automatically it is set up for 20%, but depends on preferences-from 20% to 60% it looks nice- the bigger number than 60% makes it as awful as photo proceeded by a free HDR application) Still there is something missed, yeah? Probably it is a haze, which is surrounding the Earth. So now in the Materials list you need to make a new material with Earthclounds. To make a new material this time you need to use Alpha channel and to switch off a “Specular” thing- it will make clouds more transparent, so they won’t cover continents and the bump.

The important thing is that to put it on the model of our lovely Mother Earth now you need to make another sphere. Put it onto the new sphere and then make a new sphere as a child of the previous one. Now the Earth looks properly. The thing to consideration is if you want to add a galaxy background or not- the problem is that contours of the planet look a bit sketchy on the background. The other thing is that in my case I won’t use backgrounds- pages with pieces of information about planets which looks like a pages of an ancient astronomy book and I just want to make interactive moving planets inside.

The next thing in this case to make is to add keyframes at the beginning and at the end of planned animation (because dear children you must know that the Earth is moving) and to choose “Rotate“ option and then just move it. The important thing after rendering is to transform already made animation from .mov format to FLV to make it readable for Adobe Flash.

2. Flash. Adobe Flash. That guy sometimes drives me crazy (censored version- I love it to bits), but anyway it has some nice options. One of them is definitely a gear animation – basically it makes a single image going through the screen like a moving panorama- in terms of our brief I think it will useful for galaxy backgrounds or to the menu to make it more interesting for a viewer (although I would not recommend it for a short animation for displaying the menu, because it would be hard to catch it by a mouse pad. We want to make a nice design, not an annoying thing from the pop-ups like “catch the cockroach and win a trip to Tunisia to catch them more”)

It is a bit complicated, I mean in comparison to ABC layers’ structure (A-Actions, B-Buttons, C-Content, and M- Monika Will Be Lost In 800 Keyframes).

Firstly you need to pick an illustration. Then it needs to be placed in Movie Clip- on the stage as well. After you need to make another layer to put a motion tween on. La la la, so far it’s nice.

The thing to remember on this stage is that to make a proper display you have to put a stop action at the beginning of the timeline ( I mean on the first keyframe) because the picture will be displayed from left to right (Damn, I hope I haven’t messed anything so far!) Then you can make a mask layer ( the masked layer is the background and the mask is a chosen one- still the order is important) and the second layer will include buttons- the forward one and the backward. Still sounds lovely and Mr. Flash has a basket with the first spring flowers in.

This is the moment, when the black hole in the cosmic space is getting bigger. Mr. Flash turns into Mr. Frankenstein. Let’s be scared, kids, here come the SCRIPT CODES!

1)      The first keyframe includes a stop action

2)      The second one includes a backward, so it has a reverse script, which will allow come back to the start of displaying.

3)      The third one includes a forward, which will take the display forward.

The last two ones are created with an instance of a blank movie clip, which will be made later. In that layer the second and third frame will be filled up with forward and backward scripts (actually I’m afraid I’ve messed it up- it feels that should be the first one and the third one, but…No, no, the first one is for “stop” script I think. OK, now I’ve got it. Probably.) The important thing is to name instances, rather on the nice and political correct way, because you must remember that somebody will read it.

Except actions on the frames you need to write another codes for rolling the image- the key point of producing this type of animation is that the viewer could roll it forward and backward without a need for clicking on the button like a monkey. Attention- Button scripts must be written straight ON THE BUTTONS. Yes, this is a special communicate from me to myself. The second communicate- LOCK THE LAYERS!

3. Background and designs.

Within the weekend I’ve made a list (Canon 1D mark IV, L-serie lenses…Sorry, I picked the wrong list) of the stuff I need for my project. Unfortunately my trial for the Adobe Illustator has expired(and my lovely HP is a grand grandson of Olivetti writing machine-his speed during making anything in Adobe software makes me angry as hell) , so I can just enjoy my stupidity, as my mum says. I’ve already made a background for my “book’s cards” (although I think I will add more grain. Either I’m blind or fassy, because I see it has completely different colour than I wanted to, but so or so still reminds an aged piece of paper, which- especially in elder books, where paper hasn’t been treated by whitening chemicals-is getting yellow when it’s old. Then I will need to draw some decorative forms- that’s why I still believe in my mission in Illustrator-on the corners and leave some free space for a text, buttons and illustrations.

CC Kaleida will be used for my intro ( Before I didn’t know that this effect is hidden under the name “Kaleida” and I was typing unsuccessfully “Kaleidoscope”. Smart me, indeed), but before I will have to produce some background as a solid layer in Adobe After Effects- probably in Adobe Photoshop. I’ve seen a few tutorials how to make a cosmic space background/wallpaper/whatever to get the general idea and I don’t get why these guys have a twist to blend a black background with clouds (remember-“Overlay”blending mode, haha) instead of a picture of the smoke- during making a research I was gazing at pics of nebulas,milky ways and galaxy and all of that colourful stuff around stars looks like haze, so it is lighter than the typical cloud, which look too thick in comparison to it.

The conclusion is that for the next three days I will probably stay overnights in my college. Will you bring me a pillow?

Edit:

I’m actually at the end of my work. Although I promised to myself to keep one idea for the whole time of the production I’ve found out that it’s impossible, because there is always SOMETHING. Something to improve, something which in front of your eyes looks better than the current thing on the screen, so…

-My menu page finally doesn’t consist of stars, I mean that I replaced the idea of making letters out of the stars with a starry background and old Latinian planet symbols- I think it fits better to the idea with the “vintage astronomy” look.

This is my menu:
menu2

It consists of: the gradient navy blue background (as I remember there are three layers of gradient on a navy blue, plain background), brushes (stylized on the vintage handscript, golden stars, Latinian symbols- they would look horrible if I have drawn them) Lucida Blackletter font (it reminds me clearly the font used for the hand illustrated books in middle ages) on the title and . In Adobe Flash I have put on each symbol an invisible button- the Easter Holiday break has damaged my brain, because for the first few moments I couldn’t remind to myself how to make it. Then I realised that I have to draw a classic button, but the keyframe with its content ( the thing to click on) should be fulfilled only in “hit” part. After a couple of repeats for a needs of that page my brain felt feed again, uff.

-For some reason I can’t use planets made in Cinema 4D, because there is some issue about the textures before rendering and my planets going naked. I am a good girl, I say no for the nudity in my school, so or so I have to take the planets from the pages made in Adobe After Effects. BTW- I was wrong with the idea of the construction in Adobe Flash, because basically I wanted to make my pages with their contents as animations, but it didn’t meet with my expectations- over 250 frames in the one layer to control them all sounds not so good with my skills. So I decided to use still backgrounds and to put on them only some moving pieces like dissolving planets.

After discovering the problem with Cinema 4D I was considering to process textures for my planets in Photoshop to make them look like sketches from the real astronomy books, but after using CC Sphere option in Adobe After Effects it looked sooo cheap! Wanting or not I have to stay with the “normal”ones.

-Because of the technical issues I Didn’t want to use any downloaded font to make sure my text will appearing on every computer. The old pape from the astronomy book and Helvetica, size 12- still looks pretty weird and actually whenever I take a look on that I fell something looks strange. Probably my choiceof the whole design makes some limitations, cause even I am not convinced about the animated parts, if it should look like that. Let’s imagine Gutenberg producing e-books- sounds bollocks I think. Maybe it is also a case of practice; after handing in I will try to get it less confusing by playing around it.

Pages look like that:

Moon

mars

jupiter

venus

As I written before- background consists of layers of solid colour (beige or medium pale orange) then as a next layer I put the picture from one of the vintage astronomy books (like Hevelius’ or Galileo’s) and I have chosen “Overlay” blending option and Crote Crayon filter.

By changing its opacity I have made it smooth and better as background than a separately graphic. Font Lucida Blackletter, decorated with an ornament brush. The “Moon& Stars” page looks funny, cause I have put in here an animation of the moon on the starry background and-as you can see- one of the puttos (little angels) will watch it with his telescope!

The problem is also with a one second-long animation of the kaleidoscope-based on prints of the astronomy books- I wanted to put them as a transitions between pages, but it doesn’t work- probably I have to put it as a motion tween on the layer of each page. I’m wondering about play buttons on my intro animation, cause it is slightly introduction to the rest of the content, but on the other hand it would look better if I will give a chance to the viewer to skip it, like it obviously happens with the professional stuff (although mine even have not any rights to be called “professional”)

But I can be happy that my ABC construction in Adobe Flash(Actions- layer used for stopping on the chosen frame, B-Buttons, where there is a layer dedicated to buttons and their scripts, like “on(release{ gotoAndStop}(number of the frame);” which lets to go to the other frame” and C- content layer with all graphic and text content)

It is a shame I can’t put in here my animation- it is pretty basic, but makes some sense for a whole thing I believe. But mostly I am pround that after my previous Flash disaster it seems to work, I mean all the scripts. Maybe mine will not look awesome in comparison to the others- I expect it will look creepy- but at least I can be happy that the first step is more or less done. And that brings a motivation to focus more on the Flash, because it is pretty handy if you know how to avoid some obstacles.

March 6, 2013 / monicam

How to be Felix Baumgartner in front of your desk

That is so easy!
You just need to have a new assignment brief which says you have to produce a visual piece about planets, using the facilities of the Adobe software, like Adobe After Effects, Adobe Premiere, Adobe Photoshop and Adobe Flash.

Sounds funny, but when it comes to the cosmic space, I just know that in 1969 during the American mission going to explore the Moon has left in there a few Hasselblads and in 2012 Felix B. was jumping from the edge of the space. For a person with a fear of heights- like I am-it looked so terrible! But in the same time I am still interested in why the Monster company- as the biggest rival of Red Bull on the market-did not reply for that action properly, I mean that Ken Block did not take a ride around the Moon, so that is a crap 🙂

Anyway, I had to fulfill the lacks of my knowledge, so I borrowed a book about stars and planets from the library to find some inspirations for the visual side of that project. Then I have reminded a lot of things I had seen before about astronomy, planets and the space, like the star constellations, the Milky Way,the galaxy and it gave me a few ideas. Maybe a night is black, but the space is full of colours, obviously reds, pinks, violets, greens and even blue, but I want to keep darker colours, like violet or bottle green. (http://0.s3.envato.com/files/28941658/590×300.jpg)

Generally I think about the intro- a short length animation with a kaleidoscope theme- because of the big bang theory- the cosmic space is still changing, like in the kaleidoscope and these changes reflect in the nature of the space and planets.After that the introduction, like “Monika M.presents…” consisting of stars-instead of the regular star constellation the stars will create my full name. Then going to the menu, which is still the black hole for me 🙂 I am thinking about two ideas, but probably one of them will work fine.

The main thing- information about planets- will be written down on the background reminding the Renaissance books from 15th century about the earliest astronomy discoveries, like Galileo or Copernicus works. Something like that example http://www.lessing-photo.com/p3/030802/03080264.jpg to cover nice design with a good visibility of information on the chosen background. Actually I resigned from any Sci-Fi inspirations, because basically I think that it will repeat in many projects, so I hope mine will be different. I am still thinking over the music, probably it will be some mood changing piece. And of course it must be bloody copyright-free, eh… But the good thing is that I have it in front of my eyes so far- oppositely to the previous Flash project, which was a big dose of pain, blood, sweat and it is named in one of my computer’s secret places “WELCOME YOU LOST TRAVELLER, HERE TALKS MR. RUBBISH”. So let’s crack on with a new thing!

More details, sketches and moodboards-asap!