Tag Archives: image

Video, Xamarin & C#

Adding thumbnail images to list rows in the iOS List App with Xamarin

This tutorial will show you how to add a thumbnail image to each row of the Cities list in the iOS List app we made in the previous two tutorials. This is what the app will look like…

image1

Step 1

To get started, open the Main.storyboard file in the iOS List App solution. Resize the labels on the table row on the main screen and move them to the right side of the table row. Then drag an ImageView element from the toolbox on to the left side of the table row. Change the ImageView element’s name to cityImageView.

image2

Step 2 

Make sure you have added your images to your project (this was explained in the previous tutorial).

image3

Also make sure you have added public string ImagePath; to your code as seen on line 76 of the CitiesViewController.cs file below (this was also explained in the previous tutorial).

Click image to see larger version.
Click image to see larger version.

For each city in your list, you should also have specified the ImagePath value (location of the image and its filename) in the CitiesViewController.cs file.

Click image to see larger version.
Click image to see larger version.

Step 3

In the CityTableViewCell.cs file, add the following highlighted line to set the image displayed for each row of the City class. This will get the images to display on each row. Save all of your files.

image6

Step 4

Now just go and test your app. This is what the thumbnail images should look like:

preview

Illustrator, Video

Laser engraving a bitmap image using Illustrator

Do you have an image that you’d like to laser engrave on to the surface of a material such as timber or plastic? If it is an image that has a lot of detail and you would rather not just engrave the outlines of the shape (using the image tracing tool), then follow this tutorial!

Step 1

Find the image you would like to use. It should have good contrast. Once you have a suitable image, copy it to the clipboard. For this tutorial, I will use the image show below (left). It will end up looking like the image shown below (right).

it1

Step 2

Open Adobe Illustrator and click File > New to begin working on a new document. Make sure you change the Profile to Basic RGB, then change the document width and height to suit your preferences and click on OK.

it2

Step 3

Click on Edit > Paste to paste in the image that you copied earlier.

it3

The image should appear in your document. Resize the image to suit your preferences.

it3b

Step 4

Grab the Selection tool (the black arrow) and click on the image to make sure it is selected. Then click Image Trace on the top toolbar (if you don’t see this option on the toolbar, click Object > Image Trace > Make). If you see a warning message telling you that image tracing may take a while, just click OK. It may take a few seconds to process the image.

it4

Step 5

After the image has been traced, change the Preset from Default to Shades of Gray. You can do this from the toolbar. Illustrator will take a few seconds to process the image (or longer depending on the size and quality of the image).

it5

And that’s it! The image should look like the one shown below. Now when you send the document to your laser cutter, it should engrave the image using a different laser engraving intensity for the different light and dark parts of the image.

it5b

If you need to do any other editing, such as changing the shape of the image then it is best to do this in a photo-editing program like Photoshop before copying it into Illustrator. Remember, Illustrator is not a photo-editing program – it is a drawing and illustrating program.

Download the PDF file
Download a PDF copy of the instructions.
HTML5 and CSS3, Video

Automatic image slideshow

If you would like to display several images on a webpage, rather than making the user scroll down the page to see a lot of separate images, you can add an effective image slideshow which cycles through several images without making your user leave their position on the page.

Take a look at the example below which cycles through three images and then repeats the slideshow.

slides

If you would like to add an image slideshow to your page then you can use the code below. You can modify the code if you’d like to add transition effects (eg. fade) or navigation buttons (eg. pause, back, forward).

<!DOCTYPE html>
<html>
<head>
  <title>Slideshow</title>
  <style>
    .slides{
      display:none;
    }
  </style>
</head>
<body>
  <div class="slideshow_div" style="max-width:500px">
    <img class="slides" src="image1.jpg" style="width:100%">
    <img class="slides" src="image2.jpg" style="width:100%">
    <img class="slides" src="image3.jpg" style="width:100%">
  </div>
  <script type="text/javascript">
    var myIndex = 0;
    slideshow();

    function slideshow(){
      var item;
      var slides = document.getElementsByClassName("slides");
      for(item=0; item<slides.length; item++){
        slides[item].style.display = "none";
      }
      myIndex++;
      if(myIndex > slides.length){
        myIndex = 1;
      }
      slides[myIndex-1].style.display = "block";
      setTimeout(slideshow,4000);
    }
  </script>
</body>
</html>

This code is free for you to use and modify as you wish.

Unity 3D, Video

How to apply materials, shaders and textures to objects in Unity

This video tutorial explains how to create materials in Unity so that you can change the colour of 3D objects. The video also explains how to use shaders and image textures textures in Unity.

