Section 1 Section2 Section 3 Section 4 Section 5 Section 6
Text Graphics and placements
Text graphics involve the design and arrangement of text as a
visual element, while text placement refers to its positioning on a page or
screen.
Key aspects include alignment (left,
center, right, or justified) and wrapping (how text interacts with
other graphics).
Effective text placement uses proximity (nearness in space)
to group related information, creates visual hierarchy with size and spacing,
and uses techniques like stacking for emphasis.
Text graphics
Definition: Text
graphics combine typography (art and technique of arranging text) rules
with motion and live graphic elements to create visual impact.
Applications: They are
used for film credits, lower-third graphics in videos, and visual overlays.
Techniques: Examples
include using abstract (modification of representational forms) or geometric
backgrounds, banners, and graphic templates to enhance text.
Text
placement
Alignment: Determines
how text is arranged horizontally within a text box.
Left-aligned: Default for
many languages, creating a strong left edge.
Center-aligned: Used for headings
or titles, creating a balanced look.
Right-aligned: Can be used
for specific design elements or in languages that read right-to-left.
Justified: Stretches
each line to have equal width, resulting in straight left and right margins,
common in newspapers and magazines.
Wrapping: Controls how
text flows around an image.
Square: Text forms a
square around the image.
Tight: Text wraps
closely to the image's outline.
Through: Text flows
through the image's shape.
In
front/Behind: The image is layered in front of or behind the text.
Proximity: Grouping
related text elements together strengthens their connection and improves
readability.
Hierarchy: Arranging
text elements by size, weight, and space creates a visual hierarchy, guiding
the reader's eye.
Stacking: Placing
words on top of each other, with subtext below, to create a cinematic
effect.
Placement
with graphics
Positioning: Elements are
positioned using properties like top, bottom, left, and right.
Interaction: Wrapping
text around an image changes the layout as the image is moved.
Anchoring: In
applications like Microsoft Word, you can "lock anchor" to fix the
position of a graphic relative to the text it is anchored to
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center; }
h2 {
text-align: left; }
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and
right.</p>
</body>
</html>
What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines graphics in XML format
Each element and attribute in SVG files can be animated
SVG is a W3C recommendation
SVG integrates with other standards, such as CSS, DOM, XSL and
JavaScript
SVG defines vector-based graphics in XML format.
SVG graphics are scalable, and do not lose any quality if they are
zoomed or resized.
SVG is supported by all major browsers.
How does it
Work?
SVG has elements and attributes for rectangles, circles, ellipses,
lines, polygons, curves, and more.
SVG also supports filter and blur effects, gradients, rotations,
animations, interactivity with JavaScript, and more.
A simple SVG document consists of the <svg> root element and
several basic shape elements that will build a graphic together.
SVG Rectangle - <rect>
The <rect> element is used to create a rectangle
and variations of a rectangle shape.
The <rect> element has six basic attributes to
position and shape the rectangle:
|
Attribute |
Description |
|
width |
Required. The width of the rectangle |
|
height |
Required. The height of the rectangle |
|
x |
The x-position for the top-left corner of the rectangle |
|
y |
The y-position for the top-left corner of the rectangle |
|
rx |
The x radius of the corners of the rectangle (used to round the
corners). Default is 0 |
|
ry |
The y radius of the corners of the rectangle (used to round the
corners). Default is 0 |
An SVG
Rectangle
This example
creates a rectangle with the six basic attributes and a fill color:
<!DOCTYPE html>
<html>
<body>
<h2>SVG rect Element</h2>
<svg width="300" height="130"
xmlns="http://www.w3.org/2000/svg">
<rect
width="200" height="100" x="10" y="10"
rx="20" ry="20" fill="blue" />
Sorry, your browser does
not support inline SVG.
</svg>
</body>
</html>
Code
explanation:
The width and height attributes of
the <rect> element define the height and the width of the
rectangle
The x and y attributes define the x- and
y-position of the top-left corner of the rectangle (x="10" places the
rectangle 10px from the left margin and y="10" places the rectangle
10px from the top margin) in the SVG canvas
The rx and ry attributes defines the radius of
the corners of the rectangle
The fill attribute defines the fill color of the
rectangle
SVG
<feDropShadow>
The <feDropShadow> filter
is used to create a drop shadow effect on the input graphic:
<!DOCTYPE html>
<html>
<body>
<h2>SVG feDropShadow Filter</h2>
<svg height="110" width="110"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter
id="f1">
<feDropShadow dx="12"
dy="14" stdDeviation="1" flood-opacity="0.7"/>
</filter>
</defs>
<rect
width="90" height="90" fill="yellow"
filter="url(#f1)" />
Sorry, your browser does
not support inline SVG.
</svg>
</body>
</html>
Code
explanation:
The id attribute of the <filter> element
defines a unique name for the filter
The drop shadow effect is defined with
the <feDropShadow> element
The dx attribute defines the x offset of the drop shadow
The dy attribute defines the y offset of the drop shadow
The stdDeviation attribute defines the amount of the
blur in the drop shadow
The flood-opacity attribute defines the opacity of the
drop shadow (from 0 to 1)
The filter attribute of
the <rect> element points the element to the "f1"
filter
No comments:
Post a Comment