Images | 383 Graphic Design III

jpg For most photos, a .jpg will have the smallest file size.	gif Used for transparent back, animated gif; smaller size for images with large blocks of solid color.	png Used for transparent back.

formatting

Where press files are generally cmyk, web files are always rgb.
Press files are generally 300dpi. For now, web is generally 72dpi.
Most images used on a website will be a specific size and measured in pixels.
When choosing a format for web images, you want to consider size and function.

most importantly:

Resize images. Don’t load print resolutions images onto your website. Smaller files will load faster. This is especially important when we build for mobile devices.
Save for web. Don’t just save as a jpg.

text in images

Text within an image allows you to control typography and achieve a desired effect, but the text is:

not selectable
not searchable
not zoomable
not accessible
not friendly for high-DPI devices.

The use of web fonts is always a better choice for displaying text.

alt text
alt : <img alt=”text”>

The alt tag provides alternate text for an image

provides accessibility for those using screen readers
provides text if image is loading slowly
provides text if images is not linking

Images placed in the css are defined to have only aesthetic value. You are not able to apply alt text to a css image. If an image has meaning, then use img element.**

Placing Images on a web page

You can place an image with just html. It will float to the top and left. If there is another image before it, this image will stack to the right if there is room, or fall to the next line if there is not room.
<img src=”images/bird.png” width=”500″ height=”507″ alt=”bird with transparent back”>

You can place an image by using html and css together.
The html would read as: <div class=”bird” img alt=”drawing of raven”></div>. Click here to see my example of both html code versions.

The <div> tag (above) acts as a container for the image. The container or div is defined by a class called “bird” and may look like this:

.bird {
position: absolute;   ————> the position is defined by “top” and “left”
left: 400px; ————> this image will be 400 px from the left side of the window
top: 200px;   ————> this image will be 200 px from the top side of the window
width: 500px;   ————> the box containing this image will be 500px wide
height: 507px; ————> the box containing this image will be 507px tall
background-image: url (images/bird.png) ————> this is where the image is found
}

Click here to see my version of the class in the css file.

notes:

In the html, the class is written as “bird” (no period) and in the css, the class is written as “.bird” (with a period).
The width and height define the box that contains the image. If the width and height are smaller than the image, the image will not show in its entirety.
If the width and height are larger than the image, the images will repeat itself. You can add “background-repeat: no-repeat;” to the css to avoid repeating. Or you can build the box the exact size of the image to show the image only once.
All images should be kept in an “images” folder in the root level of your site.

Using channels to create a png:

In class I demonstrated with a black and white image, but it can also be done with color images, especially those on a white or near white background. For color images, rather than creating a new layer, use the selection to delete the background on the image layer.

Open image in Photoshop
Select all
Open channels window (window -> channels).
While in the channels dialog box, create a new channel with the page turn icon at the bottom of the window.
Paste. Your image should show up in black and white.
Work with levels (image -> adjust -> levels) and brush tool to create absolute whites and blacks. Grays area will be semi-transparent.
Invert the channel. (image -> adjust -> invert)
Select the channel you are working on. (Alpha 1?)
Make a selection of it by hitting the circle with dashed lines at the bottom of the channels dialog box. (Or option-click on the icon box for the channel.)
Inverse the selection. (select -> inverse)
Go to the layers pallet.
Create a new layer.
Fill the selection.
Save for web as a png.

exercise :

Clean up your poem image as demonstrated in class.

Save in unit_1/images folder.
Place the images on a web page as demonstrated here.
Make sure you use both methods (html and css) to place the image.
FTP necessary files to your site.
View it in a browser. Review and adjust as needed.

Create a second texture image the same way and place it in the html file.

Note that you will have more design flexibility if your images:

Have transparent background: makes them easy to overlap
Do not have hard edges: they can float in the middle of the page and closely interact with the text. It’s good design to have your text closely interact with the image. But avoid running text over an image. Rarely can both the text and image remain legible.
Are scalable: your images may need to be as large as 1500px wide or high, depending on how you use them in your design. Keep this in mind when scanning them. It would be better to start with a large image and scale it down for your final, than to try and make it larger.

When working on your page layout in InDesign, your images can be: