beautiful textures: patterns, tiles & formats creating seamless - - PowerPoint PPT Presentation

beautiful textures: patterns, tiles & formats

creating seamless patterns on the example of a custom 404 page, with a look at suitable file formats for online use Prisca Schmarsow :: eyelearn.org

Steps covered

1. file organisation

• 2. sketching & planning
• 3. creating seamlessly tiling textures
• 4. adding repeating illustrations
• 5. saving for web

• 1. file organisation

texture-library patterns

.gif / .jpg / .png

• layered files with original work on textures

and patterns

• optimised files in various sizes

(for testing purposes)

• libraries files for brushes & patterns

(for future use)

asset creation ~ working files

• visuals sized & optimised for use online
• visuals saved in appropriate file format,

considering transparencies and file sizes

• distinguish seamless patterns for tiling by

using subfolder or specific file name

• rganising online assets

preparation folder site assets folder

• 2. sketching & planning

Via the zoom (here at 400%) - you can clearly see the difference between the 2 formats: The vector image remains unchanged while the bitmap image, due to its dependence on resolution, now clearly shows its pixellation.

quick recap on vector vs bitmap VECTOR

• lines and curves which are

defined by mathematical

• bjects
• resolution-independent &

full scalability while maintaining high quality

BITMAP

• pictorial information via a

grid of pixels

• resolution-dependent & will

deteriorate in quality through editing/scaling

Choose the appropriate tool for the job ~ or combine :)

• 2. sketching & planning
• always start by planning with an open mind,

without considering the technical constraints

• sketch out ideas and focus on the design and

message, in keeping with the brief

• don’t limit your creativity

browser window

http://

STEP 1 ~ think / plan / sketch / draw

• consider how your final design will be displayed in

the browser

• plan for optimum presentation, code

implementation and light file size

• compromise your design idea if need be while

maintaining core aspects

STEP 2 ~ consider the final output

clouds balloon hills corners

+ background texture + paper texture

clouds balloon hills corners

+ background texture + paper texture

clouds balloon hills corners

+ background texture + paper texture

• 3. creating seamless tiling textures
• use an existing image to start from or create your
• wn textures from scratch
• work with multiple layers to build up a rich and

varied image

• carefully consider colours used in gradients, subtle

shades often work best

!WARNING! gradients as backdrop to text can be

tricky to implement!

the window background

Considerations: ~ flat pattern / shaded texture? ~ overall colour scheme? (remember to plan for sufficient contrast for text elements) ~ dimensions & file size of final graphics ~ repeating the texture: horizontally / vertically / both?

for rich, shaded textures ~ use Photoshop:

• 3. creating seamless tiling textures

Allow some time to play and experiment ~ some tips for creating textures:

• experiment with layer modes, opacities and blurs
• using the same layer twice with different layer

modes can add depth and intensity

• play with some artistic and sketch filters ~ always

use your own settings for a more original result

• be mindful when combining different texture

styles ~ always keep the final image in mind and avoid clashes in colour, style and density

• zoom in closely while editing ~ and always view

the result at 100% to preview how it will appear within your final design

• use adjustment layers for fine-tuning
• bear in mind the visual focus of the page ~

desaturation of background visuals, textures and elements can help emphasize the important parts

• f the content

• 3. creating seamless tiling textures

smaller file sizes through repeating images ~ thanks to CSS :)

• once you are happy with your texture - crop to a

suitable size & ensure that it will tile seamlessly if repeated in the browser window

• check via the offset filter how the tiling would look:

top menu > Filter > Other > Offset

• carefully edit your image to blend the repeated visuals

without lines or visible edges, repeat the offset filter to check your final result

not all images are suitable for tiling ~ some will require a lot of editing.

• riginal

horizontal + vertical offset horizontal offset

• 3. creating seamless tiling textures

clone stamp tool Spot Healing Brush Tool Healing Brush Tool Patch Tool possible working methods: using tools to blend image edges using copies of images layer in combination with feathered layer masks

• 3. creating seamless tiling textures

browser window

http://

horizontal tiling via CSS — repeat-x

body { background: #66f url(imgs/grad.jpg) top left repeat-x; }

common uses:

• gradient backgrounds
• textures with top/bottom features
• interface element enhancements

• 3. creating seamless tiling textures

vertical tiling via CSS — repeat-y

browser window

http://

body { background: transparent url(imgs/shadow.png) top center repeat-y; }

common uses:

• flexible shadows on content containers
• vertical borders / dividers / ornaments
• interface element enhancements

• 3. creating seamless tiling textures

full tiling via CSS — repeat

browser window

http://

body { background: #3a4583 url(imgs/tartan.gif) top left repeat; }

common uses:

• pattern backgrounds
• uniform textures
• interface element enhancements

• 4. adding repeating illustrations

the header/footer visuals

centre cloud, not repeating

• tight crop to keep image dimensions as

small as possible

• saved as PNG24 for full transparency,

due to textured background

CSS: background: transparent url(imgs/cloud.png) top center no-repeat;

scattered clouds, repeating horizontally

CSS: background: transparent url(imgs/clouds.png) top 30% repeat-x;

• tight crop to keep image dimensions as

small as possible, additional space added

• saved as PNG24 for full transparency,

due to textured background

• 4. adding repeating illustrations

the header/footer visuals

mountains, repeating horizontally

to avoid gaps - ensure edges line up perfectly

• tight crop with aligned left and right site image edges
• saved as PNG24 for full transparency, due to textured background

CSS: background: transparent url(imgs/peaks.png) bottom center repeat-x;

• 5. saving for web
• always keep an eye on your overall file size!

especially for image intensive designs ~ it all adds up.

• always choose the appropriate format ~

bearing in mind browser compatibilities (e.g. IE6 cannot handle PNG24 without fixes)

• if possible ~ use CSS to repeat a small image to fill

the relevant area & ensure that the tiling is seamless

• when saving large visuals ~ optimise as much as

possible before saving for the web

• combine visual elements into one image file

where possible

image file formats

.gif .jpg .png

.gif

= Graphics Interchange Format

• limit of 256 colours
• lossless compression
• transparency with matte colour
• animation

Matte colour needs to be set to match the background of the content element it is displayed in ~ an ugly pixellated halo will

• therwise be visible and ruin all your hard

work...

use for:

• flat colours within limited range
• animation

TIPS:

• limit colours if possible to reduce

final file size

• experiment with the value for

‘lossy’

• zoom in to see when the image

starts disintegrating ~ check aain for 100% view

• 5. saving for web

.jpg

= Joint Photographic Experts Group

• no colour limit
• lossy compression
• no transparency

When pushed into lower quality settings - you will notice that boundaries between the colour blocks become blurred, lines and boxes will appear.

use for:

• photographic images
• visuals with shading and

blended tonal transitions

TIPS:

• try different quality settings to

push file size down

• experiment with adding blur
• zoom in to see when the image

starts disintegrating ~ check aain for 100% view

• 5. saving for web

.png

= Portable Network Graphics

• 2 formats:
• PNG8 ~ similar to GIF

(+ safe to use in IE6)

• PNG24 ~ similar to JPG

( ! display errors in IE6 ! )

• lossless compression
• transparency

use for:

• all images
• transitional transparencies

TIPS:

• try PNG8 instead of GIF to

compare file sizes

• for PNG24 - limit colour before

saving for web

• zoom in to see when the image

starts disintegrating ~ check aain for 100% view

use PNG compression tools to further optimise your PNGs

8bitalpha.com (online tool) imageoptim.pornel.net (mac only)

• 5. saving for web

... and all that’s left to do is to put it all together ;)

browser window

http://