Tag Archives: colour

Working with gradients in Adobe Illustrator

This video tutorial explains how to use the Gradient Tool in Adobe Illustrator to combine two or more colours to make a gradient effect. We will look at how to make linear gradients and radial gradients as shown below. Gradients can combine multiple colours or different shades of the same colour.

Linear gradient (left) and radial gradient (right).
Linear gradient (left) and radial gradient (right).

Watch the video below to see how you can use gradients in your own Illustrator drawings and illustrations.

Recording actions and batch processing in Photoshop

In this tutorial, you will learn how to record actions batch process images in Photoshop to save you time and effort when applying the same edits or changes to multiple images. In this example, we will change several images from RGB colour mode to CMYK colour mode.

If you are not sure what RGB and CMYK are, it can be summed up like this: RGB is a colour mode that is used for images that are going to be displayed on screens. CMYK is a colour mode that is used for images that are going to be in print. Watch the video to below to see how several images can be converted from RGB to CMYK in one go.

Create a photo mask effect in Adobe Flash

This video tutorial explains how to create an animated photo mask effect in Adobe Flash. The mask effect uses a motion tween to reveal the colour image on a black and white image. It looks like this:

PhotoMask

To achieve this effect you will need two copies of the same image (one in black and white and the other in colour) and both images should be exactly the same size. You will need to use three layers – one for the black and white image, one for the colour image, and the other for the motion tween and mask. You need to make sure both images are in the same position on each layer.

Watch the video below (or on YouTube) to see how to apply this effect.

Linear gradients

In this tutorial you will learn how to add a linear gradient background to a div. A linear gradient is where one colour gradually changes into another colour.

A linear gradient can change colours gradually from left to right, right to left, top to bottom, or the bottom to top of a div. A gradient involves at least two different colours but can include multiple colours. Below is an example of a linear gradient that involves three colours (dark green, yellow, light green).

Screen Shot 2015-05-14 at 8.25.45 pm

The example above is obviously a dramatic example. Make sure you use colours that work well together and that work well with the rest of the theme on your website. Using different shades of a colour for a gradient can be used to give a div a little depth or a nice shadow effect if used effectively.

Watch the video below to see how to create linear gradients and then scroll down to see the sample HTML and CSS code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Linear gradients</title>
 <link rel="stylesheet" href="resources/stylesheet14.css"/>
</head>
 
<body>
 <div class="round_box">
 <p>This box has rounded corners and a linear gradient.</p>
 </div>
</body>
</html>

Here is the sample CSS code:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-radius:20px;
 background-image:linear-gradient(to bottom, #175E0C, #DBF022, #37DE1C);
}

Styling lines on the canvas

In the previous tutorial we looked at how to draw lines on the canvas. In this tutorial we will style lines on the canvas by changing the following properties:

  • colour
  • width
  • line cap (shape on the ends of a line) for a line on the canvas

The line that we will create will look like this:

Screen Shot 2015-05-08 at 6.58.05 pm

Watch the video below and then scroll down the page to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
 <title>Styling lines on the canvas</title>
 <style>
 #myCanvas{
 background-color:#FFFFFF;
 border: 1px solid #000000;
 }
 </style>
</head>
 
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.lineWidth=20; // specify the width of the line
 ctx.lineCap="round"; // lineCap options are square, round, butt
 ctx.moveTo(50,50); // x,y positions - where the line begins
 ctx.lineTo(250,250); // x,y positions - where the line ends
 ctx.strokeStyle="#0000FF"; // specify the colour of the line
 ctx.stroke(); // draw the line
 }
 window.onload=draw; // run the draw function when the page loads
 </script>
 <canvas id="myCanvas" width="300" height="300">
</body>
</html>

Next tutorial: Joining lines on the canvas

Using colour gradients and patterns

The code below shows how to use linear and radial gradients to fill rectangle shapes.

The three shapes will look like this (linear gradient on top left, radial gradient on top right, image pattern on bottom left side):

Screen Shot 2015-05-08 at 6.53.39 pm

Watch the video below and then scroll down to see the sample code.

Here is the code:

<!DOCTYPE html>
<html>
<head>
 <title>Gradients and patterns</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
 <script>
 var patternImage = new Image();
 patternImage.src = "pattern.png";
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 var gradient = ctx.createLinearGradient(0,0,150,0); // x1, y1, x2, y2 
 gradient.addColorStop(0, "red");
 gradient.addColorStop(0.5, "yellow");
 gradient.addColorStop(1, "green");
 ctx.fillStyle = gradient;
 ctx.strokeStyle = "blue";
 ctx.fillRect(0,0,150,75);
 ctx.strokeRect(0,0,150,75);
 
 var gradient2 = ctx.createRadialGradient(350,100,0,350,100,200);
 // ctx.createRadialGradient parameters are x1, y1, r1, x2, y2, r2
 gradient2.addColorStop(0, "yellow");
 gradient2.addColorStop(1, "blue");
 ctx.fillStyle = gradient2;
 ctx.strokeStyle = "blue";
 ctx.fillRect(250,0,200,200);
 ctx.strokeRect(250,0,200,200);
 
 var pattern = ctx.createPattern(patternImage, "repeat");
 ctx.fillStyle = pattern;
 ctx.strokeStyle = gradient;
 ctx.lineWidth = 20;
 ctx.fillRect(20,150,200,200);
 ctx.strokeRect(20,150,200,200);
 }
 window.onload=draw;
 </script>
