Friday, August 22, 2008

Mini Book for Halloween Scrapbooking

Mini Scrapbooks make great weekend projects and are perfect gifts. You can even make them with your children as a family project. The only paper needed for this mini book is one sheet of 12"x12" scrapbook paper!






Supplies Needed:

1 sheet 12"x12" Halloween Tiles paper from Design Originals
12" piece of black ribbon or ric-rac sewing trim
Halloween stickers from Design Originals

Tools Needed:
12" Trimmer
Craft Knife
Cutting mat or piece of chipboard
Photo Tape or Tape Runner

View Complete step project
Read More......

Design Concept & Texture

Varying paper surfaces can dramatically or subtly alter the mood you want your designs to convey. An exercise from Using Design Basics To Get Creative Results by Bryan L. Peterson uses the example of a piece of jewelry placed against two totally different surfaces — a shiny tile of black Formica vs. a piece of cement.


Translate this same concept to paper and imagine a photograph of a well-preserved vintage automobile printed on extremely smooth, glossy paper or printed on a rough, pepply surface. Neither one is necessarily better or worse. It depends on the mood you want to convey. Increased contrast between the image (and it's visual texture) and the actual surface of the paper can create interest in your design.

When selecting paper, choose a texture that is related to the concept of your design and doesn't overwhelm or get in the way of the message. While you can make a bold statement with texture, sometimes a subtle texture that stays 'in the background' is most appropriate. Make sure that your texture works with your choice of type and images so that text does not become unreadable or images unrecognizable. It may be necessary to use a bolder typeface if your paper is rough or strongly patterned.

Here is an example of paper texture:

Unexpected contrast: In a brochure promoting a computer-related service: "The gray color also evokes a high-tech, sterile mood, although I might expect a glossier surface to go along with that, rather than the sensual feel of the textured stock." — Student ID S011203
My comments: "...the softer texture may indeed have been meant to soften and humanize the high-tech image."

Hands-On Exercise
Look at brochures, books, ads, business cards, and other print projects and find five paper samples that range from the very smooth to the very rough. For each sample, look at the purpose and focus of the piece and decide if, in your opinion, the paper texture
1) is insignicant/incidental to the piece;
2) is appropriate for the mood and purpose of the piece; or,
3) is inappropriate for the mood and purpose of the piece.

If possible, find a paper store or warehouse near you. Stroll the aisles and discover the variety of papers there, especially with an eye on textures and finishes. Don't just look at the paper. Pick it up, touch it. Some paper stores will provide you with paper sample books — ask for them. These sample books are provided by various paper manufacturers to showcase the variety of papers they carry. Some sample books are beautifully designed as well and would make good samples for your Class Samples collection.

Source:
http://desktoppub.about.com/od/elements/l/aa_texture1.htm
Read More......

The Principles of Design

The principles of design help to determine how to use the design elements. There are four principles of design: balance, emphasis, rhythm, and unity. These principles of design help you to combine the various design elements into a good layout.


Balance

Balance is an equal distribution of weight. In terms of graphics, this applies to visual weight. Each element on a layout has visual weight that is determined by its size, darkness or lightness, and thickness of lines. There are two basic approaches to balance. The first is symmetrical balance which is an arrangement of elements so that they are evenly distributed to the left and to the right of center. The second is asymmetrical balance which is an arrangement of unlike objects of equal weight on each side of the page. Color, value, size, shape, and texture can be used as balancing elements.

Symmetrical balance can communicate strength and stability and is appropriate for traditional and conservative publications, presentations, and web sites. Asymmetrical balance can imply contrast, variety, movement, surprise, and informality. It is appropriate for modern and entertaining publications, presentations, and web sites.

To create balance:

  • Repeat a specific shape at regular intervals, either horizontally or vertically.
  • Center elements on a page.
  • Put several small visuals in one area to balance a single large image or block of text.
  • Use one or two odd shapes and make the rest regular shapes.
  • Lighten a text-heavy piece with a bright, colorful visual.
  • Leave plenty of white space around large blocks of text or dark photographs.
  • Offset a large, dark photograph or illustration with several small pieces of text, each surrounded by a lot of white space

Rhythm

Rhythm is a pattern created by repeating elements that are varied. Repetition (repeating similar elements in a consistent manner) and variation (a change in the form, size, or position of the elements) are the keys to visual rhythm. Placing elements in a layout at regular intervals creates a smooth, even rhythm and a calm, relaxing mood. Sudden changes in the size and spacing of elements creates a fast, lively rhythm and an exciting mood.

To create rhythm:

  • Repeat a series of similarly shaped elements, with even white spaces between each, to create a regular rhythm.
  • Repeat a series of progressively larger elements with larger white spaces between each for a progressive rhythm.
  • Alternate dark, bold type and light, thin type.
  • Alternate dark pages (with lots of type or dark graphics) with light pages (with less type and light-colored graphics).
  • Repeat a similar shape in various areas of a layout.
  • Repeat the same element in the same position on every page of a printed publication such as a newsletter.

Emphasis

Emphasis is what stands out or gets noticed first. Every layout needs a focal point to draw the readers eye to the important part of the layout. Too many focal points defeat the purpose. Generally, a focal point is created when one element is different from the rest.

To create emphasis:

  • Use a series of evenly spaced, square photographs next to an outlined photograph with an unusual shape.
  • Put an important piece of text on a curve or an angle while keeping all of the other type in straight columns.
  • Use bold, black type for headings and subheads and much lighter text for all other text.
  • Place a large picture next to a small bit of text.
  • Reverse (use white type) a headline out of a black or colored box.
  • Use colored type or an unusual font for the most important information.
  • Put lists you want to highlight in a sidebar in a shaded box.

