course notes 2015/16

bitmap images for the web

Oct 21st 2015

illustration from design example

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.


→ view final design

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

gimp
GIMP
GNU Image Manipulation Program // open source // PC/MAC/LINUX

acorn
Acorn
The Image Editor for Humans by Flying Meat // MAC

paint net
paint.net
image and photo manipulation application // free (but no longer open source) // PC

pixelmator
Pixelmator
image editing app // MAC

a new alternative :)

ap
Affinity Photo
photo editing software by Serif // MAC

image optimisation

8bitalpha
8bitalpha (online)
Upload a 24-bit PNG with alpha transparency and get back an 8-bit PNG also with alpha transparency.

imgoptim
imageOptim (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
JPGmini (MAC/PC/online)
JPEGmini is a patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality.

 

Practice makes perfect :)
patterns

Let’s get creative with repeating textures and patterns.


TASK
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

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

  1. mark up your content in a meaningful and semantic manner
  2. add your CSS to begin implementing your design
  3. upload your page for viewing online

Please feel free to comment below if you have any questions :)

Comments are closed.