Before you watch the video, here is a brief rundown of the differences between materials, shaders and textures:

  • Materials contain properties and textures. Materials can be directly applied to a 3D object.
  • Shaders dictate which properties and which textures that a material can have. Shaders are not directly applied to models but are instead applied to materials.
  • Textures are also applied to materials. Textures are flat images that can be wrapped around 3D objects. These images often contain repeating patterns such as a brick wall.

The images below show three different materials. The first material has a standard shader applied to it. The second material has a specular shader applied to it for increased shininess. The third material has a diffuse shader and a brick wall texture applied to it.

Standard shader with red colour.
Standard shader with red colour.
Specular shader with red colour.
Specular shader with red colour.
Diffuse shader with brick wall image texture.
Diffuse shader with brick wall image texture.

 

Maya 3D, Video

How to use an image file as a texture in Maya

This video explains how to use an image file (eg. a JPEG) as a texture for an object in Maya. You can use an image to texture an entire shape or plane, or just selected faces of a shape. Watch the video to find out how. You can also download printed instructions from here.

Note: To apply a texture to just selected faces of a shape rather than the entire shape, right-click the shape and click on Face to enter Face Mode. You should then be able to select individual faces and right-click to assign a material to selected faces. This allows you to use different textures for different sides of a shape.

HTML5 and CSS3, Video

Aligning images to left, right and center

In this tutorial, we will look at how to align images using HTML5 and CSS. There is an align attribute for the img tag, however this is not compatible with HTML5 so we will look at aligning images using CSS instead.

Aligning to left or right

If you want to align an image to the left or right, then use the float property (explained in another tutorial here). If you want to align an image to the middle of a page, then read on…

Aligning to middle

If you want to align an image to the middle of a page, then you can use the CSS vertical-align property. You could use it in inline CSS code or in a stylesheet. To align an image to the middle of the page, you give the vertical-align property a value of middle.

If you use the vertical-align property using inline CSS, then it might look like this:

<img src="myimage.png" vertical-align="middle">

If you use the vertical-align property in a stylesheet, then  you might apply the vertical-align property to the img tag or you could give the image a class or ID and then apply the vertical-align property to that class/ID. In a stylesheet, your code might look like this:

img{
   vertical-align: middle;
}

 

Flash, Video

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.

HTML5 and CSS3, Video

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;
}
HTML5 and CSS3, Video

Adding images to a webpage

This tutorial explains how to add images to your web pages using the HTML <img> tag. You can specify a number of attributes for an image including the following:

  • src – specifies the location or path of the image
  • width – specifies the width of the image
  • height – specifies the height of the image
  • alt – specifies alternative text to be displayed in case the image cannot load.

The structure of an <img> tag may be set out like the one below:

Here are a few important things to note:

  • You should aways use alt text in case the image cannot be loaded in the user’s browser

    This is what alt text looks like when an image can’t load:
    alttextAlt text often also shows up after a few seconds when the user hovers their mouse over an image.

  • The path and filename of the image specified in the src tag in your code must be exactly the same as the actual file
  • You should specify the width and height of the image so the correct space is set aside even if the image can’t be loaded
  • You can change the width/height of an image to make it smaller. However, it is a good idea to make the image the correct size in the first place to reduce the time it takes to download the image

Watch the video below to see how to use the <img> tag in your own web page and then scroll down to see the sample code.

This sample code shows how to add an image to a webpage. Copy this code into a new HTML file. Modify the width and height of the image in the code to suit your own image file and experiment with different size images.

<!DOCTYPE html>
<html>
<head>
 <title>My webpage</title>
 <meta charset="utf-8"/>
</head>
<body>
<img src="batman.png" alt="Batman" width="400" height="400"/>

<!-- Make sure you include the full file path of an image if it is located in a different folder eg. folder2/batman.png 
-->
</body>
</html>

How to make an image a link

If you want to make an image a link so that when the user clicks on image they are taken to another page, you can just place the image tag inside the link tag (instead of text for the link). As an example, the following code would take the user to ‘other_page.html’ when they click on the image which has the file name ‘your_image.png‘:

<a href="other_page.html"><img src="your_image.png"/></a>

After watching the video, answer the following questions for discussion before the next lesson:

  1. Which unit of measurement is used to specify the width/height of an image in the code? How could the use of this unit affect the way images are displayed on screens of different sizes?
  2. Are there any other units of measurement that can be used?
  3. What could cause an image to fail to load in a user’s browser?
  4. Why is it important to use images with smaller file sizes?
  5. What issues need to be considered before including images on a web page?
  6. Evaluate the effectiveness of using images to convey large amounts of information on a web page.

Now create your own web page using several of your own images combined with text. You can use the sample code above to get started.

Once you are ready to move on, click here to find out how to add audio to your web pages.

HTML5 Canvas, Video