Unity

Unity helps all the elements look like they belong together. Readers need visual cues to let them know the piece is one unit-the text, headline, photographs, graphic images, and captions all go together.

Unify elements by grouping elements that are close together so that they look like they belong together. Repeat color, shape, and texture. Use a grid (the underlying structure of a page) to establish a framework for margins, columns, spacing, and proportions.

To create unity:

  • Use only one or two typestyles and vary size or weight for contrast throughout the publication, presentation, or web site.
  • Be consistent with the type font, sizes, and styles for headings, subheads, captions, headers, footers, etc. throughout the publication, presentation, or web site.
  • Use the same color palette throughout.
  • Repeat a color, shape, or texture in different areas throughout.
  • Choose visuals that share a similar color, theme, or shape.
  • Line up photographs and text with the same grid lines.


Source:
http://www.online.tusc.k12.al.us/tutorials/grdesign/grdesign.htm#princdes

Read More......

Creating Effective Layouts

Layout Guidelines

A layout is the arrangement of type and graphics on a printed publication, presentation, or web site. A good layout should serve the purpose intended by the designer, organize the information and graphics in order to create a visual path for readers to follow, and attract the attention of readers. There's no one right way to create a good layout.


General Guidelines for Layouts:

  • Determine the purpose of your publication, presentation, or web site before you begin your layout.
  • Establish the primary message you want to present and plan your layout around it.
  • Choose an appropriate type of media (web page, presentation, printed book, newsletter, or brochure, etc.) and a size.
  • Identify the target audience, then write and design the publication, presentation, or web site keeping this audience in mind.
  • Consider their interests, reading levels, background, etc.


Organizing Layouts

Good layouts are easy to follow and provide clear reader cues to help readers easily find their way through a publication, presentation, or web page. If readers have to work at finding their way through a publication, they probably won't read it. Arrange and emphasize your information to make your message as clear as possible. Decide what you want the reader to see or read first and position it accordingly, then decide what you want the reader to read or see next. Continue arranging and emphasizing the information until you have included everything. The quality of your layout determines how quickly your readers will be directed through the publication and how fast they will be able to read it.

