Peter Mikhael Reel – 2009

The Mind Of The Green Apple

http://petermikhael.com/previews/htmls/rich_v_1
Okay.. Let’s make some flash stuff. Depends on the green apple of the original website design. I’ll explain every page individually in further steps.

The Mind Of The Green Apple Game

http://petermikhael.com/previews/htmls/green_apple_game
Continue with my project the mind of the green apple. I start to make a new flash game. Eating apples is my idea. Actually I got the idea when I’m driving. It has 3 frames long.

CHA International Website

http://www.cha-international.info
Go back to CHA-International as a freelancer XHTML/CSS designer. The website design by me. Developed by Ahmed Abdel-Aliem.

Tarek Nour Communications – Intranet 5.0

http://go.tareknour.tv/
> Video – Demo Reel – http://www.youtube.com/watch?v=La0Z-l6mIN8
Unlike the internet, which is a public network of computers, an intranet is a private network of computers that functions only within the boundaries of Tarek Nour Communications.

Yahya Al Bishri Website

http://yahyacouture.com
Yahya Al Bishri website one of the most interesting project I worked in. under management of RUBICS Business Solutions.

Tarek Nour TV Website

http://tareknour.tv
http://tareknour.tv/chicken_news/
http://tareknour.tv/tony_khalifa/
> Video POINTNOUR’s campaign for TNTV – http://www.youtube.com/watch?v=R_1F8h4cvpE
Al Kahera Wal Nas is a new Channel by TNTV a company under Tarek Nour Comunications.

RUBICS Business Solutions Website

http://www.rubics.net/
> Video RUBICS website design – Behind The Scenes – http://www.youtube.com/watch?v=Q4-0raXuDKA
RUBICS Business Solutions website a full 2d/3d website design from scratch.

OLYMPIA Health Club Website

http://www.olympia-center.com/
OLYMPIA Health Club website. Released under management of RUBICS Business Solutions.

Tarek Nour Advertising Website

http://tna.tareknour.com/
TNA has been a pioneer in advertising since its inception as the first Egyptian private sector Advertising Agency in 1978. Through three decades of listening to local consumers.

> http://djvaleron.com/

DJ Valeron is a top dj in Mykonos island, resident dj of Cavo Paradiso Club and many others. Born in Corfu one of Greece’s most picturesque islands on September 19th 1978, IliasValaris aka Dj Valeron began his career performing at various clubs and bars. From 1996, to 1998 he could be heard across the airwaves from Corfu’s local radio station while also performing at APOKALYPSI one of the most popular clubs on the island building a strong reputation for delivering strong House and Afro Beats .

His dynamic performances behind the decks , with an unique uplifting style, ensured parties that rocked to the end pleasing all .

The following year brought new horizons with the decision to relocate to Athens Greece’s Capital city enhancing his career again performing at various clubs and bars.

Then in 2002 came the life changing decision of branching out in the music industry into music production, His love his weakness for the sea and its localities lifestyle, brought him to relocate to Mykonos, most famous for its night life.

“Quest investments” is a new full car Services Company established in 12.2009. I joined quest investments team to find new ideas for the company’s new business.

Wikipedia said in marketing, a corporate identity is the “persona” of a corporation which is designed to accord with and facilitate the attainment of business objectives. It is usually visibly manifested by way of branding and the use of trademarks.

Started with the logo eventually includes the institutional colors of the brand, and the complete corporate design based on them. My idea is to make a strategic way to make the image that the rest perceive fit in with the image the company wants to convey.

There are also other elements I consider when I begin thinking about a structured corporate identity, such like business card: which is the logo and contact information professionally presented. Stationery likes letterhead with coordinating envelops.

The techniques I used in this project based on 3d logo design – Logo Design behind the Scenes Tutorial using Adobe Photoshop, Autodesk Maya and Adobe Illustrator.

Yahya Al Bishri website one of the most interesting project I worked in. under the management of RUBICS Business Solutions.