</head>
<body>
 <canvas id="myCanvas" width="500" height="400">
</body>
</html>

Next tutorial: Simple animations using JavaScript

Styling lists

In one of the earlier tutorials we looked at how to create lists in a HTML web page. In this tutorial we will look at how to style both ordered and unordered lists using CSS code. We can style lists by changing circles to other shapes such as squares or arrows, or we can make lists ordered by letter instead of number, as an example.

Take a look at the example below where the order list has been styled to use letters instead of numbers, and the unordered list has been styled to use squares instead of circles.

Screen Shot 2017-04-14 at 4.41.21 pm

By adding the code display:inline; for the li element in your CSS code you can also show list items horizontally instead of vertically, as seen below.

Screen Shot 2017-04-14 at 4.43.34 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling lists</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet12.css" type="text/css"/>
</head>
<body>
 <h2>Cities</h2>
 <ol class="cities">
 <li>Sydney</li>
 <li>Melbourne</li>
 <li>Brisbane</li>
 <li>Perth</li>
 </ol>

 <h2>Countries</h2>
 <ul class="countries">
 <li>Australia</li>
 <li>France</li>
 <li>Canada</li>
 <li>New Zealand</li>
 </ul>
</body>
</html>

And here is the sample CSS code:

ol{
 list-style-type:lower-alpha;
 color:blue;
}

ul{
 list-style-type:square;
 color:green;
}

You can also add the following to your CSS code if you want list items to display horizontally:

li{
display: inline;
}

Styling your links

By default, links on your website will usually be blue and when the pages are linking to have been visited, the links will turn purple. However, we can customise the style of links. For example, we can change the colour or text decoration when a link has been visited, when the mouse hovers over a link, or when the mouse is clicking on a link.

The different link states that we can apply styles to are:

  • a:link (an unvisited link)
  • a:visited (a visited link)
  • a:hover (when the mouse is hovering over a link)
  • a:active (while the mouse is clicking on a link

Take a look at the animated example below. We have links which are orange and with no underline. However, when the user moves their mouse over these links they change to a dark blue colour and are underlined.

styledlinks

Watch the video below and then scroll down to see the sample HTML & CSS code and some further notes.

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling links</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet10.css" type="text/css"/>
</head>
<body>
<h1>Styling links</h1>
<p>By default, links on your website will usually be blue and when the pages are linking to have been visited, the links will turn purple. However, we can customise the style of links. For example, we can change the colour or text decoration when a link has been visited, when the mouse hovers over a link, or when the mouse is clicking on a link.</p>
 
<a href="#one">One</a><br>
<a href="#two">Two</a><br>
<a href="#three">Three</a><br>
<a href="#four">Four</a><br>
<a href="#five">Five</a><br>
 
<h1> <a name="one"></a>One</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="two"></a>Two</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="three"></a>Three</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="four"></a>Four</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<img src="resources/canada.jpg" width="300" height ="200"/><a name="five"></a>
 
 
</body>
</html>

And here is the CSS code:

a:link{
 color:#FF8000;
 text-decoration:none;
}
 
a:visited{
 color:#FF8000;
 text-decoration:none;
}
 
a:hover{
 color:#B45F04;
 text-decoration:underline;
}
 
a:active{
 color:#DF3A01;
 text-decoration:underline;
}

Just a few rules to take note of:

  • There is an order when specifying the style for several links
  • When specifying the style for several links, a:hover must come AFTER a:link and a:visited
  • a:active must always come after a:hover

Child selectors

In this tutorial we will have a look at the parent/child relationship in CSS. All elements in an HTML document can be both parents and children, except for the body which can only be a parent. A div can be a child of the body or another div. A paragraph, heading, or other element can also be a child of the body or another div.

For example, if you place a <h1> heading inside a div, then the div is the heading’s parent and the body would be the div’s parent. This is called the parent/child relationship in CSS. We can use child selectors in CSS to apply styles to elements that are a child of another element such as a div or table. The image below illustrates the parent/child relationship in CSS.

The parent/child relationship in CSS.
The parent/child relationship in CSS.

The video below shows how to use child selectors in CSS to apply styles to child elements in an HTML web page. Watch the video below and then scroll down to see the HTML and CSS code.

Here’s the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Child selectors</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet7.css" type="text/css"/>
</head>
<body>
<div>
 <p>This paragraph has a parent div.</p>
</div>
<p>This paragraph does not have a div as a parent.</p>
<div id="myparagraph">
 <p>This paragraph is a child of another div.</p>
</div>
<p>This is another paragraph without a parent div.</p>
</body>
</html>

And here’s the CSS code:

p{
 color:blue;
}
 
div p{
 color:red;
}
 
#myparagraph p{
 color:green;
}

