Download webpage_images_formats_code

Computer Graphics Formats
In this writing we will concentrate on Internet and screen graphics. If we were
reviewing Printed design, I would have some different formats and CMYK color
space.
Internet and screen design graphics are primary made up of Bitmap Graphics.
http://en.wikipedia.org/wiki/Raster_graphics These are graphics that are made of
Pixels. Pixel is short for Picture Element. These are tiny square dots that are in the
graphics as well as in the screen. If you were to look at you computer monitor with a
magnify glass you would see small square dots. There are dots in both the screen
and the graphics that are displayed.
Color Space - http://en.wikipedia.org/wiki/Color_depth RGB - Red, Green, and Blue.
Three colors can be mixed together to produce over Million colors in each pixel.
Color Depth - Depending on the file format the colors can be in 32 bit, 24, bit, 16 bit,
8 bit, and 1 bit. Each bit depth will determine how many colors can be in each pixel.
http://en.wikipedia.org/wiki/Color_depth
DPI and PPI – Pixels are the dots, but How many Dots do we use? DPI is Dots Pre
Inch – we use the DPI when we are measuring dots for a printer. PPI – Pixel Pre Inch
– we use the PPI when we are measuring the dots for a screen/display. We really
don’t think too much about DPI. Most of use just shoot photos with our cell phone,
upload them to Instagram and share with friends. Please read and understand
http://en.wikipedia.org/wiki/Pixel_density
Web Page Design - most of the time we will use 72 PPI. So it is best to open each
image/photo you like to place on a web page and make sure the PPI is at 72. To do
this in Photoshop use the Image>Image Size option.
Display Resolution – Probably the hardest concept to understand is how to
determine what size to place you images on a web site. The problem comes down to
the resolution of the monitor. Not only do we have PPI, but the PPI relates to pixel
dimension. This is how many pixel horizontal and vertical. Computer monitor have
different sizes. Some new monitors have higher resolutions than the standard 72
PPI, like the Apple Retina display. http://en.wikipedia.org/wiki/Display_resolution
> A good rule is that the Pixels in the image want to match the pixels of the
display in the web browser.
Lets look at the Photoshop Image Size Option.
I was changing a photograph the image size options to 72 resolution. The Pixel
Dimension also was changed. At the current size 783x500 pixels. This image would
take little more than half the screen on laptop monitor. My mac monitor is around
1440x830 pixels.
Computer Graphics Programs - Raster-based image editors, such as Painter,
Photoshop, Paint.NET, MS Paint, and GIMP, revolve around editing pixels, unlike
vector-based image editors, such as Xfig, CorelDRAW, Adobe Illustrator, or Inkscape,
which revolve around editing lines and shapes (vectors). When an image is
rendered in a raster-based image editor, the image is composed of millions of pixels.
At its core, a raster image editor works by manipulating each individual pixel. Most
pixel-based image editors work using the RGB color model, but some also allow the
use of other color models such as the CMYK color model.
Working files – these are files that we use to make content, but don’t usually put on
web sites or cell phones. For example – I will layout a look of a web site in
Photoshop. This layout will include buttons, logo, and photos. As I am working on
this file I will save as a Photoshop file .PSD, but I do not put this .PSD file on a web
page. I will save the individual parts of this file as a JPEG/PNG and then using HTML
program these files onto a web page.
Working formats
.PSD – Photoshop Format
.Ai – Illustrator File
.BMP – Bitmap format
.TIF - Tagged Image File Format
Common Internet and Web Page Graphic Formats
Most of all these formats are compressed. What does that mean?
http://en.wikipedia.org/wiki/Lossy_compression - information is removed from
the file to make the image smaller. This is important so the files download faster on
the Internet. Like the MP3 is a compressed audio format.
JPEG – Joint Photographic Experts Group - http://en.wikipedia.org/wiki/JPEG Extension .jpg – This is probably the most popular web format. This format is in 24
bits. The image is in full color. Best to use for Photographs. Problems with JPG
format is the image tend to be blocky, because of the compression.
PNG - Portable Network Graphics http://en.wikipedia.org/wiki/Portable_Network_Graphics - Extension .png This is a
good format to use for web pages. The PNG can be 24 Bit and contain an Alpha
Channel. This allows for images with smooth edges.
GIF - Graphics Interchange Format - http://en.wikipedia.org/wiki/GIF - This is
one of the original Internet formats. Problems is that the graphic are only 8-Bit. And
Patented own by CompuServe. Can have animation. Also, a transparent pixel.
Because of the 8-Bit the images tend to have a dither problem.
SVG - Scalable Vector Graphics http://en.wikipedia.org/wiki/Scalable_Vector_Graphics - A Vector based
format graphic format. Limited in photo quality. More for simple graphics. Easy to
save out of Adobe Illustrator. Problems with possible browser support.
There are many new formats that are being offered by companies like Google.
http://en.wikipedia.org/wiki/Image_file_formats
Which one to use – I primary use PNG or JPG.
Images in Dreamweaver and HTML
Insert Images into Dreamweaver using the Insert>Image
Making Images for backgounds – I usually will not use many images in the
background, I find them distracting from the content. But I make sure a small image
for a little part of the background to add to the design. For example on my site I have
a small red and brown line at the top of the page.
This is done by make a small vertical image that is repeated horizontal across the
page using CSS.
Above is a small gradient image that can be repeat across the top of a page to add
soft background to a site.
In dreamweaver use the Modify>Page Properties - - or just change the CSS for the
Body
Then you can use the Background image option> Repeat-x
If you want to type the code:
<style type="text/css">
body { background-image: url(small_gradient_for_top.jpg);
background-repeat: repeat-x;
}
</style>
Another example many students like to try is a fixed background. This is a
background that stays the sample no matter how far you scroll. I don’t see this used
much but here is how.
Dreamweaver – using the CSS styles window, you need to change the body tag to
You should have a fixed background
Code way:
<style type="text/css">
body { background-image: url(background_sample.jpg);
background-attachment: fixed;
}
</style>
How to resize images in Photoshop
Probably the easiest way is to use the Image>Image Size Option
Make sure the Resolution is at 72 DPI
One problem is that the ratio is fixed – so as you change the width the height
changes as well.
Make sure to choose a size that will fit on your screen.
If you want exact size use the crop tool and type at the dimensions in the option bar.
Then crop the image.
Again I would save the images as a JPG
To make the background image for a full screen web pages.
First I would Crop the image to the size of the screen I was targeting, for example my
laptop is 1400 x 900
Then Since a full color background would be very distracting, I would fill the image
with a tint of color. Like 70% white.
You should have a soft white image.
This is just a small part of the screen, but you see the soft white.
To make the nice gradient background
I start with a new file New>file and type the size vertical that I want the gradient to
go down, the width can be very small because the image will repeat. In my example I
used 50 height and 5 width.
Using the gradient tool I choose the colors and drag a line to make the gradient.
You can even add these nice image gradients too the background of a DIV
Making the Favicon
The Favorite Icon is a popular way to add an image to the address bar.
Some examples.
Here is the technical - http://en.wikipedia.org/wiki/Favicon
In Photoshop or any paint program – File>New
I make the image 16x16 or 32x32. It really doesn’t matter, but the final image will
display at only 16x16 pixels.
In the program you are faced with a tiny box. You can zoom in to draw. Mac –
Command + on Windows Control +
Create any image you like, I have just used the brush tool to make a number 2
Save the image in the BMP format, But don’t use the BMP extension, Change the
extension to ICO, Also easiest to name the file favicon.ico
You will need to save the image in the same directory as your home page, the
index.html page
The code is very simple – Place in the head section of your web page.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
This only needs to be in the home page all other pages in the web site do not need to
code.
<!doctype html>
<html>
<head>
<meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon"
href="favicon.ico" />
<title>Favicon sample</title>
</head>
<body>
</body>
</html>
Here is the basic code, if it was not working you probably.
Save the file in wrong directory
Save the file as wrong format
Type the code wrong.