Yahya Al Bishri Born in Abba, Southern Saudi Arabia, on the 13th of August 1962, he had originally intended to become a journalist, and after working for a period of time in a press office, he realised that he had a passion for fashion design. Yahya’a destiny would take a sudden turn. After graduating with a degree in Fashion Design in France followed by Italy, Yahya returned to Jeddah and open his first atelier of design

Website overview

When I worked in this website which is a personal portfolio for a fashion designer, I explore what some of the principles of fashion design are, before I can truly understand the depth of this occupation. With the principles of fashion design mastered, may be on my way to creating designs that surpass even the brilliant minds.

Increasing Yahya business

There is no better way to get your fashion design business the exposure it deserves then with a great fashion website. I’m looking to opens the doors to the possibilities of increasing Yahya business by the latest tools and techniques exists in the industry.

We all love fashion

One thing is for certain and that is people from all over love fashion and new fashion trends. Fashion exists in every aspect of life these days, magazines, movies, ads, etc.

Fashion websites should be elegant and functional

Also I try to set his fashion business up with tools that allow him to update his own product online, showcase his models, and help promote his brand or product online directly from his website. Start by design 3 different samples. Then start develops the approved one, Converted to XHTML/CSS with jQuery Lightbox and jQuery Thumbnail gallery slider. Finally I made a flash intro combined with a flash slide show component to show up the best designs of him. The web design solution I develop for him is a custom one and I take great pride in working with Yahya one of the top names in the industry.

Not only web design helps Yahya in the fashion industry. RUBICS Business Solutions.services for models set the industry standard to impressive looks and functionality. Custom model web development solutions allow for visually impressive online galleries, unique spec systems, and content delivery sure to impress.

Website features

• Full site
• Gracefully degrading code (for older browsers)
• Tested and working in all major browsers including IE6
• Tiny slideshow
• Clean style
• Professional design
• Design is created using the 950PX Grid System (wide design)
• SEO friendly HTML code
• jQuery Lightbox
• jQuery Thumbnail Gallery Slider
• Flash intro
• Flash Slide Show Component
• 3 languages
• Guest book

3d logo design – Video Tutorial – Part 1

3d logo design – Video Tutorial – Part 2

3d logo design – final result

I walks through the fundamental decisions, such as what information to include, what size and orientation the logo should have, and whether to use in corporate identity, TV production, Web publishing. I demonstrate how to set up a template and work with type alignment and color. Also discusses animation techniques and preparing the file for printing, TV production, Web Publishing. How to integrate and fill the gap between 6 software is my goal in this tutorial. I’ll use Adobe Photoshop, Autodesk Maya, Adobe Illustrator, and Adobe after Effects, Adobe Flash and Adobe Dreamweaver.

Topics covered:

Quick Sketching
Logo Exploration
Logo Modeling
Producing Logo to several illustrators formats
Animation approach
Animation Composition
Web Animation and production

3d logo design – Logo Design behind the Scenes – Part 1

01: Intro Goals.
02: 1st stage Sketching ideas.
03: Modeling, Texturing, Lighting, Rendering and Detail Design.
04: Put the logo into Layout.
05: Illustration stage.
06: 2nd stage animation.

3d logo design – Logo Design behind the Scenes – Part 2

07: animation composition and finalize exporting HD.
08: 3rd stage Web Production.
09: Final Design, animation inside HTML page.

Details:

01: Intro Goals

In the first stage we have a look to our goals before we start working to know who exactly we should do. We will prepare our logo to be ready for printing, TV production and Web Publishing. As a designing apprentice I have always asked myself what is the best method for designing something or that particular logo. It is evident that you can apply different methods for doing the same logo, but the quality of the output might vary according to the method you use.

02: 1st stage Sketching ideas

