Embedding Video Code on to an HTML Page

This video tutorial covers how to embed video code on to an HTML page. It requires that you have some knowledge of Photoshop, Dreaweaver and HTML. If you don't, no worries, I cover it in the video.

These days, in order to save space and money, people elect to upload their videos / demo reels on to a site like Youtube or Vimeo, which is a process I highly recommend. Placing video embed code on to a blog or webpage is quite easy, its a simple copy and paste procedure, but sometimes, people want to have pictures or a design around it. This video tutorial shows you a quick way to do so.

Doing so enables you to:

• Watch the clip full screen.
• Saves server and hard drive space.
• Can be viewed from any computer.
• The sound quality is nice.

Gallery Design: Video Tutorial

This is a video tutorial about how to create a Level 2 Gallery Page. The tutorial covers design, layer masks, and alignment in Photoshop, this is a way easy. A second tutorial programming this page will be created soon but be sure you review the previous tutorials about how to design a homepage and level 2 page, the links are below. If you have any questions, please let me know.

>> Designing a Homepage
>> Designing a Level 2 page.

FYI - Video tutorials can be monotonous at times, so in this tutorial, I didn't talk, and just left the internet radio on. Hopefully you can follow along.

Fire It Up!

Randolf

Level 2 Webpage Design Tutorial

When designing second level pages for your site, its important that you maintain continuity and harmony, otherwise, people will get confused and leave. These pages are also the entry way to the main content of your site. This video tutorial shows you a process for designing level 2 pages for your website that look similar in design to a your existing homepage.

Be sure you watch the previous tutorial "Quick Homepage Design Technique" on how to design a homepage first before viewing this tutorial.

Designing the "Gallery Page" is the most difficult of all Level 2 page designs because of its complexity. This will be covered in a later tutorial.

This tutorial covers the following topics: design grid, typography, placement and color.

- - - - - - - -

Be sure you check out the previous tutorial:

A Quick Homepage Design Technique

Graphic Design Crashcourse: Introduction / Overview

Before we begin, we have to talk about a few things. Mainly, some of the most important concepts in graphic design that you will use to enhance your site.

This will be the first part of many that will cover some of the basic concepts of graphic design needed to create an effective homepage design. Once you are familiar with these terms and concepts, you can use them to improve your design. The series will be broken down by topic, I'll describe each, provide my own insight into each and will provide you with examples to look at and compare.

NOTE: Just know that there is no substitute for getting formal training on design with an experienced instructor and experiencing a classroom critique of other designers. An experience like that makes you stronger and more critical as a designer. If you like this stuff and are serious about it, you should go to school to learn it. Its lots of fun. The items I highlight are simply the most common in my classes that have the greatest affect on creating a website.



Part 1: Purpose - What are you trying to say? Simplify Your Message >>

Part 2: Visual Heirarchy - Direct the viewer's eye, so things are clear.

• Dominant
• Subdominant
• Subordinate

Part 3: Form - Make the viewer feel comfortable.

• The Grid
• Golden Rectangle
• Rule of Thirds

Part 4: Harmony - Use color to convey an emotion and to keep everything together.

• Repitition
• Colors - Kuler
• Eye Dropper Tool
• Fonts I

Part 5: Contrast - Create visual vibrations in your design with these simple techniques.

• Size and Scale
• Color
• Texture

Part 6: Usability - Let's make buttons.

• Fonts II

- - - - - - - - - - -

If you found this helpful, be sure to check out:

Part I - Simplify Your Message >>

Graphic Design Crashcourse - Part 1: Simplify Your Message

Remember that you only have but a few moments to make your impression on a website visitor, therefore, your message must be clear, not only will your website be easy to view and navigate, but from your standpoint, it will also be easier to design.

This is because the visual impression will be simple and focused, and will be judged primarily by the main image that happens to be on the homepage. You must decide what your homepage is going to say visually, and the purpose of your site.

