New Virtuasamurai Logo and Branding

Virtuasamurai 3.0 Logo (Final Flat Version)

The new Virtuasamurai 3.0 Logo for the new website as well as for branding for use on new business cards.

This is the new Virtuasamurai logo and branding for the website and for business card use.  Technically this is Stage 4, the 4th iteration in a series of mockups until I was able to replicate the vision I had in my mind from the beginning when I was drawing ideas in my sketchbook. I tweeted a few of the previous Stages earlier in the week, and I even settled on one, but ulitmately the image was too complicated for the purpose of a logo and it gave no informative correlation between the image of the helmet and the title of the company. I slept on the idea last night and woke up this morning determined to make my original vision: That of a single samurai helmet with a V-shaped headress, head held down slightly in subservience to his retainer, and a simple, flat design that a casual viewer can glance at and immediately make a connection between the words and the image. Maybe not a long connection per se, but if a person spends 1-2 seconds looking at the logo and the coinciding text then that is more than they would have otherwise.

Saul Bass - Company Logos

A few of the many of comapny logos that graphic designer Saul Bass created during his career.

To prepare for the process of logo creation I took a look at several logo-centric websites such as LogoGala and there was good article on the Rocket X1 website, 5 Critical Logo Considerations for Professionals. My very first idea was to do a sumi painting style for the helmet  but the black painted image clashed with the futuristic lettering style I had created. In the Rocket X1 article the author mentions and displays the work of famed graphic designer Saul Bass. To the left are a few of the many company logos that Bass created throughout his career. One thing to note is that even though some of the companies may not exist anymore or have merged into different conglomerates altogether, you can still recognize which specific company and/or industry is represented by its icon. I think the United Way logo has stayed the same since the 1970s.

Using these logos as my inspiration I was able to fabricate the final version of the Virtuasamurai logo. Opting for simplicity in lieu of too much detailI I think it should facilitate my needs well on the website and on a business card for potential clients.

Posted in Branding, Uncategorized, Web Design

Virtuasamurai 3.0 Rebuild Status #1

Working through the first round of flow charts for the Virtuasamurai 3.0 website while listening to the Arsenal FC podcast, The Clock End. I’m having a brilliant time. What I’ve noticed during my research is that a majority of sites are using similiar parallax scroll setups for their pages, so I should have plenty of reference to design from. The only carry over from 2.1 to 3.0 will be the social media icons that when hovered over show the last interraction I had with said site. I’ll be adding two more icons to the list for a total of 12; one will be for Tumblr and the other for a local networking site called Built in Chicago. Built in Chicago is geared around making contacts in the startup tech community and thus far they’ve done a great job in putting together calendar events for meetups and talks  throughout the city. The new VS 3.0 site will have 8 pages that can scroll up and down, with different navigational features for each page, like the internal blog page that will display an index of latest articles and when you click “Read More” there will be a horizontal slide transition to the main blog page.

Flow charts for the Virtuasamurai 3.0 website

Working through several versions of flow charts for the new site. With each iteration I’m trying to keep in mind the features that I want to include as well as making the navigation easy for the viewer.

As I stated earlier this is just the first steps in creatiing a new site from scratch. Once I’m satisfied on paper I’m going to do a wireframe blueprint using Photoshop based on my pen drawings so that I can hopefully work out any user interface issues before they come up. I feel good, I think I can do daily updates, like a work diary for this project, which would be nice. I should have another Shelf Worth review for the Metabarons #2: Aghnar and Oda by this weekend as well.

Posted in Uncategorized, Web Design

New Virtuasamurai 3.0 Site Upgrade

Website Flowchart Lesson on mashable.com

Website Flowchart Lesson by Vitamin T as seen on mashable.com

I’m officially scrapping the Virtuasamurai 2.1 project to focus on a rebuilt (wait, again?) website that will adhere to more common design practices. I liked the hovering navigation scheme and being able to accordion preview the other pages of the site from the home page, but these elements are unnecessary in grabbing the attention of an audience. I’m focusing on creating a one-page, responsive, template that the user can scroll up/down to access the different pages from the site; hopefully it will make it easier for users who prefer smartphone browsing. At the moment I’m looking at either Bootstrap or HTML5 Boilerplate to code the site once I’ve worked out a blueprint template as the starting point. In the meantime I’ll leave the old site up until I’m ready to update with new content. Here’s a list of the essentials that I want to have in the 3.0 webpage:

1) Flash animation for the logo. It won’t be a normal animation, there will be a few options that the user can click on in order to interract with the video.

2) A blog built into the site, meaning that I can use this blog to really discuss graphic art on web and focus on my graphic novel.

3) A new logo with altered text. I like the old logo, but I want something more streamlined.

4) No need for full-screen preloaders.

5) Flat UI design. I’m keen to stay with the large social media buttons that have their own individualized date of last interractions, but…