Guidelines for Organizing Layouts:

  • Use different sizes of type for different elements.
  • Establish a hierarchy of type sizes for headlines, subheads, text, etc. and be consistent with formatting. (All headlines should be formatted alike, all subheads should be formatted alike, all text should be formatted alike, etc.
  • Make the most important element you want your readers to see the largest and the least important element the smallest.
  • Use rules (lines) to separate information into groups.
  • Use different weights of type.
  • Use white space for design purposes in your publication.
  • Position important information in the upper left corner. The upper left corner is usually read first. Place a box around important information.
  • Call attention to lists of items by placing bullets in front of them.
  • Use colored or reversed type (white type on a dark background) to separate or emphasize.


Capturing the Readers' Attention

Information must be noticed before communication takes place. It has to stand out from the crowd by being different from what is around it. Before you decide how to grab your readers' attention, you should consider who will read it and where it will be seen. Your design should be suitable for your audience and appropriate for its environment.

Guidelines for Capturing the Readers' Attention:

  • Enlarge a graphic or photo of something small, so it will cover a large area.
  • Tilt an image or a block of type at an angle.
  • Surround a small element, such as a block of type or a graphic, with lots of white space.
  • Use bright colors for publications, presentations, or web sites that will be viewed in dark or gray environments.
  • Use a solid black area or a large white area in your design.
  • Crop an image in an unusual way.
  • Set important information in an atypical way, such as in a distinctive font.


Source:
http://www.online.tusc.k12.al.us/tutorials/grdesign/grdesign.htm#layouts
Read More......

Wednesday, August 13, 2008

Blur Effect in Flash 8.0

Learn how to blur images in Flash 8.0 using the in-built blur filter. The download .fla is included at the end of the tutorial. Please note: 1. You need to have Flash Player 8.0 installed to view the Flash animation. 2. You need Flash 8.0 to get the in-built blur filter

Steps to Follow :Step 1: Import an image and create a movie clip
  • Open Flash 8.0. Select New/Flash Document.
  • Import the image you would like to blur by clicking on File/Import to Stage and select the image.
  • Select the image on the stage and choose Modify/Convert To Symbol. Name the symbol blur and choose Movie Clip as Type.


Step 2: Create the blur effect

  • Select the blur symbol on the stage.
  • In the Properties Inspector, choose the Filters tab
  • Click on the '+' icon and choose Blur.
  • Choose 100 for Blur X and Blur Y and Quality as Medium.



Step 3: Create the animation

  • In the timeline window right click on the 50th frame choose insert keyframe. Select the movie clip and change the blur filter X and Y values to 0 to remove the blur effect.
  • Select any frame between Frames 1 and 50 and select Motion from the tween pop-up menu in the Property inspector.
  • Press Ctrl+S to save your changes.


Press Ctrl+Enter to view your animation.

You can also blur only the X coordinates by removing the lock icon in the filters inspector and changing Blur X to 100 and Blur Y to 0. The effect can be seen below. You can try different blur effects by simply adjusting the blur X and blur Y values.

Download the .fla file

Resources: http://www.entheosweb.com/Flash/blur_effect.asp
Read More......

Photo Slideshow Gallery in Flash 8.0

Learn how to create a Photo slideshow in Flash 8.0 using the in-built Flash Photo Slideshow template. Click here for the demo. Please note: 1. You need to have Flash Player 8.0 installed to view the Flash animation. 2. You need Flash 8.0 to use the in-built Photo Slideshow template

Steps to Follow :

Step 1: Create and export your images
  • Each image should have a size of 640 x 480 pixels.
  • Export the images in a numbered sequence. For example, for three files, the names could be photo1.jpg, photo2.jpg, and photo3.jpg. We recommend .jpg format for photograhs.


Step 2: Create the photo slideshow file and import the images

  • Open Flash 8.0. Click on File/New. Chose the Templates tab. Select Photo Slideshows. Click on OK. You will see a ready-made Flash photo slideshow created. Press Cntrl+Enter to view the file. Press the auto play button to view the slideshow.
  • To replace the images with your own, select the bottom layer called picture layer and click on the trash can icon to delete it.
  • Create a new layer by clicking the Insert Layer button, and name this new layer My Photos. Make sure that this new layer is the bottom layer.
  • Select the first blank keyframe in the My Photos layer, select File > Import > Import to Stage, and locate your photo sequence. Select the first image in the series, click Add, and click Import. Flash recognizes that your image is part of a series and asks you to import all files in the series. Click Yes to complete the import process. Flash places each image on separate keyframes. You can move the images so they are centered in the stage or you can choose the images on the stage and make the X and Y coordinates 0 so they are centered in the stage.
  • Your images appear in the Library panel and can be replaced later if needed by double clicking on the image in the laibrary window and clicking on the import button tos elect the new image file.
  • You can safely delete the old images that were included in this document from the library if you wish, they are saved in the photos folder.
  • If you have more than four images, make sure that all the other layers have an equal number of frames. Select the frame and click on F5 to add new frames.
  • Change the captions for the images, by replacing the text in the Captions layer and adding new keyframes with text for the new images. You do not have to worry about the photo number field. The template automatically determines how many images are in your document and indicates which photo you are currently using.
  • Change the title in the Title, Date layer.


Press Ctrl+Enter to view the completed Flash Photo Slidshow. Congratulations! You have successfully created a Flash photo slideshow in a few simple steps using the in-built Flash 8.0 Photo slideshow template.

The Photo Slideshow template also has a built-in autoplay mode that automatically changes the photo after a set delay. The template is set to a default delay time of 4seconds, but you can change this setting easily.

View Complete Tutorial

Resources: http://www.entheosweb.com/Flash/photo_slideshow.asp
Read More......

Attractive and advanced fashion presentation

Using this thoroughly explained, detailed lesson, you will see how to create very attractive and modern fashion presentation using some special flash tips and tricks. You can use this presentation as any banner, flash header, for any fashion web site... To create this presentation, you don't have to use action script code

All you need is just a little patience! You will also learn:

1. How to import any picture into a flash library,
2. How to apply flash 8 filters on any picture,
3. How to convert any layer into a mask layer,
4. How to use Brush Tool (B) and much more!

Click Demo

Step 1

First of all, save my pictures below, which we have to use for this example.





Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 430 pixels and the height to 300 pixels (as the dimensions of picture). Select any color as background color. Set your Flash movie's frame rate to 32 and click ok. See the picture below.



Step 3

Choose File > Import > Import to Library. In the file explorer window that appears, find a two pictures (picture1 and picture2) and Shift-click to select them all.Then click open. If you now open your flash library (Ctrl+L key) you will see a two pictures that you just imported. See the picture below.



Step 4

Double click on layer 1 to rename its name into a picture 1. After that, take the Selection Tool (V) and using the drag and drop technique, move the first picture from the Library on the stage.

Step 5

While the picture is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



View Complete Tutorial

Resources: http://www.tutorialized.com/view/tutorial/Attractive-and-advanced-fashion-presentation/36862
Read More......

Advanced party animation in flash

In this detailed lesson made for flash 8, I will show you how to create very advanced and attractive party animation in flash. You can use this animation for any presentation, flash header, banner. You don't have to use action script code to make this lesson. Using this lesson, you will also learn:

1. How to apply flash effects on any picture,
2. How to convert any picture into a Movie Clip,
3. How to Import any picture into a Flash Library,
4. How to use some special flash tips and tricks and much more.

Let's to Tutorial:

View Demo

Step 1

First of all, download my pictures which we will use for this lesson.

Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 409 pixels and the height to 239 pixels. Select any color as background color. Set your Flash movie's frame rate to 28 and click ok.



Step 3

Choose File > Import > Import to Library. In the file explorer window that appears, find a four images (image1, image2...) and Shift-click to select them all.Then click open. If you now open your flash library (Ctrl+L key) you will see a four images that you just imported. See the picture below.



Step 4

Double click on layer 1 to rename its name into a img1. After that, take the Selection Tool (V) and using the drag and drop technique, move the first image from the Library on the stage.

Step 5

While the image is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



View Complete Tutorial

Source: http://www.tutorialized.com/view/tutorial/Advanced-party-animation-in-flash/36960
Read More......

Sunday, August 10, 2008

Timeline Motion Tween in Flash



Flash can create two types of tweened animation using timeline:
Motion Tween(Demo) &
Shape Tween(Demo)
Creation of Motion/Shape tween using timeline is the basics of Flash.
Motion tween is nothing but tweening a Symbol's movement from one position to another.

To implement Motion Tween all that you have to do is, provide Flash with Symbol's initial position and the end position. Rest is taken care by Flash. Isn't it really simple.

For example in the above demonstration, I have converted the pencil object to a Symbol. Provided Flash with its initial and the end position, intermediate tweening is done by Flash. Motion Tween animation is as simple as that :)
Okay, you ready to learn how to create motion tween. All you have to do is just follow this tutorial step by step.

Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 must be installed in your system to download the .fla file.