For example, the students who have the task of making a website in my class, have chosen particular majors such as: animation, game design, visual effects, digital film and graphic design. Within animation and game design, the major can be broken down to another level, where students have to choose a focus, like modeling and texturing, responsible for conceptualizing and creating the assets to an animation or game, or they may be given the task of animation only. The website must immediately convey "the major".

In the ILM website example above, why did they choose that image? And who do you think they are trying to communicate with? Ask these same questions for your own site.

For graphic designers, I find that this is easy for them. They work from a visual medium and are well aware of composition and readability. They come up with lots of designs quickly, and therefore seem to have an easier time doing this. That's okay - go ahead and copy what they do.

Digital film, visual effects and graphic design students, must also narrow down their image to the "one" that best represents their work. One technique I see them do, is to take screen shots or still images of their movies. I found that this can be difficult at times because they usually have such a wide variety of work. A good solution for these students is if they have an aptitude for photography, a well designed photograph would suffice.

So decide, what you are and be familiar with the imagery used for the websites used in your industry. Do your best to emulate them and be sure you put your best work on your homepage.

That takes care of the visual part...

Now, ask yourself what you want this site to function as? If you are a wanting to design a creative website, you will want it to (these are the most common):

• show your best work (15 - 20 pieces is average) in a gallery.
• this includes a video demo reel.
• let people know about you (bio or blog).
• make it easy for people to contact you (contact).

This is a nice starting list for you, and if you haven't noticed it yet, it is also your beginning navigational elements. Start with these:

• Demo Reel
• Gallery
• Bio
• Contact

As a side note - I use my site to not only do the above mentioned items, but I also use it to connect to my webmail, facebook, animation highlights, and to many other websites I visit a lot. I wanted to make my site in such a way that it also makes my daily work easy.

So there you have it, let's recap:

