Presentation is loading. Please wait.

Presentation is loading. Please wait.

Sliding Doors Tutorial  doors/

Similar presentations


Presentation on theme: "Sliding Doors Tutorial  doors/"— Presentation transcript:

1

2 Sliding Doors Tutorial  http://www.alistapart.com/articles/sliding doors/

3 GIMP: Tab  New Image (420x200)  Select Rounded Rectangle (radius 9)  Color rectangle  Create Border Select  Border (1px) Fill Border with Color  Make corners transparent Layer  Transparency  Add Alpha Channel Select by color  Edit  Cut (Adjust color of corners)  Save image as TabComplete.gif (gif or png support transparency)

4 GIMP: Create Tab  Open complete image Cut left side (9x150) ○ Make sure you cut the whole corner Save as TabLeft.gif  Open complete image Cut right side (400x150) Save as TabRight.gif

5 GIMP: Create Tab  Open complete image Create lower border of tab (color of main page) ○ Select color for lower border (same as other border) ○ Use pencil tool to draw straight horizontal line (hold Shift Key) Cut lower border (20x45) Save as Border.gif  For current tab Copy all three images and change color ○ To change color from indexed to RGB Image  Mode  RGB

6 XHTML/CSS  http://www.alistapart.com/articles/sliding doors/


Download ppt "Sliding Doors Tutorial  doors/"

Similar presentations


Ads by Google