Background images and colours

This tutorial explains how to add a background image to divs and the body section of your web page. It also explains how to have fixed background images (that don’t scroll with the content of your web page) and change the placement of background images. You will also see how to add background colours behind background images.

In the example image below, there is a div inside the body of the page. The body has a background image (a greyish gradient) while the div has a light green background.

Screen Shot 2017-04-14 at 4.30.34 pm

Watch the video below and then scroll down to see the sample code.

Below is the sample code for the HTML file. If you add more content to your page so that the page can scroll down, you will notice that the background image doesn’t move because it is set to a fixed position in the CSS code. Note that the HTML code refers to CSS in a separate stylesheet file (called stylesheet4.css and stored in a resources folder).

<!DOCTYPE html>
<html>
<head>
 <title>Background images</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet4.css" type="text/css"/>
</head>
 
<body>
 
 <div>
 <h1>This is a heading</h1>
 <p>This is a paragraph</p>
 </div>
 
</body>
 
</html>

Here is the sample code for the CSS file (it’s called stylesheet4.css and stored in a resources folder):

body{
 background-image:url("nepal.png");
 background-color:blue;
 background-repeat:no-repeat;
 background-attachment:fixed;
}
 
div{
 width:450px;
 height:300px;
 background-image:url("canada.jpg");
 background-repeat:no-repeat;
 background-position:center top;
}

Using CSS to style your webpage

CSS stands for Cascading Style Sheets and is a style sheet language that is used to describe the look and style of web pages. CSS can be used to create a theme by modifying the layout, colours, and fonts.

Without any special styling or formatting, the web pages that we create don’t look very exciting. That’s where CSS comes in! We can use CSS to change the colour of text and backgrounds, use different font styles, and change the layout and overall theme of our site. This tutorial explains how to use CSS in a webpage.

There are three different ways of applying CSS:

  • Inline styling – the style attribute is applied within the HTML tag
  • Internal style sheet – style attributes are applied to selectors inside the head section of a webpage
  • External style sheets – style attributes are applied in a separate CSS file that can be used across a website

Below is an example of how to use inline styling within a HTML tag:

Inline styling
Inline styling

Below is an example of how to place the styling within the style tag inside the head section of a webpage:

Adding CSS using the style tag in the head section.
Adding CSS using the style tag in the head section.

This video tutorial will focus on using inline styling and internal style sheets. The next tutorial will explain how to use external style sheets. Watch the video below to see how to use CSS and then scroll down to see the sample code.

The sample code below shows how to use inline styling:

<!DOCTYPE html>
<html>
<head>
 <title>Adding CSS to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
 <h1 style="color:red">This heading is red.</h1>
 <h2 style="color: #FE2EF7; border: solid 1px">This heading is pink with a border</h2>
 <p style="color:blue">This text is blue.</p>
 <p style="color:green; background-color: yellow">This text is green on a yellow background</p>
</body>

</html>

The sample code below shows how to use an internal style sheet:

<!DOCTYPE html>
<html>
<head>
 <title>Adding CSS to a webpage using internal stylesheets</title>
 <meta charset="utf-8"/>
 <style type="text/css">
 p{
 color:blue;
 }
 </style>
</head>

<body>
 <p>This is a paragraph of text. Because a style has been applied using the p selector, this paragraph will be blue.</p>
</body>

</html>

Tip:

The sample code for inline styling uses the HTML colour code #FE2EF7 for the colour pink. You can use the names of colours  for basic colours such as ‘blue’ or ‘red’ but for other specific colours you will need to use the HTML colour code (a combination of letters and numbers after a hashtag). You don’t need to remember all the colour codes but it is good to remember  #000000 for black and #FFFFFF for white. You can see all the colour codes here.

How to use gradients in Adobe Flash CS6

You can use gradient colours in Adobe Flash CS6 for shapes that you have drawn using the pencil/brush tools or the shape tools. You can create two types of gradients: Linear gradients and Radial gradients. Gradients can combine two or more colours and you can customise the distance between the different colours as well as the angle they follow. You can specify the colour gradient when you create a shape or later on by filling with the paint bucket tool. Watch the video below or click here to view it on YouTube.