Steps to follow:
1. Open a new flash file (Ctrl+N).
2. New Document window will appear
3. Select General panel and choose Type: Flash Document . Press OK.
4. If your timeline window is not open, press (Ctrl+Alt+T).
5. Now you can see a single Layer called "Layer1" in your timeline Window.



6. Select the first frame. Import your image onto stage, upon which you would want to implement motion tween.
File>Import>Import to Stage, or just press (Ctrl+R).
Or you can even draw your own object, you can either choose Rectangular tool or Oval tool from the tool box and draw your desired shape.
7. Now select your object on the stage and press F8 to convert this image to a Symbol. Convert to Symbol window will pop-up.
Name your Symbol what ever you like.
Select Graphic behavior and press OK.

Note: You can create motion tween only on symbols. So any object upon which you would want to implement motion tween, First convert the object to a Symbol.

8. Right now your Symbol is in frame1 of Layer1. Select frame 20 and press F6 to insert a new keyframe.
9. Still keeping playhead on frame 20, move your Symbol to any other position other than the present one.
10.Select any frame between, 2 to 19 and select Motion from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below.



11. Now press (Ctrl+Enter) to view your motion tween.

To read about Shape Tween, Click here. If you have already finished shape tween, to see the combined effect of motion and shape tween Click here.

Resources: http://www.entheosweb.com/Flash/motion_tween.asp
Read More......

First free tutorials for SOFTIMAGE|XSI 7

Miami FL- August 2008i3DTutorials, a Softimage official training partner, has released the world's first free tutorials for SOFTIMAGEXSI 7. Working with Softimage, i3DTutorials leads the industry with the best and most innovative SOFTIMAGEXSI training on the market. Since the announcement of SOFTIMAGEXSI 7, the industry has been talking about the new potential that is available through one of XSI 7's most innovative features, the Interactive Creative Environment, also known as ICE. This new feature in XSI 7 allows artists to visually create stunning effects for film, games, and visual effects easier than it has ever been before in the computer animation industry. With the release of these new free tutorial videos from training partner, i3DTutorials, everyone can now see the new features of XSI 7 firsthand, including the new implementation of mental ray 3.6 and ICE.

View the first ever sneak peek tutorials for SOFTIMAGEXSI 7 for free: i3dtutorials.com Read More......

ButterflyNetRender 4.11: Pain-free Network Rendering

A popular network rendering controller for Lightwave, Maya, Messiah Studio, Modo, 3DSmax, XSI, Digital Fusion, After Effects, and more has been updated with over 10 new features - Including support for 'OSX Universal Binary LightWave' and 'OSX Modo'!

Battle Ground, WA (PRWEB) July 30, 2008 -- Liquid Dream Solutions today announces ButterflyNetRender 4.11, the newest version of a popular network rendering controller for Lightwave, Maya, Messiah Studio, 3DSmax, XSI, Modo, Digital Fusion, After Effects, and more. The controller provides 3D graphic artists with a pain-free way to set up a render farm for managing frame creation in graphic animations. The software is incredibly easy to configure and use.

ButterflyNetRender technology has been given credits by many industry experts, including those from CGFocus.com, Keyframe and 3D World Magazine. It is widely used throughout the computer graphics industry to create animations and television shows. Some of the recent ones include Stargate SG1, Stargate Atlantis, Jimmy Neutron, Spy Kids 3, and Battlestar Galactica.
Many companies use ButterflyNetRender -- Including NASA. A partial list of Animation Studios can be found at their website.

Committed to software excellence, the development team keeps ButterflyNetRender current with technology changes by adding new features to meet the needs of the computer graphics industry. Below are the most important new features in ButterflyNetRender 4.11:
  • Modo OSX support
  • Support for LightWave OSX Universal Binary
  • Added 'Connect to BNR Client using Remote Desktop' feature
  • Updated BNR Client to send "Memory and CPU usage" feedback while rendering
  • Added 'Verify Creation date' when checking for rendered frames.
  • Updated BNR Submit XML system and added PDF manual
  • Created BNR Submit Python class with source code.
  • Added LightWave 9.3.1 & LightWave 9.5 (output format for 5 & 6 digit naming)
  • Improved OSX support with Windows to OSX path matching feature
  • minor bug fixes to improve performance

ButterflyNetRender runs under Microsoft Windows Vista(64/32), XP(64/32), 2003, NT, 2000, 98, ME. BNR Client also runs on OSX and Linux. The detailed information about the types of licenses and prices can be found at www.liquiddreamsolutions.com. Registered customers are entitled to free updates and technical support by email. Phone support is also available. An evaluation version of ButterflyNetRender is available as a free download from the Liquid Dream Solutions website.

About Liquid Dream Solutions:
Liquid Dream Solutions is a Pacific NW-based technology company founded by software engineer Paul Lord in 2001. Over 15 years, Paul Lord has been working as a software architect designing mission critical applications. He has worked for Monolith Productions, a Seattle-based gaming company, on the A.I. development team for the game: Blood II. He has also worked as a programming consultant for Luxology on their graphics software: "Modo".

