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 asset creation ~ working f iles preparation folder • 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) texture-library organising online assets site assets folder • visuals sized & optimised for use online • visuals saved in appropriate file format, considering transparencies and file sizes • distinguish seamless patterns for tiling .gif / .jpg / .png / .svg by using subfolder or specific file name patterns
2. sketching & planning quick recap on vector vs bitmap 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. VECTOR BITMAP • lines and curves which are • pictorial information via a defined by mathematical grid of pixels objects • resolution-dependent & will • resolution-independent & deteriorate in quality full scalability while through editing/scaling Choose the appropriate tool maintaining high quality for the job ~ or combine :)
2. sketching & planning STEP 1 ~ think / plan / sketch / draw • 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 STEP 2 ~ consider the f inal output browser window http:// • 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
clouds balloon corners + paper texture + background texture hills
clouds balloon corners + paper texture + background texture hills
balloon clouds + paper texture corners + background texture hills
3. creating seamless tiling textures the window background Considerations: ~ flat pattern / shaded texture? ~ overall colour scheme? (remember to plan for su ffi cient contrast for text elements) ~ dimensions & file size of final graphics ~ repeating the texture: horizontally / vertically / both? for rich, shaded textures ~ use Photoshop: • 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 f ten work best !WARNING! gradients as backdrop to text can be tricky to implement!
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 di ff erent 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 di ff erent 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
3. creating seamless tiling textures smaller f 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 o ff set filter how the tiling would look: top menu > Filter > Other > O ff set • carefully edit your image to blend the repeated visuals without lines or visible edges, repeat the o ff set filter to check your final result not all images are suitable for tiling ~ some will require a lot of editing. original horizontal + vertical o f fset horizontal o f fset
3. creating seamless tiling textures possible working methods: using tools to blend image edges clone stamp tool Spot Healing Brush Tool Healing Brush Tool Patch Tool using copies of images layer in combination with feathered layer masks
3. creating seamless tiling textures horizontal tiling via CSS — repeat-x body { background: #66f url(imgs/grad.jpg) top left repeat-x; } common uses: browser window http:// • gradient backgrounds • textures with top/bottom features • interface element enhancements
3. creating seamless tiling textures vertical tiling via CSS — repeat-y body { background: transparent url(imgs/shadow.png) top center repeat-y; } common uses: browser window http:// • flexible shadows on content containers • vertical borders / dividers / ornaments • interface element enhancements
3. creating seamless tiling textures full tiling via CSS — repeat body { background: #3a4583 url(imgs/tartan.gif) top left repeat; } common uses: browser window http:// • 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 • tight crop to keep image dimensions as small as possible, additional space added • saved as PNG24 for full transparency, due to textured background CSS: background: transparent url(imgs/clouds.png) top 30% repeat-x;
4. adding repeating illustrations the header/footer visuals mountains, repeating horizontally • tight crop with aligned le f t and right site image edges to avoid gaps - ensure edges line up perfectly • 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 le f t to do is to put it all together ;) browser window http://
Recommend
More recommend
