UNNES Guest Lecture

Topic 2:Image

Human Computer Interaction

Guest Lecturer:
Dr. Elin Eliana Abdul Rahim
Assistant Professor,
Kulliyyah of Information and Communication Technology (KICT),
International Islamic University (IIUM), Malaysia
 Topics

Legitimate Image Getting How Not to

What to Look For
Sources Professional Help Impress

Photoshop File Formats and Creative Image

Creative Cropping
Adjustments Resolutions Treatments

Copyright © 2014 SitePoint Pty. Ltd

 Topics

Legitimate Image Getting How Not to

What to Look For
Sources Professional Help Impress

Photoshop File Formats and Creative Image

Creative Cropping
Adjustments Resolutions Treatments

Copyright © 2014 SitePoint Pty. Ltd

 What to Look For
Is it relevant? Is it interesting?
Relevant images can add interest to your Although it’s important to
design and enhance the content of a web maintain a connection
page. They provide visual bookmarks that help between the visual elements
visitors remember what was covered on the of a design and
page, and where to look when they return. its content, you should avoid
always making it priority
number one.

Is it appealing?
Images that are aesthetically
or emotionally appealing can
be a very efficient hook for
attention and emphasis. The
issue is that beauty and
attractiveness are different
for everyone.

Copyright © 2014 SitePoint Pty. Ltd

 Topics

Legitimate Image Getting How Not to

What to Look For
Sources Professional Help Impress

Photoshop File Formats and Creative Image

Creative Cropping
Adjustments Resolutions Treatments

Copyright © 2014 SitePoint Pty. Ltd

 Legitimate Image Sources:
Take it or Make it

Source: https://unsplash.com/s/photos/camera

Copyright © 2014 SitePoint Pty. Ltd

 Legitimate Image Sources:
Stock Photography
Free Images
• Free Images has over 400,000 high-quality,
user-submitted images. To ensure the
quality and relevance of the gallery’s
database, site moderators check each
submission before it becomes available.
• When you’re downloading images from
Free Images, be sure to check the
restriction status of the image. Most
images in the database are restriction-
free, which means that you can use them
for most personal or commercial uses.

https://www.ggunn.com/blog/how-to-not-suck-at-color
 Legitimate Image Sources:
Stock Photography
Royalty Free Images
• A royalty-free image license is one that
allows you to pay a single, up-front fee for
an image. The payment buys you the right
to use that image for other clients and
projects without paying further licensing
fees, known as royalties.
• Because the company in charge of the
rights knows who’s using the images and
for how long, it’s extremely unlikely that
your client’s competitor will have the
exact same image on its home page
that you’ve used for your client.
https://www.istockphoto.com/photos/coffee

https://www.ggunn.com/blog/how-to-not-suck-at-color
 Legitimate Image Sources:
Stock Photography
Rights-managed Images
This type of stock photography can
be quite a bit pricier than the
others, as you pay a fee based on
the size of your business, the
number of people who will be
exposed to the image, and the
amount of time for which the
image will be in use.

https://www.ggunn.com/blog/how-to-not-suck-at-color
 Topics

Legitimate Image Getting How Not to

What to Look For
Sources Professional Help Impress

Photoshop File Formats and Creative Image

Creative Cropping
Adjustments Resolutions Treatments

Copyright © 2014 SitePoint Pty. Ltd

 Getting Professional Help
• Hire a professional photographer
• The best way to find a good commercial photographer is by word of mouth.
 Topics

Legitimate Image Getting How Not to

What to Look For
Sources Professional Help Impress

Photoshop File Formats and Creative Image

Creative Cropping
Adjustments Resolutions Treatments

Copyright © 2014 SitePoint Pty. Ltd

 How Not to Impress
• Google Ganking – run a Google image search, edit (or not) and use the images.
Unless the images on a website are specifically marked as being free to use or
available in the public domain, you can assume that they’re copyrighted by the
site’s owner, so you’ll need permission to use them.

Copyright © 2014 SitePoint Pty. Ltd

 How Not to Impress
• Hotlinking –
• Usually, images for a website are placed on the same web server as the site, and are linked to
in the way shown here:

• However, images can also be linked to from outside the website, using the full URL of the
image:

Copyright issues aside,

