bitmap images for the web
With your beautiful profile designs in hand – let’s take a look at preparing and saving your images for the web. Whether you create all of your own visuals, or work with source files, you’ll need to consider the final implementation of these visuals within your design. Without preparation and optimisation, these additions will make your page very heavy and slow loading.
This page was created for the tutorial “Get to grips with CSS3 multiple background images”, written for the Net magazine’s website (now part of creative bloq).
→ read tutorial
alternatives for bitmap editing
GNU Image Manipulation Program // open source // PC/MAC/LINUX
The Image Editor for Humans by Flying Meat // MAC
image and photo manipulation application // free (but no longer open source) // PC
image editing app // MAC
a new alternative :)
photo editing software by Serif // MAC
Upload a 24-bit PNG with alpha transparency and get back an 8-bit PNG also with alpha transparency.
ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.
JPEGmini is a patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality.
Practice makes perfect :)
Let’s get creative with repeating textures and patterns.
Experiment with creating your own patterns in any graphics app of your choosing. Implement your finals for testing and preview in the provided sample page.
(includes vector source file for pattern creation, HTML/CSS files for testing)
useful tutorials & resources
- Creating Seamless Textures
- Create Seamless Web Background Textures in Minutes
- subtle patterns (tilable textured patterns, free to use)
- The Comprehensive Guide to Saving Images for the Web
- 9 Photoshop Editing Tips Web Developers Should Know
- Web Designer’s Guide to PNG Image Format
- the glory of patterns, resources and links on webeyedea
These tutorials cover working techniques for various purposes, very useful techniques and tips for retouching and image editing – however, they are not specifically for the web.
profile page design
mini project – part #2
With your design in hand, it’s almost time to get coding and implementing your design :) Revise your ideas following feedback and work on creating the webpage.
Feel free to focus primarily on the layout, content structure and design. This might be an opportunity to experiment with patterns and textures? :)
Next week we will look at typography ~ and you can refine your inital typesetting.
✔ to do list
- mark up your content in a meaningful and semantic manner
- add your CSS to begin implementing your design
- upload your page for viewing online
Please feel free to comment below if you have any questions :)
Comments are closed.