course notes 2016/17

images for the web

Oct 26th 2016

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.

 

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 #4

Time to get any visuals ready for your design :)

to-do list

  1. work on any visuals included in your design
  2. experiment with patterns for background
  3. produce the final single webpage and submit your complete folder via Slack by the 9th November

And do share your experiments and get feedback – team work rocks! :)

Comments are closed.