course notes 2017/18

images for the web

Nov 1st 2017

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.

workflow notes

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.

TASK
Use selections and layermasks to to isolate the phone, to be saved with transparent background.
↓ download image (.jpg / 19kb)

design planning

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

→ view final design

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

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.

 

 

profile page design

mini project – part #4

Time to get any visuals ready for your design :)

to-do list

  1. work on optimising any visuals included in your design
  2. finalise your design
  3. 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/

patterns

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.


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.

Comments are closed.