Css Gimp Tutorial
description
Transcript of Css Gimp Tutorial
![Page 1: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/1.jpg)
CSS Classes and GIMP Tutorial
Sunpreet [email protected]
(prefix subject with “[hist481]”)
Feb 25, 2008 HIST 481
![Page 2: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/2.jpg)
2
Overview
Styling a class of page elements
Assigning classes to content
Using CSS editor to associate styles
Removing classes from content
Exercise
Introduction to GIMP
Concepts: images, layers, selections
Creating a simple image
Saving images for web sites
GIMP Resources
![Page 3: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/3.jpg)
3
Styling a class of page elements
A class attribute allows us to associate
style information to different elements
An element can be assigned one or more
class names
A class name can be shared by several
elements in a web page
What would we use class attributes for?
– Styling date, time, image labels
– Styling image captions, navigation elements, etc.
![Page 4: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/4.jpg)
4
Assigning classes to content
1) Create a blank page,
and add some text as
shown.
2) Select “internal web
site” and insert link with
http://www.uvic.ca as
location, and select
“external web site” and
insert link with
http://www.google.com
as location.
We are now going to style internal and external web site links,
that is two classes or categories of information.
![Page 5: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/5.jpg)
5
Assigning classes to content
3) Right-click a link and open
“Link Properties”.
4) Open the Advanced Property Editor.
Choose class attribute and assign
internal-site as value if href is uvic.ca,
or external-site if href is google.com.
To open Advanced Property Editor for
other elements, switch to HTML Tags
mode and right-click the tag of the
element to see it as a menu option.
![Page 6: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/6.jpg)
6
Using CSS editor to associate styles
1) Open CSS editor and create a new rule using the “named style” option.
Enter “internal-site” in the text field to style internal web site (uvic.ca).
![Page 7: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/7.jpg)
7
Using CSS editor to associate styles
3) Now add styles to
external-site class selector.
2) Add styles to internal-site
class selector and see the
elements associated to
internal-site class updated.
![Page 8: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/8.jpg)
8
Removing classes from content
1) Remove the class from text using
Advanced Property Editor.
2) Remove the class from CSS
using CSS editor.
![Page 9: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/9.jpg)
9
Exercise (non-link elements)
Add a few dates (such as “Feb 25, 2008”) as
text to your web page and style them using
“date-label” as class name.
– Create CSS class first to see menu option
– Assign class to date label using menu option
– To remove class assignment, open Advanced
Property Editor from the HTML Tags mode (right-
click tag associated to the date)
![Page 10: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/10.jpg)
10
Introduction to GIMP
GIMP is a tool for performing image tasks:
construction, editing, retouching,
composition.
Supports a large variety of image formats
including GIF, JPEG, PNG
Free and runs on multiple platforms
Native format is XCF, which preserves layers
and your work in progress
![Page 11: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/11.jpg)
11
Concepts: images, layers, selections
An image is the basic entity in GIMP. A single image, such as GIF, JPEG file, is shown in a single display window. Think of an image as a book whose pages are layers.
A layer is a page in the book. An image may contain one or more layers. Layers can be transparent, translucent or opaque.
Selections allow you to change some parts of an image and not others. They are shown by a moving dashed line (aka “marching ants”).
![Page 12: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/12.jpg)
12
Creating a simple image
1) Launch GIMP. 2) Create a new image from the File menu.
![Page 13: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/13.jpg)
13
Creating a simple image
Get acquainted with the main toolbox. Rearrange windows, if
desired.
3) Use the Blend Tool to draw a gradient background.
4) Use the Text Tool to add text.
Example:
![Page 14: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/14.jpg)
14
Saving images for web sites
Three popular formats:
– GIF: supports max. 256 colors, 1 transparent
color; used for small icons; offers loss-less
compression
– JPEG: supports millions of colors; offers lossy
compression but no transparency
– PNG: supports millions of colors and
transparency; offers loss-less compression
![Page 15: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/15.jpg)
15
Saving images for web sites
Use the File menu to save
your image as JPEG.
![Page 16: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/16.jpg)
16
Saving images for web sites
As mentioned, JPEG does not support
transparent. If our image uses
transparency, we’ll see this dialog.
Click Export to continue.
100% offers no compression. 85%
quality offers good compromise
between compression and image
quality.
![Page 17: Css Gimp Tutorial](https://reader031.fdocuments.in/reader031/viewer/2022020206/54690129b4af9f8e0f8b47b5/html5/thumbnails/17.jpg)
17
GIMP Resources
GIMP documentation:
http://docs.gimp.org/en/
GIMP Tutorials:
http://www.gimp.org/tutorials/