With your beautiful profile designs in hand - let's take a look at preparing and saving your images for the web.
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
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.
↓ download source files
(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
Revision3 - Pixel Perfect with Bert Monroy
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 time to get coding and implementing your design :)
Feel free to focus entirely on the layout and content structure. Next week's lesson will be part of the 'webpage design' course where we will cover images and colour, continuing on from David's sessions with coding. So you can then put focus on adding your visuals as well as colour.
✔ to do list
- mark up your content in a meaningful and semantic manner
- write your CSS with a focus on layout and structure
- upload your page for viewing online
Please feel free to comment below if you have any questions :)