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

follow up tutorial (.net magazine): Get to grips with CSS3 multiple background images
[http://www.creativebloq.com/css3/get-grips-css3-multiple-background-images-9134280]

Transcript

1. 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
2. Steps covered 1. file organisation 2. sketching & planning 3. creating seamlessly tiling textures 4. adding repeating illustrations 5. saving for web
4. 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 !iles • 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 organising online assets preparation folder site assets folder
5. 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 objects • 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 :)
7. 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 !inal output
8. clouds balloon hills corners + background texture + paper texture
9. clouds balloon hills corners + background texture + paper texture
10. clouds balloon hills corners + background texture + paper texture
11. 3. creating seamless tiling textures • use an existing image to start from or create your own textures from scratch • work with multiple layers to build up a rich and varied image • carefully consider colours used in gradients, subtle shades o!ten 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:
12. 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 of the content
13. 3. creating seamless tiling textures smaller !ile 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. original horizontal + vertical o!fset horizontal o!fset
14. 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
15. 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
16. 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
17. 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
18. 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
19. 4. adding repeating illustrations the header/footer visuals mountains, repeating horizontally to avoid gaps - ensure edges line up perfectly • tight crop with aligned le!t 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;
20. 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 !ile formats .gif .jpg .png
21. .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 otherwise 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
22. .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
23. .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
24. ... and all that’s le!t to do is to put it all together ;) browser window http://