Dec 18, 2008
Oct 22, 2008
Oct 7, 2008
Pink for October
This month is dedicated for breast cancer awareness. we can make little contribution to this good thought. for more details kindly visit this site and do a little contribution towards the good work. Pink for October
Regards
Niki
Jul 23, 2008
Steps to Get Dry Fish poster.
Hi friends first i have to thank Ashok (bangalore) for the encouragement he has given me to do this. He inspired me to do these kind of photoshop work.
Whatever i have explained here is not only the method. May be you can start with this but there are plenty of other, easy and excellent methods are there to bring out these effects. whatever i have explained here is what i have done. so enjoy it .. and when you feel its helped you just add comments so that i can still improve in making tutorials much better.
If you don't understand anywhere in this tutorial kindly mail me to this ID webniki@gmail.com with title as the subject i am ready to help you.
Step 01
* Photo has been duplicated as “Layer 0 copy” as backup
Step 02
* A texture has been added with opacity 94% - to blend with photo
Step 03
* That layer has been duplicated and masked with the tool “Add vector mask” bottom of the layer panel with opacity 94%. And I have used the eraser tool with 100% opacity and flow and I erased around the fish. For the better visibility of the fish.
Step 04
* Here I have added Color balance option using the tool available bottom of the layer panel called “Create new fill or adjustment layer”. From there I have selected the color balance option and set the values as follows
Midtones = Red : +36, Green: -11, Blue: -1.
To get a kind of red warm feeling in photo
Step 05
* Here again Ive used the same tool to select the option called “Photo filter” to get a Yellow tint.
Select “Deep Yellow” using the filter dropdown box. And I kep the density 25%
Step 06
* Here I have duplicated the same texture image and I have added some focused light to the texture image and I kept opacity as 94% to get some focused look
This option is available from filter>render>lighting effects and follow the steps as it in the following image
Step 07
* Here Ive used the curves option from the “Create new fill or adjustment layer” tool which is available in the bottom of the layer panel. Follow the settings in the image follows
Step 08
* Here I have used a news paper image and I have placed it in the left top corner and applied the blend mode as overlay so that it get blend with photo and I have masked the layer and I have used the eraser tool to erase the edge of the image so that it get blended well with the photo
Step 09
* Here I have used a news paper image and I have placed it in the left top corner and applied the blend mode as overlay so that it get blend with photo and I have masked the layer and I have used the eraser tool to erase the edge of the image so that it get blended well with the photo
Step 10
* Here ive used the world map image and I have placed that in the top right corner of the photo and applied the blend mode as overlay and I have masked and erased the edges with erase tool.
Step 11
* Here I have added few dummy text and I have made it as it looks in the image and I have applied gaussion blur from filter menu. That time it become a image and I have reduced fill option to 37% so its visible but not bright.
Step 12
* Here I have created a blank layer and made a black feather ovel using elliptical marquee tool to get some dark space to keep the titles.
Step 13
*Here I have created a blank layer and made a black feather ovel using elliptical marquee tool to get some dark space to keep the titles.
Step 14
* Here I have started developing the title effect
I have used the following details to get the title effect
* Font : “Copperplate Gothic Bold”
* Size : 72pt
* Space between characters is : 100%
* And I have applied two separate colors for both words
* applied Inner shadow & glow option from “add layer style” follow the settings from the following images
Step 15
Step 16
Step 17
* Text has been added to down to the title
Step 18
* Here I have used a brush to get this circle (these kind of brushes available in internet for free)
Step 19
* Another brush below the titles
Step 20
* One more text with smaller size font
Step 21
* I have added one more text to add more depth and brightness to the highlighted text
Step 22
* This is groups of text I have used some smaller font size and used alignment as centered
Step 23
* Final Frame to the photo
Step 24
* This is the final touch
Thank you
If possible visit my photostream in flickr and enjoy the clicks.
Whatever i have explained here is not only the method. May be you can start with this but there are plenty of other, easy and excellent methods are there to bring out these effects. whatever i have explained here is what i have done. so enjoy it .. and when you feel its helped you just add comments so that i can still improve in making tutorials much better.
If you don't understand anywhere in this tutorial kindly mail me to this ID webniki@gmail.com with title as the subject i am ready to help you.
Step 01
* Photo has been duplicated as “Layer 0 copy” as backup
Step 02
* A texture has been added with opacity 94% - to blend with photo
Step 03
* That layer has been duplicated and masked with the tool “Add vector mask” bottom of the layer panel with opacity 94%. And I have used the eraser tool with 100% opacity and flow and I erased around the fish. For the better visibility of the fish.
Step 04
* Here I have added Color balance option using the tool available bottom of the layer panel called “Create new fill or adjustment layer”. From there I have selected the color balance option and set the values as follows
Midtones = Red : +36, Green: -11, Blue: -1.
To get a kind of red warm feeling in photo
Step 05
* Here again Ive used the same tool to select the option called “Photo filter” to get a Yellow tint.
Select “Deep Yellow” using the filter dropdown box. And I kep the density 25%
Step 06
* Here I have duplicated the same texture image and I have added some focused light to the texture image and I kept opacity as 94% to get some focused look
This option is available from filter>render>lighting effects and follow the steps as it in the following image
Step 07
* Here Ive used the curves option from the “Create new fill or adjustment layer” tool which is available in the bottom of the layer panel. Follow the settings in the image follows
Step 08
* Here I have used a news paper image and I have placed it in the left top corner and applied the blend mode as overlay so that it get blend with photo and I have masked the layer and I have used the eraser tool to erase the edge of the image so that it get blended well with the photo
Step 09
* Here I have used a news paper image and I have placed it in the left top corner and applied the blend mode as overlay so that it get blend with photo and I have masked the layer and I have used the eraser tool to erase the edge of the image so that it get blended well with the photo
Step 10
* Here ive used the world map image and I have placed that in the top right corner of the photo and applied the blend mode as overlay and I have masked and erased the edges with erase tool.
Step 11
* Here I have added few dummy text and I have made it as it looks in the image and I have applied gaussion blur from filter menu. That time it become a image and I have reduced fill option to 37% so its visible but not bright.
Step 12
* Here I have created a blank layer and made a black feather ovel using elliptical marquee tool to get some dark space to keep the titles.
Step 13
*Here I have created a blank layer and made a black feather ovel using elliptical marquee tool to get some dark space to keep the titles.
Step 14
* Here I have started developing the title effect
I have used the following details to get the title effect
* Font : “Copperplate Gothic Bold”
* Size : 72pt
* Space between characters is : 100%
* And I have applied two separate colors for both words
* applied Inner shadow & glow option from “add layer style” follow the settings from the following images
Step 15
Step 16
Step 17
* Text has been added to down to the title
Step 18
* Here I have used a brush to get this circle (these kind of brushes available in internet for free)
Step 19
* Another brush below the titles
Step 20
* One more text with smaller size font
Step 21
* I have added one more text to add more depth and brightness to the highlighted text
Step 22
* This is groups of text I have used some smaller font size and used alignment as centered
Step 23
* Final Frame to the photo
Step 24
* This is the final touch
Thank you
If possible visit my photostream in flickr and enjoy the clicks.
Mar 31, 2008
Adobe Illustrator - Vector Graphics
Today we will discuss about the Adobe Illustrator which comes under the Vector Graphics Tool.
Adobe Illustrator
Illustrator was, in the early days, the graphic design (page layout) application before there was anything else. It was also the application, along with Apple’s Laser Printer, that revolutionized the printing industry. So in a sense, Illustrator is both a former DTP (desk top publishing) application and a normal vector drawing program. It’s quite possible to make the same layouts in Illustrator as you can in InDesign, though it is more difficult, takes longer and lacks a lot of features that InDesign has specifically for this purpose. Illustrator is both a web and print application, but is often regarded falsely as a logo-and-print-only application.
Illustrator can and sometimes should be used for the following web tasks:
•Logos (and that’s a must, because you really want scalability and easily editable logos)
•Small icons (the reason for this: it is much easier to do!)
•Graphics that don’t need to be photorealistic
•Flash (scalability is important)
That is almost complete list for web designing; the only thing missing is photo manipulation! As you can see, Illustrator is a lot more flexible than any other application in the Creative Suite.
What Illustrator should not be used for?
•Photo manipulation, unless you want to vectorize an image
•3D effects - this may come as a surprise for some, but Illustrator doesn’t render complicated artwork especially well (referring here to the Effect Menu in Illustrator, where Illustrator itself renders the 3D shapes). Square models are fine (like a CD case), but if you want fine rounded curves, you should use a true 3D application like Maya, Lightwave or 3D Studio. The rendering Illustrator does is horrible to such a degree that I wonder why they even bothered to add those features with Illustrator. Of course if you have the skills, you could draw your own 3D shapes with no problem at all, but as an Illustrator Effect I wouldn’t recommend it.
SVG (Scalable Vector Graphics)
SVG is an open standard graphics file format based on XML. SVG is text-based and, as the name suggests, fully scalable. Most other vector formats cannot be displayed on the Web without first being rasterised. SVG is a non-proprietary alternative to Macromedia Flash, which allows users to create vector objects, animated images, data-driven and interactive content that can be delivered via the Web. Currently, most Web browsers need a plug-in to view SVG content (see note below). SVG can also be delivered via mobile devices (e.g. phones and PDAs) and in print. Further information is available from the World Wide Web Consortium (W3C).
This is a static GIF format image. If your browser is SVG-enabled, you can take a look at an SVG version of the clock which moves in real time and shows the time according to your computer system clock. The SVG 'Analog Clock' is available (together with other SVG examples) on Adobe's SVG Samples page (this link will open in a new browser window).
If after following the link your browser is unable to display the SVG examples, it is probably not SVG-enabled. Internet Explorer requires the Adobe SVG Viewer plug-in. Firefox natively supports some SVG features, but by no means all.
This is the last post for this topic "Vector Graphics" I hope you all enjoy in reading this topic. i have attached white paper of this topic.
Enjoy Reading this
Download White paper on "Vector Graphics"
Regards
NikiJackson
Adobe Illustrator
Illustrator was, in the early days, the graphic design (page layout) application before there was anything else. It was also the application, along with Apple’s Laser Printer, that revolutionized the printing industry. So in a sense, Illustrator is both a former DTP (desk top publishing) application and a normal vector drawing program. It’s quite possible to make the same layouts in Illustrator as you can in InDesign, though it is more difficult, takes longer and lacks a lot of features that InDesign has specifically for this purpose. Illustrator is both a web and print application, but is often regarded falsely as a logo-and-print-only application.
Illustrator can and sometimes should be used for the following web tasks:
•Logos (and that’s a must, because you really want scalability and easily editable logos)
•Small icons (the reason for this: it is much easier to do!)
•Graphics that don’t need to be photorealistic
•Flash (scalability is important)
That is almost complete list for web designing; the only thing missing is photo manipulation! As you can see, Illustrator is a lot more flexible than any other application in the Creative Suite.
What Illustrator should not be used for?
•Photo manipulation, unless you want to vectorize an image
•3D effects - this may come as a surprise for some, but Illustrator doesn’t render complicated artwork especially well (referring here to the Effect Menu in Illustrator, where Illustrator itself renders the 3D shapes). Square models are fine (like a CD case), but if you want fine rounded curves, you should use a true 3D application like Maya, Lightwave or 3D Studio. The rendering Illustrator does is horrible to such a degree that I wonder why they even bothered to add those features with Illustrator. Of course if you have the skills, you could draw your own 3D shapes with no problem at all, but as an Illustrator Effect I wouldn’t recommend it.
SVG (Scalable Vector Graphics)
SVG is an open standard graphics file format based on XML. SVG is text-based and, as the name suggests, fully scalable. Most other vector formats cannot be displayed on the Web without first being rasterised. SVG is a non-proprietary alternative to Macromedia Flash, which allows users to create vector objects, animated images, data-driven and interactive content that can be delivered via the Web. Currently, most Web browsers need a plug-in to view SVG content (see note below). SVG can also be delivered via mobile devices (e.g. phones and PDAs) and in print. Further information is available from the World Wide Web Consortium (W3C).
This is a static GIF format image. If your browser is SVG-enabled, you can take a look at an SVG version of the clock which moves in real time and shows the time according to your computer system clock. The SVG 'Analog Clock' is available (together with other SVG examples) on Adobe's SVG Samples page (this link will open in a new browser window).
If after following the link your browser is unable to display the SVG examples, it is probably not SVG-enabled. Internet Explorer requires the Adobe SVG Viewer plug-in. Firefox natively supports some SVG features, but by no means all.
This is the last post for this topic "Vector Graphics" I hope you all enjoy in reading this topic. i have attached white paper of this topic.
Enjoy Reading this
Download White paper on "Vector Graphics"
Regards
NikiJackson
Mar 26, 2008
Vector Graphics Terminology -2
Fill
A fill can be applied to any area within a path. Fills can be single blocks of colour, gradients, patterns or images (raster or vector).
Join
Two or more line segments meet with a join, and the join style can usually be one of three types: miter join, round join, or bevel join.
Line segment
Paths are made up of one or more line segments. A line segment comes between two anchor points and is either a curve or a straight line.
This path is made up of six line segments (one straight and five curved)
Path (Open Path; Closed Path)
The path is the basis for all vector objects. A path is made up of one or more line segments connected by two or more anchor points. Paths can be made from a combination of straight lines and curves, each of which may be made up of many connecting points. Paths can be open or closed. An open path is one with unconnected end points, while a closed path is one whose start and end points meet.
Open paths (anchor points and line segments shown in blue)
Closed paths (anchor points and line segments shown in blue)
Polygon
A polygon is any closed path made up of three or more adjoining line segments. Vector drawing programs usually provide tools for drawing ellipses (circles and ovals), squares and rectangles, and most have polygon tools allowing you to automatically draw other shapes such as triangles, stars or shapes with any number of sides. Once created, basic polygons can be edited to form much more complex shapes.
Rasterise
Rasterising is the process of converting an image from a vector format to a raster (or bitmap) format. Vector images usually need to be rasterised in order to print or display them on the Web. Once rasterised, the individual components of the vector graphic (paths, fills, strokes, text, etc) can no longer be edited. A vector image that has been rasterised is like any other raster image in that it is a 'resolution-dependent' matrix of pixels (i.e. it cannot be scaled without loss of quality).
The conversion process is relatively straight forward - opening or importing a vector image in most raster-based image editing programs (such as Adobe Photoshop or Corel Paint Shop Pro - see TASI Advice Document Image Editing Software) will prompt the user to select pixel dimensions and resolution for the file. You can also save or export vector images as bitmaps using vector-based drawing programs (such as Adobe Illustrator or Macromedia FreeHand - see TASI Advice Document Vector Graphics Resources).
Once a vector image has been rasterised it is no longer resolution-independent. The diagram on the left illustrates the scalability of the original vector graphic - the zoomed portion remains crisp and clear. The diagram on the right shows the obvious visual distortion that occurs when you zoom in after rasterisation.
Stroke
A stroke is a path's outline. A path can have multiple strokes of varying widths. Strokes can be coloured or patterned.
Here it gets over we will discuss about the vector graphics tool from adobe called "Adobe Illustrator" in the next post
regards
NikiJackson
A fill can be applied to any area within a path. Fills can be single blocks of colour, gradients, patterns or images (raster or vector).
Join
Two or more line segments meet with a join, and the join style can usually be one of three types: miter join, round join, or bevel join.
Line segment
Paths are made up of one or more line segments. A line segment comes between two anchor points and is either a curve or a straight line.
This path is made up of six line segments (one straight and five curved)
Path (Open Path; Closed Path)
The path is the basis for all vector objects. A path is made up of one or more line segments connected by two or more anchor points. Paths can be made from a combination of straight lines and curves, each of which may be made up of many connecting points. Paths can be open or closed. An open path is one with unconnected end points, while a closed path is one whose start and end points meet.
Open paths (anchor points and line segments shown in blue)
Closed paths (anchor points and line segments shown in blue)
Polygon
A polygon is any closed path made up of three or more adjoining line segments. Vector drawing programs usually provide tools for drawing ellipses (circles and ovals), squares and rectangles, and most have polygon tools allowing you to automatically draw other shapes such as triangles, stars or shapes with any number of sides. Once created, basic polygons can be edited to form much more complex shapes.
Rasterise
Rasterising is the process of converting an image from a vector format to a raster (or bitmap) format. Vector images usually need to be rasterised in order to print or display them on the Web. Once rasterised, the individual components of the vector graphic (paths, fills, strokes, text, etc) can no longer be edited. A vector image that has been rasterised is like any other raster image in that it is a 'resolution-dependent' matrix of pixels (i.e. it cannot be scaled without loss of quality).
The conversion process is relatively straight forward - opening or importing a vector image in most raster-based image editing programs (such as Adobe Photoshop or Corel Paint Shop Pro - see TASI Advice Document Image Editing Software) will prompt the user to select pixel dimensions and resolution for the file. You can also save or export vector images as bitmaps using vector-based drawing programs (such as Adobe Illustrator or Macromedia FreeHand - see TASI Advice Document Vector Graphics Resources).
Once a vector image has been rasterised it is no longer resolution-independent. The diagram on the left illustrates the scalability of the original vector graphic - the zoomed portion remains crisp and clear. The diagram on the right shows the obvious visual distortion that occurs when you zoom in after rasterisation.
Stroke
A stroke is a path's outline. A path can have multiple strokes of varying widths. Strokes can be coloured or patterned.
Here it gets over we will discuss about the vector graphics tool from adobe called "Adobe Illustrator" in the next post
regards
NikiJackson
Mar 25, 2008
Vector Graphcis Terminologies..
We will discuss about the terminology used in vector graphics
Anchor point (point; Node; End point;)
Anchor points (or simply 'points') are the basic components of a path. Points appear at the start and end of a path and at every point at which the path changes direction. Points connect each line segment and determine the nature of the line's curve. Each point can be moved to adjust the shape of the path. Points can be added or removed from existing paths.
Six anchor points connecting six line segments to create a closed path
Bézier curve (Curve)
A curved segment of a path is known as a Bézier curve (after French mathematician Pierre Bézier). Bézier curves are defined by mathematical equations - essentially, the coordinates of a curve can be calculated and drawn by knowing the position of two end points and two control points.
Cap
The cap refers to the end of an open path, and the cap style can usually be one of three types: butt cap, round cap, or projecting cap (aka square cap).
Control handle (Control point)
Control handles appear when a path's anchor point is selected. Control handles give greater control and flexibility over how each point and line segment is placed, and allow fine-tuning of the overall shape of the path.
Moving the control handles affects the shape of the path
Anchor point (point; Node; End point;)
Anchor points (or simply 'points') are the basic components of a path. Points appear at the start and end of a path and at every point at which the path changes direction. Points connect each line segment and determine the nature of the line's curve. Each point can be moved to adjust the shape of the path. Points can be added or removed from existing paths.
Six anchor points connecting six line segments to create a closed path
Bézier curve (Curve)
A curved segment of a path is known as a Bézier curve (after French mathematician Pierre Bézier). Bézier curves are defined by mathematical equations - essentially, the coordinates of a curve can be calculated and drawn by knowing the position of two end points and two control points.
Cap
The cap refers to the end of an open path, and the cap style can usually be one of three types: butt cap, round cap, or projecting cap (aka square cap).
Control handle (Control point)
Control handles appear when a path's anchor point is selected. Control handles give greater control and flexibility over how each point and line segment is placed, and allow fine-tuning of the overall shape of the path.
Moving the control handles affects the shape of the path
Mar 24, 2008
Why to use Vector Graphics?
Its not been a problem in knowing history of any subject. but it always good to know why to use it.. thats what we are going to discuss today...
Why to use Vector Graphics?
Most professional graphic designers create logos (and other images with less colors) with a vector based program such as Adobe Illustrator or Flash. This is beneficial because
• The logo can then be scaled smaller to fit on a small business card
• Scaled indefinitely and put on a giant billboard
• The side of a skyscraper, for that matter.
• Vector files are typically extremely small in file size compared to bitmap images Its very easy and quick to work with.
see you in next post
Regards
NikiJackson
Why to use Vector Graphics?
Most professional graphic designers create logos (and other images with less colors) with a vector based program such as Adobe Illustrator or Flash. This is beneficial because
• The logo can then be scaled smaller to fit on a small business card
• Scaled indefinitely and put on a giant billboard
• The side of a skyscraper, for that matter.
• Vector files are typically extremely small in file size compared to bitmap images Its very easy and quick to work with.
see you in next post
Regards
NikiJackson
Mar 19, 2008
What is Vector Graphics ?
OK Today we will see What is vector Grpahics?
What is Vector Graphics?
Vector is a computer image file that uses paths with a start and end point. With a vector program such as Adobe Illustrator or Flash you can add or remove point or nodes to the path that will allow you to bend, twist, stretch, straighten the path into any object your heart desires. People often confuse Adobe Illustrator with Adobe Photoshop or don’t know the fundamental difference between the two programs.
The alternative to vector graphic files are raster or bitmap based graphic files. Photographs or jpgs/jpegs, gifs, bmps, tiffs, pngs and many other popular computer graphic files are raster/bitmap based images which use pixels to represent an image. Each pixel in a bitmap has a defined color value and most photographs contain thousands or millions of pixels which comprise the picture.
Adobe Photoshop is a raster based software program that allows you to edit raster files such as photographs. Vector graphics tend to have less colors and can be scaled
One of the advantages of vector files is that they can be scaled to any size and not loose their image quality. This is because vector files use mathematical calculations of the above explained paths to resize the image. Here is a visual example.
This Image looks the same opened in either Illustrator or Photoshop.
If you zoom in or scale the above vector file you will see no pixels or loss of image quality.
On the other hand, when you zoom in on the above bitmap version you will see pixels, blurring, aliasing and an obvious loss of quality.
In the next post we will discuss about why to use Vector Graphics?
Regards
NikiJackson
What is Vector Graphics?
Vector is a computer image file that uses paths with a start and end point. With a vector program such as Adobe Illustrator or Flash you can add or remove point or nodes to the path that will allow you to bend, twist, stretch, straighten the path into any object your heart desires. People often confuse Adobe Illustrator with Adobe Photoshop or don’t know the fundamental difference between the two programs.
The alternative to vector graphic files are raster or bitmap based graphic files. Photographs or jpgs/jpegs, gifs, bmps, tiffs, pngs and many other popular computer graphic files are raster/bitmap based images which use pixels to represent an image. Each pixel in a bitmap has a defined color value and most photographs contain thousands or millions of pixels which comprise the picture.
Adobe Photoshop is a raster based software program that allows you to edit raster files such as photographs. Vector graphics tend to have less colors and can be scaled
One of the advantages of vector files is that they can be scaled to any size and not loose their image quality. This is because vector files use mathematical calculations of the above explained paths to resize the image. Here is a visual example.
This Image looks the same opened in either Illustrator or Photoshop.
If you zoom in or scale the above vector file you will see no pixels or loss of image quality.
On the other hand, when you zoom in on the above bitmap version you will see pixels, blurring, aliasing and an obvious loss of quality.
In the next post we will discuss about why to use Vector Graphics?
Regards
NikiJackson
Mar 17, 2008
Raster vs Vector Graphics
Today we shall discuss about this as continuation of yesterday's post
Raster Graphics vs. Vector Graphics
There are two kinds of computer graphics - Raster (composed of pixels) and Vector (composed of paths). Raster images are more commonly called bitmap images.
A bitmap image uses a grid of individual pixels where each pixel can be a different color or shade. Bitmaps are composed of pixels.
Vector graphics use mathematical relationships between points and the paths connecting them to describe an image. Vector graphics are composed of paths.
The image to the left below is representative of a bitmap and the image to the right is representative of a vector graphic. They are shown at four times actual size to exaggerate the fact that the edges of a bitmap become jagged as it is scaled up:
Vector Graphic:
With Adobe® Systems' introduction of the PostScript® page-description language computers could display fonts and images using point-to-point math rather than by pixels alone. The advantage to using a page-description language such as PostScript becomes clear when you scale an image up. The larger you display a bitmap, the more jagged it appears, while a vector image remains smooth at any size. That is why PostScript and TrueType® fonts always appear smooth - they are vector-based.
The jagged appearance of bitmap images can be partially overcome with the use of "anti-aliasing". Anti-aliasing is the application of subtle transitions in the pixels along the edges of images to minimize the jagged effect (below left). A scalable vector image will always appear smooth (below right):
Anti-Aliased Bitmap Image:
Smooth Vector Image:
Bitmap images require higher resolutions and anti-aliasing for a smooth appearance. Vector-based graphics on the other hand are mathematically described and appear smooth at any size or resolution.
Bitmaps are best used for photographs and images with subtle shading. Graphics best suited for the vector format are page layout, type, line art or illustrations.
Wherever possible use the vector format for all your type, line art and illustrations and only use bitmaps for photos or images with complex or non-uniform shading.
Regards
NikiJackson
Raster Graphics vs. Vector Graphics
There are two kinds of computer graphics - Raster (composed of pixels) and Vector (composed of paths). Raster images are more commonly called bitmap images.
A bitmap image uses a grid of individual pixels where each pixel can be a different color or shade. Bitmaps are composed of pixels.
Vector graphics use mathematical relationships between points and the paths connecting them to describe an image. Vector graphics are composed of paths.
The image to the left below is representative of a bitmap and the image to the right is representative of a vector graphic. They are shown at four times actual size to exaggerate the fact that the edges of a bitmap become jagged as it is scaled up:
Vector Graphic:
With Adobe® Systems' introduction of the PostScript® page-description language computers could display fonts and images using point-to-point math rather than by pixels alone. The advantage to using a page-description language such as PostScript becomes clear when you scale an image up. The larger you display a bitmap, the more jagged it appears, while a vector image remains smooth at any size. That is why PostScript and TrueType® fonts always appear smooth - they are vector-based.
The jagged appearance of bitmap images can be partially overcome with the use of "anti-aliasing". Anti-aliasing is the application of subtle transitions in the pixels along the edges of images to minimize the jagged effect (below left). A scalable vector image will always appear smooth (below right):
Anti-Aliased Bitmap Image:
Smooth Vector Image:
Bitmap images require higher resolutions and anti-aliasing for a smooth appearance. Vector-based graphics on the other hand are mathematically described and appear smooth at any size or resolution.
Bitmaps are best used for photographs and images with subtle shading. Graphics best suited for the vector format are page layout, type, line art or illustrations.
Wherever possible use the vector format for all your type, line art and illustrations and only use bitmaps for photos or images with complex or non-uniform shading.
Regards
NikiJackson
Mar 16, 2008
Vector Graphics - History of Graphics
Hi
From this to another couple of post is going to be about vector graphics. i planned to post all the content in 2 or 3 post. i hope this will help any of the guy who is interested in graphics. any way we will start to day
in the beginning i am going to talk about History of graphics in a brief way which will really help full in knowing the past of graphics.
History of Graphics
We can categories the history of graphics in two as early and Modern. Early will tell you about the birth of graphics and the Modern will tell you about the evolution of graphics.
Early
Graphic Design spans the history of humankind from the caves of Lascaux to the dazzling neons of Ginza. In both this lengthy history and in the relatively recent explosion of visual communication in the 20th and 21st centuries, there is sometimes a blurring distinction and over-lapping of advertising art, graphic design and fine art. After all, they share many of the same elements, theories, principles, practices and languages, and sometimes the same benefactor or client. In advertising art the ultimate objective is the sale of goods and services. In graphic design, "the essence is to give order to information, form to ideas, expression and feeling to artifacts that document human experience.
The paintings in the caves of Lascaux around 14,000 BC and the birth of written language in the third or fourth millennium BC are both significant milestones in the history of graphic design and other fields which hold roots to graphic design.
The “Book of Kells” is an early example of graphic design. It is a lavishly decorated hand-written copy of the Gospels of the “Christian Bible” created by Celtic monks around 800AD.
From 1892 to 1896 William Morris' Kelmscott Press published books that are some of the most significant of the graphic design products of the Arts and Crafts movement, and made a very lucrative business of creating books of great stylistic refinement and selling them to the wealthy for a premium. Morris proved that a market existed for works of graphic design in their own right and helped pioneer the separation of design from production and from fine art. The work of the Kelmscott Press is characterized by its obsession with historical styles. This historicism was, however, important as it amounted to the first significant reaction to the stale state of nineteenth-century graphic design. Morris' work, along with the rest of the Private Press movement, directly influenced Art Nouveau and is indirectly responsible for developments in early twentieth century graphic design in general.
Modern
The signage in the London Underground is a classic of the modern era and used a font designed by Edward Johnston in 1916.
In the 1920s, Soviet Constructivism (art) applied 'intellectual production' in different spheres of production. The movement saw individualistic art as useless in revolutionary Russia and thus moved towards creating objects for utilitarian purposes. They designed buildings, theater sets, posters, fabrics, clothing, furniture, logos, menus, etc.
Jan Tschichold codified the principles of modern typography in his 1928 book, New Typography. He later repudiated the philosophy he espoused in this book as being fascistic, but it remained very influential. Tschichold, Bauhaus typographers such as Herbert Bayer and Laszlo Moholy-Nagy, and El Lissitzky are the fathers of graphic design as we know it today. They pioneered production techniques and stylistic devices used throughout the twentieth century. The following years saw graphic design in the modern style gain widespread acceptance and application. A booming post-World War II American economy established a greater need for graphic design, mainly advertising and packaging. The emigration of the German Bauhaus school of design to Chicago in 1937 brought a "mass-produced" minimalism to America; sparking a wild fire of "modern" architecture and design. Notable names in mid-century modern design include Adrian Frutiger, designer of the typefaces Univers and Frutiger; Paul Rand, who, from the late 1930s until his death in 1996, took the principles of the Bauhaus and applied them to popular advertising and logo design, helping to create a uniquely American approach to European minimalism while becoming one of the principal pioneers of the subset of graphic design known as corporate identity; and Josef Müller-Brockmann, who designed posters in a severe yet accessible manner typical of the 1950s and 1960s.
This will continue in other couple of post....
Regards
NikiJackson
From this to another couple of post is going to be about vector graphics. i planned to post all the content in 2 or 3 post. i hope this will help any of the guy who is interested in graphics. any way we will start to day
in the beginning i am going to talk about History of graphics in a brief way which will really help full in knowing the past of graphics.
History of Graphics
We can categories the history of graphics in two as early and Modern. Early will tell you about the birth of graphics and the Modern will tell you about the evolution of graphics.
Early
Graphic Design spans the history of humankind from the caves of Lascaux to the dazzling neons of Ginza. In both this lengthy history and in the relatively recent explosion of visual communication in the 20th and 21st centuries, there is sometimes a blurring distinction and over-lapping of advertising art, graphic design and fine art. After all, they share many of the same elements, theories, principles, practices and languages, and sometimes the same benefactor or client. In advertising art the ultimate objective is the sale of goods and services. In graphic design, "the essence is to give order to information, form to ideas, expression and feeling to artifacts that document human experience.
The paintings in the caves of Lascaux around 14,000 BC and the birth of written language in the third or fourth millennium BC are both significant milestones in the history of graphic design and other fields which hold roots to graphic design.
The “Book of Kells” is an early example of graphic design. It is a lavishly decorated hand-written copy of the Gospels of the “Christian Bible” created by Celtic monks around 800AD.
From 1892 to 1896 William Morris' Kelmscott Press published books that are some of the most significant of the graphic design products of the Arts and Crafts movement, and made a very lucrative business of creating books of great stylistic refinement and selling them to the wealthy for a premium. Morris proved that a market existed for works of graphic design in their own right and helped pioneer the separation of design from production and from fine art. The work of the Kelmscott Press is characterized by its obsession with historical styles. This historicism was, however, important as it amounted to the first significant reaction to the stale state of nineteenth-century graphic design. Morris' work, along with the rest of the Private Press movement, directly influenced Art Nouveau and is indirectly responsible for developments in early twentieth century graphic design in general.
Modern
The signage in the London Underground is a classic of the modern era and used a font designed by Edward Johnston in 1916.
In the 1920s, Soviet Constructivism (art) applied 'intellectual production' in different spheres of production. The movement saw individualistic art as useless in revolutionary Russia and thus moved towards creating objects for utilitarian purposes. They designed buildings, theater sets, posters, fabrics, clothing, furniture, logos, menus, etc.
Jan Tschichold codified the principles of modern typography in his 1928 book, New Typography. He later repudiated the philosophy he espoused in this book as being fascistic, but it remained very influential. Tschichold, Bauhaus typographers such as Herbert Bayer and Laszlo Moholy-Nagy, and El Lissitzky are the fathers of graphic design as we know it today. They pioneered production techniques and stylistic devices used throughout the twentieth century. The following years saw graphic design in the modern style gain widespread acceptance and application. A booming post-World War II American economy established a greater need for graphic design, mainly advertising and packaging. The emigration of the German Bauhaus school of design to Chicago in 1937 brought a "mass-produced" minimalism to America; sparking a wild fire of "modern" architecture and design. Notable names in mid-century modern design include Adrian Frutiger, designer of the typefaces Univers and Frutiger; Paul Rand, who, from the late 1930s until his death in 1996, took the principles of the Bauhaus and applied them to popular advertising and logo design, helping to create a uniquely American approach to European minimalism while becoming one of the principal pioneers of the subset of graphic design known as corporate identity; and Josef Müller-Brockmann, who designed posters in a severe yet accessible manner typical of the 1950s and 1960s.
This will continue in other couple of post....
Regards
NikiJackson
Feb 5, 2008
These 3 Tips Can Change Your Compliance E-Learning Forever
1. Create a Pre-Assessment
Put the certification test at the beginning of your course. Make it a very comprehensive assessment so that you can truly identify their knowledge and skill level. If the user passes the test, he jumps to the end and is certified. If the user doesn’t pass, then you direct him to the course where he can get remedial training and additional assistance.
Keep in mind that even though it’s an assessment doesn’t mean it has to be a standard multiple choice or true/false quiz. You can do an assessment as a series of case studies or scenarios, as well as a traditional quiz.
The Rapid E-Learning Blog - preassess your learners
How you design the assessment and course is up to you. You can use a simple linear approach, or create a dynamic scenario-based process. It really doesn’t matter. The point is that even if you use a simple structure like this, you can make the assessment more than a click-and-read process and, instead, make it as engaging as you want.
2. Empower the User
The first idea is to create the assessment up front and then direct the user based on the assessment result. While it is a simple approach and easy to design, this can be intimidating for some users. Here’s a way to soften it up and empower them at the same time.
Instead of just starting with the assessment, give the user a choice. Tell them that they can go through the course and at any time they like, attempt to take the assessment. Then unlock the course so the user can navigate it and see what’s covered.
Think of it this way. You go to a book store and look through the pages of a good book on elearning. Most likely, you’ll look at the table of contents, and then perhaps go to the index and look for specific areas of interest. If you’re visual, you’ll flip through the pages to see what type of illustrations and examples are in the book. It’s your way of assessing the book’s value and relevance.
The Rapid E-Learning Blog - would you like to take the assessment now?
In a similar sense, when it comes to elearning courses, many people like to skim through the course content to get a sense of what’s in it. Once they see the content and how it’s laid out, they get a sense of what they know and can determine if they need the course or not to help them pass the assessment. This is why it’s important to unlock the course and give the learners room to explore.
Remember, these are courses for people who most likely already know the content and just need to demonstrate it and be certified. It’s kind of like an experienced driver getting a new license. The driver doesn’t need to take a driving class. Instead, she takes a driver’s test. If she passes, she gets a license. If she can’t pass the test, she takes a class and practices until she can.
Using this approach lets the user see what’s required and mentally assess what he does or doesn’t know. He can jump into a few sections to test his knowledge and comfort level and then take the assessment at any time. In addition, odds are that he will self-assess and identify the area where he needs to know more and then review those sections.
3. Break the Content into Sections
Even if you can create courses with pre-tests, I’ve found that some organizations still won’t do it. They’ll still request a formal "course." I’ve had customers tell me that even if people already know the information, it doesn’t hurt them to go through the course anyway. I assume they think the information is going to stick to the learners like a static cling sock right out of the dryer.
In addition, some customers just aren’t comfortable with this type of approach where the user can self-navigate and choose when to take the assessment. They don’t like the fact that people can test out. Instead, they want them exposed to something that resembles a course.
While some customers shy away from a pre-test and still want a formal course, I’ve found that many are flexible enough to embrace the following approach.
Break the course content into distinct sections. At the beginning of each section, give the user a choice to assess or go through the content. At the end of all of the sections, do a final assessment.
You can still capture some time savings because a knowledgeable person can go through each section and test out quickly. However, by breaking it into sections you can be more specific in the assessment process and catch areas where people might not be as fluent.
The Rapid E-Learning Blog - review and assess each section
For example, if you only had one assessment for a course, a person might pass at 80% and be certified. However, what happens if the 20% she didn’t get correct was all from the same area? That could be a potential problem.
The advice in this post probably doesn’t work for courses where you’re trying to teach new skills. However, if you do a lot of certification or annual refresher training, these three approaches should come in handy.
If you do something different or have an approach that you’d like to share with the community, feel free to do so. Post them in the comments section.
Regards
NikiJackson
Put the certification test at the beginning of your course. Make it a very comprehensive assessment so that you can truly identify their knowledge and skill level. If the user passes the test, he jumps to the end and is certified. If the user doesn’t pass, then you direct him to the course where he can get remedial training and additional assistance.
Keep in mind that even though it’s an assessment doesn’t mean it has to be a standard multiple choice or true/false quiz. You can do an assessment as a series of case studies or scenarios, as well as a traditional quiz.
The Rapid E-Learning Blog - preassess your learners
How you design the assessment and course is up to you. You can use a simple linear approach, or create a dynamic scenario-based process. It really doesn’t matter. The point is that even if you use a simple structure like this, you can make the assessment more than a click-and-read process and, instead, make it as engaging as you want.
2. Empower the User
The first idea is to create the assessment up front and then direct the user based on the assessment result. While it is a simple approach and easy to design, this can be intimidating for some users. Here’s a way to soften it up and empower them at the same time.
Instead of just starting with the assessment, give the user a choice. Tell them that they can go through the course and at any time they like, attempt to take the assessment. Then unlock the course so the user can navigate it and see what’s covered.
Think of it this way. You go to a book store and look through the pages of a good book on elearning. Most likely, you’ll look at the table of contents, and then perhaps go to the index and look for specific areas of interest. If you’re visual, you’ll flip through the pages to see what type of illustrations and examples are in the book. It’s your way of assessing the book’s value and relevance.
The Rapid E-Learning Blog - would you like to take the assessment now?
In a similar sense, when it comes to elearning courses, many people like to skim through the course content to get a sense of what’s in it. Once they see the content and how it’s laid out, they get a sense of what they know and can determine if they need the course or not to help them pass the assessment. This is why it’s important to unlock the course and give the learners room to explore.
Remember, these are courses for people who most likely already know the content and just need to demonstrate it and be certified. It’s kind of like an experienced driver getting a new license. The driver doesn’t need to take a driving class. Instead, she takes a driver’s test. If she passes, she gets a license. If she can’t pass the test, she takes a class and practices until she can.
Using this approach lets the user see what’s required and mentally assess what he does or doesn’t know. He can jump into a few sections to test his knowledge and comfort level and then take the assessment at any time. In addition, odds are that he will self-assess and identify the area where he needs to know more and then review those sections.
3. Break the Content into Sections
Even if you can create courses with pre-tests, I’ve found that some organizations still won’t do it. They’ll still request a formal "course." I’ve had customers tell me that even if people already know the information, it doesn’t hurt them to go through the course anyway. I assume they think the information is going to stick to the learners like a static cling sock right out of the dryer.
In addition, some customers just aren’t comfortable with this type of approach where the user can self-navigate and choose when to take the assessment. They don’t like the fact that people can test out. Instead, they want them exposed to something that resembles a course.
While some customers shy away from a pre-test and still want a formal course, I’ve found that many are flexible enough to embrace the following approach.
Break the course content into distinct sections. At the beginning of each section, give the user a choice to assess or go through the content. At the end of all of the sections, do a final assessment.
You can still capture some time savings because a knowledgeable person can go through each section and test out quickly. However, by breaking it into sections you can be more specific in the assessment process and catch areas where people might not be as fluent.
The Rapid E-Learning Blog - review and assess each section
For example, if you only had one assessment for a course, a person might pass at 80% and be certified. However, what happens if the 20% she didn’t get correct was all from the same area? That could be a potential problem.
The advice in this post probably doesn’t work for courses where you’re trying to teach new skills. However, if you do a lot of certification or annual refresher training, these three approaches should come in handy.
If you do something different or have an approach that you’d like to share with the community, feel free to do so. Post them in the comments section.
Regards
NikiJackson
Subscribe to:
Comments (Atom)
