Tip:
Highlight text to annotate it
X
Hello everyone and welcome to Chapter 3! My name is Dr. Theodor Richardson and I will
be guiding you through some vital steps in creating a multimedia Web site. In this
video, you will learn how to create images quickly for a Web site. This is not the
professional method, but it will work when you are just learning the design and
development process to save you considerable time.
The professional standard for photo editing and image creation is Adobe Photoshop.
The professional standard for photo editing and image creation is Adobe Photoshop.
However, it has a steep learning curve which can be daunting when you are just
learning HTML. Fortunately, there are faster ways to create images to use on your Web
pages. You can start with your visual design for the page.
Isolate the element you want to turn into an image. In this case, we will select the coffee
cup. To isolate the element, you just need to place it against a blank background or
one with a solid color. If you want transparency in the image, then you need to select a
background color that can be deleted without changing the picture. Since the cup is white
and does not contain blue, it is placed against a blue background which we will remove
.
.
If you are using PowerPoint for your design as recommended, you can use the Save As command
If you are using PowerPoint for your design as recommended, you can use the Save As command
under the File menu to save your slide as an image. For this step, you want to use
Bitmap as the format since it will be lossless. If you are using a different program that
cannot save the file as an image, then use a Print Screen command and paste the screen
into Microsoft Paint.
In Paint, you can use the selection tool to choose which part of the image you want to
use, copy the selected portion (using Ctrl+C), and then create a new image using the file menu.
Paste the copied element and use the grip points on the canvas to resize the canvas to fit
your image. If you want to keep a background color, save the image as a JPG since it is the
best format for the Web. If you want transparency, then save your image as a Bitmap. You
will have a few more steps in this case.
The next step is to use the Bitmap or PNG to get rid of the background. For this, you can
use the online image editor by Pixlr. Select “Open image from computer” and choose the image
you saved.
With the image open, use Ctrl + A to select the whole image, press Ctrl + C to copy the
image and then create a new image from the File menu. Be sure the checkboxes for “Create
image from Clipboard” and “Transparent” are selected. Then click OK. This will
create a new image from the clipboard.
Select the wand tool and click on the background color. This will highlight the background
color, so you can just press Delete to empty the area.
Use Save As to save the final image. If you want transparency in your image, save it as a PNG
with transparency. Any empty area of the image will be invisible when it is placed on
your page.
If you like this video and want to learn more, you can buy my book Multimedia Web Design and
Development available from Mercury Learning and Information. Also available at
Amazon.com.