Then the process of swirling out your ideas begins. It doesn’t matter if the sketch looks like monotone; you are just throwing ideas down onto a white blank page at the moment. I used tablet here. Just try to find ideas and concepts using balance. What I mean with balance is our logo should be physically balanced inside our design. Just imagine if you create that logo in real life with clay or wood and try to put it on a flat surface it should be stable balanced. Once I had placed some ideas down on paper you can scan them in and dive into your image editor of choice if you would like. I’m using Adobe Photoshop for this one. The method I use to create logo could be wildly different from someone else so go with whatever method feels comfortable. The end result will be a series of scaled resources that the OS will use in different views.

03: Modeling, Texturing, Lighting, Rendering and Detail Design

Then the process of swirling out your ideas begins. It doesn’t matter if the sketch looks like monotone; you are just throwing ideas down onto a white blank page at the moment. I used tablet here. Just try to find ideas and concepts using balance. What I mean with balance is our logo should be physically balanced inside our design. Just imagine if you create that logo in real life with clay or wood and try to put it on a flat surface it should be stable balanced. Once I had placed some ideas down on paper you can scan them in and dive into your image editor of choice if you would like. I’m using Adobe Photoshop for this one. The method I use to create logo could be wildly different from someone else so go with whatever method feels comfortable. The end result will be a series of scaled resources that the OS will use in different views.
Modeling

For a non-organic bending object such as the subject of this tutorial it is wise to use polygonal modeling unless you care about the quality. Polygon modeling has always fascinated me especially with the accuracy it provides for making industrial models and its flexibility. The good thing about Autodesk Maya is that it provides both a strong NURBS system and a multi-optional NURBS to polygon conversion dialog, where by we can convert our detailed NURBS model to a polygonal object with the desired number of faces.

The aim of this tutorial is to provide a practical guide for the novice Polygon modeler, whereby he/she can practice the basic methods through designing a somewhat complex object. Of course, this tutorial does not cover all Polygon commands but rather most of them.

Now observe and contemplate the above sketching image for a moment; try to visualize it from front, the front view: that’s the key point in making the logo.

First we will begin with a set of primitives for different logo parts. I make a sphere (polygon sphere) then 4 twisted cubes. To make twisted cubes in Maya it’s just easy. Make a cube then go to deformers panel and use the twisting toll. After made a 1 twisted cube, duplicate it 3 times with 90 degrees. Then put them together to fitting in the sphere.

That’s exactly my idea represented. I have a point in this logo which I can say the sphere represent the red word and the 4 twisted cubes represent how mush it’s secured.

The next step is to create mental ray subdivision from approximation editor panel. I like to make the N subdivision as a 2.000 points for sure that’s give me a good smoothed mesh and also at any time I can go back and make any changes in low poly mode.
Texturing

The texturing stage is the most important part. Everyone who’s worked before with 3D texturing knows that every texture have an advantage and disadvantage. We can see that the Lambert shading absorb lights. Also we knows about the phonge shade it’s reflect lights with angels and have a different characterizes instead of blinn shade. So I render the logo 3 times 1 with blinn shade, 2 with mia_material and phong shades. By this way we mention that we have the logo in 3 different characteristic so we can use this 3 together in later steps.
Lighting and Rendering

Let’s talk about lights. I use in this scene 9 lights. Our goal in lights is how to use a minimal number of area and point lights to recreate all direct and indirect light sources for a logo. They are 8 area lights and 1 point light. The 8 area lights have a very small intensity. Also I used the white light color. In This technique we use Global Illumination and Final Gather.

Final step in lighting and rendering is to render the logo in 3 different images every image with a different shade.

04: Put the logo into Layout

lets go to Adobe Photoshop and open the 3 images we exported from Maya. Actually I like to export images as a .TIF images. Taking the 3 images and put it together in Adobe Photoshop blind them together. I used overlay blinding mode. Then finish by company name and the caption.

Also I simulate a deep shadow behind the logo. Its give me a nice look.

In this stage if u would like to represent that logo to the client u have or to your boss. That’s will fair enough.

05: Illustration stage

For the first time I present this tutorial someone ask me… hay the logo u created now is fine but do u think is it ready for print in big scale like billboards?..