More information is available from www.liquiddreamsolutions.com".
Note to editors: Please, let us know if you have questions or would like any additional information on ButterflyNetRender 4.11.
Product page: www.liquiddreamsolutions.com

Source:http://www.creative-3d.net/newsviewer.cfm?NewsID=1545
Read More......

Flash Profesional 8 Tutorial

By Denise Etheridge

Click here to download a free Flash Player. Then click on the Start Movie button to view my Flash 8 movie.


In this tutorial I take you step-by-step through the process of creating this Flash Professional 8 movie. You will learn how to create graphics, work with layers, and add motion, sound, and text to your movie.
You will need Flash Professional 8 to take this tutorial. If you do not have a copy of Flash Professional 8, you can download the trial version by clicking here.


Getting Started


To begin, open Flash Professional 8. You will be presented with the screen shown here.




Click Flash Document. The screen shown here appears:



The upper left corner of the screen displays the Tools palette, which contains tools you can use to create or modify graphics and text. You select a tool by clicking on it. Tool modifiers for the selected tool display below the Tools palette. You use modifiers to set tool options.

The Timeline appears in the upper portion of the screen. You use the Timeline to lay out the sequence of your movie.

The Stage displays in the center of the screen. You create your movie on the Stage.

Movie Properties

You start creating your movie by setting the Frame Rate, Dimensions, Background Color, and Ruler Units.

Frame Rate
The speed of the movie

Dimension
The size of the Stage

Background Color
The color of the Stage

Ruler Units
The unit of measure the ruler displays


You set these properties in the Movie Properties dialog box. To set the properties for the movie you are going to create:

1. Choose Modify > Document from the menu. The Document Properties dialog box opens.



2. Type 400 px in the Width field.
3. Type 400 px in the Height field.
4. Click the Background color box and choose white as the background color.
5. Type 12 in the Frame Rate field.
6. Choose Pixels from the drop-down menu in the Ruler Units field.
7. Click OK.

The Grid
In the exercises that follow, you will be creating graphics. When creating graphics, the grid is often helpful. To turn on the grid:

1. Choose View > Grid > Edit Grid from the menu. The Grid dialog box opens.



2. Click the Color box and select gray to have the grid lines display in gray.
3. Choose Show Grid to cause the grid to display.
4. Choose Snap to Grid to cause the edges of your graphic to align with the grid lines.
5. Set the Horizontal field to 20 px to separate horizontal lines by 20 pixels.
6. Set the Vertical field to 20 px to separate vertical lines by 20 pixels.
7. Set the Snap Accuracy to Normal.
8. Click OK.
Continue to Next Tutorial

Read More......

Flash Basics :INTRODUCTION

HTML is ideal for creating static websites where text and images are placed at fixed positions.

But it doesn't really support dynamic sites, where text, images, and animations are moving around on the screen.

Traditionally, these effects were achieved with animated GIF images or java applets.


Before we move on to concrete examples of Flash movies, we will compare Flash to both animated GIFs and java applets.

FLASH vs ANIMATED GIFs


An animated GIF is actually many images saved in one.

When the animated GIF is loaded onto a webpage, the browser simply loops the images. This means, if you make an animation of a clown that moves his hand up and down in 25 small movements, then the animated area of the image is saved 25 times. So it doesn't take a lot of animation to create a GIF image that's remarkable bigger than a regular clown image.

Therefore, even small animations take forever to load.

While animated GIFs can be used for animations, they do not support interactivity. They simply loop images in a predefined order and that's it.

In Flash, you can control the animations. For example, you can make the animation stop and wait for the user to click a button. And when the animation starts again it can be dependant on which button was clicked.

A final obvious difference is that GIF images are limited to a 256 color palette.

So compared to animated GIFs, the advantages of Flash are that:
  • Flash movies load much faster.
  • Flash movies allow interactivity.
  • Flash movies can use more than 256 colors.


FLASH vs JAVA APPLETS

Aside from animated GIFs, another approach has been used to add dynamic effects to web pages: java applets.

One of the most famous is the lake applet.

Unfortunately, java (the programming language for applets) requires programming skills. This means that you can't just start creating your own applets.

Therefore, some programmers have created free applets that allow customization. So instead of learning the programming, people can simply use the already programmed applets.

Again, the lake applet is a good example. It makes a wave effect on any image of any size. But if you wanted to add anything else to the applet you would have to either program it yourself or find a free applet that actually did what you wanted.

Flash movies are in many ways similar to java applets. Small programs that can be embedded into your HTML pages. But unlike java applets, it is fairly easy to create animations in Flash without programming skills.

Applets have often be criticized for "killing" browsers.

Sometimes, java programmers are not as skillfull as one might have wished. Some applets are programmed so they eventually take up all resources on the computer, and this results in "freezing" the browser.

So compared to java applets, the advantage of Flash is:
  • Flash movies are easier to create than java applets.
  • Flash movies are more stable in web browsers than java applets.


Note: While Flash has these advantages over applets, there is more to the story. There are things that you can program in java that just can't be done with Flash. But since the focus here is Flash we will not go into the details.

Source:http://www.echoecho.com/flashbasics.htm
Read More......

Basic Toolbox:Pick Tool Overview

Choose the Pick Tool

Click on the Pick Tool in the Toolbox. The Pick Tool is the main selection tool in CorelDraw. When using any other tool, you can change to the Pick Tool by pressing your keyboard spacebar (CTRL spacebar when using the Text tool in Edit Mode).



