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

• 1. file organisation

texture-library patterns

.gif / .jpg / .png / .svg

• 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;

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

browser window

http://