1. Before you begin, decide your message and simplify it as best you can.
2. Decide on an image that best represents you and your work (this will be your main image other known as the "money shot")
3. Decide on your functionality (I've recommended a few)
4. What are the main links on your homepage,
5. Is there anything else that you would like to add to your site that would help you become more efficient.

Have a great time designing. Now its time for the fun part.

- - - - - - - - - - -

If you found this helpful, you may want to read the following related posts.

A Quick Homepage Design Technique.
A Note on Design
The Money Shot: Establishing a Main Image **
Visual Heirarchy **

** Coming Soon

A Note on Graphic Design

Before we get too far with all the cool tips and tricks you are going to learn from this blog, it may the best time to talk about graphic design. Graphic design is the base for all that we are going to do here. I feel the need to write about it because for me, its a love hate relationship. I studied it in college and have an aptitude for it. I can arrange elements on "whatever" and I can make it look good, and I got better as I soaked up more experience. I like to design for large companies, but I LOVE to design for myself, like my own website, and even better, I LOVE teaching design and watching people get good results from what I share with them.

In college, I studied the craft of illustration. The people in this major were like me, we liked to draw, paint and animate, and from a distance, we made fun of the "graphic designers". "Ahhhh, they can't draw", we would say. They always wore nice clothes, were always in front of the computer and designed business cards that had small letters on it that we could barely even see. This wasn't me, and in college, you are naturally going to gravitate to like minded people such as yourself. I was an illustrator.

That was many many years ago, and since then, here's what I know (graphic designers, you are about to be honored here)...

All businesses, in order to make money, survive and flourish, have to sell. It doesn't matter what they sell, it could be the greatest thing ever invented...but here is the key, and I want you to remember this....

"If nobody knows about it, or how its going to help them...nobody is going to buy it".

In other words..."marketing".

Companies spend millions of dollars to staff their marketing departments. They have the responsibility making sure that everyone knows what Company A sells and how their product is going to help people. A good example of this are the Paul Rand logos at the bottom of this post. Do any of those logos look familiar? How many of these companies still use that same logo?

Marketing and branding is a simple but powerful idea that affects you in every way, every day. Companies know it and will continue to send out company messages to you...think about the following:

• Have a Coke and a _______.
• What is Target's logo?
• What was the last pair of sneakers you bought? Why?
• What colors represent Coke? Pepsi? Mountain Dew?
• What colors does Tiger Woods wear when he plays golf?
• Superbowl commercials.
• What color is the Yahoo logo?
  
• Why do people like driving Prius, Mercedes and Toyota.
• What car do you drive today?
  
• The most popular toy this holiday season is?
• Why do you go to Starbucks (for the coffee drinkers)? What color is the Starbuck's logo and what color are their uniforms?

The list goes on and on, and each is a marketing decision, that contains a well crafted strategically delivered message that somehow crosses your senses: tv, radio, computer, cel phones, billboards, signs, and we even wear the messaging on our bodies - does anybody know why that Ed Hardy brand is so popular? Or why do ladies spend 400 dollars on a Coach purse (holy smokes! - I know those Coach people love this.) Its all around us, but companies need to be in front of our faces so that we are reminded of their existence, products and or services, and they plant reasons for us to buy.

As I'm writing this, I'm typing on a Mac Powerbook, using a Logitech Cordless Mouse and in a few minutes will take a break to play on my daughter's Nintendo DSi.

So where does graphic design come into play? They are the ones responsible for how everything looks and feels and how that message is delivered to you. They make sure it looks nice, appealing, and that the messaging is clear for the target audience. They are closely related to the company's ability to make loads of money and if things don't look nice, or aren't clear, a company is not going to have good results and will eventually tank.

By the way, graphic designers become art directors and therefore are responsible for hiring illustrators and animators like me. Like I said, they control the money. So I treat them pretty nice.

How does this relate to you? Remember that you are about to build your website... these days, one of the single most important marketing tools that you have as an independent creative individual. Whether you like it or not, you (and your name) are your own brand. You are the CEO of your own company, and this company is YOU.

Therefore, you have to market yourself professionally. You have to look good and your branding and messaging must be clear. This is evident and felt in the way you choose to present yourself through your website, and it includes the coordination of the following:

• your use of color
• your main image choice
• your layout
• font choice
• word usage
• usability
• flow

Which is why I decided to put together this blog. Unlike our graphic design counterparts, animation, digital film, visual effects and game art majors don't study marketing design as a graphic designer would, so it is my intent to post many of these main points that graphic designers are familiar with so that you too can have an effective, aesthetically pleasing website that you are proud of and that will help generate money or opportunities. If you follow the tips and tricks I share in this blog, you could potentially have a site that looks as if a professional graphic designer created it.

So there it is, be nice to graphic designers. Their job is important. Their talents help drive marketing, which then helps drive the economy. Be kind to them and do good work while you are in their presence because they might be able to use your talents and skills one day.

Graphic designers of the world, we grovel at your feet.

A Quick Homepage Design Technique

This tutorial, shows you how to create custom homepages from existing ones. For this to work, you need to flag and take screen snapshots of well designed sites. I usually stick with the large companies homepages because of their design and simplicity. In the examples here, I'll be using the Jaguar site and the Mini Cooper site.

I usually show this technique to people who aren't trained graphic designers and I find the results to be pretty cool. At first, it seems like copying, but once you replace the main imagery, logo and navigation with your own, it will look totally new. You are only borrowing the template and the general flow for where items are placed.

Quantity is the key to this exercise, the more designs you do, the options you'll have, which will eventually lead to a better decision as you narrow things down to your final design. I recommend designing 3 - 5 mockups to get you started.

I also like this technique because it requires little or no coding. Everything is visual and I find that people have lots of fun doing it.

Be sure you check out my next video about adding functionality and programming to this homepage.

This will be my first customized video for this blog, it turned out better than I had expected. Looking forward to making my next one soon. The backround music for this video tutorial was provided by my friend DJ Ilo.

Let's Begin!