Resize Object with Pick Tool

Draw a rectangle and fill with any color. Click and drag on the corner handles to change the size of the rectangle proportionately. Click and drag handles in the middle of any side to change the size of the rectangle in that direction only.



Move Object with Pick Tool

Click and drag anywhere the rectangle to move. The outline of the object will follow the mouse on the screen for easy positioning. Release mouse button when object is in desired position.



Status and Property Bar Features

As you move or otherwise transform your objects, pay attention to the property bar above your workspace. In the sample above, note the % value which represents transformation as you are resizing an object. As soon as you release your mouse button, this value returns to 100%. It is excellent practice to pay attention to this information, as you will learn to use it for fast, precise positioning and resizing work.



Resize Text with Pick Tool

Choose the Text Tool from the Toolbox. Type the word "Sample." Choose the Pick Tool. Click and drag on the bottom right corner handle to increase the size of the text. Note the Property Bar as you resize the text. The Object Size, Position and Scale Factor changes, but toward the right end of the Property Bar, the Font Size changes as well. You can also change text size with the Text Tool.



Pick Tool Properties

Right click on the Pick Tool to open a pop-up menu. Choose Properties. You can control personal choices for the Pick Tool from this screen. Choose Treat All Objects as Filled for easy selection of objects with no fill. If you are just learning CorelDraw, it is advised to leave the other features as they are. Tutorials and the manuals assume the default settings are in place.


source: http://www.webreference.com/graphics/corel101/4/2.html
Read More......

Basic Toolbox: Object Overview

What is an object?

In CorelDraw, an object is any item you create or import into your document. It may be a rectangle, a circle, text, a photograph. All work in CorelDraw is done through selecting an object. Various effects can be applied to an object depending on the type of object and the tool you have selected. For this tutorial, choose the Rectangle Tool and create a rectangle. (See Rectangle Tool tutorial in this series.)




Pick Tool Selection

Choose the Pick Tool from the Toolbox and click on the rectangle. Note the 8 square "handles" that surround the square. These handles indicate that the object is active. You can resize the rectangle proportionately by clicking and dragging on the corner handles. The side handles resize only in one direction.



Move Object

Click and drag anywhere on a filled object, or on the outline of an object that has no fill to move. Release mouse button when object is in desired position. Click anywhere off the rectangle to deselect.



Rotate Object

Double click on the rectangle. Note how the handles change to double-ended arrows. This indicates that the object can be rotated or skewed. Click and drag on corner handles to rotate. Press the CTRL key while you rotate to constrain the rotation to 15 degree increments. Note the target-like icon in the middle of the rectangle when the rotate selection is active. Click and drag this icon to change the point of rotation. Click off the rectangle to deselect.



Skew Object

Double click on the rectangle and the double-ended selection arrows will appear. Click and drag on one of the side handles to skew the rectangle. Release mouse button when desired effect is created.



Shape Tool Selection

Delete the distorted rectangle. Draw a new rectangle. Choose the Shape Tool from the Toolbox and click on the rectangle. Note the selection now appears as four corner handles and dotted lines. This indicates that the object is active with the Shape Tool. Click and drag on one of the corner handles. Note how the corners become round. The Shape Tool and Pick Tool have very different functions with objects.



Node Selection

Choose the Freehand Tool from the Toolbox. Click and drag to create a curved line. (See Freehand Tool tutorial.) Release the mouse button. Choose the Shape Tool. There should be three or four blank squares along the line. These are nodes, and can be moved individually. Click on a node. Note how it becomes black, indicating that this node is active. The dotted lines coming from the node control the shape of the line (see next step). Drag the selected node a short way. Note how the line shape changes.



Controlling Curves

Click and drag the handle at the end of the dotted line coming from the node. This is a control point. As you drag the control point, note how the shape of the line changes. The blue line in the sample above shows the progression of the line shape as you drag the control point. Release the mouse when you have the shape you desire.



Source: http://www.webreference.com/graphics/corel101/4/
Read More......

Tuesday, August 5, 2008

Four Ways to 3D Hearts

Software Used: CorelDRAW 9, but should be compatible with later versions as well.



This tutorial is divided into six parts covering four techniques for creating 3D Hearts in CorelDraw. It starts with the basic heart shape, and also covers creating custom object spraylists for the artistic media tool. (Continued below...)


Part 1: The basic shape

1.) First we need to create the basic heart shape. Start with a circle. Right click on the circle and choose convert to curves.

Now you should have a circular shape with four nodes: top, bottom, left, and right.



2.) Use the shape tool to select the bottom node, then go to the property bar and convert it to a cusp node.

<-- Convert to cusp node. Do the same for the top node.

3.) Drag a marquee around the top and bottom nodes, then drag down so the top node is fairly even with the two side nodes.

You should now have a shape like the one shown. Not quite heart shaped, is it? Let's fix that...



4.) Select the top node with the shape tool. Drag the two control points upward to form a V shape. Try to keep the two handles symmetrical.

Do the same for the bottom node. You may need to move the bottom node up slightly.



5.) Make sure the top and bottom nodes are aligned vertically, and the three nodes across the top are aligned horizontally.
If you need to, you can select two or more nodes by dragging a marquee around them, or by click-shift-clicking, and then align them with the align nodes button on the property bar.



Continue to edit nodes to tweak the shape until you have a heart shape you're happy with. You can use the arrow keys to move nodes and control points more precisely.

Here's how mine turned out.