Actually it’s a very good question because for sure we need the logo to be ready in everything from print to TV production to web production as we agreed in statge1. So I’ll start now to give u my approach for how to export our logo as a vector (scalable) shape. We will go back to Maya and use logo model and exporting into a different illustrator types. I used here Maya vector render and I use some options like curve tolerance and detail level to end up with different logo versions. 1 with dark colors, bright colors, and wire frame, etc… everything is vector we can export it as an AI file and import it to adobe illustrator. Easily u will find that our logo is now ready to use it in printing elements safely if we need to print it in higher printing elements or huge billboard.

We finished now the stage 1 which is creating a 3d logo ready for print production.

06: 2nd stage animation

Okay… Let’s animate. We will go back to Maya and starts animate our logo. I start by prepare my timeline with 72 frame. This will give me 3 seconds (24X3=72). Animate the sphere shrink in then shrink out until its stop. Then about the 4 twisted cubes I animate it in 360 digress reversed. So it’s give me a very nice effect. So what we have now is shrink sphere and 4 rotated cubes. I think it’s Looks good for me now. For sure I’ll go to the timeline and play the frames fast, slow, reversed, etc… Check if anything looks weird or out of scene.

So we have now 72 frames let’s render it in .PNG sequence of images. And have a look for the animation when it’s finish render.

07: animation composition and finalize exporting HD

So we end now with 72 PNG sequences of images. If u thinks about composition for sure we will think about Adobe after Effects. You can import the 72 images directly to Adobe after Effects but in this tutorial I convert this sequence to 1 MOV file using quick time. So I open quick time then open the sequence of image and save as a MOV file.

So let’s import the MOV file to Adobe after Effects and start composition. First effect I have used is the auto level effect. It’s just makes the logo looks fine and has a deep look. Also I just check some other effects like rippling and bouncing and I end up with the 3D rippling animation. I make a radial gradient for the background to give me nice look when the logo animate. So I’m happy for what I end up with now

Let’s render our MOV file from Adobe after Effects and finally the logo now composite fine and ready for TV production.

08: 3rd stage Web Production

After we have our composite MOV file let we think about web animation. Actually Adobe Flash is the solution. First I prepare my stage in Adobe Flash 640X480 as we rendered our files and also prepare my timeline and frame rate 24 FPS. Now we are ready to import our animation file. But the MOV file has a huge size and we shouldn’t use it for web. That does will take a lot of time in loading. So I think about converting this file to FLV file using Adobe Flash CS3 Video Encoder. Start encoding and we have now a small FLV file. So import the FLV file and check it in Adobe Flash. After everything is looks fine and small size the only one problem is the frames looping. So I add one Action Script behavior to stop the animation when it’s finished (played for 1 time). So our file now ready for publishing from Adobe Flash we will end up with HTML file contained the flash SWF file.
09: Final Design, animation inside HTML page.

The last step in our entire tutorial is to open the HTML into Adobe Dreamweaver and center the flash object (SWF file) and we can easily type welcome to red secure website and it’s now ready for Web Production.

So that’s the end of the tutorial. I hope u like it… See u

But I’ll explain the whole idea first. So I start with the green apple then slice it to 4 slices. Every slice have a main link (Home – artwork – about me – contact me).

The landing page contains 5 elements:

Logo and slogan
The apple
The animated background of the apple
The exploded ideas (light bulb)
Footer

When u hover on any slice you get the link expand horizontally and represent the instead slice content.

After you click on the slice a rotated page expands and represents the content.

Home page: represent welcome part (my existing companies/work) and latest of my work Art Work: represent a photo gallery of my latest work including 2D/3D/Web About me: represent my IT skills and freelance services list which I provide. Contacts info: represent my contact and a worked mail form.

Still in beta version. hope to add some stuff soon.

start to make the concept more related to the music and i get the idea of led. equalizer leds actually. going to represent it in Maya and finished with photoshop.

Then going forward to the A5 flayer design using the same concept and explosion of the music notes.

http://www.tareknour.com/

