PART 1 of this tutorial is a LinkedInLearning.com tutorial, a basic introduction to Photoshop, in which you will learn how to edit an image and save it as a file that is optimised for the web.
In PART 2 of the tutorial you will learn about the use of background images - and experiment with some of the tools that you can find on the web to help make graphics and generate colour palettes for web page design. if you want to progress to using more advanced CSS3, Step 2.6 has some resources for learning CSS3 properties that can be used to replace digital images.
If you want a basic introduction to how to use Photoshop to edit images for the web, please do sections of this Linked-In Learning video tutorial - https://www.linkedin.com/learning/photoshop-cc-2018-essential-training-the-basics/welcome?u=67552674. You will need to log in to Linked In Learning as a University of Brighton user first. There is information about using Linked In Learning here: University of Brighton page - Using Linked In Learning. I've put the video on the CI435 LinkedInLearning.com playlist if you want to access it that way.
The following sections of the course are all you need to know to create images for your CI435 coursework -
Whenever you make any changes to your web pages remember to save them and preview them in a browser to see how they will display.
Often a web designer will not have a completely free choice with colour - the client will have a logo or brand which will lead to a particular colour being used to identify the site. The following sites can help to generate a colour palette for websites -
Every HTML element is treated as if contained within a box, which means that it has a background
property that can be styled (see Lecture 4). Rather than inserting images into the HTML document
using the <img> tag, it is possible to put image files into the
background of elements such as divs, text block elements and links. This should only be done for
images that are for presentation and decoration - not for images that are part of the web page content.
<body>Very small images can be put into the background of elements and tiled - i.e. repeated across the x and y axes - to form a pattern. Attach the background image as in the example below. It's also possible to use the full URL to identify the image source e.g. if it is hosted on another web server. The background-color property should always be declared as a fallback, particularly for images hosted on external websites.
body {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFDC;
font-size: 100%;
line-height: 1.2em; background-color: #333; /*fallback - solid colour*/
background-image: url(images/tableStripe.png); /*or url(http://www.website/images/tablestripe.png)*/
This Stripe Generator tool is a good resource for making a very small background image that will tile.
If you want to put a larger image in the background of an element - or the page <body> - and turn
off tiling, use the background-repeat property in the rule.
There are four possible values -
background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat;
repeat-y will cause the image to tile vertically;
repeat-x will cause it to repeat horizontally.
It is possible to fix the position of a large, non-repeating background image in the body selector
by using the background-attachment property. Doing this means that while
the page content will scroll up and down the background image will remain stationery creating a parallax effect. Two values are
possible -
background-attachment: scroll; background-attachment: fixed;
For more information about all the CSS background properties see this MDN page - https://developer.mozilla.org/en-US/docs/Web/CSS/background
One of the finishing touches to a website is to make a favicon - the small image that appears in the browser address bar or tab, next to the page title. These are an important way to brand a website. You can either make a favicon from scratch by creating a small bitmap image; or reduce a small (and simple) image to favicon size. The permitted file formats are ICO, PNG, GIF and JPEG. The image should be square; for the ICO format, icon files can be 16x16, 32x32, 48x48 or 64x64 pixels in size.
The following websites provide tools for making your own favicon -
You will need to put a link to your favicon image file in the <head> of the your HTML documents -
<link rel="icon" type="image/ico" href="foldername/filename.ico">
For more information see -
One of the big gains of CSS3 is that there are many properties that can be used instead of digital image files. This reduces the number of HTTP requests the web browser has to send to the web server to retrieve asset files, decreases page loading time and the data download overhead - very important, particularly when users are accessing the web on mobile devices. If you want to find out about the CSS3 alternatives to background images take a look at the following web resources:
border-image generator - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generatorIf you have not had time to complete the tutorial please carry on and finish it in your own time. If you have any questions email Jennie Harding.