We'll be using this heart quite a lot in the next steps, so now would be a good time to save your basic heart shape to a file.




In part two, we'll use the blend tool to give the heart some dimension.
PART TWO: Using Blends >>

Sources: http://graphicssoft.about.com/od/coreldraw/l/bl3dhearts1.htm
Read More......

Concave Button, Basic Tutorial for Corel

1. First start by changing the fill to fountain fill like in the picture.



2. Now using the elips tool and holding ctrl pressed draw a circle.



3.After that from mask>create>mask from object or press ctrl+M to create a mask. After doing that from mask>mask outline>reduce. From there select width: 5 and press OK.Continue more...
Read More......

Monday, August 4, 2008

The Elements of Graphic Design

By Eric Miller, About.com

The elements of graphic design are used, and often combined, to create graphic works. They should not be confused with principles of design, such as balance and white space, but rather components such as color, type and images. Presented here is a list of the most commonly used elements in graphic design.


Shapes
From ancient pictographs to modern logos, shapes are at the root of design. They are used to establish layouts, create patterns, and build countless elements on the page. With graphics software such as Illustrator, creating and manipulating shapes is easier than ever, giving designers the freedom to create them at will.

Using Shapes in Graphic Design

Lines
Lines are used to divide space, direct the eye, and create forms. At the most basic level, straight lines are found in layouts to separate content, such as in magazine, newspaper, and website designs. This can of course go much further, with curved, dotted, and zigzag lines used as the defining elements on a page and as the basis for illustrations and graphics. Often, lines will be implied, meaning other elements of design will follow the path of line, such as type on a curve.

The Grid System
Creating Wireframes

Color
Color is an interesting element of graphic design because it can be applied to any other element, changing it dramatically. It can be used to make an image stand out, to show linked text on a website, and to evoke emotion. Graphic designers should combine their experience with color with an understanding of color theory.

Color Models: CMYK
Color Models: RGB
The Properties of Color
Using Color Swatch Books
Color Separation

Type
Type, of course, is all around us. In graphic design, the goal is to not to just place some text on a page, but rather to understand and use it effectively for communication. Choice of fonts (typefaces), size, alignment, color, and spacing all come into play. Type can be taken further by using it to create shapes and images.

Type Families
Typography Terminolgy
Letter Anatomy
Top Font Picks

Art, Illustration & Photography
A powerful image can make or break a design. Photographs, illustrations and artwork are used to tell stories, support ideas, and grab the audience's attention, so the selection is important. Graphic designers can create this work on their own, commission an artist or photographer, or purchase it at all price levels on many websites.

iStock Photo
Shutterstock
Veer

Texture
Texture can refer to the actual surface of a design or to the visual appearance of a design. In the first case, the audience can actually feel the texture, making it unique from the other elements of design. Selection of paper and materials in package design can affect actual texture. In the second case, texture is implied through the style of design. Rich, layered graphics can create visual texture that mirrors actual texture.

Texture in Graphic Design

Sources: http://graphicdesign.about.com/od/elementsofgooddesign/tp/elements.htm

Read More......

Graphic Design

From Wikipedia, the free encyclopedia

The term graphic design can refer to a number of artistic and professional disciplines which focus on visual communication and presentation. Various methods are used to create and combine symbols, images and/or words to create a visual representation of ideas and messages.

A graphic designer may utilize typography, visual arts and page layout techniques in varying degrees to produce the final result of the project. Graphic design often refers to both the process (designing) by which the communication is created and the products (designs) which are generated.
Common uses of graphic design include magazines, advertisements, product packaging and web design. For example, a product package might include a logo or other artwork, organized text and pure design elements such as shapes and color which unify the piece. Composition is one of the most important features of graphic design especially when utilizing pre-existing materials or using diverse elements.

Source: http://en.wikipedia.org/wiki/Graphic_design
Read More......

Creating Yahoo! Style Buttons with Corel DRAW!

This tutorial will show you how to create Yahoo! style buttons. Many people have written asking how these are done and I'll be demonstrating the technique with all of the programs I write tutorials for. I used Corel DRAW! 7.0 for Windows for this technique. Some things may be done differently with other versions.

Sometimes it's harder to create a certain look in a drawing program versus a paint program. This is not the case with these buttons, however. In fact, since these are done with a drawing program you can easily add certain features such as text that wraps around the button.

Begin by drawing a circle. Holding down the CTRL key while dragging the cursor will assure you of a circular rather than an elliptical (oval) shape.

Repeat the process drawing a smaller circle this time.

Use the Pick tool to marquee select both circles.

Choose Arrange, Align and Distribute and, in the Align and Distribute dialog box click on the "Center of Page" option. Click OK. You should have something like figure 1.


Figure 1


Select the Pick tool and click on the outer circle to select it.

Place the mouse over the Fill tool and hold down the left button until the flyout menu appears. Select the Fountain Fill Dialog icon. This will bring up the Fountain fill dialog box.

Set the Type to Linear and the Angle to -45%. Leave the Color Blend as Two color (the From: color should be black and the To: color should be white). Click OK and your image should resemble figure 2.


Figure 2


Use the Pick tool to select the inner circle.

Bring up the Fountain Fill Dialog box again. This time set the Type to Radial, set the Horizontal Offset to -20 and the Vertical Offset to 20.

Left-click on the From: color. This will bring up a small menu of colors. Choose the color you want the button to be: I chose a dark blue. Click OK and you'll have something like figure 3.


Figure 3


