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.
While you are working on your profile project consider how you are managing your files. Stay organised and consider all aspects such as folders and file naming. This presentation is intended to summarise various aspects of a typical workflow, covering a lot of details. It is intended as reference for you – whether you are entirely new to design and graphics, or whether you are already happily working on creating visuals. We’re using Photoshop as example of a common bitmap editor only, this is by no means a recommendation.
Practice makes perfect :)
Take a closer look at image cut outs, one of the most common tasks when working with visual design elements.
Use selections and layermasks to to isolate the phone, to be saved with transparent background.
↓ download image (.jpg / 19kb)
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
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.
profile page design
mini project – part #4
Time to get any visuals ready for your design :)
✔ to-do list
- work on optimising any visuals included in your design
- finalise your design
- produce the final single webpage and submit your complete folder via Slack by the 8th November
And do share your experiments and get feedback – team work rocks! \m/
As you will know by now – patterns are an effective design techniques and are very efficient when it comes to file size. Here are a few things to help you along with practising your graphic skills.
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 (tileable 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
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.
Comments are closed.