Animating an image using JavaScript

This tutorial shows how to animate (move) an image across the screen. You can combine the code with other code from previous tutorials such as the one on timed image swapping to also get images to swap while they are moving (eg. you could use two images for a character with legs in different positions, so as the images swap it looks like the character is running).

You will need an image to use in your animation. Keep the image file in the same folder as your HTML file. In the sample code below, the image’s file name is image.png (a PNG image file). Start and stop buttons have also been added to start/stop the animation. This is what the animation will look like:

imageanimated

Refer to the comments in the code below to find out what is happening on each line.

<html>
<head>
<title>JavaScript Image Animation</title>
<script type="text/javascript">
<!--
var imgObj ;
var animate ;
function init(){
 imgObj = document.getElementById('myImage');
 imgObj.style.position= 'relative'; 
 imgObj.style.left = '0px'; 
}
function moveRight(){
 imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px'; // move from the left 5 pixels
 animate = setTimeout(moveRight,20); // call moveRight in 20 milliseconds
}
function stop(){
 clearTimeout(animate); // stops the animation
 // add imgObj.style.left = '0px'; if you want to reset the image back to the left side of screen
}
window.onload =init; // starts animation when page loads
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="image.png" width="100" height="100"/>
<p>Click the buttons below to start and stop the animation.</p>
<input type="button" value="Play" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>

Next tutorial: Keyboard events in JavaScript

JavaScript, Video

Swapping images using an interval timer

In the previous tutorial, we were able to swap an image with another image every time we clicked on it. This time we will swap an image using an interval/timer, so that the image will change every second (or whatever interval value we specify).

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

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Using a timer to change an image</title>
 <script type="text/javascript">
 
 /* In the previous tutorial, we changed an image by clicking on it.
 This time the image will change by itself over time.
 This could be used for an ad banner that changes every few seconds.
 It uses much of the existing code from the previous tutorial.
 */
 
 var image_tracker = 'orange';
 
 function change(){
 var image = document.getElementById('circle');
 if(image_tracker=='orange'){
 image.src='blue.png';
 image_tracker='blue';
 }
 else{
 image.src='orange.png';
 image_tracker='orange';
 }
 }
 
 // Either the setTimeout() method or the setInterval() method can be used.
 // With the setTimeout() method, it takes two parameters.
 // The first parameter is the code to run, the second parameter is time in milliseconds. 1 sec = 1000 ms.
 // the setTimeout() method only runs once. To repeat, we use the setInterval() method instead.
 // It also uses two parameters, the code to run (or function to use), and the timer interval.
 
 var timer = setInterval('change();',1000); 
 
 // this function is called when the onclick event runs. It stops the timer running.
 function stop(){
 clearInterval(timer); //the clearInterval method stops the timer from running
 }
 
 </script>
 
</head>
<body>
 
<img src="orange.png" alt="Circle" id="circle" onclick="stop();">
 
 
</body>
</html>

Next tutorial: Taking user input from a form

JavaScript, Video

Change an image using the Get Element By Id Method

In the previous tutorial, we changed the innerHTML of an element by using the getElementById() method. This allowed us to change the text in a paragraph when we clicked on the paragraph. That is, the text “Click here” was changed to “You clicked here” once it had been clicked.

We will use the same method, but we will change the source of an image instead. This means that we will have one image on our web page and when the user clicks on that image it will be swapped with another image. In the example in the video and sample code below, an orange circle will be replaced with a blue circle when we click on it.

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

The sample code below shows how to use the getElementById() method to swap an image in a HTML web page. If you are not already familiar with how to include an image in a web page, then you will see how to do that using the img src tag. However, it is recommended that you get familiar with HTML before going much further.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Changing an image once</title>
 <script type="text/javascript">
 
 /* In the previous tutorial, we changed the innerHTML of an element by using the getElementById() method
 We will use the same method, but we will change the source of an image instead.
 */ 
 
 function change(){
 var image = document.getElementById('circle');
 image.src = "blue.png";
 }
 
 
 
 </script>
 
</head>
<body>
 
<img src="orange.png" alt="Circle" id="circle" onclick="change();">
 
 
</body>
</html>

Note that the sample code above won’t work properly unless you have images orange.png and blue.png in the same folder/directory as your HTML file. You can try the code out yourself and make your own images instead.

Next tutorial: Swapping images back and forth using JavaScript

Photoshop, Video

How to make a transparent background for an image in Photoshop CC

Leave a comment

This video tutorial explains how to make a transparent background in Adobe Photoshop CC. You might have a shape or text in an image with a white background that you want to make transparent, or you might have an image that you want to make certain parts of transparent. This video explains how! You can watch it below or click here to view it on YouTube.