That's it for the button. You can add text or clip-art images. I added a Yippee! icon I've been working on, placed some text in a circle over the top of the button, shrank it down, and saved it as the web-ready JPG you see in figure 4.


Figure 4


Make sure you keep a copy of the vector drawing i.e. save the image as a CDR file so you can go back and make changes easily later on. That's it.... Be sure to check out some of our other Corel DRAW! tutorials.

Source: http://www.grafx-design.com/06corel.html

Read More......

Creating Animated Logos with Corel DRAW!

Animated GIFs

This tutorial will demonstrate how you can create an Animated GIF logo. I used Corel DRAW! 7.0 for Windows for this technique. Some things may be done differently with other versions.

Putting a New Spin on Your Logo

I'll be the first to admit that I'm probably the last person to jump on the "Animated GIF" bandwagon. To be honest, I didn't really see the potential for animated GIFs. Most of the early images I saw were kind of cheesy. On top of that, I prefer keeping my images' download time to a minimum, and animated GIFs can get rather large very quickly.

Recently, though, I've seen the light. Done right, animated GIFs can be pretty cool. And, with today's GIF animation software, animated image file size can be kept quite reasonable. Animated GIFs can be real attention-getters on banner ads, can really add to the appeal of a static logo, and they can certainly add some pizzazz to a web page.

Animated 3D text has become so popular on the web, in fact, that there are now several dedicated programs available for you to choose from. These programs, produced by software companies such as Xara and Ulead, make the creation of animated 3D text as simple as point-and-click.

What if you need to do more than animate simple text? Normally you might think of resorting to a dedicated 3D-rendering program. These programs can be expensive, though, and they often have pretty steep learning curves. So what can you do? Well, you can use Corel DRAW! to create the frames for your animated masterpiece. That's right! Corel DRAW! has all the features necessary to help you create a 3D animated logo.

Here's how you can use the extrusion features to give depth to, light, and spin your creation...

Open a new graphic in Corel DRAW! (I'm using version 7, but the method should translate well to other versions).

I'll be creating a simple logo using the first letters of GrafX Design, my design company.

First I entered the text using the Text tool. I then selected the text by clicking on the Pick tool. This enabled me to change the font and the size of the text. I chose Braggadocio at 72 points.

Because I didn't want to create just simple text, but rather I wanted a logo, I decided to cut the text out of a simple oval shape. To do that, I selected the Ellipse tool and dragged an oval shape around the text.

To line these elements up, marquee-select them all with the Pick tool and choose Arrange, Align and Distribute. In the Align and distribute dialog box, check Center of Page and click OK.

With the elements still selected, click the Combine button on the property bar. This will combine, or cutout, the text from the oval.

You can change the color of the oval logo by left-clicking a color on the color palette. I choose a light blue color (see figure 9.1).



Now that the logo design is complete (as simple as it is), it's time to extrude the image, light it, and start creating the separate frames you'll need in order to complete the animation.

Continue more...
Read More......

Sunday, August 3, 2008

Using Actions Creatively

Written by Ross

Photoshop actions are commonly overlooked when creating designs and artwork, often left only for batch editing photographs. However this is about to change, with a bit of imagination you can create very impressive abstract pieces, detailed images which beg for a closer look. Read on to discover how to transform one small image into a large, colorful piece of abstract art.


Tutorial Files

If you are a PSD PRO member then download the PSD file and much more by going here.

Final Image

This tutorial will show you how to create an image similar to this:



Step 1

This tutorial will act more as a guide rather than a step-by-step walkthrough, this is because, although your final image will be similar to the one I created, the results tend to vary due to technique we are using. However this does mean you will get a unique final piece so don’t worry if your images do not match exactly while we go through the steps. Most of the images in the steps show what your image should look like after the step rather than how to complete the step as i figured this would be the most helpful way to illustrate this tutorial.
Begin by selecting an image, images which tend to work well are high contrast with distinctive areas of color, Here is the image I used Tail Light. Create a new document at 1600×2000px and paste the tail light image in. Get rid of the unwanted parts of this photo, I won’t go into detail here as there are more than enough tutorials on this subject, however the pen tool or the polygonal lasso work well. By looking at the image below you can see which parts of this image I opted to keep. Note that I used black as the background color and also adjusted the levels slightly and scaled the image. Lastly duplicate this layer and name the duplicated layer ‘original’ then hide the layer.



Step 2

Find the actions panel, we will be using this a lot. With the panel open create a new action, this should immediately start recording any commands you use so it is important you are careful in what buttons you press for example ‘undo’ and ‘redo’ don’t get recorded.



Step 3

Duplicate the visible image layer then hit ctrl+T to enter free transform mode then scale the image down very slightly, next rotate it clockwise slightly then move it to the left slightly. All of these transforms should be hardly noticeable. We also want to change the colour of the bulbs; go image>adjustments>hue/saturation and change the hue to +10. Use the image shown below as a guide for the transforms.



Step 4

This is where it all happens, in the actions panel click stop then click on action 1 or whatever you named your action. Now press play… a lot of times, until it looks similar to below. Bin this action as you won’t need it again. Now select all the images except for the one you named ‘original’ and the background obviously, hit ctrl+E to merge them.



Step 5

This is a good time to create a more interesting background as we have a taste for what the image will look like, This will be a very simple background so in the background layer create a radial gradient going from #3c001c to #000 starting from the middle out to the edges. Create a new layer directly above the background layer, hit D then filter>render>clouds set this layer to 25% opacity and overlay blending mode.
Continue more...
Read More......