hotlinking uses the bandwidth
of the website on which the
images are located.

Copyright © 2014 SitePoint Pty. Ltd

 How Not to Impress
• Clipart
• There are many websites that offer free, or very cheap, clipart and illustration packages.
While these cheesy generic graphics may work for an internal company bulletin or do-it-
yourself greeting card, they should be considered off-limits for any professional project.

Copyright © 2014 SitePoint Pty. Ltd

 Topics

Legitimate Image Getting How Not to

What to Look For
Sources Professional Help Impress

Photoshop File Formats and Creative Image

Creative Cropping
Adjustments Resolutions Treatments

Copyright © 2014 SitePoint Pty. Ltd

 Creative Cropping
One of the most profound impacts you can make on the presentation of an image
comes from wisely choosing what should be included, and what should not. This
process is known as cropping and is a fundamental image manipulation technique.

Copyright © 2014 SitePoint Pty. Ltd

 Topics

Legitimate Image Getting How Not to

What to Look For
Sources Professional Help Impress

Photoshop File Formats and Creative Image

Creative Cropping
Adjustments Resolutions Treatments

Copyright © 2014 SitePoint Pty. Ltd

 Photoshop Adjustments
• Adobe Photoshop – software to edit images

Copyright © 2014 SitePoint Pty. Ltd

Photoshop Adjustments

Copyright © 2014 SitePoint Pty. Ltd

 Topics

Legitimate Image Getting How Not to

What to Look For
Sources Professional Help Impress

Photoshop File Formats and Creative Image

Creative Cropping
Adjustments Resolutions Treatments

Copyright © 2014 SitePoint Pty. Ltd

 File Formats and Resolutions
• Three image formats are widely supported by web browsers: JPEG,
GIF, and PNG. Choosing the format that’s right for your image is a
matter of determining which will provide the smallest file size for the
highest quality image.

Copyright © 2014 SitePoint Pty. Ltd

 JPEG
• JPEG (.jpg) is an image compression format that was developed by the Joint Photographic Experts
• Group specifically to store photographic images. Unlike GIF and PNG images, JPEGs can provide
fairly small file sizes at 24-bit color.
• When saving a .jpg file, you’ll have to carefully consider the amount of compression you apply. As
you can see in Figure 5.29, a highly compressed image might be great for page load speed, but if
you go as far as I did with the rightmost strawberry, it’s very unappetizing.

Copyright © 2014 SitePoint Pty. Ltd

 GIF
• GIF (Graphics Interchange Format) is an 8-bit format that compresses files on the basis of the
number of colors in the image. Although the compression ratio of the GIF format is good, it
supports a maximum of only 256 colors, and is therefore useless for photographic pages.
• GIF - displays transparency and supports animation.
• Although the GIF format is still widely used on the Web, using PNG instead is strongly
encouraged.

giphy.com

Copyright © 2014 SitePoint Pty. Ltd

 PNG
• The PNG (Portable Networks Graphics)
format was developed by the W3C as an
alternative to
GIF.
• PNG images can be saved in either 8-bit or
24-bit format. Both of these flavors of PNG
support transparency, but transparency in
24-bit PNG images is implemented by means
of an alpha channel that sits alongside the
red, green, and blue channels; this means
that each pixel in a PNG image can have up
to 256 different levels of opacity.
Source: https://tech4pub.com/2014/12/10/infographic-jpeg-gif-or-
png/

Copyright © 2014 SitePoint Pty. Ltd

 Topics

Legitimate Image Getting How Not to

What to Look For
Sources Professional Help Impress

Photoshop File Formats and Creative Image

Creative Cropping
Adjustments Resolutions Treatments

Copyright © 2014 SitePoint Pty. Ltd

 Creative Image Treatments –
Using Pure CSS to Enhance Images
• The border-style property is where the developers of CSS got their
creativity on. Eight visual styles to choose from: dotted, dashed, solid,
double, groove, ridge, inset, and outset—in addition to the invisible
values, none and hidden.

Copyright © 2014 SitePoint Pty. Ltd

 Reference

Materials are from:

The Principles of Beautiful Web Design
by Jason Beaird and James George
Copyright © 2014 SitePoint Pty. Ltd

Copyright © 2014 SitePoint Pty. Ltd