6) There will have to be real footer located at the bottom of the page, even though I loathe them. Having one is the norm and I can always store an extra set of social media icons and a site map directly at the footer of page.

Working on the new site should be faster than the experimental 2.1, but a little slower than the very first version which took about a week and a half to complete, using mostly CSS and HTML. My skill set has grown exponentially since last May and I’m looking forward to fully showcasing my skills in UI and UX along with everything else. As an aside, I’m keeping busy by studying to be Adobe ACA certified in Premiere Pro CS6 as well as getting an Individual Qualification in Google Analytics. I’m also looking forward to playing around with the Adobe CC collection after I’ve upgraded my laptop. $9.99 USD per month is so much easier on the wallet than what Adobe  has charged for past Master Collections.

Posted in Uncategorized, Web Design

Shelf Worth: Humanoid’s The Metabaron’s #1(of 4)

The Metabarons #1 by Jodorowsky and Gimenez

The Metabarons #1 by Jodorowsky and Gimenez, published by Les Humanoides Associes.

The Metabarons #1: Othon & Honorata
By Alejandro Jodorowsky and Juan Gimenez
Humanoids Publishing
ISBN: 978-1-59465-000-0

“We’re only 150 Warriors with prehistoric weapons against 1500 killers with post-nuclear arms. They will CRUSH us…” – Othon Von Salza

Baron Othon and his Castaka clan from the planet Marmola are loyal servants to the intergalactic empire, but when the empire discovers that the small family harbors the most powerful element in the universe, an oil with anti-gravity properties called epyphite, they send an armada to acquire it. Despite being outnumbered and outgunned, Othon contends to fight and sacrifice until he is the last man standing. His losses are great: His wife, Edna, is torn down, his entire force led by his twin lieutenants are decimated, and his son, Bari, loses the use of his legs. They are sacrifices that Othon determines to make in order to achieve total victory. Othon is a former space pirate and well practiced in martial combat. While his clan splits to bring the fight to the empire’s forces from the north and the south, he alone engages the center of the heavily armored, gun-wielding throng with only a knife. A knife. Oh, and poor Bari, his legs are broken by Othon in order to prevent him and their small army from acting rashly and getting immediately destroyed by the imposing forces. Suffice to say, Othon is not to be trifled with.

Othon carrying the dead

After the climatic battle on Marmola, Othon carries the bodies of his slain lieutenants off the battlefield.

Thus begins the indoctrination of Othon Von Salza, the first of his intergalactic warrior caste known as the Metabarons, into a life of endless combat and familial trauma. The Metabarons gain their strength from their honor-bound, Bushitaka, sacrificing anything – even yourself – to win at all costs. Writer Alejandro Jodorowsky (The Incal, The Technopriests, El Topo, and The Holy Mountain) has tweaked his warrior coda slightly from the Japanese samurai way of life, Bushido, which actually taught that sacrificing one’s self was the most important act for a samurai, not necessarily attaining victory. I find Jodorowsky’s re-worked warrior philosophy more preferable because he eschews noble sacrifice for a gloriously exaggerated, down-and-dirty, win at any cost attitude. The Metabarons don’t fear, they don’t back down, and they don’t give up no matter the odds against them.

Artist Juan Gimenez comes from an industrial design background. It shows.

Artist Juan Gimenez comes from an industrial design background. It shows.

Accompanying Jodorowsky for this epic tale is the great Argentinian artist Juan Gimenez (The Fourth Power). Gimenez comes from an industrial design background, so when he draws and paints a spaceship, it looks like it could actually exist. When Gimenez pulls back to show a widescreen shot, the detail is immense. The real magic, though, is in Gimenez’s characters, he combines realistic technology and backgrounds with wide-eyed, expressionistic faces. It’s a visual technique of juxtaposition that Walt Disney pioneered with his film Bambi to draw the viewer more into the illustrated world they are presented with. I feel like Juan Gimenez is actually an underrated artist in the U.S. despite being so technically brilliant, though when you have a fellow artist like Jean Giraud, better known as Moebius, as a contemporary some overlook is to be expected. However, Gimenez, who is in his 60’s now, still has his chops. He deserves much more praise in the States. You can see more of his work on his website here, and this is a video of him from a few years ago at Emerald Con in Seattle, doing a watercolor sketch of the last Metabaron:

What follows after the violent introduction to the Metabaron’s world is an exercise to see if Gimenez’s art can top Jodorowsky’s script in showcasing the next in a line of escalating obstacles that Othon and his family must endure in order to make a name for themselves in the universe. It is important to note that most of the hardships each Metabaron experiences are imposed from father to son, in order for the child to prove that he is capable of never being defeated in combat. Othon eventually loses his first son, Bari, in part because he still questions Bari’s maturity and strength during a pivotal battle, and his fatal misjudgment sends Othon into a deep depression. It is only when he is presented with the Shabda-oud priestess, Honorata, that he is able to become whole again. Through their union, the second Metabaron, Aghnar, is born.

