Embed Size (px)
Citation preview
Texture
Beautiful Web Design
Chapter 3
Lesson Overview Web design can be taken a step further by
incorporating texture into your Web design Adding textural elements can help you shift
from a flat 2D design to a simulated 3D design Texture can be added to your design by
manipulating shape, line, volume and depth, light and shadow, and pattern
There are many textural trends on the Web. You can adapt an existing trend or invent your own
Points
The basic structural element to building a graphical element is a point
If you are creating a vector graphic, a single point can be scaled up to any size
In a raster graphic, the point is the size of a pixel and is dependent on the resolution of your monitor for its size
Detail from Seurat's La Parade de Cirque (1889)
Line Two or more points can be
connected to create a line The line is a basic graphical element that can
be used to suggest movement, add texture and interest to a design Repeating horizontal lines can create a pattern
and encourage the eye to move from top to bottom
Repeating diagonal lines cause the eye to change direction and can cause a feeling of unease
Use of Lines in Web Design
Lines can be used as dividers, borders and stripes
They are also the foundation for art, drawings and design
Most graphics programs contain different tools for creating many types of lines
http://www.csszengarden.com/?cssfile=092/092.css
Shape Geometric shapes that
are mathematical in nature that contain precise angles, curves and straight lines: circles, rectangles, ellipses, diamonds,
semicircles, arrows, etc. Freeform shapes are more abstract in that
consist of non-geometric curves and random angles and irregular lines Freeform shapes convey informality and creativity
Shapes and Web Design
When we think of Web design we usually try to break the design into box-like shapes to hold our content
While containing blocks of our design may be rectangular in shape, the graphical elements they contain may appear to be freeform
One of the most common ways to hide the rectangular nature of an HTML element is to give it a background image
Rounded Corners – Getting Out of the Box
There are many techniques that can be used to make corners of HTML elements appear rounded
These techniques soften the layout and create a more organic and natural look
Rounded corners is so popular that the next version of CSS will contain methods for achieving rounded corners
Creating Rounded CornerBackground Images
Create a rounded rectangle with a transparent background.
If you want you can add a subtle gradient from left to right.
Slice the image into three pieces: Top border and rounded corners Middle piece will be repeated in Y
direction Bottom border and rounded corners
Rounded Corners Background Images
Use transparent background Top background downturned
rounded corners Middle background with left
and right border will be repeated in the Y direction
Bottom background has upturned rounded corners
All images must have the same fixed width
Save each image as a GIF
Simple Rounded Corners CSS
<style type="text/css">
#box{width:310px; color: aqua;margin:0; padding:0
}
#box .top{ background-image:
url('top.gif'); background-repeat: no-
repeat; margin:0; padding:0; height:36px; float:left;
}
#box .middle{ background-
image:url('middle.gif');background-repeat: repeat-y;margin:0; padding:0;float:left;
}
#box .bottom{margin:0;padding:0;background-
image:url('bottom.gif');background-repeat:no-repeat;height:36px; float:left;
}</style>
….
<body><div id="box" > <div class="top"> </div> <div class="middle"> <h3>Middle heading</h3> <p>Middle paragraph stuff.</p> </div> <div class="bottom"> </div></div></body>
Volume and Depth
Visual clues can be used in graphics to help up represent width, height and depth of objects in our compositions
Perspective – Objects tend to look smaller as they get far away Example- Width of railroad tracks
decreasing to a single point on the horizon Proportion – Altering the proportion of objects
in the composition can create emphasis
Light and Shadow Light and shadow are two
visual clues that help to achieve depth and volume
2D objects can be given a drop-shadow to make it appear the object is above it
A light gradient can be added to the object to suggest light hitting it
Together these two clues signal a 3D object with volume and depth
Pattern Using a small image that can be tiled to
fill a background area can greatly reduce image download time
More importantly, patterned images can be layered in many ways to provide more depth and interest to many graphical elements in a site
Patterns can be repeated to form lines, border edges or backgrounds
Patterns for Texture
http://gimp.pixtuts.com/gimp-tutorials/text-effects/grunge-texture-text
Building Texture Using point, line, shape, depth and
volume and pattern together can help you to build a texture for a site
The texture does not change the underlying functionality of the site
It just provides a skin or mask that makes it appear differently
Next some popular texture options will be examined
Aged, Weathered, Nostalgic
Use textured backgrounds
Rounded or jagged edges give tattered feel
Try to add dimensions with drop shadows and overlapping images
Watermarks and tears or cracks also add aged look
Grunge
Grunge is a variation of the aged, worn Web site The grunge look is a dirty look with irregular, nasty,
sometimes even ugly and crooked visual elements Grunge makes use of underlying urban textures Color palettes are usually very dark, sometimes
with a pop of color
Whimsical Cartoon Style Cartoons are used to
draw attention Not just for children,
makes adults feel young again
Volume and depth are added to cartoons to give 3D look
Reduced color palette Rounded corners give
less rigid feel
High Gloss, Big Type, Web 2.0 Style
The Web 2.0 style makes use of glossy buttons, background gradients, colorful reflections, 3D-effects, and lots of white space
Enormous fonts can be found not only in headers, but also in navigation menus and brief texts
All page elements become more round – navigation menus, buttons, input fields, tables and text columns
Lesson Summary Adding textured elements
to your Web site can make it seem more real Make use of lines, shape, volume, depth, and
patterns to add texture Bringing together textured elements can
give entire Web site a custom skin or visual personality
Some commonly used texture themes include: aged/worn, grunge, cartoon style, and Web 2.0