Tarek Nour Communications website it’s a big project which I worked on it. for about 6 months i started developing this website.

I’m actually make an article about that website because it’s really deep and have a varieties of designing and developing concept and techniques.

Guys Who Involved with me in this project:

Tarek Khalifa – IT Manager

Mahmoud Mokhtar – Senior Programmer

Mohamed El Messeiry – Business Solutions Developer

Marwan Zaki – Senior Technical Specialist

Mohamed Farag Abdallah – Technician

website structure:

Flash Version:
using Autodesk Maya, Adobe Flash, Adobe Dreamweaver, Adobe Photoshop, Adobe After Effects, Adobe Illustrator

the whole structure

1: the intro page created with Autodesk Maya,, Adobe After Effects, Adobe Flash. combined the 3 different tools together to make the start up animation and the rotated 3d corporate logo.

2: the whole flash website controlled by Action Script 2.0. the all pages separated with different SWF files.

header section

1: full functional flash photo gallery u can use controllers to skip forward or backward for latest press ads. also u can pause or play the image play frames.made by Action Script 2.0.

2: 5 main menus contained the most common links in the whole website. menu driven by Action Script 2.0.

the main page structure

1: 55 pages driven by Action Script 2.0 using numbers. every page have a unique number in the whole website. the number mean unique thing for every box including the logo and page content.

2: the all boxes are actually 1. and duplicated 45 times to reduce the size of the frame rate and the whole website size

3: all pages separated with a different SWF files and every page have a unique loader.

4: every box animation built in Autodesk Maya and exported as SWF file frames.

the small boxes footer structure

33 shortcut functional tinny boxes. I’ll represent every box from right to left

1: random page: choosing a random page from the 55 page in our key frames agencies, companies, menus.

2: animation 2: loading the website start up animation with different animation style.

3: home: shortcut to the home page

4: 4 different colors: shortcut to 4 different colors to change the whole boxes color driven by Action Script 2.0.

5: wire frame: shortcut to change the boxes to wire frame style exported from Autodesk Maya and finalized in Adobe Flash.

6: 3 different makes shortcuts: mask the website to 3 different main list of links. Ad agencies, communications, main links.

7: drag and drop page: this page actually convert the all links to drag able boxes snapped to the mesh box structure. driven by Action Script 2.0.

8: sound control: controlling the sound on or off with changing the led animation. driven by Action Script 2.0.

9: randomize mode: this mode randomize the boxes to different positions with a smooth animation. driven by Action Script 2.0.

10: the next bunch of other is shortcuts to the most common links.

inner pages structure

1: all pages have an animation with unique design and a shortcut function to move to any page with one click.

XML our work and news pages structure

1: our work
our work page have a 3 main links landmarks, today’s TVC’s, programs. the flash page opened by JavaScript behavior centralize the pop up page in the center of page.
the actually player and list of files driven from XML file content ( XML exported from admin area). the other function of the our work is the combo box flash option which is mask the videos or agencies.
also when uploading the video to the admin page it’s converted to FLV video file and take a snapshot from the uploaded video everything exported automatically.driven by Action Script 3.0.

2: News
news page also driven from an admin area converted to XML and displayed in a page with scrolling. all this pages also have individual link. to represent the article.

HTML:
using Autodesk Maya, Adobe Flash, Adobe Dreamweaver, Adobe Photoshop, Adobe After Effects, Adobe Illustrator

the whole structure

the website have a 3 different designs with the same layout driven from CSS rules. the all design changed randomly in the home page. after random page the design stick to the end of navigation.

header section

1: the header 9 boxes created with Autodesk Maya, Adobe Photoshop. represent diffrent direction of everypage.
2: the header photos is a 22 press ADS changed randomly.

left hand side

1: the left hand side videos loaded from the database the last 5 today’s TVC’s and when clicked the actual video played in the same video interface.

main content

1: the main content for the all pages.

news page structure

1: this page contained the all list of the news articles have a each inside the all news titles and content and jump to an chosen article from combo box.