Jodorowsky is having fun telling an epic story but there are also heavy psychological themes that he imbues into his work as he wants to create visceral, human connections between his characters and the reader. The father, Othon, is always disapproving of each of his sons’ worth, forcing the children to put themselves into ever-increasing peril and torture in order to win their father’s favor. At one point, Honorata and Aghnar are both exiled for several years for training and they succumb to what appears to be a genetic sexual attraction between mother and child, albeit very brief and mild – they share a kiss after Aghnar has finally bested his mother in combat. The baron’s blood is strong within Aghnar, he’s inherited the same dour facial features and white hair as his father. Does Honorata kiss the young Aghnar because she misses her true love, Othon, or is there something more?  And what about Aghnar? He’s been training every day for seven years so that he can earn the right to be his father’s heir. Does he reciprocate the kiss from his mother because she is the only female he has ever known or is he a child who simply loves his mother and for the first time he’s able to express it? Oedipal implications aside, there are more obvious Freudian tableaus peppered throughout the volume. At another point the baron is castrated and he proceeds to build a towering phallic-shaped fortress to go along with an equally phallic-shaped space jet that he controls, by instinct, while the meta-baronic steering controls are connected where his manhood used to be.

The origins of the plot are actually rooted in the classic science fiction novel, Dune, written by Frank Herbert. Jodorowsky tried unsuccessfully to write and direct a 14 hour film adaptation of Frank Herbert’s book, some of which is documented here.  He incorporated some loose concepts from the novel with his own sensibilities to create a truly fresh wave of ideas every time you turn the page. Epyphite is the analog for the spice Melange, the planet of Marmola is a stand-in for the sand planet, Arrakis.  Honorata is a Shabda-oud priestess with a hidden agenda, much like Lady Jessica of the Bene Gesserit. Here is a clip from a documentary about Moebius detailing some of the pre-production work that went into the failed Dune epic:

When I was younger David Lynch’s film version, titled Frank Herbert’s Dune would come on local TV once a year for 2 nights, the first night I believe was the shorter 3 hour version, followed the next night by the longer 4-hour version. These nights were special for me, not only because as a 7-year old I was allowed to stay up late, but I also got to experience pure, unchecked Lynchian id being displayed on the screen for the first time. It was only later that I picked up Frank Herbert’s novel, and experienced his complete vision delivered by an author in top form. For a sci-fi novel, hell, for any novel, Herbert relates the most complete world-building I’ve ever read. Herbert wrote about his universe’s politics, religion, geography, community, and culture so seamlessly; every aspect was meticulously planned and executed.

The same spirit that Herbert brought to his work has been fully embraced in the creation of The Metabarons, and reading through the page-by-page universe construction, stunningly rendered by the fluid art of Juan Gimenez, I’m taken back to that 7-year old kid watching space opera on TV, though now I have a firm understanding of the psychological aspects that Jodorowsky has used to fortify his tale. The easy path to take in chronicling the history of the Metabarons would have been to simply use the Cambellian theory of “the hero’s journey” to describe the formative years of each generation, but Jodorowsky instead chooses to focus on and explore the concept of Greek tragedy and the psycho-sexual undertones that define each ebb and flow of catharsis that arises from the situations that his characters are placed in.

This is classic comics work, well worth reading and pouring over. It’s not my favorite volume of the series, I think that The Metabarons #3: Steelhead and Dona Vicenta is the high mark of creativity and insanity from Jodorowsky and Gimenez, and I will be reviewing it in a few weeks. That being said, get this book too, it’s definitely worth keeping on a bookshelf.

The Caste of The Metabarons - French edition

The Caste of The Metabarons – French edition

 

Posted in Shelf Worth, Uncategorized

Cloud Consciousness: Juan Gimenez

I had Juan Gimenez on the mind.

Samurai by Juan Gimenez

Posted in Cloud Consciousness, Uncategorized

Cloud Consciousness: In Search of Moebius

I had Moebius on the mind. I saw this documentary a few years ago on DailyMotion, but it’s still chopped into 3 separate vids, I’m glad YouTube has the whole piece.

 

Lt. Blueberry by Moebius

Lt. Blueberry by Jean Giraud aka Moebius

Posted in Cloud Consciousness, Uncategorized

Cloud Consciousness: Yoshitaka Amano / Gustav Klimt

Thinking about Yoshitaka Amano’s art, as I often do. He is influenced in part by Viennese Expressionist Gustav Klimt. I’ve always wondered how often artists refer back in their minds, even if its subconsciously, to their influences when creating work.

Yoshitaka Amano: Kiten

Yoshitaka Amano: Kiten book cover (2002)

Gustav Klimt - The Virgin

The Virgin by Gustav Klimt (1913)

 

 

Posted in Cloud Consciousness, Uncategorized

Quick update + Current Setup

I’ve been busy at work, but the site is still coming along, I added my current computer setup to the virtuasamurai homepage, so people can see what I’m using to create with. As the site functionality of the site is finalized, I can now move more into the fun stuff which is designing in photoshop and illustrator. Right now my priorities are:

1)  Finishing the About Page.

2) Creating a few designed samples to post on the site like a movie poster, a brochure sample, and a flyer.

3) Working on a samurai/chambara styled Flash animation to replace the title text on the homepage.

The Current Setup Page from the virtuasamurai website. I like to know what tools other designers use to create and I think it will be fun to update this particular part of the site to coincide with my own tech upgrades.

The Current Setup Page from the virtuasamurai website. I like to know what tools other designers use to create and I think it will be fun to update this particular part of the site to coincide with my own tech upgrades.

 

 

Posted in Uncategorized, Web Design

Debugging Virtuasamurai 2.1

I’ve posted the new site to work out cross-browser compatiblity issues and I’ll be making tweeks and changes for the next few days.  I’ll have to use a preloader for each page of the site minus the portfolio page which already has a preloader, because the social media slider wants to pop up on page load in Chrome, but is fine with the other browsers. The Contact Page won’t be functional until I’m happy with the site. I’m still working on the About Page, which incorporates divs sliding into place while you scroll down on the page, so its a bit different from the other pages. It is still a skeleton site in terms of content, but hopefully I get my main strengths across, going from PSD to Html (and in some cases from Html to PSD), knowledge of javascript and jquery, and I’m trying to incorporate more typographical effects. I’m confident that the site will shape itself when more content is added to the galleries and I add bits and pieces to each page over time.

Taken with the webpage screenshot plugin in Google Chrome. The metallic text is just a placeholder for the Flash animation that I have planned which will be an ode to old Japanese woodblock paintings of samurai in various actions.

Taken with the webpage screenshot plugin in Google Chrome. The metallic text is just a placeholder for the Flash animation that I have planned which will be an ode to old Japanese woodblock paintings of samurai in various actions.

 

 

Posted in Uncategorized, Web Design

Virtuasamurai Site 2.1 Progress Report

I’m now 1.5-2 weeks away from posting the updated Virtuasamurai site online. Each page has been overhauled – there will be a landing page for Contacts, a Home page that lets you preview the other site pages before you go to them, an added section for just wireframe blueprints, and a new way of using social media links/buttons that I haven’t seen many other websites use yet. At the moment I’m working primarily in Photoshop CS6 to design a mockup for the About page and I’m also optimizing the other pages in the site to use just two CSS stylesheets, one stylesheet for the overall site and one for the preloader. I’m also working to centralize my javascript, the fewer style/script calls that have to be made, the better. I’ll be making more frequent posts moving forward, now that the brunt of the fabrication is completed and I can move more into the editing phase. Below are a few examples from the new site:

Refined Front Page Design

The retooled Frontpage design. I’ve added myself to each of the major social media sites and coupled with a little jquery animation made the splitting of the page to reveal the Current Work gallery more appealing. The logo text still transforms scale on hover with CSS3, but the ‘Samurai’ portion splits in half now, which required some javascript to animate the two halves in sync when hovered.

The Wireframes section of the site. Making wireframes for myself is kind of pointless, it just adds more workload that doesn't show up in the final product, but having blueprint designs to show a client is an important step in the design process, so I'll make sure to update this page as often as possible.

The Wireframes page of the new site. Making wireframes for myself is kind of pointless, it just adds more workload that doesn’t show up in the final product, but I recognize that having blueprint designs to show a client is an important step in the design process, so I’ll make sure to update this page as often as possible. The semi-transparent white grid on the bottom half was the result of an accident, an undeleted Photoshop layer from an earlier mockup, I liked the result so I kept it as part of the page.

The Contacts link will now have a landing page. This is a simple straight forward contact form, validated with php, so that potential clients or professional colleagues can reach out. The photograph of Chicago along Lake Shore Drive has a B&W layer adjustment over the image. And the reason why the title text is so big for the Contact and Wireframes pages is that on Home page where you can preview these pages before actually going to them, there will be a Flash CS6 animation in place of the individual page titles for the logo text obscures the site.

The Contacts link will now have a landing page. This is a simple straight-forward contact form, validated with PHP, so that potential clients or professional colleagues can reach out. The photograph of Chicago along Lake Shore has a B&W layer adjustment over the image. And the reason why the title text is so big for the individual site pages is that on the Home page where you can preview these pages before actually going to them there will be a Flash CS6 cinematic for the Virtuasamurai logo in place of the huge text of the page titles. More details to come.

Posted in Uncategorized, Web Design